www.webdeveloper.com
Results 1 to 3 of 3

Thread: doctype kills firefox layout

Hybrid View

  1. #1
    Join Date
    Jul 2010
    Posts
    4

    doctype kills firefox layout

    i've got some simple javascript drag and drop boxes with hover effects. it has mouse event support for both firefox and internet explorer. everything works fine in firefox, but the css :hover effects were not working in ie. after some searching, i found that i needed to specify doctype for :hover to work in ie, so i did. then everything worked great in internet explorer, but the layout is messed up in firefox. specifically, they are not receiving positioning, and it looks like they just stack at the default location.

    Code:
    <html>
    
    <head>
    <style type="text/css">  
    div.draggable, div.fixed {
    	position:absolute;
    	width:270px;
    	height:70px;
    	padding:10px;
    	border:0px;
    	color: #ffffff;
    	background-color:#313C6F;
    }
    div.draggable:hover, div.fixed:hover {
    	border:2px solid #333333;
    	padding:8px;
    }
    div.fixed {
    	background-color:#444444;
    }
    #follow {
    	background-color:#772727;
    }
    #me {
    	background-color:#28682E;
    }
    #where {
    	
    }
    </style>
    <title>Follow Me</title>
    <script type="text/javascript"> 
    var z = 1; //set initial z-index
    onload = init; //run function INIT on load
    
    function init() { //set initial parameters
    	boxes = document.getElementsByTagName('div'); //get all divs on page
    	var x = 10; //inital position x
    	var y = 10; //initial position y
    	for (i=0; i<boxes.length; i++) { //loop through all divs
    		box = boxes[i]; //set current div
    		box.left = x; //store position x
    		box.style.left = box.left; //set position x
    		box.top = y; //store position y
    		box.style.top = box.top; //set position y
    		y = y + 100; //next position y
    		if (box.className == "draggable") { //if draggable
    			if (navigator.appName == "Microsoft Internet Explorer") {
    				box.onmousedown = followMeIE;
    			}
    			else {
    				box.onmousedown = followMeFF; //run function FOLLOW ME on mousedown
    			}
    		}
    	}	
    }
    
    function followMeFF(e) { //allows draggable divs to follow cursor
    	box = this; //set current div
    	box.leftLoc = e.clientX-box.left; //locate relative mouse position x
    	box.topLoc = e.clientY-box.top; //locate relative mouse position y
    	box.style.zIndex = z++; //bring to top
    	document.onmousemove = moveBoxFF; //run function MOVEBOX on mousemove
    	document.onmouseup = freezeFF; //run function FREEZE on mouseup
    } 
    function followMeIE() { //allows draggable divs to follow cursor
    	box = this; //set current div
    	box.leftLoc = event.clientX-box.left; //locate relative mouse position x
    	box.topLoc = event.clientY-box.top; //locate relative mouse position y
    	box.style.zIndex = z++; //bring to top
    	document.onmousemove = moveBoxIE; //run function MOVEBOX on mousemove
    	document.onmouseup = freezeIE; //run function FREEZE on mouseup
    } 
    function freezeFF(e) { //return div to stationary
    	document.onmousemove = ''; //clear div positioning function
    	document.onmouseup = ''; //clear div freeze function
    	box.left = e.clientX-box.leftLoc; //set final position x
    	box.top = e.clientY-box.topLoc;	 //set final position y
    } 
    function freezeIE() { //return div to stationary
    	document.onmousemove = ''; //clear div positioning function
    	document.onmouseup = ''; //clear div freeze function
    	box.left = event.clientX-box.leftLoc; //set final position x
    	box.top = event.clientY-box.topLoc;	 //set final position y
    }
    function moveBoxFF(e) { //set div position to follow cursor
    	box.style.top = e.clientY-box.topLoc; //set position y
    	box.style.left = e.clientX-box.leftLoc; //set potition x
    } 
    function moveBoxIE() { //set div position to follow cursor
    	box.style.top = event.clientY-box.topLoc; //set position y
    	box.style.left = event.clientX-box.leftLoc; //set potition x
    }
    </script> 
    </head>
    
    <body>
    
    <div id="follow" class="draggable">This is a draggable div.</div>
    <div id="me" class="draggable">This is another div you can drag.</div>
    <div class="fixed">But this one is not draggable.</div>
    <div id="where" class="draggable">This is one more draggable div.</div>
    <div class="fixed">This one is also not draggable.</div>
    
    
    </body>
    
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Add units to ALL dimensions:
    Code:
    box.style.left = box.left+'px';

  3. #3
    Join Date
    Jul 2010
    Posts
    4
    ah, that did it. i had problems with the styles including "px" initially which is why i started recording box.left separately. but i incorrectly assumed that setting a number to box.style.left would append 'px' automatically.


    thanks

    Quote Originally Posted by Fang View Post
    Add units to ALL dimensions:
    Code:
    box.style.left = box.left+'px';

Thread Information

Users Browsing this Thread

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

Tags for this Thread

Posting Permissions

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



Recent Articles