Moving Div Background Position On Click
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
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
Apr 10, 2009
I want to create a div with flash that will display on the center position of the screen, after playing the flash it will move to a fixed location of the page. How can i do the moving div with slow motion movement. I have tried many times but failed.
View 2 Replies
View Related
Jun 8, 2009
For my application I had developed one page that is having more fields at the of that page I am displaying some records and to select those one check box for each record. If user clicks on the select all link it has to check all the records, I am using java script . At this time screen moving to top, to see weather records are checked or not again browser has to scroll down.
View 4 Replies
View Related
Aug 29, 2011
[URL]the second example allows getting the mouse position on click within a div area ,would it be possible to move the center of that area to where the mouse cursor was clicked at? This is what I came up with but the area isn't moving:
<html>
<head>
<style type="text/css">
body { background:#eee; margin:0em; }
[code]....
View 1 Replies
View Related
Dec 2, 2009
I'm using jQuery. I have an array of list items.
I have a selected li, I would like to move it up one.
View 2 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
Aug 7, 2011
i try to make a script that gets data from my mysql-database and displays it in a form with check boxes.if i select one or more check boxes the data with its checkbox should move to another column in the table in this form. all the other data and there checkboxes not selected should stay at its own place.in the future i want to work with 150 checkboxes.the part for getting it out off the database and display it in the form with the checkboxes is completed in PHP.but i'm stuck changing its place with the onclick handler from javascript.URL...the code i have so far is:[code]
View 7 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 22, 2010
I have script for moving background:
It works normally - but don't work lightbox script for pictures of the site, so IE 8 write such: Object doesn'n work with prototype.js and mootools.js. CMS is a MODx, please, tell me how to make work this scripts correctly and together?
View 1 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
Apr 25, 2011
I tried many ways to do it .. but didn't work any of them ..
The idea is move the foot to room no.1 .. but i want to see the foot moving on the red line to the room
like this pic : [url]
View 7 Replies
View Related
Oct 29, 2007
Anyone know if it's possible to convert the co-ordinates of a click on
a div into a character position within the div's content?
View 1 Replies
View Related
Aug 9, 2010
I thought this would be pretty easy, but a Google search on it had a bunch of advanced things. I simply want to have an event response on a anchor tag that returns the position of the cursor onClick.
So:
<a href="javascript:void(0)" onclick="position()">here</a>
Where, when you click "here", you alert the position of the cursor (using screenX an screenY, if I read it right). But I'm seeing things about registering events to the .document, etc., but no easy solutions. The ones that look easy say that you need to "pass the event" through the function, but they never say how.
View 10 Replies
View Related
Apr 11, 2010
I'd like to, for example, trigger a clic at (100px,50px) of the top/left corner of a div. Is it possible?
View 2 Replies
View Related
Sep 13, 2011
I have a web page that renders a table with about 300 rows in it, which means vertical scrolling. At the end of the page there's a hidden div element sitting. Each row in the table contains a button which needs to call a javascript which should position the hidden div right next to the clicked button. I've tried a lot of different approaches that I've found on google, but all of them only position the div around the top area of the page. If I scroll down a ways and click the button, I have to scroll back up to the top of the page to find the div.
The primary target is users using IE8, but of course, if there's a cross-browser solution for this problem, that would be super!
View 1 Replies
View Related
May 4, 2005
Soliciting thoughts on the best way to determine the position of a click event.
Here's what I'm using right now but it's not working:
Code:
function getMousePosition(evt)
{
var x, y;
if(evt.pageX)
{
x = evt.pageX;
y = evt.pageY;
} else if (evt.clientX)
{
x = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
y = evt.clientY + document.body.scrollTop - document.body.clientTop;
}
if(document.body.parentElement && document.body.parentElement.clientLeft)
{
var b = document.body.parentElement;
x += b.scrollLeft - b.clientLeft;
y += b.scrollTop - b.clientTop;
}
alert(x + ',' + y);
return [x,y];
}
The coordinates are WAY off in both firefox and IE. Can someone fix this?
View 16 Replies
View Related
Aug 3, 2006
I am facing a problem in getting mouse position when I click on a link, specialy the Y coordinate of the mouse position. I am using this code :
[color=Sienna]if (document.layers) { // Netscape
document.captureEvents(Event.MOUSEMOVE);
document.
} else if (document.all) { // Internet Explorer
document.
} else if (document.getElementById) { // Netcsape 6
document.
}
// Global variables
xMousePos = 0; // Horizontal position of the mouse on the screen
yMousePos = 0; // Vertical position of the mouse on the screen
xMousePosMax = 0; // Width of the page
yMousePosMax = 0; // Height of the page
function captureMousePosition(e) {
if (document.layers) {
xMousePos = e.pageX;
yMousePos = e.pageY;
xMousePosMax = window.innerWidth+window.pageXOffset;
yMousePosMax = window.innerHeight+window.pageYOffset;
} else if (document.all) {
xMousePos = window.event.x+document.body.scrollLeft;
yMousePos = window.event.y+document.body.scrollTop;
xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
yMousePosMax = document.body.clientHeight+document.body.scrollTop;
} else if (document.getElementById) {
xMousePos = e.pageX;
yMousePos = e.pageY;
xMousePosMax = window.innerWidth+window.pageXOffset;
yMousePosMax = window.innerHeight+window.pageYOffset;
}
window.status = "xMousePos=" + xMousePos + ", yMousePos=" + yMousePos + ", xMousePosMax=" + xMousePosMax + ", yMousePosMax=" + yMousePosMax;
}[/COLOR]
It works fine for mouse move and displayes correct mouse pos in status bar.
But when on mouse click i try to get the position it return the xMousePos good, but yMousePos it return is related to the browser client area in IE rather than the my document ( html ).
So when i try to place a div their it is placed near top of the document bcoz it ignores the scrolling information. or the
document.body.scrollLeft
document.body.scrollTop
is always 0( zero ) as i debug it. Code:
View 2 Replies
View Related
Jul 7, 2006
I've got the following class. the onclick event works only with IE
although I believe I did proper handling for firefox. What is wrong in
this script? ....
View 1 Replies
View Related
Apr 1, 2011
I have this case:1) A #box that works as a container, it has overflow:hidden and position:relative.2) A #dynamic div that is inside of the #box, it has a padding:0 that gives it a height greater than its parent, it has position:absolute3) Inside the #dynamic div there are a random quantity of divs with the class of .item. There are two anchors, one anchor when clicked increases the top position of the #dynamic by 100px, the other anchor does the opposite.This is the code I tried:The problem with my code, is that when the anchor is clicked it only changes to 100px the value of the top position, instead of increasing its value by 100px each time it is clicked.By the way, the #dynamic div must always be in sight within #box, to prevent that many clicks send too far the position of the #dynamic. Making a big hole in the design.
View 2 Replies
View Related
Feb 17, 2011
i have the following code to get the change of position, I dont know how to make the list tell me the position of aspecific elementwhen i click it.
[Code]...
View 2 Replies
View Related
