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!
Related
I have this html,
<h2 class="more-button">Read More</h2>
and am trying to have it change the position of another div when it is clicked. To accomplish this I am using
$(".more-button").click(function(){
$(".hidden-block").css("right", "110%");
});
FIDDLE : https://jsfiddle.net/wfxxkk3x/
But the code does absolutely nothing. I have tried many different approaches with this problem and nothing seems to work. Any help would be appreciated.
Everything is fine with your code .. In your js fiddle here https://jsfiddle.net/wfxxkk3x/ . You have "hidden-block" as an ID not a Class .
So just change your jquery selector to "#" hash .
Example :
$(".more-button").click(function(){
//hidden-block is an id
$("#hidden-block").css("right", "110%");
});
hope this helps
Change the selector of the hidden-block from a class to an id
$(".more-button").click(function(){
$("#hidden-block").css("right", "110%");});
https://jsfiddle.net/wfxxkk3x/5/
or use animate to animate the div
https://jsfiddle.net/cjon7apg/
What CSS do you have set on your <div class="hidden-block"></div>? Because if you haven't set positioning anywhere, then your "right", "110%" will do nothing.
Try setting position: absolute; or position: relative; on your .hidden-block and that should allow you to move the block around.
If you don't have a stylesheet and you want to go pure jQuery then something like this:
$(".more-button").click(function(){
$(".hidden-block").css({"position":"relative", "right":"110%"});
});
You need to declare the position of the div in order for it to be affected by right
position: relative;
or
position: absolute;
In your fiddle, i notice "hidden-block" is ID not CSS, so your javascript must be:
$("#hidden-block").css("right", "110%");
Then, do you include jQuery? In your fiddle, i didn't notice jQuery library in External Resources.
After changing . to #, and add jQuery, your code works correctly. Try changing 110% to another value and see the result.
I have a need to collapse/expand the width of a div (rather that hide/show), and for some reason this code that I wrote only seems to start working with the second click. If it put an alert in to check the variable it seems that the variable is not picking up the style initially. Any thoughts? Here is a js fiddle:
http://jsfiddle.net/JKxHw/4/
Here is my css, html, and script
#left_nav {width:200px; border: 1px solid red; height: 300px;}
<div id="left_nav_collapser">
collapse width of left nav
</div>
<div id="left_nav">
<div id="left_nav_navlinks">
<ul><li>Apples<ul><li>Macintosh</li><li>Styrofoam</li></ul>
</li><li>Oranges</li><li>Bananas</li></ul>
</div>
</div>
<script>
function hideNav(){
var myLayer = document.getElementById('left_nav').style.width;
//alert(myLayer);
if(myLayer=="200px"){
document.getElementById('left_nav').style.width="0px";
document.getElementById('left_nav_navlinks').style.display="none";
} else {
document.getElementById('left_nav').style.width="200px";
document.getElementById('left_nav_navlinks').style.display="block";
};
}
</script>
More info: as much as I would love to I can not use jQuery for this.
.style only gets information from the style attribute rather than computed styles. You could use window.getComputedStyle instead, but it seems inflexible to me. Instead you should just have a variable that keeps track of the visibility state that the element is in.
You can even use .dataset (assuming you don't need to support IE) on the element itself, although any variable would do.
http://jsfiddle.net/JKxHw/6/
<script>
var divBgTop=0;
function initDivTop()
{
divBgTop=document.getElementById("divBg").style.pixelTop;
alert(divBgTop);
}
</script>
<style>
.divBgCss
{
position:absolute;
left:100px;
top:100px;
width:100px;
height:100px;
background-color:red;
}
</style>
<body onload="initDivTop()">
<div class="divBgCss" id="divBg"></div>
</body>
the result is always 0. why?
What you're after is the offsetTop:
divBgTop=document.getElementById("divBg").offsetTop;
Without specifying the unit, you will not get 0 but rather something else but not 100 - you better add unit like px so you won't get wrong results when using the code.
Live test case: http://jsfiddle.net/A9Mr2/1/
There is was an error in the CSS. You specify 100, but without a unit. Make it 100px (or another unit, if you wish).
Now the only problem is the used propery. pixelTop apparently won't work, but offsetTop will. This is a property of the element, rather than the style, so you'll need:
getElementById('divBg').offsetTop
[edit: adjustment and addition after question is modified]
the pixelTop property is read-only, all others are read/write.
you can set the pixelTop property..like http://jsfiddle.net/bingjie2680/WJrn6/
update:sorry: write-only
I think the code should be:
divBgTop = document.getElementById("divBg").style.top;
However, this will only read inline styles. To read computed styles you need to... well... read computed styles :)
i have a div and its height is fixed to 100px right now.
but its data is not static and a user can add as much data as he wants, i dont want scroll bars and it should get resized to data contained in it(height only) is there any css property to achieve this except than min-height as it doesnot work on IE.
the div may have multiple children and i am thinking to do something that doesnt involve calculating change of height of all children
thanks
height in IE6 is essentially min-height anyway. If you don't have a problem using quick hacks -
div.blah {
_height:100px;
min-height:100px;
}
...otherwise, tuck it in some Conditional Comments so you can sleep at night.
<!--[if IE 6]>
<style type="text/css">div.blah { height:100px; }</style>
<![endif]-->
You can specify height:auto;overflow:visible;. This will make the <div> autosize itself.
overflow:visible; height:100px;
Should work, no?
Check out this plugin: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
Hope I helped.
had to do using jQuery only calculated height of children and set it parent, css hacks dint helped
For the following HTML:
<td class="width2 padLeft" id="loading_45"> </td>
the following JQuery:
$('#loading_45').addClass('loading');
With the following css definition:
td.loading
{
background-image:url("../images/icon_loading_circle.gif");
background-position:left center;
background-repeat:no-repeat;
height:auto;
position:absolute;
text-align:center;
}
does not cause the background-image to appear in IE7 (works fine in FF)
Does anyone have an idea what I am doing wrong?
As Pointy noted the problem was in the css the position:absolute; definition should be removed
Thanks all for answering so fast
I'm sure that "addClass" is working, in that it's adding the class to the element, if (as #Gaby notes) you're doing it at the right time. Since it works in Firefox, you probably are.
I suspect that the problem might simply be that your stylesheet is freaking IE7 out. Putting "position: absolute" on a table cell is likely to cause problems, like making the table cell render in completely the wrong place. When I try it, table cells always render in the upper left corner of the page, even though the stylesheet doesn't specify a "top" or "left".
Try testing your page with that class hard-coded onto the table cell and see what happens.
make sure the code runs after the DOM is loaded using
$(function(){
$('#loading_45').addClass('loading');
});
or
$(document).ready(function(){
$('#loading_45').addClass('loading');
});
Also make sure the elements has a width/height that will fit the background image.
Demo: http://www.jsfiddle.net/9PZZB/2/