Results 1 to 5 of 5

Thread: Lil bit of help.

  1. #1
    HEXUS.social member Disturbedguy's Avatar
    Join Date
    Nov 2006
    Location
    Manchester
    Posts
    5,113
    Thanks
    841
    Thanked
    482 times in 357 posts
    • Disturbedguy's system
      • Motherboard:
      • Asus Rog Strix Z370-H Gaming
      • CPU:
      • i7 8700K
      • Memory:
      • 16GB Corsair something or other
      • Storage:
      • 1 x Samsung 960 EVO (250GB) 1 x Samsung 850 EVO (500GB)
      • Graphics card(s):
      • GTX 1080Ti
      • Operating System:
      • Windows 7 Ultimate
      • Monitor(s):
      • 32inch Samsung TV
      • Internet:
      • Crap

    Lil bit of help.

    Hello all,

    I am looking for a little bit of help with the following: -

    HTML
    Code:
    <html>
    
    <head>
    
    <link href="lynxguide.css" rel="stylesheet" type="text/css" />
    
    <title>
    
    Online LYNX Guide Test
    
    </title>
    
    
    <script language="javascript"> 
    function toggle() {
    	var ele = document.getElementById("toggleText");
    	var text = document.getElementById("displayText");
    	if(ele.style.display == "block") {
        		ele.style.display = "none";
    		text.innerHTML = "XP";
      	}
    	else {
    		ele.style.display = "block";
    		text.innerHTML = "XP";
    	}
    } 
    </script>
    
     
    <script language="javascript"> 
    function toggle2() {
    	var ele = document.getElementById("toggleText2");
    	var text = document.getElementById("displayText1");
    	if(ele.style.display == "block") {
        		ele.style.display = "none";
    		text.innerHTML = "VISTA";
      	}
    	else {
    		ele.style.display = "block";
    		text.innerHTML = "VISTA";
    	}
    } 
    </script>
    
    
    </head>
    
    
    
    
    
    <body>
    
    
    <form method="post" action="javascript:toggle();">
      <input name="url" type="hidden" value="XP Guide">
      <input type="submit" value="XP">
      </form> 
    
    <form method="post" action="javascript:toggle2();">
      <input name="url" type="hidden" value="Vista Guide">
      <input type="submit" value="Vista" width="70px">
      </form>
    
    
    <br />
    <br />
    
    <div id="toggleText" style="display: none"><h1>XP</h1>
    </div>
    
    
    <div id="toggleText2" style="display: none"><h1>VISTA</h1>
    
    	</div>	
    
    	
    
    </body>
    
    
    </html>

    CSS

    Code:
    body { background-color: #FFFFCC;
           text-align:center;
    }
    
    #container {
    width:90%;
    height:70%;
    background-color: #FFFFCC;
    }
    
    #testnav {
    
    	width:10%;
    	height:20%;
    	background-color: #336666;
    	padding:2px;
    	margin:auto;
    }
    
    #toggleText {
    	
    	
    	width:10%;
    	height:5%;
    	background-color: #999966;
    	align:right;
    	}
    
    #toggleText2 {
    	
    	
    	width:10%;
    	height:5%;
    	background-color: #999966;
    	align:right;
    	}
    
    #toggleText3 {
    	
    	
    	width:10%;
    	height:5%;
    	background-color: #999966;
    	align:right;
    	}
    
    
    
    A:link {text-decoration: none; color:#000000;}
    A:visited {text-decoration: none; color:#000000;}
    A:active {text-decoration: none; color:#000000;}
    A:hover {text-decoration: none; color:#000000;}
    I am doing this for work and they use IE 6.0 (urgh!)

    While I can generally align things fine with FireFox and later version's of IE, I am having trouble with the above.

    I want the two button's plus one more to be on the same line, not one beneath the other.

    On top of that, at the moment when I click "XP" it open's, I then have to click "XP" again to close it, however I want it so that if I click "XP" and it has opened then I click "Vista" the "XP" bit closes and the "Vista" one open's.

    Sorry for being cheeky with a third question as well, at the moment when I click XP and it opens then I click Vista, the Vista one drop's below the XP, I would like it so that, when I click XP, then Vista, XP closes and Vista open's in the same position.

    I haven't used JavaScript before so I have just taken my example of the Internet.

    I am still working on the general styling however I want to make sure that the website/ button's function correctly before I complete the styling and such.


    Sorry if I haven't explained myself very well, any questions just ask.

    P.S: - Yes the colours do suck. But they have to match our intranet although those colours aren't quite there yet.

    Cheers in advanced.
    Disturbedguy (Anthony)
    Quote Originally Posted by TAKTAK View Post
    It didn't fall off, it merely became insufficient at it's purpose and got a bit droopy...

  2. #2
    HEXUS.social member Disturbedguy's Avatar
    Join Date
    Nov 2006
    Location
    Manchester
    Posts
    5,113
    Thanks
    841
    Thanked
    482 times in 357 posts
    • Disturbedguy's system
      • Motherboard:
      • Asus Rog Strix Z370-H Gaming
      • CPU:
      • i7 8700K
      • Memory:
      • 16GB Corsair something or other
      • Storage:
      • 1 x Samsung 960 EVO (250GB) 1 x Samsung 850 EVO (500GB)
      • Graphics card(s):
      • GTX 1080Ti
      • Operating System:
      • Windows 7 Ultimate
      • Monitor(s):
      • 32inch Samsung TV
      • Internet:
      • Crap

    Re: Lil bit of help.

    No one ;(
    Quote Originally Posted by TAKTAK View Post
    It didn't fall off, it merely became insufficient at it's purpose and got a bit droopy...

  3. #3
    HEXUS.social member Disturbedguy's Avatar
    Join Date
    Nov 2006
    Location
    Manchester
    Posts
    5,113
    Thanks
    841
    Thanked
    482 times in 357 posts
    • Disturbedguy's system
      • Motherboard:
      • Asus Rog Strix Z370-H Gaming
      • CPU:
      • i7 8700K
      • Memory:
      • 16GB Corsair something or other
      • Storage:
      • 1 x Samsung 960 EVO (250GB) 1 x Samsung 850 EVO (500GB)
      • Graphics card(s):
      • GTX 1080Ti
      • Operating System:
      • Windows 7 Ultimate
      • Monitor(s):
      • 32inch Samsung TV
      • Internet:
      • Crap

    Re: Lil bit of help.

    Is anyone able to help?
    Quote Originally Posted by TAKTAK View Post
    It didn't fall off, it merely became insufficient at it's purpose and got a bit droopy...

  4. #4
    Not a good person scaryjim's Avatar
    Join Date
    Jan 2009
    Location
    Gateshead
    Posts
    15,196
    Thanks
    1,231
    Thanked
    2,291 times in 1,874 posts
    • scaryjim's system
      • Motherboard:
      • Dell Inspiron
      • CPU:
      • Core i5 8250U
      • Memory:
      • 2x 4GB DDR4 2666
      • Storage:
      • 128GB M.2 SSD + 1TB HDD
      • Graphics card(s):
      • Radeon R5 230
      • PSU:
      • Battery/Dell brick
      • Case:
      • Dell Inspiron 5570
      • Operating System:
      • Windows 10
      • Monitor(s):
      • 15" 1080p laptop panel

    Re: Lil bit of help.

    Hmmm, you're not using the best approach (which would be passing variables to a single function, rather than using 2), but if you want a quick dirty fix:

    1) to have your buttons on one line don't use 2 forms. In fact, you don't really need a form at all: use buttons with the onclick attribute (<input type="button" onclick="toggle();">) - then you can line them up in a single div.
    2) Neither of your functions contains code that controls the *other* div. You need to add this to switch the unnecessary div's style to "display: none;" if you want each button to "turn off" the other sets of text.
    3) This is resoved by 2!

    IMHO this would work better with 1 function that takes a parameter though - so you would declare the function toggle(type) { }. Then you would call it (using buttons) by onclick="toggle('XP');", and in the body of the function you'd write something like:
    if (type=="XP") { /* show the XP div and hide the others */ }

    I'd strongly recommend a Javascript teach-yourself book. I like the SAMS (24 hours / 21 days) series; they lead you through the topic sensibly and are also very easy to use as a back-reference later, particularly for languages you don't use very often.

  5. Received thanks from:

    Disturbedguy (26-05-2009)

  6. #5
    HEXUS.social member Disturbedguy's Avatar
    Join Date
    Nov 2006
    Location
    Manchester
    Posts
    5,113
    Thanks
    841
    Thanked
    482 times in 357 posts
    • Disturbedguy's system
      • Motherboard:
      • Asus Rog Strix Z370-H Gaming
      • CPU:
      • i7 8700K
      • Memory:
      • 16GB Corsair something or other
      • Storage:
      • 1 x Samsung 960 EVO (250GB) 1 x Samsung 850 EVO (500GB)
      • Graphics card(s):
      • GTX 1080Ti
      • Operating System:
      • Windows 7 Ultimate
      • Monitor(s):
      • 32inch Samsung TV
      • Internet:
      • Crap

    Re: Lil bit of help.

    Hey sorry, should have updated. I have this pretty much sorted now.
    Thanks for the reply jim.

    In all fairness I wasnt actually looking to learn anything, but it is something I may look into now..
    Quote Originally Posted by TAKTAK View Post
    It didn't fall off, it merely became insufficient at it's purpose and got a bit droopy...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Call of Juarez - PC Review
    By Ferral in forum Reader Reviews
    Replies: 2
    Last Post: 07-11-2006, 07:04 PM
  2. Downgrade to Windows xp 32 bit
    By craig.nita in forum Software
    Replies: 3
    Last Post: 17-01-2006, 12:21 PM
  3. xp pro 64 bit or 32 bit
    By TiMeZeRo in forum Software
    Replies: 7
    Last Post: 04-11-2005, 10:25 AM
  4. good bit torrent client...with no spyware
    By cm_uk in forum Software
    Replies: 24
    Last Post: 23-07-2004, 12:46 PM
  5. Bit torrent crashing
    By dkmech in forum Help! Quick Relief From Tech Headaches
    Replies: 17
    Last Post: 17-07-2004, 01:29 PM

Posting Permissions

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