SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery slice add node

    Hi.
    I know it can sound odd
    Is there a way to add one
    or more items to a sliced list
    Just an example
    Code JavaScript:
    var h= $('div.headline').height();
    	var $headlines= $('div.headline');
    	var $items= $headlines.slice(0,5);
     
    	if($items.size() < 6){
    		/*  I need to add a node to $items*/
    		$tale= $('div.headline:eq(3)');
    		/*
    		It doesn't work 
    		$items.append($tale);
    		$items.after($tale);
    		console.log($items.size()); 
     
    		*/
    		$items.append($tale);	
    	}
     	$items.each(function (i) {
            	$(this).css('top',h*i+'px');
      	});

    I'm using the slice method in a sort
    of scroll up headline reader.
    In the really script the parameters start
    and end are set dynamically.
    In the condition I 'm looking for if
    $items.size() < scrollup_limit
    it means that the list is too short
    to be displayed
    so for this interval I need to add one or more
    items.

    Bye.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Is it possible to use the push method?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    $items.push($tale);
    $items.push is not a function

    but may be I found a tricky way

    Code PHP:
    if($items.size() < scrollup_limit){
    		$('div.headline:eq(0)').css('top',40+'px');	
    	}

    It's far better if I show you the whole script

    Code JavaScript:
    <script type="text/javascript">
    var headline_count;
    var headline_interval;
    var old_headline = 0;
    var current_headline = 0;
    var scrollup_limit = 3;
     
    function headline_rotate(){
    	current_headline = (old_headline + 1) &#37; headline_count; 
    	var $headlines= $('div.headline');
    	var h= $headlines.height();
    	$('div.headline:eq('+old_headline+')').css('top','200px');
    	var $items= $headlines.slice(current_headline,current_headline+ scrollup_limit);
    	if($items.size() < scrollup_limit){
    		$('div.headline:eq(0)').css('top',40+'px');	
    	}
    	$items.each(function (i) {
            	$(this).css('top',h*i+'px');
     	});
     
     
    	if ($('#box-image img').length > 0){
    			$('#box-image img').remove();
    	}
    	var img= $('div.headline:eq('+current_headline+') p.headline-image').html();
    	$('#box-image').append(img);
    	old_headline = current_headline;
    }
    function init(){
    	headline_count= $('div.headline').size(); 
    	var h= $('div.headline').height();
    	$('#scroll-up-limit').css('height',h*scrollup_limit+'px');
    	var $headlines= $('div.headline');
     	$headlines.slice(0, scrollup_limit).each(function (i) {
            	$(this).css('top',h*i+'px');
          });
    	var img= $('div.headline:eq(0) p.headline-image').html();
    	$('#box-image').append(img);
    }
    $(document).ready(function(){
    	init();
     
    headline_interval = setInterval(headline_rotate,2000); 
    	$('#box-scroll-up').hover(function() {
        	clearInterval(headline_interval);
      	}, function() {
        	headline_interval = setInterval(headline_rotate,2000); 
        	headline_rotate();
      	}); 
    });
     
    </script>


    EDIT

    demo http://blogial.net/scroller/

    Thanks for help and
    Any comments on how I should be doing this better would be gratefully appreciated
    by an article http://www.learningjquery.com/2006/1...eadline-reader
    Last edited by whisher; Apr 18, 2009 at 15:10. Reason: DEMO

  4. #4
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it seems to work
    Code JavaScript:
    if(numItems < scrollup_limit){
    		for (var i = 0, cond = scrollup_limit - numItems; i < cond; i++) {
    			$('div.headline:eq('+i+')').css('top',h*(i+numItems)+'px');
    		}
    	}


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
  •