We Keep Coding

Slide out the link when the button is clicked

I am trying to make it where a button is clicked a div will slide out containing a link to another website. I have supplied the current code I have but when the button is clicked it doesn't slide out. It slides but appears under the button.
$('.button1').on('click', function() {
animateDiv();
})
$(document).keyup(function(e) {
if (e.keyCode === 27 && $('.inner').hasClass('visible')) {
animateDiv();
}
})
function animateDiv() {
$('.inner').toggleClass('visible');
$('.inner').animate({
width: 'toggle',
}, 350);
}
.toolbar {
position: right;
display: inline-block;
overflow: hidden;
white-space: nowrap;
margin: 0px auto;
padding: 5px 0px;
background-color: skyblue;
}
.inner {
float: right;
display: none;
}
.btn-primary {
color: #fff;
background-color: #2780E3;
border-color: #2780E3;
}
.btn-lg,
.btn-group-lg > .btn {
padding: 0.5rem 1rem;
font-size: 1.171875rem;
line-height: 1.5;
border-radius: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='toolbar'>
<div>
<button class="button1 btn btn-primary btn-lg">Slide it</button>
</div>
<div class="inner is-hidden">
Google
</div>
</div>

jquery popup window only pulling last popup div

I am trying to have a link open a popup window that holds some inline HTML and an image when the user clicks on the link.
I've gotten it to work so that each link opens the popup window, but it will not show the right content - It keeps pulling the last hidden div instead of the one for the link that is clicked on.
;(function($){
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#popup,#popup2,#popup3,#popup4').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#popup,#popup2,#popup3,#popup4'));
return false;
});
});
$.prototype.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
})(jQuery);
#media screen and (max-width:980px) {
.hide {
font-weight: bold;
color: #0f2c6a;
display: block !important;
}
}
.hide {
display: none;
}
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
box-shadow: 0 0 100px 450px rgba(0,0,0,0.2);
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
text-align:left;
min-width:500px;
max-width: 1200px;
min-height: 00px;
max-height: 820px;
z-index:99999;
padding: 25px 25px 25px;
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#media screen and (max-width:480px) {
.messagepop {
min-width: 300px !important;
max-width: 330px !important;
min-height: 300px !important;
max-height: 330px !important;
}
.pop-right {
font-size: 16px;
}
}
#media screen and (max-width:980px) {
.messagepop {
min-width: 600px;
max-width: 650px;
min-height: 400px;
max-height: 640px;
}
.pop-right {
font-size: 20px;
}
}
#media screen and (max-width: 768px) {
.messagepop {
min-height: 500px;
max-height: 550px;
min-width:335px;
max-width:385px;
}
.pop-right {
font-size: 18px;
}
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
#close {
position: absolute;
top: -10px;
right: -10px;
background: #000;
border-radius: 40px;
border: 1px solid #fff;
width: 25px;
height: 25px;
}
#close a {
color: #fff;
font-size: 15px;
line-height: 20px;
text-decoration: none;
text-align: center;
width: 25px;
height: 25px;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pop-left {
float: left;
width: 50%;
}
.pop-right {
float: right;
width: 50%;
padding-left: 20px;
font-size: 20px;
line-height: 1.7em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 1</div>
<div class="pop-right">Right 1</div>
</div>
<a id="popup" href="#popup">View Details</a>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 2</div>
<div class="pop-right">Right 2</div>
</div>
<a id="popup2" href="#popup2">View Details</a>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 3</div>
<div class="pop-right">Right 3</div>
</div>
<a id="popup3" href="#popup3">View Details</a>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 4</div>
<div class="pop-right">Right 4</div>
</div>
<a id="popup4" href="#popup4">View Details</a>
As you can see it's only pulling the last 'messagepop pop' div.

you are trying to select and fire events on your elements using the class selector. The class selector will give you the array like object for all the matching elements for the class.
What you need to do is to find the exact element which is clicked, you have $(this) jquery object in your click events which tell you which exact element is clicked by user.
Now you will have to get the other elements by using this exact element $(this).
Make the changes as below in your code.
(function($){
function deselect(e) {
e.prev().slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#popup,#popup2,#popup3,#popup4').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$(this).prev().slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
var link = $(this).parent().parent().next().attr("id");
deselect($("#"+link));
return false;
});
});
$.prototype.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
})(jQuery);
Working example : http://jsfiddle.net/SRw67/3042/

You are calling all ".pop" divs at the same time they fall over each other so you always see the last one

Toggling an element with JQuery makes part of the parent element dissapear

