Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 26

Thread: full page tab menu problems

  1. #11
    Join Date
    Feb 2014
    Posts
    50
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    hello

    ok I see you have changed the image & I changed the code in the right places.

    however, I cant get the left/right images to show up using the new way. I adjusted the width from 110 to 250 as the image has changed & still nothing. just shows up blank.

    I tried changing the margin top but that didn't work either. so I left your code as is, & added back in the images to either side of the <div id="right"> in the old place.

    unless I missed a piece of code ?

    Thanks,
    HippieChickie

  2. #12
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,810
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    There were errors on your page.
    And you added items. When you add an item, you must adjust the CSS. EDIT: I also posted a version that allows you to add menu items without having to change existing CSS, see post below.
    This works:
    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_stats, #menu_item_ticket_grid, #menu_item_prize_drawing, #menu_item_raffle_ticket_list, #menu_item_winners {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: -300px; 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: 1425px) {#twenty {width: 200px; margin-top: 10px}}
    @media screen and (max-width: 1425px) {#content_area {margin-top: 0}}
    @media screen and (max-width: 1365px) {#left {width: 450px; }}
    @media screen and (max-width: 1365px) {#right {width: 450px; }}
    @media screen and (max-width: 1215px) {#left {width: 400px; }}
    @media screen and (max-width: 1140px) {#twenty {width: 150px; margin-top: 30px}}
    @media screen and (max-width: 1140px) {#img_to_the_left {margin-left: -280px; }}
    @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: -290px; }}
    @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: 560px) {#img_to_the_left {margin-left: -270px;  }}
    @media screen and (max-width: 560px) {#img_to_the_right {margin-left: 115px; }}
    @media screen and (max-width: 525px) {#img_to_the_left {display: none;  }}
    @media screen and (max-width: 525px) {#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('#stats','menu_item_stats') //if(location.hash=="#stats"){document.getElementById('menu_item_stats').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'}
    
    highlighting('#winners','menu_item_winners') //if(location.hash=="#winners"){document.getElementById('menu_item_winners').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/whamlogo2.png" alt="" style="width: 158px; ">
    </div>
    
    <div id="img_to_the_right"  >
    <img src="http://www.whambamgames.com/wb/events/spade/bamlogo2.png" alt="" style="width: 130px; ">
    
    </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> 
    
    <a id="menu_item_stats" href="#stats">Stats</a>
    <div id="stats" style="display: none">
    Shows when 'stats' is clicked on
    </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>
    
    <a id="menu_item_winners" href="#winners" >Winners</a>
    <div id="winners" style="display: none">
    Shows when 'winners' 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>
    Last edited by molendijk; 02-16-2018 at 09:11 PM.

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

    HippieChickie (02-23-2018)

  4. #13
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,810
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    Here's a version that allows you to add menu items without having to change the existing CSS:
    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: 200px; display: block; margin: auto; z-index:1; }
    
    
    
    #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; z-index: 2}
    
    /* the part of the menu to the left of the image */
    #left {position: absolute; left: 20px; z-index: 2; top: 50%; max-width: 50%; transform: translateY(-50%) }
    
    
    
    /* the part of the menu to the right of the image */
    #right {position: absolute; right:20px; z-index: 2; text-align: right; top: 50%; max-width: 50%; transform: translateY(-50%)}
    
    
    /* 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, #menu_item_stats, #menu_item_winners {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: -292px; 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: 160px; margin-top: -10px; height: 50px; overflow: hidden}
    
    @media screen and (max-width: 560px) {#hider {height: 130px;}}
    
    @media screen and (max-width: 655px) {#twenty {width: 100px;  }}
    
    @media screen and (max-width: 655px) {#img_to_the_left {margin-left: -220px  }}
    
    @media screen and (max-width: 655px) {#img_to_the_right {margin-left: 80px  }}
    
    @media screen and (max-width: 450px) {#img_to_the_left {visibility: hidden }}
    
    @media screen and (max-width: 450px) {#img_to_the_right {visibility: hidden}}
    
    .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'}
    
    highlighting('#stats','menu_item_stats') 
    
    highlighting('#winners','menu_item_winners')
    
    }
    window.onhashchange=content_change;
    </script>
    
    
    <script> 
    /* Positioning and sizing elements with the help of javascripts so that we can add menu items without having to make CSS-modifications  */
    
    function position_size_elements()
    {
    document.getElementById('left').style.width = window.innerWidth/2 - document.getElementById('twenty').clientWidth + 50 +'px';
    
    document.getElementById('right').style.width = window.innerWidth/2 - document.getElementById('twenty').clientWidth + 50 +'px';
    
    document.getElementById('black_div').style.height = document.getElementById('left').clientHeight + 40 +'px';
    
    document.getElementById('black_div').style.top = document.getElementById('img_to_the_left').clientHeight + document.getElementById('img_to_the_left').scrollTop + 10+'px';
    
    document.getElementById('content_area').style.top = Math.max(document.getElementById('black_div').clientHeight + document.getElementById('black_div').scrollTop + document.getElementById('img_to_the_left').clientHeight + document.getElementById('img_to_the_left').scrollTop,document.getElementById('twenty').clientHeight + document.getElementById('twenty').scrollTop + document.getElementById('img_to_the_left').clientHeight+ document.getElementById('img_to_the_left').scrollTop)+'px'
    }
    
    window.addEventListener('load', function (){position_size_elements()}, false);
    
    window.addEventListener('resize', function (){position_size_elements()}, false);
    
    </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/whamlogo2.png" alt="" style="width: 140px; ">
    </div>
    
    <div id="img_to_the_right"  >
    <img src="http://www.whambamgames.com/wb/events/spade/bamlogo2.png" alt="" style="width: 140px; ">
    </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> 
    
    <a id="menu_item_stats" href="#stats">Stats</a>
    <div id="stats" style="display: none">
    Shows when 'stats' is clicked on
    </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>
    
    <a id="menu_item_winners" href="#winners" >Winners</a>
    <div id="winners" style="display: none">
    Shows when 'winners' 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>
    Last edited by molendijk; 02-16-2018 at 10:43 PM.

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

    HippieChickie (02-23-2018)

  6. #14
    Join Date
    Feb 2014
    Posts
    50
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    hello

    page looks great now & i can play with the menu items at whim!

    why is it when 1 problem is solved another appears lol

    i started adding content under the format div. now i no longer have any bg showing on the bottom. i thought it may be margins or padding but if that were the case it wouldnt be correct when on home.

    yes the content is alot shorter on the home div but that shouldnt matter.

    is it possible to make the content div be a fixed size that works with the users browser showing a little of the bg on all 4 sides. then inside that content div have another div that scrolls the actual content.

    i did try to figure it out myself but it either didnt work or it put the div in the wrong place.

    as i said before i really like the shadow effect & how you have it set up & would like to see all of it at all times.


    the other thing is the central image & media. the adjusted code you are now using removed the white space that was appearing but has pushed it to the right where its colliding with the image to the right.

    thanks,
    HippieChickie

  7. #15
    Join Date
    Feb 2014
    Posts
    50
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    hello

    im having trouble getting any inner elements to work under the Formats menu item.

    i need to have a div open when a user clicks on a link. i have tried in both javascript & in css & i cant get either to work on this page but they do work on other pages so there must be some sort of conflict im not seeing.

    css way:

    Code:
    div#example { margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
        padding: 10px;
    }
    input:checked + label + div#example { display: none; }
    input + label:after { content: " Hide Example *"; }
    input:checked + label:after { content: " Show Example *"; }
    
    label {
        background-color: #DB0409 ; color: white;
        box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
        border-radius: 4px;
        font-size: 16px;
        display: inline-block;
        padding: 5px;
        cursor: pointer;
    }
    
    
    <input type='checkbox' style='display: none' id=cb checked>
    <label for=cb>*</label>
    <div id="example">mumbo jumbo</div>
    the javascript way:
    Code:
    <script>
    function showexample() {
        var x = document.getElementById("example");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display =  "none";
        }
    } 
    
    </script>
    
    <button onclick="showexample()">Show Example</button>
    	<div id="example">mumbo jumbo</div>
    not sure what to adjust to make it work

    thanks,
    HippieChickie

  8. #16
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,810
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    Hello HippieChickie,
    I've been offline for a week, so I saw your last posts only today. I'm very busy at the moment, but I will come back to you as soon as possible, maybe tomorrow. I only had a quick superficiel look at your posts, but I think your problems can be solved quite easily.

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

    HippieChickie (02-27-2018)

  10. #17
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,810
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    Hello HippieChickie,
    The content has a fixed size now and the bg shows at the bottom however long the page.
    Your code for the button 'Show/Hide' in Formats wasn't wrong but did not work because all 'pages' (home, rules, formats etc) have 'display: none' by default. For 'Show/Hide' you must do onmouseup="content_change()" onmousedown="showHideDiv('divMsg')".
    PS.: don't use a negative value for the top or margin-top of the content area; leave things as they are.

    The code was too long for posting it on DD, so I put a demo here. Just copy/paste the source.

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

    HippieChickie (02-27-2018)

  12. #18
    Join Date
    Feb 2014
    Posts
    50
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    Arie,

    this is perfect!! you truely outdid yourself & looks so much better than what i could have done without your help.

    i cant thank you enough for this beautiful setup!!

    lol, i tried about 10 diff scripts trying to get that button to work. now i can finish adding in my content.

    it took me a bit to figure out how come the grid wasnt right. there was two .class3. once i removed the 2nd one, grid was fixed.

    thanks agian for all your help - you are truly dynamic

    HippieChickie

  13. #19
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,810
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

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

    HippieChickie (04-09-2018)

  15. #20
    Join Date
    Feb 2014
    Posts
    50
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    Hello again.

    can you please tell me what i can change to be able to see what im editing in design view.

    im having a heck of a time being under code.

    i tried changing the div i was working on from 'none' to 'show' but that didnt work. so i added in color="black" which does make it appear but it overrides my color .class

    i can change the black div to color=black from color=white & that will also make whatever div i have showing appear but it wrecks havoc on other things.

    the code is to long to paste here but here is the link: http://www.whambamgames.com/wb/events/spade/spade.html

    help please!

    HippieChickie

Similar Threads

  1. Css full page background
    By Godji in forum CSS
    Replies: 3
    Last Post: 09-24-2011, 11:37 AM
  2. Want to create a div in a page to acquire full page height
    By registeredspider in forum JavaScript
    Replies: 3
    Last Post: 02-05-2009, 05:50 AM
  3. Full Screen Load movie problems
    By punstc in forum Flash
    Replies: 1
    Last Post: 12-09-2007, 07:58 AM
  4. amazon all 41 product categories full page drop down menu
    By skywind in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-18-2007, 08:44 AM
  5. Making page span full page height
    By Titan85 in forum CSS
    Replies: 6
    Last Post: 06-07-2007, 05:40 AM

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
  •