SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Hide Show troubles - Please Help, I'm lost...

    I'm extremely new to jQuery, and I really like this sample, but I current scenario on a site I'm building, and I can't figure out how to get my nav to work properly.

    <div id="itemNav">
    'this part contains 6 image buttons' class="btnLocal" (each has its own id)
    </div>
    <div id="itemScene1">
    'this contains 5 image buttons' class="btnItem" (each has its own id)
    </div>

    There are 6 seperate "itemScene" divs, one for each of the first set of buttons located in the "itemNav" div. Each "itemScene" div contains its own 5 buttons.

    What I want to do is be able to click on a "btnLocal" button within the "itemNav" div, and have the appropriate "itemScene" div show, and the others hide.

    I've tried several ways, but nothing seems to work. Could someone please help me. I'm more of a designer, than a coder or developer, and I'm in dire need of assistance.

    Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    There are a couple of user interface techniques that jQuery provides easy access to, which in this case for you would be either tabs or the accordion interface.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've used both jQuery accordian and tab menu's in the past, but my goal is to give a certain functionality to my design, rather than have to change my design to fit the code.

    Here is link to the page I'm working on. It's for my portfolio.

    http://elibutcher.com/portfolio.html

    I have 6 icons ( 3 on top, and 3 on bottom ). Each one, uses javascript for the rollover function. Below those are 5 sub-options that directly relate to whichever icon is clicked on. I'm wanting the sub-options divs to swap out every time you select a different icon option.

    So the accordian and tabs won't work for this layout. I was hoping that I could create the 6 icons, and all six sub-option divs, with 1 visible and the other 5 hidden, and then just swap out visibility when an icon is clicked using javascript.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by elibutcher View Post
    I was hoping that I could create the 6 icons, and all six sub-option divs, with 1 visible and the other 5 hidden, and then just swap out visibility when an icon is clicked using javascript.
    That does sound like it's the perfect use for the tabs interface. The presentation of the tabs doesn't need to be done at all.

    Before you discount it though, take a quick look at this sample test code:

    Code html4strict:
    <html>
    <head>
        <style type="text/css">
        #tabs ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        #tabs li {
            display: inline;
        }
        .ui-tabs-hide {
            display: none;
        }
        </style>
    </head>
    <body>
    <div id="tabs">
    	<ul>
    		<li><a href="#alpha"> A </a></li>
    		<li><a href="#bravo"> B </a></li>
    		<li><a href="#charlie"> C </a></li>
    		<li><a href="#delta"> D </a></li>
    		<li><a href="#echo"> E </a></li>
    		<li><a href="#foxtrot"> F </a></li>
    		<li><a href="#golf"> G </a></li>
    		<li><a href="#hotel"> H </a></li>
    		<li><a href="#india"> I </a></li>
    		<li><a href="#juliet"> J </a></li>
    		<li><a href="#kilo"> K </a></li>
    		<li><a href="#lima"> L </a></li>
    		<li><a href="#mike"> M </a></li>
    		<li><a href="#november"> N </a></li>
    		<li><a href="#oscar"> O </a></li>
    		<li><a href="#papa"> P </a></li>
    		<li><a href="#quebec"> Q </a></li>
    		<li><a href="#romeo"> R </a></li>
    		<li><a href="#sierra"> S </a></li>
    		<li><a href="#tango"> T </a></li>
    		<li><a href="#uniform"> U </a></li>
    		<li><a href="#victor"> V </a></li>
    		<li><a href="#whiskey"> W </a></li>
    		<li><a href="#xray"> X </a></li>
    		<li><a href="#yankee"> Y </a></li>
    		<li><a href="#zulu"> Z </a></li>
    	</ul>
    	<div id="alpha"><p>is for Alpha</p></div>
    	<div id="bravo"><p>is for Bravo</p></div>
    	<div id="charlie"><p>is for Charlie</p></div>
    	<div id="delta"><p>is for Delta</p></div>
    	<div id="echo"><p>is for Echo</p></div>
    	<div id="foxtrot"><p>is for Foxtrot</p></div>
    	<div id="golf"><p>is for Golf</p></div>
    	<div id="hotel"><p>is for Hotel</p></div>
    	<div id="india"><p>is for India</p></div>
    	<div id="juliet"><p>is for Juliet</p></div>
    	<div id="kilo"><p>is for Kilo</p></div>
    	<div id="lima"><p>is for Lima</p></div>
    	<div id="mike"><p>is for Mike</p></div>
    	<div id="november"><p>is for November</p></div>
    	<div id="oscar"><p>is for Oscar</p></div>
    	<div id="papa"><p>is for Papa</p></div>
    	<div id="quebec"><p>is for Quebec</p></div>
    	<div id="romeo"><p>is for Romeo</p></div>
    	<div id="sierra"><p>is for Sierra</p></div>
    	<div id="tango"><p>is for Tango</p></div>
    	<div id="uniform"><p>is for Uniform</p></div>
    	<div id="victor"><p>is for Victor</p></div>
    	<div id="whiskey"><p>is for Whiskey</p></div>
    	<div id="xray"><p>is for X-Ray</p></div>
    	<div id="yankee"><p>is for Yankee</p></div>
    	<div id="zulu"><p>is for Zulu</p></div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function () {
    		$("#tabs").tabs();
    });
    </script>
    </body>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    The below plug-in should do the job.

    Code JAVASCRIPT:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>Button Swap</title>
     
    	<script type="text/javascript" src="/js/jquery-1.4.2-min.js"></script>
    	<script type="text/javascript">
     
    		(function($) { 
     
    			$.fn.mynav = function(config) {
     
    				var defaults = {		
    					// Start index
    					index:0
    				};
     
    				var config = $.extend(defaults, config); 
     
    				return this.each(function() {
     
    					$(this).click(function(evt) {
     
    						// Get index position of clicked button
    						var pos = (function(container) {					
    							var index = null;						
    							return function() {
    								// proxy index resolution
    								if(index === null) {
    									$(container).children().each(function(pos) {
    										if(this === evt.target) {
    											index = pos;
    											return false;
    										}
    									});
    								}	
    								return index;
    							};		
    						})(this);
     
    						// Trigger event for children of container
    						if(this === $(evt.target).parent().get(0)) {
    							// hide all divs except one matching clicked button position
    							$(this).siblings().each(function(index,element) {
    								$(this).css('display',(index === pos()?'block':'none'));
    							});
    						}
     
    					});
     
    					// Upon initiation select current tab and hide others
    					$(this).children().each(function(index) {
    						if(index === config.index) {
    							$(this).click();
    							return false;
    						}
    					});
     
    				});
     
    			};
     
    		})(jQuery);
     
    		$(document).ready(function() {
    			$('#itemNav').mynav({index:2});
    		});
     
    	</script>
     
    </head>
    <body>
     
     
    	<div id="itemNav">
    		<button>One</button>
    		<button>Two</button>
    		<button>Three</button>
    		<button>Four</button>		
    	</div>
     
    	<div id="itemScene1">
    		<button>One 1</button>
    		<button>Two 1</button>
    	</div>
     
    	<div id="itemScene2">
    		<button>One 2</button>
    		<button>Two 2</button>
    		<button>Three 2</button>
    		<button>Four 2</button>
    	</div>
     
    	<div id="itemScene3">
    		<button>One 3</button>
    		<button>Two 3</button>
    	</div>
     
    	<div id="itemScene4">
    		<button>One 4</button>
    		<button>Two 4</button>
    		<button>Three 4</button>
    	</div>
     
    </body>
    </html>


Tags for this Thread

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
  •