I'm trying to make a nav bar with jquery, fairly simple, clicking the nav icon brings up a menu on the side, however I need a sub-menu to appear after clicking one of the options, in this case the "equipment we sell" tab. I have no problem with that as I click the tab and it toggles the menu to being visible however, all of the tabs below it become invisible (I'm assuming they don't relocate to below the now visible element). Can someone explain to me why the tabs do not make room for the new list elements. Code below.
jscript
$('.icon-menu').click(function() {
$('.menu').animate({
right: '0px'
}, 200);
$('.equipsell').hide();
});
$('.menu-exit').click(function() {
$('.menu').animate({
right: '-285px'
}, 200);
$('.equipsell').hide();
});
$('.equipment').click(function() {
$('.equipsell').toggle();
});
HTML
<header>
<div class="menu">
<img src="img/menu-exit.png" class="menu-exit" alt="Exit Button">
<ul>
<li>Home</li>
<li>About</li>
<li class="equipment">Equipment We Sell</li>
<div class="equipsell">
<li>Audiometers by Inventis</li>
<li>Middle Ear Analyzers by Inventis</li>
<li>Delfino Video Otoscopes by Inventis</li>
<li>Daisy by Inventis</li>
<li>Trumpet REM by Inventis</li>
</div>
<li>Contact Us</li>
</ul>
</div>
<div class="main-menu">
<p>Test<br>Website</p>
<img src="img/bars.jpg" class="icon-menu" alt="Menu">
</div>
</header>
So when you click the equipment class/list item from above it lowers down the "menu" class but covers up the contact us list item.
EDIT
Forgot to include css.
CSS
/***** NAV *****/
header {
background-color: #093;
padding-bottom: 5px;
}
header p {
display: inline-block;
font-size: 1.35em;
margin: 10px 0 5px 15px;
font-weight: bold;
padding: 2px;
border: 3px solid black;
}
header a {
color: black;
}
.icon-menu {
width: 35px;
height: 35px;
float: right;
margin: 20px 15px 0 0;
display: inline-block;
}
.menu {
background: #00882B;
right: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu-exit {
width: 35px;
height: 35px;
margin-left: 48%;
}
.menu ul {
border-top: 1px solid #636363;
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636363;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
color: #000000;
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
}
.menu a {
color: #000000;
font-size: 15px;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
}
.active-menu{
position: absolute;
}
.equipsell{
width: 285px;
position: fixed;
}
.equipsell li {
margin: 0;
padding: 0;
line-height: 2.5;
background-color: #c90;
}
.equipsell a{
color: white;
padding: 0;
margin: 0;
}
.bottom-half li {
background-color: #00882B;
}
/***************/

Your class .equipsell is defining the position to be fixed, which causes is to be placed a layer above the other elements.
I guess the code to create the expected result would be:
.equipsell{
width: 285px;
}
JSFiddle updated: https://jsfiddle.net/rc8br5oe/
More about the CSS positions: http://www.w3schools.com/cssref/pr_class_position.asp

jQuery delay() to start when you scroll to a specific div

I have delays in place within my div gray. I don't want those delays or animation to start until the user would scroll to that specific div. What I have tried doing is not working. The delays and animation still work, but they begin once the page loads.
Does anyone see what I am doing wrong?
$(function() {
var oTop = $('.gray').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop );
if( pTop > oTop ){
textdelays();
}
});
});
$(function textdelays(){
$('#text').delay(1000).fadeIn(2200);
$('#text-button').delay(1000).fadeIn(2200);
$('#text-button').animate({'top': '60%'}, 1000);
});
.green {
background-color: green;
width: 100%;
height: 500px;
}
.yellow {
background-color: yellow;
width: 100%;
height: 500px;
}
.gray {
background-color: #CCC;
width: 100%;
height: 300px;
}
#text {
color: blue;
display: none;
text-align: center;
position: relative;
margin: 0 25%;
top: 35%;
font-size: 1.3em;
}
#text-button {
position: relative;
wdith: 100%;
text-align: center;
top: 70%;
display: none;
cursor: pointer;
}
.border-span {
border: 2px solid #FFF;
padding: 15px 10px;
color: #FFF;
font-weight: bold;
}
.border-span:hover {
background-color: #FFF;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="green"></div>
<div class="yellow"></div>
<div class="gray">
<div id="text">text.</div>
<div id="text-button"><span class="border-span">text animation</span></div>
</div>

Issue to fadeout elements with jquery waypoints plugin

as you can see on this jsfiddle I'm trying to fade out elements when they enter viewport, using waypoints plugin. Unfortunately this is not working - nothing fades out. Any idea why? Many thanks
CSS and HTML
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.pre-block {
background: green;
width:90%;
Height: 800px;
margin-bottom:50px;
}
.block {
background: red;
width:90%;
Height: 200px;
}
.col1, .col2, .col3, .col4 {
float: left;
width: 25%;
background: red;
text-align: center;
font-size: 12px;
color: #fff;
font-weight: 300;
height: 24px;
vertical-align: middle;
display: table-cell;
}
.c1 {
background: #253151;
}
.c2 {
background: #253151;
border-left: 1px #FFF solid;
}
.c3 {
background: #253151;
border-left: 1px #FFF solid;
}
.c4 {
background: #253151;
border-left: 1px #FFF solid;
}
<div class="pre-block"></div>
<div class="block">
<div class="col1 c1">dsqd</div>
<div class="col2 c2">sdsqdss</div>
<div class="col3 c3">sdqsdsq</div>
<div class="col4 c4">sdsqd</div>
</div>
<script src="http://imakewebthings.com/jquery-waypoints/jquery.js">
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.js">
JS
$('.block').waypoint(function() {
$(".col1").delay(10).fadeOut("slow");
$(".col2").delay(20).fadeOut("slow");
$(".col3").delay(30).fadeOut("slow");
$(".col4").delay(40).fadeOut("slow");
}, { offset: 10 });

Your provided offset: 10 is not able to reach in fiddle.
Increase the offset and all is perfect.

Live Demo
It works perfectly. I added an alert('ok'); to the function and made the display iframe a bit smaller and I get the expected result:
Maybe this offset would be better:
offset: $(window).height()