SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/hide elements [was: newbe in need of help]

    Hellp everyone, im in need of some real help. Ive started a webdesign project as a favour to a friend, unfortunatly my skills are limited. I am creating a system for an events selection, so there is a list of different events I want to hide the information of the events with just the title of the event viewable. In an ideal world i would like the user to hover over the title and a small box pops up, when the user hovers over then dissapears when moved off, with a detailed explanation about that particular event. I already have alot of pages for the site and as there is alot of events i dont want to create a html pop up which would mean i have to create another 60odd pages for each event.

    Can anybody help me in a way to do this, my skills are not great with php and even less with javascript.

    Please any thoughts would be gratefully recieved. Hope the explanation is understandable.

    Thanks,

    Ben

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could create one page including titles and details for all the events. That way, all visitors are able to access the content.

    Then use JavaScript to hide the details.

    The details can then be shown when the user hovers over the titles via JavaScript and/or CSS.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Details Hider</title>
    <script type="text/javascript">
    window.onload = function() {
    	var hiderList = document.getElementById('hider');
    	var pArray = hiderList.getElementsByTagName('p');
    	var h2Array = hiderList.getElementsByTagName('h2');
    	for (var i = 0; i < pArray.length; i++) {
    		var p = pArray[i];
    		p.style.display = "none";
    		h2Array[i].p = p;
    		h2Array[i].onmouseover = function() {
    			this.p.style.display = "block";
    		}
    		h2Array[i].onmouseout = function() {
    			this.p.style.display = "none";
    		}
    	}
    }
    </script>
    
    </head>
    
    <body>
    <h1>Details Hider</h1>
    
    <ul id="hider">
    <li>
    <h2>Event 1</h2>
    <p>Interesting details about event</p>
    </li>
    <li>
    <h2>Event 2</h2>
    <p>Interesting details about event</p>
    </li>
    <li>
    <h2>Event 3</h2>
    <p>Interesting details about event</p>
    </li>
    <li>
    <h2>Event 4</h2>
    <p>Interesting details about event</p>
    </li>
    
    </body>
    </html>
    This isn't an example of 'best practices' - you'd probably opt for external scripts and styles, better event attachment code, using classes rather than the style object, etc - but is it the kind of thing you're talking about?

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes thanks for the reply, ill have a go at that, hopefully ti will give the required effect


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •