Develop Reference

Run jQuery function on initial page load and scroll

I'm working on a design and I would like make a few blocks "slide in" from the sides when they're in-view of the window. I have it working after following some tutorials online, but it will only work if the elements are not in-view and you scroll down the page to see them. What I would like to do is have the elements also "slide" when the page loads initially. I feel this might be too much code to just post here, so I added everything to a fiddle.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(document).ready('scroll');
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
The bit of code that I've been playing with is at the bottom of the jquery bit, but nothing I change seems to effect anything.
//trigger our scroll event on initial load
$(document).ready('scroll');
But I will admit I have very little knowledge of this, and I'm just following tutorials and examples online. On the fiddle, if you scroll down and back up, you'll see the boxes slide into view. What I'm wanting to do is make them slide in on the initial page load and also as you scroll down the page (i'm using the same code on other elements further down the page on the full version).
Thank you to anyone who can help me!

Pass your function as a reference to both the event listener and ready()
$(window).on('scroll resize', check_if_in_view);
$(document).ready(check_if_in_view);

You are almost there... all you need to do is trigger your check_if_in_view function when all the html is ready - that just means passing in the function by name to your last document.ready call. Your snippet works with that one tweak.
For some general advice, I wouldn't try to "fake" a scroll event just to trigger other behaviours - it may get confusing with changes later on. What you really want is to run your custom function right after pageload, and jquery will let you do precisely that.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(document).ready(check_if_in_view);
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

https://api.jquery.com/ready/
Description: Specify a function to execute when the DOM is fully loaded.
You can't just pass in "scroll", as that is not a function. What you can do is call $(window).trigger('scroll') at the end, or do $(document).ready(check_if_in_view), as check_if_in_view is a function.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(window).trigger('scroll');
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Background images dont stay on sides of page when resolution changes

