I'm trying to open and close a drawer using jQuery/JavaScript to change the drawer's height from 25px (where it is hidden behind another element) to 250px where it pops open and is visible. I have an up-arrow that acts as a button. It switches class to become a down-arrow as the drawer opens. Every thing in the up-arrow portion of the code works. For some reason the down-arrow part is not working and the drawer won't close. I have a sneaking suspicion that this is because I'm trying to add a click event to a class that has not yet been added to the DOM, but I'm not sure if that's right. Even if that is right I don't know how to fix it. Any ideas?
$('.arrow-up').click(function() {
$('.portfolio-details').css('height',250);
$('.portfolio-details h2 span').removeClass('arrow-up');
$('.portfolio-details h2 span').addClass('arrow-down');
});
$('.arrow-down').click(function() {
$('.portfolio-details').css('height',25);
$('.portfolio-details h2 span').addClass('arrow-up');
$('.portfolio-details h2 span').removeClass('arrow-down');
});
Try event delegation, since you are working with dynamic selector values
$(document).on('click', '.arrow-up', function() {
$('.portfolio-details').css('height',250);
$('.portfolio-details h2 span').removeClass('arrow-up');
$('.portfolio-details h2 span').addClass('arrow-down');
});
$(document).on('click', '.arrow-down', function() {
$('.portfolio-details').css('height',25);
$('.portfolio-details h2 span').addClass('arrow-up');
$('.portfolio-details h2 span').removeClass('arrow-down');
});
Related
On our mobile site, when clicking the hamburger icon in the top right I want the drop-down menu to appear and be scrollable, without the background scrolling. I have written javascript to set the body to fixed when you click the menu icon, however, this results in the website jumping to the top of the page. This is not what I want, I would like for it so that when the user clicks on the menu button, the background page stays where it is and does not jump to the top.
Below is the code that I have already tried for this.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("body").toggleClass("noScroll");
});
});
CSS
.noScroll {
position: fixed;
}
EDIT Here is the website: http://s2br5s5r3.gb-02.live-paas.net
href="#" makes page going top, give correctly url ex: href="https://www.google.com/" then the problem of going top will be solved.
css
.noScroll {
overflow: hidden;
/* position: fixed */
}
javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
then the <body> will be unscrollable.
first of all remove the css position fixed from the class no-scroll. That's what is causing the page to jump on top when you click the menu button. After you open the menu it is scrollable as it should, i assume what you want is to prevent the page behind the open menu to be scrolled when the menu is open. Ypu can achieve this with javascript event listeners like so:
EventTarget.addEventListener('scroll', noscroll);
instead of EventTarget give the body an id and use the event listener to that when the user clicks on the element, but then when they close the menu you should remove the event listener with:
EventTarget.removeEventListener()
I hope this helps you
Keep in mind though that you have to separate the content of the page from the menu, because if you add the no scroll to the body that will apply also to the menu as long as it is a child of the body
I have set a popup to open at mouse over on an element. The popup should close when the cursor is off it.
For some reason the popup window closes when the cursor is right off its opener button, instead.
You can see an example here:
http://www.friends.wwz.co.il/Lab/Gefen/Generali/es/popup.html
Please try to hover with the mouse on the "lee mas" button. A popup will open. It should close at hovering off it. But instead it closes at hovering off the lee mas button, so it closes immediately.
Any idea where do I go wrong?
Many thanks in advance for you advice
The main problem is you are attaching hover events to the button. Once you hover out of the button element, it fires the hoverOut button.
So the ideal course of action can be:
Bind hover event to the button.
Once hovered, a pop-up is dynamically added.
Then, a hover event is bounded to the pop.
And the code of dissolving the pop-up is attached in the hover-out function.
So that when actually the cursor is hovered out of the pop-up it dissolves.
Apart from that, Just have a look at this fiddle. It has two hyperlinks for hover. The first is the one you are facing. The second one is the one you are looking for. :D
Code for it:
$(document).ready(function() {
$("#toggleSwitch_j").hover(
function() {
$("#theBox_3").slideDown(500);
}, function() {
$("#theBox_3").slideUp(500);
});
$("#StayOpen").hover(
function() {
$("#theBox_2").slideDown(500);
}, function() {
$("#theBox_2").slideUp(500);
});
});
body {
background-color: #eef;
}
#theBox_3,
#theBox_2 {
display: none;
border: 1px solid #000;
width: 200px;
height: 100px;
background-color: #ddf;
}
#toggleSwitch_j,
#StayOpen {
background-color: #cacaca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This layout will only keep the hidden div visible as long as you point to the link
<br>You'll never be able to reach anything inside the div
<br>jQuery Hover
<div id="theBox_3">Peek-a-boo!</div>
<hr>This layout puts the link and hidden div inside a wrapper - hovering anywhere inside the wrapper expands the hidden div, so you can reach content inside it. This would be handy if you need to put links or form elements inside the hidden div, instead of
just text to read.
<div id="StayOpen">
jQuery Hover
<div id="theBox_2">Peek-a-boo!</div>
</div>
I'm brand new to javascript, so the problem might actually lie in how much I know or how to word searches for this, but I haven't found the same problem anywhere else:
When making a set of tabs with script, they works fine, but the scrollbar will stay the same on each tab. For example, if I go to the second tab and scroll all the way down and then click on the third tab, instead of going to the top, it will stay at the bottom because that's where it was on the second tab.
This is what I'm working with: http://jsfiddle.net/z7uxfbws/
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault(e);
});
});
If you could explain what the problem is, how to fix it, and why it works, that would be absolutely wonderful.
Thank you for taking the time to read!
The scrollbar is on the parent element, .tab-content.
The elements that are being manipulated (hidden/shown) are the children elements, .tab.
Therefore the scrollbar on the parent element is always there. Thus, when switching tabs, the scrollbar's position doesn't change.
In order to work around this, you could move the scrollbar to the children elements rather than the parent.
Updated Example
.tab {
display: none;
overflow: auto; /* Moved this from the parent element */
height: 100%;
padding: 10px; /* This *was* on the parent element, too. */
box-sizing: border-box; /* Include the padding in the
element's width/height calculations */
}
... alternatively, you could also just scroll .tab-content's scrollbar to the top each time a tab is changed.
Updated Example
$('.tab-content').scrollTop(0);
I have the follwing so far: jsFiddle
Just a small script that pops out list elements
$(function() {
$("li.content").hide();
$("ul.nav").delegate("li.toggle", "click", function() {
$(this).next().slideToggle("fast").siblings(".content").slideUp("fast");
});
});
I am trying to figure out how I can align the box that slides out when you click "about" to the bottom of the outer div as it is with the "contact" box. Contact should also stay pinned to the bottom as well.
Can I achieve this without having to modify the javascript purely by changing the css, or do I have to make different toggle functions for both boxes?
Thank you all, much appreciated.
All you have to do is add this to your .content.
jsFiddle
.content {
position: absolute;
bottom: 0;
}
I have two elements on top of each other. When I click a button on the first div, the second div opens on top of the first div, and what I want to do is to make the underlaying div non-interactive (That I can't click on anything on the underlaying-div as long as the overlaying-div is open).
Javascript code:
$('#button').live('click', function()
{
$('#underlaying-div).fadeTo("fast", 0.7);
$('#overlaying-div).css('display', 'block');
//Do something here to make the underlaying div unclickable
});
$("#overlaying-div").live("click", function() {
$(this).hide();
$('#underlaying-div).fadeTo("slow", 1.0);
//Do something here to make the underlaying div clickable again
});
CSS-code:
#overlay-div
{
position:absolute;
left:0;
top:0;
display:none;
z-index: 20000;
}
I know I can use event.preventDefault() to make sure nothing happens if you click on an element in the underlaying-div, but I'd rather want that nothing happens at all when you for instance hover over an button (with preventDefault(), hover and other stuff still happens).
Any other ways in CSS or javascript/JQuery that can fix this problem??
Not sure of your final product, but if the underlaying div get overlapped by the overlaying in a way that the underlaying div is not visible anymore you could just display:block; the underlaying div.
This is a very old question, but if someone happens upon it, you might find it useful to toggle the pointer-events CSS property of the object you want to disable. You won't need to manually remove click bindings or add any other wrappers. If an object has pointer-events set to 'none', no events will fire when it is clicked.
In jQuery:
$('#underlaying-div).css('pointerEvents', 'none'); // will disable
$('#underlaying-div).css('pointerEvents', 'auto'); // will reenable
You could use unbind to remove the click event handler like this:
$(this).unbind('click'):
My concern is if this works with a live bind but you should at least try it :)
Why don't you use jQuery .fadeIn() and .fadeOut() functions? You have two divs with id="div1" and id="div2" and you have a button in div1 with id="button1" and a button in div2 with id="button2".
CSS code:
#div1 {
//some CSS code without z-index
}
#div2 {
//some CSS code without z-index
visibility:hidden;
}
jQuery code:
$('#button1').click(function(){$('#div1').fadeOut('slow', function(){$('#div2').fadeIn()})})
$('#button2').click(function(){$('#div2').fadeOut('slow', function(){$('#div1').fadeIn()})})