I'm not great with JS so been using trial and error to try and figure out how to get 2 divs to swap z-index on the click of a trigger (button).
I currently have 2 drawers that technically are on top of each other and slide out from the right. On click of 'Buy' the #QuickShopDrawer should open and on click of 'Cart' or 'Add to Cart' the #CartDrawer should open.
Link to my test store.
My code so far is making the open with the #CartDrawer on top with a higher z-index.
JS:
Drawer.prototype.init = function () {
$(this.config.open).on('click', $.proxy(this.open, this));
$('.js-drawer-open-right-two').click(function(){
$(this).data('clicked', true);
});
if($('.js-drawer-open-right-two').data('clicked')) {
//clicked element, do-some-stuff
$('#QuickShopDrawer').css('z-index', '999');
} else {
//run function 2
$('#CartDrawer').css('z-index', '999');
}
this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};
I've tried this which is more of what I want but it's only firing once?
$('.js-drawer-open-right-two').click(function() {
var i = $(this).index();
$('.drawer--right').hide();
$('.drawer--right-two' + (i+1)).show();
});
Any help would be greatly appreciated!
You need to swap the z-index of the elements on button click. Also, you can disable the button on click so that user cannot click it continiously.
Demo
$(document).ready(function() {
$('#buy').on('click', function(e) {
var myZindex = $('#QuickShopDrawer').css('z-index');
$('#QuickShopDrawer').css('z-index', $('#CartDrawer').css('z-index'));
$('#CartDrawer').css('z-index', myZindex);
$(this).prop('disabled', true).siblings('button').prop('disabled', false);
});
$('#addToCart').on('click', function(e) {
var myZindex = $('#CartDrawer').css('z-index');
$('#CartDrawer').css('z-index', $('#QuickShopDrawer').css('z-index'));
$('#QuickShopDrawer').css('z-index', myZindex);
$(this).prop('disabled', true).siblings('button').prop('disabled', false);
});
});
button {
position: absolute;
top: 150px;
left: 0;
clear: both;
}
#addToCart {
margin-left: 50px;
}
.red {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: 20px;
top: 20px;
z-index: 1;
}
.green {
position: absolute;
width: 100px;
height: 100px;
background-color: green;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div>
<div id="QuickShopDrawer" class="red">fdsafdsafdsa</div>
<div id="CartDrawer" class="green">fdsafdsafdsa</div>
</div>
<button id="buy">Buy</button>
<button id="addToCart">Add To Cart</button>
Related
I am building small private projects to learn jquery and currently I am stuck.
The Goal is to click a button and then my menu and my main content area should resize; when I click again it should resize itself back to normal.
The first part does work but the second part "jumps" down - I do not know why.
Here is my JSFiddle: https://jsfiddle.net/ne1mb706/1/
HTML:
<div><button id="show_hide_button">click me</button></div>
<div id="some_box"></div>
<div id="some_other_box"></div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#some_box {
background: #fc0;
width: 25%;
height: 100px;
float:left;
}
#some_other_box {
background: #0cf;
width: 75%;
height: 100px;
float:left;
}
JQuery 3.4.1:
var collapsed = false;
$('#show_hide_button').click(function() {
if(!collapsed){
$('#some_box').animate({width: '0%'});
$('#some_other_box').animate({width: '100%'});
} else {
$('#some_box').animate({width: '25%'});
$('#some_other_box').animate({width: '75%'});
}
collapsed = !collapsed;
});
Thanks for any help :)
You must start with the visible one to animate work properly:
var collapsed = false;
$('#show_hide_button').click(function() {
if(!collapsed){
$('#some_box').animate({width: '0%'});
$('#some_other_box').animate({width: '100%'});
} else {
$('#some_other_box').animate({width: '75%'});
$('#some_box').animate({width: '25%'});
}
collapsed = !collapsed;
});
I have this menu:
CSS
#message {
display: none;
position: absolute;
width: 120px;
background: #fff;
color: #000;
font-weight: bold;
}
When I click in it opens #message.
My problem is to close this thing.
JS:
$(function() {
$("#subm").click(function(evt) {
$("#message").css({
top: 55,
left: evt.pageX - 55
}).show();
});
});
I try to put this code inside function above:
$('html').click(function(evt) {
if($('#message').is(":visible")) {
$('#message').hide();
}
});
but nothing is happening, apparently menu is opening and closing in the same time.
What is wrong? how can I close this menu clicking outside message box or even in span class?
JSFiddle
You can bind a click handler to the document to close it:
Example: https://jsfiddle.net/jmpf1usu/4/
$("#subm").click(function(evt) {
$("#message").css({
top: 55,
left: evt.pageX + 55
}).show();
evt.stopPropagation();
});
$(document).click(function(){
$("#message").hide();
});
evt.stopPropagation()is required so that the click never reaches the document, thus immediately triggering it to close again.
Try changing your js to this:
$("#subm").click(function() {
$("#message").show();
});
$("#message").mouseleave(function(){
$("#message").hide();
});
When the user hits the button the menu will open. When the user mouse leaves the div it will hide it. Is that what you're looking for?
If you really want a click to remove the visibility you can do:
$("body").on('click',function(){
$("#message").hide();
});
I just prefer the mouse leave, tbh.
You can use the below code for hide message
$(function() {
$("#subm").click(function(evt) {
$("#message").css({
top: 55,
left: evt.pageX + 55
}).show();
});
$(document).click(function(event) {
if (!$(event.target).is("#subm")) {
$("#message").hide();
}
});
});
#message {
display: none;
position: absolute;
width: 120px;
background: red;
color: #fff;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="subm">open</span>
<div id="message">
message
</div>
please try with below code snippet.
$(function() {
$("#subm").click(function(evt) {
evt.stopPropagation();
$("#message").css({
top: 55,
left: evt.pageX + 55
}).show();
});
$('html').click(function() {
$("#message").hide();
});
});
JSFiddle
Try this:
$(function () {
$("#message").click(function (evt) {
evt.stopPropagation();
});
$("#subm").click(function (evt) {
evt.stopPropagation();
$("#message").css({
top: 55,
left: evt.pageX + 55
}).toggle();
});
$('html').click(function (evt) {
if ($('#message').is(":visible")) {
$('#message').hide();
}
});
});
#message {
display: none;
position: absolute;
width: 120px;
background: red;
color: #fff;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="subm">open</span>
<div id="message">message</div>
You can simply use .hide to hide that element. Add an event listener for #message and do the following:
$("#message").click(function(evt) {
$("#message").hide();
});
I put a working example here:
https://jsfiddle.net/jmpf1usu/8/
To do it without stopPropagation() shenanigans you can add the following:
$(document).ready(function(){
$(document).click(function(event) {
if(event.target.id != "message"
&& event.target.id != "subm"
&& $('#message').is(':visible'))
{
$('#message').hide();
}
});
});
This is set up so that if the user clicks anything that is not the #message and is not the #subm open span, the message div will hide.
Expanded your fiddle: https://jsfiddle.net/jmpf1usu/10/
Good luck :).
In an cordova/ionic app there is a parent-div on which on-hold-listener is attached and a child-div which subscribed for on-tab events like so:
<div on-hold="doSomething()">
<div on-tap="doSomething2()">...</div>
</div>
From time to time it works but there have been situations in what on-tab was executed instead of on-hold when pressing time was bigger than 500ms.
Might this be done in a better way? Please take into consideration that child-div fills out parent completely and it should remain so.
Thanks in advance.
When you have a div parent of another div the events are propagated.
You can try by yourself here:
.c2 {
width: 200px;
height: 200px;
background-color: red;
}
.c1 {
width: 220px;
height: 220px;
background-color: yellow;
}
<div class="c1" onclick="alert('squareParent');">
<div class="c2" onclick="alert('squareChild');">
</div>
</div>
To avoid this you need to stop the propagation:
document.getElementById("c1").addEventListener('click', function(e) {
alert("c1");
}, false);
document.getElementById("c2").addEventListener('click', function(e) {
alert("c2");
e.stopPropagation();
}, false);
#c2 {
width: 200px;
height: 200px;
background-color: red;
}
#c1 {
width: 220px;
height: 220px;
background-color: yellow;
}
<div id="c1">
<div id="c2">
</div>
</div>
You could check more about javascript bubble if you want more information.
After experimenting with stopPropagation I came up with following answer that needs setTimeout to check for mouse/cursor is being holded.
When just clicking on the child-div(red) doSomething2 is alerted whereas holding onto child-div alerts doSomething of parent instead:
var holding = false;
var secondFunctionCall = false;
document.getElementById("c1").addEventListener('mousedown', function(e) {
holding = true;
setTimeout(function(){
if(holding){
secondFunctionCall = false;
alert("calling doSomething()");
}
},500);
}, false);
document.getElementById("c2").addEventListener('mousedown', function(e) {
holding = true;
secondFunctionCall = true;
}, false);
document.getElementById("c2").addEventListener('mouseup', function(e) {
holding = false;
if(secondFunctionCall){
alert("calling doSomething2()");
}
}, false);
#c2 {
width: 200px;
height: 200px;
background-color: red;
}
#c1 {
width: 220px;
height: 220px;
background-color: yellow;
}
<div id="c1">
<div id="c2">
</div>
</div>
When transfering this code into a cordova-app mouse-event types have to be replaced by touch-event types as it is answered here.
This Demo,
After landing page it will show btn2(green area), then user have 2 option:
1. user do nothing - setTimeout()
2. user hover to btn2- show btn3(blue).
I stuck in 2. after hover to btn2 and btn3 be show. btn1(red) still fadeIn how to cancel it?
Any suggestion will be appreciated.
<div class="btn btn1"></div>
<div class="btn btn2"></div>
<div class="btn btn3"></div>
.btn{
width: 200px;
position: absolute;
}
.btn1{
background-color: red;
height: 100px;
width: 100px;
}
.btn2{
background-color: green;
height: 200px;
opacity: 0.3;
display: none;
}
.btn3{
background-color: blue;
height: 200px;
opacity: 0.3;
display: none;
}
jQuery
$(function(){
function navctr(){
//landing
$('.btn1').hide();
$('.btn2').show();
setTimeout(function(){
$('.btn2').fadeOut(50);
$('.btn1').fadeIn(50);
}, 2250);
//after click
$('.btn1').click(function(){
$('.btn1').fadeOut(100);
$('.btn2').delay(100).fadeIn(50);
});
//both
$('.btn2').hover(function(){
$('.btn2').hide();
$('.btn3').fadeIn(100);
});
$('.btn3').mouseleave(function(){
$('.btn3').fadeOut(50);
$('.btn1').fadeIn(100);
});
};
navctr();
});
Use the method clearTimeout() : documentation it will remove a timeout previously set on your document.
With your code it would be something like this :
$(function(){
function navctr(){
var myTimeout;
//landing
$('.btn1').hide();
$('.btn2').show();
myTimeout = setTimeout(function(){
$('.btn2').fadeOut(50);
$('.btn1').fadeIn(50);
}, 2250);
//after click
$('.btn1').click(function(){
$('.btn1').fadeOut(100);
$('.btn2').delay(100).fadeIn(50);
});
//both
$('.btn2').hover(function(){
$('.btn2').hide();
$('.btn3').fadeIn(100);
clearTimeout(myTimeout); // remove the setTimeout
});
$('.btn3').mouseleave(function(){
$('.btn3').fadeOut(50);
$('.btn1').fadeIn(100);
});
};
navctr();
});
I have been looking all day for a way to make a contact form similar to the one on this site: http://45royale.com/
If you click on the contact button a black background fades in and the from drops down using an ease function. I have been picking through the code trying to see what to do but I am stuck and I have also been looking and other javascript pop ups but so far it seems they only use php for the form however this one calls a html.
Any suggestions?
Here is something like the form in the example: http://jsfiddle.net/ep39v/3/.
And the source:
HTML
<div class="form"></div>
<button id="showFormBtn">Show form</button>
JavaScript
var form = $('.form');
$('#showFormBtn').click(function () {
fadeBackground(showForm);
});
(function () {
form.css({
top: -form.height(),
left: ($(document.body).width() - form.width()) / 2
});
}());
function fadeBackground(callback) {
var background = $('<div class="background"></div>');
$(document.body).append(background);
background.fadeTo(300, 0.5, function () {
if (typeof callback === 'function') {
callback();
}
});
}
function showForm() {
var form = $('.form');
form.animate({ top: 10 }, 1500, 'easeOutElastic');
}
CSS
.form {
width: 30%;
height: 40%;
background: black;
position: absolute;
}
body {
height: 100%;
}
.background {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background: black;
opacity: 0;
}
May be you need to change only the easing.