GetAttribute("width") Not Returning Correctly
Oct 31, 2006
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. . . .
<!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=Ɔpx'
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>
View 5 Replies
ADVERTISEMENT
May 26, 2010
I have a weird bug that's occuring in pretty much all the browsers. If I close the tab, and then hit Ctrl -> Shift -> T to bring it back the width() method returns 0 on an appended image instead of what the image actually is. Hitting refresh on the tab removes this bug and everything works fine. I will also say that trying
.css('width') and
document.getElementById('divShadowLeft');
Both also return 0 for this bug.
I can't show all the code for security reasons, but I'll just outright ask.. what are the reasons that width() would return 0 on an image? I've checked to make sure that it was visible (both display and visibility properties), and I checked the length of the property to ensure it was there. I just can't figure out why width() is returning 0.
Here's a code snippet:
$(this).append('<img src="'+defaults["imagePath"]+defaults["imageLeft"]+'" alt="" id="'+defaults["imageClass"]+'Left" class="'+defaults["imageClass"]+'" style="" />');
alert('Length: '+$('#divShadowLeft').length+' | Width: '+$('#divShadowLeft').width()+' | Visible: '+$('#divShadowLeft').css('visibility'));
View 3 Replies
View Related
Oct 1, 2010
var img_large = new Image();
$(img_large).load(function () {
$(".image_enlarge_container").append(this);
[code]....
View 2 Replies
View Related
May 28, 2010
jquery width() and height() functions are consistently returning the wrong values for the viewport size (i.e. $(window).width). Anyone know why..or what I can do to fix it?
View 3 Replies
View Related
Dec 13, 2007
I'm using height() and width() to find the dimensions of some inline images in the html. FF and IE work fine, but Opera is returning incorrect values. For example, it returns 92px as the width of an image that is actually 160px wide. How can I fix this?
View 4 Replies
View Related
Jun 23, 2006
I have the following code which is working in Firefox:
function showOptions() {
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
var lnks = document.getElementsByTagName("a");
for(var i=0; i<lnks.length; i++) {
alert(lnks[i].getAttribute("class"));
if(lnks[i].getAttribute("class") == "toggle") {
lnks[i].onclick = function() {
var options = document.getElementById("multiretailers");
options.style.display="block";
}}}}
I understand that IE doesn't like he getAttribute() method and is
returning null for the class name.
What are the work arounds for this?
View 2 Replies
View Related
Mar 29, 2007
I'm trying to get the value of an object's property. getAttribute returns "null" even though I'm sure the property is set. I can easily set the property, and in my actual script I do so dynamically. I just want to read the property and can't.
To help explain my problem, I've attached an example .html file as a .txt file.
The critical part of the code is this section that is based on "textbook" examples of how to get an attribute:
<script type="text/javascript">
function
showcolor() {
var myobject = document.getElementById("lab");
var myproperty = myobject.getAttribute("color");
alert(myproperty);
}
</script>
This is called via a button on the bottom of the page. The DIV object with the ID "lab" exists and has a color attribute defined in CSS, but I cannot read it, nor any other attribute, with a script. The alert displays "null".
View 8 Replies
View Related
Nov 24, 2005
I'm 2 for 2 on stupid questions this works in FireFox but not in IE it's not returning the value of the style element and I'm getting [object] error??
document.getElementById('test').innerHTML = document.getElementById('id_CompanyName').getAttri bute('style');
<div class="dR4C2">
<p id="id_CompanyName" style="font-size:<%=aspNameFontSize%>px;">
<%=aspCompanyName%>
</p>
</div>
It seems to be a problem with the getAttribute('style') portion of the code because if I change the request to getAttribute('id') it executes properly....
View 2 Replies
View Related
Apr 19, 2011
During development of Bing Maps, I've come across a problem when reading in an XML file and plotting a ploygon. The code works fine on IE, but FireFox is giving me the following error message: Error: xNodes[i].getAttribute is not a function
The function in its entirety is copied below and the problem line is marked in red. Hoping that someone may have come across this problem?
Code:
View 2 Replies
View Related
Oct 17, 2007
I am trying to get a url attribute from an xml node:
<item>
<media url="http://blablabla.com" />
</item>
I can do this in IE with the following code:
var newDom = xmlhttp.responseXML;
var x = newDom.getElementsByTagName("item");
var urlNode = x[0].getElementsByTagName('media');
var myUrl = urlNode[0].getAttribute('url');
If I try this code in FireFox it gives me the following error:
urlNode[0] has no properties referring to this line : myUrl =
urlNode[0].getAttribute('url');
.............
View 3 Replies
View Related
Oct 29, 2009
I want to find out if an element has been hidden by setting display to 'none'.
When it has been hidden, I find "display: 'none'" in the firebug display, as expected. code...
View 6 Replies
View Related
Jan 22, 2011
I am trying to get my script working in FF, IE and Opera but the getAttribute isn't working for me. The domain name isn't getting picked up I have tried this:
[Code]...
View 2 Replies
View Related
Oct 4, 2010
let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. [URL]... I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works.
View 6 Replies
View Related
Apr 26, 2011
Is there any way that one could have supersubs functionality applied to drop-down multi-column menus?I assume one would need to calculate the width of each column plus the combined width for the container.
View 1 Replies
View Related
May 5, 2010
I currently have a website where i share thoughts with my friends (some kind of forum) and within this 'forum' people can post pictures they made but most of the time these pictures exceed the max width of my website so my website gets all streched out!So this is what i want: all images on the page must run thru some sort of function which checks if the image image width exceeds the max_width. if it does then the script must calculate how many pixels the current width exceeds the max_width and get this number so that the script does: current_width = current_width - (max_width - current_width)
View 1 Replies
View Related
May 18, 2010
I've recently start using Flexigrid (old JQuery grid plugin), and, as you may know, one of the few issue this really good grid plugin got is the lack of liquid layout option. My personal idea to solve the problem is to set the "width" parameter depending on $(window).width. Here is the problem (and here's why i post this question in "General use" and not in "Plugin").
The starting, and working, code is:
$(document).ready(function(){
$("#flex1").flexigrid
(
{
[Code].....
This work fine for me, but I supose it could be done way much elegant... maybe somethin without "IF" that could emulate the "%", like var percentage = $(#div.id).width()*0.XX with the 0.XX picked from an array of percentage, one for each column. Probably I should set up a function... ahhhh, as you may easily see I'm a total beginner with JQuery (and JS in general...)
View 3 Replies
View Related
Jun 4, 2011
I am trying to setup a javascript function that sets a div's width based on the combined width of the li's with the name "navItem". The problems I have been running into when trying to define the width of the li's is that they do not have a width defined in css. Can anyone help me out with this? The javascript function setWindow is suppose to show the div loginWindow and set the width of it.
Code:
<div id="topNav">
<ul>
<li><img src="<?php print $site->folder['images']['header']; ?>topmenu_left.jpg" border="0" alt="" /></li>
<li name="navItem"><a href="<? print $site->url['about']; ?>">About Us</a></li>
<li name="navItem"><a onmouseover="setWindow('loginWindow');" href="<? print $site->url['billing']; ?>">Client Services</a></li>
[Code]...
View 3 Replies
View Related
Jul 28, 2010
Is the next jQuery code the best way to decrease an elements width?[code]I tried using the next code:[code]but that's not working, also not with '-20'.Maybe it's an idea to add this functionality? It's is already used in the .animate() function for changing the position of an element.
View 3 Replies
View Related
Sep 10, 2009
I need a code that when a button or image is clicked then a div's width and height are changed.
Ive managed to get a few codes that does this, but the real problem is that, the contents of the div is an embedded flash file and i thought that by setting the flash width and height to 100% then the flash would fit to the new size of the div, but it just didnt work.
I need a code that when a button is clicked then the div's and the flash's width and height are changed.
please have a look at the temp website latinunit net / temp / , you will understand where im coming from.
on the right hand side i have a flash chat in a div , div is controled by a script that allows it to follow the scrollers up and down.
My goal is to add a little button in the same div that says expand or maximise so when clicked the the div expands aswell as the flash file.
View 4 Replies
View Related
Jun 2, 2010
I got a table, first tr got 10 td, how to get the sum of the first three td's width
All I know is like:
Is there any solution via jQuery?
View 1 Replies
View Related
Nov 5, 2011
I want to set the width of a div to be the same width of the image inside the div.The following code works great. But...The images are different widths, so both wrappers are set to the width of the first image. Without having to add an ID to each wrapper or image, can the wrapper width be set to the image width using the name of the image as the unique identifier?
jQuery:
$(document).ready(function(){
var newWidth = $('div.wrapper img').attr('width');
$('div.wrapper').width(newWidth);
});
HTML:
<div class="wrapper">
<p><img src="image1.jpg" width="200" /><br />
Caption</p>
</div>
[code].....
View 7 Replies
View Related
Jul 2, 2002
i make function like this:
function chrCount(which){
maxChr = document.getElementById(which.name).getAttribute('maxlength');
if (which.value.length > maxChr)
which.value = which.value.substring( 0 , maxChr )
else
document.getElementById('chrLeft').innerHTML = maxChr-which.value.length + " chr(s)Left" ;
}
html code:
<input name="name" type="text" maxlength="8" onKeyDown="chrCount(this)" onKeyUp="chrCount(this)">
<div id="chrLeft" ></div>
above code work in IE6, not in Mozilla, can anybody tell the right code ? running in IE6 and DOM browser only is find.
View 2 Replies
View Related
Jul 20, 2005
here's what we have in an html file.
<form .....
<input type=button name="comment" onclick=" prompt('enter comment','
' )" >
Is there anyway to get the value returned from the prompt in the statement
above, into the value of the statement below ?
<input type=hidden name="comment_text" value = ???? >
We would like the user to click the "comment" button, have another window
popup where they enter their comment, and then take the comment text and
append it to the value parameter of the hidden statement.
View 13 Replies
View Related
Mar 27, 2009
The following code is supposed to return a variable containing text, currently the code posts the data but returns an "undefined" variable. Can someone tell me what's wrong? code...
View 9 Replies
View Related
Mar 27, 2007
I am trying to turn all the bullet points Li id values so i can store them.. I have written the code below but all this does it return the number of li's, everything i have done to bring out the id of the li, it fails. Code:
View 2 Replies
View Related
May 21, 2010
I know this is probably a really simple this to do, but for the life of me I can't figure it out. I want to find out the value of a style for a certain element. So say in the CSS I said 'content' had a width of 100px, but I want to get that value with Javascript.
Here's my shot at it:
alert(document.getElementById('content').style.width);
I just get null.
View 3 Replies
View Related
