Hide DIV until page loads using visibility property - javascript

I have a DIV (.container) and a button (.btn) which i want to hide until the page is fully loaded.I managed to do it by using dispay:none on a small jquery snippet, but it would be better if i could use visibillity:hidden because the page wouldnt shift (like it does with display:none).
basically, I have:
<style>
.container {visibility:hidden;}
.btn {visibility:hidden;}
</style
Is there any nice soul that could help me with jquery part so it only shows once the page is fully loaded?

Here is what you need to do
$(window).load(function() {
$('.container').css('visibility','visible');
$('.btn').css('visibility','visible');
});
OR you could just add a class to the the container as well
$(window).load(function() {
$('.container').addClass("show");
});
and then for your css
.container.show { visibility: visible; }
.container.show .btn { visibility:visible; }
You can create a class just for visibility but make sure it is after the other rules so it will overwrite it. Like so
.container {visibility:hidden;}
.btn {visibility:hidden;}
.my_class { visibility: visible; }
The jquery in this case would be
$(window).load(function() {
$('.container').addClass("my_class");
});

You can try this:
Javascript:
$(window).load(function(){
$('.container, .btn').addClass('visible');
});
CSS:
.visible { visibility: visible; }
Hope help you!

Don't overthink it! :)
$(function() {
$('.container').show(); // show .container and .btn
$('.btn').show();
});

