Div Style Place In A Field

[ibrahimjan]

Hi all, I need to get the style.width css properties from div image3, and then place the number in the text field. please have a look at the code and see where I am going wrong. thank you

<div id="image3" style="cursor: pointer; position: absolute; top: 136px; left: 16px; width: 492.555px; height: 316px;"></div> <script type="text/javascript">x=document.getElementById("image3"); document.write("<input type=\"text\"");document.write("value=" + x.innerHTML +" >"); </script>

[Ingolme]

innerHTML only gives you what's between the two tags. The style is just one attribute in the first tag. The second problem you'll have is that document.write is going to automatically close your <input> tag after the first statement. You have to concatenate all your code to a string before writing it. You'll need to use the getAttribute() method to retrieve the actual style string.

style = document.getElementById("image3").getAttribute("style");str = "<input type=\"text\" value=\"" + style + "\">";

[ibrahimjan]

that worked thank you, but any chance to make it more accurate as to what to get form the style, eg:"width" values only rather than the whole style string??

[Ingolme]

You'll have to look through all the properties of the style object using a for...in loop:

var x = document.getElementById("image3"); var str = "";var s;for (s in x) {  if(!(s in Object.prototype)) {  // Make sure not to get properties of the object like "length"	// Property names need to be translated from Javascript to CSS (for example "lineHeight" to "line-height"	// There's a specific problem with "float" that needs to be dealt with	s = s.replace(/([A-Z])/, "-$1").toLowerCase();	if(s == "css-float" || s == "style-float") s = "float"; 	// The property name is "s" and the value is x[s]	str += s + ": " + x[s] + "; ";  }}// Use str as neededalert(str);

[ibrahimjan]

ok, I have been trying to figure out what you have done for the past hour, my knowledge of js is limited, so how can I get the value for let say "top". all I get is a string of css data, when the script is executed. I just need to show the value of top??

 function CSStop(){var x = document.getElementById("image3"); var str = "";var s;for (s in x) {  if(!(s in Object.prototype)) {  // Make sure not to get properties of the object like "length"        // Property names need to be translated from Javascript to CSS (for example "lineHeight" to "line-height"        // There's a specific problem with "float" that needs to be dealt with        s = s.replace(/([A-Z])/, "-$1").toLowerCase();        if(s == "css-float" || s == "style-float") s = "float";         // The property name is "s" and the value is x[s]        str += s + ": " + x[s] + "; ";  }}str = "<input type=\"text\" value=\"" + str + "\">"; document.write("value=" + str +" "); }

[dsonesuk]

<div id="image3" style="cursor: pointer; position: absolute; top: 136px; left: 16px; width: 492.555px; height: 316px;"></div><input type="text" id="show_css_value" /><script type="text/javascript">/*<![CDATA[*//*---->*/var x = document.getElementById("image3").style.width; document.getElementById("show_css_value").value = x; // value and unit option 1//document.getElementById("show_css_value").value = parseFloat(x); // value only option 2 remove // at beginning to apply  /*--*//*]]>*/</script>

IE7 will display to rounded down int value i.e 492px instead of 492.555px

[Ingolme]

I need to summarize this for you first: Getting the properties of the style attribute of an element requires using the style object of the element: element.styleThe style object has CSS properties, but writen without hyphens because those would conflict with syntax, so to get the line-height you would use this:

alert(element.style.lineHeight);

The reason I provided you with that code was to obtain a list of the properties, separately, and use them. In one specific line of that code I'm just adding them to a string one by one, but that line needs to be changed however you need to use the properties. If you only want one single property, then use the method described before: element.style.lineHeight-------------------------- I've made some mistakes. I took all properties insted of just the style ones, and forgot to use the original value or S for the property.These are the lines I changed:var x = document.getElementById("image3").style;And this part:

  if(!(s in Object.prototype)) {  // Make sure not to get properties of the object like "length"  		// Property names need to be translated from Javascript to CSS (for example "lineHeight" to "line-height"		// There's a specific problem with "float" that needs to be dealt with		property = s.replace(/([A-Z])/, "-$1").toLowerCase();		if(property == "css-float" || property == "style-float") property = "float"; 		// The property name is "property" and the value is x[s]		str += property + ": " + x[s] + "; ";  }

The new code should be like this:

var x = document.getElementById("image3").style;var str = "";var s, property;for (s in x) {  if(!(s in Object.prototype)) {  // Make sure not to get properties of the object like "length"		// Property names need to be translated from Javascript to CSS (for example "lineHeight" to "line-height"		// There's a specific problem with "float" that needs to be dealt with	    property = s.replace(/([A-Z])/, "-$1").toLowerCase();		if(property == "css-float" || property == "style-float") property = "float"; 		// The property name is "s" and the value is x[s]		str += property + ": " + x[s] + "; ";  }}// Use str as neededalert(str);

I have comments in the code. You have to look at this line:

// The property name is "s" and the value is x[s] str += s + ": " + x[s] + "; ";

This line uses s and x. For example, s would be "color" and x would be "green" You can compile it into an object, if you like, by changing str: var str = {}; and str = x;

[ibrahimjan]

Thank you all, it working perfectly now, as always its great learning from you all.

[dsonesuk]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/style_array = new Array();value_array = new Array();window.onload = function (){document.getElementById("image3").style.backgroundColor="red";var y = document.getElementById("image3").style.cssText;count_colon = y.split(":")css_array = y.split(";")var option_list = document.getElementById("dropdown")for(i=0; i<count_colon.length-1;i++){var temp_array = css_array[i].split(":")style_array[i]=temp_array[0];value_array[i]=temp_array[1];var optn = document.createElement("OPTION");optn.text =style_array[i];optn.value = i;option_list.options.add(optn);}document.getElementById("show_css_value").value = value_array[0];}function getthisvalue(sel_value){x = document.getElementById("show_css_value");x.value = value_array[sel_value]}/*--*//*]]>*/</script><style type="text/css"></style></head><body><select id="dropdown" onchange="getthisvalue(this.value)"></select><div id="image3" style="cursor: pointer;position:absolute;top:136px; left: 16px; width: 492.555px; height: 316px"></div><input type="text" id="show_css_value" value="" /></body></html>

[ibrahimjan]

Ok I got far, I made it all work fine, I want at the end of it, onmouseup (I have setup onmouse function on the div) to submit the form via AJAX without the page refreshing, is it possible, please have a look at my attempt,

   <script type="text/javascript" src="jquery-1.3.2.js"></script><script type="text/javascript" src="jquery.form.js"></script>  <script type="text/javascript">function CSSimage3(){var a = document.getElementById("image3").style.top;var b = document.getElementById("image3").style.left;var c = document.getElementById("image3").style.width;var d = document.getElementById("image3").style.height;var IMGID = <%=IMGID%>; document.getElementById("top_img").value = parseFloat(a);document.getElementById("left_img").value = parseFloat(;document.getElementById("width_img").value = parseFloat(c);document.getElementById("height_img").value = parseFloat(d);document.getElementById("IMGID").value = parseFloat(IMGID);//AJAX submit form$(document).ready(function() { 			// bind 'form_img' and provide a simple callback function			$('#form_img').ajaxForm(function() {				alert("Thank you for your comment!");			});		}); } /*--*//*]]>*/</script>  <div id="image3" onmouseup="CSSimage3()" style="cursor: pointer; position: absolute; top: 136px; left: 16px; width: 492.555px; height: 316px;"></div> <form action="/admin/tpl/english/update_mtx.asp" method="post" id="form_img">	Objects X	<input name="left_img" type="text" style="color:#CCCCCC;background:none;border:none"id="left_img" size="3" readonly="readonly" />	Y	<input name="top_img" type="text" style="color:#CCCCCC;background:none;border:none" id="top_img" size="3" readonly="readonly" />	W	<input name="width_img" type="text" style=" color:#CCCCCC;background:none;border:none" id="width_img" size="4" readonly="readonly" />	H	<input name="height_img" type="text" style="color:#CCCCCC;background:none;border:none" id="height_img" size="4" readonly="readonly" />	ID	<input name="IMGID" type="text" style="color:#CCCCCC;background:none;border:none" id="IMGID" size="12" readonly="readonly" />	<input type="submit" value="Save" style="opacity:0.3" />  |  </form>

[ibrahimjan]

Any Ideas to why the ajaxForm(function() not working??

[dsonesuk]

What? exactly does it do, or what do you want it to do on submission

[dsonesuk]

Ok! first of you can't include the $(document).ready(function() within a function as it is supposed to apply jquery functions on loading of the document, as at present it will only run when the CSSimage3() function is called, but the page is already loaded, so the gate is open and that horse has already bolted, so that code will never run. second this jquery will only run when the submit button is pressed, to get this to run when you click the div image3 (you need to add a background color to this, as there no way to identify the area to click) you need to run a submit code so it can picked up by the jquery form plugin. you also need comment tags for opening javascript tags to go with closing comment tags <script type="text/javascript">/*<![CDATA[*//*---->*/ /*--*//*]]>*/</script>

 <script type="text/javascript">/*<![CDATA[*//*---->*/function CSSimage3(){var a = document.getElementById("image3").style.top;var b = document.getElementById("image3").style.left;var c = document.getElementById("image3").style.width;var d = document.getElementById("image3").style.height;var IMGID = <%=IMGID%>; document.getElementById("top_img").value = parseFloat(a);document.getElementById("left_img").value = parseFloat(;document.getElementById("width_img").value = parseFloat(c);document.getElementById("height_img").value = parseFloat(d);document.getElementById("IMGID").value = parseFloat(IMGID); $('#form_img').submit();}//AJAX submit form$(document).ready(function() { 						// bind 'form_img' and provide a simple callback function						$('#form_img').ajaxForm(function() {								alert("Thank you for your comment!");						});				});/*--*//*]]>*/</script>

[ibrahimjan]

Thank you dsonesuk that seems to work well now, thanks once again