I'm pretty new to css animations but I've got my page looking how I want except for this one glitch. I have a scrolling animation using scrollspy.js and when it hits a certain div images slideinleft or slideinright into the page.
Link here
However when you hit control + mwheel down it doesn't start the anims from outside of the browser window like i would prefer it to. I'm using 1920x1080 res, for reference.
Basically, on page load it looks fine:
But again, when employing the ctrl + mwheel down it becomes this ugly looking page:
I need it to scale.
Any css gurus know what I'm doing wrong?
HTML:
<div class="flex-row panel-row-style panel-row-style-for-4-1 page left-phone has-bg feed active" style="margin-top: 100px; animation-name: slideInLeft;">
<div id="pgc-4-1-0" class="panel-grid-cell panel-grid-cell-empty"></div><div id="pgc-4-1-1" class="panel-grid-cell">
<div id="panel-4-1-1-0" class="so-panel widget widget_sow-image panel-first-child panel-last-child" data-index="2">
<div class="top-img panel-widget-style panel-widget-style-for-4-1-1-0">
<div class="so-widget-sow-image so-widget-sow-image-default-eef982a7180b">
<div class="sow-image-container phone">
<img src="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png" width="400" height="831" srcset="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png 400w, http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2-144x300.png 144w" sizes="(max-width: 400px) 100vw, 400px" class="so-widget-image">
<img class="screen-left layer" src="http://streamlistapp.com/wp-content/uploads/2017/07/purse-inside-screen.png">
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-2" class="panel-grid-cell panel-grid-cell-mobile-last animated" style="visibility: visible; animation-name: undefined;">
<div id="panel-4-1-2-0" class="so-panel widget widget_siteorigin-panels-builder panel-first-child panel-last-child" data-index="3">
<div id="pl-w5973cd6d9c123" class="panel-layout">
<div id="pg-w5973cd6d9c123-0" class="panel-grid panel-no-style">
<div id="pgc-w5973cd6d9c123-0-0" class="panel-grid-cell">
<div id="panel-w5973cd6d9c123-0-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="0">
<div class="link-s front panel-widget-style panel-widget-style-for-w5973cd6d9c123-0-0-0">
<div class="so-widget-sow-editor so-widget-sow-editor-base">
<div class="siteorigin-widget-tinymce textwidget">
<h4>
STREAMING<br>
MARKETPLACE
</h4>
<h3>Streamlist</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-3" class="panel-grid-cell panel-grid-cell-empty"></div>
CSS:
.can-transform3d .active.has-bg:before,
.can-transform3d .active.has-bg:after,
.can-transform3d .past-active.has-bg:before,
.can-transform3d .past-active.has-bg:after {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
/*transform: translate3d(328px, 0, 0);*/
transform: translate3d(0px, 0, 0);
}
.has-bg {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.has-bg:before,
.has-bg:after {
content: '';
position:absolute;
display: block;
opacity: 0;
-webkit-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-moz-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-o-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-ms-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-webkit-transition-delay: .25s; /* Safari */
transition-delay: .25s;
z-index: 1;
visibility: visible;
background-repeat: no-repeat;
background-attachment: scroll;
clear: both;
/*width: 100%;*/
}
.past-active:before,
.past-active:after,
.active:before,
.active:after {
opacity: 1 !important;
}
.page {
height: auto;
width: 100%;
position: relative;
text-align: center;
/*padding-top: 60px;*/
z-index: 1;
}
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:after,
.can-transform3d .left-phone:after {
-webkit-transform: translate3d(150px , 0, 0);
-moz-transform: translate3d(150px , 0, 0);
-o-transform: translate3d(150px , 0, 0);
-ms-transform: translate3d(150px , 0, 0);
/*transform: translate3d(682px , 0, 0);*/
transform: translate3d(150px , 0, 0);
}
.left-phone:before,
.left-phone:after {
margin-left: 0;
/*right: 0;*/
}
.active .phone .screen-left, .active .phone .screen-right,
.past-active .phone .screen-left, .past-active .phone .screen-right {
opacity: 1;
}
.phone .screen-left, .phone .screen-right {
opacity: 0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.phone .screen-left {
position: absolute;
top: 12.06656%;
left: 22.37791%;
/*width: 75.460123%;*/
}
.layer {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.feed:before, .discover:before {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/watch3-transparent-bg-e1500713498530.png);
/*top: -150px;*/
height: 564px;
width: 330px;
/*right: -425px;*/
right: -425px;
/*background-position: right center;*/
}
.feed:after, .discover:after {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/bracelet-e1500713698821.jpeg);
height: 260px;
width: 260px;
bottom: 0;
/*right: 15%;*/
right: -6%;
/*background-position: 70% center;*/
}
Scroll spy functions:
//First phone (left)
$('#pgc-4-1-2').on('scrollSpy:exit',function(){
$('.panel-row-style-for-4-1').removeClass('past-active').removeClass('active');
wow.addBox(this);
}).scrollSpy();
$('#pgc-4-1-2').on('scrollSpy:enter',function(){
$(this).removeClass('animated');
$('.panel-row-style-for-4-1')
.removeClass('past-active')
.addClass('active')
.removeClass('animated')
.css({
'animation-name' : 'slideInLeft'
})
wow.addBox(this);
}).scrollSpy();

jQuery functions are not working

I modified the menu animation code from this page ...
https://codepen.io/designcouch/pen/Atyop
... and have the button open and close my menu (on click, it should show and hide #mainmenu ... by toggling the class .menuview on and off). However, it's not working. Not sure what happened ... and need some help. I've been racking my brain over this for awhile...
My code is below...
JAVASCRIPT. I don't see anything wrong...
// Menu Button
$(document).ready(function(){
$('#nav-icon3').click(function(){
$('#mainmenu').toggleClass('menuview');
$(this).toggleClass('open');
});
});
HTML (I'm using WordPress to show the menu)
<div id="mainmenu">
<?php wp_nav_menu( array( 'theme_location' => 'main-navigation', 'container' => '', 'items_wrap' => '<ul id="menu" class="%2$s">%3$s</ul>' ) ); ?>
</div>
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
STYLES (this is the responsive section of the stylesheet. Full stylesheet at http://www.silkvodka.com/wp-content/themes/silkvodka/style.css )
#mainmenu { position: absolute; top: -59999px; left: -59999px; /* Hide Menu */}
#mainmenu.menuview { position:absolute; top:60px; left:10px; display:block; float:none; width:146px; z-index:99; }
#nav-icon3 { display:block;
width: 60px;
height: 60px;
float:none;
position: absolute;
top:0; left:200px;
background-color:#494949;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 40px;
margin:0 10px;
background: #FFF;
border-radius: 1px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) { top: 17px; }
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) { top: 30px; }
#nav-icon3 span:nth-child(4) { top: 43px; }
#nav-icon3.open span:nth-child(1) { top: 14px; width: 0%; left: 50%;}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) { top: 14px; width: 0%; left: 50%; }
You can view the entire page here: http://www.silkvodka.com/cocktails/ (use a small browser window, otherwise, the responsive button wont be visible)

you are loading your javascript.js file before jquery. Your javascript.js file attempts to use jquery... switch these script tags around like:
<script type="text/javascript" src="http://www.silkvodka.com/wp-content/themes/silkvodka/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.silkvodka.com/wp-content/themes/silkvodka/js/javascript.js"></script>
This was evident by the console error "Uncaught ReferenceError: $ is not defined" which indicates you are attempting to use jquery berfore it's available.

When using wordpress, use jQuery instead of $
jQuery(document).ready(function(){
jQuery('#nav-icon3').click(function(){
jQuery('#mainmenu').toggleClass('menuview');
jQuery(this).toggleClass('open');
});
});
That should run :)

Adding preventDefault() and stopPropagation()

I am new in coding in general, most especially javascript.
I made a flip div effect. But I noticed that when clicking one .button to trigger the flip effect, all the other divs that are similar in a page are also triggered. So I am trying to add both .preventDefault() and .stopPropagation() when flipping a div, so far its a big FAIL
As a starter, I came up with this code..
$('.insidecontent .button').click(function () {
$('.insidecontent').addClass('flipped');
$('.insidecontent').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
$('.insidecontent').removeClass('flipped');
$('.insidecontent').addClass('unflipped');
});
Demo here: http://jsfiddle.net/uriri/ke7kqvvk/3/
A friend of mine suggested that I should use .parents() on the current target inside the .click() function. But after reading the jQuery documentation, I am totally lost!

You don't need to stop click event or prevent default. You just need to flip right element. Right not you are adding/removing classes to/from all .insidecontent, while you need to select only parent element of the clicked button:
$('.insidecontent .button').click(function () {
$(this).closest('.insidecontent').addClass('flipped').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
$(this).closest('.insidecontent').removeClass('flipped').addClass('unflipped');
});
Demo: http://jsfiddle.net/ke7kqvvk/5/
Or shorter optimized version can be:
$('.insidecontent').find('.button, .button-c').click(function () {
$(this).closest('.insidecontent').toggleClass('flipped unflipped');
});
Demo: http://jsfiddle.net/ke7kqvvk/6/

preventDefault() and stopPropagation() won't help here. You need to use a selector that's more specific than all the elements with the same class.
$('.insidecontent .button').click(function () {
$(this).closest('.insidecontent').addClass('flipped').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
$(this).closest('.insidecontent').removeClass('flipped').addClass('unflipped');
});
.content{
position: relative;
background: #ffffff;
width:100%;
text-align:center;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
._hasdata .insidecontent {
position: relative;
background: #ffffff;
margin-bottom:30px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000;
perspective: 1000px;
}
._hasdata .insidecontent .front {
position: relative;
z-index: 900;
width: 200px;
height: 200px;
background: #ededed;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
._hasdata .insidecontent .front .fcontent {
position:relative;
top:30%;
}
._hasdata .insidecontent.flipped .front {
z-index: 900;
-webkit-transform: rotateX(0deg) rotateY(180deg);
-moz-transform: rotateX(0deg) rotateY(180deg);
transform: rotateX(0deg) rotateY(180deg);
}
._hasdata .insidecontent .back {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 0;
z-index: 800;
-webkit-transform: rotateX(0deg) rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateX(0deg) rotateY(-180deg);
}
._hasdata .insidecontent.flipped .back {
z-index: 1000;
background: #E7E7E7;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
._hasdata .insidecontent .front,
._hasdata .insidecontent .back {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
._hasdata .insidecontent .button,
._hasdata .insidecontent.flipped .button-c {
z-index: 15;
display: block;
position: absolute;
bottom: 0;
margin: -30px 20px 20px;
opacity: 0;
-webkit-transition: opacity .1s linear;
-moz-transition: opacity .1s linear;
transition: opacity .1s linear;
}
._hasdata .insidecontent:hover .button,
._hasdata .insidecontent.flipped:hover .button-c {
opacity: 0.8;
}
._hasdata .insidecontent.unflipped .button-c {
display: none;
}
._hasdata .insidecontent.flipped ._lar {
height: 100%;
}
._hasdata .insidecontent.unflipped .bcontent {
display: none;
}
._hasdata .insidecontent.flipped .bcontent {
top: 30%;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="_hasdata">
<div class="insidecontent initalized unflipped">
<div class="front">
<span class="fcontent">FRONT CONTENT<br />HERE</span>
<a class="btt button">info</a>
</div>
<div class="back _lar">
<div class="bcontent">BACK INFO HERE</div>
<a class="btt button-c">go back</a>
</div>
</div>
</div>
<div class="_hasdata">
<div class="insidecontent initalized unflipped">
<div class="front">
<span class="fcontent">FRONT CONTENT<br />HERE</span>
<a class="btt button">info</a>
</div>
<div class="back _exif">
<div class="bcontent">BACK INFO HERE</div>
<a class="btt button-c">go back</a>
</div>
</div>
</div>
</div>

Have you learned about the "this" keyword yet? In a JQuery click handler, $(this) refers to the element that the handler is called on. So, if you put removeClass and addClass methods on $(this) it will only affect that one element. You can traverse using this too... so your code would look like this:
$('.insidecontent .button').click(function () {
$(this).parent().find('.insidecontent').addClass('flipped');
$(this).parent().find('.insidecontent').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
$(this).parent().find('.insidecontent').removeClass('flipped');
$(this).parent().find('.insidecontent').addClass('unflipped');
});
you may not even need the find method in your case, but it is better to be explicit.

jQuery panel slider opens with button click but won't close

I have a button on my page which opens a right panel by using jquery and modernizr frameworks. Button is placed on the rightmost place of screen. When it is clicked it slides to the left with the panel which it opens. The problem is, it won't slide back to where it was when it is clicked again.
HTML:
<!-- right panel -->
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container">
Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
Panel elements
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
Javascript:
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//clode the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
JsFiddle demo (You can see the CSS on JSFiddle)

jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
//use toggleClass
$('.cd-panel').toggleClass('is-visible');
});
});
JSFIDDLE
http://jsfiddle.net/Lecgrfvu/3/

Try this i used toggleClass (View in full screen mode to see the result)
jQuery(document).ready(function ($) {
//open the lateral panel
$('.cd-btn').on('click', function (event) {
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
});
//clode the lateral panel
});
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #424f5c;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: #424f5c;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 90%;
height: 100%;
top: 0;
background: #dbe2e9;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 20%;
}
}
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
.cd-btn {
visibility: visible !important;
position: absolute;
top: 400px;
left: -50px;
font-size: 16px;
padding: 10px;
margin: 0 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container"> Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
<ul class="collapsible-list">
<li class="nav-header">Views</li>
<li class="collapsible-list-subnav" ng-repeat="treeObject in treeObjects"><a class="collapsible-list-parent">{{treeObject.name}}</a>
<ul class="collapsible-list secondary">
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Public Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="publicView in treeObject.publicViews" ng-click="viewClick($event, publicView)"><a>{{publicView.title}}</a>
</li>
</ul>
</li>
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Private Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="privateView in treeObject.privateViews" ng-click="viewClick($event, privateView)"><a>{{privateView.title}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
</div>