Sliding divs only when clicking on buttons within the divs - javascript

I'm trying to use JQuery to slide a div with some content to the left and make the one from the right appear in the place of the previous one.
I already made it work but the thing is, it only works when I click on the div (box) that contains all the content.
I want to change that so it only changes when I click on the buttons within those divs (boxes).
Take a look at this: https://jsfiddle.net/Msiric/g8Lne34o/1/
So what I want to do is this:
$(document).ready(function () {
$('.buttons').click(function() {
$('.box').animate({
left: '-125%'
}, 500, function() {
$('.box').css('left', '150%');
$('.box').appendTo('#inputform');
});
$('.box').next().animate({
left: '25%'
}, 500);
});
});
Notice the $('.buttons).onclick instead of $('.box').onclick.
When I do this the code doesn't work as expected.
Thanks


You need to bind the event to buttons and animate the boxes using $(this).closest(".box")
Demo
$(document).ready(function() {
$('.buttons').click(function() {
$(this).closest(".box").animate({
left: '-125%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#inputform');
});
$(this).closest(".box").next().animate({
left: '25%'
}, 500);
});
});
#inputform {
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
height: 100px;
overflow: hidden;
}
.box {
position: absolute;
width: 100%;
height: 100px;
line-height: 300px;
font-size: 50px;
text-align: center;
left: 25%;
margin-left: -25%;
}
#box1 {
background-color: #333;
}
#box2 {
background-color: #333;
left: 150%;
}
#box3 {
background-color: #333;
left: 150%;
}
#box4 {
background-color: #333;
left: 150%;
}
#box5 {
background-color: #333;
left: 150%;
}
#requestbox {
width: 75%;
height: 25px;
display: block;
float: left;
margin-left: 3.1%;
border-radius: 5px;
font-size: medium;
line-height: 25px;
font-weight: bold;
transition: all 0.3s ease;
font-family: "Helvetica";
resize: none;
}
#requestbox:focus {
height: 100px;
}
.forms {
width: 75%;
height: 25px;
display: block;
float: left;
margin-left: 3.1%;
border-radius: 5px;
font-size: medium;
line-height: 25px;
font-weight: bold;
transition: all 0.3s ease;
font-family: "Helvetica";
resize: none;
}
.buttons {
display: block;
width: 18%;
height: 31px;
background: linear-gradient(rgb(70, 42, 24), rgb(244, 117, 33));
border-radius: 5px;
font-size: medium;
line-height: 15px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputform">
<div id="box1" class="box">
<textarea placeholder="Some text" id="requestbox" class="forms"></textarea>
<button id="next" class="buttons">Next</button>
</div>
<div id="box2" class="box">
<textarea placeholder="Some text" id="setbox" class="forms"></textarea>
<button id="set" class="buttons">Set</button>
</div>
<div id="box3" class="box">
<textarea placeholder="Some text" id="attachbox" class="forms"></textarea>
<button id="attach" class="buttons">Attach</button>
</div>
<div id="box4" class="box">
<textarea placeholder="Some text" id="confirmbox" class="forms"></textarea>
<button id="confirm" class="buttons">Confirm</button>
</div>
<div id="box5" class="box">
<textarea placeholder="Some text" id="publishbox" class="forms"></textarea>
<button id="publish" class="buttons">Publish</button>
</div>
</div>


change like this, add the event listener to the button fiddle
$(document).ready(function () {
$('.buttons').click(function() {
var $box = $(this).closest('.box');
$box.animate({
left: '-125%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#inputform');
});
$box.next().animate({
left: '25%'
}, 500);
});
});


Did you try using the bootstrap?
<div class="row" "><!-- Sliding image row -->
<div class="col-xs-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"><!-- Indicators -->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol><!-- /Indicators -->
<div class="carousel-inner"><!-- Wrapper -->
<div class="item active" ><!-- item1 -->
<img src="images/slide1.jpg" style="width:100%"/>
<div class="carousel-caption">
</div>
</div><!-- /item1 -->
<div class="item"><!-- item2 -->
<img src="images/slide2.jpg" style="width:100%" />
<div class="carousel-caption">
</div>
</div><!-- /item2 -->
</div><!-- /Wrapper -->
<!-- Left and right controls -->
<a class="left carousel-control " href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /mycarousel -->
</div><!-- /col-xs-12 -->
</div><!-- /Sliding image row -->
you can put your button instead of the part that puts an arrow for the next slide.

