display:none works in CSS but not in jQuery - javascript

I have a page where a div takes a while to load in.
The simple code in CSS stops it from ever loading:
.object-container{
display:none;
}
However, I do need it to display by default, and to only NOT display based on a condition.
So I have:
if (x == 1)
{
alert('here!');
//$('.object-container').css("display", "none !important");
$('.object-container').attr('style','display: none !important');
}
...and the alert pops up, but every time the DIV displays anyway after the page loads for a while. What might be happening?

$('.object-container').attr('style','display: none !important'); will overwrite all the inline-styles applied on that particular element.
This may be causing the issue for you. You should change the display property alone by
$('.object-container').hide()
or
$('.object-container').css('display','none')

Related

How can I make an element disappear?

I want to hide an element as soon as it becomes visible (has loaded).
I have tried using timeout and setInterval. They work fine but they are a few seconds late. So first the element loads and then it disappears.
But I want it so it doesn't appear at all and just disappears without appearing first.
I tried to change the time and make it more/less but it didn't help. Is there another way?
I even tried to put the timeout and setinterval inside window.load it didn't work. I also tried checking when the element is visible by using the length but it was slow too.
window.setInterval(function(){
jQuery("#vz").find('div').first().hide();
}, 600);
You can specify its visibility as hidden (In case you still want it to occupy space)
Or specify its display as none (In case you don't want it to occupy space)
Both of these should be done using CSS, so in your CSS file:
#vz {
//This:
visibility: hidden;
//Or this:
display: none;
}
And as a general role of thumb, initial style should be set in CSS and then you can animate/change it using JS or more CSS

Creating a preview effect for gallery images that closes when clicked outside

I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.
This is the last solution I tried. The preview works but I can't get it to close when I click out.
DEMO
$('.portPic').click(function() {
if ($(this).attr('data-src2')) {
$('#clickedImg').attr('src', $(this).attr('data-src2'));
} else {
$('#clickedImg').attr('src', $(this).attr('src'));
}
$('#clickedImg').css('visibility', 'visible');
$('#clickedImg').blur(function() {
$('#clickedImg').css('visibility', 'hidden');
});
});
I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.
I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.
You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).
<div id="modal-overlay" class="full-screen-overlay"></div>
Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.
In your script code, put an event handler for when the modal div is clicked:
$('#modal-overlay').click(function() {
$('#clickedImg').hide();
$('#modal-overlay').hide();
})
I would also use the .hide() jQuery method, which is easier than typing out the visibility.
Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.
For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.
These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().
Check out this link to jQuery's API documentation for animations. Very useful and a good read.
Hope this helps!
You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.
You can use modal photo gallery.
http://ashleydw.github.io/lightbox/
You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".
Hope this helps..

strange CSS / Javascript behavior when hovering over TEXTAREA or A objects

I have a strange problem in my web-app (php) that I noticed recently.
1 month ago it worked just fine.
When I hover above a certain < TEXTAREA > or over 2 buttons (add, exit),
in a DIV, the DIV gets filled with its background color, making the INPUT, TEXTAREA and 2 buttons invisible.
This DIV is practically a window with 2 inputs and an OK and exit button,
that I hide and show, as a "window" thing would be in Windows.
The moment I hover any other button in the page (so I do a mouseOver), the DIV
shows up again, and it starts working the proper way.
So the problem is when i hover on the TEXTAREA and the 2 buttons, the DIV gets gray.
thanks!
i hope it's not a Chrome bug, in Firefox it seems to work,
but again in Opera it doesn't. So strange.
took at look at your site in Chrome and was able to replicate your problem easily.
by using the "Element Inspector" i removed overflow:hidden from .my_links_header_container and could no longer replicate the problem.
i tested it several times by reloading the page.
on page load, the problem existed, but immediately. after i removed the overflow:hidden, it 100% did not occur again.
on a side note, you have an inline style="display:block" on your .add_link_table, which is not really a table element but a div. that's redundant because a div is a block element by nature -- perhaps it was a table element previously?
i also noticed several elements whose natural display was overridden by your CSS. i think part of this problem is related to flip-flopping your elements and displays.
Seems to be a webkit issue.
This may not be a good solution, but give it a try
I am modifying you addLink method (use plain javascript or jquery selectors as you like, Ive kept the original code as it is)
function addLink()
{
var addLinkTable = $("#add_link_table");
if(document.getElementById('add_link_table').style.display=='block')
{
document.getElementById('add_link_table').style.display = 'none';
}else{
addLinkTable.css("visibility","hidden");
document.getElementById('add_link_table').style.display ='block';
setTimeout(showTable,10);
function showTable(){
addLinkTable.css("visibility","visible");
}
}
document.getElementById('link_name').focus();
}
Try it out with by switching visibility or opacity or height

Homemade Jquery lightbox, but z-index won't change back afterwards

