Deleting and restoring items - javascript

I am trying to delete and restore items in this fashion:
when deleted (by pressing the red 'x') a picture of the item will appear in the navbar,
when the image is clicked in the navbar, the item will be restored onto the page.
As you can see, the last two functions that are currently commented out are what I have been trying to use to implement this functionality, however when I remove the comment '/*' my other javascript functions stop working. Any help would be greatly appreciated.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-theme.css"/>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="jquery-cookie-master"/>
<link rel="stylesheet" href="js/bootstrap.js" />
<link rel="stylesheet" href="js/carousel.js" />
<link rel="stylesheet" type="text/css" href="shopping.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery- ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<header>
<h4><mark>Student Project #5 H.B.</mark></h4></br>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand deleted-item hidden" id="box1">
<img class="navpics" src="surface3.jpg" alt="Microsoft Surface">
</a>
<a class="navbar-brand deleted-item hidden" id="box2">
<img class="navpics" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
</a>
<a class="navbar-brand deleted-item hidden" id="box3">
<img class="navpics" src="mabook.jpg" alt="Apple Macbook Pro Retina">
</a>
<a class="navbar-brand deleted-item hidden" id="box4">
<img class="navpics" src="superdrive.jpg" alt="Apple SurperDrive">
</a>
<a class="navbar-brand deleted-item hidden" id="box5">
<img class="navpics" src="case1.jpg" alt="Laptop Case">
</a>
</div>
</div>
</div>
<h2>Premium Computer Supplies!</h2>
</header>
<ul id="sortable" style="list-style-type:none">
<!----------------------------------------------------------------->
<!--<div id="all">-->
<li class="ui-state-default"><div class="row" id="box1">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="a" src="surface3.jpg" alt="Microsoft Surface">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3</h3>
<div class="description" id="pnd1" hidden>
<!--Description and price-->
<div >
<p>With a variety of processors and memory options, there's a Surface for everyone!</p>
<p>Starting at $999!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box2">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="b" src="surface3cover.jpg" alt="Microsoft Surface Type Cover">
<!--Accordion heading-->
<h3>Microsoft Surface Pro 3 Typer Cover</h3>
<div class="description" id="pnd2" hidden>
<!--Description and price-->
<div>
<p>The Type Cover is a perfect accessory for your Surface!</p>
<p>Starting at $129!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box3">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="c" src="mabook.jpg" alt="Apple Macbook Pro Retina">
<!--Accordion heading-->
<h3>Macbook Pro Retina Display</h3>
<div class="description" id="pnd3" hidden>
<!--Description and price-->
<div>
<p>The Macbook is a must-have for students, parents, and more!</p>
<p>Starting at $1299!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box4">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="d" src="superdrive.jpg" alt="Apple SurperDrive">
<!--Accordion heading-->
<h3>Apple SuperDrive</h3>
<div class="description" id="pnd4" hidden>
<!--Description and price-->
<div>
<p>Able to read disks, the SuperDrive is essential for burning music and home-movies!</p>
<p>Starting at $79!</p>
</div>
</div>
</div>
</li>
<!----------------------------------------------------------------->
<li class="ui-state-default"><div class="row" id="box5">
<button type="button" class="close">x</button>
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img class="bodypics" id="e" src="case1.jpg" alt="Laptop Case">
<!--Accordion heading-->
<h3>Laptop Case</h3>
<div class="description" id="pnd5" hidden>
<!--Description and price-->
<div>
<p>Carry your computer with you anywhere with a computer bag!</p>
<p>Starting at $39!</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<!----------------------------------------------------------------->
<script>
$( ".row" ).mouseenter(function() {
$(this).animate({
fontSize : '17',
opacity : '0.6',
}, 1);
});
$( ".row" ).mouseleave(function() {
$(this).animate({
fontSize : '14',
opacity : '1',
}, 1);
});
$("div#box1").click(function(){
$("#pnd1").animate({
hidden: 'toggle'
});
});
$("div#box2").click(function(){
$("#pnd2").animate({
hidden: 'toggle'
});
});
$("div#box3").click(function(){
$("#pnd3").animate({
hidden: 'toggle'
});
});
$("div#box4").click(function(){
$("#pnd4").animate({
hidden: 'toggle'
});
});
$("div#box5").click(function(){
$("#pnd5").animate({
hidden: 'toggle'
});
});
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
$('button.close').click(function() {
$(this).parent().animate({
'opacity': 0
}, 1, function() {
$(this).css({'display': 'none'})
})
$(".deletedItem#" + name).toggleClass("hidden");
});
$(".deleted-item").click(function(){
$(this).toggleClass("hidden");
var name = $(this).attr("id");
$(".row#" + name).toggleClass("hidden");
});
</script>
</body>
CSS:
.bodypics {
width:290px;
height:200px;
}
header{
background-color: royalblue;
color:gold;
padding-left: 0;
width:100%
}
body{
width:90%;
background-color: lightgray;
font-size: 3;
padding-left: 5%
}
.row{
background-color: white;
width:300px;
height:400px;
padding-left: 1px;
border: 1px solid royalblue;
margin: 2px;
}
#all{
width:90%;
}
#sortable li {
height: 402px;
float: left;
}
.close{
color:red;
}
.navpics{
width: 70px;
height: 30px;
}


