Hi,
The design and web part of our company recently launched our new website http://www.wimaxforum.org and we are having a few issues. We use Jquery on our site and it seems that when people who have older browsers, like older versions of IE 6 (which they can't up grade because their IT staff has their computers locked up so they can't do updates on their own), the site crashes. We have 500 MB of php memory available to us on VPS hosting and I'm not sure what to do.... Any suggestions? One thing has been bothering me is that I have some jquery on our template file, however, I'm not sure where else to put it or how to format it properly.
Here is an example:
<script type="text/javascript">
$(document).ready(
function(){
if($('body.front').length > 0){
$('#portfolio').innerfade({
animationtype: 'fade',
speed: 'slow',
timeout: 5000,
type: 'sequence',
containerheight: '172px'
});}
if($('body.front').length > 0){
$('#portfolio2').innerfade({
animationtype: 'fade',
speed: 'slow',
timeout: 5000,
type: 'sequence',
containerheight: '172px'
});}
if($('body.front').length > 0){
$('#portfolio3').innerfade({
animationtype: 'fade',
speed: 'slow',
timeout: 5000,
type: 'sequence',
containerheight: '172px'
});}
if($('body.front').length > 0){
$('#portfolio4').innerfade({
animationtype: 'fade',
speed: 'slow',
timeout: 5000,
type: 'sequence',
containerheight: '172px'
});}
}
);
</script>can any one give me some solid suggestions on what to do to prevent peoples' browsers from crashing?
Comments
A good place to start...
A good place to start is making sure that all the JS on the page is valid - Javascript engines can be finicky beasts and one tiny error can shut down the whole show.
If you look at http://www.wimaxforum.org/sites/wimaxforum.org/themes/wimax_forum/ga.js , you'll see that there's a '
<script type="text/javascript">' on the first line - this is not needed, since the file is being loaded as Javascript already (and is flagged as an error under Firefox 3). Once this is fixed you may find your problems go away.On a non-JS optimization note, you might seriously consider turning on CSS & Javascript optimization - the site currently has 36 separate CSS files - having Drupal combine them all into one file will -greatly- reduce page load times.
Ok, I took your advice on
Ok, I took your advice on the ga.js and I optimized my css on the site. I have one problem though. when I go to optimize the JS it breaks my front page (http://www.wimaxforum.org) where I have those rotating blocks on the lower half of the page. Those blocks are controlled by a file called jquery.innerfade.js and some inline js I have one my tpl file, which I posted an example of above.
Any more suggestions?
Thanks,
Becky
something to try
instead of putting your javascript in the tpl file, put it in template.php like so:
<?phpdrupal_add_js("$('#nav').doSomething();", $type = 'inline', $scope = 'header', $defer = FALSE, $cache = TRUE, $preprocess = TRUE);
?>
I'm not sure if that will fix your issue, but that's how I prefer to handle js.
It looks like ga.js is still
It looks like ga.js is still biting you - it's got
<script>tags inside of it. You need to remember that, when you include a script in your document's header via a<script type="text/javascript" src="..."></script>the browser is going to assume that the whole file is javascript, not HTML with javascript inside of it. You just need to make sure there's no tags inside of the file (other than those that are in strings in the javascript itself) - IOW, the only thing allowed in a javascript file is valid javascript.
Tools to help
I also suggest you use the Firefox web browser with the Firebug extension to do your testing as it is a huge help with JavaScript and CSS. It's super easy to use and is really an essential tool for any developer. Get the Web Developer extension while you are at it. Further, I've heard good things about the "Drupal For Firebug" extension, though I've yet to try it myself.
Sala kahle,
Grant
Is there a specific reason
Is there a specific reason that you are not just including your jquery through the "drupal_add_js" function?
This might help.
Hi all, that's weird. I
Hi all, that's weird. I thought I had taken out the script tags. I will look again. There is no specific reason that i didn't use Drupal_add_Js except that most every example I see confuses me..... Also do you use Drupal_add_js for D6? Thanks for the tips. I will try them out today and see if i can make some headway.
Becky
So I actually tried to add
So I actually tried to add my js to a script.js page. I declared it on my .info page and put the js in a script.js file. I cleared my cache and rebuilt my registry but it didn't work. This is what I tried in my file based on an another suggestion:
$(document).ready(
function(){
if($('body.front #portfolio, body.front #portfolio2, body.front #portfolio3, body.front #portfolio4,)){
.innerfade({
animationtype: 'fade',
speed: 'slow',
timeout: 5000,
type: 'sequence',
containerheight: '172px'
});}
if($('body.front').length > 0){
$('#big-image').innerfade({
animationtype: 'fade',
speed: 2000,
timeout: 10000,
type: 'sequence',
containerheight: '321px'
});}
}
);
But, it didn't work. On Firebug I got this error: "unterminated string literal". I don't really know how to fix it.....is it an simple fix or should I use drupal_add_js instead?
If so, can someone give me an example of what this code would look like in durpal_add_js? I'm not really good with js syntax yet.
(also I had to put up the old js for now, because it works and this is a live site, I'm working on.)
Thanks,
Becky
This line: if($('body.front
This line:
if($('body.front #portfolio, body.front #portfolio2, body.front #portfolio3, body.front #portfolio4,)){Needs a quote at the end of the selector.
Also I don't know if it matters in the selector or not (haven't tried it) but many versions of IE choke on a trailing comma in JavaScript, so I would remove that too.
OK. I will try this. I
OK. I will try this. I actually found out if i just put the whole code, as is in a js file, it worked fine. (with out the script tags of course). Are there other non js or css things I can do to optimize this site?
Becky
One Quick note
if You parse jquery thru a drupal php function make sure You change the $ to jquery . drupal does this to distinguish what is php and what is jquery.