Log in

View Full Version : link that makes a div change


kimikai
06-11-2012, 09:20 AM
Ive been looking around alittle for cool stuff for my website, well basically to make it easy because i have 3 categories that need slideshows.
Now i saw on this website: http://www.nue-media.com/

The part where it says Latest projects, it has 2 buttons (Latest projects, and Our favourites) and when you click on those the div beneith it changes to the appropriate one.

Does any1 know how to make something like that??
riptide
06-11-2012, 11:18 PM
It's probably something like this

<div id=" main" >
<p id="fav" onclick="document.getElementById('box').classname='fav'"> favs</p>

<p id="late" onclick="document.getElementById('box2').classname='late'"> latest projects</p>

<div id="box" classname="something">

content,content,content
</div>

<div id="box2" classname="something2">

content,content,content
</div>

</div>


in the CSS on your site

.something{ display: none
}
.something2{ display: none
}

.fav{
position: absolute;
with:blah;
height: blah;
top: 50px;
left:100px;
z-index:100;
display:block;

.late{
position: absolute;
with:blah;
height: blah;
top: 50px; same as fave
left:100px;same as fave
z-index:100;
display:block;
ApacheTech
06-12-2012, 12:43 AM
This is a VERY basic version of what you need to do.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script type="text/javascript">

function toggleDivs(n) {

// Hide all divs
var elDivs = document.getElementById('divBlock').getElementsByTagName('div');
for (var i = 0; i < elDivs.length; i++) {
elDivs[i].setAttribute('style', 'display:none;');
}

// Show chosen div
var elChosen = document.getElementById('category_' + n);
elChosen.setAttribute('style', 'display:block;');
}

</script>

</head>
<body>
<div id="divBlock">
<div id="category_1" style="display:block;">Your HTML for category one here</div>
<div id="category_2" style="display:none;">Your HTML for category two Here</div>
<div id="category_3" style="display:none;">Your HTML for category three Here</div>
</div>
<div>
<p onclick="toggleDivs(1);">Category 1</p>
<p onclick="toggleDivs(2);">Category 2</p>
<p onclick="toggleDivs(3);">Category 3</p>
</div
</body>
</html>


The CSS for each category div needs to be the same so that they overlap seamlessly and the onclick functions can be added to any picture button you like.

The basic idea is that each DIV is preloaded and rendered then hidden using the css display property. I've chosen the easiest way to toggle which div is displayed by simply hiding all of them, then showing the one you wish to show.
kimikai
06-12-2012, 10:49 AM
So if i get you right
<div id="category 1"> will be the content of the div so images and text etc...

and

<p onclick="toggleDivs(1);">Category 1</p> is the link that toggles div 1 to be shown within its container??

the HTML i had now for setup of the "menu":



<div id="threecategories">
<ul>
<li class="active"><a class="item cardrawings">Car Drawings</a></li>
<li><a class="item thdmodeling">3D modeling</a></li>
<li><a class="item other">Other</a></li>
</ul>
</div>


for the CSS i dont quite get it yet :o

i have this:

CSS:


#threecategories {
height:40px;
width:354px;
position:absolute;
top:0px;
right:100px;
}

#threecategories ul {
float:left;
}

#threecategories ul li {
list-style:none;
display:block;
height:40px;
width:118px;
float:left;
padding: 0 0 0 0;
text-align:center;
}

#threecategories ul li a {
color:#fff;
display:block;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
height:100%;
line-height:40px;
margin-left:0px;
}

#threecategories li a.cardrawings {
background:url(../images/cardrawingsunselect.jpg) no-repeat left;
color:#fff;
text-decoration:none;
}

#threecategories li a:hover, #threecategories li.active a{
background:url(../images/cardrawingselect.jpg) no-repeat left;
color:#fff;
cursor:pointer;
text-decoration:none;
}

#threecategories li a.thdmodeling {
background:url(../images/thdmodelingunselect.jpg) no-repeat left;
color:#fff;
text-decoration:none;
}

#threecategories li a.thdmodeling:hover, #threecategories li.active a.thdmodeling {
background:url(../images/thdmodelingselect.jpg) no-repeat left;
color:#fff;
cursor:pointer;
text-decoration:none;
}

#threecategories li a.other {
background:url(../images/otherunselect.jpg) no-repeat left;
color:#fff;
text-decoration:none;
}

#threecategories li a.other:hover, #threecategories li.active a.other {
background:url(../images/otherselect.jpg) no-repeat left;
color:#fff;
cursor:pointer;
text-decoration:none;
}


if possible could you help me out implement this in the current code i have now??

Im really bad when it comes to Javascript =/ this is my first time working with it hehe...
kimikai
06-12-2012, 12:45 PM
@apachetech
Your code works sweeeeet =] i already got it implemented into my website

just one thing... ermm... how do i set active coding to my links...
right now i had in my html one with class active... but that means one will just always show the active background.

What i need is when i hover over the others, it will show another bg (which works) but then clicking on it, it needs to keep that bg, and the bg on the other needs to go back to unselected.

What did i do wrong in my coding??

PS: i set active in my first <li> because thats the one thats shown first (w/o linking to it), therefore i thought setting that one as active it would stay active untill you click on the next one. I cant set one attribute for all 3 links since all habe a different background... Id need something similar like the nue-media website again hehe