Related

bootstrap Carousel buttons don't work and indicators don't show

I am basically trying to recreate a bootstrap carousel with indicators but in my code I cannot see the indicators and the previous/next buttons don't work. I have found an alternate solution that I could adapt here but I would like to understand where mine goes wrong, as it's pretty much copy-pasted from Bootstrap's site. HTML and CSS Below:
/* Define our custom colors */
:root{
--livingcoral: #FC766AFF;
--stormgray: #B0B8B4FF;
--forestbiome: #184A45FF;
--sagegreen: #567572FF;
--marsala: #964F4CFF;
--granitegray: #696667FF;
--blacksteel: #080706;
--paper: #EFEFEF;
--goldleaf: #D1B280;
--silver: #594D46;
}
/* Boilerplate CSS for box sizing and body */
* {
box-sizing: border-box;
}
body{
background-color: var(--paper);
font-family: Georgia, Times, Courier;
color: var(--blacksteel);
}
/* Top Bar including opacity transition */
#welcome {
color: var(--paper);
text-align: center;
background-color: var(--blacksteel);
font-family: Courier, Times, Georgia;
transition: opacity 0.5s;
cursor: default;
/* background-image: url("BlueBuilding.jpg") */
}
#welcome:hover{
opacity: 0.7;
}
/* Top left personal quote, including transition when hovering */
#top-left-motivation{
text-align: left;
color: var(--silver);
overflow: hidden;
cursor: default;
}
.quote, .text {
display: block;
overflow: hidden;
transition: opacity 0.8s ease-in-out;
}
.quote{
height: auto;
width: auto;
opacity: 1;
}
.text{
height: 0;
width: 0;
opacity: 0;
}
#top-left-motivation:hover .quote{
height: 0;
width: 0;
opacity: 0;
}
#top-left-motivation:hover .text{
height: auto;
width: auto;
opacity: 1;
font-style: italic;
}
/* Top right list including link hover effects */
#top-right-list{
text-align: right;
font-family: Georgia;
}
.list-inline-item{
text-align: right;
margin-left: 15px;
}
.info-link{
color: var(--silver);
transition: color 0.3s, border 0.3s, padding 0.3s;
}
.info-link:link { text-decoration: none; }
.info-link:visited { text-decoration: none; }
.info-link:hover {
color: var(--goldleaf);
text-decoration: none;
cursor: pointer;
border-top: 1px solid var(--goldleaf);
border-bottom: 1px solid var(--goldleaf);
/* background-color: lightskyblue; */
/* border-radius: 2px; */
padding: 4px 5px 5px 5px;
}
.info-link:active {
text-decoration: none;
color: brown;
}
/* personalt statement formatting */
#personal-statement{
text-align: center;
font-family: Georgia;
/* color: #327c9c; */
}
#maincarousel{
margin: 100px 100px 100px 100px;
padding: 50px 50px 50px 50px;
background-color: var(--silver);
border-radius: 5px;
color: var(--paper);
}
/* Special thanks to W3Schools for the
timeline tutorial: https://www.w3schools.com/howto/howto_css_timeline.asp */
/* Container around content */
.timeline {
position: relative;
max-width: 1400px;
margin: 0 auto;
}
/* Uncomment if you want the circles on the timeline */
.timeline::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: var(--paper);
border: 2px solid var(--blacksteel);
border-radius: 50%;
z-index: 2;
left: calc(50% - 7px);
top: 0;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: var(--blacksteel);
top: 2px;
bottom: 0px;
left: 50%;
}
.container-timeline {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* For Javascript to hide/reveal elements on scroll */
.container-timeline {
visibility: hidden;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.container-timeline.show{
transform: none;
visibility: visible;
opacity: 1;
}
.left-side {
left: 0;
}
.right-side {
left: 50%;
text-align: right;
}
/* Add lines to the left container (pointing right) */
.left-side::before {
content: " ";
height: 2px;
position: absolute;
top: 30px;
width: 40px;
z-index: 1;
right: 0px;
background: var(--blacksteel);
}
/* Add lines to the right container (pointing left) */
.right-side::before {
content: " ";
height: 2px;
position: absolute;
top: 30px;
width: 40px;
z-index: 1;
left: 0px;
background: var(--blacksteel);
}
/* Fix the circle for containers on the right side */
.right-side::after {
left: -9px;
}
/* The actual content */
.content-timeline {
padding: 20px 30px;
position: relative;
border-radius: 6px;
border: 1px solid var(--blacksteel);
}
.left-side .content-timeline {
background: linear-gradient(45deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
.right-side .content-timeline {
background: linear-gradient(225deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
/* format the timeline boxes */
.timeline-heading{
color: var(--paper);
font-family: Courier;
}
.left-side .timeline-heading{
border-image-slice: 1;
border-bottom: 1px solid;
border-image-source: linear-gradient(225deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
.right-side .timeline-heading{
border-image-slice: 1;
border-bottom: 1px solid;
border-image-source: linear-gradient(45deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
.timeline-text{
color: var(--paper);
font-family: Georgia;
text-decoration: bold;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
#media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 25px;
}
.timeline::before {
left: 18px;
}
/* Full-width containers */
.container-timeline {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all lines are pointing leftwards */
.container-timeline::before {
left: 30px;
}
/* Make sure all circles are at the same spot */
.left-side::after, .right-side::after {
left: 15px;
}
/* Make all right containers behave like the left ones */
.right-side {
left: 0%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>work exp.</title>
</head>
<body class="workexp">
<h1 id="welcome">
Work experience.
</h1>
<div class="container-fluid" id="head">
<div class="row justify-content-md-center">
<div class="col" id="top-left-motivation">
<span class="quote">Personal Quote.</span>
<span class="text">Transition text</span>
</div>
<div class="col" id="top-right-list">
<ul class="list-inline">
<li class="list-inline-item"><a class="info-link" href="index.html" class="">Home.</a></li>
<li class="list-inline-item"><a class="info-link" href="aboutme.html">About me.</a></li>
<li class="list-inline-item"><a class="info-link" href="contact.html">Contact.</a></li>
</ul>
</div>
</div>
</div>
<div id="maincarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#maincarousel" data-slide-to="0" class="active"></li>
<li data-target="#maincarousel" data-slide-to="1" class=""></li>
<li data-target="#maincarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active text-center p-4">
<p>lorem ipsum (imagine longer text)</p>
</div>
<div class="carousel-item text-center p-4">
<p>lorem ipsum v2 (imagine longer text)</p>
</div>
<div class="carousel-item text-center p-4">
<p>lorem ipsum v2 (imagine longer text)</p>
</div>
</div>
<a class="carousel-control-prev" href="#maincarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#maincarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</body>
</html>
Also JSfiddle here https://jsfiddle.net/j9skLwye/2/
Any help appreciated.

After some playing around, i found out that adding the -bs property to data-slide (i.e. data-bs-slide) solved the issue and my carousel works.
<div id="maincarousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#maincarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></li>
<li data-bs-target="#maincarousel" data-bs-slide-to="1" class=""></li>
<li data-bs-target="#maincarousel" data-bs-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active text-center p-4">
<p>lorem ipsum (imagine longer text)</p>
</div>
<div class="carousel-item text-center p-4">
<p>lorem ipsum v2 (imagine longer text)</p>
</div>
<div class="carousel-item text-center p-4">
<p>lorem ipsum v3 (imagine longer text)</p>
</div>
</div>
<a class="carousel-control-prev" href="#maincarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#maincarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>

jQuery: animating position isn't affecting DOM

I'm trying to animate the top value of my CSS in order to create a dropdown nav when the user clicks the hamburger button.
The CSS doesn't seem to be getting applied to the element when I view in the Chrome inspector, but I've tried the hide() function on the same element and that works fine.
HTML:
<div class="top section-reversed">
<div class="container">
<div class="row">
<div class="col-2">
<span class="icon icon-logo-ctr"></span>
</div>
<div class="col-2 ml-auto">
<a id="asdf" href="#" class="icon icon-hamburger"></a>
</div>
</div>
</div>
</div>
<div class="nav-mobile">
<div class="content">
<a class="icon icon-close" href="#"></a>
<div class="cta-consult">
<h5>000000</h5>
<span class="telephone">000000</span>
</div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Prices</li>
<li>Furniture</li>
<li>Contact</li>
</ul>
<div class="social-header social-header-mobile">
<img src="image/social-whatsapp.png" alt="Placeholder" />
<img src="image/social-instagram.png" alt="Placeholder" />
<img src="image/social-facebook.png" alt="Placeholder" />
<img src="image/social-twitter.png" alt="Placeholder" />
</div>
</div>
</div>
JS:
$(document).ready(function() {
// nav-mobile
$('#asdf').click(function() {
$('.nav-mobile').animate({
'top': '+=540'
},
5000, function() {
// Animation complete.
});
});
});
CSS:
.nav-mobile {
background: #fff;
color: #000;
height: 100%;
left: auto;
overflow: hidden;
position: fixed;
/*top: 65px;*/
top: -605px;
width: 100%;
z-index: 1;
}
.nav-mobile > .content {
padding: 20px;
}
.nav-mobile .icon-close {
color: #797979;
float: right;
padding: 0;
}
.nav-mobile .cta-consult {
clear: both;
}
.nav-mobile .cta-consult h5 {
font-size: 14px;
margin: 0 0 2px;
letter-spacing: 0;
}
.nav-mobile .cta-consult .telephone {
font-size: 30px;
letter-spacing: .02em;
}
.nav-mobile ul {
border-top: #d0d0d0 solid 1px;
display: block;
list-style: none;
margin: 30px 0 20px;
padding: 20px 0 0;
width: 100%;
}
.nav-mobile a {
color: #000;
display: block;
text-transform: uppercase;
letter-spacing: .25em;
padding: 10px 0;
}

Materialize collapsible-accordion not working IOS 13

My problem
I am working on a website which is using materialize sidenav.
When I try to open the collapsible-accordion on my iphone 7 (IOS 13.3.1) in safari it does not work.
But when I try it on a other browser like firefox it works well.
The solution I found on github did not work for me.
I have no idea how to fix my problem
Any hep/tips are welcome.
Thanks in advance.
My code
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
// var options =
var instances = M.Dropdown.init(elems, {coverTrigger: false});
});
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
$(document).ready(function() {
$('.collapsible').collapsible();
})
input:focus {
border-bottom: 1px solid #1C9CDA !important;
box-shadow: 0 1px 0 0 #1C9CDA !important;
}
label.active {
color: #1C9CDA !important;
}
.standard-bgcolor{
background-color: #1C9CDA !important;
}
.standard-color{
color: #1C9CDA !important;
}
.sidenav{
z-index:1001 !important;
}
.nav{
padding-left: 16px !important;
}
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
html, body {
margin: 0;
height: 100%;
}
#map{
height:100%;
width: 100%;
}
.dropdown-content{
width: max-content !important;
height:auto !important;
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
position: absolute !important;
bottom: 23px;
right: 20px;
width: 200px;
}
#form_btn{
float: none;
clear: both;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
margin-bottom: 0 !important;
}
/* Add styles to the form container */
.form-popup{
max-width: 400px;
min-width: 300px;
width: 25%;
}
/*form box*/
.form-container {
padding: 20px !important;
background-color: white;
}
.login{
display: inline;
font-size: 30px;
}
.Sign-up, .Sign-up:visited{
cursor: pointer;
font-size: 24px;
text-decoration: underline;
float: none !important;
clear: both;
}
#form_full{
background-color: white;
width: 100%;
height: 60%;
position: absolute;
top: 20%;
left: 20%;
opacity: 0.9;
}
#Sign-up{
font-size: 25px;
text-transform: capitalize;
height: 50px;
width: auto;
position: absolute;
right: 50%;
border-radius: 10px;
}
.not-a-user{
font-size: 24px;
color: #707070;
}
.Cancel{
font-size: 35px;
color: #707070;
}
.Sign-up_Cancel{
font-size: 35px;
text-decoration: underline;
}
#row_link{
margin-left: 0;
}
.alert {
position: relative;
width: 100%;
padding: 15px;
background-color: #f44336;
color: white;
text-align: center;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
#login_alert{
top: 0;
}
/*table with gps trackers*/
.Assets{
width: calc(100% - 100px);
margin: 0px 50px 0px 50px;
}
.link{
color: #1a9988;
}
.link:hover{
color: #0f7567;
}
/*popup add assets style*/
/* The Modal (background) */
.add_assets {
left: 0;
top: 10%;
width: 100%; /* Full width */
height: auto; /* Full height */
overflow: auto; /* Enable scroll if needed */
max-height: none !important;
padding-bottom: 30px !important;
}
#submit{
font-size: 25px;
text-transform: capitalize;
height: 50px;
width: 20%;
position: absolute;
right:30px;
border-radius: 10px;
}
#Cancel_add{
font-size: 25px;
text-transform: capitalize;
height: 50px;
width: 20%;
position: absolute;
left:30px;
border-radius: 10px;
background-color: #f44336;
}
.animate {
-webkit-animation: animatezoom 5s;
animation: animatezoom 5s
background-color: #fefefe;
}
/*blockquote*/
.blockquote_white {
border-left-color: white;
}
/*info_box*/
.info_box{
height: auto;
max-height: 100%;
overflow: auto;
padding: 0 25px 0 25px;
}
/*routing box*/
.leaflet-routing-alternatives-container, .leaflet-bar{
display: none;
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
#media only screen and (max-width: 600px) {
.Assets::-webkit-scrollbar {
z-index:10;
}
/*asset table*/
.Assets{
width: 100%;
margin: 0px 0px 0px 0px;
}
#submit, #Cancel_add{
width: auto;
}
.modal-content{
padding: 0;
}
#form_full{
width: 100%;
left: 0;
}
#Sign-up{
width: auto;
right: 10px;
}
.Cancel{
margin-left: 10px;
}
#e-mail, #password, #name , #GPS_ID, #info{
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<ul id="dropdown1" class="dropdown-content">
<li><a title="Add Asset" class="modal-trigger grey-text text-darken-1" href="#modal1"><i class="material-icons">add</i>Voeg asset toe</a></li>
<li><a title="Edit profile" class="modal-trigger grey-text text-darken-1" href="#modal2"><i class="material-icons left ">person</i>Edit profile</a></li>
</ul>
<ul class="sidenav" id="mobile-demo">
<li class="sidenav-header standard-bgcolor ">
<div class="row">
<div class="col s4">
<h4 class="white-text">Asset tracking</h4>
</div>
</div>
</li>
<li class="no-padding nav">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header"><i class="material-icons left">home</i>Home<i class="material-icons right">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul>
<li><a title="Add Asset" class="modal-trigger grey-text text-darken-1" href="#modal1"><i class="material-icons">add</i>Voeg asset toe</a></li>
<li><a title="Edit profile" class="modal-trigger grey-text text-darken-1" href="#modal2"><i class="material-icons left ">person</i>Edit profile</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li><a class="nav" title="Map" href="index.php"><i class="material-icons">map</i>Kaart</a></li>
<li><a class="nav" title="Uitloggen" href="?logout=1"><i class="material-icons left">exit_to_app</i>Uitloggen</a></li>
</ul>
<nav>
<div class="nav-wrapper standard-bgcolor">
<i class="material-icons">menu</i>
Asset Tracking
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li class="active"><a title="Home" class="dropdown-trigger" data-target="dropdown1" href="#!"><i class="material-icons left">home</i>Home<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a title="Map" href="index.php"><i class="material-icons left">map</i>Kaart</a></li>
</ul>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="right"><a title="Uitloggen" href="?logout=1"><i class="material-icons right">exit_to_app</i>Uitloggen</a></li>
</ul>
</div>
</nav>
<body>
<!-- add asset form -->
<div id="modal1" class="modal add_assets modal2">
<div class="modal-content">
<h4 class="standard-color">Voeg asset toe</h4>
<form class="col s12 animate" action="" method="post">
<div class="row">
<div class="input-field col s12" id="name">
<input class="validate" type="text" required name="name">
<label for="Name">Asset name</label>
<span class="helper-text" data-error="Veld mag niet leeg zijn" data-success="correct">Geef de GPS tracker een naam</span>
</div>
<div class="row">
<div class="input-field col s12" id="activatiecode">
<input class="validate" type="text" required name="activatiecode">
<label for="activatiecode">Activatiecode</label>
<span class="helper-text" data-error="Moet uniek zijn" data-success="correct">Activatiecode van de tracker (IMEI + korte activatie string)</span>
</div>
</div>
<div class="row">
<div class="input-field col s12" id="info">
<input class="validate" type="text" required name="info">
<label for="Info">Other gps info</label>
<span data-error="Veld mag niet leeg zijn" data-success="correct" class="helper-text">Extra info over de GPS</span>
</div>
</div>
<div class="input-group">
<button id="submit" class="btn waves-effect standard-bgcolor" type="submit" name="submit">Add</button>
</div>
<button id="Cancel_add" type="button" class="btn waves-effect modal-close" >Cancel</button>
</div>
</form>
</div>
</div>
<!-- Update profile form -->
<div id="modal2" class="modal add_assets modal2">
<div class="modal-content">
<h4 class="standard-color">Update account</h4>
<form class="col s12 animate" action="" method="post">
<div class="row">
<div class="input-field col s12" id="name">
<input value="<?=$email?>" class="validate" type="email" required name="email">
<label for="Name">E-mail Address</label>
<span class="helper-text" data-error="Geen correct e-mailadres" data-success="correct">voorbeeld#voorbeeld.nl</span>
</div>
<div class="row">
<div class="input-field col s12" id="password">
<input minlength="10" required type="password" class="validate" name="password_1">
<label for="Password">Password</label>
<span class="helper-text" data-error="Wachtwoord is te kort" data-success="correct">10 karakters lang</span>
</div>
</div>
<div class="row">
<div class="input-field col s12" id="password">
<input minlength="10" required type="password" class="validate" name="password_2">
<label for="Password">Confrim password</label>
<span class="helper-text" data-error="Wachtwoord is te kort" data-success="correct">10 karakters lang</span>
</div>
</div>
<div class="input-group">
<button id="submit" class="btn waves-effect standard-bgcolor" type="submit" name="update">Update</button>
</div>
<button id="Cancel_add" type="button" class="btn waves-effect modal-close">Cancel</button>
</div>
</form>
</div>
</div>

Ok for a start your JS is not properly formatted. You have 4 separate document-ready functions, and a mix of vanilla JS and jQuery inits. Choose 1 and stick with it. You just need one document ready, then all the code that needs to wait until the dom is loaded sits inside.
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
// var options =
var instances = M.Dropdown.init(elems, {coverTrigger: false});
});
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
$(document).ready(function() {
$('.collapsible').collapsible();
})
I have tidied that up and put your code into a codepen, and it is working perfectly fine for me (iPhone XR 13.3.1 Safari). Can you text this?
document.addEventListener('DOMContentLoaded', function() {
var modals = document.querySelectorAll('.modal');
var modal = M.Modal.init(modals);
var triggers = document.querySelectorAll('.dropdown-trigger');
var trigger = M.Dropdown.init(triggers, {coverTrigger: false});
var sidenavs = document.querySelectorAll('.sidenav');
var sidenav = M.Sidenav.init(sidenavs);
$('.collapsible').collapsible();
});
https://codepen.io/doughballs/pen/QWbQPew