So I'm trying to make a simple lightbox on a concert listings page. You click a listing (.performer), and then an info box (.lightboxinfo) gets overlaid while a semi-opaque white div lightens the rest of the screen (#whitepage). Then, you click anywhere on the screen, and the box and white div disappear.
Everything works fine except the final z-index changes. The box and white div become fully transparent, but the z-index clearly haven't been changed since I can't click on any links.
Anyone know what I'm doing wrong? Thanks so much!
The javascript is below:
$('.performer a').click(
function(){
$('.lightboxinfo').css('z-index','110').animate({opacity:'1'}, {queue:false,duration:500});
$('#whitepage').css('z-index','100').animate({opacity:'0.4'}, {queue:false,duration:500});
});
$(document).click(
function(){
$('#whitepage').css('z-index','-100').animate({opacity:'0'},{queue:false,duration:100});
$('.lightboxinfo').css('z-index','-110').animate({opacity:'0'},{queue:false,duration:100});
});
});
Why mess around with the z-index when you can set 'display:none' after your opacity becomes 0?
// when appearing
$('#whitepage').css('opacity','0').show().animate({opacity:'0.4'}, 500);
// when disappearing
$('#whitepage').animate({opacity:'0'}, 100, function () {
$('#whitepage').hide();
});
Also, each time you click on the performer link, you're adding another event handler to the document. You may want to do that only once, outside of the click and only if the whitepage is visible.
$('.performer a').click(function () {
});
$(document).click(function () {
$('#whitepage:visible').animate(...
});
This is a bit difficult to answer as you haven't given the HTML and CSS, but there are a few things you should probably look at.
I assume your lightbox divs are positioned absolutely. Any (container) elements that you want to appear over them must be positioned relatively or absolutely or z-index will have no effect and relatively / absolutely positioned elements will always be on top of them.
You're animating the opacity manually, rather than using jQuery's built in fadeOut animation. Apart from giving compatibility with browsers that don't support opacity, fadeOut also sets the hidden element to display: none. This allows you to click on stuff that would otherwise be underneath the lightbox, whereas just reducing the opacity to 0 still leaves the element there and able to accept and block clicks. (So using fadeOut also means you'd no longer have to toggle the z-index.)
This is not directly related to the problem you mentioned, but both of the events you've set up will fire when you click on a .performer a link. (I think this is why you've prevented the animations from being queued: both will run together and the one that sets the opacity to 1 wins as it finishes last.) This does, however, stop the lightbox getting the z-index you want. To prevent this happening, you either need to set the close lightbox click event to #whitepage or stop the event propagating.
$('.performer a').click(function(event)
{
$('.lightboxinfo, #whitepage').fadeIn(500);
event.stopPropagation();
});

JavaScript not beign executed due to parent div being hidden on page load?

I'm using the jQuery GalleryView plugin. I've use the plugin on one page and contained it in a div with the appropriate code which sends the div's id to the external GalleryView .js file.
I'm also using jQuery to hide the div on document ready, so the users can toggle the visibility, but for some reason when the div is hidden innitially, the gallery does not load correctly. I believe this may be because the script inside the code is not being called due to it's hidden status.
I hope I have explained this clearly enough. Does anyone have any ideas?
The plugin home page can be found here or I believ the jQuery page is more up to date but not as well documented.
Most likely, the gallery has issues calculating widths/height because the elemens are hidden ..
you should either hide the elements after the gallery has initialized, or move it off-screen by CSS (initially) and once the gallery initializes, hide it and bring it back to its position..
Update
(after comments and inspecting the plugin source code)
The issue is definitely the hiding of the containing div by you at document ready event.
The true problem is that the plugin executes its code at window load and not dom ready, meaning after the images have loaded..
If you hide it before it gets executed, the plugin fails to correctly identify some properties of the images like width/height etc..
If the space the gallery occupies is the same whether it is hidden or show, then i would suggest that instead of hiding the container, to set visibility:hidden. This does not skew the properties of the images like the display:none does (its is what .hide() uses)
so
$(document).ready(){
// hide container
$('#container').css('visibility','hidden');
// plugin init call here
$('#id').galleryView({...});
}
If you need the gallery to dissapear and also free its space when hidden, then you need to call the hiding, after the plugin has completed its initialization..
$(document).ready(){
// plugin init call here
$('#id').galleryView({...});
}
$(window).load(){
// your code to hide the container of the gallery
// we use timeout to give some time for the gallery code to execute first..
setTimeout(function(){ $('#containerid').hide(); }, 100 );
}
http://docs.jquery.com/Plugins/livequery
The problem is that js does not "see" the content of elements with display: none;
The easiest solution: use position hiding instead of display: none;
Html:
<div class="hidden">...</div>
Css:
.hidden {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
}
And in js .addClass('hidden') and .removeClass('hidden') to hide or show the element
In this case this element will be "visible" for js and images to load, but hidden from user.

Categories