full page tab menu problems

**HippieChickie** · 01-29-2018, 02:11 AM

hello

im having some trouble getting my menu to behave properly.

im new to css so my knowledge is limited & im beyond frustrated & could use some help.

using snippets i have found on the web i have a nice looking menu & for the most part works.

however, there are 3 things on the tabs menu i cant seem to get working right.

1. when any tab is selected it should change color. the hover works just not when its selected

2. the page needs to open to the middle div which is actually an image. right now, it opens on the first tab so additional content is showing.

3. the menu 'jumps' when a tab is clicked on. it should always be in the same position no matter what tab is clicked on.

code is below:

Code:

<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>20th Anniversary</title>
	<style>
	
	
body, html {
    height: 100%;
    margin: 0;
    font-family: Georgia, "Times New Roman", Times, serif
}


#header {
		background-color: #000000;
		height: 50px;
		position: relative;
		margin: 75px auto 0 auto;
	}


#header ul {
  margin: 0 auto;
  width: 999px;
  padding: 0;
  list-style: none;

}

#header ul li {
  float: left;
  width: 129px;

}

#header ul li:nth-of-type(4) {
  margin-left: 216px;
}

#header ul li a {
		text-decoration: none;
		display: block;
		text-align: center;
		padding: 15px 0 0 0;
		height: 40px;
		color: white;
	}

#header ul li a:hover {
  background: #DB0409;
}

#header ul a:selected { color: #000; background-color: #DB0409; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }

.logo {
  position: absolute;
  left: 50%;
  margin: -48px 0 0 -108px;
}


 
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee;
}
div.tabContent.hide { display: none; 
}

	</style>

<script type="text/javascript">
    //<![CDATA[

    var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

    //]]>
    </script>

</head>
<body onload="init()">




<div id="header">
  <a class="logo" href="spade.html">
	<img src="20th.png" height="149" width="214" class="auto-style1" /></a>
	
  <ul id="tabs">
    <li><a href="#rules">Event Rules</a></li>
    <li><a href="#preregister">Pre-Register</a></li>
    <li><a href="#formats">Formats</a></li>
    <li><a href="#ticketgrid">Ticket Grid</a></li>
    <li><a href="#prizedrawing">Prize Drawing</a></li>
    <li><a href="#raffleticketlist">Raffle Ticket List</a></li>
  </ul>
</div>

       

<div class="tabContent" id="logo">
      
      <div>
      
<p>show when page loads</p>
		 </div>
    </div>
    
<div class="tabContent" id="rules">
      
      <div>
      
<p>show rules</p>
		 </div>
    </div>

    
    

    <div class="tabContent" id="preregister">
      
      <div>
                 <p>shows on preregister</p>

        
        
        
      </div>
    </div>

    <div class="tabContent" id="formats">
      
      <div>
        	<p>show when formats load</p>
	
      </div>
    </div>




    </body></html>

you can see the page here

thanks in advance for any help,
HippieChickie

**molendijk** · 01-29-2018, 09:28 PM

Hello HippieChickie,
You're using code that does not add the 'pages' to the history stack. For example, if you click on 'pre-register', then on 'formats', and then on the browser's back button, you'll see .../#preregister in the address bar, but 'show when formats load' on your page. What this means is that your 'pages' (rather: page-regions) can't be bookmarked, shared etc. Also, your page is not responsive and can't be easily viewed on small devices.
I made a single page application for you that does not have these issues, see http://mesdomaines.nu/spa_example. The code is as follows:

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>SPA</title>

