I am working on this image hover zoom part using jquery . The codes works fine , as the bigger image is showed on mouseenter and hides on mouseleave. since, the image showed on hover can have dynamic width and height(it depends on the image size..) i want to decrease the image width and height to 75% of the actual width and height.. even that is fine and it works..
now the problem i am facing is, whn mouse enters for second time, the image is reduced again.. third time it gets smaller than the second time... so eachtime mouse enters, image gets smaller and smaller...(which i think is obivous since each time mouseenters it reduces the image by 75%...) i have tried lots of things like creating a global variable, and checkin it.. if (first time) thn (reduce) else (reduce from the original image ).
BUT cannot make it work.. here is my code....
http://jsfiddle.net/ugnNU/11/
hoping for some advice. your help will be appreciated.
Thanks.
I tried to update your code as little as possible. Here is an example of how to do what I think you are trying to do. http://jsfiddle.net/ugnNU/12/
There are many many ways to get there, I chose this one because it came close to what you already had.
I added this:
var childImage = $(this).children("div.tooltip");
if (childImage.attr('saveWidth') == ""){
//we haven't saved it's height yet
childImage.attr('saveWidth', childImage.width());
childImage.attr('saveHeight', childImage.height());
}
var hoverImgWidth = childImage.attr('saveWidth');
var finalHoverImagewidth = hoverImgWidth * 0.75;
var hoverImgHeight = childImage.attr('saveHeight');
var finalHoverImageWidth = hoverImgHeight * 0.75;
Basically it just checks to see if we have already saved the 'tooltip' image height inside an attribute. If we have, it just uses that value. But if not, we save the height or width inside that attribute and then uses it.
I'm also only selecting ("div.tooltip") once and saving it in childImage. The reason for this is that each time you do this $(selector) jQuery has to go find that element. If you do this alot, it can impact performance. So it's good practice to just save your selector in a local variable.
http://jsfiddle.net/ugnNU/13/
It does not use a custom attribute. It just undoes in mouseleave, what you did in mouseenter
each time you call this code
var hoverImgWidth = $(this).children("div.tooltip").width();
var finalHoverImagewidth = hoverImgWidth * 0.75;
The width value of div.tooltip gets multiplied with 0.75.
The next time the code is executed this gets the current width (the lowered value) and lowers that again.
You could set the size back again when you hide it, but my advice would be to calculate the values on document ready and only show and hide the image with the mouseenter and mouseleave events.
Related
I need to change the color of any image that contains a particular x coordinate. However, the code I am using now only gives me the #scrollwrapper container, and not the individual image that is at that location.
var xHome = window.innerWidth/2;
var yHome = window.innerHeight/2;
var pElement = document.elementFromPoint(xHome, yHome);
alert (pElement.className);
This gets wrapper container on the images, but not the particular image that is there. The site is coolaidhouse.com/projectcaptured
You can see the scroller there. I want to dim the images on the side of the "active," item, which is basically the image closest to the middle.
If I could get the image based on its coordinates I could do the rest. However, I can't figure out how to get the image in lieu of the container.
Here is what the end result should look like:
Your code grabs the image when run from the console. Therefore, you need to wait for the image to load before running the code.
IMG elements have an onload event you can use for this purpose.
The answer was in Rick Hitchcock's comment. Don't know how to mark a comment as an answer though. The images were in fact not loaded yet.
Ok, the subject is not super specific to the overall need I am looking to address. So I have this function that is called on a given element, which is a hidden submenu next to a triggering element. The way the page renders, and to keep the styling optimized I can't just style the position in via css. So I need javascript/jquerys help.
With that I have come up with a function that I can reuse as needed, and works fine all around. However my key problem is, that I have a couple cases where the submenu will overlap the edge of the <section> element it resides in. Which that elements overflow is set to hidden, that and its also about 30 pixels from the bottom of the page anyway. All in all the submenu element gets hidden a bit by either falling completely out of the pages view half way through the element, or it gets hidden by the section tags overflow state.
With that. In a case where this happens I am wanting to instead of have the element align to the bottom of the trigger element, have it align to the top instead so that way the menu in that case is above the trigger element and not below.
Problem is Im not sure how to compensate for that.
Here is the function I came up with to do what I need, now I just need some help in a sense catching when the menu element falls off the page so to speak, so I can adjust for it when it does.
function openSubOrgMenu(triggerID, elem)
{
orgSubOpenID = triggerID;
orgSubShowing = true;
elemOffset = elem.offset(); //trigger element
elemWidth = elem.width();
elemHeight = elem.height();
elemWrap = elem.siblings('.org_group_wrapper');//menu element
elemWrapWidth = elemWrap.width();
elemWrapHeight = elemWrap.height();
moveTop = elemHeight + elemOffset.top + 4;
moveLeft = elemOffset.left - (elemWrapWidth-elemWidth-15);
elemWrap.show().offset({top:moveTop, left:moveLeft});
}
Well here is a JS Fiddle, not necessarily showing a working logic of what I want, but demonstrating the desired effect when its an element that at the bottom of the page/section:
http://jsfiddle.net/4zwEr/
I'm placing a div, by using another div id as a reference on the page (to make sure that it appears where I want it to). The code is as follows:-
$('#' + contentDiv).offset({top:($('#' + placementID).offset().top), left: ($('#' + placementID).offset().left)});
The problem is, that though the placementID offset figures are the same each time. Whenever I call this again, it seems to double and put a new left offset that is the the same amount on-top of the previous offset.
E.g. I call a function on a click and say, place this div next to this placement div please. It does it. User then exits and then does another click and the same function is used to place another div next to the same placement div. It does it, but instead of placing it in the same position as last time, seems to reference the position of last time as the 0 point and adds the left amount to that. Meaning the div is placed double distance away now.
Please note; I have consoled out the placement box top and left dimensions and it hasn't changed after each time.
Not sure what's going on.
If someone runs into this, I've managed to solve the problem very simply... by using css instead of offset. I.e.
$('#contentDiv').css({top:placeTop,left:placeLeft});
Im guessing that when you change the offset of $('#' + contentDiv) it affects the offset of your $('#' + placementID) that you subsequently call.
Say you have 3 placement Id's #1,#2 and #3.
With offsets #1: 0,0 #2: 0,100 and #3: 0,200.
Then you set #contentDiv's offest to #1's offset.
Now, #contentDiv's offset is 0,100. This makes your placement offsets #1: 0,100 #2: 0,200 and #3: 0,300 respectively now. Which is probably what is throwing you off.
According to
http://bugs.jqueryui.com/ticket/6868
The element must be visible before calling .position().
after changing my code to show the element before calling offet() it worked like a charm.
Reset your properties before setting the desired offset-value with (e. g.)
$(this).css('top', '').offset({top: desiredTopOffset});
var transform = ['scale(' + scale + ')'];
$.merge(transform, ['rotate(' + rotate + 'deg)']);
$(this).css(-moz-transform, transform.join(' '));
this block of code executes when an event is generated , the new scaling and rotation is added to css element,but whenever the same event is generated again the css element resets itself to the original size and position .The transformation is carried out after resetting during the second time.I want to eliminate the resetting of the element to original size and position.How can i make the change permanent in the first time when event is fired ,and build on it when the event is fired the second time?
Please help thanks in advance
There's nothing wrong with this code, but keep in mind you're setting scale and rotate in absolute terms, not relative to its 'initial' state.
So each time this code executes, the -moz-transform property of your element is being overwritten. If you want to rotate and scale it based on it's current state, you'll have to keep track of your scale and rotate values and adjust them as necessary. e.g., if this code is in a loop, you can do rotate=rotate+5; or something like that.
You can also request these properties from the CSS using ($this).css('-moz-transform'), parse that to get the values you want, and update scale and rotate accordingly.
I've got a function bound (in the HTML) to an image's onload="". The function uses jQuery's height() method to find the height of the image, which is used to center it vertically. Code below.
The context is a slideshow of images with different dimesions, where the src="" of the <img> is changed as the user selects the next image. The bound function is successfully called every time the source changes, but the number it pulls with height() is old: that of the image before its source changed. In other words: When I start at the first image, the height() is right. When I go to the second the height is the same as before even though it should be different. When I go to the third image, the height is that of the second image. And so on. I know that it can fetch the height: If I call this function with another element's onclick once I'm sure the image has loaded, it works fine.
How can I make sure that the height() info my function grabs is current, i.e. that of the image as it is now? I know this isn't a problem with downloads or speed; I'm testing locally.
Many thanks in advance!
Code:
HTML for image:
<img class="slidePhoto" id="slideImage" src="img1.jpg" onload="centerImg()" />
Relevant part of JS for centerImg():
function centerImg(){
var offset = Number(($('#slideImage').height())/2*-1);
$('.slidePhoto').css({'top': '50%', 'margin-top': offset});
}
If the image source is changing with a button click, could you tie a jquery click event handler to the button to change the image, and then pull the height rather than trying to pull the height in the "onload" event of the image tag?
jQuery Click Event
I believe that since you've set the height explicitly on the element, that's what you're getting when you ask for the height the next time. A couple options:
(I'd try this) Create a new Image outside the DOM (var i = new Image(); i=src='...) and read the size from that (i.height). That should provide you with an accurate height (although some cross-browser testing will be necessary).
In your load function you could try setting the height to "auto" before measuring it. Not sure if this will help.
Just create a new <img> tag and replace the current one with this.
One of these should work.
You should use jQuery to setup the load event. I believe this is what you are looking for.
$('img.slidePhoto').load(function() {
var offset = $(this).height()/2*-1;
$(this).css({'top': '50%', 'margin-top': offset})
}
(FYI: That should go in your $(document).ready() method.)
See the jQuery documentation for the .load() method.