SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    creating Next / previous buttons using Javascript

    hello guys,

    I'm pretty new to JS and dont have much knowledge, i need some very good guide or a file which is already rdy to do the following:

    i got a video page, which has images in it, each image is a link to a different video, i want to make it so when 2 lines of images reached, there'll be a button named Next (or anything, doesn't matter) to lead to the Next page of images, note that i want only the part iwth the images to change while using those buttons, not the whole page,

    the images are built in this way :
    Code:
    <a title="header=[header] body=[<b>Video Author:</b> Author] delay=[100] fade=[off]" href="#" onclick="ytplayer.loadVideoById('Link', 0)"><img src="photos/1.jpg'" onmouseover="this.src='photos/2.jpg'" onmouseout="this.src='photos/1.jpg'"/></a>
    a link to the page just to show u how it looks like :
    http://sospets.brinkster.net/newsite/vids.asp

    thanks in advance

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Its better to build it with semantic markup.

    Your welcome to copy as much of this script as you want:
    http://separationadvice.net/

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thanks eruna, however i find it hard fitting this script to what i need, can any1 help me here please?

    this script above makes a new slide on every LI tag, i need it on every UL tag, what changes excactly do i need to make?
    here is the script:
    Code JavaScript:
    (function($){
    			var showSlide = function(slide){
    		        	$(slide).siblings('.active').hide().removeClass('active');
    		        	$(slide).fadeIn().addClass('active');	        	
    		    };
     
    		     var getSlide = function(){
    		        	var nextSlide, i;
    		        	for(i=0; i < $('#holder li').length; i++) {
    						if($('#holder li').eq(i).attr('class').indexOf('active') > -1){ 
    							if( $('#holder li').length ===  i + 1 ){
    								nextSlide = 0;
    							}else{
    								nextSlide = i + 1;
    							}
    						}
    					}
    					return $('#holder li').eq(nextSlide);
    		        }
     
    		     var getPrevSlide = function(){
    					var nextSlide, i;
    		        	for(i=0; i < $('#holder li').length; i++) {
    						if($('#holder li').eq(i).attr('class').indexOf('active') > -1){ 
    							if( $('#holder li').length ===  i - 1 ){
    								nextSlide = $('#holder li').length;
    							}else{
    								nextSlide = i - 1;
    							}
    						}
    					}
    					return $('#holder li').eq(nextSlide);
    		      }
     
    			var slideShow = setInterval(function() {				
    				showSlide(getSlide());
                }, 12000);
                $("#leader").hover(function() {
                    clearInterval(slideShow);
                }, function() {
                	clearInterval(slideShow);
    				slideShow = setInterval(function() {
    					showSlide(getSlide());
    	            }, 6000);
                });
     
                $('.next').click(function(){
                   	clearInterval(slideShow);
                	showSlide(getSlide());
                  	return false;          	
                });
     
                 $('.prev').click(function(){
                	clearInterval(slideShow);
                	showSlide(getPrevSlide());
                	return false;
                });
     
    	})(jQuery);

    here is the page:
    http://sospets.brinkster.net/newsite/vids.asp

    i want it to work so after each line of videos it'll have buttons to go next / prev page, for now all of the images are around one big UL tag but i'll change it so each line will be surrounded by UL tag after some1 will give me the proper solution to do that

    thanks for ur help

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You could try putting a <div> around your images that is as wide as your first row and the height of two images. Set the CSS overflow and clip to auto and you will have a vertical scroll bar that will allow you to scroll through your total list which may be many rows long.

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hey AllanP,

    thanks for the solution could be a good one to use, going to try it out and see how it is.

  6. #6
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    AllanP's is definitely the simplest and easiest to implement. However, I started working on my JavaScript solution before he posted, so I don't want to waste it:

    Code JavaScript:
    (function (document) {
        var ul = document.getElementsByTagName("ul")[1],
        ulhtml = ul.innerHTML,
        video = document.getElementById("video"),
        page_regexp = /^(?:[.\r\n]*?<li.*?>[.\r\n]*?<\/li>[.\r\n]*?){1,14}/i,
        pages = [],
        currentPage = 0,
        next = document.createElement("a"),
        prev = document.createElement("a"),
        loadPage = function (direction) {
            currentPage += direction;
            ul.innerHTML = pages[currentPage];
            prev.style.visibility = currentPage ? "visible" : "hidden";
            next.style.visibility = currentPage === pages.length - 1 ? "hidden" : "visible";
        };
     
        while (page_regexp.test(ulhtml)) {
            pages.push(page_regexp.exec(ulhtml));
            ulhtml = ulhtml.replace(page_regexp, "");
        }
        ul.style.height = "198px";
     
        next.innerHTML = "next";
        prev.innerHTML = "previous";
        next.style.cssText = "margin:-15px 57px 15px;float:right";
        prev.style.cssText = "margin:-15px 57px 15px;float:left";
        video.style.clear = "both";
        next.href = prev.href = "javascript:void(0)";
        next.onclick = function () { loadPage(1); };
        prev.onclick = function () { loadPage(-1); };
        video.parentNode.insertBefore(prev, video);
        video.parentNode.insertBefore(next, video);
     
        loadPage(0);
    }(document));


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
  •