Fixed height div pagination in html

M

Myler

the horror.
Apr 25, 2009
532
6
0
G16
My website has a content div which has to be of specific height. Let's say 800px.

I'm looking for a way I could enter the content in that div and make the div break it up before the 800px point and make the rest available via some "next" anchors.

Is such thing possible in a regular html page, no wordpress no drupal no plugins.
 


Well you could do the following.

Code: 
<div class="outter">
<div class="inner">
blah blah blah blah
</div>
<span>....</span> <a href="">Read More</a>
</div>

You would set the height on the outter to whatever you desire, then you would set the height on the inner to maybe something -50px and overflow: hidden, this would allow for the link below it.. Or you could do it in PHP, but that won't be as exact as different characters have different spacing so depends on the words that you have.

I would simply show a modal box when you click it with all the text visible.
 
Modal box being some sort of infinite scroll button?

I need to make it flip like newspapers, 800px height and when you get to the bottom, you click next and it slides in the new text within the 800px.

Im looking for some jquery content scroll but all I get are some image scrollers etc
 
I figured you just wanted snippets of the text and open up the 'full' story by clicking read more. Didn't realize you just want to flip through.

You could potentially do something like that with jQuery. Have it detect how much text is there and have it create multiple divs for the content with controls to go to the next one but this is not something i've seen ready made and you will probably need to get someone to build it for you. it would be tricky.
 
you need to use javascript to pull off such a system. Could possibly do it server side but I'd rather try and eat a cardboard box than pull that off server side.

Look for a page turning jquery plugin or something
 
Damn.

Well, until i figure that out or have someone figure it out for me, I guess it would be possible to manually put text inside the 800px height div, and float the rest of the text in divs outside the viewport in some way and have them slide in on click?

Like this
1vLYa.jpg
 
No need to have them outside the viewport. Just have them all in that container but hide them so they are not visible. Then with jQuery you can animate how you make it visible so you can give it the appearance that it's sliding in.

The problem isn't changing frame to frame, it's spliting up the text among the boxes
 
But wait...

This could be simple as hell then.

I can make a 800px height div with text, hide the overflow and instead of flip effect, I can make it scroll vertically?

Make jquery scroll the div 800px at the time.
 
Myler said:
But wait...

This could be simple as hell then.

I can make a 800px height div with text, hide the overflow and instead of flip effect, I can make it scroll vertically?

Make jquery scroll the div 800px at the time.
Click to expand...

No it's not that simple. How do you know if there is more text in the overflow? How do you know how much is there? How do you know how many times you need to scroll through? That is the logic that will be a bit tricky to code in.

It could be possible to detect the visible area, then scroll visible areas until you hit the end and maybe one of the plugins that dchuck linked to will do that.
 
You must log in or register to reply here.
Top Bottom
Back