We Keep Coding

how to create a sliding menu which will fill the window width except by puller button width?

I am trying to create a sliding menu which will fill the window width minus the puller button width. I want the menu out of the window when web page load and there is a button which will go left when the page loads. When user clicks on the button the menu should come to window and button goes right.
I have created an animation video here which will show you what I want.
In the jsfiddle the menu just fades out, But I want the menu to slide from left to right when clicked on button with .puller class.
See the code at jsfiddle
Demo on jsfiddle
$(document).ready(function() {
var stickyNavTop = ($('.container')).offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.container').addClass('fixed');
} else {
$('.container').removeClass('fixed');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
}).resize(function() {
stickyNav();
}).load(function() {
stickyNav();
});
$(".dropdown").click(function() {
$(".dpitem").slideToggle(300);
});
var calcWidth = function() {
var pullerDimensions = $('.puller').width();
$('#cpcc,.dpitem').width($(window).width() - pullerDimensions);
}
$(document).ready(function() {
calcWidth();
});
$(window).resize(function() {
calcWidth();
}).load(function() {
calcWidth();
});
var cPcc = document.getElementById ("cpcc");
var cpHeight = function() {
var cpBtnHolder = $(cPcc).height();
$('.content').css("padding-top",cpBtnHolder);
}
setInterval(function() {
cpHeight();
calcPHeight();
pp();
}, 0)
var calcPHeight = function() {
var toolsDimensions = $('#cpcc').height();
$('.puller').height(toolsDimensions);
$('.puller').css("line-height",toolsDimensions +"px");
}
$(document).ready(function() {
calcPHeight();
});
$(window).resize(function() {
calcPHeight();
}).load(function() {
calcPHeight();
});
var Pwidth = $('#cpcc').width();
var PSpce = $(window).width()-Pwidth;
$(".puller").click(function() {
$(".container").toggle( function() {
$(".container").css({
transform: "translate3d("+"-"+Pwidth+"px, 0, 0)"
});
}, function () {
$(".container").css({
transform: "translate3d(-0, 0, 0)"
});
});
});
});

Calc is your friend. You can use that along with 'transition' to achieve the intended effect. Check out this simplified example.
http://codepen.io/anon/pen/gPBQOb
Good practice is to toggle a class which will override the position property in this case left. It should also toggle your chevron image to point left and right.
Your example is using a lot of js calculations and has to recalculate with window size changes. This example uses js only to toggle a css class on click and the rest in managed purely with css. Much simpler in my opinion.
HTML
<div class="maincontent"></div>
<div class="menu">
<div class="button"></div>
</div>
CSS
.maincontent{
background-color: green;
height: 2000px;
width: 100%;
}
.menu{
background-color: red;
width: 100%;
height: 200px;
position: fixed;
top: 0px;
left: 0px;
transition: left 1s;
}
.menu.collapse{
left: calc(-100% + 30px)
}
.button{
background-color: yellow;
height: 100%;
width: 30px;
position: absolute;
right: 0px;
}
JS
$('.button').click(
function(){
$('.menu').toggleClass('collapse')
})

jQuery.bind context menu event on two elements overlaid on top of eachother

I have two divs that are on top of each other. What I want is that when the bottom div is clicked one context menu appears and when I click the upper div I want a different context menu to appear. The divs need to remain on top of eachother.
The problem that I am having is that when I click the upper div the bind event is executed twice. I believe it is because they are overlaid on top of each other and both divs have a bind event attached to them.
Is there a way to only have the bind event execute once on the clicked div? Basically give priority to the uppermost (Z axis) div.
I have an example where you can see that when the red div is clicked the attributeMenu context menu appears but when you click the green div both the attributeMenu and elementMenu context menus appear.
Here is the example jsfiddle
Some of the code:
addElementMenu();
addAttributeMenu();
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function () {
// This is the triggered action name
switch ($(this).attr("data-action")) {
// A case for each action. Your actions here
case "duplicate":
duplicateItem(clicked);
break;
case "delete":
deleteItem(clicked);
break;
case "copy":
copyItem(clicked);
break;
case "cut":
cutItem(clicked);
break;
case "paste":
pasteItem();
break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});
function addElementMenu() {
$('.element').bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
//set clicked item
clicked = $(this);
parent = $(this).parent().attr('id');
console.log(clicked);
console.log(parent);
// Show contextmenu
$("#elementMenu").finish().show().css({
top: event.pageY + "px",
left: event.pageX + "px",
display: 'block'
});
});
}
function addAttributeMenu() {
$('.attribute').bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
//set clicked item
clicked = $(this);
parent = $(this).parent().attr('id');
console.log(clicked);
console.log(parent);
// Show contextmenu
$("#attributeMenu").finish().show().css({
top: event.pageY + "px",
left: event.pageX + "px",
display: 'block'
});
});
}
CSS:
.attribute {
width: 400px;
height: 200px;
background-color: red;
}
.element {
width: 200px;
height: 100px;
background-color: green;
}
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
}
.custom-menu li:hover {
background-color: #DEF;
}
HTML:
<div class='attribute' id="attributeID">
<div class='element' id="elementID"></div>
</div>
<ul class='custom-menu' id="elementMenu">
<li class='visibleElement' data-action="duplicate">Duplicate</li>
<li class='visibleElement' data-action="delete">Delete</li>
<li class='visibleElement' data-action="copy">Copy</li>
<li class='visibleElement' data-action="cut">Cut</li>
<li class='visibleAttribute' data-action="paste">Paste</li>
</ul>
<ul class='custom-menu' id='attributeMenu'>
<li class='visibleAttribute' data-action="paste">Paste</li>
</ul>

Use stopPropagation(), this way when you right-click on the children is not going to trigger the event in the parent div.
script:
function addElementMenu() {
$('.element').bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Avoid the event from bubbling up to parent
event.stopPropagation();
//set clicked item
clicked = $(this);
parent = $(this).parent().attr('id');
console.log(clicked);
console.log(parent);
// Show contextmenu
$("#elementMenu").finish().show().css({
top: event.pageY + "px",
left: event.pageX + "px",
display: 'block'
});
});
}
fiddle

How to close this menu clicking outside?

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 :).

Alternate z-index between 2 divs on click?

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>

how to make div+iframe disappear in chrome

I am trying to make a div containing an iframe appear/disappear when a checkbox is selected/unselected.
Here is a quick demo http://jsfiddle.net/bhS9T/
$(function () {
$("input[type='checkbox']").change(function () {
switch (this.id) {
case 'video':
if ($(this).is(':checked')) {
$(".video").css("visibility", "visible");
} else {
$(".video").css("visibility", "hidden");
}
break;
};
});
.video {
position: absolute;
visibility: hidden;
display:block;
background-color: blue;
border: solid red 8px;
padding: 30px;
background-image: none;
}
In safari the video disappears with the div, which is great. However, in chrome the video remains. Can anyone help?

Changing to .show() / .hide() works.
$(function () {
$("input[type='checkbox']").change(function () {
switch (this.id) {
case 'video':
if ($(this).is(':checked')) {
$(".video").show();
} else {
$(".video").hide();
}
break;
};
});
});
See: http://jsfiddle.net/corey_rothwell/kA2G6/