SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Rancho Cordova
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getAttribute("width") not returning correctly in IE

    I'm working on a slider script and it would be just lovely to be able to specify the slider's width in a width attribute on the input that represents it. In the code below, getAttribute("width") is returning 0 in IE, but seems to work fine in firefox. . . .

    Working Link (in FF)


    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<script type="text/javascript">
    			var curr_slide="";
    			var ie = (document.all && !window.opera)?1:0;
    			if (!ie) document.captureEvents(Event.MOUSEMOVE)
    			var tempX = 0
    			var tempY = 0
    			var slide_width=200;
    			window.onload=function()
    			{
    				buildSlider();
    			}
    			function buildSlider()
    			{
    				var sliders=getElementsByClassName(document,'input','slider');
    				var len=sliders.length;
    				for(var i=0;i<len;i++)
    				{
    					var div=document.createElement('div');
    					div.className='slider_house';
    					alert(sliders[i].getAttribute('width'));
    					if(sliders[i].getAttribute('width'))
    					{
    						slide_width=sliders[i].getAttribute('width')*1;	
    					}
    					div.style.width=(slide_width+10)*1+'px';
    					var handle=document.createElement('div');
    					handle.className='handle';
    					handle.style.left='0px';
    					handle.onmousedown=function()
    					{
    						curr_slide=this;
    						document.onmousemove=function(e)
    						{
    							getMouseXY(e);
    						}
    						document.onmouseup=function()
    						{
    							document.onmousemove="";
    						}
    					}
    					div.appendChild(handle);
    					sliders[i].parentNode.insertBefore(div,sliders[i]);
    				}	
    			}
    			function getSlide(obj)
    			{
    				var s=obj.parentNode;
    				var lft1=s.offsetLeft;
    				var lft2=obj.offsetLeft;
    				var num=(lft2-lft1)-1;
    				if(ie)
    				{
    					num=num-10;
    				}
    				return num;
    			}
    			function getElementsByClassName(oElm, strTagName, strClassName){
    			    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    			    var arrReturnElements = new Array();
    			    strClassName = strClassName.replace(/\-/g, "\\-");
    			    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    			    var oElement;
    			    for(var i=0; i<arrElements.length; i++){
    			        oElement = arrElements[i];      
    			        if(oRegExp.test(oElement.className)){
    			            arrReturnElements.push(oElement);
    			        }   
    			    }
    			    return (arrReturnElements)
    			}
    			function getMouseXY(e) 
    			{
    				if (ie) 
    				{
    					tempX = event.clientX + document.body.scrollLeft
    					tempY = event.clientY + document.body.scrollTop
    				} 
    				else 
    				{
    					tempX = e.pageX
    					tempY = e.pageY
    				}  
    				if(tempX < 0)
    				{
    					tempX = 0
    				}
    				if(tempY < 0)
    				{
    					tempY = 0
    				}  
    				n_spot=tempX-curr_slide.parentNode.offsetLeft;
    				var c_obj=curr_slide.parentNode.nextSibling;
    			
    				while(!c_obj.nodeType==1)
    				{
    					c_obj=c_obj.nextSibling
    				}
    				if(c_obj.getAttribute('width'))
    				{
    					slide_width=c_obj.getAttribute('width')*1;
    				}
    				if(n_spot<=0)
    				{
    					n_spot=0;
    				}
    				else if(n_spot>slide_width)
    				{
    					n_spot=slide_width;
    				}
    				curr_slide.style.left=n_spot+'px';
    				c_obj.value=getSlide(curr_slide)*c_obj.getAttribute('alt');
    			}
    		</script>
    		<style type="text/css">
    			.slider
    			{
    				width:40px;
    				font-size:10px;
    				height:11px;
    				float:left;
    			}
    			.slider_house
    			{
                                                       clear:left;
    				float:left;
    				border-top:solid 1px #10385A;
    				border-left:solid 1px #FFFFFF;
    				border-right:solid 1px #FFFFFF;
    				margin-right:3px;
    			}
    			.handle
    			{
    				height:15px;
    				width:10px;
    				border-right:solid 1px #FFFFFF;
    				cursor:pointer;
    				position:relative;
    				left:0px;
    				border-left:solid 1px #FFFFFF;
    				background-image:url(images/triangle.gif);
    			}
    			table
    			{
    				width:100%;
    			}
    			table tbody tr td
    			{
    				border:solid 1px;
    			}
    		</style>
    	</head>
    	<body>
    		<br />
    		<form method="post">
    			<input type="text" alt="100" width="200" class="slider" />
    			<br />
    			<input type="text" alt="10" width="100" class="slider" />
    			<br />
    			<input type="text" alt="5" width="300" class="slider" />
    			<br />
    			<input type="text" alt="1" width="250" class="slider" />
    			<br />
    			<input type="text" alt="1000" width="50" class="slider" />
    			<br />
    			<input type="text" alt="2" width="500" class="slider" />
    			<br />
    		</form>
    	</body>
    </html>
    Thanks,
    Basscyst

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Basscyst,

    For some reason IE doesn't like you using "width" as an attribute name. "size" works. "mywidth" works, etc. Try it and see what you get.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Rancho Cordova
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mike. I had success with other attribute names. Just thought it was odd that width didn't work, size seems a nice alternative.

    Thanks,
    Basscyst


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
  •