JQuery :: Css("background-position") Not Working In IE?
Feb 15, 2011
I have the following simple test statement: alert($(this).css("background-position"));
positioned in an each() loop. In Firefox, the correct value is returned as is specified in the stylesheet (the stylesheet reads "-1px top" and jQuery returns "-1px 0%" which is fine by me).
Precisely the same code yields an "undefined" value in IE 8.EDIT: Wow. Even THIS test failed, even though the border shows up on the page.$("#left-nav1").css("border", "1px solid blue"); alert($("#left nav1").css("border")); It still says "undefined". What is wrong with IE?
View 3 Replies
ADVERTISEMENT
Aug 11, 2009
#navigation li is the parent element, which is positioned relative.The ul element above that is also position relative. I previously tested a click function and was able to confirm I was getting the correct position back, so now I just need to set the CSS property correctly for all of those links.The reason I want to do this is I have a set of links that appear over a photo of a city skyline. When you hover over those items, I want them to be given a background image that is a blurred and lightened version of the same photo so it needs to line up (sort of like the tabs are made of frosted glass).
View 1 Replies
View Related
Sep 20, 2010
So I have this weird glitch where if you put your cursor over my header but pull away before the second animation fade's in, it will get caught in limbo land and will never fully fade in again.
View 1 Replies
View Related
Nov 23, 2011
I want to animate my menu. But nothing happens, I only receive the following error in the console: "Error in parsing value for 'background-position'".[code]...
View 1 Replies
View Related
Sep 26, 2010
I have used JQuery to change CSS styles for my Navigation Bar elements.Ok so after a bit of research I discovered that " background-position-y " and "background-position-x" are not supported by the Mozilla Firefox / Opera browsers.Anyone know of an alternate method of getting the background-y / x positions?
View 2 Replies
View Related
Feb 25, 2010
I'm trying to change the background-position of DIV1 (a separate tag) when the following tag is hovered code...
View 1 Replies
View Related
Aug 3, 2010
I'm very new to Jquery but have finally worked out how to change the background-image (a sprite) of my #contentContainer when hovering over a separate 'trigger' image. However, for the life of me I cannot work out how to apply a fade effect to the transition. Basically, instead of the current abrupt background image transition I would like it to fade in smoothly on mouseover and mouseout.
[Code]...
View 1 Replies
View Related
Aug 20, 2010
why this background animation is jumping. Code and link are below:[url]....
jQuery(document).ready(function(){
jQuery('.program_info_2').hover(
function() [code].....
View 1 Replies
View Related
Oct 11, 2011
I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code I created is the following it's not working for some reason.
html:
<div class="service_box box1" id="service_box1">
<a href="#" id="box1_trigger">
<h3> </h3>
<p> </p>
</a>
</div>
javascript:
<script type="text/javascript">
$(document).ready(function() {
$("#box1_trigger").hover(
function() {
$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");
},
function() {
$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");
}
);
});
</script>
css:
#service_box1{
width:318px; height:282px;
float:left;
background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
width:100%; height:100%;
float:left;
display:block;
}
View 7 Replies
View Related
Feb 21, 2009
I need the top of a background image to always be 50% from the top. I think I read that some browsers do not like the backgroundPositionY property so I used the following script which finds the right value but doesn't apply it to the background position. What should I change?
View 10 Replies
View Related
May 5, 2009
I have a product image that is 4 images 'sewn together' [url]
I am going to set a div called ProductImage and then have the background of the div set to this image, but with only the top image showing.
I then want to have a button for 'more views' and when this is clicked the background position shift to show the next part of the image showing a different view.
What is a suitable way to do this, I am hoping it could be done with a combination of css and javascript.
View 9 Replies
View Related
May 31, 2009
I have an image that I'd like to animate to the top right of its containing div (which has position relative).I've used this:
$(".trigger").click(function(){
$("#image").css({'position' : 'absolute'}).animate({
"top": "10px"
[code]....
View 2 Replies
View Related
Sep 12, 2011
There is a long thread about this in the posiiton() reference page, but I am not finding a thread here in the forums, let alone a solution. I have some code that is trying to do calculations on the left and top attribute of child DOM elements. So, I have 5 divs (floated left, with width and height assigned), contained in another div. If I iterate over the 5 divs and call either position(), offset() or even css('left'), they always return 0. I have tried setting margin: 0px as well, but same result.
View 3 Replies
View Related
May 7, 2010
i just want to find particular li with specific class and change the background by adding class when that li is click.[code]
View 1 Replies
View Related
Dec 3, 2010
I am attempting to do a background photo, with a png overlay faded in.
Code is as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>A Christmas Card with a Difference</title>
<style>
span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one </style>
<script src="[URL]"></script>
</head><body><script>
$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
</script>
<img src="Card Images/background.jpg" width="1280" height="741" alt="background" />
<div id="one" style="position: absolute; left: 0px; top: 00px;"><img src="Card Images/overlay.png" /></div>
</body></html>
Now I've probably butchered the code somewhere but it works fine in all browsers except IE (no surprise there then) where it doesn't fade in, it just pops up.
View 1 Replies
View Related
Nov 23, 2011
i,m trying to make a map who show me as position A and a target adress as point B.I have made it so i can choose adress a and adress b from a dropdown but i want to automaticly load my position as possition A then choose position B from a dropdownlist. How can i do this ?
[Code]....
View 2 Replies
View Related
Apr 22, 2010
im trying to make the left Product Categories background position "rollover" menu work on this page: [URL] at the moment the page loads and CSS hover works to set the background position so that the graphic behind makes a roll over effect. i put some javascript to set the background position permantly to the roll over on click (so the user can see which one they are on) but then this knocks out the roll over effect on all other categories - it knocks out the CSS hover: onclick="setStyle('c1','backgroundPosition','0px 0px');
it means that c1:hover no longer works.. i tried putting !important in the CSS c1:hover background position and this fixed it in Firefox but not IE. So how can i write something in Javascript to also say: onclick="setStyle('c1:hover','backgroundPosition','-276px 0px');
i know Javascript does not do hyphens and the way to get for example "background-position" in CSS is to ditch the hyphen and make "P"osition capitol. perhaps something can be done also to get to the CSS hover attribute?
View 1 Replies
View Related
Jun 22, 2010
I am making a small text editor for text areas on my website.Just to handle simple text formatting etc.I have an emoticon button which I want to display a <div> of all the emoticons below the actual emoticon button.I have the javascript code to find the left and top positions of the emoticon button, which spits out numbers that look correct.However in my show_emoticons function the left and top style setting is never getting set, in firebug they are just displayed as "".
View 2 Replies
View Related
Mar 7, 2009
how can i fix this to work correctly in ie7 (and preferably ie6)this is what's supposed to happen: in a text field, as a uk postcode is typed in, once the user has typed in enough to know where the space in the postcode should be it's being placed in there for them automatically.
View 24 Replies
View Related
Nov 4, 2009
it works great in chrome and strangely enough internet explorer 8 but doesn't work in firefox.
View 7 Replies
View Related
Dec 29, 2009
I'm trying to change the background of a <div>. I'm using a thumbnail of an image so when the user clicks the thumbnail, depending on the size of the thumbnail the background of another <div> (where the larger image is displayed) will change.
I have it working..sort of. When I click the thumbnail the background will change to the specified image but after a couple of seconds it changes back to the original background on its own. I have no idea why this is happening.
This is where the code is to call the javascript method...
Code:
This is the css for the <div>..
Code:
And this is my javascript code...
Code:
View 3 Replies
View Related
Feb 15, 2011
I'm trying this tutorial to get a sweet looking menu. [URL] I've followed all the steps but I seem to be missing something, because the transition is just a simple hover transition.
[Code]...
View 4 Replies
View Related
Aug 25, 2009
I placed this code in an external js file. Nothing happens. What do I need to change?
varrandomPic = new Array();
randomPic[0] = "images/home/binoculars.jpg";
randomPic[1] = "images/home/conductor.jpg";
randomPic[2] = "images/home/dandelion.jpg";
[Code]....
View 4 Replies
View Related
Jan 30, 2011
Why this short script won't work?
<script type="text/JavaScript">
View 2 Replies
View Related
Jan 21, 2009
Im trying to change the background on the "demo" div.
This works perfectly in Firefox and Chrome but sadly not in IE.
Code:
function getImage(){
var r = Math.floor(Math.random()*5);
var arrRotator = [];
arrRotator[0]="rotator1w.jpg";
[Code]....
View 1 Replies
View Related
Apr 5, 2011
I'm just starting out in Javascript coding and my first assignment is to create a web page which the users are allowed to selecte dtheir favorite layout and formatting through the use of the className property. I wanted to use these four options the user can choose to change the display of the web page and text.
Gray background
White background
Sans-serif text
Serif text
If the user onclicks any of the options, the webpage will turn into that format. For example, if the user clicks "Gray backgound", the background color of the webpage will be Gray. If the user clicks Serif-text, the text in the web page will be in Serif text. The code I have right now doesn't let me click any of the links to change the display and text.
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN"
"http:www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[code]...
View 2 Replies
View Related