I have figured it out! Mainly a combination of me being careless and inexperienced, but here's the solution:
Just change this last bit of code:
$('button.close').click(function() {
var name = $(this).parent().attr("id");
$(this).parent().toggleClass("hidden");
$(".deleted-item#" + name).toggleClass("hidden");
});
$(".deleted-item").click(function(){
$(this).toggleClass("hidden");
var name = $(this).attr("id");
$(".row#" + name).toggleClass("hidden");
});
And now all is dandy!

Related

Content is not sized correctly for the viewport

I am deploying my webiste to production and running the Lighthouse audit. The audit is throwing an error when running the audit. It is tell me that the "The viewport size of 373px does not match the window size of 360px". I have validated my HTML and CSS but have not found the specific error. I am not sure if it is in the .style.width of my side nav bars.
Javascript:
function openNav() {
document.getElementById("mySidenav").style.width = "150px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
function openNav2() {
document.getElementById("mySidenav2").style.width = "150px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
}
function openNav3() {
document.getElementById("mySidenav3").style.width = "150px";
}
function closeNav3() {
document.getElementById("mySidenav3").style.width = "0";
}
CSS
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.imgHoover:hover {
box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
}
.imgHoover {
padding: 10px 16px;
margin: 10px 0;
/*box-shadow: 2px 2px grey;*/
border-bottom: 1px solid #fafafa;
/*border: 5px solid #fab95b;*/
}
#form1 {
padding: 10px;
border: 1px solid #666;
background: #fff;
display: none;
justify-content: center;
}
#form2 {
padding: 10px;
border: 1px solid #666;
background: #fff;
justify-content: center;
}
/* card center */
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
/*box-shadow: 5px 5px grey*/
}
.card:hover {
box-shadow: 4px 8px 12px rgba(0,0,0,0.1);
}
/* side-nav */
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #818181;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
html{overflow-x: hidden;}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="manifest" href="manifest.json">
<!-- ios support -->
<link rel="apple-touch-icon" href="images/logo/icon-96x96.png">
<meta name="apple-mobile-web-app-status-bar" content="#292927">
<meta name="theme-color" content="#292927">
<title>Home-Online Supplements</title>
</head>
<body>
<nav class="navbar navbar-light" style="background-color: #b8dff0;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo/logo.png" alt="" width="30" height="24" class="d-inline-block align-top">
NextGen-Fitness</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" id="formButton">Login</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Categories
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Protein</a></li>
<li><a class="dropdown-item" href="#">Vitamins</a></li>
<li><a class="dropdown-item" href="#">Preworkout</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" tabindex="-1" >Contact Us</a>
</li>
</ul>
<a class="nav-link text-left" href="#" id="userRegistered" style="color:black;" ></a>
<!-- <form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit">Search</button>
</form> -->
</div>
</div>
</nav>
<div class="center-block">
<form id="form1">
<input type="text" name="firstName" placeholder="First Name" id="fname">
<br><br>
<input type="text" name="lastName" placeholder="Last Name" id="lname">
<br><br>
<input type="text" name="email" placeholder="Email" id="email">
<br><br>
<button type="button" class="btn btn-dark" id="btnUser" onclick="funcUser()">Login</button>
</form>
</div>
<!--Side Navbar #1 -->
<div id="mySidenav" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/fatburner-logo2.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #2 -->
<div id="mySidenav2" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/preworkout-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #3 -->
<div id="mySidenav3" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>-->
<div class="bg-light">
<div class="container">
<div class="row align-items-center no-gutter">
<div class="col-xl-5 col-lg-6 col-md-12">
<div class="py-5 py-lg-0">
<a class="btn btn-ligth" style="background-color: #fab95b;" href="products.html">Browse all Products</a>
<!--<a class="btn btn-light" style="background-color: #fab95b;">Are you a Store Owner?</a>-->
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/gym-page.jpg" alt class="img-fluid">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-logo2.png" alt="fatBurner" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav()">Fatburner</a>
</div>
<div class="column">
<img src="images/preworkout-logo.png" alt="preWorkout" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav2()">Preworkout</a>
</div>
<div class="column">
<img src="images/protein-logo2.png" alt="protein" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav3()">Protein</a>
</div>
</div>
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/supplement-frontpage.jpg" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
" Hand-picked ingredients and expertly crafted products,
designed for the modern athletes and trainers."
</p>
</div>
<br>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-frontpage.png" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
Benefits Of Protein Supplementation<br>
1.Fast digesting and more easily absorbed than other protein sources<br>
2.Increased muscle mass, especially when taken post-workout<br>
3.Improved appetite control, and greater feelings of fullness when dieting<br>
</p>
</div>
<div class="footer">
<div class="container">
<div class="row align-items-center no-gutters border-top py-2">
<div class="col-md-6 col-12">
<span> 2021 NextGen. All Rights Reserved</span>
</div>
<div class="col-12 col-md-6">
<nav class="nav justify-content-center justify-content-md-end">
<a class="nav-link active pl-0" href="#!">Privacy</a>
<a class="nav-link" href="#!">Terms</a>
<a class="nav-link" href="#!">Feedback</a>
</nav>
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="js/scripts.js" ></script>
</body>
</html>

