Hey, trying to get a content slider in javascript

JavaScript
1

I keep finding codes that will seem to fix my problem, but none of them ever seem to work.

I’m trying to build a javascript content slider. It slides content like that of techcrunch.com on the top of the page. It wouldn’t have to be a feed, but I’d need to be able to enter the links manually each time I edit the code.

I’m trying to get it, so I can get rid of tables and be able to post many different pages with the ease of just entering the photo url, link url, and content into it for a short message.

Anyone know if this is possible?

little extra
I know html and I’m decent at css, but I’m bad with javascript.

2

I am using it on my blog and I just put the javascript in. This might be my problem, but adsense and my widgets work fine in javascript.

Hey, how did you get the source code for the individual block? The one on the bottom of the first page at the left on the DEMO 1 page looks fine and I think I can edit the html to put a link in there.

3

Scroll down to the bottom of the Intermediate Demos 2 page and you will see that you can scroll entire sections of a page.

Your slides can contain whatever you wish.

That’s right. I suggest that you download the cycle code from the link in my previous post, and store it on your server. Storing it in a /js/ folder is a common location for such scripts.

4

Thanks, I kind of understand it now. All I need to do now is find one that allows me to put links and text in.

So basically for a plug in you just link to it?

5

You can use the Non-Image Content examples (end of the page) at http://jquery.malsup.com/cycle/int2.html as an example of how to do it.

–
Paul Wilkins

6

It sounds like jQuery’s cycle plugin would do the job well for you.

Look at the Non-Image Content section (end of the page) at http://jquery.malsup.com/cycle/int2.html

7

I’m not sure how they relate to widgets and gadgets, but with the cycle plugin you just go to the jQuery cycle page and get it from the [url=“http://jquery.malsup.com/cycle/download.html”]download link.

On your own page after the jquery script, you include a refrence to the jquery.cycle.all.min.js file, and you can then setup your slider with something like:


$(function () {
    $('#slider').cycle({ 
        fx:    'scrollLeft', 
        delay: -1000 
    });
});

Here’s a cycle demo page from which you can view the source code to get an idea of what goes where.

8

I got the links to work, but I’m wondering how do you add the text correctly to each box?

http://fithope.com/2010/02/22/health-discussion.aspx example.

Yea, I got the source code just fine, but when I right click to view source code on the demo 1 page. It gives me the entire page instead of just the little block.

How did you get that block to just load 1 on the page is my question?

<a href=“http://fithope.com/2010/02/22/health-discussion.aspx”><img alt=“” width=“200” height=“200” src=“http://cloud.github.com/downloads/malsup/cycle/beach1.jpg” /></a> Here’s the code for it. Where would I put the text in here to load inside the box?

9

Have you considered right-clicking on the page and selecting the View Source option?

10

Can you explain the difference between a widget, gadget, and plugin?

Widgets and gadgets allow me to just post the javascript, but plugins don’t just let you copy the code into a site?

11

Thanks for the help, but it’s worthless without a good layout. I need to just create content and keep studying my html/css until I can do that on it’s own then move up to Javascript. I’m trying to move to fast at this point.