Have you tried something like this?
$(document).ready( function() {
$(".container).show( "fast" );
}

Related

jQuery changing body's background color

This is frustrating and I can't figure this out.
I just need to change/toggle back/foreground color
for the entire body when user clicks on a link, 'theme'.
Following is my html file.
...
<style>
highlight {
background-color: black;
color: white;
}
</style>
<script>
$(document).ready(function () {
$('.theme').on('click', function () {
$(document.body).toggleClass("highlight");
//$(document.body).css({"background-color": "black"});
});
});
</script>
When I use $().css({...}), it works but when I try to use
class to be able to toggle, it doesn't. Please help.
Agree with Rayon. "highlight" in the style is not a class if missing the period in front. jQuery is not able to toggle the "highlight" class since there's no "highlight" class to toggle. The code works here: http://liveweave.com/T6c7Mz
change the following line
$(document.body).toggleClass("highlight");
with
$("body").toggleClass("highlight");
This will work
HTML
Click Me
CSS
body { background-color:red; }
.highlight
{
background-color:yellow;
}
JQUERY
$("#theme").click(function() {
$("body").toggleClass("highlight");
});
Here is the working code
http://jsfiddle.net/CLwE5/119/

Select <divs> within parent <div> using jQuery

I have a parent <div>, #amwcontentwrapper, which has a series of divs within it with their own classes and ids.
I want to use jQuery to select these child divs, and IF they have the class .amwhidden, do nothing, but if not, remove the .amwshown class and add the .amwhidden class.
This is what I have so far, but it is not working. I think it may be my selecting of the child divs within the parent.
Can anybody see any obvious problems? Thanks for your help.
if ($('#amwcontentwrapper > div').hasClass('amwhidden')){
} else {
$('#amwcontentwrapper > div').fadeIn(600, function(){
$('#amwcontentwrapper > div').removeClass('amwshown');
$('#amwcontentwrapper > div').addClass('amwhidden');
});
}
And here is the basic html that I am using:
<div class="amwshown" id="amwintro">
Intro Section, which should have the 'amwshown' class removed, and the
'amwhidden' class added, when the jQuery runs. Currently, this does not happen.
</div>
UPDATE: Using War10ck's solution in the comments below (i.e. $('#amwcontentwrapper > div.amwshown')) I have managed to get the classes changing as I wished. However, those which have had the .amwshown class removed and .amwhidden class added still show on the page, despite the CSS looking like this:
.amwhidden {
display:none;
}
.amwshown {
display:block;
}
Looking at the Dev Tools, it seems that, when the jQuery is run (on a click event) the classes are changing, but any classes which are having the .amwshown class added (thus displaying them on the page) are also having the a <style> tag added to them which makes them display:block;
When I then press another button, which should hide the aformentioned <div> to make way for another one, the class is being changed to .amwhidden, but that <style> tag is not being deleted, so even though it has the .amwhidden class, it is still on the page.
I've created a JSFiddle here, if anybody still wants to help!
`
$(document).ready(function() {
$('#buybutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwbuy').hasClass('amwshown')) {} else {
$('#amwbuy').fadeIn(600, function() {
$('#amwbuy').removeClass('amwhidden');
$('#amwbuy').addClass('amwshown');
});
}
});
$('#phdbutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwphd').hasClass('amwshown')) {} else {
$('#amwphd').fadeIn(600, function() {
$('#amwphd').removeClass('amwhidden');
$('#amwphd').addClass('amwshown');
});
}
});
});
#sidebar {
position: absolute;
left: 1%;
top: 1%;
font-size: 5em;
color: #000000;
width: 10%;
display: block;
background-color: red;
}
#amwcontentwrapper {
position: absolute;
left: 20%;
top: 5%;
}
.amwshown {
display: block;
}
.amwhidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="amwsidebar">
<span class="sidebarbutton" id="phdbutton">PhD Button</span>
<br />
<br />
<span class="sidebarbutton" id="buybutton">Buy Button</span>
</div>
<div id="amwcontentwrapper">
<div class="amwshown" id="amwintro">
<p>An intro section to welcome the visitor. Disappears when one of the other sections is clicked.</p>
<br />
<br />
</div>
<div class="amwhidden" id="amwbuy">
Buy Section
</div>
<div class="amwhidden" id="amwphd">
PhD Section
</div>
</div>
`
You can use not to remove the elements you do not want, like this:
$('#amwcontentwrapper > div').not('.amwhidden')
.removeClass('amwshown')
.addClass('amwhidden');
And work with that.
Try this
$(document).ready(function() {
$("#amwcontentwrapper").children().each(function(elem, x) {
if ($(x).attr("class") == "amwhidden") {
alert($(x).attr("class"));
$(x).removeClass("amwhidden").addClass("amwshow");
alert($(x).attr("class"));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="amwcontentwrapper">
<div class="amwhidden"></div>
<div></div>
<div></div>
</div>
You can try each as follow,
$("#amwcontentwrapper div").each(function(){
if($(this).hasClass('amwhidden'))
//DO something
else
//DO something
});
Thank you for all help, it has prompted some brainstorming which has solved this issue.
Instead of adding the .amwhidden class and removing the .amwhidden class using jQuery, I have just created a .amwsection class, which all the sections belong to which has an initial display value of none. So far, so good; all of the sections are not there when you load up the page.
Then I use the .css jQuery function to change the display:none to display:block when the corresponding button is clicked, and changing all other .amwsections to display:none. This works just fine, but the effect is quite abrupt; there is no fading in, as you would get if you used the .animate function. .animate, however, does not work with the display value.
.fadeOut and .fadeIn to the rescue! By wrapping the .css change in these, I can create a fading in/out effect and can still use the display value.
Here is one example of this code.
The #buybutton is the button to be pressed.
#amwintro is just something which appears when the page loads - it will now be set to display:none if this is the first button pressed.
The .amwsection are all of the hidden sections. This portion of the code just resets all of them. This and the #amwintro section happen very quickly (1/100th of a second) to keep response time good.
The #amwbuy is the specific section that I want to reveal. As you can see, this fades in over a longer period.
Currently only tested in Chrome, but I think I've got it!
$(document).ready(function () {
$('#buybutton').click(function() {
$('#amwintro').fadeOut(1, function() {
$(this).css({
display:'none',
});
});
$('.amwsection').fadeOut(1, function() {
$(this).css({
display:'none',
});
});
$('#amwbuy').fadeIn(600, function() {
$(this).css({
display:'block',
});
});
});
});

Targeting previous div in javascript or css

HTML code:
<div class="content">
<textarea> hello.png </textarea>
</div>
<div class="content-btn">
Click me
</div>
Javascript code:
$(".button").click(function() {
if ($(this).parent().previousSibling('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().previousSibling('.content').show();
}else {
$('.content').hide();
}
});
How would I go about only showing the textarea when 'Cick me' is clicked or hovered preferably in css but if not javascript. Thanks guys
https://jsfiddle.net/uway5hhg/8/
As exercise you could do this effect in pure css (using :target pseudoclass and a long delay in a simple transition) if you add a close button just below the textarea
http://codepen.io/anon/pen/JYoMRK
<div class="content" id="text">
<textarea> hello.png </textarea><br />
Close
</div>
<div class="content-btn">
Open
</div>
CSS
#text {
overflow: hidden;
height: 0;
opacity: 0;
transition: opacity 0s 999999s;
}
#text:target {
opacity: 1;
height: auto;
transition-delay: 0s;
}
#text:target ~ div a.button { display: none; }
Anyway if you look for a straight jQuery approach, a simple toggle() is enough (you might have to hide the .content element via css depending on the initial condition of your textarea)
https://jsfiddle.net/uway5hhg/39/
$(".button").click(function() {
var content = $(this).parent().prev('.content');
content.toggle();
});
As far as I know there is no way to catch previous sibling in CSS.
But it works with jQuery, here is your slightly changed code:
$(".button").on('click', function() {
var ele = $(this),
par = ele.parent(),
sbl = par.prev();
if (sbl.css('display') == 'none'){
$('.content').hide();
sbl.show();
}else {
$('.content').hide();
}
});
Working example is here: https://jsfiddle.net/y0ab3n0L/
That should do it's job
JS:
$(".button").click(function() {
var contentBtn = $(this).parent(".content-btn");
var content = $(contentBtn).prev(".content");
var textarea = $(content).find("textarea");
$(textarea).toggle();
});
or event shorter:
$(".button").click(function() {
$(this).parent(".content-btn").prev(".content").find("textarea").toggle();
});
https://jsfiddle.net/uway5hhg/21/
Hope this helps :)
Solution provided by Fabrizio is a good one if you want no javascript.
However you can also modify the DOM to have a similar effect.
<div class="content-wrapper">
<div class="content" id="text">
<textarea>hello.png</textarea>
</div>
Click me
</div>
CSS
.content {
display:none;
}
.content-wrapper:hover .content {
display:block;
}
.content-wrapper:hover .button {
display:none;
}
https://jsfiddle.net/2Lsszgqz/
There is no such CSS pseudo element - a.button:click, so only JS solution will work (without changing your HTML structure). You can also get to close of it using :focus CSS pseudo class. But you will lack to go up one level in CSS and then show the textarea. So, only solution left is using JS.
In your sample JS code you have used .previousSibling('.content') which is native JS, which you are calling on jQuery object, that's why it will not work. jQuery equivalent of this function is .prev('.content')
Correct Syntax would be -
$(".button").click(function() {
if ($(this).parent().prev('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().prev('.content').show();
}else {
$('.content').hide();
}
});
Working Fiddle

CSS hover and jquery

Hover effect of CSS is not executing anymore after jquery-action:
I do have the following CSS:
#slider-information-content{
display: inline;
visibility: hidden;
}
#slider-information:hover #slider-information-content {
display: inline;
visibility: visible;
}
and the following jquery code:
$("#slider-information-content-close").click(function(e) {
$("#slider-information-content").css("visibility", "hidden");
e.preventDefault();
return false;
});
The hover effect is working fine. Also I can hide the div with jquery. But when I hide the div with jquery the hover effect is not working anymore and the div is not coming up. How can I change it? And also WHY?
JS Fiddle
The problem with your code is, the visibility property set through jQuery is getting precedence as an inline style is set.
You can use jQuery .hover() for this,
$("#slider-information").hover(function (e) {
$("#slider-information-content").css("visibility", "visible");
}, function (e) {
$("#slider-information-content").css("visibility", "hidden");
});
Demo
Setting CSS on an element in JavaScript (or jQuery) applies the value to the element's style="..." attribute.
This has higher precedence than any rule in a stylesheet. In this case, you have 0210 as the precedence for your visibility: visible, but the .css("visibility","hidden") has a precedence of 1000 and therefore wins.
You can circumvent this by using:
#slider-information:hover #slider-information-content {
visibility: visible !important;
}
However, the use of !important almost always means you're doing something wrong.
You're mixing jQuery and CSS, which can be tricky. If you switch to using jQuery for both the hover and click behavior is will simplify the code and fix the issue.
http://jsfiddle.net/mcH7L/2/
CSS
#slider-information-content {
display: inline;
visibility: hidden;
}
#slider-information:hover #slider-information-content {
display: inline;
visibility: visible;
}
HTML
<div id="slider-information">Hover this
<div id="slider-information-content">
<div id="slider-information-content-close">Close</div>
Hidden content here</div>
</div>
jQuery
$("#slider-information").hover(function (e) {
$("#slider-information-content").show();
}, function (e) {
$("#slider-information-content").hide();
});
$("#slider-information-content-close").click(function (e) {
$("#slider-information-content").hide()
e.preventDefault();
return false;
});

Change CSS properties of body when link is clicked with a certain class

I have a bunch of lightboxes that all have the same class, but separate ID's. When you click:
<a class="lightbox" href="#lightbox_one">
I want Javascript to add overflow: hidden; to #page_wrap. I want this to apply to all <a>'s with that class of .lightbox Then when the lightbox is closed using <a href="#close"> I want the CSS properties to revert back to the original state (overflow: scroll;).
Here's my codepen.
you just want the page underneath to stop scrolling? Just apply overflow:hidden to the body
$(".lightbox").click(function(){
$("body").css({"overflow":"hidden"});
});
$(".close").click(function(){
$("body").css({"overflow":"auto"});
});
Some css:
.overflowHidden {
overflow: hidden;
}
.overflowScroll {
overflow: scroll;
}
If you are using jQuery you could do this:
$('#content').on('click', '.lightbox', function() {
$('#page_wrap').removeClass('overflowScroll').addClass('overflowHidden');
});
$('div[id^=lightbox]').on('click', '.close', function() {
$('#page_wrap').removeClass('overflowHidden').addClass('overflowScroll');
}

Categories