You could try docking the devtools at the bottom, or in a different window, as in this answer. Sadly, this is still an issue in 2021.

JavaScript forces you to double click in order to get the drop down menu to open or close

<html><head>
<title>J.T.C.</title>
<meta charset="utf-16">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="assets/css/mainsd2B.css">
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Scroll -->
<link href="https://fonts.googleapis.com/css?family=Heebo:460|Ramabhadra|Roboto" rel="stylesheet">
<!-- Adjust top of navbar -->
<script type="text/javascript">
var sw = document.getElementById('side-menu');
window.addEventListener('resize', function(event){
sw.style.width = '0px';
});
</script>
<script type="text/javascript">
var s = document.getElementById('side-menu');
function resizeFunction() {
s.style.display = 'none';
}
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
</script>
<script type="text/javascript">
// Reset Navbar top afer scroll
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
</script>
<script type="text/javascript">
//Control side-nav top position
$(function () {
$(document).scroll(function () {
var $nav1 = $(".side-nav-fixed-top");
$nav1.toggleClass('scrolled', $(this).scrollTop() > $nav1.height());
$nav1.visibility= "hidden";
});
});
</script>
<script type="text/javascript">
// Show Hide Navbar UL List
$(window).scroll(function(){
if($(document).scrollTop() > 200){//Here 200 may be not be exactly 200px
$('.side-nav').hide();
}
});
</script>
<style>
#media screen and (max-width: 927px) {
.navbar {
overflow: visible;
}
}
</style>
</head>
<body onresize="resizeFunction()" >
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="/assets/css/images/header46.jpg" alt=""></span>
</header>
<!-- Nav -->
<nav id="nav">
<div id="mainconm"><img src="/assets/css/images/mainltx.png" alt=""></div>
<ul>
<li>Home</li>
<li>Section One</li>
<li>Social
<ul>
<li>Section Two</li>
<li><a href="#third" class="" >Section Three</a></li>
</ul>
</li>
<li>Course
<ul>
<li>Section Four</li>
<li><a href="#fifth" class="" >Sections Five</a></li>
</ul>
</li>
</ul>
</li>
</nav>
<div id="sticky-anchor"></div>
<!-- class="navbar" -->
<nav class="navbar navbar-fixed-top" id="navigation" onscroll="navtotop()">
<span class="open-slide">
<button id="menu-box" onclick="toggle_visibility()"><svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="3"></path>
<path d="M0,14 30,14" stroke="#000" stroke-width="3"></path>
<path d="M0,23 30,23" stroke="#000" stroke-width="3"></path>
</svg></button>
</span>
<div id="side-menu" class="side-nav side-nav-fixed-top bg-primary" style="display: none; width: 0px;">
<span class="open-slide">
<div style="height:70px; width: 100%; background:rgb(6, 13, 19, 1)" >
<button id="menu-box" style=" background: #000; border-radius: 0;" onclick="toggle_visibility()"><svg width="30" height="30">
<path d="M0, 3 30,25" stroke="#fff" stroke-width="3"></path>
<path d="M0,25 60,-17" stroke="#fff" stroke-width="3"></path>
</svg>
</button>
</div>
</span>
Home
<a href="#first" class="slide" >Section One</a>
<a href="#second" class="slide" >Section Two</a>
<a href="#third" class="slide" >Section Three</a>
<a href="#forth" class="slide" >Section Four</a>
<a href="#fifth" class="slide" >Section Five</a>
<a href="#seventh" class="slide" >Section Six</a>
</div>
<div id="conm"><img src="assets/css/images/mainltx.png" alt=""></div>
</nav><div id="intro" style="position: absolute; z-index: 8000; top: 100px;"></div>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section class="main" style="padding-top: 20px !important;">
<div class="spotlight">
<div class="content">
<div id="largeicon" >
<span class="image"><img src="assets/css/images/homeimage.png" alt=""></span>
</div>
<div id="smallicon" class="alt">
<span class="logo"><img src="/assets/css/images/smallbanner.png" alt=""></span>
</div>
<header class="major">
<h3>Help us help you. Please take the surveys below.</h3>
</header>
<div style="float: clear;"></div>
</div>
</div>
</section>
<!-- First Section -->
<section id="first" class="main special">
<header class="major">
</header>
<div id="contact" class="sticky slide" >Contact Us</div>
<span class="image"><img style="width: 100%;" src="/assets/css/images/jb.png" alt=""></span>
<div id="coach" class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Second Section -->
<section id="second" class="main special apcol">
<header class="major">
<span class="image"><img style="width: 100%;" src="/assets/css/images/ps.png" alt=""></span>
<div class="center-list" style="margin-top: .05em;">
</div>
<footer class="major">
</footer>
</header></section>
<!-- Third Section -->
<section id="third" class="main special">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/lt-icon.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Forth Section -->
<section id="forth" class="main special">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/cting.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Fifth Section -->
<section id="fifth" class="main special inactive">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/vt.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
</div>
<!-- Footer -->
<div id="seventh" class="inactive"></div>
<footer id="footer">
<section>
</section>
<section>
<dl class="alt">
</section>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript">
// Toggle close with button
var s = document.getElementById('side-menu');
function toggle_visibility() {
if(s.style.width == '0px')
s.style.width = '300px';
else
s.style.width = '0px';
}
</script>
<script type="text/javascript">
// Smooth Scroll
$(document).ready(function() {
$('.slide').click(function() {
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $(link).offset().top}, 2000);
return false;
});
});
// toggle close ul after select from list
document.getElementById('side-menu').style.display = 'none';
document.getElementById('side-menu').style.width = '0';
$(function() {
$("button").click(function() {
$("#side-menu").show();
});
$("#side-menu a").on('click', function(e) {
e.stopPropagation();
$("#side-menu")
.show()
/* .siblings() */
.val($(this).html());
});
});
</script>
</body></html>
My issue is that I have to click twice in order to get the mobile drop down menu for the website to either open or close. I believe that the JavaScript and HTML is sufficient. I have not been able to modify this JavaScript so that it works properly. Nothing I have tried works. Any suggestions? I have simplified this HTML to the essentials

