Trying to write a small bit of JQuery to go on my drupal page
beckyjohnson - September 15, 2008 - 17:53
HI there,
I'm trying to write a bit of Jquery to make my rss headlines fade in and fade out and scroll. I know that someone developed a code to do this, but I can't get it to work which makes me think that it is the wrong version of Jquery to work in Drupal 6.
Could someone please help me out? I want titles from my rss feed to scroll across the bottom of the page and fade in and out. I kind of understand how to do jquery when there is an action like x has to happen when a person clicks, but this isn't really dependent on an event.....
This is what I have so far
Drupal.behaviors.block-aggragator-feed-1 = function(?????) {
$('#block-aggragator-feed-1').fadeIn('slow');
}
I would really appreciate any input
Revised code:
Drupal.behaviors.block-aggragator-feed-1 = function(context) {
$('#block-aggragator-feed-1,context').fadeIn('slow');
$('#block-aggragator-feed-1,context').fadeOut('slow');
}
I've worked on it a bit more and guessed around at this code.
Maybe you want something
Maybe you want something like this?
$(document).ready(function() {$('#block-aggragator-feed-1,context').fadeIn('slow');
$('#block-aggragator-feed-1,context').fadeOut('slow');
});
It's always good to wrap your jQuery code in
$(document).ready(function() {, because if you don't, the code may try to do things with elements that don't exist in the DOM yet.Ok. Thanks. I can test this
Ok. I just tried this out in firebug in firefox and I got this message:
$(document) is null" what does this mean?
Also I'm beginning to wonder if i had the rss feed set up right. I have my rss feed displaying in a block on the page, showing 10 items right now. My goal is to get it to scroll across the page and get it to fade in and out when it transitions to the next title.
Becky
"$(document) is null" sounds
"$(document) is null" sounds as if jQuery.js is not loaded. When you write your own javascript, save it as a .js file and add the file to your site using the drupal_add_js() function in your template.php. That way, jQuery.js will automatically be loaded as well.
Well, I added it to my .info
Well, I added it to my .info files and reloaded my theme and the js didn't work. I added it to my .info file because it was simpler and I'm using Drupal 6. I hadn't realized that in firebug, I had to have the js hooked up to drupal too.
Is there something wrong with my code? should i be telling it to do something different?
Becky
You're right, if you are
You're right, if you are using D6, the .info file is where you add your javascript (http://drupal.org/node/171205#scripts, if anyone's interested).
I can't tell if your code is right, because I can't see your source code and I don't exactly know what you want to achieve.
What I want to do is create
What I want to do is create a scrolling news trickler that also fades to the next title like the one here:
http://www.apple.com/
Can you help me right some code that would accomplish this? I need some step by step instructions I think.... I would give you my source code but I'm working on my local machine and don't have a way to upload my changes because there is something wrong with our port 22 connection at work. (no FTP.)
There is a jQuery plugin for
There is a jQuery plugin for that right here: http://www.texotela.co.uk/code/jquery/newsticker/
Thanks for the link but,
Thanks for the link but, what if it isn't the right version of Jquery that drupal 6.3 supports?
Do you know whether it is or not?
Also, how do you acutally put this into drupal? I'm a little confused....sorry..
Thanks,
Becky
I don't see anything about
I don't see anything about the jquery version this plugin requires, so i think you will just have to try and see if it works. D6.3 has the most recent jquery on board.
You can download the script from http://jqueryjs.googlecode.com/svn/trunk/plugins/newsticker/. Put it on your server and add it to your theme in the theme's .info file.
Ok. I'll try it out. Should
Ok. I'll try it out. Should I just put the unordered list in a block or something? I'm unsure what to do with that part.
That depends on your site
That depends on your site structure, I can't answer that.
That said, it seems logical that this news ticker would appear in a block, because tickers like this are usually not the main content. It's up to you how you create that block. If it's static content, you could just create a custom block with a ul in it. If the list needs to be generated dynamically (for instance, the 5 latest nodes of type 'news') you can use the views module to create that list and publish it as a block. For the jquery code, it should not matter how your ul is created or where it's placed.
Thanks for all the help.
Thanks for all the help. I'll try it out today.
becky
Ok..... It didn't work. I
Ok..... It didn't work. I attached jquery.newsticker.js to my .info file and I put the li list in a block and enabled it. I made sure that #news was attached to the unordered list like the jquery needs. I put
$(document).ready(
function()
{
$("#news").newsTicker();
parseSamples();
}
);
in it's own file as well and then cleared my cache, reloaded my theme and nothing happened. I'm not sure where to put the little bit of code, that is above here. I think that may be the issue. I didn't think that in drupal you were supposed to put js script in the body of a page template.
Could you post a link to the
Could you post a link to the site or is it local?
www.drupalmuseum.com
www.organicsitedesign.com
You're right, you're not
You're right, you're not supposed to put it in page.tpl.php. It sounds as if you did it the right way: put it in a .js file and attach it to your site using the theme's .info file.
Using Firefox and Firebug, you could check:
1) if all .js files are loaded
2) if $("#news") returns one jQuery object (you can test this with the firebug 'console' tab)
3) if $("#news").newsTicker(); generates errors
If you add this to the body
If you add this to the body of your block (I tried it in a page content type) and put this newsticker.js plugin file in a sites/all/plugins folder, you should see the effect. Or similar code referencing the ticker Marc suggested should work, too.
<?php
drupal_add_js('sites/all/plugins/newsticker.js');
drupal_add_js('$(document).ready(function() {
var options = {
newsList: "#news",
startDelay: 10,
placeHolder1: " []"
}
$().newsTicker(options);
});',
'inline'
);
?>
<ul id="news">
<li><a href="http://www.theonion.com/content/news/brave_mountain_lion_fends_off">Brave mountain lion fends off group of hikers</a></li>
<li><a href="http://www.theonion.com/content/news_briefs/chinese_womens_paralympic">Chinese womens' paralympic team under investigation for having arms, legs</a></li>
</ul>
Obviously this is a hackish way to do it but a good starting point.
EDIT: As per Marc's comment, it will also work if you rename the newsticker.js to script.js and put in your theme folder. I couldn't get it to work by adding scripts[] = newsticker.js to the .info file though.
Awesome. Thanks for help
Awesome. Thanks for help there everyone. I've been distracted from this for a bit but I'll try it out asap.
Thanks.
Becky