/    Sign up×
Community /Pin to ProfileBookmark

Scrolling through posts

Copy linkTweet thisAlerts:
Apr 07.2012

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 [URL=”http://archive.plugins.jquery.com/project/ScrollTo”]http://archive.plugins.jquery.com/project/ScrollTo[/URL] 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 [URL=”http://www.charliegentle.co.uk/”]http://www.charliegentle.co.uk/[/URL]

Any tips would be mostly appreciated!!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@PadonakApr 07.2012 — if you are adding the new posts dynamically to the same page you can insert each post for instance into <div id="[I]insert the post id here, pick it from DB by your php-script, it is going to be unique for sure[/I]"></div> and then you can do with this div everything depending on your conscience
Copy linkTweet thisAlerts:
@nathanwallApr 07.2012 — 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).
Copy linkTweet thisAlerts:
@salviauthorApr 08.2012 — 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>[/CODE]

and my css:
[CODE].page{
float:left;
display:none;
}[/CODE]

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);[/CODE]

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 ?
Copy linkTweet thisAlerts:
@salviauthorApr 10.2012 — *bump*
Copy linkTweet thisAlerts:
@salviauthorApr 10.2012 — 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;
}[/CODE]

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;
}[/CODE]

If I comment out
[CODE]$scrollerWindow.scrollTo( $('#previous_post'), $speed, {axis:'x',offset:{left: -20, top:0 }} );[/CODE]
the fadeIn and fadeOut works fine, but no luck with the scrolling yet.
×

Success!

Help @salvi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...