You have very shared very little information. Possible reason can be that s.style.width is not 0px on initiation. Thats why the first click makes it 0px and the second click opens it. Try adding s.style.width='0px' at the start of the script.

I deleted the JavaScript (// toggle close ul after select from list) that is the at the bottom of the codes since it was clashing with the javascript (// Toggle close with button), which is also located near the bottom. I then used another JavaScript similar to the JavaScript found in (// Toggle close with button) to toggle close ul after a selection is selected from the list. This solved the double clicking issue.

Conflicting JQuery Scripts with Bootstrap and a Jquery photo gallery

I have been searching the internet trying to solve a problem, and have found a lot of solutions which non have worked which leads me to believe that non of the solutions were a fit to my unique situation.
I am building a page with Bootstrap and at the bottom of the HTML there is a call for a jquery script "js/jquery-1.11.3.min.js" and this controls things like the Bootstrap navbar drop-downs. And I have another jquery call in the head, and this controls a photo gallery. If I delete the call for "js/jquery-1.11.3.min.js" the photo gallery works great, but my navbar drop-downs stop working, and if I leave the call for "js/jquery-1.11.3.min.js" then the navbar works but the photo gallery stops working..
I tried just using one call but unfortunately the photo gallery will only work with it's call and the navbar will not work with the photo gallery's jquery version.
Here is the code for the page! Any help would be great!
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
Set objWPC = Server.CreateObject("RealtySearch.RSPublic")
Call objWPC.ListingIsValid(Request.QueryString("LI"))
Set objWPC = Nothing
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%
Set objMeta = Server.CreateObject("RealtySearch.RSPublic")
' Process Request Arguments: Command, Template, PageSize, LogoId, AgencyId, CityId, ListingId, FeatureId
strUCCmd = UCase(Request.QueryString("CMD"))
If strUCCmd = "RESDETAIL" Or strUCCmd = "COMDETAIL" Then
Call objMeta.ProcessRequest("ListingMeta")
End If
Set objMeta = Nothing
%>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ILPStyles.css" rel="stylesheet" type="text/css">
<link href="css/RealtySearch.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.container{
width:100%;
margin: auto;
margin-top: none;
position: relative;
}
#media (max-width: 768px) {
.inner-text {
font-size: 10px;
}
.container{
width:100%;
}
}
</style>
<link rel="stylesheet" type="text/css" href="wt-gallery.css"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-gallery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(".container").wtGallery({
num_display:3,
screen_height:360,
padding:10,
thumb_width:75,
thumb_height:56,
thumb_margin:5,
thumbnails_align:"bottom",
text_align:"top",
caption_align:"bottom",
auto_rotate:false,
delay:5000,
rotate_once:false,
auto_center:true,
cont_imgnav:true,
cont_thumbnav:true,
display_play:false,
display_imgnav:true,
display_imgnum:false,
display_timer:false,
display_thumbnav:true,
display_indexes:true,
display_thumbnum:false,
display_tooltip:false,
display_arrow:true,
mouseover_pause:false,
mouseover_text:false,
mouseover_info:true,
mouseover_caption:true,
mouseover_buttons:true,
transition:"fade",
transition_speed:800,
scroll_speed:600,
vert_size:45,
horz_size:45,
vstripe_delay:100,
hstripe_delay:100,
move_one:false,
shuffle:false,
mousewheel_scroll:true
});
}
);
</script>
</head>
<body>
<div class="container-fluid">
<div class="row" id="topbrownbar"> </div>
<div class="row" id="bigpictcont-pages" style="position: relative; min-height: 23em; max-height: 350px; background-image: url(images/pages-header.jpg); background-size: cover;">
<div style="position: absolute; top: -20px; right: 30px; z-index: 4000; color: whitesmoke;">
<div style="float: left; margin-top: 25px; margin-right: 30px;"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></div>
<div style="float: left; margin-top: 25px; margin-right: 30px;"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div>
<div style="float: right"><h3> 208-217-1776</h3></div>
</div>
<div id="topblackbar"> </div>
<div style="position: absolute; bottom: 10%; z-index: 3000; width: 100%;"><img style="margin: 0 auto;" src="images/ILP-logo.png" class="img-responsive" alt="Placeholder image"></div>
</div>
<div class="row" id="buttoncont">
<div class="col-lg-offset-1 col-lg-12">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Buck's<br><span style="font-size: 0.7em;">Listings</span></li>
<li class="dropdown">Property<br><span style="font-size: 0.7em;">Search</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Waterfront Lifestyle</li>
<li>Schweitzer Lifestyle</li>
<li>Ranch Lifestyle</li>
<li>Preparedness Lifestyle</li>
<li role="separator" class="divider"></li>
<li>Developments</li>
<li role="separator" class="divider"></li>
<li>Land Listings</li>
<li>Commercial Listings</li>
</ul>
</li>
<li class="dropdown">Visitor's<br><span style="font-size: 0.7em;">Guide</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Inspectors</li>
<li>Surveyors</li>
<li>Planning & Zoning</li>
<li role="separator" class="divider"></li>
<li>Septic & Sewer</li>
<li role="separator" class="divider"></li>
<li>Home Inspectors</li>
</ul>
</li>
<li>Resources</li>
<li>Bio</li>
<li>Contact</li>
<li>Maps</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li></li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<div class="row" id="mainwoodcont" style="position: relative">
<div class="col-lg-offset-1 col-lg-12 col-md-12 col-md-offset-1">
<h1>Ranch Lifestyle Properties in <strong>North Idaho</strong></h1>
</div>
</div>
<div class="row pagescont">
<div class="col-lg-offset-1 col-lg-12"> </div>
<div class="col-lg-offset-1 col-lg-1"> </div>
<div class="col-lg-10">
<div class="fluid detailpagecont">
<%
Set objApp = Server.CreateObject("RealtySearch.RSPublic")
If len(Request.QueryString("CMD")) = 0 then
Call objApp.ProcessRequest("ResSelect")
Else
Call objApp.ProcessRequest
End If
Set objApp = Nothing
%>
</div>
</div>
<div class="col-lg-1"> </div>
<div class="col-lg-offset-1 col-lg-12"> </div>
</div>
<div class="row" id="footer" style="margin-top: 10px;">
<div class="col-lg-offset-1 col-lg-4 col-md-4 col-sm-6 col-xs-5 col-xs-offset-5 col-md-offset-6 col-sm-offset-5">
<h4>IdahoLifestyleProperty.com</h4>
<p>Buck Graybill REALTOR®<br>
Member of the REALTORS® Land Instatute</p>
<img style="margin: 5px 10px 5px 5px;" align="left" src="images/RLIlogo.jpg" width="60" height="85" alt=""/>
<p> 208-217-1776 <br>
Buck#Sandpoint.com<br>
</p>
<img src="images/footer-hud-logos.png" alt="" width="100" height="32" class="img-responsive"/> </div>
<div class="col-lg-4 col-md-12 col-md-offset-1 col-lg-offset-0" align="center"><img src="images/c21logo-footer.png" width="212" height="132" alt=""/>
<p class="text-center">316 N. 2nd Avenue, Suite A-1 Sandpoint, Idaho 83864 office <br>
(208) 255-2244</p>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-md-offset-1 col-md-6 col-lg-offset-0 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-residential-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-land-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-md-offset-1 col-lg-offset-0 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-waterfront-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
<div class="col-md-6 col-lg-7"><div id="footbuttons"><img style="clear: both; margin: 0 auto;" src="images/foot-commercial-button.jpg" class="img-responsive" alt="Placeholder image"></div></div>
</div>
</div>
</div>
<div class="row" id="copyright">
<p class="text-center">All Rights Reserved © <script type="text/javascript">document.write((new Date()).getFullYear());</script> IdahoLifestyleProperty.com</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>

