www.webdeveloper.com
Results 1 to 6 of 6

Thread: Scrolling through posts

  1. #1
    Join Date
    Apr 2009
    Location
    Thessaloniki, Greece
    Posts
    24

    Scrolling through posts

    Greetings,
    First of all, what I want to achieve is this: I have my main page, with a div 'cont' and a php file that dynamically holds posts, stored in a database, let's say post.php.
    I would like the user, by clicking a button, to scroll smoothly to the post.php page (actually load smoothly the contents of post.php inside the 'cont' div).

    I came across http://archive.plugins.jquery.com/project/ScrollTo but I;m not sure if that's what I'm looking for, since this scrolls through elements that are already there. I want to create a slide for posts that are dynamically created. Is that even possible?
    The effect is similar to this page's http://www.charliegentle.co.uk/

    Any tips would be mostly appreciated!!
    Last edited by salvi; 04-07-2012 at 04:50 AM.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    if you are adding the new posts dynamically to the same page you can insert each post for instance into <div id="insert the post id here, pick it from DB by your php-script, it is going to be unique for sure"></div> and then you can do with this div everything depending on your conscience
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Apr 2012
    Posts
    55
    joi has a TransitionPanel widget, which is designed for transitioning between dynamically generated content. It's very easy. Look at the example on that page, it probably does exactly what you want (scrolls between dynamically generated PHP content).

  4. #4
    Join Date
    Apr 2009
    Location
    Thessaloniki, Greece
    Posts
    24
    I'll be going with what Padonak said.
    What I've done so far is:

    Code:
    <div id="maincontent">
    <div id="cont"><span id="body_s">I am the main page's post</span><br/></div>
    <div id="prev_post" class="page">I am the previous post!</div>
    </div>
    and my css:
    Code:
    .page{
    	float:left;
    	display:none;
    }
    As for the javascript part:
    Code:
    var $scrollerWindow = $('#maincontent');
    function gotoPrevPost(){
    $scrollerWindow.stop().scrollTo( $('#prev_post'), $speed, {axis:'x',offset:{left: -20, top:0 }} );
    $('.page:visible').fadeOut('normal',function(){
    	$('#prev_post').fadeIn();
    });
    return false;
    }
    $('.goto_prev').live("click", gotoPrevPost);
    However, the scroll part is not working. I checked to see if it, at least, enters the function and it does. My url also changes. No scrolling though
    Last edited by salvi; 04-08-2012 at 01:21 PM.

  5. #5
    Join Date
    Apr 2009
    Location
    Thessaloniki, Greece
    Posts
    24
    *bump*

  6. #6
    Join Date
    Apr 2009
    Location
    Thessaloniki, Greece
    Posts
    24
    Made som changes to my original code:

    CSS:
    Code:
    .page{
    	display:none;
    	min-height:645px;
    	width:100%;
    	height:100%;
    	background-color:#F96;
    	position:relative;
    	float:left;
    	margin-bottom:5px;
    }
    And my JS:
    Code:
    var $scrollerWindow = $('#cont');
    	var $speed = 1500;
    	
    	
    	function gotoPrevPost()
    	{
    		$scrollerWindow.scrollTo( $('#previous_post'), $speed, {axis:'x',offset:{left: -20, top:0 }} );
    		$('#cont').fadeOut('normal',function()
    		{
    			$('#prev_post').css('display','inline').fadeIn();
    		});
    		return false;
    	}
    If I comment out
    Code:
    $scrollerWindow.scrollTo( $('#previous_post'), $speed, {axis:'x',offset:{left: -20, top:0 }} );
    the fadeIn and fadeOut works fine, but no luck with the scrolling yet.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles