46 users online (0 members and 46 guests)  


  Results 1 to 8 of 8

Related

  1. [hide] tag in datalife engine !    Forum: Search Engine Optimization - SEO - Forum
    Replies: 0
  2. hide column of table    Forum: CSS Forum
    Replies: 2
  3. Show/Hide layers in IE    Forum: Javascript Forum
    Replies: 3
  4. Help-a href hide them please    Forum: Website Scripts Forum
    Replies: 7
  1. #1
    msd_luke's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Location
    cornwall
    Posts
    11

    is it possible to hide and show ap divs?

    Hi everyone!!!,

    i am currently redesigning my website and i have a vision which i am unable to implement it,

    which i have is 10 div containers on the left hand side of the screen each with a logo in it, and i have a larger ap div in the center of the screen, what i want to do is when one of the logos is rolledover the center ap div will have information appear in it about that company, including images and links,

    is this possible or would i need to go about it in another way?

    p.s im a noobie when it comes to css, javascript etc lol

    many thanks
    Luke

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: is it possible to hide and show ap divs?

    You might find this basic example useful:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    *{margin:0px;padding:0px;}
    #wrap{width:860px;border:3px double #222;
    font-family:Arial,helvitica,sans-serif;
    margin:20px auto;
    font-size:10pt;
    height:520px;
    }
    #left{
    margin:5px;
    width:310px;
    float:left;
    }
    #left img{width:150px;height:100px;}
    #center{float:left;margin:5px;width:520px;}
    #info1 img,#info2 img,#info3 img
    ,#info4 img,#info5 img,#info6 img
    ,#info7 img,#info8 img,#info9 img,#info10 img
    {width:520px;height:450px;}
    p{margin:5px;}
    </style>
    <script type="text/javascript">
    window.onload=function()
    {
    reset();
    for(var i=0,hImg=document.getElementById('left').getElementsByTagName('img');i<hImg.length;i++)
    	{
    	hImg[i].onmouseover=function()
    		{
    		var temp=this.className.split('s');
    		reset();
    		document.getElementById('default').style.display='none';
    		document.getElementById('info'+temp[1]).style.display='';
    		}
    	}
    }
    function reset()
    	{
    	for(var i=0,hDiv=document.getElementById('center').getElementsByTagName('div');i<hDiv.length;i++)
    	{hDiv[i].style.display='none';}
    	}
    </script>
    </head>
    <body>
    <div id="wrap">
    	<div id="left">
    	<img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="myimage" class="s1">
    	<img src="http://h1.ripway.com/rangana/images/Picture2.jpg" alt="myimage" class="s2">
    	<img src="http://h1.ripway.com/rangana/images/Picture3.jpg" alt="myimage" class="s3">
    	<img src="http://h1.ripway.com/rangana/images/Picture4.jpg" alt="myimage" class="s4">
    	<img src="http://h1.ripway.com/rangana/images/Picture5.jpg" alt="myimage" class="s5">
    	<img src="http://h1.ripway.com/rangana/images/Picture6.jpg" alt="myimage" class="s6">
    	<img src="http://h1.ripway.com/rangana/images/Picture7.jpg" alt="myimage" class="s7">
    	<img src="http://h1.ripway.com/rangana/images/Picture8.jpg" alt="myimage" class="s8">
    	<img src="http://h1.ripway.com/rangana/images/Picture9.jpg" alt="myimage" class="s9">
    	<img src="http://www.freefoto.com/images/05/30/05_30_1---Worship-Service-Slide-Background_web.jpg" alt="myimage" class="s10">
    	</div>
    	<div id="center">
    		<h1 id="default">This is the default display.</h1>
    		
    		<div id="info1">
    		<img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="myimage">
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim.
    		</p>
    		</div>
    		<div id="info2">
    		<img src="http://h1.ripway.com/rangana/images/Picture2.jpg" alt="myimage">
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim.
    		</p>
    		</div>
    		<div id="info3">
    		<img src="http://h1.ripway.com/rangana/images/Picture3.jpg" alt="myimage">
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim.
    		</p>
    		</div>
    		<div id="info4">
    		<img src="http://h1.ripway.com/rangana/images/Picture4.jpg" alt="myimage">
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim.
    		</p>
    		</div>
    		<div id="info5">
    		<img src="http://h1.ripway.com/rangana/images/Picture5.jpg" alt="myimage">
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim.
    		</p>
    		</div>
    		<div id="info6">
    		<img src="http://h1.ripway.com/rangana/images/Picture6.jpg" alt="myimage">
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim.
    		</p>
    		</div>
    		<div id="info7">
    		<img src="http://h1.ripway.com/rangana/images/Picture7.jpg" alt="myimage">
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim.
    		</p>
    		</div>
    		<div id="info8">
    		<img src="http://h1.ripway.com/rangana/images/Picture8.jpg" alt="myimage">
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim.
    		</p>
    		</div>
    		<div id="info9">
    		<img src="http://h1.ripway.com/rangana/images/Picture9.jpg" alt="myimage">
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim.
    		</p>
    		</div>
    		<div id="info10"><img src="http://www.freefoto.com/images/05/30/05_30_1---Worship-Service-Slide-Background_web.jpg" alt="myimage">
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim.
    		</p>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    Hope it helps.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  3. #3
    msd_luke's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Location
    cornwall
    Posts
    11

    Re: is it possible to hide and show ap divs?

    Hi rangana,

    firstly thankyou for your time and effort in trying to get this sorted, althought a very good example its no quite what i was looking for,

    here is my current webpage which is still very much in design mode at the mo but it will give you an idea

    http://www.kernow-connect.com/newlookentertainment2.html

    what i want is when an icon is rolled over the info and images and links change to suit the store that has been rolled over, i tried to tinker wth your example but had no success

    im not sure if what i want is possible but i wanted a way of saving space on my page with out having them all listed at once

    any ideas?

    cheers mate

    p.s i cant wait for the day when i can start calling your example "basic" lol

  4. #4
    msd_luke's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Location
    cornwall
    Posts
    11

    Lightbulb Re: is it possible to hide and show ap divs?

    ok "brain wave" lol

    instead of hiding divs is is possible to have content inside a div change so say i have 10 small divs with logos in, and 1 big ap div with 4 smaller divs inside that, would it not be possible when hovering over or right clicking on the contents of the 4 smaller divs change, wheter it be and image in on text in another and links in another.

    here is what i have so far:

    www.kernow-connect.com/newlookentertainment2.html

    this way there will be no need to hide anything but the content will change on rollover,

    does this make sence?

    and if so is it possible

    Cheers
    Luke

  5. #5
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: is it possible to hide and show ap divs?

    Yes, that was possible, and in fact, that's exactly how my code does.

    You can change every content within the div that corresponds the icon. Modify them according to your needs.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  6. #6
    msd_luke's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Location
    cornwall
    Posts
    11

    Re: is it possible to hide and show ap divs?

    Hi rangana,

    your code is great dont get me wront but there is a couple of secondes where all the containers show up on the screen and then they dissapear, is there a way of making them compleatly hidden from the start?

    also im not very good with editing code so what line of code shold i edit to change the content, i am able to change the text, but im not sure how to have 4 small divs within the main div which change on rollover.

    any ideas

    cheers mate
    Luke

  7. #7
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: is it possible to hide and show ap divs?

    The code above completely hidden all the divs from the start. What makes it see (temporarily) because it's loading yet.

    The code I've given has an id of info1-10. Change the content inside those divs and you'll see light.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  8. #8
    msd_luke's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Location
    cornwall
    Posts
    11

    Re: is it possible to hide and show ap divs?

    Thanks rangana,

    i'll give it a go, cheers

    Luke



Tags for this Thread