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 Replieswhy this background animation is jumping. Code and link are below:[url]....
jQuery(document).ready(function(){
jQuery('.program_info_2').hover(
function() [code].....
#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 RelatedI need to change the position for a group as reaction for a mouse movement so I wrote this:
this.dragged.attr('transform').baseVal.getItem(0).setTranslate(x, y)
But this does not integrate well with the animation
this.dragged.animate({svgTransform:'translate('+(-x)+' '+(-y)+')'},delay)
I created a page with multiple images and a div element. When I click on those images, I change the background image of the div with jQuery animation. The moment is made to change the image, the effect of exchange is white, and needed it to be black. Can I change the color of the effect fadin / fadeout without changing the background image of div element?
You can view what i've done here, just click in "Manaca" and "Historia" words
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 RelatedI 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 RelatedI'm trying to change the background-position of DIV1 (a separate tag) when the following tag is hovered code...
View 1 Replies View RelatedI'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]...
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;
}
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]...
I've written a script for a slide show.It plays fine the first time it cycles through the images, but there's a glitch when it loops back to the beginning. The wrong image flashes briefly on the screen.Here's the code:
<script type="text/javascript">
//<![CDATA[
var i = -1;
[code]....
Separately, they both work perfectly. The css-script for a beating heart does what it should do: feature a beating heart (or rather, image of a heart). The random background cycling script chooses a new background every 10 seconds.
However, put together, they still work, only every 10 seconds, the screen blinks black (the background cycler does not feature a transition on its own), both the background and the heart (and everything else on screen) blink out of existence for a split-second and then everything is back again.
I've managed to determine, despite knowing absolutely nothing about CSS and JS except for what little I've learned today through tinkering with the scripts, that if I remove the variable "infinite", the heart will beat only once after each transition and the blinking glitch will not occur, so it has something to do with that.
What I want is this: A heartbeat animation that's infinite with a background that cycles through a set number of backgrounds every X seconds without any kind of transitions or blinking effects.
The heartbeat CSS-script:
Code:
The background cycler (html-file):
Code:
The background cycler (js-file):
Code:
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 RelatedI 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.
It's a security setting "Access Data Sources across domains" you've
got lowered security for whatever zone you accessed the page in.
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?
I have a button which is animated with a rollover effect, obtained through jQuery of course. I wish to open a lightbox clicking that button and I tried with a simple, self-made lightbox and with FancyBox but in either case the lightbox is displayed without animation.I post the code for my buttons and the lightboxHTML for buttons:
<ul> <li><div id="fader0"> <div class="from"><a class="products" href="#inline"><img src="images/tabproducts.png" alt="Our products" /></a></div> <div class="to"><a class="products" href="#inline"><img src="images/tabproductsHover.png" alt="Our products"
[code]....
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]....
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?
I am simply trying to use a global variable in javascript, but can only access the variable on the second call. I can't find anything that relates to this through my searches. My application is supposed to query the server for XML that tells me which years and months are available to put into combo boxes. I want to store this xml in a global variable to access it later.
[Code]....
I've been messing with this code to make a fade in animation with setTimout. The only thing is addition isn't working on the fade in. A subtraction on a negative works though. This seems strange to me.
changeit.style.opacity -= -0.01; works but when it's changed to changeit.style.opacity += 0.01; there's no fade in. It's the only thing I change. My intuition says to me it should work with addition, but maybe there's something I'm not understanding.
<html>
changeit.style.opacity -= -0.01; if this is set to changeit.style.opacity += 0.01; it doesn't work. What?
Of course this is all just for Firefox for now. If I put this in something useful I'll change it so it'll work in other browsers later.
I am trying to change my sites background color. The color changes but it doesn't go back to the first image anymore. does anybody know what the problem could be?
jQuery Code:
HTML Code:
I'm putting together a portfolio site and I'd like to use high-res images that take up most of the screen to show different works. There
would be a menu bar with links to each work, where a click on that work's link would change the background by doing a standard "dissolve"
effect.I have seen many different plugins for "rotating" images and changing background colors at the click of a button. Is there a method
specifically for this purpose? As an alternative to altering the background-image of the body itself,I would be willing to use a properly sized div (or div's) to achieve this effect.
I have found nice short tutorial here: Rounded_Corners
It works fine unless I try to move it.
I have added only one DIV over all:
Now I see that my text (white) moved but not background.
How do I properly position the whole DIV of class "roundbox" ?
I'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome
<script type="text/javascript" >
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
var x = 0 -document.documentElement.scrollTop;
var toP = String(x);
var toPP = toP + "px";
[Code]...