slide down the existing content of a webpage

2 replies [Last post]
apeksha
Offline
Last seen: 6 years 40 weeks ago
Joined: 2009-09-18
bOt Points: 126

 

just wanted to know that suppose i have a text clicking on which i want some information to be displayed.....(like in a box which i will extract from my database)....on the same webpage..........n that info is of multiple lines.....so i want that the rest of the contents in the webpage should slide dwn neatly n this content gets displayed..............

 

how do i achieve this???? 

bOtskOOl
Offline
Last seen: 9 years 35 weeks ago
Joined: 2009-02-21
bOt Points: 3500
Re: slide down the existing content of a webpage

Hi apeksha0701, 
Check out the demo below -

Here is your some rough content. Now lets say you want your info to appear just below this line. Click here to view the content

As you can see when you click on the link above the information is loaded right in the middle of the page and even if there are multiple lines the webpage slides down to create space for the new information being loaded. Hope this helps . If you will again click on the link the info will automatically hide itself. The code used in the above example is written below -

 

<p>Here is your some rough content. Now lets say you want your info to appear just below this line.<a onmousedown="

if(document.getElementById('mydiv').style.display == 'none')

{ document.getElementById('mydiv').style.display = 'block'; }

else{ document.getElementById('mydiv').style.display = 'none'; }" href="javascript:;"> Click here to view the content </a></p>

<div id="mydiv" style="display:none">

<h3>This is a test!<br />

Can you see me?</h3>

</div>

<p>As you can see when you click on the link above the information is loaded right in the middle of the page and even if there are multiple lines the webpage slides down to create space for the new information being loaded. Hope this helps

</p>

 

 

For extracting info from your database in real time, you can use AJAX. Check out our AJAX Basic Tutorial for more information regarding how to use AJAX. Also the above javascript can be modified to include a sliding animation effect when the new content is loaded. If you want info regarding how to do that just post another query 

apeksha
Offline
Last seen: 6 years 40 weeks ago
Joined: 2009-09-18
bOt Points: 126

 thnks this was exactly what i wanted..............