I have a very difficult client that is demanding that a jquery toggle closes when a user scrolls down the page, rather than automatically staying open / closing when a user collapses it...
would that be possible? My jquery is pretty simple...
$(document).ready(function() {
$('.nav-toggle2').click(function() {
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function() {
if ($(this).css('display') == 'none') {
//change the button label to be 'Show'
toggle_switch.html('Contact Us');
} else {
//change the button label to be 'Hide'
toggle_switch.html('Contact Us <');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tag href="#contactus" class="nav-toggle2">Contact Us <</tag>
<div id="contactus">some content that hides/shows here</div>
I can get around in jquery but am a little naive when it somes to integrating new effects into it.... would it be possible to have toggle_switch.html on scroll so when a user gets maybe 1/3 the page down, it hides?
Based on your comments you said you haven't tried listening to the scroll event. Can you try that?
It will be something like this (code not tested):
$(window).on("scroll", function(){
// you can replace this with your hiding toggle logic
$('.nav-toggle2').toggle('false');
});
You may want to unbind the event from the window later to avoid memory leak.
Reference about scroll: Jquery scroll api
Related
I am using toggle class for dd & dt it is working fine but my problem is if user click out side i want to close that toggle. How to achive this ?
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
jQuery=$.noConflict();
jQuery(document).ready(function() {
jQuery('.navigation dd').hide();
jQuery('.navigation dt').click(function(){
jQuery(this).next('dd').slideToggle('slow');
jQuery(this).toggleClass('glace_navigationlayer-collapsed');
});
});
</script>
You can also try -- what DBS has is proper, ( he posted in a comment ), imho.
//clicking on the body, closes the toggleitem
jQuery(document.body).bind('click.closedd', function() {
jQuery('.navigation dd').hide();
});
// clicking on the toggle item, won't trigger the click on the body
// that we set up above.
jQuery('.navigation dd').bind('click.closedd', function(e) {
e.stopPropagation();
});
You need to listen for clicks on the <body> and then check to make sure the target is outside of the navigation component.
jQuery('body').on('click', function(evt) {
var $target = $(evt.target);
if ( !$target.closest('.navigation').length ) {
// code to collpase the nav menu
}
});
I would also recommend refactoring your nav code to use separate expand and collapse functions instead of relying on slideToggle and toggleClass.
Good luck!
Not too sure about the requirements, but you can try achieving the above on mouseenter and mouseleave events.
However, if you have to implement the above functionality only on click, then you will have to wire the click event on a container that covers the entire html body.
So I'm building a small "UberMenu" feature for my main menu, and it works almost as I want, except that I want the UberMenu container to hide if the mouse is not over either
1) the UberMenu button, or
2) the UberMenu container
Right now, if you hover over the UberMenu button, the container shows up, and if you enter the UberMenu container, and then proceed to hover over another menu item, it hides.
This is what I want, however if I hover the UberMenu button, and then immediately hover over another menu item, the container remains open.
I've tried over a dozen different snippets, but I haven't found a solution.
I guess I need some if / else statement added to the code?
Can someone give me some guidance here? Much appreciated! :-)
This is the code I used:
//When mouse hovers UberMenu button, Show Container
$(".uber-menu-test").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".uber-menu-frame").show(800);
});
// If mouse hovers either the content area or the navbararea, hide UberMenu container again
$(".block-type-content, .navbararea").mouseenter(function() {
$(".uber-menu-frame").hide(800);
});
I found a solution on my own by adding a timer, I'm not sure how solid this piece of code is, but it does the trick as far as I can tell!
For anyone interested:
$(".uber-menu-test").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".uber-menu-frame").show(800);
});
var myTimer = false;
$(".uber-menu-test ,.uber-menu-frame").hover(function(){
//mouse enter
clearTimeout(myTimer);
},function(){
//mouse leav
myTimer = setTimeout(function(){
$(".uber-menu-frame").fadeOut(800);
},100)
});
Hope it helps,
$(".uber-menu-test").mouseenter(function(){
$(".uber-menu-frame").show(800);
}).mouseleave(function(){
$(".uber-menu-frame").hide(800);
});
I want to prevent scrolling of the body or html when user is scrolling inside the menu. However, I DON'T WANT to set $('html').css('overflow','hidden'); because this makes the entire document shift right. I just want to disable the HTML scroll when scrolling or swiping inside the menu. I tried to search this topic a lot, but nothing I found really worked for me.
FIDDLE
Set this when the menu is open:
var thisHeight = $(window).scrollTop();
$(window).on('scroll', function() {
$('html,body').scrollTop(thisHeight);
});
$('.noScroll').on('touchstart' , function(e) { e.preventDefault(); })
$('.noScroll').on('touchmove' , function(e) { e.preventDefault(); })
And this when it closes:
$(window).off('scroll');
$('.noScroll').off('touchstart');
$('.noScroll').off('touchmove');
$('.noScroll').on('touchstart' , function(){ return true; });
$('.noScroll').on('touchmove' , function(){ return true; });
You need to add a class="noScroll" in the text div for it, check FIDDLE.
iOS solution based on:
How to unbind a listener that is calling event.preventDefault() (using jQuery)?
JSFIDDLE: http://jsfiddle.net/m2ga2ygo/4/.
Uploaded test: https://liebdich.biz/develop/iosMobile.html.
i have a div in the middle of body tag
<div id="place">
</div>
what i want to do is, when i scroll down and come across the div with id "place", i want to show an alert.the logic i set is when the window scroll postion is greater than the div from the window top , i execute alert . i know that my logic is stupid ! but i want to learn how to do this .
what i have tried so far
$(window).scroll(function(){
var toElement = $("#place").position();
if(scroll.positon() > toElement){
alert("hello");
}
});
i am new to jquery, so could you help me
Try this:
$(window).scroll(function() {
var offset = $("#place").offset().top;
if ($(window).scrollTop() >= offset) {
alert("hello");
}
});
You can trigger an event from your script after you have made the div visible using the .trigger function
e.g
//declare event to run when div is visible
function isVisible(){
alert("hi");
}
//hookup event
$('#place').bind('isVisible', isVisible);
//show div and trigger custom event in callback when div is visible
$('#place').show('slow', function(){
$(this).trigger('isVisible');
});
I have a div containing some content, in which there are some links. The div itself watches for the click event so it can make the content editable. However, I want the user to be able to click the links inside of the div and have it navigate to the linked page rather than edit the content (clicking anywhere else in the div should edit the content though). How do I achieve this?
Code example:
<div id="content">
Here's a link.
</div>
// jQuery Javascript:
$("#content").click(function() {
// Make content editable
});
(Clicking on the link shouldn't make the content editable, and instead should direct the page to google.com.)
Edit: I'm using my own code to make the content editable (switching out the div with a text area, that sort of thing).
Check the event target and return true
$("#content").click(function(e) {
if ($(e.target).is('a')) {
return true;
}
});
Not tested
The thinking behind this is to bail-out early from the handler and, by returning true, allow the browser to handle the event the usual way.
One error you have is that you are using content as a class in your HTML, but as an ID in your jQuery. So you should change your HTML to id="content" (assuming no other elements on your page already have that id.
Your Javascript can look like:
$("#content").click(function(){
this.setAttribute('contenteditable', 'true');
$(this).focus();
}).blur(function(){
this.setAttribute('contenteditable', 'false');
});
$("#content a").click(function(e){
e.stopPropagation();
});
Here's a JSFiddle: http://jsfiddle.net/q77Bs/
example
use event.stopPropagation()
// jQuery Javascript:
$(".content").click(function(e) {
// make content editable
});
$('.content a').click(function(e) {
e.stopPropagation();
});
You could change the z-index of the link to be greater than that of the div (not sure if that will work), or you can place each link inside another div with a higher zindex than the main div. This will prevent clicks from registering on the primary div, so make sure the secondary divs are correctly sized so as not to prevent the editing functionality
$('#content a ').live("click", function(event){
event.stopPropagation();
});
this will do the trick