I manually changed in the chrome browsers developer mode the style attribute, which has the desired effect. By entering
element.style {
width: 900px;
}
After that the manipulated div appears as:
<div id="rte-savebar" class="aui-toolbar" style="width: 900px;">
Now I'm trying the same effect with javascript using this command:
document.getElementById("rte-savebar").style="width:900px;";
which seems to have has no effect at all.
What do I need to do in order to change the width in javascript?
document.getElementById("rte-savebar").style.width = "900px";
You should do it by accessing the width attribute specifically, try this:
document.getElementById("rte-savebar").style.width="900px";
Related
Can I detect the width of a dynamicaly filled div box without rendering it on the web page?
<div>{{some.data.from.some.model}}</div>
If I render it, I know it's width is 260px (in every modern browser).
Can I detect it, before it is rendered on the web page? Are there tools, mechanisms, libraries to do that?
My Imagination is:
That is the div box width this class (margin, padding, whatever)
This is the content (text, font, fontsize, whatever..)
Tell me it's width
Don't show it on the homepage yet, I'll decide afterwards
You can't get the size of an element that doesn't exist (hasn't been rendered). Any solution you find to calculating an element's size without it being rendered is probably not going to be cross-browser.
So, the best you can do is render said element out of view, be it via "visibility: hidden", or pushing it out of view with "display: fixed". Once you have an actual element, you can check it's size for the current browser via JS and proceed accordingly.
I have created a simple fiddle here: http://jsfiddle.net/5wq8o02q/.
HTML
<div id="playground" class="block">
some content
</div>
<span id="width"> </span>
CSS
.block {
/* width: 100px; */
height: 100px;
}
JQUERY:
$(function(){
//$('#playground').css('visibility','hidden');
$('#playground').css('display','none');
$('#width').html($('#playground').css('width'));
});
It helps to use display: none and it won't use screen real estate as visibility: hidden. It still gives the width you are looking for (I think). Let me know me it helps ...
Following returns 'auto' instead of 10. Why?
<div class="testclass" style="z-index:10"></div>
<script type="text/javascript">
$(function() {
alert($(".testclass").css("z-index"));
});
</script>
http://jsfiddle.net/kEVq7/50/
Apparently, because the div is not positioned. Make this change to your div's style:
<div class="testclass" style="position:absolute; z-index:10"></div>
And you will 10 in the alert.
This makes sense in that the z-index property doesn't apply to a non-positioned element.
By the way, this further appears to be browser-dependent behavior. Your Fiddle reports 10 under Firefox, but auto under Chrome.
z-index can only be assigned to positioned elements. Try adding:
.testclass {
position:relative;
}
The z-index property can only be applied to elements that have the position absolute, relative or fixed. Since the default property is static you are getting the result auto instead of 10
It must be a bug in Chrome, it works in FireFox.
Just try a vanilla approach
$(function() {
console.log($(".testclass").css("z-index"));
console.log($(".testclass")[0].style.zIndex);
});
http://jsfiddle.net/kEVq7/57/
There is little jQuery use in this, getting the style attribute works cross browser.
It's messy, but you can try this jsFiddle solution. it uses .attr() and .substring to find the value. I'm not quite sure why you cant get the inline value.
http://jsfiddle.net/kEVq7/59/
http://jsfiddle.net/kEVq7/63/
here it is working with vanilla javascript
var x = document.querySelector('.testclass').style.zIndex;
alert(x)
Humm. If you want a n answer I think its a bug but the z-index is correctly set
.testclass {
width: 50px;
height: 50px;
background-color: black;
}
see the demo
CSS z-index property always work with absolute as well as relative positioning value. So you must define position:relative or either position:absolute.
Check this demo jsFiddle
HTML
<div class="testclass" style="position:relative; z-index:10;"></div>
jQuery
$(function() {
alert($(".testclass").css("z-index"));
});
But in your case you can use JavaScript for fast execution in compare of j-Query by using querySelector()
Check this demo jsFiddle
HTML
<div class="testclass" style="position:relative; z-index:10;"></div>
JavaScript
alert(document.querySelector('.testclass').style.zIndex);
Hope this both are help you!
This question already has answers here:
How do I find which JavaScript is changing an element's style?
(5 answers)
Closed 10 years ago.
I'm new on a project which has a boatload of javascript classes (16-20 files) and many dynamic features. There an element which has its height and maximum height set inline from a javascript file. Is there a way to which file this is set from?
<div class="ccass" style="width: 100%; height: 67px; max-height: 67px;">
resizes to
<div class="ccass" style="width: 100%; height: 307px; max-height: 307px;">
when the window is resized. I need to disable the resizing and set a fixed height - for some of the pages at least.
Is there some developer tool that would assist with this?
If you have firefox you can check the "Break on Attribute Change" option in the HTML tab. Just right click the target element and the menu will pop up. After that, resize the window and it will break in the script line where the attribute is changed.
grep the js sources for resize or onresize event/method and go from there.
Does anyone know of a way to auto resize an iframe when you make your browser smaller??
You can attach a handler to the window.onresize event, and then resize your IFRAME appropriately.
I prefer jQuery:
$(window).resize(function() {
$('IFRAME').width($(window).width());
});
One option is to specify the <iframe> size in percent.
Haven't tried it but I guess you could use a percentage width instead of a fixed width. In that case you should probably add a minimum width and height as well, to avoid that it is getting too small:
iframe
{
width: 50%;
height: 50%;
min-width: 300px;
min-height: 300px;
}
You could as well use this.
Basically it makes use of callResize() in Child page and resizeIframe() in Parent page.
You can also do this without JavaScript if you'd like using CSS Media Queries. See this example here:
http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html
They are often used for "responsive design".
I am working on web application.
I wanted to apply auto height to textarea using CSS, dont want to use any script, jquery plugin and other stuff.
After applying class ( i.e. style property ) to textarea, it should automatically increase it's height not width as per content present it in.
In this case width should be fixed i.e. width: 98%; (In my case) only height needs to grow. So scroll bars should exist for text area.
I simply needed one CSS so that after applying to textarea, it should be auto grow like <DIV>.
Please folks do sugggest, is this possible using CSS. If this is not possible, then m okey if i get javascript statments to acheives my requirement.
Thanks,
Pravin
It's sort of semi-doable in html/CSS. There are, however, the usual caveats of browser support and, since it uses html5's contenteditable, it requires a fairly modern browser.
That said, the following works (in Chrome/Ubuntu 10.04):
<div id="wrap">
<div id="editThis" contenteditable>
</div>
</div>
With the following CSS:
div#editThis {
min-height: 4em;
height: auto;
width: 50%;
margin: 0 auto;
}
div#editThis:hover,
div#editThis:focus {
border: 1px solid #000;
}
Demo posted at jsbin
If you're only displaying text in a textarea and not using it to get more content input from the user then consider using a div and styling it to look like a textarea.
the other thing i have seen is an auto expanding textarea that grown in height as you type.
see here: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
This is not possible with pure CSS, you will need to use JavaScript