semantic ui popup does not work

Here is a simple dropdpwn popup example from semantic-ui which fails to work:
<head runat="server">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/site.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<title><%: Page.Title %></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="example">
<div class="ui menu">
<a class="browse item" style="">
Browse
<i class="dropdown icon"></i>
</a>
<div class="ui fluid popup top left transition hidden" style="top: auto; left: 1px; bottom: 69px; right: auto; width: 653px;">
<div class="ui four column relaxed divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colors</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
<a class="item">
<i class="cart icon"></i>
Checkout
</a>
</div>
</div>
<div id="web_content">
</div>
<div id="web_footer">
</div>
</form>
<script type="text/javascript">
$('.example .menu .browse').popup({
inline: true,
hoverable: true,
position: 'bottom left',
delay: {
show: 300,
hide: 800
}
});
</script>
</body>
when I click/hover on browse nothing happens. i don't know enough about jquery selectors tough. thanks for reading.

Floating div cant center or right align

I have a floating red bubble, much like used in googles material design.
I am using Materializecss for web development. Info can be found here on the floating red bubble I am trying to implement:
http://materializecss.com/buttons.html
I have tried all their built in helpers for css to move it center at the bottom but no luck. Here is my html:
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>
<body style="position: relative;">
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Beer Portfolio</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul style="left: -250px;" id="nav-mobile" class="side-nav left">
<li>Statistics</li>
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div class="collection"><h5 class="orange-text text-darken-2"> Bitter</h5> <div class="right">65% </div> <div class="progress col "> <div class="determinate orange" style="width:65%"> </div> </div><h5 class="orange-text text-darken-2"> Malty</h5> <div class="right">15% </div> <div class="progress col "> <div class="determinate orange" style="width:15%"> </div> </div><h5 class="orange-text text-darken-2"> Smooth</h5> <div class="right">15% </div> <div class="progress col "> <div class="determinate orange" style="width:15%"> </div> </div><h5 class="orange-text text-darken-2"> Dry</h5> <div class="right">5% </div> <div class="progress col "> <div class="determinate orange" style="width:5%"> </div> </div></div><div class="center-align" style="position: fixed; bottom: 0;"> <a id="redCircle" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a></div>
<!-- Modal Structure For loading beer-->
<div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">Loading Taste Tags</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>
My css I am using can be found here:
http://pastebin.com/bHW6Fzp3

Assuming this is the fix you are looking for, your container needs to have a width greater than the width of the button, and from there you can add margin: 0 auto;
As noted above, you should create a fiddle or similar first to demonstrate your problem.
.center-align {
width: 100%;
}
.btn-floating.btn-large {
margin: 0 auto;
}
Updated your fiddle: https://jsfiddle.net/2ftu5rqg/3/
I didn't notice the centering class that was already in there - all you really need is a width on the parent container, which in this example is .center-align.

Categories

Resources