I have a <ul> drop down list and all works fine but I'm wondering if it's possible to make the list "retract", so essentially disappear back to it's original state when you click off away from it?
FIDDLE
Here is the code that I acquired to make the drop down work. I'm no good with JS so I don't know what I would need to do or if it's possible to get what I'm after.
$(function(){
$('#select').click(function(){
$('#sel-option').show();
});
$('#sel-option a').click(function(e){
$('#select').text($(this).text());
$('#sel-option').hide();
$(this).addClass('current');
e.preventDefault();
})
})
yes, you just have to handle body click event and prevent select click from bubbling (in other case you will not be able to open it)
$(function(){
$('#select').click(function(event){
$('#sel-option').show();
event.stopPropagation();
});
$('#sel-option a').click(function(e){
$('#select').text($(this).text());
$('#sel-option').hide();
$(this).addClass('current');
e.preventDefault();
})
$('body').on('click', function(){
$('#sel-option').hide();
});
})
UPDATED: and working fiddle: http://jsfiddle.net/Tpf7E/239/
try this
$(function(){
$(document).click(function (e)
{
var container = $(".language");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$('#sel-option').hide();
show = 0;
}
});
var show=0;
$('#select').click(function(){
if(show==0)
{
$('#sel-option').show();
show = 1;
}
else
{
$('#sel-option').hide();
show = 0;
}
});
$('#sel-option a').click(function(e){
$('#select').text($(this).text());
$('#sel-option').hide();
$(this).addClass('current');
e.preventDefault();
});
});
see FIDDLE
Related
I am trying to display menu (#lorem-ipsum-wrapper) when the div (#content) is focused, and again hide the menu if neither the div or the menu is clicked.
js:
$(document).ready(function() {
console.log('ready');
$('#content').on("focus", function(event) {
$('#lorem-ipsum-wrapper').css("display", "block");
event.stopPropagation();
});
$(document).on("click", function() {
$('#lorem-ipsum-wrapper').css("display", "none");
});
});
demo at codepent.io
But the problem is that as soon as the #content is in focus, the menu displays and then again hides itself. Isn't the stopPropagation() method used to stop this? What am I doing wrong? Your help will be very much appreciated. Thank you.
Does this help ?
$(document).click(function(e) {
var e = $(e.target), eid = e.attr("id");
if (!e.parents("#lorem-ipsum-wrapper").length && !e.parents("#content-wrapper").length && eid !== "content-wrapper" && eid !== "lorem-ipsum-wrapper") {
$('#lorem-ipsum-wrapper').css("display", "none");
}
});
or you can use blur event :
$('#content').on("focus", function(event) {
$('#lorem-ipsum-wrapper').css("display", "block");
});
$('#content').on("blur", function(event) {
$('#lorem-ipsum-wrapper').css("display", "none");
});
If I didn't misunderstand, you want to hide #lorem-ipsum-wrapper if #content is not clicked and show the #lorem-ipsum-wrapper on click of #content. Then, your code should be:
$(document).ready(function() {
console.log('ready');
$('#lorem-ipsum-wrapper').css('display','none');
$('#content').on("focus", function(event) {
$('#lorem-ipsum-wrapper').css('display','block');
});
$('#content').on("blur", function() {
$('#lorem-ipsum-wrapper').css("display", "none");
});
$('#lorem-ipsum-wrapper').on("click",function(){
$(this).css("display","block");
});
Explanation:
The third lines ensures that the lorem-ipsum-wrapper is not show before executing any code.
The fourth and fifth lines make the #lorem-ipsum-wrapper visible whenever the focus is on the #content.
The seventh and eighth lines make the lorem-ipsum-wrapper hidden whenever the users clicks somewhere else on the page or make the #lorem-ipsum-wrapper lose focus.
I have made a nav that opens when you click at the .products link and closes if you click anywhere on the screen. But it seems that if you click on the .product link when it is already open, it will not close. How can I do this?
$('#subnav').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('.products').length ) {
$("#subnav").show();
}else if ( ! $(e.target).closest('#subnav').length ) {
$('#subnav').hide();
}
});
Demo
js
$("#subnav").hide();
$(".products").click(function (e) { //the usual behavior on click on .prducts
$("#subnav").toggle();
e.stopPropagation();
});
$("#subnav").click(function (e) { //ensures the #subnav will not hide on click on it
e.stopPropagation();
});
$(document).click(function () { //ensures the #subnav will hide on click on document
$("#subnav").hide();
});
You need a click event on the document to hide the block and a click event on the button to show the block. And in the event of the button, you need to stop the propagation of the document's event.
Like that :
$("div").hide();
$("button").bind("click",function(e){
e.stopPropagation();
$("div").toggle(200);
});
$(document).bind("click",function(){
$("div").hide(200);
});
Assuming your code looks like that :
<div></div>
<button>open</button>
See example : http://jsfiddle.net/oqgpceod/1/
Aditionnaly you may add this code to prevent the block from hiding when you click on it :
$("div").bind("click",function(e){
e.stopPropagation();
});
Fiddle: http://jsfiddle.net/r2h57jhu/
$(document).ready(function () {
$('#subnav').hide();
$(document).click(function(e) {
$('#subnav:visible').hide();
});
$('.products').click( function (e) {
$('#subnav:not(:visible)').show();
e.stopPropagation();
});
});
I have a working clickevent handler (don't know if it's the right word for it) on a page which uses show/hide (like tabs) if you click on one of the on-page links. This works perfectly, but now I walk into another issue.
When I link to one of the tabs from a different page, eg. /page-slug/#tabtoshow it won't show the right tab, it just shows the first (open) tab. I want it to show the right tab when a URL contains the same id, eg #tabtoshow. The tabs will have the same id as the link.
This is my current script.
$(function() {
$(".elevator a").click(function(evt) {
evt.preventDefault();
});
});
$(document).ready(function() {
$('a[href="#ondernemen"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#ondernemen').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#groeien').slideUp(1000);
$('#spelen').slideUp(1000);
});
$('a[href="#groeien"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#groeien').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#ondernemen').slideUp(1000);
$('#spelen').slideUp(1000);
});
$('a[href="#spelen"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#spelen').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#groeien').slideUp(1000);
$('#ondernemen').slideUp(1000);
});
$('a[href="#ontdekken"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#ontdekken').slideDown(1000);
$('#spelen').slideUp(1000);
$('#groeien').slideUp(1000);
$('#ondernemen').slideUp(1000);
});
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
})
$('a[href="#ontdekken"]').parent('.label').addClass("active");
});
Thanks in advance!!
If you're moving to another physical page, not a virtual page, you will need to handle the hash on the new page. You'd need to access location.hash or location.pathname and do something based on the hash value. You could handle it similarly to this:
$(document).ready(function() {
displayTab(location.hash);
});
Your code had some repetition, I have written a more general version for you. Also, I have used location.hash to determine what tab to activate.
$(document).ready(function() {
var selector = "#ondernemen, #ontdekken, #groeien, #spelen";
$(".elevator a").click(function(evt) {
evt.preventDefault();
});
$(selector).click(function() {
var that = this;
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$(selector).each(function() {
if ($(this).attr("id") !== $(that).attr("id")) {
$(this).slideUp(1000);
}
});
$(this).slideDown(1000);
});
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
});
$(location.hash).parent('.label').addClass("active");
});
CODE:
<script type="text/javascript">
$(document).ready(function() {
$('.show_or_hide_link_clicker').click(function() {
$(".the_box_to_show").fadeIn(400);
});
});
</script>
When show_or_hide_link_clicker is clicked the_box_to_show is shown. How do I hide it if show_or_hide_link_clicker is clicked again or when the user clicks away?
Update: This is what I am doing now: http://jsfiddle.net/nFbnr/
Question: How can i remove the double click requirement ot show the div?
jQuery Toggle is what you're looking for.
$('.the_box_to_show').toggle();
When clicking anywhere, check if the element was on the propagation path. If not, the user clicked outside of it so you can hide it.
$(document).click(function(e) {
if ($(e.target).closest(".the_box_to_show").size() === 0) {
$(".the_box_to_show").hide();
}
});
http://jsfiddle.net/vdHAu/
$(document).click(function(e) {
if (!$(e.target).is(".the_box_to_show")) {
$(".the_box_to_show").hide();
}
});
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(".the_box_to_show").fadeIn(400);
});
An another way without delegate event to document level:
you have to set attribute tabindex to the box and CSS outline for style
http://jsfiddle.net/GV56b/
$(document).ready(function () {
$('.show_or_hide_link_clicker').click(function () {
$(this).hide();
$(".the_box_to_show").fadeIn(400, function () {
this.focus()
});
});
$(".the_box_to_show").on('blur',function(){
$(this).hide();
$('.show_or_hide_link_clicker').fadeIn(400);
});
});
check this out
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(this).addClass('active);
$(".the_box_to_show").fadeIn(400);
});
$(document).on('click', 'html', function(){
$(".the_box_to_show").fadeOut(400);
});
$(document).on('click', '.active', function(e){
e.stopPropagation();
});
Does anyone know how to select any element (possibly on click) on page like body is selected, div is selected, div#foo etc... so i can place it to some variable and edit it later on.
i've tried
$("*", document.body).click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0);
alert("Clicked on - " + domEl.tagName);
});
but it's not working for all elements
You want to get the target property of the event:
$(document).click(function(e) {
e.stopPropagation();
var domEl = e.target; // or $(e.target) to jQuerytize it
alert("Clicked on - " + domEl.tagName);
});
See: http://www.quirksmode.org/js/events_properties.html
Demo: http://jsfiddle.net/karim79/dyHEA/
Try this.
$(function(){
$("*").click(function () {
console.log($(this));
return false;
}
);
});