Posted by beckyjohnson on November 20, 2008 at 8:47pm
Ok I had this code in my page.tpl:
$(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'
});}
if($('body.front').length > 0){
$('#big-image').innerfade({
animationtype: 'fade',
speed: 2000,
timeout: 14000,
type: 'sequence',
containerheight: '321px'
});}
//$('.fade').innerfade({
// speed: 'slow',
//timeout: 1000,
// type: 'sequence',
//containerheight: '1.5em'
//});
}
);It is affecting some id's further down on my page. I was told recently that I shouldn't have js in my page.tpl.php so I put it in a script.js file and uploaded it to my theme directory and then cleared my cache and re-built my theme. But, nothing happened. The js isn't working.
Can anyone give me some pointers?
Also, I want to add a google newbar to my site. Do I put all my js code in here too? Instead of the block I have it in right now? How do I add more JS to this file and keep it from screwing up?
Thanks for any tips,
Becky
Comments
A few suggestions...
Here are a few things I would look at:
script.jsincluded in yourtheme.infofile? (There should be a line similar toscripts[] = script.js). As you mention, you'll need to rebuild your theme registry if you change your .info file.$( document ).ready()function. If you never hit your breakpoint, there may be JS errors happening before your code is called. If it does get hit, step through your code to see where things fail.Also, not that this has anything to do with your original question but... you can shorten your jQuery code by combining the selectors:
$( '#portfolio, #portfolio2, #big-image' ).innerfade({... innerfade options ...
});
And depending on what the
$( 'body.front' )check is doing, you might be able to get rid of that altogether. If you call a jQuery function on a selector that doesn't exist, nothing happens. So, checking for a selector before making the call is, in most cases, redundant.Hope that helps.
Mike Keran
www.MikeKeran.com
- Mike
Thanks for your suggestions.
Thanks for your suggestions. I will shorten my jquery code like you suggested. However, I did declare the script.js in my theme.info file . I tried it declared and undeclared and nothing happened. The ids that the JS is supposed to effect (#portfolio, #portfolio 2 are ids that are only in my page-front.tpl.php that that's why I put the body.front there, to try and make them load only when the body front class is present.
Additionally, this rotating image thing also uses another js file declared on my .info file called innfade.js or something like that, anyway. Do i need to have script [] script.js before this file in the .info file?
Thanks for the help,
Becky
The ids that the JS is
An easier way to do this would be
$( 'body.front #portfolio, body.front #portfolio2, body.front #big-image' ).innerfade({ ... });This would select ids
portfolio,portfolio2andbig-imageonly if they are withinbody.front. If the body tag does tag a class offrontthen nothing would be selected and the code wouldn't be run.If your code relies on another .js file, then that .js file needs to be added to the
script[]array before your code. So, if yourscript.jsrelies oninnerfade.jsthen you'll want something likescript[] = innerfade.js;script[] = script.js;
That could be one reason that your code isn't executing. You should look for errors either with Firebug or in the browser status bar -- if you haven't gotten your files included in the correct order, you'll get an error on the
innerfade()call.Mike Keran
www.MikeKeran.com
- Mike
I have another question. I
I have another question. I wanted to put google's newsbar on my site but there is some inline js that I didn't know what to do with.
<script type="text/javascript">
function LoadNewsBar() {
var newsBar;
var options = {
largeResultSet : false,
title : "In the news",
horizontal : true,
autoExecuteList : {
executeList : ["wimax", "wimaxforum"]
}
}
newsBar = new GSnewsBar(document.getElementById("newsBar-bar"), options);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadNewsBar);
This is inline, it's not in a file. So, where do I add this to my theme? Do I also put it in the script.js?
Becky
If it's something that
If it's something that should be on all pages of your site, you could add it to your directly to you
page.tpl.phpfile or, as you suggest, to your script.js file. If you choose the latter, just make sure it's within a$( document ).ready( function() { });call.FYI: You can also use
drupal_add_js()to add inline javascript -- just set$typeto 'inline'. See http://api.drupal.org/api/function/drupal_add_js/6 for details.Mike Keran
www.MikeKeran.com
- Mike
Thank you! I have one more
Thank you! I have one more question. My co-worker and I were talking this over and unsure. The google newsbar code calls a lot of JS files from google's server or whatever like this for example:
<!-- Ajax Search Api and Stylesheet// Note: If you are already using the AJAX Search API, then do not include it
// or its stylesheet again
-->
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-nbw"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
</style>
Cab js files like this be saved to my server or do you think that the links need to actually go back to the google server for a reason?
This is just one example, there are a couple other js files too.
Thanks for all your help!
Becky
Yes, but...
Yes, you can cache Google's JS files on your local server -- the Google Analytics module offers that option -- but it can be complicated. For one, you need to check regularly to see if Google has updated their code. That, in my opinion, is the most compelling reason to have your page point to Google's servers. Also, if a visitor to your site has previously visited another site with the Google newsbar, they'll have a copy of the JS code on their machine. Their browser would use this cached copy, saving them the download time. But if you're serving the file on your server, even if it's the same file, they'll have to download it again because the browser has no way of knowing it's the same file. Granted, this would only be for their first visit...
I've used Google Analytics for years and have only once had a website have trouble because Google's servers were not available. I figure they've got a lot more people working to keep their servers running 24/7 than I do! Also, if you put the Google code at the end of your page, your page will still display even if Google's gone belly-up for the day.
Mike Keran
www.MikeKeran.com
- Mike
Those are some really good
Those are some really good points in favor of keeping the google code pointing at their servers. So if that's the case, do I still have to declare the google js files in my .info file? Or is it ok to put these types of js (the ones that point to a different server) in the page.tpl or in a block?
Or do i also use drupal_add_js?
Thanks for clarifying. I feel like I'm learning a lot.
Becky
Ok, I added the inline code
Ok, I added the inline code to my template.php file using drupal add js. Is my syntax here right because I got a white screen when i refreshed after I saved it to my file.
drupal_add_js($type = 'inline',
function LoadNewsBar() {
var newsBar;
var options = {
largeResultSet : false,
title : "News",
horizontal : true,
autoExecuteList : {
executeList : ["WiMAX", "WiMAX Forum"]
}
}
newsBar = new GSnewsBar(document.getElementById("newsBar-bar"), options);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadNewsBar);
);
Also, does drupal add js work in blocks?
Sorry, been away from the
Sorry, been away from the computer for a while... It's a nice feeling! (grin!)
re: your inline code: There are a few problems with it: the params are in the wrong order (yes, the api docs are easily misread -- I've done it too), the
typeparam is passed incorrectly, the JavaScript is not being passed as a string and there is an unmatched '}' though that might have been a copy/paste/typo error.I find it easier to use heredoc syntax to declare large blocks of code in PHP. Try this:
<?php
$js = <<<END_OF_JS
var newsBar;
var options = {
largeResultSet : false,
title : "News",
horizontal : true,
autoExecuteList : {
executeList : ["WiMAX", "WiMAX Forum"]
}
}
newsBar = new GSnewsBar(document.getElementById("newsBar-bar"), options);
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadNewsBar);
END_OF_JS;
drupal_add_js( $js, 'inline' );
// You could also use: drupal_add_js( $js, 'inline', 'footer' ); if you want the code at the end of your page
?>
Hope that helps.
Mike Keran
www.MikeKeran.com
- Mike
Thanks! That's a lot
Thanks! That's a lot different! I have a lot to learn. Thanks for all the great help. Is there any resource you would recommend for learning JS or learning how to integrate it with drupal code better?
Thanks!
Becky