CSS hover and jquery - javascript

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;
});

Related

How to do Javascript Function which will change the style display of element?

function burgerMenu(){
//alert(document.getElementById("hiddenMenuUL").style.display);
if(document.getElementById("hiddenMenuUL").style.display="none"){
document.getElementById("hiddenMenuUL").style.display="block";
}
else if(document.getElementById("hiddenMenuUL").style.display="block"){
document.getElementById("hiddenMenuUL").style.display="none";
}
}
I want to toggle the burger menu icon. So if I press the icon the burgerMenu() function will be toggle and verify if its display: none then change to display:block and vice versa. hiddenMenuUL is the for list of links.
This line below is the button line in HTML:
<button class="btn" onclick="burgerMenu()">☰</button>
My CSS for hiddenMenuUL
#hiddenMenuUL{
display: none;
list-style: none;
width: 100%;
justify-content: center;
}
When you are writing your if, you are not actually checking if the display === "none", you are trying to set it to none.
What you should be doing looks like this:
function burgerMenu(){
let menuStyle = document.getElementById("hiddenMenuUL").style.display;
if(menuStyle === 'none'){
document.getElementById("hiddenMenuUL").style.display="block";
}
else {
document.getElementById("hiddenMenuUL").style.display="none";
}
}
Edit:
It seems display rule is defined in CSS, and isn't inline.
.style can only reach inline styles, for example:
<div id="hiddenMenuUL" style="display: none;"></div>
Adding 'display: none' inline like in the example above should be the fastest and easiest way to 'fix' it in your particular scenario, although it probably wouldn't be considered the best practice.

Toggling HTML visibility using CSS and jQuery

Ok so I have a div that contains a canvas and a span which contains an image. I want it such that if the user hovers over or focuses on the div that the image inside of the span will appear. The image wil be invisible otherwise.
Long story short I want to have a canvas with a red 'X' on the corner that is only visible when the canvas is active
$('image-canvas').hover(function() {
$('delete-image').addClass('active');
}, function() {
$('delete-image').removeClass('active');
})
.delete-image {
position: absolute;
top: 0px;
right: 0px;
}
.delete-image>img {
width: 32px;
visibility: hidden;
}
.delete-image.active>img {
width: 32px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas-container" tabindex="1">
<canvas id="imageCanvas"></canvas>
<span class="delete-image">
<img src="file:///E:/Apps/Emoji-App/emojis/icons/if_erase_delete_remove_wipe_out_181387.png"/>
</span>
</div>
The hover event fires just fine but the image refuses to toggle visibility. Any help?
When you use a class within your selector, write it like this:
$('.myDiv')
When you use an ID within your selector, write it like this:
$('#myDiv')
For further informations, check out jQuery's learning center website.
Seems like you have misspelled or have not specified the jQuery selector type (class . or id #). Please try this:
$('#imageCanvas').hover(function () {
$('.delete-image').addClass('active');
}, function () {
$('.delete-image').removeClass('active');
})
See here .
$("#control").mouseover(function(){
$('#img').show();
});
$("#control").mouseout(function(){
$('#img').hide();
});
#img{
display:none;
}
#control{
margin-bottom:10px;
padding:5px;
background-color:#eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='control'>Show/Hide</div>
<img src='https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg' id='img'>
The question is not well-phrased, so I ain't sure I totally understood what you wanted.
When you try to select by class, don't forget the dot '.'
$('image-canvas').hover(function () {
$('.delete-image').addClass('active');
}, function () {
$('.delete-image').removeClass('active');
})
When using functions 'addClass', 'removeClass', 'toggleClass', etc. - you don't use the '.' sign because it is a function that refers only to classes. On the other hand, when using jQuery selector $(' ') or vanilla querySelector(' '), you should declare what kind of attribute you are selecting by, those will be '#' for ID, '.' for Class, and if you want to select by anything else you can use $('*[anyattribute=anyvalue]'), in your clase it could be $('span[class=delete-image]').
Good luck

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

Hide DIV until page loads using visibility property

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" );
}

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