Develop Reference

GTM Invalid HTML, CSS, or JavaScript found in template

I am using GTM's "Custom HTML Tag" option with the my below code but it is giving me the following error when I try to publish it: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't support or recognize certain tag attributes. I have tested my code, and no error prompts show up in the console either. It is a standard bootstrap modal:
function myFunction() {
var copyText = document.getElementById("myInput");
navigator.clipboard.writeText(copyText.innerHTML);
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copied: " + copyText.innerHTML;
}
function outFunc() {
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copy";
}
$("#myModal").modal();
body {
font-family: 'Varela Round', sans-serif
}
.modal-login {
color: #636363;
max-width: 850px;
width: 100%;
margin: 30px auto;
background-image: none!important
}
.modal-login .modal-content {
padding: 20px;
min-height: 586px;
border-radius: 5px;
margin: 1rem;
background-color: #eaebeb;
background-image: url(https://media-services.dcm-inc.com/couponsites/static/resources/img/festival.png);
background-size: 100%;
background-repeat: no-repeat
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
margin-top: 130px
}
.modal-login img {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 40%
}
.modal-login .form-group {
position: relative
}
.modal-login h4 {
text-align: center;
font-size: 20px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px
}
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%
}
#media screen and (max-width:600px) {
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%
}
}
.modal-login .form-control:focus {
border-color: #fcda7b
}
.modal-login .btn,
.modal-login .form-control {
min-height: 40px;
border-radius: 30px
}
.modal-login .hint-text {
text-align: center;
padding-top: 10px
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px
}
.button,
.modal-login .btn {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%);
border: none;
line-height: normal
}
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%
}
#media screen and (max-width:600px) {
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
}
.modal-login .custom-social {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%
}
.modal-login .btn:focus,
.modal-login .btn:hover {
opacity: .7
}
.trigger-btn {
display: inline-block;
margin: 100px auto
}
.contest-social {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.modal-login .fa:hover {
opacity: .7
}
.modal-login .contest-social-facebook {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-twitter {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-youtube {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-instagram {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flexC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
-webkit-flex-flow: row wrap
}
.modal-title img {
margin: 1rem;
max-width: 100px;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ddd
}
.modal-title p {
font-size: 20px;
font-weight: 500;
max-width: 300px;
color: #000
}
.ccme {
color: #fd5c88
}
.codelinkbox {
margin: 0;
position: relative;
text-align: center;
width: auto;
position: relative
}
.codeValue {
border: 2px dashed currentColor;
font-size: 28px;
height: 50px;
line-height: 48px;
padding: 0 15px;
border-right: none;
border-radius: 0;
display: inline-block;
white-space: nowrap;
cursor: pointer;
border-radius: 6px 0 0 6px!important;
font-weight: 700;
color: #000
}
.buttonBtn.copy {
background-color: currentColor;
cursor: pointer;
font-size: 16px;
height: 50px;
line-height: 42px;
margin: 0;
padding: 0 15px;
position: relative;
text-transform: capitalize;
overflow: hidden;
min-width: 0;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
border-radius: 0 6px 6px 0
}
.buttonBtn.copy:hover {
background: #6ba62c;
color: #fff
}
.copy span {
color: #fff
}
.m1 {
margin: 1rem auto
}
.txtC {
text-align: center
}
.buttonBtn {
position: relative;
cursor: pointer;
font-size: 15px;
left: 0;
top: 0;
margin: 0;
height: 54px;
min-width: 180px;
border: 0;
outline: 0;
padding: 0 15px;
border-radius: 10px;
line-height: 54px
}
.arrRight {
color: #fff;
font-weight: 700
}
.arrRight:after {
content: '\2192';
display: inline-block;
color: #fff
}
.emailIcon {
width: 24px;
max-width: 24px;
margin: 0 5px
}
.termsto {
margin: 3rem 0
}
.sendemail {
font-size: 13px;
margin: 10px 0
}
#media all and (max-width:540px) {
.modal-title {
text-align: center
}
.modal-login .modal-header {
margin-top: 40px
}
}
.testtip {
position: relative;
display: inline-block;
}
.testtip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.testtip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.testtip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto%7CVarela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login border">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<div class="flexC">
<img src="https://res.cloudinary.com/csnetworkco/image/upload/c_scale,h_150,w_150/csnimages/Noon_568012.jpg" alt="Noon Discount Code" title="Noon Discount Code" width="150" height="150" loading="lazy">
<p>Up To 70% Off Sale + 10% Off Using Noon Coupon Code</p>
</div>
</div>
<div class="modal-body">
<div class="codelinkbox flexC m1">
<div id="myInput" class="codeValue">YB26</div>
<div class="testtip">
<button class="buttonBtn copy ccme" onclick="myFunction()" onmouseout="outFunc()"><span id="myTooltip">Copy</span></button>
</div>
</div>
</div>
<div class="row termsto">
<div class="col-sm-8">
<p><strong>Things to remember:</strong></p>
<ul>
<li>Don't forget to paste the code in the checkout during the purchase</li>
<li>Get 10% Off for New Customers & 5% Off for Returning Customers. </li>
<li>Code Usage: 2 times per customer.</li>
<li>Always contact our customer support team if there is any issues</li>
<li>You can always share the code</li>
</ul>
</div>
<div class="col-sm-4 txtC ">
<button class="buttonBtn ccme button" id=""><span class="arrRight">VISIT SITE </span></button>
</div>
</div>
</div>
</div>
</div>
</div>

I found what the issue was, in the img tag I was adding an attribute loading="lazy" due to which the invalid HTML CSS or JS error was being thrown
They really need to highlight what part of the code is the problem
I removed the above mentioned attribute and am now able to publish the tag

Mediaelementplayer not working in mobile phones

I have this code Codepen to modify a working mp3 player, it works fine everywhere, even in small windows in desktop. but the buttons wouldn't show up in mobile phones. I figured out it was because of the Mediaelementplayer that I'm using, but could not solve the problem. Thanks If you would fork that pen and show me a better way to do it.
var audio = {
init: function() {
var $that = this;
$(function() {
$that.components.media();
});
},
components: {
media: function(target) {
var media = $('audio.fc-media', (target !== undefined) ? target : 'body');
if (media.length) {
media.mediaelementplayer({
audioHeight: 40,
features : ['playpause', 'current', 'duration', 'progress', 'volume', 'tracks', 'fullscreen'],
alwaysShowControls : true,
timeAndDurationSeparator: '<span></span>',
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
}
},
},
};
audio.init();
*:focus{
outline: none;
}
html {
background: #f2f2f2;
height:100%;
}
body {
margin: 0;
font-family: "Raleway",sans-serif;
height:100%;
}
h1 {
margin: 0;
font-size: 33px;
color: #fff;
padding: 0 10%;
}
h3 {
margin: 0;
font-size: 17px;
font-weight: 500;
color: #ccc;
padding: 0 10%;
}
.container {
display: block;
width: 100%;
height: 750px;
margin: auto;
overflow: hidden;
background-repeat: repeat;
background-size: cover;
}
.music-player {
display: block;
position: relative;
width: 400px;
height: 570px;
margin: auto;
margin-top: auto;
border-radius: 0 0 10px 10px;
background: transparent linear-gradient(to bottom,rgba(10,11,31,0.9) 50%,rgb(10,11,31) 70%) repeat scroll 0 0;
box-shadow: 1px 10px 20px 5px #222;
}
.series-name
{ font-family:"Times New Roman", Times, serif;
font-size:39px;
text-align:center;
width:100%;
margin: auto;
margin-top: auto;
color:#ccc;
width:400px;
background:#090b1f;
box-shadow: 1px 10px 20px 5px #222;
border-radius: 10px 10px 0 0;
`
}
.cover {
float: left;
width: 100%;
height: 66%;
}
.cover img {
display: block;
position: absolute;
top: 8%;
left: 14%;
width: 70%;
margin: auto;
text-align: center;
}
.titre {
float: left;
width: 100%;
}
.lecteur {
width: 100%;
display: block;
height: auto;
position: relative;
float: left;
}
.mejs__button>button:focus {
outline: 0px dotted #999;
}
.mejs__container {
position: relative;
background-color: transparent;
min-width: auto !important;
}
.mejs__controls {
padding: 0 10%;
background: transparent !important;
display: block;
position: relative;
}
.mejs__controls div {
display: block;
float: left;
position: relative;
}
.mejs__controls .mejs__playpause-button {
position: absolute !important;
right: 8%;
bottom: 95%;
width: 40px;
}
.mejs__controls .mejs__playpause-button button {
display: block;
width: 40px;
height: 40px;
padding: 0;
border: 0;
font-family: FontAwesome;
font-size: 23px;
color: #5bbb95;
background: transparent;
padding: 0;
margin: 0;
}
.mejs__controls .mejs__play button:before{
content:"\f04b";
}
.mejs__controls .mejs__pause button:before{
content:"\f04c";
}
.mejs__controls .mejs__volume-button button {
display: block;
width: 40px;
height: 40px;
padding: 0;
border: 0;
font-family: FontAwesome;
font-size: 20px;
color: #5bbb95;
background: transparent;
margin: 0;
padding: 0;
}
.mejs__controls .mejs__mute button:before {
content: "\f028";
}
.mejs__controls .mejs__unmute button:before {
content: "\f026";
}
.mejs__controls .mejs__time {
width: 100%;
margin-top: 7%;
margin-bottom: 3%;
color: #fff;
height: auto;
padding: 0;
overflow: visible;
min-width: 100%;
}
.mejs__controls .mejs__time span {
font-size: 15px;
}
.mejs__controls span.mejs__duration {
float: right;
text-align: right;
color: #ccc;
}
.mejs__controls span.mejs__currenttime {
font-weight: 700;
float: left;
}
.mejs__controls .mejs__time-rail {
width: 100%;
margin: 0;
}
.mejs__controls .mejs__time-rail span {
position: absolute;
top: 0;
width: 100%;
height: 4px;
border-radius: 50px;
cursor: pointer;
}
.mejs__controls .mejs__time-rail .mejs__time-loaded {
background: rgba(255,255,255,0.2);
}
.mejs__controls .mejs__time-rail .mejs__time-float {
display: none;
top: -40px;
width: 40px;
height: 25px;
margin-left: 0px;
text-align: center;
font-size: 10px;
background: #fff;
border: 0;
}
.mejs__controls .mejs__time-rail .mejs__time-float-current {
display: block;
position: relative;
top: 0;
margin: 0;
line-height: 26px;
color: #100d28;
}
.mejs__controls .mejs__time-rail .mejs__time-float-corner {
top: auto;
bottom: -9px;
left: 50%;
width: 0;
height: 0;
border-top: 6px solid #fff;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
.mejs__controls .mejs__time-rail .mejs__time-current {
background: #5BBB95 none repeat scroll 0 0;
}
.mejs__controls .mejs__time-handle {
display: none;
}
.mejs__controls .mejs__volume-button {
position: relative;
position: absolute !important;
top: 70px;
right: 25%;
width: 40px;
height: 40px;
}
.mejs__controls .mejs__horizontal-volume-slider {
display: block;
position: absolute !important;
position: relative;
top: 70px;
right: 10%;
width: 60px;
height: 4px;
margin-top: 18px;
border-radius: 50px;
line-height: 11px;
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-total,
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.1);
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
background: #fff;
}
#media only screen and (max-width: 600px) {
.container {
height:400px;
}
.music-player {
display: block;
position: relative;
width: 100%;
height:100%;
margin: auto;
border-radius: 10px 10px 10px 10px;
background: transparent linear-gradient(to bottom,rgba(10,11,31,0.9) 50%,rgb(10,11,31) 70%) repeat scroll 0 0;
box-shadow: 1px 10px 20px 5px #222;
}
.series-name
{ display:none;
}
}
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sermon</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://readamind.com/music1/music1/index.css" />
</head>
<body>
<div class="contain">
<div class="container">
<div class="series-name">Album</div>
<div class="music-player">
<div class="cover">
<img src="http://readamind.com/music1/music1/data/frame.png" alt="">
</div>
<div class="titre">
<h3>Artist Name</h3>
<h1>Song Title</h1>
</div>
<div class="lecteur">
<audio style="width: 100%;" class="fc-media">
<source src="http://readamind.com/music1/music1/data/acousticbreeze.mp3" type="audio/mp3"/>
</audio>
</div>
</div>
</div>
</div>
<script src="http://readamind.com/music1/music1/index.js"></script>
</body>
</html>
<!--Test-->

Jquery Slider not working in my first ever website?

I started creating my first ever website(incomplete at the moment) just a few hours ago and got stumbled upon this problem. My jquery slider is not working but all three images for the slider appears on my website. I've already checked link rel directory path and changed it a couple of times but it's still not working. Hope you guys can help.
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});
/**Here is the html(Main.html):** **Here is the css(styles.css):**/
#import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #FEFBEF;
background-color: white;
}
.clearfix {
clear: both;
}
#wrapper {
margin: 0 auto;
max-width: 1120px;
background: #FEFBEF;
overflow: auto;
background-color: black;
}
#main_header {
width: 100%;
border: 1px solid black;
font-family: 'Black Ops One', sans-serif;
background-color: black;
color: white;
}
#main_header h1 {
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout {
margin: 50px 20px 0 0;
}
#callout h2 {
text-align: right;
color: white;
}
#callout p {
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu {
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li {
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a {
text-decoration: none;
color: black;
}
/*--- Start Image Slider --*/
.slider {
max-width: 1020px;
box-shadow: 1% 2% 5% 0 rgba(0, 0, 0, 0.07);
}
.slider1 img {
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a {
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a {
z-index: 5;
}
.slider .bx-wrapper .bx-prev {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/left-arrow.png") no-repeat 8px 13px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/left-arrow.png") no-repeat 8px 18px;
}
.slider .bx-wrapper .bx-next {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/right-arrow.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/right- arrow.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third {
width: 28%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
border: 1px solid black;
height: 50%;
background-color: white;
}
footer {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: white;
overflow: auto;
}
footer p {
margin-top: 1%;
}
/* **here is another css(jquery.bxslider.css):** */
.bx-wrapper {
max-width: 1020px;
position: relative;
padding: 0;
*zoom: 1;
}
.bx-wrapper img {
max-width: 1020px;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
left: 0px;
background: #fff;
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
max-width: 1020px;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url("img/bx_loader.gif") center center no-repeat #fff;
height: 100%;
max-width: 1020px;
;
position: relative;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
background: url("img/controls.png") no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 10px;
background: url("img/controls.png") no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: relative;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url("img/controls.png") -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url("img/controls.png") -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MUSIC STORE</title>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul>
<li>HOME</li>
<li>INSTRUMENTS</li>
<li>AMPLIFIERS</li>
<li>ACCESSORIES</li>
<li>FEATURED ARTISTS</li>
</ul>
</nav>
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="../Music Store/img/smiley1.jpg"/></li>
<li><img src="../Music Store/img/smiley2.jpg"/></li>
<li><img src="../Music Store/img/sad.jpg"/></li>
</ul>
</div>
</div>
<section class="one-third"> </section>
<section class="one-third"> </section>
<section class="one-third"> </section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
</body>
</html>
Here is also a screenshot of my folder:

You can Just use the slick jquery plugin that works great and also makes your slider accessible.
Or, if you want you can use frameworks like Bootstrap Carousel or Foundation Orbit that also will do the job and will make your coding for web styling easier.
Good Luck :)

Include jquery from CDN - https://code.jquery.com/
Add $(function(){ }) - http://api.jquery.com/jquery/#jQuery-callback
Correct img path
And this is your correct Main.html:
<!DOCTYPE>
<html lang="en">
<head>
<title>MUSIC STORE</title>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<script type="text/javascript">
$(function(){
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto: true,
pager: false,
});
$('.slider2').bxSlider({
pager: false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto: true,
pager: false,
controls: false,
});
})
</script>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul>
<li>HOME</li>
<li>INSTRUMENTS</li>
<li>AMPLIFIERS</li>
<li>ACCESSORIES</li>
<li>FEATURED ARTISTS</li>
</ul>
</nav>
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="img/smiley1.jpg"/></li>
<li><img src="img/smiley2.jpg"/></li>
<li><img src="img/sad.jpg"/></li>
</ul>
</div>
</div>
<section class="one-third"></section>
<section class="one-third"></section>
<section class="one-third"></section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
</body>
</html>

How do i do this with hover effect with javascript/jquery?

So i am slightly new to JS and jQuery, but i know html and css very well. I want to know if this is possible to do.
I have some HTML code for a nav in an info area. I have it all set up and I have it so it calls a function on mouseover, this function turns the color of the link to white. And for mouseout it turns it black again. Now I know you can probably do this with css but I need the practice for Js/jQuery. I wrote some code and it works and all but instead it colors all the colors white and it blends in, test the code and you will see. Is there a way to only choose the selected button and color only that one. maybe with an array or something?? I dont really need to know if there is a way to do it with css, i just need to get into the habit of using js/jQuery.
Code:
function colorLink() {
$(".infoNav nav ul li a").css("color", "white");
}
function colorLinkOut() {
$(".infoNav nav ul li a").css("color", "black");
}
* {
margin: 0px;
padding: 0px;
}
.header-wrap {
position: fixed;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
}
body {
background: #CCC;
width: 70%;
margin-left: 20%;
margin-top: 0px;
height: 900px;
}
.mainHeader {
padding: 0;
background: #666;
height: 36px;
width: 100%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
box-shadow: 10px 10px 10px #767373;
}
.mainHeader nav ul li {
display: inline-block;
list-style: none;
margin: 10px 0px 0px -30px;
margin-left: 15px;
position: relative;
top: -128px;
left: 10px;
}
.mainHeader nav ul li a {
text-decoration: none;
border-radius: 3px;
color: white;
padding: 7px 20px 10px 20px;
margin-right: -15px;
font-family: 'Eras ITC';
}
.mainHeader nav ul li a:hover {
background: #f18529;
}
.mainHeader nav ul .active {
background: #f18529;
}
.mainInfo {
background: white;
height: 500px;
width: 100%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo p {
font-family: Arial;
padding: 10px 10px 10px 10px;
text-align: left;
}
.mainHeader .logoArea p {
position: relative;
top: -100px;
}
.mainHeader .logoArea img {
position: relative;
top: -130px;
left: 130px;
}
.infoNav nav ul li {
list-style: none;
border: 2px solid black;
padding: 30px;
border-radius: 20px;
width: 140px;
text-align: center;
margin-top: 30px;
position: relative;
left: 35%;
}
.infoNav nav ul li:hover {
background: #f18529;
color: white;
}
.infoNav nav ul li a {
text-decoration: none;
color: black;
font-family: Broadway;
font-size: 30px;
}
#media only screen and (min-width: 150px) and (max-width: 600px) {
body {
width: 100%;
}
.mainHeader {
padding: 0;
background: #666;
height: 70px;
width: 80%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
list-style-type: none;
}
.mainHeader nav ul li {
text-align: center;
height: 100%;
word-break: break-all;
}
.mainHeader nav ul li a {
width: 100%;
height: 20px;
padding: 10px 5px;
display: inline-block;
margin: 10px;
}
.mainInfo {
background: white;
height: 300px;
width: 80%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo {}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="Script.js"></script>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<meta charset="utf-8" />
<title>Website</title>
</head>
<body class="body">
<header class="mainHeader">
<div class="logoArea">
<img alt="logo" src="logo.jpg" width="250px" height="120px">
</div>
<nav>
<ul>
<li><a class="active" href="Index.html">Home<br/></a>
</li>
<li>About<br/>
</li>
<li>Random
</li>
</ul>
</nav>
</header>
</div>
<div class="mainInfo">
<div class="miInfo">
<p>Please choose one of the catagories below:)</p>
<div class="infoNav">
<nav>
<ul>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">Home<br/>
</li>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">About<br/>
</li>
<li onmouseover="colorLink()" onmouseout="colorLinkOut()">Random
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>

Use hover
function colorLink(){
$(this).find("a").css("color", "red");
}
function colorLinkOut(){
$(this).find("a").css("color", "green");
}
$('.infoNav nav li').hover(colorLink, colorLinkOut);
*{margin: 0px;
padding: 0px;}
.header-wrap{
position: fixed;
}
.fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
}
body{
background:#CCC;
width: 70%;
margin-left: 20%;
margin-top: 0px;
height: 900px;
}
.mainHeader{
padding: 0;
background:#666;
height:36px;
width:100%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
box-shadow: 10px 10px 10px #767373;
}
.mainHeader nav ul li{
display:inline-block;
list-style:none;
margin: 10px 0px 0px -30px;
margin-left: 15px;
position: relative;
top: -128px;
left: 10px;
}
.mainHeader nav ul li a{
text-decoration: none;
border-radius: 3px;
color: white;
padding: 7px 20px 10px 20px;
margin-right: -15px;
font-family: 'Eras ITC';
}
.mainHeader nav ul li a:hover{
background: #f18529;
}
.mainHeader nav ul .active {
background: #f18529;
}
.mainInfo{
background:white;
height: 500px;
width: 100%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272 ;
}
.mainInfo .miInfo p{
font-family: Arial;
padding: 10px 10px 10px 10px;
text-align: left;
}
.mainHeader .logoArea p{
position: relative;
top: -100px;
}
.mainHeader .logoArea img{
position: relative;
top: -130px;
left: 130px;
}
.infoNav nav ul li{
list-style: none;
border: 2px solid black;
padding: 30px;
border-radius: 20px;
width: 140px;
text-align: center;
margin-top: 30px;
position: relative;
left: 35%;
}
.infoNav nav ul li:hover{
background: #f18529;
color: white;
}
.infoNav nav ul li a{
text-decoration: none;
color: black;
font-family: Broadway;
font-size:30px;
}
#media only screen and (min-width: 150px) and (max-width: 600px) {
body{
width: 100%;
}
.mainHeader{
padding: 0;
background:#666;
height:70px;
width:80%;
border-radius: 5px;
position: relative;
top: 150px;
left: -70px;
list-style-type: none;
}
.mainHeader nav ul li{
text-align: center;
height: 100%;
word-break: break-all;
}
.mainHeader nav ul li a{
width: 100%;
height: 20px;
padding: 10px 5px;
display: inline-block;
margin: 10px;
}
.mainInfo{
background:white;
height: 300px;
width:80%;
position: relative;
top: 200px;
left: -70px;
border-radius: 5px;
box-shadow: 10px 10px 10px #727272;
}
.mainInfo .miInfo{
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="body">
<header class="mainHeader">
<div class="logoArea">
<img alt="logo" src="logo.jpg" width="250px" height="120px">
</div>
<nav><ul>
<li><a class="active" href="Index.html">Home<br/></a></li>
<li>About<br/></li>
<li>Random</li>
</ul></nav>
</header>
</div>
<div class="mainInfo">
<div class="miInfo">
<p>Please choose one of the catagories below:)</p>
<div class="infoNav">
<nav><ul>
<li>Home<br/></li>
<li>About<br/></li>
<li>Random</li>
</ul></nav>
</div>
</div>
</div>
</body>

Yes there is a way, but if you are using jQuery you'd be better hooking to the events in a jQuery way, so remove those onmouseover="colorLink()" and onmouseout="colorLinkOut()" from the html and replace your javascript for
$(function(){
$(".infoNav li").mouseover(function(){
$(this).find("a").css("color", "white");
});
$(".infoNav li").mouseout(function(){
$(this).find("a").css("color", "black");
});
});
by hooking through jQuery instead of plain javascript you can now use the "this" keyword as a reference to the element that generated the event, that's why $(this) works here, but would not work your previous code.
http://jsfiddle.net/mtd4ouj3/3/

mobile sliding menu is not showing up

I ran into a problem. I've been trying to implement this "hamburger" mobile sliding menu into my website. The javascript is working, but the menu is not showing.
Anyone know of this? http://www.ymc.ch/en/how-to-make-a-hamburger-a-menu-for-mobile-websites
I've made my css and HTML code a bit different, but the jQuery is the same.
I've looked through this and I figured it might be a css conflict but I don't know what exactly. I have another stylesheet that uses .container, but I also don't know if that's the reason.
Here's my link: http://thestripedphoenix.com/
I wanted my website to be responsive while having the hamburger menu tool.
Please, help. I've spent days on this, and I don't think I'd be able to do this alone.
Thanks!!!!!
My HTML markup is here (index.html)
<!-- Mobile Page Layout
================================================== -->
<!--This wrapping container is used to get the width of the whole content-->
<div id="container">
<!--The Hamburger Button in the Header-->
<header>
<div id="logo"><img src="images/tsp+design-header-mobile.png" width="271" height="78"/>
</div>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<!--The mobile navigation Markup hidden via css-->
<nav class="mobileNav">
<ul>
<li>home</li>
<li>about</li>
<li>photography</li>
<li>illustration</li>
<li>animation</li>
<li>web design</li>
<li>resume</li>
<li>contact</li>
</ul>
</nav>
<!--The Layer that will be layed over the content
so that the content is unclickable while menu is shown-->
<div id="contentLayer"></div>
<!-- Primary Page Layout
================================================== -->
<div id="content">
<div class="container">
<div class="six columns">
<div id="header"><img src="images/tsp+design-header.png"/></div>
</div>
<div class="two columns" id="navigation">
<nav id="d-nav">
<dl>
<dt id="about">about</dt>
<dt id="portfolio">portfolio</dt>
<dt id="resume">resume</dt>
<dt id="contact">contact</dt>
</dl>
</nav>
</div>
<div id="space">
</div>
<div class="eight columns">
<div class="slider-wrapper">
<div id="slider1" class="nivoSlider theme-default">
<img src="images/gallery/image2-cropped.jpg"/>
<img src="images/gallery/image3-cropped.jpg"/>
<img src="images/gallery/image4-cropped.jpg"/>
<img src="images/gallery/image5-cropped.jpg"/>
<img src="images/gallery/image7-cropped.jpg"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider2" class="nivoSlider">
<img src="images/gallery/image8-cropped.png"/>
<img src="images/gallery/image10-cropped.png"/>
<img src="images/gallery/image12-cropped.png"/>
<img src="images/gallery/image13-cropped.png"/>
<img src="images/gallery/image15-cropped.png"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider3" class="nivoSlider">
<img src="images/gallery/image18-cropped.png"/>
<img src="images/gallery/image19-cropped.png"/>
<img src="images/gallery/image20-cropped.png"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider4" class="nivoSlider">
<img src="images/gallery/image21-cropped.png"/>
<img src="images/gallery/image22-cropped.png"/>
<img src="images/gallery/image24-cropped.png"/>
</div>
</div>
</div>
<div class="slider-wrapper theme-default">
<div id="slider5" class="nivoSlider">
<img src="images/gallery/image2-cropped.jpg"/>
<img src="images/gallery/image3-cropped.jpg"/>
<img src="images/gallery/image4-cropped.jpg"/>
<img src="images/gallery/image5-cropped.jpg"/>
<img src="images/gallery/image7-cropped.jpg"/>
<img src="images/gallery/image8-cropped.png"/>
<img src="images/gallery/image10-cropped.png"/>
<img src="images/gallery/image12-cropped.png"/>
<img src="images/gallery/image13-cropped.png"/>
<img src="images/gallery/image15-cropped.png"/>
<img src="images/gallery/image18-cropped.png"/>
<img src="images/gallery/image19-cropped.png"/>
<img src="images/gallery/image20-cropped.png"/>
<img src="images/gallery/image21-cropped.png"/>
<img src="images/gallery/image22-cropped.png"/>
<img src="images/gallery/image24-cropped.png"/>
</div>
</div>
<div id="space">
</div>
<div id="footer">
<img src="images/footer-line.png" width="960" height="25"></a>
about<span>|</span>portfolio<span>|</span>resume<span>|</span>contact
<p></p>
</div>
<div id="social">
<img src="images/behance-icon.png" width="30" height="30"></a><img src="images/dribbble-icon.png" width="30" height="30"></a><img src="images/linkedin-icon.png" width="30" height="30"></a><img src="images/youtube-icon.png" width="30" height="30"></a><img src="images/zazzle-icon.png" width="30" height="30"></a>
</div>
<div id="copyright">
<p>Copyright Michelle Shean, 2014</p>
</div>
</div><!-- .container-->
</div><!-- content -->
Part of my CSS (for mobile size)
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
/*
Setup a basic body
*/
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: Helvetica; Arial; sans-serif;
font-size: 12px;
}
/*
Header is relative so z-index: 1 guarantees always displayed on top
*/
header {
background-color: #000000;
padding: 10px;
padding-bottom: 0px;
text-decoration: none;
position: fixed;
width: 100%;
z-index: 1;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
#logo {
display: inline;
}
/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/
#content {
background-color: #000000;
font-family: 'league_gothicregular'; Helvetica; Arial; Sans-serif;
padding: 52px 10px 10px 10px;
position: relative;
max-width: 480px;
height: auto;
overflow-x: hidden;
-webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
}
/*
the hamburger button with a little gradient effekt
*/
#hamburger {
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
float: right;
margin-right: 50px;
margin-top: 23px;
height: 24px;
padding: 3px 4px 3px;
position: relative;
width: 25px;
background: #4569b2;
background: -moz-linear-gradient(top, #000000 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000)color- stop(100%,#000000));
background: -webkit-linear-gradient(top, #000000 0%,#000000 100%);
background: -o-linear-gradient(top, #000000 0%,#000000 100%);
background: -ms-linear-gradient(top, #000000 0%,#000000 100%);
background: linear-gradient(to bottom, #000000 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
}
/*
The white stripes in the hamburger button
*/
#hamburger div {
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px 2px 2px 2px;
height: 2px;
margin-top: 3px;
width: 90%;
}
/*
The navigation container in the background
*/
nav {
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 70%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x:hidden;
overflow-y:auto ;
background: #3e3c3d;
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e3c3d), color-stop(100%,#2d2c2d));
background: -webkit-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: -o-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: -ms-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: linear-gradient(to bottom, #3e3c3d 0%,#2d2c2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3c3d', endColorstr='#2d2c2d',GradientType=0 );
}
/*
Style the navigation menu
*/
nav ul {
list-style: none;
margin: 0;
width: 100%;
padding: 0;
}
nav li {
position: relative;
font-size: 1em;
font-weight: bold;
border-bottom: 1px solid #222222;
border-top: 1px solid #444444;
padding: 15px;
}
nav li a {
color: #fff;
text-decoration: none;
}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
display: none;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 30%;
z-index: 5;
min-height: 1062px;
}
#header {
display: none;
}
#logo {
display: inline;
}
#slider1 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
margin-top: 50px;
margin-bottom: 30px;
}
#slider2 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
margin-top: 50px;
}
#slider3 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
}
#slider4 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
}
#slider5 {
display: inline;
position: relative;
width: auto;
float: left;
clear: both;
}
#about-pic {
position: relative;
margin-left: 10px;
margin-top: 10px;
min-width: 220px;
max-width: 220px;
float: left;
}
#section-title-blue {
position: relative;
clear: both;
margin-left: 10px;
width: 800px;
min-width: 480px;
height: 60px;
float: left;
font-size: 2em;
color: #00CBD4;
}
#section-title-green {
position: relative;
clear: both;
margin-top: 5px;
margin-left: 10px;
width: 800px;
min-width: 480px;
height: 60px;
float: left;
font-size: 2em;
color: #2AFF38;
}
#about-pic img {
width: 100%;
}
#about-text {
position: relative;
margin-top: 30px;
float: right;
width: 100%;
font-size: 1.1em;
font-family: Helvetica, Arial, Sans-serif;
}
#signature {
font-family: Helvetica, Arial, Sans-serif;
float: left;
margin-top: 40px;
max-width: 120px;
max-height: 120px;
}
#portfolio-gallery {
display: none;
}
#portfolio-nav {
display: none;
}
#mobile-gallery {
display: inline-block;
position: relative;
margin-top: 50px;
clear: both;
padding: 20px;
padding-right: 30px;
padding-top: 10px
max-width: 480px;
max-height: 720px;
}
#mobile-gallery img {
width: auto;
}
/* line 180, ../sass/screen.sass */
.image-row {
*zoom: 1;
margin-bottom: 20px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass /stylesheets/compass/utilities/general/_clearfix.scss */
.image-row:after {
content: "";
display: table;
clear: both;
}
/* line 184, ../sass/screen.sass */
.example-image-link {
display: inline-block;
margin: 0 10px 20px 10px;
line-height: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border: 2px solid #5e5e5e;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
/* line 191, ../sass/screen.sass */
.example-image-link:hover {
border: 2px solid #2AFF38;
}
/* line 194, ../sass/screen.sass */
.example-image {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
#subheading {
position: relative;
clear: both;
max-width: 360px;
min-width: 430px;
height: 40px;
margin-top: 20px;
margin-left: 10px;
float: left;
font-size: 1.5em;
}
#resume-text {
position: relative;
max-width: 360px;
max-height: 130px;
margin-top: 20px;
margin-left: 10px;
float: left;
font-family: Helvetica, Arial, Sans-serif;
}
#resume-note {
position: relative;
clear: both;
float: left;
margin-left: 70px;
margin-top: 30px;
margin-bottom: 30px;
width: 600px;
height: 30px;
font-family: Helvetica, Arial, Sans-serif;
font-size: 1.2em;
}
#resume-note {
position: relative;
clear: both;
float: left;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 30px;
width: 600px;
height: 30px;
font-family: Helvetica, Arial, Sans-serif;
font-size: 1em;
}
#form {
position: relative;
max-width: 450px;
min-width: 460px;
height: 820px;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 40px;
float: left;
clear: both;
font-size: 1.2em;
padding: 20px;
border: none;
}
input, textarea {
padding: 5px;
margin: 10px;
font-family: Helvetica, Arial, Sans-serif;
font-size: medium;
font-weight: bold;
outline: none;
}
input[type=text], textarea {
width: 220px;
background-color: #FFFFFF;
}
input[type=submit] {
width: 100px;
background-color: #2AFF38;
border: 1px solid #000000;
font-size: large;
color: #FFFFFF;
margin-bottom: 30px;
}
input[submit]:active {
background-color: #00CBD4;
}
h1 {
font-family: 'league_gothicregular', Arial, sans-serif;
font-size: 2.1em;
}
#footer {
position: relative;
margin-top: 10px;
max-width: 960px;
max-height: 80px;
float: left;
text-align: center;
font-size: 1.5em;
}
#footer img {
width: 100%;
}
#social {
position: relative;
clear: both;
max-width: 200px;
height: 40px;
margin: auto;
padding-bottom: 10px;
}
#social img {
margin: 5px;
display: inline-block;
}
#copyright {
position: relative;
clear: both;
text-align: center;
margin: auto;
min-width: 30px;
padding-bottom: 15px;
font-size: 1.2em;
}
a:link {
color: #FFFFFF;
}
a:active {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
span {
margin: 5px;
}
}
Here is the head of my HTML markup:
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>the striped phoenix | Michelle Shean</title>
<meta name="description" content="portfolio">
<meta name="author" content="portfolio">
<body oncontextmenu="return false;">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
<!--Using jQuery and jQuery UI for display effects
================================================== -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--Using the hamburger menu display code
=================================================== -->
<script src="javascripts/hamburger.js"></script>
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/slider-themes/default/default.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
The jQuery code is the same as from your demo.
jQuery(document).ready(function() {
//Open the menu
jQuery("#hamburger").click(function() {
//set the width of primary content container -> content should not scale while animating
var contentWidth = jQuery('#content').width();
//set the content with the width that it has originally
jQuery('#content').css('width', contentWidth);
//display a layer to disable clicking and scrolling on the content while menu is shown
jQuery('#contentLayer').css('display', 'block');
//disable all scrolling on mobile devices while menu is shown
jQuery('#container').bind('touchmove', function(e){e.preventDefault()});
//set margin for the whole container with a jquery UI animation
jQuery("#container").animate({"marginLeft": ["70%", 'easeOutExpo']}, {
duration: 700
});
});
//close the menu
jQuery("#contentLayer").click(function() {
//enable all scrolling on mobile devices when menu is closed
jQuery('#container').unbind('touchmove');
//set margin for the whole container back to original state with a jquery UI animation
jQuery("#container").animate({"marginLeft": ["0", 'easeOutExpo']}, {
duration: 700,
complete: function() {
jQuery('#content').css('width', 'auto');
jQuery('#contentLayer').css('display', 'none');
}
});
});
});

did you use the jQuery part for this like the onclick animation to show the menu.
please see here:
demo
fiddle