I'm using superfish menu and I have a problem.
In the header, I have a logo holder div with the logo badge div and logo name div inside. When the user hovers over a top level link the sf-mega drop menu is show and a class of .sfHover is applied to the parent li.
My issue is that I need the logo badge to show on top of the drop down menu BUT not the logo name div.
Using z-indexes are out I think so (I have tried) so I wanted to hide the logo name div when the .sfHover class is active on the menu li so I have this code but it is not hiding it.
if ($('#mainMenu.sf-menu ul li').hover().hasClass('sfHover') == true) {
$('.logoHolder .kingsworthName').hide();
}
Any help is appreciated.
Your usage of hover() is wrong here. It expects handler functions as argument. You should use it like this :
$('#mainMenu.sf-menu ul li').hover(
function() { // when the mouse pointer enters the element.
if ($(this).hasClass('sfHover')) {
$('.logoHolder .kingsworthName').hide();
}
},
function () {} // when the mouse pointer leaves the element.
);
You can use pure css. here's the link.
//css FILE
.box {
height: 300px;
width: 300px;
background: red;
}
.hidden {
height: 100px;
width: 100px;
background: white;
display:none;
}
.box:hover .hidden {
display: block;
}
//HTML
<html>
<body>
<div class="box">
<div class="hidden">
Hello there
</div>
</div>
</body>
</html>
https://jsfiddle.net/8Ldwm10p/
Related
I want to make a window that expands when clicked and closes when clicked again. I am using flask to display all lines of data but that should not be a problem and can actually be ignored. Right now I have it set that when you click the div it expands but once you let go the div closes again. Is there any way I can turn this div into a toggle of some kind many using python or javascript or even CSS?
HTML/Python flask:
<div class="container">
{%for i, value in verb_data.items() %}
<div class="indevidual_verbs">{{ i }} . {{ value }}</div><br>
{%endfor%}
</div>
CSS:
.indevidual_verbs {
cursor: pointer;
}
.indevidual_verbs:active {
padding-bottom: 300px;
}
Depending on what you want to do, you could even use the details html element, that automatically implements that functionality.
If you can use javascript, there is a way to easily toggle a class:
// Get a reference to the container
const container = document.getElementById("container");
// When we click on the container...
container.addEventListener("click", function (e) {
// we can toggle the "open" class
this.classList.toggle("open");
});
/* Just a way to show the container */
#container {
padding: 20px;
border: solid 1px #000;
}
/* Hide the content (you can do it in many different ways) */
#container .inner {
display: none;
}
/* Show the content when the "open" class is added to the container */
#container.open .inner {
display: block;
}
<div id="container">
<div class="inner">
This is just some example text
</div>
</div>
I have a parent div "total" in which, there are two children divs namely, "some" and "box". When I click on the link in the div "some" (child-1), the "box"(child-2) must be displayed with width: 100%; and if I click on other parent link, the current "box" (child-2) must be hidden. Also, the paragraph tag must not be hidden when the click button is clicked(as in position: relative).
Here is the fiddle to work this out.
The following lines are the code I tried.
$('.box').hide();
$(".click-btn").on('click', function() {
$('.box').hide();
$(this).parent().parent().children(".box").toggle(1000);
});
check this if it solve your problem jsfiddle
i added this
$('.box').hide();
$(".click-btn").on('click', function() {
$('.box').hide();
$(this).parent().parent().children(".box").toggle(1000);
});
add the css
.box {
width: 100%;
float: left;
position: absolute;
height: 200px;
background: orange;
top: 70px;
left: 0px;
clear: both;
}
My solution would be putting each .box outside of the floating .single and reference them with an data attribute.
<div class="total">
<div class="single">
<div class="some"><a class="click-btn" href="#" data-box="box1">click</a></div>
</div>
<div class="clearfix"></div>
<div class="box" data-id="box1">Box 1</div>
</div>
And the box css
.box {
width: 100%;
height: 200px;
background: orange;
display:none;
}
If you set the display none in css you don't have to use $('.box').hide(); on dom ready.
Since you hide all .box elements on click, the toggle function won't work. To toggle the box if you click the active link again you can use the .not() function of jQuery which will take out an element of the collection.
Alltogether the JS would look like:
$(".click-btn").on('click', function(e) {
e.preventDefault();
var boxId = $(this).data('box');
var activeBox = $('[data-id="'+boxId+'"]');
$('.box').not(activeBox).hide();
activeBox.toggle(1000);
});
I'm using e.preventDefault(); what will prevent the default browser action for clicking a link.
Here is a fiddle: http://jsfiddle.net/mrvtwpjp/40/
I've created a div which is hidden until the user clicks the "expand" causing the div to expand revealing the content. When the div is expanded the word "expand" changes to "contract" and contracts the div again on click.
I'd also like the color of the clickable text to change from black to red when the div is expanded but I don't know how to do this.
The code I've used is as follows
In the body:
<div class="container">
<div class="header"><span>Expand</span></div>
<div class="content">Here's the contents to be hidden under the expand button</div>
</div>
in the style sheet
.container {
width:100%;
}
.container div {
width:100%;
margin-bottom: 10px;
}
.container .header {
color: #000000;
cursor: pointer;
}
.container .header-expanded {
color: red;
cursor: pointer;
}
.container .content {
display: none;
background-color: #FFFFFF;
color: #333333;
}
and here's the Javascript
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Could someone please show me how to make the "collapse" text appear in red when the div is expanded? Sorry if this is obvious I'm very new to this.
thanks.
You can use .toggleClass(className, state)
A boolean value to determine whether the class should be added or removed.
Declare a CSS class,
.redColor {color : red}
Code
$header.toggleClass('redColor', $content.is(":visible"))
I have several underlaying divs with hover effect. Sometimes I need to show modal dialog and all undelaying divs should be "disabled". This is done by placing semi-transparent high z-index div on top of them, but the problem is that hover effect on underlaying div stays until I move my mouse. Is there a way to "unhover" underlaying divs when overlaying semi-transparent div becomes visible?
Simplified exanple
HTML:
<div class="somediv"></div>
<div id="modal"></div>
CSS:
#modal {
z-index: 1000;
background:#000;
position:fixed;
top:0; left:0;
width:100%;
height:100%;
display: none;
opacity: 0.3;
}
.somediv {
position: absolute;
left: 20px;
top: 20px;
width: 100px;
height: 100px;
background-color: red;
}
.somediv:hover {
background-color: blue;
}
JS:
setTimeout(function(){
$("#modal").show();
}, 5000);
Hover over square and wait 5 seconds.
It should work: http://jsfiddle.net/rjLhj/
When you open a modal (in JS), just add a class to your .somediv ('.no-hover', for example). In CSS, change your .somediv:hover to .somediv:not(.no-hover):hover.
I don't know about compatibility... So, you should test :P
JS:
setTimeout(function(){
$("#modal").show();
$('.somediv').addClass('no-hover')
}, 2000);
CSS:
.somediv:not(.no-hover):hover {
background-color: blue;
}
Update:
http://caniuse.com/#feat=css-sel3
It works on IE9+, FF3.5+ and Safari3.1+... But you can use Attribute Selectors for reach the same result.
HTML:
<div class="somediv" data-nohover="0"></div>
<div id="modal"></div>
CSS:
.somediv[data-nohover="0"]:hover {
background-color: blue;
}
JS:
setTimeout(function(){
$("#modal").show();
$('.somediv').attr('data-nohover','1')
}, 2000);
Or better, add one class to your somediv ('hashover', for example), remove it on modal open and define your css like this:
.somediv.hashover:hover {...}
Unfortunately the browser wont pick up mouse events until the mouse is moved...
The best way to deal with this is to create a new class that overrides the hover behaviour and apply this at the same time as you show the modal.
im building a navigation and i want to add some functions.
On click on a div the navigation background color fades then the active button fades the color but when i click on another menu button the color from the previous button is actually there ... i want that only the acutally button fades the color and the background from the navigation and the previous removes the color
$('.re').click(function() {
$('.re').removeClass('active');
$(this).addClass('active');
});
$("#home0").click(function() {
$("#navigation").stop().animate({"backgroundColor":"grey"}, 800);
$(".active").stop().animate({"backgroundColor":"green"}, 800);
});
$("#home1").click(function() {
$("#navigation").stop().animate({"backgroundColor":"black"}, 800);
$(".active").stop().animate({"backgroundColor":"green"}, 800);
});
$("#home2").click(function() {
$("#navigation").stop().animate({"backgroundColor":"grey"}, 800);
$(".active").stop().animate({"backgroundColor":"green"}, 800);
});
This is my Code but it doesn't work :/
EDIT: Here is my Fiddle: Fiddle Demo
Since you are changing the color with javascript instead of CSS you need to remove the style attribute together with the active class..
$('.re').removeClass('active').removeAttr('style');
Demo at http://jsfiddle.net/gaby/tqYrT/3/
But you should really handle this with CSS and transitions.. (see Using CSS transitions)
I suggest using CSS Transitions to animate changes to CSS. Here's an example:
HTML:
Here, I am storing the desired nav background color as a custom data attribute (data-navbg):
<div id="navigation">
<div class="box" data-navbg="gray"></div>
<div class="box" data-navbg="black"></div>
<div class="box" data-navbg="gray"></div>
<div class="box" data-navbg="black"></div>
<div class="box" data-navbg="gray"></div>
</div>
JQUERY:
Here, when clicking a box, all boxes are set to not active, the clicked box is set to active, and the nav background is set to the desired color specified by the navbg attribute of the clicked box.
$('.box').click(function () {
var navbg = $(this).data('navbg');
$('.box').removeClass('active');
$(this).addClass('active');
$('div#navigation').css('backgroundColor', navbg);
});
CSS:
Here, the first definition applies CSS transitions to both the nav and the boxes:
#navigation, .box {
-moz-transition:0.25s;
-webkit-transition:0.25s;
-o-transition:0.25s;
transition:0.25s;
}
#navigation {
background-color: black;
height:60px;
width: 600px;
margin: 0 auto;
}
.box {
width: 60px;
height: 60px;
float: left;
background-color: #787878;
margin-right: 5px;
cursor: pointer;
}
.box.active {
background-color: green;
}
Working Example (jsFiddle)