SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hey, trying to get a content slider in javascript.

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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 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:

    Code javascript:
    $(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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by 24788 View Post
    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.
    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.

    Quote Originally Posted by 24788 View Post
    So basically for a plug in you just link to it?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by 24788 View Post
    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.
    Have you considered right-clicking on the page and selecting the View Source option?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by pmw57 View Post
    Have you considered right-clicking on the page and selecting the View Source option?
    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?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by 24788 View Post
    I got the links to work, but I'm wondering how do you add the text correctly to each box?
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •