dHTML help

Discussion in 'HTML & Website Design' started by rokius, Mar 3, 2013.

  1. #1
    I have this basic HTML document that I need help with.

    After a user clicks on the ">", the menu expands. However, I would like the ">" to change to "<" after it is clicked/expanded. In addition, I would like the menu to be able to shift back to its original position if the "<" is clicked. I don't want to radically change the code (this is an assignment). Any suggestions?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <style>
        #hmenu {position:absolute; overflow: hidden; left: -275px; width:350px; height:30px; border: solid 1px #339900; padding: 5px; font-family: arial, sans-serif;}
        #harrow {position: absolute; left: 325px; top: 5px; border: solid 1px #339900; font-weight: bold; width:20px; height: 18px; text-align:center; background-color:#336600; }
        a {text-decoration: none;}
        #harrow a {color: white}
       
    </style>
     
    <script>
     
        function move(menu_id,mTop,mLeft){
            var obj = document.getElementById(menu_id);
                obj.style.top =  obj.offsetTop+mTop +"px";
                obj.style.left = obj.offsetLeft+mLeft+"px";
        }
       
    </script>
     
    </HEAD>
     
    <BODY>
     
    <div id=hmenu>
    <a href=#>Link 1</a> | <a href=#>Link 2</a> | <a href=#>Link 3</a> | <a href=#>Link 4</a> | <a href=#>Link 5</a>
    <div id=harrow><a href="#" onclick="move('hmenu',0,295)"> > </a></div>
    </div>
    </BODY>
    </HTML>
    HTML:
     
    Solved! View solution.
    rokius, Mar 3, 2013 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    My advice? WHAT DHTML, and stop trying to use javascript to do CSS' job. If all you are doing is a expand/contract on a section, just swap a class with the scripting and let CSS do the grunt-work, instead of playing games with trying to move the object with unreliable values.

    Though given the decade and a half out of date markup methodologies, scripting methodologies, and just plain bad code, you've probably been given a dipshit assignment by a dipshit "teacher" who has no business teaching anyone a blasted thing! See 90%+ of educators in the IT field and why that piece of paper you're working towards isn't worth a sheet of bog roll.

    Apologies if that seems a little harsh -- but to do what I THINK you are trying to do, I'd throw out EVERYTHING you have there.
     
    deathshadow, Mar 3, 2013 IP
  3. rokius

    rokius Active Member

    Messages:
    81
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    98
    #3
    deathshadow, I know it's ridiculous. Unfortunately, this is the scope of the assignment and I can't do anything about it.

    Putting that aside, what can I add to this code to do what I need? I know it's tempting to change the entire approach, but I can't :(

    Oh, and I read your insight on this particular issue: http://techtalkin.com/Thread-So-what-s-wrong-with-your-website-PART-3?pid=202#section_3.4

    I couldn't agree more. Words of wisdom...
     
    Last edited: Mar 3, 2013
    rokius, Mar 3, 2013 IP
  4. #4
    Ok, ASSUMING you want to keep as much of the buggy broken invalid outdated garbage as possible... ALL you need here is a couple simple class swaps and some display state changes, NOT goofing around with positioning.

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"><html><head>
    
    <title>
    	open/close menu demo
    </title>
    
    <style type="text/css"><!--
    	#hMenu {
    		overflow:hidden; /* wrap floats */
    		position:relative; /* so the div can be apo off #hMenu */
    		zoom:1; /* trip haslayout so positioning isn't screwed up in IE */
    	}
    	
    	.menu div {
    		float:left;
    		border:1px solid #390;
    	}
    	
    	.menu a {
    		display:inline-block;
    		padding:0.2em 0.5em;
    	}
    	
    	.hMenuClose div,
    	.hMenuClose .closeArrow,
    	.hMenuOpen .openArrow {
    		display:none;
    	}
    	
    	.hMenuOpen div {
    		display:inline;
    	}
    	
    	.hMenuOpen .closeArrow,
    	.hMenuClose .openArrow {
    		display:inline-block;
    	}
    	
    	.openArrow,
    	.closeArrow {
    		font-weight:bold;
    		text-decoration:none;
    		color:#FFF;
    		background:#360;
    		border:1px solid #390;
    	}
    	
    --></style>
    
    </head></body>
    
    <div id="hMenu" class="menu hMenuClose">
    
    	<div>
    		<a href=#>Link 1</a> |
    		<a href=#>Link 2</a> |
    		<a href=#>Link 3</a> |
    		<a href=#>Link 4</a> |
    		<a href=#>Link 5</a>
    	</div>
    
    	<a
    		href="#"
    		onclick="document.getElementById('hMenu').className='menu hMenuOpen'; return false;"
    		class="openArrow"
    	>&gt;</a>
    	<a
    		href="#"
    		onclick="document.getElementById('hMenu').className='menu hMenuClose'; return false;"
    		class="closeArrow"
    	>&lt;</a>
    
    </div>
    
    
    </body></html>
    Code (markup):
    NOT that I'd ever deploy code like that... but that's generally how I'd go about it... (I dumbed down the scripting a LOT and resisted the temptation to throw all the markup away) -- without screwing around with margins or positioning since there's NO reason to be using APO on any of that.
     
    deathshadow, Mar 3, 2013 IP
  5. rokius

    rokius Active Member

    Messages:
    81
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    98
    #5
    I appreciate your help deathshadow! Thanks for your time!
     
    rokius, Mar 3, 2013 IP