I have two tables next to each other, the one on the right has an issue with the div displaying off the page when using show().
How can I prevent this?
$("tr.invoice_head td:last-child a").hover(
function(){$(".custNotes-span",this).position({
of: '.custNotes-span',
my: 'right top',
at: 'right top',
offset: '.custNotes-span'
}).css({
'z-index':'100',
'width': '200px',
'position':'absolute'}).show();},
function(){$(".custNotes-span").hide();}
);
Update: JSFiddle link - http://jsfiddle.net/r60ywb0L/2/
My apologies, here is a copy of the JSFiddle including the JS used and CSS. There's two tables floated next to each other and I'm trying to get a div.custNotes-span to display over the rest of the page when hovering over the anchored link inside the last td of the tr.invoice_head.
Playing around in the fiddle, I found that :
CSS needs to be applied before being positioned.
The elements need to be rendered in the DOM when positioned (but not necessarily 'visible').
The of property of the position() map is better set to the closest table row
collision:'fit' seems to work better than the default collision:'flip', though you may not notice the difference except in th fiddle.
The elements can be positioned once. It's not necessary to re-position them at each showing.
The following workaround exploits CSS visibility to allow correct positioning while avoiding FOUC.
apply .css() including visibility:hidden
"show" with .show() (but still hidden)
apply .position()
hide with .hide()
make "visible" with visibility:visible (but still hidden)
The elements can then be shown/hidden with .show() and .hide() in the hover handlers.
// As the positioning map and the css map get used in a loop, it's worth assigning them outside the loop.
var maps = {
css: {
'z-index': '100',
'width': '200px',
'position': 'absolute',
'visibility': 'hidden'
},
pos: {
'of': null, //added dynamically below
'my': 'right top',
'at': 'right top',
'collision': 'fit'
}
};
//Apply CSS and pre-position the notes
$(".custNotes-span").each(function() {
$(this)
.css(maps.css)
.show()
.position( $.extend({}, maps.pos, {'of': $(this).closest("tr")}) )
.hide()
.css('visibility','visible');
});
//The maps have done their work and can be deleted from the closure.
delete maps.css;
delete maps.pos;
//Hover actions
$(".custNotes a").hover(function() {
$(".custNotes-span", this).show();
}, function() {
$(".custNotes-span", this).hide();
});
Selectors are modified to be a bit more friendly.
DEMO
Related
I am applying an hover effect on an image with JQuery.
State on page load :
State on hover :
State on mouseout :
Here is the code snippet :
$(document).ready(function(){
$(".image-container").hover(function() {
$(this).parents().children().children('.image-01').css({'background-color':'#D4E619', 'opacity': '0.5'}),
(function() {
$(this).parents().children().children('.image-01').css({'background-color':'#FFFFF','height':'0', 'opacity': '0', 'visibility' :'hidden'});
});
});
});
I tried several css instructions but the image keeps the hover state.
Edit :
The final goal is to have a different hover color on several images inside a grid. All elements of the grid have the same classname.
I use a first JQuery function to append the classnames and then, generates a specific hover state on some images.
It's because you mixed in and out functions into single one. So your second function that (I assume) should be called on mouse out is never called.
You should unwrap that function from first one and put as second argument for .hover
$(document).ready(function() {
$(".image-container").hover(
function() {
$(this).parents().children().children('.image-01').css({
'background-color': '#D4E619',
'opacity': '0.5'
})
},
function() {
$(this).parents().children().children('.image-01').css({
'background-color': '#FFFFF',
'height': '0',
'opacity': '0',
'visibility': 'hidden'
});
}
);
});
Some suggestions (quite abstract since no HTML is provided):
You can reduce complexity of selector by finding closest unique wrapper and then find desired element: $(this).closes('.image-wrapper').find('.image-01')
Via JS apply only display/opacity. Via CSS set rules for element when it's shown, no point in setting it's background if it's not visible: $(this).[..].show(), $(this).[..].hide()
I assume you can just do it with css: .image-wrapper:hover .image-01{display: block;}
Suggestions:
Use id for the image, so you can reduce dom complexity.
Use two separate events (.hover and .mouseout)
Use arrow functions rather than 'function' keyword
Example:
$(document).ready(()=>{
$("#image-01").hover(()=>{
/* css code for hover here */
}
$("#image-01").mouseout(()=>{
/* css code for mouseout here */
}
}
Edit:
Maybe you can warp all of your images in a div element.
Then you can use
let images = $(' /* container id */ ').children()
To get its children.
Then just loop through the images and add hover events
With jQuery there is the hide() function.
When you add a duration to the hide function like so
$('#myclass').hide(1000);
<div id="myclass">
<p>yolo</p>
</div>
It will start from the bottom and animate up over the course of one second.
My question is how could I change the direction it will start from.
From the docs for .hide( duration ):
When a duration, a plain object, or a "complete" function is provided, .hide() becomes an animation method. The .hide() method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.
The element only appears to be animating up and left because it's positioned by its top-left corner.
To have it animate in another direction, it'll have to be positioned on a different corner:
#myclass {
position: absolute;
bottom: 0;
right: 0;
}
Example: http://jsfiddle.net/W7hqy/
You can't do this with the hide method Assuming your using jQuery you will need to use animate like so
$('element').animate({
marginLeft: '-400px'
}, '5000', function(){
$(this).hide()
});
Demo: http://jsfiddle.net/e6BBA/
Try this.
$('div').on('click', function(){
$(this).animate({
width: 0
});
});
Demo: http://jsfiddle.net/e6BBA/1/
I want to achieve something like :
$("#left").hide('slide', {direction: 'right'}, 1000)
However I do not want the div to be hidden I want it to keep up space so I want have the visibility hidden like:
$("#left").css('visibility','hidden')
Yet still achieve the same effect as above.
This is what I'd do
$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible
This could be horrible, but it's the only way I could think of solving the problem :)
EXAMPLE: http://jsfiddle.net/skyrim/j2RWt/4
Try this:
var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
width: 0,
position: "absolute",
left: offset.left,
top: offset.top,
height: $content.outerHeight(),
backgroundColor: "White"
}).appendTo("body")
.animate({
width: $content.outerWidth()
}, 1000, function () {
$content.css('visibility', 'hidden');
$(this).remove();
});
EDIT
So, after learning what the actual need was (:p), this method basically place another div over the original element. I've tested it on IE...and I'll edit this with an update after I do further testing on other browsers!
EDIT
Only Chrome seems to be having an issue with getting the correct height.
Added a callback which removes the makes visibility hidden (as LEOPiC suggested) and removes the slideout div
You can do it in very simple way. There is really a nice tutorial here to animate in different direction. It will surely help you. try this
$('#left').animate({width: 'toggle'});
EXAMPLE : http://jsfiddle.net/2p3FK/2/
EDIT: One more solution, this is very simple to move the div out of window with left margin
$("#left").animate({marginLeft:'1000px'},'slow');
EXAMPLE : http://jsfiddle.net/2p3FK/1/
I am using the following code to expand and center on div on :hover
$(document).ready(function(){
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
//$(this).removeClass('highlight');
});
$(".highlight").live("hover", function(){
$(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"}, 500);
});
$(".highlight").live("mouseout", function(){
$(this).animate({"width": "148px", "height":"90px", "top: ":"0px", "left":"0px", "margin-top: ":"0", "margin-left":"0"}, 500, function(){
$(this).removeClass('highlight');
});
});
});
My problem is two things:
1) I'm not sure how to reset the "top" and "left" css coordinates to their original value on mouseOut. To see a working demo, go here:
http://jsfiddle.net/kTFvj/1/
2) The z-index (see here: http://jsfiddle.net/kTFvj/1/) is not affecting the :hovered grid elements. Not sure why.
You can use jQuerys .data method to store the original values and retrieve them on mouseout
I have made a modification to your original code that might work like you wish.. it uses .data and also updates the z-index so the active element is always on top
http://jsfiddle.net/kTFvj/2/
as Martin said, store the values when the animation begins using a variable, and restore when done.
about z-Index: just have a variable called maxZIndex=0
and everytime an animation begins, set the object's zIndex property to maxZIndex++
What about using % instead of pixels?
Another solution is saving the actual value of width and height in some vars and restoring on mouse out.
I'm using this snippet to append an overlay to a whole site:
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});
It works great, only I need one element to sit above this overlay ID. I've given that element a z-index greater than the 5000 here, but it never seems to ascend above the gray overlay---any ideas?
Make sure it's a sibling and direct child of body to guarantee it'll work in IE along with giving it a position of anything other than static and a higher z-index than 5000.
Give it position:absolute too, or position:relative.
Make sure the element you want overlaying is positioned (like absolute or relative).. other wise z-index means nothing
1st check where exactly the 2nd element is being added in other words if ur assigning this value in JQuery but ur using plain css to code the 2nd elements values there may be a confliction. Also u should try using some quotes where ur values are i found that using double quotes with opacity values help.
Just a suggestion though instead of trying to dynamically assign elements using JQuery and give them properties might i suggest u try plain css when giving the elements attributes and only use JQuery to manipulate what needs to be calculated and or cannot be accomplished by css alone. Then ur code would be like this:
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay").height(docHeight);
$("#overlay").css({"opacity":"0.4"});
});
and the element would also have the properties assigned by the default css file