Change big image onmouseover thumbnails from gallery carousel

The situation: I created an image gallery and in the right side an image carousel. In the left/right side of the image carousel I'm having 2 arrows and I can see the images from the left/right. When onmouseover one image from the carousel, the bigger image should be changed with the hovered image and when onmouseout the old big image should be back.
The problem: The onmouseover is working only to the first image from the top of the row. So if you hover over the first image from the top, the big image is changed. Also, if you click the arrow from the right and then hover first image it works. But if you hover other images, is not working.
What I tried: I tried different versions and combinations to access the image from the div carouse-item. I tried to receive the image source of hovered image by using var source = $(this).attr('src'); and then by updating main image source. $('.main').attr('src', source);
The code: Sorry for having too much code but I could not show you otherwise. Also, please see JSFiddle if is not working: http://jsfiddle.net/cpL85t2h/
var original = $('.main').attr('src');
$('.thumbnail').mouseover(function() {
// retrieve image source
var source = $(this).attr('src'); // retrieve image source of hovered image
$('.main').attr('src', source); // update main image source
})
.mouseout(function() {
$('.main').attr('src', original); // restore original image source
});
//This is for the gallery carousel
$('.carousel .carousel-item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
body {
background: green;
padding: 20px;
font-family: Helvetica;
}
.column #gallery-image {
width: 200px;
height: 215px;
object-fit: cover;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.gallery-item {
width: 200px;
height: 215px;
float: left;
padding: 0px;
margin-bottom: 6%;
}
#img-responsive {
width: 60px;
height: 50px;
}
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33%)
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
.item-container {
width: 96%;
display: block;
flex-direction: row;
align-items: center;
margin-bottom: 4%;
margin-left: -0.5%;
margin-top: 5%;
padding-bottom: 5%;
border-bottom: 1px solid #ccc;
}
#img-responsive {
width: 60px;
height: 50px;
}
.image-carousel {
display: block;
width: 34%;
margin-left: 14%;
margin-bottom: 5%;
}
.col-4 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 3px;
padding-left: 3px
}
.carousel-control-prev {
position: absolute;
bottom: 0;
left: 0;
top: auto;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 7px;
margin-bottom: 1%;
margin-left: -8%;
color: black;
font-size: 17px;
text-decoration: none;
}
.carousel-control-next {
position: absolute;
bottom: 0;
right: 0;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 7px;
top: auto;
margin-bottom: 1%;
margin-right: -8%;
color: black;
font-size: 17px;
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"></script>
<div class="gallery row clearfix">
<div class="row">
<div class="column">
<div class="products-content">
<div class="gallery-item">
<img src="https://old.intersport.co.uk/images/puma-mens-evo-training-yellow-football-t-shirt-p2092-5311_image.jpg" id="gallery-image" class="main">
</div>
<div class="image-carousel">
<div class="row">
<div id="recipeCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="thumbnail" src="https://5.imimg.com/data5/EJ/GB/MY-2190204/football-sports-t-shirt-500x500.jpg" id="img-responsive">
</div>
<div class="carousel-item">
<img class="thumbnail" src="https://old.intersport.co.uk/images/puma-kids-evotrg-red-football-training-t-shirt-p5342-14566_image.jpg" id="img-responsive">
</div>
<div class="carousel-item">
<img class="thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/517K4f5BthL._SL1000_.jpg" id="img-responsive">
</div>
<div class="carousel-item">
<img class="thumbnail" src="https://media-11teamsports.de/ArticleOriginals/adidas-originals-sc-t-shirt-football-damen-weiss-lifestyle-streetwear-trend-alltag-casual-freizeit-ce1669.jpg" id="img-responsive">
</div>
</div>
<a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
<span class="fa fa-chevron-left" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
<span class="fa fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I trying to resolve your problem.
Use $(document).ready
$(document).ready(function(e) {
var original = $('.main').attr('src');
$('.thumbnail').mouseover(function() {
// retrieve image source
var source = $(this).attr('src'); // retrieve image source of hovered image
$('.main').attr('src', source); // update main image source
})
.mouseout(function() {
$('.main').attr('src', original); // restore original image source
});
});
//This is for the gallery carousel
$('.carousel .carousel-item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}});
body {
background: green;
padding: 20px;
font-family: Helvetica;
}
.column #gallery-image {
width: 200px;
height: 215px;
object-fit: cover;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.gallery-item {
width: 200px;
height: 215px;
float: left;
padding: 0px;
margin-bottom: 6%;
}
#img-responsive {
width: 60px;
height: 50px;
}
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33%)
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
.item-container {
width: 96%;
display: block;
flex-direction: row;
align-items: center;
margin-bottom: 4%;
margin-left: -0.5%;
margin-top: 5%;
padding-bottom: 5%;
border-bottom: 1px solid #ccc;
}
#img-responsive {
width: 60px;
height: 50px;
}
.image-carousel {
display: block;
width: 34%;
margin-left: 14%;
margin-bottom: 5%;
}
.col-4 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 3px;
padding-left: 3px
}
.carousel-control-prev {
position: absolute;
bottom: 0;
left: 0;
top: auto;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 7px;
margin-bottom: 1%;
margin-left: -8%;
color: black;
font-size: 17px;
text-decoration: none;
}
.carousel-control-next {
position: absolute;
bottom: 0;
right: 0;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 7px;
top: auto;
margin-bottom: 1%;
margin-right: -8%;
color: black;
font-size: 17px;
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="gallery row clearfix">
<div class="row">
<div class="column">
<div class="products-content">
<div class="gallery-item">
<img src="https://old.intersport.co.uk/images/puma-mens-evo-training-yellow-football-t-shirt-p2092-5311_image.jpg" id="gallery-image" class="main">
</div>
<div class="image-carousel">
<div class="row">
<div id="recipeCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="thumbnail" src="https://5.imimg.com/data5/EJ/GB/MY-2190204/football-sports-t-shirt-500x500.jpg" id="img-responsive">
</div>
<div class="carousel-item">
<img class="thumbnail" src="https://old.intersport.co.uk/images/puma-kids-evotrg-red-football-training-t-shirt-p5342-14566_image.jpg" id="img-responsive">
</div>
<div class="carousel-item">
<img class="thumbnail" src="https://images-na.ssl-images-amazon.com/images/I/517K4f5BthL._SL1000_.jpg" id="img-responsive">
</div>
<div class="carousel-item">
<img class="thumbnail" src="https://media-11teamsports.de/ArticleOriginals/adidas-originals-sc-t-shirt-football-damen-weiss-lifestyle-streetwear-trend-alltag-casual-freizeit-ce1669.jpg" id="img-responsive">
</div>
</div>
<a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
<span class="fa fa-chevron-left" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
<span class="fa fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

The problem is that the dynamic element isnt in the DOM on page load... Fix the second function and it will work..
Switch position on the two functions..
original = $('.main').attr('src');
//This is for the gallery carousel
$('.carousel .carousel-item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
$('.thumbnail').mouseover(function() {
// retrieve image source
source = $(this).attr('src'); // retrieve image source of hovered image
$('.main').attr('src', source); // update main image source
})
.mouseout(function() {
$('.main').attr('src', original); // restore original image source
});
Also added classes instead of ID's and switched in the CSS...
See updated fiddle

Hide sliding sidebar and change icon onclick

The following code I have used:
// Code goes here
function toggleMenu(){
$('.menu_sample').toggleClass('hide');
$('.content').toggleClass('pushed');
}
/* Styles go here */
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
border: solid 1px;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
transition: left 1s ease-out;
margin-left: -2%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 25%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<span style="color:blue; font-weight:bold;">Dashboards</span>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div class="content pushed top_mar">
<button onclick="toggleMenu()">
<span id="menu-button">
<span class="glyphicon glyphicon-chevron-right" id="glymphi" style="margin-left:14%;">Button</span>
</span>
</button>
</div>
<div style="margin-left:-2%; margin-top:5%; height: 625px;" >
<iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe>
</div>
show and hide onclick
I am able to show and hide onclick of button. My requirement is when I click on that button its icon should change and if I click inside sidebar (on sidebar items) sidebar should hide. Can anyone improve my script to achieve it?

$(document).ready(function(){
$('.sidebar').on('click','a',function(e){
var href = $(this).attr('href');
$('iframe').attr('src', href);
e.preventDefault();
//console.log(e.target);
toggleMenu();
})
});
function toggleMenu(){
$('.menu_sample').toggleClass('hide');
$('.content').toggleClass('pushed');
$('#menu-button').find('.glyphicon')
.toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
}
/* Styles go here */
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100%;
border: solid 1px #eee;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
transition: left 1s ease-out;
margin-left: -2%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 5%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<span style="color:blue; font-weight:bold;">Dashboards</span>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div class="content pushed top_mar">
<button class="btn btn-default" onclick="toggleMenu()">
<span id="menu-button">
<span class="glyphicon glyphicon-chevron-right" id="glymphi" style="margin-left:14%;">Button</span>
</span>
</button>
</div>
<div style="margin-left:-2%; margin-top:5%; height: 625px;" >
<iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe>
</div>

Categories