#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9

    Scrolling content


    Good evening,

    I am creating a 'blog' or 'news update' feature for my site.

    I have a div, and inside that I pull some information from a database.

    Now that my content is there, how do I create a scrolling effect so that it scrolls upwards.

    I have already set overflow: hidden to my main blog container so I just need the ability to scroll the content up. Been sitting here for the last half hour wondering what could possible achieve this?

    Kind regards,

    NM.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    Here is a pretty good plugin, for that: jQuery Scroller v.1.0. Below I have provided you with a basic example of the code:
    Code:
    <style type="text/css">
    /* CSS for the scrollers */
    div.horizontal_scroller, div.vertical_scroller{
    position:relative;
    height:200px;
    width:auto;
    display:block;
    overflow:hidden;
    border:#CCCCCC 1px solid;
    }
    div.scrollingtext{
    position:absolute;
    white-space:nowrap;
    font-family:'Trebuchet MS',Arial;
    font-size:18px;
    font-weight:bold;
    color:#000000;
    margin-left:10px;
    }
    </style>
    
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://www.maxvergelli.com/docs/jquery-scroller/jquery-scroller-v1.min.js"></script> 
    <script>
    
    $(document).ready(function() {
    
    //create scroller for each element with "horizontal_scroller" class...
    $('.horizontal_scroller').SetScroller({
     velocity: 	 50,
     direction: 	 'horizontal',
     startfrom: 	 'right',
     loop: 'infinite',
     movetype: 	 'linear',
     onmouseover: 'pause',
     onmouseout:  'play',
     onstartup: 	 'play',
     cursor: 	 'pointer'
    });
    	
    /*
    
    All possible values for options...
    
    velocity: from 1 to 99 [default is 50]
    direction: 'horizontal' or 'vertical' 	[default is 'horizontal']
    startfrom: 'left' or 'right' for horizontal direction 	[default is 'right']
    'top' or 'bottom' for vertical direction	[default is 'bottom']
    loop:	from 1 to n+, or set 'infinite'[default is 'infinite']
    movetype:'linear' or 'pingpong'[default is 'linear']
    onmouseover:	'play' or 'pause'	[default is 'pause']
    onmouseout:'play' or 'pause'	[default is 'play']
    onstartup: 'play' or 'pause'	[default is 'play']
    cursor: 'pointer' or any other CSS style	[default is 'pointer']
    
    */
    
    //create a vertical scroller...	
    $('.vertical_scroller').SetScroller({	velocity: 75, direction: 'vertical'  });
    
    });
    
    </script>
    
    <div class="vertical_scroller">
     <div class="scrollingtext">
       Headline 1<br/>
       Headline 2<br/>
       Headline 3<br/>
       Headline 4<br/>
       Headline 5<br/>
       Headline 6<br/>
       Headline 7<br/>
       Headline 8<br/>
       Headline 9<br/>
       Headline 10
     </div>
    </div>
    If this is not what your looking for; just do an online search for "jquery vertically scrolling marquee" or "vertically scrolling marquee jquery"; both should give you several more: plugins, tutorials, and examples, on how to do, what your wanting to do.

    Comments on this post

    • Nanomech agrees : Thanks for the guidance!
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Good morning web_loone,

    Thank you very much, I was contemplating using a plugin but thought this could be manually done with ease.

    I have to go out on an appointment today but as soon as I'm back I'll check out the sample code, then start attempting to implement that into my homepage.

    Thanks very much for the detailed response.

    Kind regards,

    NM.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Never going to London again

    Absolute joke took me 5 hours to get 70 miles.

    Ok looney, code is going into action.

    Report back soon.

    NM
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Good evening,

    I have nearly got it working. I didn't want to change the names of my <div's around so I changed the code slightly but I seem to be getting an error in the console: too much recursion
    http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js
    Line 2681


    It works fine and keeps on going, until I hover over it, then once the last element has reached the top and disappears, it doesn't come back from the bottom - which is when the error appears.

    Can anyone spot what I've done wrong?

    Here is my code:
    home.template.htm:
    Code:
    <div id="blog_container" class="vertical_scroller">
    	<div id="blogcontent" class="scrollingtext">
    		<?php if(isset($blog)){ print($blog); } ?>
    	</div>
    </div>
    
    <script src="http://www.maxvergelli.com/docs/jquery-scroller/jquery-scroller-v1.min.js"></script>
    <script type="text/javascript">
    
    //create scroller for each element with "horizontal_scroller" class...
    $('#blog_container').SetScroller({
     velocity: 	 50,
     direction: 	 'vertical',
     startfrom: 	 'bottom',
     loop: 'infinite',
     movetype: 	 'linear',
     onmouseover: 'pause',
     onmouseout:  'play',
     onstartup: 	 'play',
     cursor: 	 'pointer'
    });
    	
    /*
    
    All possible values for options...
    
    velocity: from 1 to 99 [default is 50]
    direction: 'horizontal' or 'vertical' 	[default is 'horizontal']
    startfrom: 'left' or 'right' for horizontal direction 	[default is 'right']
    'top' or 'bottom' for vertical direction	[default is 'bottom']
    loop:	from 1 to n+, or set 'infinite'[default is 'infinite']
    movetype:'linear' or 'pingpong'[default is 'linear']
    onmouseover:	'play' or 'pause'	[default is 'pause']
    onmouseout:'play' or 'pause'	[default is 'play']
    onstartup: 'play' or 'pause'	[default is 'play']
    cursor: 'pointer' or any other CSS style	[default is 'pointer']
    
    */
    
    //create a vertical scroller...	
    $('.vertical_scroller').SetScroller({	velocity: 50, direction: 'vertical'  });
    
    </script>
    Here is where the $blog variable is set (within a php query file)
    PHP Code:
    while($row $stmt->fetch())
    {
        
    $blog .= "<div class='blog_boxes'>";
        
    $blog .= "<span class='blog_title'>{$title}</span>";
        
    $blog .= "<span class='blog_time'>{$time}</span>";
        
    $blog .= "<p class='blog_post'>{$post}</p>";
        
    $blog .= "</div>";

    And here is my CSS:
    Code:
    #blog_container
    {
    	width: 45%;
    	clear: left;
    	float: left;
    	position: relative;
    	margin: 2% 0% 2% 2%;
    	background: #1d631d;
    	border: 1px solid #fff;
    	overflow: hidden;
    	height: 300px;
    }
    
    div.scrollingtext
    {
    	position: absolute;
    	width: 100%;
    	color: #000;
    }
    
    #blogcontent
    {
    	position: absolute;
    	display: block;
    }
    
    .blog_boxes
    {
    	width: 100%;
    	height: 100px;
    	position: relative;
    	display: block;
    	padding-bottom: 5px;
    	text-align: left;
    	background: #1D631D;
    	border-bottom: 1px solid #fff;
    	border-radius: 0px;
    	-moz-border-radius: 0px;
    }
    Thank you for any help you can give me.

    Kind regards,

    NM.
    Last edited by Nanomech; July 10th, 2013 at 05:09 PM.
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    The way your html is set-up; you did not need to change the jQuery; as you left the classNames of the scrolling div wrapper, the same, as the example I posted for you. You should have left the ".horizontal_scroller" className in there or put in, some other randomly made-up, className in the initialization/creation of the scrolling div; other then the scrolling div wrapper's id. That is why your are getting recursion; you identified that the initialization/creation of the scrolling div "#blog_container" and the new instance of, an option edited/newly created, scrolling div ".vertical_scroller"; are two different elements; when in fact..., they are one in the same element. You just called them two different ways; once by the id attribute and then again by the className attribute. Just use the original code I provided for you; with your current html and it should work just fine.
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Good evening web_loone,

    Thank you very much, I did what you said and it's working perfectly now.

    I'd give you more reps but I'm prevented until time period is over

    Cheers,

    NM.

IMN logo majestic logo threadwatch logo seochat tools logo