I wrote javascript code making website banner disappear when scroll's position is >0 or window's width is less than 1400px and it works well but one of my subpages have very little content so on full HD resolution only small part of the content is not visible until scrolled. So when i scroll down to reveal that content the banner disappears making enough space for entire content of this subpage so the scroll itself disappears which is equal to scrolls position = 0 which makes banner appear again. How can i fixed it? Thank you in advance.
setInterval(pasek,25)
function pasek()
{
var a = window.innerWidth;
var b = window.pageYOffset
if(a<1400||b>0)
{
document.getElementById("baner").style.display="none";
document.getElementById("xxx").style.paddingTop="52px";
}
else
{
document.getElementById("baner").style.display="block";
document.getElementById("xxx").style.paddingTop="218px";
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charSet="utf-8">
<meta http-equiv="X-Ua-compatibility" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kopysno</title>
<link rel="stylesheet" href="boot\bootstrap-4.5.0\dist\css\bootstrap.min.css">
<link rel="stylesheet" href="css.css">
<script src="https://kit.fontawesome.com/yourcode.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="boot\bootstrap-4.5.0\dist\js\bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body id="1" style="background-color:white">
<div class="start">
<img id="baner" src="baner.jpg">
<nav class="kolanko navbar navbar-expand navbar-light">
<ul class="navbar-nav" >
<li id="Strona" class="nav-item">
<a class="nav-link" href="kopysno.html">Strona Główna</a>
</li>
<li id="Aktualnosci" class="nav-item">
<a class="nav-link" href="Aktualnosci.html">Aktualności</a>
</li>
<li id="Mapa" class="nav-item">
<a class="nav-link" href="mapaokolicy.html">Mapa Okolicy</a>
</li>
<li id="Filmy"class="nav-item">
<a class="nav-link" href="#">Filmy</a>
</li>
<li id="Dawni" class="nav-item">
<a class="nav-link" href="dawnimieszkancy.html">Dawni Mieszkańcy</a>
</li>
<li id="Artykuły"class="nav-item">
<a class="nav-link" href="#">Artykuły prasowe</a>
</li>
<li id="Kontakt"class="nav-item">
<a class="nav-link" href="kontakt.html">Kontakt</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="dropdown-toggle" style="text-align:center;text-decoration:none" data-toggle="dropdown" href="#">Więcej</a>
<div style="background-color:dimgrey"class="dropdown-menu">
<a class="dropdown-item" href="Historia.html">Historia</a>
<a class="dropdown-item" href="#">Geografia</a>
<a class="dropdown-item" href="#">Środowisko</a>
<a class="dropdown-item" href="#">Kartografia Archiwalna</a>
<a class="dropdown-item" href="#">Galeria Fotografii</a>
<a id="a1"style="display:none"class="dropdown-item" href="kontakt.html">Kontakt</a>
<a id="a2"style="display:none"class="dropdown-item" href="#">Artykuły prasowe</a>
<a id="a3"style="display:none"class="dropdown-item" href="dawnimieszkancy.html">Dawni Mieszkańcy</a>
<a id="a4"style="display:none"class="dropdown-item" href="#">Filmy</a>
<a id="a5"style="display:none"class="dropdown-item" href="mapaokolicy.html">Mapa Okolicy</a>
<a id="a6"style="display:none"class="dropdown-item" href="Aktualnosci.html">Aktualnosci</a>
<a id="a7"style="display:none"class="dropdown-item" href="kopysno.html">Strona Główna</a>
</div>
</div>
</li>
</ul>
<form style="padding-right:10px;"class="form-inline" action="/action_page.php">
<input style="width:60%;margin:5px;float:right"class="form-control mr-sm-2" type="text" placeholder="Search">
<button style="float:right"class="btn btn-success" type="submit">Search</button>
</form>
<button class="dark btn btn-dark"id="but"type="button" onclick="dark()">Dark</button>
</nav>
</div>
<div id="2" class="container-fluid"style="background-color:white;">
<div class="row">
<div id="xxx"class="col">
<ul class="list-group">
<li class="list-group-item" style="text-align:center;font-size:25px;background-color:#e6f2ff">
<span>
STRONA GŁÓWNA
</span>
</li>
</ul>
</div>
</div>
<div id="3"class="row" style="font-family:Verdana;letter-spacing:1px;font-size:16px;margin-bottom: 50px;">
<div class="col"style="padding-right:50px;padding-left:50px;margin:auto;padding-top:40px" >
    KOPYSNO, znane także jako Kopyśno, Kopystno, to miejscowość istniejąca już w XIV wieku i będąca zarazem gniazdem rodu Kopystyńskich. Wiele wieków później, w wyniku dramatycznych wydarzeń, które się rozegrały podczas drugiej wojny światowej oraz po jej zakończeniu, utraciła największy skarb swej ziemi - licznych mieszkańców, których zmuszono, by porzucili swoje domostwa i zagrody i udali się w nieznane, w świat stworzony im przez obcych.<br><br>
    Czy historię mieszkańców Kopysna można ocalić od zapomnienia? Dopóki choć jeden z nas będzie mógł wymówić słowo "Kopysno" ze zrozumieniem, dopóty miejscowość ta nie ujdzie z pamięci żyjących. Nadejdzie jednak czas gdy każdy, kto mieszkał w tym przepięknym miejscu, powróci tu i sprawi, że nasze serca zapłoną ... .<br><br>
    Strona internetowa Kopysna powstała dzięki staraniom dzieci i wnuków jej mieszkańców, którzy pamiętają niezwykłą atmosferę stworzoną im przez dziadków i rodziców. Zapisali oni w swym sercu ciszę przerywaną odgłosem wiatru i ryczących jeleni; zapamiętali zapach ziemi podczas wiosennej orki i smak orzeźwiającej wody wydobywającej się z licznych źródeł, a także śmierć bliskich, których odejście z roku na rok zwiastowało koniec niepowtarzalnych chwil.<br><br>
    Celem istnienia strony nie jest propagowanie żadnych ideologii, a zwłaszcza nacjonalistycznych czy politycznych. Podane na niej informacje mogą nie być ścisłe pod względem historycznym i niekiedy zbyt ogólnikowe, gdyż niewielu pozostało z tych, którzy mogliby uzupełnić to, co tak szybko nam umknęło. Każdego, kto chciałby pomóc w uzupełnieniu naszej strony, prosimy o kontakt.
</div>
<div class="col-xxl"style="text-align:center;padding-right:50px;padding-left:50px;margin-bottom: 30px;padding-top:40px">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators" style="bottom:1%">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img style="width:100%;height:100%"src="1.png" alt="">
</div>
<div class="carousel-item">
<img style="width:100%;height:100%"src="2.jpg" alt="">
</div>
<div class="carousel-item">
<img style="width:100%;height:100%"src="3.jpg" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
<div style="text-align:center;background-color:lightgrey;position:fixed;bottom:5px;left:3%;width:94%">
© Copyrights Dedio & Dedio 2003
</div>
</body>
</html>
just add the mediaquery at your css, that will handle the issue (looks like a compatibility one)
more info at
https://developer.mozilla.org/pt-BR/docs/Web/CSS/#media
Related
I am trying to create a navigation menu using Bootstrap 5. Unfortunately, I can't manage to cleanly solve the "Active" status of the menu buttons using on-board tools.
When a link in a drop-down menu is clicked, I want the drop-down title to be set to Active. My JS solution causes the Active status to be set, but it takes 2 more clicks on another menu item afterwards to remove the Active status. The page is a one-page layout with anchor links.
Using JavaScript I got further, but the problem still exists.
Javascript Code:
<script>
/* mouse-over effect */
$('.dropdown').mouseover(function () {
$(this).addClass('show').attr('aria-expanded', 'true');
$(this).find('.dropdown-menu').addClass('show');
}).mouseout(function () {
$(this).removeClass('show').attr('aria-expanded', 'false');
$(this).find('.dropdown-menu').removeClass('show');
});
</script>
<script>
/* Code for changing active link on clicking */
var btns = $("#navbar .nav-item-count");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
var hrefValue = current[0].attributes[1].value;
const element1 = document.getElementById("ul1");
const element2 = document.getElementById("ul2");
if (hrefValue == "#section3") {
element.classList.add("active");
} else { element.classList.remove("active"); }
if ((hrefValue == "#section4") || (hrefValue == "#section5")) {
element2.classList.add("active");
} else { element2.classList.remove("active"); }
});
}
/* Code for changing active link on Scrolling */
$(window).scroll(function () {
var distance = $(window).scrollTop();
$('.page-section').each(function (i) {
if ($(this).position().top <= distance + 120) {
$('#navbar .nav-item-count.active').removeClass('active');
$('#navbar .nav-item-count').eq(i).addClass('active');
}
});
}).scroll();
</script>
HTML code:
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/bootstrap/bootstrap-icons/bootstrap-icons.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="row">
<div id="tiny-area" class="col apro-shrink">
<div class="apro-top-bar">
<div class="top-bar-left">
<ul class="social-icons">
<li><i class="bi bi-facebook"></i></li>
<li><i class="bi bi-twitter"></i></li>
<li><i class="bi bi-linkedin"></i></li>
<li><i class="bi bi-skype"></i></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="social-icons">
<li><i class="bi bi-phone-fill"></i>+49 123 456 789</li>
<li> </li>
<li><i class="bi bi-envelope-at-fill"></i>max#mustermann.com</li>
</ul>
</div>
</div>
</div>
</div>
<nav id="navbar" class="navbar sticky-top navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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 main-nav" id="navbarSupportedContent">
<ul class="nav nav-pills me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active nav-item-count" href="#section1">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link nav-item-count" href="#section2">Link 2</a>
</li>
<li class="nav-item dropdown">
<a id="ul1" class="nav-link dropdown-toggle button-item-count" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item nav-item-count" href="#section3">Link 3</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a id="ul2" class="nav-link dropdown-toggle button-item-count" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item nav-item-count" href="#section4">Link 4</a></li>
<li><a class="dropdown-item nav-item-count" href="#section5">Link 5</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link nav-item-count" href="#section6">Link 6</a>
</li>
<li class="nav-item">
<a class="nav-link nav-item-count" href="#section7">Link 7</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div data-bs-spy="scroll" data-bs-target="#navbar" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2">
<!-- Section 1 -->
<h1 id="section1" class="page-section">Seite 1</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 2 -->
<h1 id="section2" class="page-section">Seite 2</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 3 -->
<h1 id="section3" class="page-section">Seite 3</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 4 -->
<h1 id="section4" class="page-section">Seite 4</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 5 -->
<h1 id="section5" class="page-section">Seite 5</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 6 -->
<h1 id="section6" class="page-section">Seite 6</h1>
<p>
Lorem ipsum...
</p>
<!-- Section 7 -->
<h1 id="section7" class="page-section">Seite 7</h1>
<p>
Lorem ipsum...
</p>
</div>
</main>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script>
<!-- Javascript code see above -->
</script>
</html>
Can anyone help me with this? Thanks for help
i am trying to figure out how i can make my sidecart to close when i click outside of it, here is my scirpt:
const toggler = document.getElementById('menu-toggle');
const cartWrapper = document.getElementById('wrapper');
var crossButton = document.getElementById('closeCart');
// Displaying Menu Cart
document.addEventListener('DOMContentLoaded', () => {
toggler.addEventListener('click', toggleCart);
crossButton.addEventListener('click',closeCart);
function toggleCart(){
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
function closeCart(){
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
});
toggler is button that opens sidecart
cartWrapper is the sidecart
and crossButton the cross button that close the sidecart
Here is my sidecart:
If you want more information about my code i would appreciate it if you tell me, Thank you!
My html code:
<!-- Sidebar Cart-->
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div class="container">
<div class="row">
<div class="col-md-6 mt-auto titleCart">
<h2 class="titleText">YOUR CART</h2>
</div>
<div class="col-md-2" style="left:30%">
<div class="crossIcon" id="closeCart">
<span class="iconify closeIcon" data-icon="zmdi:close"></span>
</div>
</div>
</div>
</div>
<ul class="sidebar-nav">
<li class="cart-item">
<div class="cart-item-img">
<img src="imgProducts/guitar1.jpg" alt="">
</div>
<div class="cart-item-txt">
<a class = "cart-item-name" href="#">Miyiagi Guitar</a>
<span class="cart-item-price-qty">
1 x 16.00
</span>
</div>
<button class="button deleteBtn"><i class="fa fa-trash-o" style="position:relative;font-size:24px; left:0;"></i></button>
</li>
</ul>
<div class="col-md-12" style="margin-top:4em;">
<hr class="dividerLineCart">
<div class="cart-total">
<h2 class="cartTotal">Total: $0.00</h2>
</div>
</div>
<div class="col-md-12 d-flex buttonsCartDiv">
View Cart
Check Out
</div>
</div>
</div>
My navbar that includes the button that toggle my sidecart:
<nav class="navbar fixed-top navbar-expand-md py-3 navbar-dark" style="background-color: rgba(41, 56, 61,0.65);font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
<a class="navbar-brand" href="index.php">
<img src="Images/charman logo white-trans.png" alt="Logo" style="height:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li><hr class="dropdown-divider"></li>
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.php">Shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="guitars.php" id="navbarDropdownMenuLink" role="button" aria-haspopup="true" aria-expanded="false">
Guitars
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="electrical-type.php">Electrical</a>
<a class="dropdown-item" href="acoustic-type.php">Acoustic</a>
<a class="dropdown-item" href="basses-type.php">Basses</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" id="has-divider" href="#" data-target="#modalRegister" data-toggle="modal">Sign Up
<span class ="glyphicon glyphicon-user" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="has-divider2" href="#" data-target="#modalLogin" data-toggle="modal">Login
<span class="glyphicon glyphicon-log-in" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="menu-toggle"><span id="cart-text">Cart</span>
<span class="glyphicon glyphicon-shopping-cart" style="transform: scaleX(-1)" aria-hidden="true"></span>
<span class="badge badge-notify">0</span>
</a>
</li>
</ul>
</div>
</nav>
Well you can just click EventListener to the elements opening outside the sideCart.... ! Btw one question here where you want to get clicked.... you just need to add click event listener outside of this cart thing.. and you are pretty much good to go... !
if (cartWrapper.hasClass("menuDisplayed")) {
$("body").on("click", function() {
closeCart();
});
cartWrapper.on("click", function(event) {
event.stopPropagation();
});
});
Hope this Code will help you.
<script>
let sidebar = document.getElementById('sidebar-wrapper');
let navbarTogglerButton = document.getElementById('toggler-button');
window.document.addEventListener('click', (e) => {
let clickedArea = e.path[e.path.length-6]
if ( clickedArea == sidebar || e.path[0] == navbarTogglerButton) {
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
else {
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
});
</script>
I want to apologize in advance for my formal lack of coding knowledge but I'm trying my best to get my site thrown together.
So far I've handled most troubleshooting decently but now I've come to a problem where images will display properly on on my desktop browser but not on any mobile devices
the website is :https://a2zexotics.com
The aforementioned image is within my slick-slider . please let me know if any more info is needed!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>A2Z - Medical Marijuana Dispensary HTML Bootstrap Template</title>
<!-- Bootstrap -->
<link href="./assets/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<!-- Animate.css -->
<link href="./assets/animate.css/animate.css" rel="stylesheet" type="text/css" />
<!-- Font Awesome iconic font -->
<link href="./assets/fontawesome/css/all.css" rel="stylesheet" type="text/css" />
<!-- Slick carousel -->
<link href="./assets/slick/slick.css" rel="stylesheet" type="text/css" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet" type="text/css">
<!-- Theme styles -->
<link href="./assets/css/theme-dark.css" rel="stylesheet" type="text/css">
<link href="./assets/css/icon-styles.css" rel="stylesheet" type="text/css">
</head>
<body class="body">
<div class="page-loader cube-loader">
<div class="loader-wrap">
<div class="loader-1 loader-element"></div>
<div class="loader-2 loader-element"></div>
<div class="loader-4 loader-element"></div>
<div class="loader-3 loader-element"></div>
</div>
</div>
<header class="header-white-color header-horizontal header-over header-view-side">
<div class="container">
<nav class="navbar"><a class="navbar-brand navbar-brand-circle" href="homepage-1.html"><span class="logo-element"><span class="logo-icon"><span class="svg-content svg-fill-theme" data-svg="./assets/images/svg/logo-part.svg"></span></span><span class="logo-text">A2Z</span></span></a>
<button class="navbar-toggler" type="button"><i class="fas fa-bars nav-show"></i><i class="fas fa-times nav-hide"></i></button>
<div class="navbar-collapse">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<ul class="collapse nav">
<li class="nav-item"><a class="nav-link" href="homepage-1.html">Homepage 1</a></li>
<li class="nav-item"><a class="nav-link" href="homepage-2.html">Homepage 2</a></li>
<li class="nav-item"><a class="nav-link" href="homepage-3.html">Homepage 3</a></li>
</ul>
</li>
<li class="nav-item nav-item-arrow-down nav-hover-show-sub"><a class="nav-link" href="#" data-role="nav-toggler">Shop<span class="nav-arrow"><i class="fas fa-chevron-down"></i></span></a>
<ul class="collapse nav">
<li class="nav-item"><a class="nav-link" href="a2z_flower.html">Flower </a></li>
<li class="nav-item"><a class="nav-link" href="blog-2-cols.html">Concentrates</a></li>
<li class="nav-item"><a class="nav-link" href="blog-sidebar-right.html">Edibles</a></li>
<li class="nav-item"><a class="nav-link" href="blog-sidebar-left.html">Drinks</a></li>
<li class="nav-item"><a class="nav-link" href="article.html">Pre-rolls</a></li>
<li class="nav-item"><a class="nav-link" href="article-sidebar-right.html">Topicals</a></li>
<li class="nav-item"><a class="nav-link" href="article-sidebar-left.html">Transdermals</a></li>
<li class="nav-item"><a class="nav-link" href="article-sidebar-left.html">Clones</a></li>
<li class="nav-item"><a class="nav-link" href="article-sidebar-left.html">Acessories</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="blog-sidebar-right.html">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="contact-us.html">Contact</a></li>
</ul>
<div class="navbar-extra">
<ul class="actions-nav">
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-search"></i><span class="navbar-mobile"> Search</span></a></li>
<li class="nav-item nav-item-arrow-down nav-hover-show-sub"><a class="nav-link" href="#" data-role="nav-toggler">USD
<ul class="collapse nav">
<li class="nav-item"><a class="nav-link" href="#">USD</a></li>
</ul>
</li>
<li class="nav-item nav-item-arrow-down nav-hover-show-sub"><a class="nav-link" href="#" data-role="nav-toggler">English
<ul class="collapse nav">
<li class="nav-item"><a class="nav-link" href="#">English</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user"></i> Sign In</a></li>
<li class="nav-item"><a class="nav-link" href="shop-cart.html" data-show-block="cart"><i class="fas fa-shopping-bag"></i><span class="navbar-mobile"> Cart</span><span class="cart-quantity"><span class="badge badge-pill badge-warning"></span></span></a></li>
</ul>
<div class="navbar-info">
<div class="navbar-info-title">For demo purposes only.</div>
<div class="navbar-info-value">+ 88 018 4113 6251</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<section class="after-head slick-top-full">
<div class="slick-view-banner slick-carousel" data-slider="top-side-dots">
<div class="slick-slides">
<div class="slick-slide">
<div class="entity-banner section-white-text content-offs section-solid with-back">
<div class="overflow-back cover-image" background-size: cover; data-background="./assets/images/parts/testing.jpg" style="background-image: img src=("./assets/images/parts/testing.jpg") class="img-responsive" alt="Responsive Image"></div>
<div class="overflow-back bg-body-back opacity-80"></div>
<div class="container text-center entity-content">
<div class="my-auto row">
<div class="col-lg-9 mx-auto">
<h2 class="h1 entity-title">Here to <span class="text-theme">Help</span> </h2>
<p class="mb-4 pb-2 entity-text">At A2Z we cater to everyone's taste. No mater what your flavor is , we got it. Shop from a range of domestically sourced genetics as well as our core namesake line of A2Z products
</p>
<div class="entity-action-btns"><a class="btn-wide btn btn-theme" href="article-sidebar-right.html">read more</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="entity-banner section-white-text content-offs section-solid with-back">
<div class="overflow-back cover-image" data-background="./assets/images/parts/stash.jpg" style="fluid: url("./assets/images/parts/stash.jpg")></div>
<div class="overflow-back bg-body-back opacity-80"></div>
<div class="container text-center entity-content">
<div class="my-auto row">
<div class="col-lg-9 mx-auto">
<h2 class="h1 entity-title">Accessories <span class="text-theme">galore</span></h2>
<p class="mb-4 pb-2 entity-text">We pride ourselves on our extensive and versatile collection of accessories and pieces here at A2Z. Whether your looking for a new rig, your favorite wraps, or just arent quite sure what you're looking for; let us know , we'd love to help!
</p>
<div class="entity-action-btns"><a class="btn-wide btn btn-theme" href="shop-sidebar-right.html">shop now</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="entity-banner section-white-text content-offs section-solid with-back">
<div class="overflow-back cover-image" data-background="./assets/images/parts/pickup.jpg" style="background-image: url("./assets/images/parts/pickup.jpg") style= background-size:"cover";></div>
<div class="overflow-back bg-body-back opacity-80"></div>
<div class="container text-center entity-content">
<div class="my-auto row">
<div class="col-lg-9 mx-auto">
<h2 class="h1 entity-title"><span class="text-theme">Curbside Pickup </span> Now available</h2>
<p class="mb-4 pb-2 entity-text">Love our products but hate the lines? Order ahead and well get it ready and bring it out to your car once you're here!
</p>
<div class="entity-action-btns"><a class="btn-wide btn btn-theme" href="shop-sidebar-right.html">buy now</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
i am trying to use jquery to count the number of clicks made on a page and the time spent on the page and using sessions storage across pages. when the user clicks on a desired link it will then take them to a feedback page.
Here is the code that i have so far:
<!DOCTYPE html>
<html lang="en">
<!-- #BeginTemplate "Master.dwt" -->
<head>
<meta charset="utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>Home</title>
<link href="css1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="BenchMarking.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-2.2.0.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
<script>
var pageLoadDate;
var benchTime;
var eventDate;
var eDiffpl;
$(document).ready(function() {
pageLoadDate= new Date();
$("*").click(function(e)
{
// Stop the function propagating up the DOM tree
e.stopPropagation();
// Get the interaction time
eventDate = new Date();
// <p data-islink="islink">dduiduihd</p>
// Check if this is the link we want
if ($(this).data() !== undefined)
{
// The right link has been clicked
benchTime = benchmarkDate();
eDiffpl = eventDate.getTime() - pageLoadDate.getTime() - benchTime;
sessionStorage.myTester = Number(sessionStorage.myTester) + eDiffpl;
// Then move to next page of experiment
window.location.url = "feedback_page.html";
}
else
{
// An incorrect part of the page has been clicked
sessionStorage.errorCount = Number(sessionStorage.errorCount)++;
console.log(sessionStorage.errorCount);
}
});
});
</script>
-->
<!-- #EndEditable -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="Footer.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<img src="William hill logo.jpg" alt="Vegas" width="100" height="47">
<!-- Example responsive navigation menu -->
<a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a><span onclick="displayBar()">Sports</span></a></li>
<li><span onclick="displayBar()">Games / Macau</span></li>
<li><span onclick="displayBar()">Scratchcards</span></li>
<li><span onclick="displayBar()">Vegas</span></li>
<li><span onclick="displayBar()">Virtual</span></li>
<li><span onclick="displayBar()">Financials</span></li>
<li><span onclick="displayBar()">Login</span></li>
</ul>
</div>
</nav>
<nav id="fixed-nav-bar2">
<div id="menu0" class="menu1">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Ball Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Football</li>
<li>Basketball</li>
<li>Golf</li>
<li>Handball</li>
<li>Rubgy League</li>
<li>Rugby Union</li>
<li>Tennis</li>
<li>Cricket</li>
<li>Snooker</li>
<li>Pool</li>
<li>Volly Ball</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">International Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>American Football</li>
<li>Baseball</li>
<li>Basket Ball</li>
<li>GAA Football</li>
<li>GAA Hurling</li>
<li>Australian Rules</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Racing<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Formula 1</li>
<li>Formula 2</li>
<li>Formula E</li>
<li>Moterbikes</li>
<li>cycling</li>
<li>Horse Racing</li>
<li>Greyhound Racing</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Racket Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Tennis</li>
<li>Squash</li>
<li>Badmington</li>
<li>RacketBall</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vitual Sports<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>E-Sports</li>
<li>Virtual Greyhound Racing</li>
<li>Virtual Horse Racing</li>
<li>Virtual Football</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Other<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Boxing</li>
<li>UFC / MMA</li>
<li>Winter Sports</li>
<li>Darts</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- #BeginEditable "body" -->
<div class="container" class="first_body_element">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="sports%20betting.png" alt="sports betting" width="460" height="345">
</div>
<div class="item">
<a href="http://vegas.williamhill.com/http://vegas.williamhill.com/">
<img src="Vegas.png" alt="Vegas" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://macau.williamhill.com/#!/https://macau.williamhill.com/#!/">
<img src="Macau.png" alt="Macau" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://games.williamhill.com/#!/https://games.williamhill.com/#!/">
<img src="Games.png" alt="Games" width="460" height="345">
</a>
</div>
<div class="item">
<a href="https://scratchcards.williamhill.com/#!/https://scratchcards.williamhill.com/#!/">
<img src="Scratchcards.png" alt="Scratchcards" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://bingo.williamhill.com/http://bingo.williamhill.com/">
<img src="Bingo.png" alt="Bingo" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://poker.williamhill.com/http://poker.williamhill.com/">
<img src="Poker.png" alt="Poker" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://vegas.williamhill.com/live-casino/http://vegas.williamhill.com/live-casino/">
<img src="Roulette.png" alt="Roulette" width="460" height="345">
</a>
</div>
<div class="item">
<a href="http://vegas.williamhill.com/live-casino/http://vegas.williamhill.com/live-casino/">
<img src="Vegas%20Millions.png" alt="Vegas Millions" width="460" height="345">
</a>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" 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" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- #EndEditable -->
<script>
function displayBar(){
document.getElementById("fixed-nav-bar2").style.display = "block";
document.getElementById("myCarousel").style.paddingTop = "50px";
}
</script>
<footer>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Terms and Conditions</li>
<li>Privacy Policy</li>
<li>Rules</li>
<li>Help</li>
<li>Contact us</li>
<li>William Hill Press Office</li>
</ul>
</div>
</nav>
</footer>
</body>
<!-- #EndTemplate -->
</html>
however with this code above i am unable to open my drop down menu which my desired link will be in.
the benchmarkDate() method runs end_date=new Date() 999 times in order to get the time, this cannot be changed
I'm working on an AngularJS app where I use Bootstrap 3 to style my navigation (Navbar) and this works perfectly.
My headder
<div class="navbar-header">
<button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings">
<i class="glyphicon glyphicon-cog"></i></button>
<a class="navbar-brand text-lt" href="#/dashboard">
<img class="m-mid" ng-src="{{ logo }}" alt="{{ user.organization.name }}">
<span class="hidden-folded m-l-xs hide">{{app.name}}</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-settings navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
{{lang.name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="lang in langs">
<a class="p-t-sm p-b-sm" ng-click="setLang(lang.key)">
{{lang.name}}
</a>
</li>
</ul>
</li>
<li class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
<span class="thumb-sm avatar pull-right">
<img class="block" ng-src="{{ user.image_path }}" alt="...">
<i class="on md b-white bottom"></i>
</span>
{{name} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
Right now when on mobile device it is the button in the navbar-header that appears and behaves like a toggle, as expected using Bootstraps navigation. This means the user have to click on it to open it, and then click on it again whenever he wants to close it.
And on tablet/desktop it is two dropdowns (from navbar-collapse). Which I want to keep it that way.
My question is: Is there a way, on mobiles, to have the button behave as a dropdown instead of a toggle? So a user can click anywhere he wants and it closes instead of having to click on the button?
How about this example?
var app = angular.module('app', ['ui.bootstrap']);
app.controller('menu', function($scope) {
$scope.logo = 'http://i.stack.imgur.com/P1BHs.png';
$scope.user = {};
$scope.user.organization = {};
$scope.user.organization.name = "Org test";
$scope.user.image_path = "http://ionicframework.com/img/docs/venkman.jpg";
$scope.app = {name: "App test"};
$scope.lang = {name: "English"};
$scope.langs = [{key: "EN", name: "English"},{key: "IT", name: "Italian"}];
$scope.name = "user123";
$scope.setLang = function(key) {
}
$scope.containerClick = function($event) {
console.log("containerClick: "+$scope.navCollapsed)
$scope.navCollapsed = true;
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="menu">
<div class="navbar-header">
<button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-settings" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<i class="glyphicon glyphicon-cog"></i></button>
<a class="navbar-brand text-lt" href="#/dashboard">
<img class="m-mid" style="width: 200px" ng-src="{{ logo }}" alt="{{ user.organization.name }}">
<span class="hidden-folded m-l-xs hide">{{app.name}}</span>
</a>
</div>
<div class="collapse navbar-collapse navbar-settings navbar-right" uib-collapse="navCollapsed">
<ul class="nav navbar-nav">
<li class="dropdown" uib-dropdown>
<a href class="dropdown-toggle" uib-dropdown-toggle>
{{lang.name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="lang in langs">
<a class="p-t-sm p-b-sm" ng-click="setLang(lang.key)">
{{lang.name}}
</a>
</li>
</ul>
</li>
<li class="dropdown" uib-dropdown>
<a href class="dropdown-toggle" uib-dropdown-toggle>
<span class="thumb-sm avatar pull-right">
<img class="block img-circle" ng-src="{{ user.image_path }}" alt="...">
<i class="on md b-white bottom"></i>
</span> {{name}} <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
</div>
<div class="container container-exp" ng-click="containerClick($event)"></div>
<footer>
<hr />
<center>2016 XYZ. All Rights reserved.</center>
</footer>
</body>
</html>