Develop Reference

Why does the animation reset on slideToggle()? (jQuery)

I've positioned a div (fixed) at the bottom of the viewport to act as a contact tab, when then tab is clicked it triggers a panel to slide out, this is working correctly.
I'm also trying to get the tab to slide out when it is clicked and slide back in when then close button is clicked on the panel.
The tab has the ID #menufixed
The panel close button has the class .nest-custom-button-wrapper
This is the JS I'm currently using which is causing a weird animation reset everytime the slideToggle is triggered:
<script>
jQuery(document).ready(function(){
jQuery("#menufixed").click(function(){
jQuery("#menufixed").slideToggle();
});
});
</script>
View the issue:
https://content.screencast.com/users/Vanstone/folders/Default/media/aa25e806-e0c0-4f8c-b112-e1162ede41da/11new.mp4
How can I get the tab to stay hidden and only trigger the slide up when the .nest-custom-button-wrapper is clicked?
EDIT:
CSS:
#menufixed {
z-index: 99999999!important;
display: block!important;
position: fixed!important;
margin: 0 auto!important;
bottom: 0;
left: 45%;
width: 10%;
height: 40px;
box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3);
}

This is because you have this in your CSS for #menufix
display: block!important
jQuery is trying to hide the element but this style is overriding it. If you remove just the !important part of that style it should work fine.
Updated CSS
#menufixed {
z-index: 99999999!important;
display: block; /* removed the !important style */
position: fixed!important;
margin: 0 auto!important;
bottom: 0;
left: 45%;
width: 10%;
height: 40px;
box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3);
}
In order to get the button tab to slide up from .nest-custom-button-wrapper you can just add another click event to slideToggle the #menufixed
JS Code
jQuery(document).ready(function(){
jQuery("#menufixed").click(function(){
jQuery("#menufixed").slideToggle();
});
jQuery('.nest-custom-button-wrapper').click(function(e) {
e.preventDefault(); // not sure if this is an 'a' tag or not
jQuery("#menufixed").slideToggle();
});
});

toggleClass error - Use click event to hide class with jQuery mobile?

In my CSS I have a class called hide which is applied to a textarea. Once clicking a button I would like the class to be removed however at the moment when I click the button there is no change. If I add an alert to the function it triggers when the button is pressed so I'm unsure as to why the class isn't changing. I changed it to removeClass now instead but that doesn't work either unfortunatley.
(Also the textarea stuff in the CSS isn't taking effect if anyone happens to know why, not overly important though)
HTML:
<button id="note1btn" data-role="button">Note #1</button>
<textarea id="note1input" class="hide" rows="10" cols="50"></textarea>
CSS:
#textarea {
width: 100%;
height: 100%;
font: 1em arial;
color: rgba(50, 82, 50, 1.0);
}
#textarea:focus {
color: rgba(50, 82, 50, 1.0);
border: 2px solid #96c56f;
box-shadow: 0px 1px 1px #888888;
}
.hide {
visibility: hidden;
height: 1px !important;
padding: 0px !important;
margin: 0px !important;
}
JS:
$(document).ready(function () {
note1btn.addEventListener("click", displayNote);
//DISPLAY NOTE
function displayNote() {
alert("TEST");
$("note1input").removeClass("hide");
}
});

you forgot to add '#' in jquery selector
change this
$("note1input").removeClass("hide");
into this
$("#note1input").removeClass("hide");

Slide animation of left floating element vs right floating element

I've ran into a inconsistency with the sliding animation in jQuery and I'm not too sure how I can overcome it.
I basically have two floating divs that act as opening and closing doors:
.door-one{
float: left;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url('dark-wood.png');
box-shadow: inset 0 0 10px black;
}
And the animation to govern their movements:
$(document).ready(function(){
$('.home-button').click(function(){
$('.door-one').animate({width: 'toggle'}, 1000);
$('.door-two').animate({width: 'toggle'}, 1000);
});
});
The problem exists with the left floating element. You see, the right one moves off the page to the right (images and all) in one smooth motion. The left one however just gets 'covered' up and doesn't actually 'slide' off of the page.
Is anyone familiar with this? Is there anyway to get the left element to slide off the page properly?

