Im trying to make my jquery expand when clicked anywhere ( except the top left box ) and try to collapse when clicking only in the ( top left box )
http://jsfiddle.net/wzbAh/1/
HTML:
<div id="box">
<div class="collapsed container" >
<div class="nav" class="closed">0</div>
box 1 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
<div class="collapsed_content">
collapsed only content #1
</div>
</div>
<div class="collapsed container">
<div class="nav" class="closed">0</div>
box 2 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
</div>
<div class="collapsed container">
<div class="nav" class="closed">0</div>
box 3 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
</div>
</div>
JavaScript:
$("#box").delegate(".container", "click", function(e) {
$(this).addClass("expanded");
});
$("#box").delegate(".container.expanded .nav ", "click", function(e) {
$(this).addClass("collapsed");
});
Seems to be almost there but not quite, what would be the right way to do it? Since toggle seems not the option here.
Here you go mate...
$("#box").delegate(".container", "click", function(e) {
if ($(e.target).hasClass("container")) {
$(this).addClass("expanded");
}
});
$("#box").delegate(".container.expanded .nav", "click", function(e) {
$(this).parent().removeClass("expanded");
e.stopPropagation();
});
The class "collapsed" is never removed so to remove the expanded state you need to use removeClass("expanded"), so it goes back to its initial state. Also, when the .nav element is clicked, the div you want to affect is the parent.
Finally, e.stopPropagation() stops the click firing both event handlers and removing the class and then adding it again.
Here's a working jsfiddle...
http://jsfiddle.net/wzbAh/11/
$("#box").delegate(".container", "click", function(e) {
if (!$(e.target).is("div.nav")) {
$(this).addClass("expanded");
}
});
$("#box").delegate(".container .nav ", "click", function(e) {
$(this).parent().removeClass("expanded").addClass("collapsed");
});
http://jsfiddle.net/jensbits/wzbAh/9/
Related
I have multiple sidepanels linked to multiple buttons on my page.
Basically, when I click one button one panel should open and when I click the second button, the first panel should close and second panel should be opened.
I have 9 such panels.
Currently using jQuery to achieve it also this is how I used the sidepanel https://codyhouse.co/demo/slide-in-panel/index.html
If anyone can help it would be great.
<div class="cd-panel from-right">
<header class="cd-panel-header">
Close
</header>
<div class="cd-panel-container">
Content
</div>
</div>
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
Button
<i class="glyphicon glyphicon-plus-sign cd-btn" id="nvv-i"></i>
You can achieve this with some jQuery, I've tried to write the below to be as dynamic as possible, utilising the data-* attribute.
I've taken the code from the article you provided, but looks like some of the CSS is missing from that article..
Edit: Using the code you've provided...
jQuery(document).ready(function($) {
//open the lateral panel
$('.cd-btn').on('click', function(event) {
// close any previously opened panels
$('.cd-panel').removeClass('is-visible');
// get the number of the panel to show from the data-panel attribute on the button
var panelToShow = $(this).data('panel');
event.preventDefault();
// add the is-visible class to the panel with the data-panel attribute value matching that of the button
$('.cd-panel[data-panel="' + panelToShow + '"]').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event) {
if ($(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close')) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
.cd-panel {
visibility: hidden
}
.is-visible {
visibility: visible
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cd-panel from-right" data-panel="1">
<header class="cd-panel-header">
Close
</header>
<div class="cd-panel-container">
Panel 1
</div>
</div>
<div class="cd-panel from-right" data-panel="2">
<header class="cd-panel-header">
Close
</header>
<div class="cd-panel-container">
Panel 2
</div>
</div>
<i class="glyphicon glyphicon-plus-sign cd-btn" id="nvv-i" data-panel="1">Show Panel 1</i><br />
<i class="glyphicon glyphicon-plus-sign cd-btn" id="nvv-i" data-panel="2">Show Panel 2</i>
By adding the other sidepanels classes to remove class $('.cd-panel-a').removeClass('is-visible');
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
$('.cd-panel-a').removeClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
I have parent div with class a "very-big-div" that nests another "container-div" that by its turn also nests another child divs. The very big div's made to act like a button and the div that come right after it is a container that appears when I click the very big div.
<div class="very-big">
<div class="container">
<!-- Some other more nested divs that has anchors and buttons -->
<div class="friend-request">
<div class="button-div">
<button class="accept">Trigger</button>
<button class="refuse">Trigger</button>
</div>
</div>
</div>
</div>
The problem is 2 things first: the css problem has not yet been solved
I assigned a hover pseudo class for the "very-big-div", and whenever I hover the "container-div" the hover properties(background-color) is applied to the "very-big-div". This is not what I intend to make, I want to only hover "very-big" div for the hover to apply.
.very-big{
background-color:green;
}
The second problem is : I have a jquery that deals with the container so it is toggled on/off by the "very-big-div"
$(document).ready(function(){
$("#container-div").hide();
$("#very-big-div").click(function(){
$("#container-div").toggle();
});
});
the container has both anchor and button tags whenever I click the an anchor or a button inside the container it is toggled to close itself, and that is not what I want, what I want is just when I only press the "very-big-div" the toggle is activated.
Same as #Jhecht has given the answer, I have just inherited his to mine.
You can stop propagation of the click of child element that trigger toggle by using target and excluding all the child elements of your .very-big container as:
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
Code Snippet:
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>
This works for me, but I am not sure if it is what you need.
Please add in the minimum HTML, CSS, and Javascript needed to fully recreate the error you are seeing.
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
console.log(e);
var current = $(e.toElement);
if (current.is('.container')) {
e.stopPropagation();
return false;
}
$('.container').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>
I have a homepage with 4 buttons. When hovered over a button, a menu appears behind the buttons. When you hover over another button, a different colored menu appears in it's place.
Currently, I can get the buttons to show the menus, but when I hover onto the menus (and hover off the button) I lose the menu.
Here's my simple code:
Jquery at top:
$(".mybutton").hover(
function () {
$(".mybox").fadeIn();
},
function () {
$(".mybox").fadeOut();
}
);
$(".mybutton2").hover(
function () {
$(".mybox2").fadeIn();
},
function () {
$(".mybox2").fadeOut();
}
);
And my HTML:
<div class="mybox">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
<div class="buttons">
<div class="mybutton">
/* Button image here */
</div>
<div class="mybutton2">
/* Button 2 image here */
</div>
</div>
So I need some way to keep the box that fades in active when it is hovered over. I was thinking of not doing the callback for the fadeout, and somehow only doing the fadeout if they fade off the .mybox DIV or if they hover over another button. But it's a little unclear to me how to accomplish that.
Thanks in advance.
you need to include your menu and the button inside a container and have a hover event on the container. this way your menu will be visible as long as you're hovering over the container.
here's what you need to do.
declare the container like this with your menu and button both inside it.
<div id='container'>
<div class="mybox box">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
<div class="buttons">
<div class="mybutton">
/* Button image here */
</div>
</div>
</div>
here's what you need to do in jquery.
$(document).ready(function() {
$("#container").hover(
function() {
console.log($(".mybox").fadeIn());
$(".mybox").fadeIn();
},
function() {
$(".mybox").fadeOut();
}
);
});
here's a working JSFIDDLE with 2 buttons
It's because you're no longer hovering over the button and instead going to a different element "mybox" so you could rearrange the html structure for it to work by keeping the menu in the button class like so:
<div class="buttons">
<div class="mybutton">
/* Button image here */
<div class="mybox">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
</div>
</div>
this should keep the menu active as long as the curser is in there.
I don't recommend this as a UI design pattern for various reasons (one of them being the complexity of implementing it); you could instead consider changing it so that the menu appears when the user clicks.
Having said that, here's a way to do it. Get rid of your existing fadeOut() calls and add this:
$("body").on("mousemove", function(e) {
var $hovered = $(e.target);
var $myButton = $(".myButton");
var $box = $(".myBox");
if ( $hovered.is( $myButton ) ) return;
if ( $hovered.is( $box ) ) return;
if ( $.contains( $box.get(0), $hovered ) ) return;
$box.fadeOut();
});
...and similar for button2. The basic principle is this - whenever the mouse moves, we check whether the mouse is hovering over the button, or the box, or over an element contained in the box (using $.contains()). If not, we hide the box.
I want to move some h3 tags from top div to bottom div and the opposite via click event.
Everything works just fine until I click on a recently moved element to see the opposite action.
For example, I click on Item 1. it goes to bottom div. Again click on Item 1, it doesn't work. Why?
$("document").ready(function() {
$("div#top h3").click(function(e) {
$(e.target.tagName + "#" + e.target.id).detach().appendTo("div#down");
});
$("div#down h3").click(function(e) {
$(e.target.tagName + "#" + e.target.id).detach().appendTo("div#top");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top">
<h1>Top</h1>
<h3 id="th3-1">Item 1</h3>
<h3 id="th3-2">Item 2</h3>
<h3 id="th3-3">Item 3</h3>
</div>
<div id="down">
<h1>Down</h1>
<h3 id="dh3-1">Item 4</h3>
<h3 id="dh3-2">Item 5</h3>
<h3 id="dh3-3">Item 6</h3>
</div>
Since you want to have dynamic behavior based on the location of the element, you need to use event delegation
jQuery(function ($) {
$("#top").on('click', 'h3', function (e) {
$(this).appendTo("#down");
});
$("#down").on('click', 'h3', function (e) {
$(this).appendTo("#top");
});
});
Demo: Fiddle
You need to tell it to determine where the H3 is onclick and move accordingly.
$("document").ready(function() {
$("div > h3").click(function(e){
if($(this).parent().attr('id') == 'top')
$(e.target.tagName+"#"+e.target.id).detach().appendTo("div#down");
else
$(e.target.tagName+"#"+e.target.id).detach().appendTo("div#top");
});
});
Here's a demo.
I got some HTML structure like this:
<div id="mobileWrapper" class="ios">
<div class="hoverWrapper">
<div class="acvCouponPreviewWrap clearfix">
<div class="previewLeft">
<span class="previewLeftInner"> 10% </span>
</div>
<div class="previewRight">
<span class="previewUser"> Some Text here </span>
</div>
</div>
<!-- clone will placed here -->
</div>
<div class="hoverWrapper">
<div class="acvCouponPreviewWrap clearfix">
...
</div>
<!-- clone will placed here -->
</div>
<div class="hoverWrapper">
<div class="acvCouponPreviewWrap clearfix">
...
</div>
<!-- clone will placed here -->
</div>
</div>
Now when I'am hovering the .hoverWrapper Items, I want to clone the hovered Item and place it bigger over the hovered Item. Okay, so far this is working. Problem here is a flickering effect while hovering. Some help would be gracefull!
http://jsbin.com/oJeDUmU/2/edit
I tried this, but does not what I want:
if ($(this).parent().find('.hoverWrapper')) {
if ($(this).find('.previewActive')) {
return false;
}
}
It's because you're inserting the cloned item outside of the .hoverWrapper. The instant you move your mouse the script detects that you're no longer hovering over it so it removes the clone. Then it detects you're hovering again so it inserts it again, then detects it again, and so on.
All you have to do is insert the clone inside the wrapper.
hoveredItem.before(cloneItem);
//change to this line
hoveredItem.append(cloneItem);
http://jsbin.com/oJeDUmU/4/edit
The flickering is caused by the fact that, as soon as you display the cloned item, you hover out of the original item. Then the clone disappears, and you've hovered in again.
You can fix this by changing your code so that you mouseenter the original element but mouseleave the clone:
$(document).ready(function () {
$("div.hoverWrapper").on('mouseenter', function () {
console.log('enter');
var hoveredItem = $(this);
var position = hoveredItem.offset().top - $('#mobileWrapper').offset().top - hoveredItem.height() / 2;
var cloneItem = $(this)
.clone()
.addClass('previewActive')
.css('top', position)
.css('left', '-34px')
.on('mouseleave', function () {
console.log('leave');
$(this).fadeOut(300, function () {
$(this).remove();
});
$(this).remove();
});
$('#mobileWrapper').find('.previewActive').remove(); // remove other boxes
hoveredItem.before(cloneItem);
});
});
http://jsbin.com/oJeDUmU/16/edit