Jump to content

Sliding Content


calvin182
 Share

Recommended Posts

in the link you posted, the thing hovered over the page. what i was looking for is something where I can click on and then additional content comes out beneath it. I guess you could say, it's kind of like loading more html into a live page without the use of an iframe so I don't have a preset size set. I want to be able to have the content take up however much space it wants.umm... in Invision Power Board, when creating a new topic, I've noticed a little plus and minus box beneath the text input box. clicking on either of them adjusts the size of the box without refreshing the page. I just want to click, and have something expand below with more data. if that all makes sense.

Link to comment
Share on other sites

Ah right, you would just use DHTML and change it's css display between block and none.See this post from last week: http://w3schools.invisionzone.com/index.php?showtopic=3229It has all the code you need, it uses a menu but you could change it to anything you like.sorted?

Link to comment
Share on other sites

I like that alot but is there any way to have one open by default and when you click another which ever is open is closed and the new one loads?also I tried placing a php include inside the <span> element loading an image and all I got was a block of gibberish text.Any ideas on how to solve either of these issues?

Link to comment
Share on other sites

ok issue one, the code below will open menu1 as default. It will also only show one menu at a time.Try it and let me know if its what you need.for issue 2, post some code so i can have a look :)

<head>		<script>function hideAll(){  document.getElementById('menu1').style.display='none';  document.getElementById('menu2').style.display='none';  document.getElementById('menu3').style.display='none';}function toggleMenu(objectID) {	var object = document.getElementById(objectID);	if (object.style.display =='block')  object.style.display='none';	else object.style.display='block';	return;}</script><style type="text/css">#menu1, #menu2, #menu3{  display: none}a:link {color: black}a:visited {color: black}a:hover {color: red}a:active {color: red}</style>	</head>	<body onload="document.getElementById('menu1').style.display='block'";>				<a href="java script:hideAll();toggleMenu('menu1')">HEADING 1</a><br />		<span id="menu1">			<a href="#">a</a><br /> 			<a href="#">b</a><br /> 			<a href="#">c</a><br /> 			<a href="#">d</a><br />		</span>	<a href="java script:hideAll();toggleMenu('menu2')">HEADING 2</a><br />		<span id="menu2">			<a href="#">e</a><br /> 			<a href="#">f</a><br /> 			<a href="#">g</a><br /> 			<a href="#">h</a><br />		</span>				<a href="java script:hideAll();toggleMenu('menu3')">HEADING 3</a><br /> 		<span id="menu3">			<a href="#">i</a><br /> 			<a href="#">j</a><br /> 			<a href="#">k</a><br /> 			<a href="#">l</a><br />		</span></body></html>

Link to comment
Share on other sites

Scott... you are one cool guy! That is exactly what I wanted to do. I think I'll arange the links horizonally to imitate the "billboard, photos, blog, shows" buttons on purevolume (example on http://www.purevolume.com/jacksmannequin).as for issue 2, I did something stupid. I tried to include an image file directly like

<?php include('http://www.domain.com/image.png');?>

instead of including a php file with it set as

<img src="http://www.domain.com/image.png" alt="image" title="image" border="0"/>

my bad. but again, thanks a lot! you're very knowledgeable, and I appreciate all the help you've myself and given everyone else.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...