<style>
a:link {text-decoration: none}
body {font-family: verdana; font-size: 16px; line-height: 26px; padding: 3%; padding-top: 10px}
.hightlighting {color: white; background: #DB0409; padding: 5px}
a:hover { background: #DB0409}

/* the image */
#twenty {position: relative; width: 250px; display: block; margin: auto; margin-bottom: 1px;z-index:1; left: -30px}

/* the black header-div */
#black_div {position: absolute; left:0; width: 100%; background: black; color: white; top: 60px; height: 80px;}

/* the part of the menu to the left of the image */
#left {position: absolute; left: 5%; margin-top: 25px; z-index: 2; width: 45%}

/* the part of the menu to the left of the image */
#right {position: absolute; right:5%; margin-top: 25px; z-index: 2; width: 45%; text-align: right}

/* the menu-items */
#menu_item_event_rules, #menu_item_pre_register, #menu_item_formats, #menu_item_ticket_grid, #menu_item_prize_drawing, #menu_item_raffle_ticket_list {color: white;   padding: 5px; padding-left: 10px; margin-right: 10px}

#content_area {position: relative; width: 50%; min-width: 280px; height: auto; margin-top: 30px; margin-bottom: 20px; border: 1px solid black; margin-left: auto; margin-right: auto; padding: 20px; border-radius: 5px; box-shadow: 5px 10px 18px #888888;}

@media screen and (max-width: 1174px) {#twenty {width: 200px}}
@media screen and (max-width: 1070px) {#twenty {width: 150px; left: -30px}}
@media screen and (max-width: 1010px) {#left {width: 250px!important; left:0!important; margin-top: 15px!important}}
@media screen and (max-width: 1010px) {#right {width: 250px!important; right:0!important; margin-top: 15px!important; right: 10px!important}}
@media screen and (max-width: 1010px) {#twenty {left: 0}}
@media screen and (max-width: 690px) {#left {width: 150px!important; margin-top: 0!important}}
@media screen and (max-width: 690px) {#right {width: 160px!important; margin-top: 0!important}}
@media screen and (max-width: 430px) {#black_div {top: 130px!important;}}
@media screen and (max-width: 430px) {#content_area {margin-top: 100px!important;}}

</style>

<script>
function highlighting(lochash,the_class)
{
if(location.hash==lochash)
{document.getElementById(the_class).className='hightlighting'}
else {document.getElementById(the_class).className=null}
}
</script>

<script>
function content_change()
{
/* FILLING THE CONTENT-AREA (=A DIV HAVING ID='content_area' ON IT) WITH CONTENT FROM A HIDDEN DIV.*/
document.getElementById('content_area').innerHTML = document.getElementById(location.hash.substring(1,location.hash.length)).innerHTML

/* HIGHLIGHTING CURRENT MENU ITEMS */

highlighting('#event_rules','menu_item_event_rules') //if(location.hash=="#event_rules"){document.getElementById('menu_item_event_rules').className='hightlighting'}

highlighting('#pre_register','menu_item_pre_register') //if(location.hash=="#pre_register"){document.getElementById('menu_item_pre_register').className='hightlighting'}

highlighting('#formats','menu_item_formats') //if(location.hash=="#formats"){document.getElementById('menu_item_formats').className='hightlighting'}

highlighting('#ticket_grid','menu_item_ticket_grid') //if(location.hash=="#ticket_grid"){document.getElementById('menu_item_ticket_grid').className='hightlighting'}

highlighting('#prize_drawing','menu_item_prize_drawing') //if(location.hash=="#prize_drawing"){document.getElementById('menu_item_prize_drawing').className='hightlighting'}

highlighting('#raffle_ticket_list','menu_item_raffle_ticket_list') //if(location.hash=="#raffle_ticket_list"){document.getElementById('menu_item_raffle_ticket_list').className='hightlighting'}

}
window.onhashchange=content_change;
</script>


</head>

<body>

<img id="twenty" src="http://www.whambamgames.com/wb/events/spade/20th.png" alt="" >

<div id="black_div" >

<div id="left" >
<a id="menu_item_event_rules" href="#event_rules" >Event Rules</a>
<div id="event_rules" style="display: none">
Shows when page loads and when 'event rules' is clicked on
</div>

<a id="menu_item_pre_register" href="#pre_register" >Pre-register</a>
<div id="pre_register" style="display: none; ">
Shows on pre-register
</div> 

<a id="menu_item_formats" href="#formats">Formats</a>
<div id="formats" style="display: none">
Shows when formats load
</div> 
</div>

<div id="right">
<a id="menu_item_ticket_grid" href="#ticket_grid">Ticket Grid</a>
<div id="ticket_grid" style="display: none">
Shows when 'ticked grid' is clicked on
</div>

<a id="menu_item_prize_drawing" href="#prize_drawing" >Prize Drawing</a>
<div id="prize_drawing" style="display: none; ">
Shows when 'prize drawing' is clicked on
</div> 

<a id="menu_item_raffle_ticket_list" href="#raffle_ticket_list" >Raffle Ticket List</a>
<div id="raffle_ticket_list" style="display: none">
Shows when 'raffle ticket list' is clicked on
</div>
</div>

</div>


<!-- The region in the body where the script inserts the content of a hidden div (a 'page') depending on the href value of the clicked link: -->
<div id="content_area" ></div>

<!-- At the end of the body section: -->
<script>
/* Loading the first 'page' (event_rules) at site entrance. If, in the menu, the ID on the id belonging to the menu-link for the first 'page' is not event_rules, replace '#event_rules' below with your own ID (preceded by the hash symbol) */
if(window.location.hash==''){window.location.replace('#event_rules');}

/* Executing the function given above (see the head) when the (real) page loads */
setTimeout("content_change()",0)
</script> 

</body>

</html>

If this is what you want, you can ask me for further help if you want.

**HippieChickie** · 01-30-2018, 06:38 AM

WOW this is perfect!! exactly what i was looking to do & then some!

alot less code than i had as well & easier to follow thanks to your comments.

i was able to add in a 'home' link for a welcome paragraph & have it be the one highlighted instead of the 'rules' link with no trouble.

ok a little trouble but i got it worked out lol.

ty for adding in media code. i didnt even consider that.

i must ask. on the image, why left: -30? how did you get that number?

the content area div is nice too. i will have to make it wider but i like how you did it with the shadow effect.

is it possible to lock the menu at the top so any content in the div scrolls under it?

thanks very much for your time & effort,
HippieChickie

**molendijk** · 01-30-2018, 01:40 PM

Here's an an example with a locked menu. View source for explanations. Forget about left: -30px; that's not needed anymore.

**HippieChickie** · 02-02-2018, 08:58 PM

thanks so much for your help! this is great!

have a nice day!
HippieChickie

**HippieChickie** · 02-12-2018, 10:36 PM

Hello again.

I have been playing around with the page & tried to add our name to either side of the center image.

I can get the name there if i use text but not if i want to use an image. also, using text i cant get it to adjust for diff sizes - sometimes the words are behind the image depending on size of browser.

I have an image on the left hand side but it cant be seen on the page but can be seen in my editor.

i can get the image to work if its in the hider div, but then i cant split it up to be on either side of the center image. ggrrr

suggestions?

thanks,
HippieChickie

**molendijk** · 02-13-2018, 08:21 PM

EDIT: SEE NEXT POST
Something like this?

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>WB 20th Anniversary !!</title>

<style>
.auto-style1 {text-align: center;}

a:link {text-decoration: none}
body {background: url('http://www.whambamgames.com/wb/events/spade/yybg.jpg'); 
font-family: verdana; font-size: 16px; line-height: 26px; padding-top: 10px; overflow-y: scroll;
	padding-left: 3%;
	padding-right: 3%;
	padding-bottom: 3%;
}

.hightlighting {color: white; background: #DB0409; padding: 5px}
a:hover { background: #DB0409}

/* the image */
#twenty {width: 250px; display: block; margin: auto; z-index:1; }

/* the imgage is contained in a fixed div now (see below), so we have to make a clone in order to make sure that the fixed div behaves like a relative div   */
#dummy_twenty {
	border: medium #DB0409;
	position: relative;
	width: 250px;
	display: block;
	margin: auto;
	margin-bottom: 1px;
	z-index: 1;
	left: 0;
	background: white;
	height: 180px;
}

#img_container {
	border: thick #DB0409 solid;
	position: fixed;
	z-index: 3;
	left: 50%;
	transform: translate(-50%);
}

/* we should not see parts of the content area when it scrolls up */
#hider {position: fixed; left:0; top:0; right:0; height:60px; z-index: 1; background: white}

/* the logo-div */
#logo_div {position: fixed; left:0; width: 100%; background: black; color: white; top: 0px; height: 59px; z-index: 2}

/* the black header-div */
#black_div {position: fixed; left:0; width: 100%; background: black; color: white; top: 60px; height: 80px; z-index: 2}

/* the part of the menu to the left of the image */
#left {position: absolute; left: 5%; margin-top: 25px; z-index: 2; width: 45%}



/* the part of the menu to the right of the image */
#right {position: absolute; right:5%; margin-top: 25px; z-index: 2; width: 45%; text-align: right}


/* the menu-items */
#menu_item_home, #menu_item_event_rules, #menu_item_pre_register, #menu_item_formats, #menu_item_ticket_grid, #menu_item_prize_drawing, #menu_item_raffle_ticket_list {color: white;   padding: 5px; padding-left: 10px; margin-right: 10px; white-space: nowrap}

#content_area {
	background: #FFFFFF;
	position: relative;
	width: 99%;
	height: auto;
	margin-top: -25px;
	margin-bottom: 5px;
	border: 1px solid black;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 10px 5px 10px;
	border-radius: 5px;
	box-shadow: 5px 10px 18px #888888;
}

/* image to the left of the central image */
#img_to_the_left {position: absolute; left: calc(100% - 275px); top: -75px; margin-top: -10px; width: 130px; height: 55px; overflow: hidden; }

/* image to the right of the central image */
#img_to_the_right {position: absolute; right: calc(100% - 285px); top: -75px; margin-top: -10px; width: 130px; height: 55px; overflow: hidden;}

@media screen and (max-width: 1174px) {#twenty {width: 200px; margin-top: 10px}}
@media screen and (max-width: 1174px) {#content_area {margin-top: 0}}
@media screen and (max-width: 1174px) {#img_to_the_left {left: calc(100% - 245px)}}
@media screen and (max-width: 1174px) {#img_to_the_right {right: calc(100% - 245px)}}
@media screen and (max-width: 1140px) {#twenty {width: 150px; margin-top: 30px}}
@media screen and (max-width: 1140px) {#img_to_the_left {left: calc(100% - 220px)}}
@media screen and (max-width: 1140px) {#img_to_the_right {right: calc(100% - 220px)}}
@media screen and (max-width: 1090px) {#left {width: 280px; left:0; margin-top: 15px}}
@media screen and (max-width: 1090px) {#right {width: 280px; right:0; margin-top: 15px; right: 10px}}
@media screen and (max-width: 1090px) {#twenty {width: 200px; margin-top: 10px}}
@media screen and (max-width: 1090px) {#img_to_the_left {left: calc(100% + 10px); margin-top: 0; width: 110px}}
@media screen and (max-width: 1090px) {#img_to_the_right {right: calc(100% - 10px); margin-top: 0; width: 110px}}
@media screen and (max-width: 995px) {#img_to_the_left {left: calc(50% - 0px); margin-top: 0; width: 110px}}
@media screen and (max-width: 995px) {#img_to_the_right {right: calc(50% - 10px); margin-top: 0; width: 110px}}
@media screen and (max-width: 732px) {#left {width: 150px; margin-top: 0}}
@media screen and (max-width: 732px) {#right {width: 160px; margin-top: 0}}
@media screen and (max-width: 732px) {#img_to_the_left {margin-top: 15px; }}
@media screen and (max-width: 732px) {#img_to_the_right {margin-top: 15px; right: calc(50% - 20px)  }}
@media screen and (max-width: 560px) {#black_div {top: 130px;}}
@media screen and (max-width: 560px) {#content_area {margin-top: 30px;}}
@media screen and (max-width: 560px) {#twenty {margin-top: -3px; width: 150px; border: 1px solid #DB0409}}
@media screen and (max-width: 560px) {#hider {height: 130px;}}
@media screen and (max-width: 560px) {#img_to_the_left {margin-top: -15px; }}
@media screen and (max-width: 560px) {#img_to_the_right {margin-top: -15px; }}
@media screen and (max-width: 520px) {#img_to_the_left {display: none }}
@media screen and (max-width: 520px) {#img_to_the_right {display: none }}


.auto-style3 {
	color: #DB0409;
	font-size: x-large;
}

</style>

<script>
function highlighting(lochash,the_class)
{
if(location.hash==lochash)
{document.getElementById(the_class).className='hightlighting'}
else {document.getElementById(the_class).className=null}
}
</script>

<script>
function content_change()
{
/* FILLING THE CONTENT-AREA (=A DIV HAVING ID='content_area' ON IT) WITH CONTENT FROM A HIDDEN DIV.*/
document.getElementById('content_area').innerHTML = document.getElementById(location.hash.substring(1,location.hash.length)).innerHTML

/* HIGHLIGHTING CURRENT MENU ITEMS */

highlighting('#home','menu_item_home') //if(location.hash=="#home"){document.getElementById('menu_item_home').className='hightlighting'}

highlighting('#event_rules','menu_item_event_rules') //if(location.hash=="#event_rules"){document.getElementById('menu_item_event_rules').className='hightlighting'}

highlighting('#pre_register','menu_item_pre_register') //if(location.hash=="#pre_register"){document.getElementById('menu_item_pre_register').className='hightlighting'}

highlighting('#formats','menu_item_formats') //if(location.hash=="#formats"){document.getElementById('menu_item_formats').className='hightlighting'}

highlighting('#ticket_grid','menu_item_ticket_grid') //if(location.hash=="#ticket_grid"){document.getElementById('menu_item_ticket_grid').className='hightlighting'}

highlighting('#prize_drawing','menu_item_prize_drawing') //if(location.hash=="#prize_drawing"){document.getElementById('menu_item_prize_drawing').className='hightlighting'}

highlighting('#raffle_ticket_list','menu_item_raffle_ticket_list') //if(location.hash=="#raffle_ticket_list"){document.getElementById('menu_item_raffle_ticket_list').className='hightlighting'}

}
window.onhashchange=content_change;
</script>


</head>

<body>


<div id="img_container" >
 <img id="twenty" src="http://www.whambamgames.com/wb/events/spade/20th2.png" alt="" >
</div>

<div id="dummy_twenty" ></div>

<div id="hider">
</div>




<div id="black_div" >

<div id="left" >

<a id="menu_item_home" href="#home" >Home</a>
<div id="home" style="display: none; ">
<p class="auto-style1"><span class="auto-style2">S.P.A.D.E.<br/>Spade Players Appreciation Day Event<br/>Saturday, April 21st 2018&nbsp; 
-&nbsp; From 12p PST to 12a PST</span></p>
<p class="auto-style1">For 20 years.. from the Zone to WGC &amp; now SHG players have 
supported our ALT formats, Tournaments &amp; Events.<br/>We would like to Thank 
YOU for that loyalty by giving away Twenty 3 month Yacht Club Memberships!</p>
<p class="auto-style1">To give every player a chance at winning - not just those 
who can be here for the entire event,<br/>we will be using our unique Raffle Ticket 
System for awarding the YCM prizes.</p>
<p class="auto-style1">Click any link above to find out more!&nbsp;</p>
<table style="border:0; width: 100%; text-align: center" >
<tr>
<td>
<div style="font-family: 'Century Gothic', sans-serif; margin-bottom: 20px; font-size:small;">
<a href="http://www.whambamgames.com/" target="_blank" style="background: white">
<img style="width: 49px; height: 50px; text-align: center; border: 0" alt="" src="http://www.whambamgames.com/wb/images/yy2.gif">
</a>
<b style="font-family: arial; font-size: 12px">
<a href="mailto:whambamtournys@hotmail.com" style="background: white"><br>whambamtournys@hotmail.com</a><br>
<span class="auto-style14">WHAM BAM TOURNAMENTS</span><br>
<span style="color:#008000">We</span> <span style="color:#800000">strive</span> 
<span style="color:#808000">to</span>
<span style="color:#000080">be</span> 
<span style="color:#800080">different.</span><br>
<span class="auto-style14">Since  1998</span>
</b>
</div>
</td>
</tr>
</table>
</div>

<a id="menu_item_event_rules" href="#event_rules" >Rules</a>
<div id="event_rules" style="display: none">
Shows on rules
</div>

<a id="menu_item_pre_register" href="#pre_register">Pre-Register</a>
<div id="pre_register" style="display: none; ">
Shows on pre-register
</div> 

<a id="menu_item_formats" href="#formats">Formats</a>
<div id="formats" style="display: none">
Shows when formats load
</div> 

<!-- image to the left of the central image -->
<div id="img_to_the_left" >
<img src="http://www.whambamgames.com/wb/events/spade/wham1.png" alt="" style="width: 100%; margin-top: 0px">
</div>

</div>

<div id="right" > 

<!-- image to the right of the central image -->
<div id="img_to_the_right" >
<img src="http://www.whambamgames.com/wb/events/spade/wham1.png" alt="" style="width: 100%; margin-top: 0px">
</div>

<a id="menu_item_ticket_grid" href="#ticket_grid">Ticket Grid</a>
<div id="ticket_grid" style="display: none">
Shows when 'ticked grid' is clicked on
</div>

<a id="menu_item_prize_drawing" href="#prize_drawing" >Prize Drawing</a>
<div id="prize_drawing" style="display: none; ">
Shows when 'prize drawing' is clicked on
</div> 

<a id="menu_item_raffle_ticket_list" href="#raffle_ticket_list" >Raffle Ticket List</a>
<div id="raffle_ticket_list" style="display: none">
Shows when 'raffle ticket list' is clicked on
</div>
</div>

</div>


<!-- The region in the body where the script inserts the content of a hidden div (a 'page') depending on the href value of the clicked link: -->

<div id="content_area" ></div>

<!-- At the end of the body section: -->
<script>
/* Loading the first 'page' (event_rules) at site entrance. If, in the menu, the ID on the id belonging to the menu-link for the first 'page' is not event_rules, replace '#event_rules' below with your own ID (preceded by the hash symbol) */
if(window.location.hash==''){window.location.replace('#home');}

/* Executing the function given above (see the head) when the (real) page loads */
setTimeout("content_change()",0)
</script> 

</body>

</html>

**molendijk** · 02-14-2018, 06:42 PM

This is better. It's more 'intuitive':

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>WB 20th Anniversary !!</title>

<style>
.auto-style1 {text-align: center;}

a:link {text-decoration: none}
body {background: url('http://www.whambamgames.com/wb/events/spade/yybg.jpg'); 
font-family: verdana; font-size: 16px; line-height: 26px; padding-top: 10px; overflow-y: scroll;
	padding-left: 3%;
	padding-right: 3%;
	padding-bottom: 3%;
}

.hightlighting {color: white; background: #DB0409; padding: 5px}
a:hover { background: #DB0409}

/* the image */
#twenty {width: 250px; display: block; margin: auto; z-index:1; }

/* the imgage is contained in a fixed div now (see below), so we have to make a clone in order to make sure that the fixed div behaves like a relative div   */
#dummy_twenty {
	border: medium #DB0409;
	position: relative;
	width: 250px;
	display: block;
	margin: auto;
	margin-bottom: 1px;
	z-index: 1;
	left: 0;
	background: white;
	height: 180px;
}

#img_container {
	border: thick #DB0409 solid;
	position: fixed;
	z-index: 3;
	left: 50%;
	transform: translate(-50%);
}

/* we should not see parts of the content area when it scrolls up */
#hider {position: fixed; left:0; top:0; right:0; height:60px; z-index: 1; background: white}

/* the logo-div */
#logo_div {position: fixed; left:0; width: 100%; background: black; color: white; top: 0px; height: 59px; z-index: 2}

/* the black header-div */
#black_div {position: fixed; left:0; width: 100%; background: black; color: white; top: 60px; height: 80px; z-index: 2}

/* the part of the menu to the left of the image */
#left {position: absolute; left: 5%; margin-top: 25px; z-index: 2; width: 45%}



/* the part of the menu to the right of the image */
#right {position: absolute; right:5%; margin-top: 25px; z-index: 2; width: 45%; text-align: right}


/* the menu-items */
#menu_item_home, #menu_item_event_rules, #menu_item_pre_register, #menu_item_formats, #menu_item_ticket_grid, #menu_item_prize_drawing, #menu_item_raffle_ticket_list {color: white;   padding: 5px; padding-left: 10px; margin-right: 10px; white-space: nowrap}

#content_area {
	background: #FFFFFF;
	position: relative;
	width: 99%;
	height: auto;
	margin-top: -25px;
	margin-bottom: 5px;
	border: 1px solid black;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 10px 5px 10px;
	border-radius: 5px;
	box-shadow: 5px 10px 18px #888888;
}

/* image to the left of the central image */
#img_to_the_left {position: fixed; z-index:4; left: 50%; margin-left: -250px; margin-top: -10px; height: 50px; overflow: hidden}

/* image to the right of the central image */
#img_to_the_right {position: fixed; z-index:4; left: 50%; margin-left: 150px; margin-top: -10px; height: 50px; overflow: hidden}

@media screen and (max-width: 1174px) {#twenty {width: 200px; margin-top: 10px}}
@media screen and (max-width: 1174px) {#content_area {margin-top: 0}}
@media screen and (max-width: 1140px) {#twenty {width: 150px; margin-top: 30px}}
@media screen and (max-width: 1140px) {#img_to_the_left {margin-left: -210px; }}
@media screen and (max-width: 1140px) {#img_to_the_right {margin-left: 110px; }}
@media screen and (max-width: 1090px) {#left {width: 280px; left:0; margin-top: 15px}}
@media screen and (max-width: 1090px) {#right {width: 280px; right:0; margin-top: 15px; right: 10px}}
@media screen and (max-width: 1090px) {#twenty {width: 200px; margin-top: 10px}}
@media screen and (max-width: 1090px) {#img_to_the_left {margin-left: -230px; }}
@media screen and (max-width: 1140px) {#img_to_the_right {margin-left: 130px; }}
@media screen and (max-width: 732px) {#left {width: 150px; margin-top: 0}}
@media screen and (max-width: 732px) {#right {width: 160px; margin-top: 0}}
@media screen and (max-width: 560px) {#black_div {top: 130px;}}
@media screen and (max-width: 560px) {#content_area {margin-top: 30px;}}
@media screen and (max-width: 560px) {#twenty {margin-top: -3px; width: 150px; border: 1px solid #DB0409}}
@media screen and (max-width: 560px) {#hider {height: 130px;}}
@media screen and (max-width: 480px) {#img_to_the_left {margin-left: -192px;  }}
@media screen and (max-width: 480px) {#img_to_the_right {margin-left: 85px; }}
@media screen and (max-width: 375px) {#img_to_the_left {display: none;  }}
@media screen and (max-width: 375px) {#img_to_the_right {display: none; }}



.auto-style3 {
	color: #DB0409;
	font-size: x-large;
}

</style>

<script>
function highlighting(lochash,the_class)
{
if(location.hash==lochash)
{document.getElementById(the_class).className='hightlighting'}
else {document.getElementById(the_class).className=null}
}
</script>

<script>
function content_change()
{
/* FILLING THE CONTENT-AREA (=A DIV HAVING ID='content_area' ON IT) WITH CONTENT FROM A HIDDEN DIV.*/
document.getElementById('content_area').innerHTML = document.getElementById(location.hash.substring(1,location.hash.length)).innerHTML

/* HIGHLIGHTING CURRENT MENU ITEMS */

highlighting('#home','menu_item_home') //if(location.hash=="#home"){document.getElementById('menu_item_home').className='hightlighting'}

highlighting('#event_rules','menu_item_event_rules') //if(location.hash=="#event_rules"){document.getElementById('menu_item_event_rules').className='hightlighting'}

highlighting('#pre_register','menu_item_pre_register') //if(location.hash=="#pre_register"){document.getElementById('menu_item_pre_register').className='hightlighting'}

highlighting('#formats','menu_item_formats') //if(location.hash=="#formats"){document.getElementById('menu_item_formats').className='hightlighting'}

highlighting('#ticket_grid','menu_item_ticket_grid') //if(location.hash=="#ticket_grid"){document.getElementById('menu_item_ticket_grid').className='hightlighting'}

highlighting('#prize_drawing','menu_item_prize_drawing') //if(location.hash=="#prize_drawing"){document.getElementById('menu_item_prize_drawing').className='hightlighting'}

highlighting('#raffle_ticket_list','menu_item_raffle_ticket_list') //if(location.hash=="#raffle_ticket_list"){document.getElementById('menu_item_raffle_ticket_list').className='hightlighting'}

}
window.onhashchange=content_change;
</script>


</head>

<body>


<div id="img_container" >
 <img id="twenty" src="http://www.whambamgames.com/wb/events/spade/20th2.png" alt="" >
</div>

<div id="img_to_the_left" >
<img src="http://www.whambamgames.com/wb/events/spade/wham1.png" alt="" style="width: 110px; ">
</div>

<div id="img_to_the_right"  >
<img src="http://www.whambamgames.com/wb/events/spade/wham1.png" alt="" style="width: 110px; ">
</div>

<div id="dummy_twenty" ></div>

<div id="hider">
</div>




<div id="black_div" >

<div id="left" >

<a id="menu_item_home" href="#home" >Home</a>
<div id="home" style="display: none; ">
<p class="auto-style1"><span class="auto-style2">S.P.A.D.E.<br/>Spade Players Appreciation Day Event<br/>Saturday, April 21st 2018&nbsp; 
-&nbsp; From 12p PST to 12a PST</span></p>
<p class="auto-style1">For 20 years.. from the Zone to WGC &amp; now SHG players have 
supported our ALT formats, Tournaments &amp; Events.<br/>We would like to Thank 
YOU for that loyalty by giving away Twenty 3 month Yacht Club Memberships!</p>
<p class="auto-style1">To give every player a chance at winning - not just those 
who can be here for the entire event,<br/>we will be using our unique Raffle Ticket 
System for awarding the YCM prizes.</p>
<p class="auto-style1">Click any link above to find out more!&nbsp;</p>
<table style="border:0; width: 100%; text-align: center" >
<tr>
<td>
<div style="font-family: 'Century Gothic', sans-serif; margin-bottom: 20px; font-size:small;">
<a href="http://www.whambamgames.com/" target="_blank" style="background: white">
<img style="width: 49px; height: 50px; text-align: center; border: 0" alt="" src="http://www.whambamgames.com/wb/images/yy2.gif">
</a>
<b style="font-family: arial; font-size: 12px">
<a href="mailto:whambamtournys@hotmail.com" style="background: white"><br>whambamtournys@hotmail.com</a><br>
<span class="auto-style14">WHAM BAM TOURNAMENTS</span><br>
<span style="color:#008000">We</span> <span style="color:#800000">strive</span> 
<span style="color:#808000">to</span>
<span style="color:#000080">be</span> 
<span style="color:#800080">different.</span><br>
<span class="auto-style14">Since  1998</span>
</b>
</div>
</td>
</tr>
</table>
</div>

<a id="menu_item_event_rules" href="#event_rules" >Rules</a>
<div id="event_rules" style="display: none">
Shows on rules
</div>

<a id="menu_item_pre_register" href="#pre_register">Pre-Register</a>
<div id="pre_register" style="display: none; ">
Shows on pre-register
</div> 

<a id="menu_item_formats" href="#formats">Formats</a>
<div id="formats" style="display: none">
Shows when formats load
</div> 



</div>

<div id="right" > 



<a id="menu_item_ticket_grid" href="#ticket_grid">Ticket Grid</a>
<div id="ticket_grid" style="display: none">
Shows when 'ticked grid' is clicked on
</div>

<a id="menu_item_prize_drawing" href="#prize_drawing" >Prize Drawing</a>
<div id="prize_drawing" style="display: none; ">
Shows when 'prize drawing' is clicked on
</div> 

<a id="menu_item_raffle_ticket_list" href="#raffle_ticket_list" >Raffle Ticket List</a>
<div id="raffle_ticket_list" style="display: none">
Shows when 'raffle ticket list' is clicked on
</div>
</div>

</div>


<!-- The region in the body where the script inserts the content of a hidden div (a 'page') depending on the href value of the clicked link: -->

<div id="content_area" ></div>

<!-- At the end of the body section: -->
<script>
/* Loading the first 'page' (event_rules) at site entrance. If, in the menu, the ID on the id belonging to the menu-link for the first 'page' is not event_rules, replace '#event_rules' below with your own ID (preceded by the hash symbol) */
if(window.location.hash==''){window.location.replace('#home');}

/* Executing the function given above (see the head) when the (real) page loads */
setTimeout("content_change()",0)
</script> 

</body>

</html>

**HippieChickie** · 02-15-2018, 08:39 PM

hello.

thanks for the fix. it was much simpler than i thought.

i had to add in a couple more menu items & i had to play with the margin left & width properties to keep it from going behind the center image.

it looks ok now but if someone is using a smaller browser it will go back behind the image. is there a way to have the menu items on either side center?

also, with the media css..

i looked at the page on my tablet & the center image is not in the right place. the whitespace for it is there but the image seems to be left aligned on the right side as if the page was split in half.

one last thing. i really like how you have that content div set up. i been thinking about only having the content inside of it scroll up while keeping the context box intact to be the size of the users browser.

i know i would have to add another div for the menu content & i tried but i couldnt get it to work correctly. i have a feeling im overthinking it like i did with the images to the left & right of the center image.

thanks,
HippieChickie

**HippieChickie** · 02-15-2018, 08:44 PM

Ack!

I didn't notice that you had posted another version & I have made changes to the previous version.

I will see what the differences are & change accordingly.

thanks,
HippieChickie

Thread: full page tab menu problems

Thread Tools

Search Thread

full page tab menu problems

The Following User Says Thank You to molendijk For This Useful Post:

The Following User Says Thank You to molendijk For This Useful Post:

The Following User Says Thank You to molendijk For This Useful Post:

The Following User Says Thank You to molendijk For This Useful Post:

Similar Threads

Css full page background

Want to create a div in a page to acquire full page height

Full Screen Load movie problems

amazon all 41 product categories full page drop down menu

Making page span full page height

Bookmarks

Bookmarks

Posting Permissions