i have this side tab panel where i when i click on it, it will activate a external div, during that time, i want the underlying div to have all their events like hover over dropdown menu deactivated and stuff, basically they can't click on the underlying div to change page while the popup div activated.
This is my fiddle: http://jsfiddle.net/10xr2uah/ , for now i only changed the opacity, but user still can hover over the dropdown and change page while popup panel is on, i tried stuff like
$(".container").attr('disabled', 'disabled'); but it doesn't work
Also i have
$(function() {
$("#toggle").click(function() {
$(".log").html("panel sliding out");
$("#toggle_content").animate({width:'toggle'},350);
$(".container").css("opacity", 0.3);
$(".container").click(function() {
$(this).unbind("click");
$(".log").html("panel hide success");
$("#toggle_content").hide();
$(".container").css("opacity", 1);
});
});
});
how can i edit the code so that when i click on the tab, it will open, and when i click on it again, it will close with opacity returning to normal?
In case you are confused, basically i am trying to solve:
1) how to disable background div(disable dropdown expanding on hover) while popup div is activated
2) how to click on the tab again to return everything to normal.
You can use container's pseudo element :before to make a visual overlay. This way you don't have to add new elements to HTML:
.container.overlay-disable:before {
content: '';
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(220, 220, 220, .6);
}
JS:
$("#toggle").click(function () {
$(".log").html("panel sliding out");
$("#toggle_content").animate({
width: 'toggle'
}, 350);
$(".container").addClass("overlay-disable");
$(".container").click(function () {
$(".log").html("panel hide success");
$("#toggle_content").hide();
$(".container").removeClass("overlay-disable");
});
});
Demo: http://jsfiddle.net/10xr2uah/3/
when i have s similar situation i created a simple overlay that covers the tab panel and stops triggering events over the tab
HTML
<div class="container">
<div class="overlay"></div> // create a overlay
<div class="log_container sixteen columns">
<p class="two column">Log:</p>
JS
$(function () {
$("#toggle").click(function () {
$(".log").html("panel sliding out");
$("#toggle_content").animate({
width: 'toggle'
}, 350);
$('.overlay').show();
});
});
CSS
.overlay {
position: absolute;
top: 0px;
left: 0px;
width: 960px;
height: 65px;
z-index: 100;
display: none;
opacity: 0.7;
background-color: white;
}
UPDATED FIDDLE
Try this:
http://jsfiddle.net/10xr2uah/2/
HTML
<div class="mask"></div>
CSS changes
.mask{
background:rgba(255,255,255,0.3);
position:absolute;
left:0;
right:0;
top:0;
display:none;
}
And changes for JS are as follows
$(function() {
$('.mask').height(parseInt($('.log_container').height()+$('#navigation').height()));
$("#toggle").click(function() {
$(".log").html("panel sliding out");
$("#toggle_content").animate({width:'toggle'},350);
$('.mask').show();
$(".container").click(function() {
$(this).unbind("click");
$(".log").html("panel hide success");
$("#toggle_content").hide();
$('.mask').hide();
});
});
});
for (let x of temp0.querySelectorAll('*')) {
x.disabled = true;
}
where temp0 is your div.
Related
Here is the div(s). Depending on what button is clicked, one of them will appear on the screen.
var box;
var value;
var wrapper = $('.wrapper');
$('body').on('click', '#login, #register', function() {
if ($(this).attr('class')) {
value = $(this).attr('class')
} else {
value = $(this).attr('id')
}
switch (value) {
case 'login':
box = $('.loginBox');
break;
case 'register':
box = $('.registerBox');
break;
}
box.closest(wrapper).toggleClass('open');
$('input:text', box).first().focus();
});
// this successfully closes the div when I click outside of it (on Mac/PC & Android, however it does not close the div on iOS)
$('body').on('click', '.wrapper', function() {
box.closest(wrapper).toggleClass('open');
});
$('body').on('click', '.wrapper div', function(e) {
e.stopPropagation();
});
.wrapper {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
display: none;
z-index: 300;
}
.open {
display: block;
}
.blackBox {
position: absolute;
left: 50%;
top: 41%;
height: 340px;
width: 500px;
z-index: 997;
margin: 0 auto;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="blackBox">
<div class="loginBox">
...
</div>
</div>
</div>
<div class="wrapper">
<div class="blackBox">
<div class="registerBox">
...
</div>
</div>
</div>
The 2nd function, (the toggle when clicking outside the div) successfully closes the div when I click outside of it (on Mac/PC & Android, however it does not close the div on iOS)
Is there another method I can perform for iOS?:
$('body').on('click', '.wrapper', function(){
if (/iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
// another method
}
box.closest(wrapper).toggleClass('open');
});
iStuff will only acknowledge a click event if the element is clickable. One of the conditions to make it clickable is to give it
cursor:pointer;
If that's not an option, you could use tap:
$(containerSelector).on('click tap', targetSelector, function(event) {
// have you finished that webpage already?
})
Yet another option is to use touchstart. But I personally think that's a mistake. touchstart is triggered whenever a touch event is started, whether it's a swipe, a multi-touch zoom or whatever other fancy gestures your device might recognize.
Most times, when you want to swipe, pan, zoom, you don't want click functionality to trigger. tap is the most click-like event in the world of touch gestures.
In the particular case of a dropdown, you don't want it closing on gestures aimed at better positioning it on the screen or zooming in on the area in which it opened.
I want to make a description box appear over an element when the mouse hovers over it, and disappear when it leaves. However, simply doing
$("element").mouseenter(function() {
// make box appear
}).mouseleave(function() {
// make box disappear
});
Will make the box disappear if the mouse is hovering over the box itself. How do I keep it on the screen as long as the mouse is either on the target element or on the box that appears beside it?
You don't even need javascript for this!
#square {
height: 200px;
width: 200px;
line-height: 50px;
vertical-align: middle;
text-align: center;
background-color: green;
opacity: 0.0;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}
#parent {
height 200px;
width: 400px;
background-color: blue;
}
#parent:hover #square {
opacity: 1;
}
<div id="parent">
<div id="square">:-)</div>
</div>
^^^^^^Hover Above^^^^^^
$("#element").on({
mouseenter: function () {
$("#box").fadeIn();
},
mouseleave: function () {
var $target = $("#box");
var timer = setTimeout(function () {
$target.stop(true, true).fadeOut();
}, 200);
$target.data('hoverTimer', timer);
}
});
Try this.
This should do it,
stay= false
$(element).hover(function(){
console.log('mouseover');
$(box).show();
$(box).hover(function(){
stay=true;
},
function(){
exitHover();
console.log('mouseout if box');
});
},
function(){
exitHover();
console.log('mouseout');
});
function exitHover(){
if(stay) return;
//hide box
}
Ohh boy, completely missed your other part of the question, updated.
Hello I want help to close the toggle option when document is loaded, but if you try my current code you will notice that the #A is visible when page is loaded, also i tried all other ways to hide it but on every solution i used it automatically hides the toggle button/link please help me to find a way to initially close the toggle here is my code
html
<div id="A">SideBar</div>
<div id="B">Toggle</div>
JavaScript
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('');
$('#B').toggleClass('extended-panel');
return false;
});
});
CSS
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 250px;
bottom: 0px;
background:#404041;
z-index:999999;
}
#B {
top: 0px;
left: 250px;
right: 0;
bottom: 0px;
}
/* makes the content take place of the SIDEBAR
which is empty when is hided */
.extended-panel {
left: 0px !important;
}
Not sure if this is what you are looking for, but your question is a bit unclear.
Just call toggle on the #A on load.
Here is a fiddle
e.g.
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#A').toggle();
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('');
$('#B').toggleClass('extended-panel');
return false;
});
});
I need to trigger the mouseover event of two DIVs positioned one on top of other.
http://jsfiddle.net/hvh8k/
For the DIV in front, if I have given pointer-events:none; I will get the mouseover event of the DIV underneath. But this stops triggering the mouseover event of the DIV in front.
Javascript
$(function () {
var stopAnimation = false;
var loop1 = setInterval(function () {
if(stopAnimation)return;
var L = parseInt($("#back").css("left"), 10) + 10;
if(L > $(window).width())L=-300;
$("#back").css("left", L);
}, 100);
$("#back").mouseover(function () {
stopAnimation = true;
});
$("#back").mouseout(function () {
stopAnimation = false;
});
$("#front").mouseover(function () {
$("#front").animate({width:200}, 100);
});
$("#front").mouseout(function () {
$("#front").animate({width:100}, 100);
});
});
CSS
#back {
width: 300px;
height: 200px;
background-color: #aaa;
position: absolute;
left:0;
cursor: pointer;
}
#front {
width: 100px;
height: 100px;
background-color: #caa;
position: absolute;
left:0;
top:100px;
border-radius:50%;
overflow:hidden;
}
body {
margin:0;
}
HTML
<div id="main">
<div id="back"></div>
<div id="front"></div>
</div>
Don't know if this would be suited for what you are trying to achieve, but what about toggling the z-index as you click the divs?
First div.front will show. When div.front is clicked, it calls your function AND move div.front to the back, and div.back to the front, which would allow you to click and trigger the div.back function and toggle the divs again.
So to be clear... front visible > click > back visible > click > front visible etc.
So I've been working on this for a while, I've tried many examples found here on stackoverflow, and then starting reading up on js/jquery for most of the day, but am still having trouble with this.
Basically I was able to create a hidden menu item that slides on to screen when clicked, and I was able to change the button used to open in by toggling the class, and send it back.
But after the first time through that process when I try to open it again, it opens and then closes automatically.
I built a jsfiddle, but have done it wrong as it's not working the same as on my site.
fiddle: http://jsfiddle.net/VpnrV/1/
site: http://ericbrockmanwebsites.com/dev4/
code - html:
<div id="dashboard">
<nav id="access">
<div class="open"></div>Here's a bunch of content representing the nav bar.
</nav>
</div> <!-- dashboard -->
css:
#dashboard {
font-size:30px;
float:left;
position: absolute;
right: -653px;
z-index: 100;
}
#access {
display: block;
float: right;
margin: 10px auto 0;
width:730px;
}
.open {
background: #cabd32 url(images/open.png) top left no-repeat;
float:left;
padding:13px 30px 16px;
}
.close {
background: #cabd32 url(images/close.png) top left no-repeat;
float:left;
padding:13px 30px 16px;
}
my laughable js:
$(document).ready(function() {
$('.open').click(function() {
$('#dashboard').animate({ right: '0' });
$(this).toggleClass('close');
$('.close').click(function() {
$('#dashboard').animate({right: '-653'});
}
);
});
Any help is greatly appreciated!
You are actually binding the class .close to multiple callback every time you click the button.
you can try this:
$('.open').bind('click',function(){
$('#dashboard').stop().animate(
{
right: $(this).hasClass('close') ? '-653px' : '-400px'
});
$(this).toggleClass('close');
});
Having stop() infront of animate() will cancel the current animation and do the next animation without queueing multiple animations up.
You can actually do this in one click event. All this does is every time you click open it looks for the close class, if it's there, close the menu, if not open it. Then toggle the close class:
$(document).ready(function () {
$('.open').on("click", function () {
if ($(this).hasClass('close')) {
$('#dashboard').animate({
right: '-653'
});
} else {
$('#dashboard').animate({
right: '0'
});
}
$(this).toggleClass('close');
});
});
I don't know if this is the most effecient but it works for your example. I updated it as well: http://jsfiddle.net/VpnrV/3/