The background image for right door works, because the float causes it to move right as the door's width shrinks. The background image simply goes along for the ride.
The background image for the left door does not work, because the door doesn't move left when its width shrinks.
An alternative would be to animate the left door's position rather than its width.
You can do this by removing float: left and adding absolute positioning for the left door. I don't think you can toggle left for this purpose. But you can animate it in one direction or the other based on its current offset.
Snippet:
$('.home-button').click(function(){
var d1= $('.door-one');
if(d1.offset().left < 0) {
d1.animate({left: '0'}, 1000);
}
else {
d1.animate({left: '-50%'}, 1000);
}
$('.door-two').animate({width: 'toggle'}, 1000);
});
html,body {
width: 100%;
height: 100%;
margin: 0px;
}
.door-one{
position: absolute;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
.door-two{
float: right;
width: 50%;
height: 100%;
background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
box-shadow: inset 0 0 10px black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="home-button">Click me</button>
<hr>
<div class="door-one"></div>
<div class="door-two"></div>

trying to toggle a container on one click

I am trying to make a div container expand and contract every time an even handler is clicked.
However, every time I load the page, I have to click the even handler twice to expand it for the first time, after that it works with one click but I would like to only click it once to get it to expand upon page reload.
CSS:
#bodywrap1{
border-radius: 5px;
height: 00px ;
width: 80% ;
overflow: hidden;
border-top: solid 2px rgba(0,0,0,0.3) ;
border-bottom: solid 2px rgba(0,0,0,0.3) ;
Javascript:
function expand(){
$("#bodywrap1").toggle(function(){
$("#bodywrap1").animate({height:600},200);
});
}
HTML:
<h2 onclick = "expand()" id = "expandv">Expand</h2>
Here is the site im working on, and the page specifically.
http://hourtimeagent.com/html/c++.php

Toggle works based on the display property, so set the display: none to the bodywrap1
When the first click happens, since the display is not set, instead of displaying the element toggle() hides it, to fix it set
#bodywrap1 {
border-radius: 5px;
height: 0;
width: 80%;
overflow: hidden;
border-top: solid 2px rgba(0, 0, 0, 0.3);
border-bottom: solid 2px rgba(0, 0, 0, 0.3);
/*new property*/
display: none;
}

The reason it's taking two clicks is because the .toggle hides the #bodywrap1, and then on second click it shows the #bodywrap1 and animates the height.
I fixed this by using .toggleClass instead and changed some things around with the css
http://jsfiddle.net/PUCLM/1/
HTML
<h2 id="expandv">Expand</h2>
<div id="bodywrap1">
</div>
CSS
#bodywrap1{
border-radius: 5px;
height: 0px;
width: 80%;
overflow: hidden;
border-top: solid 2px rgba(0,0,0,0.3) ;
border-bottom: solid 2px rgba(0,0,0,0.3) ;
background: blue;
}
#bodywrap1.theclass {
height: 600px;
}
jQuery UI (you can only animate height with jQuery UI, not plain jQuery)
$('#expandv').click(function() {
$("#bodywrap1").toggleClass('theclass', 500);
});

Your html is not correctly written, remove from <head> tags h1 and h2.
<head>
<link rel="stylesheet" type="text/css" href="../css/c++.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<h1>C++</h1>
<h2 id = "expandv">Expand</h2>
<h1>Variables</h1>
<!-- ... -->
Change your javascript for the following:
$(function() {
function expand() {
$("#bodywrap1").toggle(function(){
$("#bodywrap1").animate({height:600},200);
});
}
// Click function for #expandv item
$("#expandv").on("click", function() { expand(); });
// Initialize a hidden wrap
$("#bodywrap1").css("display", "none");
});
Working jsfiddle: http://jsfiddle.net/TFZ4R/

Overlapping DIV Elements and onclick

i'm about to write my own interactive Tutorial with HTML, Javascript and css. Now i had the idea to create an DIV-element that represents an glowing rectangle to mark specific areas. The problem is when I change the position of the glow-rectangle, to highlight an element that is clickable, the glow rectangle is overlapping the clickable element. So the clickable element is no longer clickable. Is there a way to "disable" the glow-rectangle so it's visible but no longer blocking the underlaying element?
Here is my code:
<div id="hauptteil">
<div id="block" onclick="step2();" style="cursor: pointer">
</div>
<div id="glowDiv">
<div id="glow" class="glow"><img src="images/transBlock.png"/></div>
</div>
</div>
Here is the css code:
#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
}
.glow {
margin: auto;
width: 147px;
height: 90px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}
#block {
width: 50px;
height: 50px;
background: red;
}
To visualize my problem. On my page I have a DIV-Element that is visible as a red block. When I start my tutorial, I change the position of my glow-DIV to cover the red block. So it seems that the red block is glowing.

Back in 2013 you had to use a script to solve this problem, but nowadays, pointer-events is widely supported. Use it!
Normally you would just user the pointer-events css property. Guess what? IE doesn't support it... With a little help from our friend jquery we can emulate this however!
My approach is to capture the click event in the glow (the absolute positioned div) and check if there are any other elements overlapping the x-y coordinate of the mouse click.
Warning: jQuery ahead!
First just capture the click event:
$('.glow').on('click', function(e) { // our trick here });
Then determine the coordinates of the mouse cursor. Quite easy as jQuery helps us out by giving the coordinates in the event object
var cursorX = e.pageX;
var cursorY = e.pageY;
Now we need to traverse all dom elements that are possibly sitting below our glow div that we want to receive the click event as well.
$('.class-possibly-below').each(function(index, element) { // our calculations here });
If we can get the position relative to the window and it's width and height we can calculate if our cursor was over it while clicking. In that case our cursorX and cursorY values would be in between the left-position and left-position + width (and top- and height respectively) of our DOM element we're traversing. Yet again jQuery helps a bit:
var offset = $(element).offset();
xRangeMin = offset.left;
xRangeMax = offset.left + $(element).outerWidth();
We use offset() instead of position() because the latter returns the position relative to it's parent. And we use the outerWidth() and outerHeight() instead of width() and height() respectively because the former also includes padding and border.
Now check if the x and y coordinates are in between the range-min and range-max. If so, trigger the click event on this element.
if(cursorX >= xRangeMin && cursorX <= xRangeMax && ...) {
$(element).trigger('click');
}
You want some action? Check out this fiddle!

As I mentioned in my comment, a different approach would be to add the glow class to the active div:
<div id="hauptteil">
<div id="block" onclick="step2();" class="glow">
</div>
#block {
width: 50px;
height: 50px;
background: red;
}
.glow {
cursor:pointer;
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}

You can use pointer-events: none; to ignore the possible click event of an element. However as stated in the comments the method you are doing does not seem to be the best of options.
#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
pointer-events: none;
}
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.
Placing this on your overlaying element will make it transparent to click events.
However this does not work in IE
This is my suggestion am curious if anyone else has another option. I am using the same thing on my website and simply ignoring the overlay on IE using conditional tags.

Here's a simple pin you can check it out http://codepen.io/ElmahdiMahmoud/pen/Ewlto hope this can help!