SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Thread: jquery help

  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    jquery help

    I'm creating a jquery slide with this tutorial:

    Create a Slick and Accessible Slideshow Using jQuery

    I have put the html and css in place but I have no js knowlede so I was wondering where to put the js file. Do I just name the file anything I want and place it will all the other js files? if so how does my html and css know how to link to it?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    If you view source on the demo page for that slideshow, you'll see this in the head:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      var currentPosition = 0;
      var slideWidth = 560;
      var slides = $('.slide');
      var numberOfSlides = slides.length;
    
      // Remove scrollbar in JS
      $('#slidesContainer').css('overflow', 'hidden');
    
      // Wrap all .slides with #slideInner div
      slides
        .wrapAll('<div id="slideInner"></div>')
        // Float left to display horizontally, readjust .slides width
    	.css({
          'float' : 'left',
          'width' : slideWidth
        });
    
      // Set #slideInner width equal to total width of all slides
      $('#slideInner').css('width', slideWidth * numberOfSlides);
    
      // Insert controls in the DOM
      $('#slideshow')
        .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
        .append('<span class="control" id="rightControl">Clicking moves right</span>');
    
      // Hide left arrow control on first load
      manageControls(currentPosition);
    
      // Create event listeners for .controls clicks
      $('.control')
        .bind('click', function(){
        // Determine new position
    	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
        
    	// Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
          'marginLeft' : slideWidth*(-currentPosition)
        });
      });
    
      // manageControls: Hides and Shows controls depending on currentPosition
      function manageControls(position){
        // Hide left arrow if position is first slide
    	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    	// Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
      }	
    });
    </script>
    That's all you need. There's a link to the jQeury library that's hosted on Google, and then a script specific to this slideshow (and the order matters—the library must come first). You could, it you wish, place the library and the other code in your scripts folder and link to them there.

    You don't need to do anything else, though. The JavaScript looks at your page and takes note of the HTML/CSS by itself.

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I don't get it - lol

    so the script you posted above I put that where? And the script in the tutorial goes where?
    confused

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by hantaah View Post
    so the script you posted above I put that where?
    Quote Originally Posted by ralph.m View Post
    If you view source on the demo page for that slideshow, you'll see this in the head...
    That means the <head> section. So, place the code I posted above in the <head> section of your page. (I'm surprised you're confused, as you've done this before with another slider.)

    If you were to view the source code of that slider's demo page, and copy that code, and paste it into a page of your own, the slider will work as is (apart for the images not showing up). So you can see from that demo what the page code needs to look like.

    In the head you have your links to CSS files and JS files, and in the body you have all your divs etc holding the slider content.

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    oh ok, I get it, the script itself is in the header and also links to a different script ( the library )

    So what you mean is the script that is included in the head I can put in a .js file and link to it instead.

    I just put all the in the header but it doesn't seem to scroll, what have ai done wrong or do I need to enable anything?

  6. #6
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    sorry I got it I didn't put the images in my folder

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by hantaah View Post
    So what you mean is the script that is included in the head I can put in a .js file and link to it instead.
    Yes: you can copy the code of those two scripts, place them in their own files somewhere in your site, and link to them in the head of your document (or even right at the bottom of your page, just before the closing </body> tag, which is becoming the preferred method.)

    The reason a lot of people link to Google's version of the code is that it is delivered quickly and people may already have that code cached in their browsers (through having visited another site with the same link). So it may speed up your site a bit.

    I just put all the in the header but it doesn't seem to scroll, what have ai done wrong or do I need to enable anything?
    There's nothing else you need to do, but you do have to check that the HTML still has any ids etc. that the script is looking for. We'd need to see you page to have a clue, though.

    EDIT: I see you've resolved it. Great.

  8. #8
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    saying that I put all the images in the file but it's still not scrolling

  9. #9
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    sorry, we're missing each other because your so efficient in replies

    I have it all on my site now but it's just not showing the images I uploaded although the urls are correct

    http://organicwebdesigns.co

    or rather the scroller arrows are showing but at the top of the wep page instead of in the scroller itself

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You don't have any styles for the #slideshow div yet. You've really got to be careful and systematic when implementing something like this. Really look carefully at the original and check every part of it step by step: the original HTML, the styles that apply to it etc.

  11. #11
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I put all the css styles in when I began as follows ( how do they not show? )

    #slideshow #slidesContainer {
    margin:0 auto;
    width:560px;
    height:263px;
    overflow:auto; /* allow scrollbar */
    position:relative;
    }

    #slideshow #slidesContainer .slide {
    margin:0 auto;
    width:540px; /* reduce by 20 pixels to avoid horizontal scroll */
    height:263px;
    }

    /**
    * Slideshow controls style rules.
    */
    .control {
    display:block;
    width:39px;
    height:263px;
    text-indent:-10000px;
    position:absolute;
    cursor: pointer;
    }
    #leftControl {
    top:0;
    left:0;
    background:transparent url(http://organicwebdesigns.co/wp-conte...ntrol_left.jpg) no-repeat 0 0;
    }
    #rightControl {
    top:0;
    right:0;
    background:transparent url(images/control_right.jpg) no-repeat 0 0;
    }

  12. #12
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    the css is defo in the style.css does it need to be somewhere else then?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    OK, so you've put the CSS in, but it gives rules for #slideshow and #slidesContainer, neither of which exist in the HTML. You've given other names to the slider elements, like .sliderGallery, .slider etc.

    That's what I mean about being careful and systematic. If you change the class/ID names in the HTML, you need to change them in the CSS.

  14. #14
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I understand, sorry about that

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by hantaah View Post
    I understand, sorry about that
    No need to be sorry! A forum is for asking questions. If I seemed critical in my reply, I didn't mean to. I'm just speaking from experience, knowing that you've got to be really careful when modifying this stuff. Unless you work very carefully, checking at each step as you modify things, it all becomes as disaster that may need to be scrapped. (It's like taking a car engine apart, I guess. You've got to keep track of where everything goes.) So make small changes at a time and check that you haven't broken anything. I usually modify a gallery like this on a page of its own, and when it's the way I want it, I insert it into the page.

  16. #16
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    no thanks, you've been really helpfull, I hope i'm not burdening too much, I will try and do all the troubleshooting possible before hand


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
  •