I want to Close the sidenav by clicking anywhere outside sidenav
my html code is
<body>
<!-- show image while loading -->
<div class="se-pre-con"></div>
<!-- Header starts here -->
<div class = "header">
<!-- search bar -->
<?php include("header.php");?>
<!-- search bar ends here -->
</div>
<!-- header ends here -->
<div class="primary" id="primary">
<!-- image slider starts here -->
<div class="image-slider">
<?php include("slider.php");?>
</div>
<!-- image slider starts here -->
<!-- all-content starts here -->
<div class = "container wraper">
<!-- content starts here -->
<div class="content">
<h3 class="Category"><strong> Category </strong>
<button type="submit" class="btn btn-xs btn-success complete" id="more"><strong>More </strong> <span class="glyphicon glyphicon-forward"></button>
</h3><hr id="index-hr">
<?php include("functions/index_category.php"); ?>
</div>
<!-- content ends here -->
</div>
<!-- all-content ends here-->
<!-- daily adds starts here -->
<div class="container news">
<h3 class="news"><strong> Daily News </strong></h3><hr id="index-hr">
</div>
<!-- daily adds ends here -->
<!-- side nav starts here -->
<div id="mySidenav" class="sidenav">
×
<div id="result">
<?php include("functions/sub_category.php")?>
</div>
</div>
<!-- side nav ends here -->
</div>
</body>
The Js i tried :
//close the side nav when clicked outside
var primary = document.getElementById('primary');
var sidenav = document.getElementById('mySidenav');
window.onclick = function(event){
if( event.target == primary ){
sidenav.style.width = "0px";
primary.style.marginLeft = "0px";
}
}
How ever it works clicking enywhere on the side nav by replacing event.target == sidenav But i want to close it by clickng outside
js for opening and closing the side nav are
function openNav() {
if($(window).width() > 600){
$("#mySidenav").attr("style","width:350px");
$(".primary").attr("style","margin-left:350px");
}else{
$("#mySidenav").attr("style","width:100%");
$(".primary").attr("style","margin-left:100%");
}
}
function closeNav() {
$("#mySidenav").attr("style","width:0px");
$(".primary").attr("style","margin-left:0px");
}
css code:
.wraper{
min-height: 165px;
overflow: hidden;
height: 200px;
}
.content {
margin-top: 30px;
}
#more{
width:6%;
margin-right:0px;
float:right;
}
.wraper.complete{
height: auto;
}
h3.sub{
color:#d34615;
text-decoration:underline;
padding-left: 10px;
}
#index-hr{
width:100%;
border-top:1px solid #333;
opacity:0.3;
}
Just check the event.target to see if it was NOT the side nav and that the nav is NOT already open:
//close the side nav when clicked outside
var primary = document.getElementById('primary');
var sidenav = document.getElementById('mySidenav');
window.onclick = function(event){
var sideNavWidth = sidenav.style.width;
// check to see if the event target was not the side nav
// AND that the side nav is open
if( event.target !== sidenav && sideNavWidth !== "0" ){
sidenav.style.width = "0";
primary.style.marginLeft = "0";
}
}
This is a crude implementation of your code, but you can see that the side nav bar does, in fact open (yellow) and will not close if you click on it, but will close if you click anywhere else.
//close the side nav when clicked outside
var primary = document.getElementById('primary');
var sidenav = document.getElementById('mySidenav');
window.onclick = function(event){
var sideNavWidth = sidenav.style.width;
// check to see if the event target was not the side nav
// AND that the side nav is open
if( event.target !== sidenav && sideNavWidth !== "0" ){
closeNav();
}
}
function closeNav(){
sidenav.style.width = "0";
primary.style.marginLeft = "0";
}
.sidenav { background: yellow;}
<div class="primary" id="primary">
<!-- image slider starts here -->
<div class="image-slider">
<?php include("slider.php");?>
</div>
<!-- image slider starts here -->
<!-- all-content starts here -->
<div class = "container wraper">
<!-- content starts here -->
<div class="content">
<h3 class="Category"><strong> Category </strong>
<button type="submit" class="btn btn-xs btn-success complete" id="more"><strong>More </strong> <span class="glyphicon glyphicon-forward"></button>
</h3><hr id="index-hr">
<?php include("functions/index_category.php"); ?>
</div>
<!-- content ends here -->
</div>
<!-- all-content ends here-->
<!-- daily adds starts here -->
<div class="container news">
<h3 class="news"><strong> Daily News </strong></h3><hr id="index-hr">
</div>
<!-- daily adds ends here -->
<!-- side nav starts here -->
<div id="mySidenav" class="sidenav">
×
<div id="result">
<?php include("functions/sub_category.php")?>
</div>
</div>
<!-- side nav ends here -->
</div>
Related
i have a problem with my website. I have couple of functions in java script that works in <body> <script> js code </script></body> but when i link external js file with exactly the same code functions that are called by onclick"function name" attribute stop working and I get error can't find variable: function name also it seems like it can't find some of ids for variables because i can't log them. this is my code
function onload() {
/* leaderboard variable */
let x = document.getElementById('boardw');
/* help popup variable*/
let y = document.getElementById('helpw');
/* settings popup variable*/
let z = document.getElementById('setw');
/* help button variable*/
let a = document.getElementById('help');
/* dropdown container variable*/
let dropdown = document.getElementById('dropdown');
/* footer popup display none*/
document.getElementById('card').style = "display: none;";
/* variable test */
console.log(x);
/* show footer popup */
function showCard() {
document.getElementById('card').style = "display: block;";
document.getElementById('footer').style = "display: none;";
}
/* hide footer popup */
function hide() {
document.getElementById('card').style = "display: none;";
document.getElementById('footer').style = "display: block;";
}
/* choose time in dropdown function */
function show(anything) {
document.getElementById('txt').value = anything;
}
/* show options in dropdown */
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
/* show leaderboard function*/
function menu1() {
x.classList.toggle('active');
}
/* show help popup function*/
function menu2() {
y.classList.toggle('active');
a.classList.toggle('active');
}
/* show settings function*/
function menu3() {
z.classList.toggle('active');
}
/* hide popups function*/
function remove() {
y.classList.remove('active');
z.classList.remove('active');
x.classList.remove('active');
dropdown.classList.remove('active');
}
}
<body id="bd" style="" onload="onload()">
<script src="script.js" charset="utf-8"></script>
<!-- dropdown select time window -->
<div class="dropdown" id="dropdown" onclick="">
<!-- dropdown textbox with chosen informations -->
<input type="text" class="textbox" id="txt" value="" placeholder=" select the test duration" readonly>
<!-- options for dropdown select -->
<div class="option">
<div onclick="show(' 1 minute')">1 minute</div>
<div onclick="show(' 2 minutes')">2 minutes</div>
<div onclick="show(' 3 minutes')">3 minutes</div>
<div onclick="show(' 5 minutes')">5 minutes</div>
<div onclick="show(' 10 minutes')">10 minutes</div>
</div>
</div>
<!-- checkboxes for charset in game -->
<div id="charset">
<!-- normal letters check -->
<div>
<label for="cka">a</label>
<input type="checkbox" id="cka" class="ck">
</div>
<!-- capital letters check -->
<div>
<label for="ckB">A</label>
<input type="checkbox" id="ckB" class="ck">
</div>
<!-- numbers check -->
<div>
<label for="ck1">1</label>
<input type="checkbox" id="ck1" class="ck">
</div>
<!-- special characters check -->
<div>
<label for="ck>">#</label>
<input type="checkbox" id="ck" class="ck">
</div>
</div>
<!-- about popup -->
<footer onclick="remove()">
<!-- show popup btn -->
<button id="footer" onclick="showCard();" style="">i</button>
<!-- popup container -->
<div id="card" class="card" style="">
<!-- close popup btn -->
<button id="close" onclick="hide()">x</button>
</div>
</footer>
<!-- menu -->
<menu>
<!-- leaderboard popup -->
<button class="menu" id="board" onclick="menu1()">L</button>
<div id="boardw" style="" class="menuw">
</div>
<!-- help popup -->
<button class="menu" id="help" onclick="menu2()">?</button>
<div id="helpw" style="" class="menuw">
</div>
<!-- settings pop -->
<button class="menu" id="settings" onclick="menu3()">S</button>
<div id="setw" style="" class="menuw">
</div>
</menu>
<!-- start game btn -->
<div id="gma">
<button id="start">Start</button>
</div>
<!-- frame for higher resolution screen-->
<div class="h"> </div>
</body>
You wrapped your functions in function onload() { ... } so the inner functions can't be reached from HTML.
Remove this wrapper.
Add defer attribute to the script
put functions and variables outside the onload function,
or use addEventListener to call listener
document.getElementById("cka").addEventListener("click", function(){
...
})
I need to change the header banner background image repeatedly in my HTML static page. Right now, it's having only a single bg image. I need to add 2 more images which must change one by one after 4 or 5 secs and repeats the process just like a slider by keeping the content unchanged. Is there any easy method without using slider plugins. Below is my HTML code for the header? Thanks & regards.
<header id="home">
<!-- Background Image -->
<div class="bg-img" ***style="background-image: url('images/images/p1.png');"***>
<div class="overlay"></div>
</div>
<!-- /Background Image -->
<!-- Nav -->
<nav id="nav" class="navbar nav-transparent">
<div class="container">
<div class="navbar-header">
<!-- Logo -->
<div class="navbar-brand">
<a href="home">
<img class="logo" src="images/logo-png.png" alt="logo" style="width:55%;">
<img class="logo-alt" src="images/logo-png.png" alt="logo">
</a>
</div>
<!-- /Logo -->
<!-- Collapse nav button -->
<div class="nav-collapse">
<span></span>
</div>
<!-- /Collapse nav button -->
</div>
<!-- Main navigation -->
<ul class="main-nav nav navbar-nav navbar-right">
<li>Home</li>
<li>About us</li>
<li>What we do</li>
<li>Gallery</li>
<li>Contact us</li>
</ul>
<!-- /Main navigation -->
</div>
</nav>
<!-- /Nav -->
<!-- home wrapper -->
<div class="home-wrapper">
<div class="container">
<div class="row">
<!-- home content -->
<div class="col-md-10 col-md-offset-1">
<div class="home-content">
<h2 class="white-text">uniforms # competetive rates</h2>
<p class="white-text">We are always committed to give you best quality uniform at very competitive rates
</p>
<button class="white-btn">Read more</button>
<button class="main-btn" style="background-color:#e29d0a">Gallery</button>
</div>
</div>
<!-- /home content -->
</div>
</div>
</div>
<!-- /home wrapper -->
</header>
If you are gonna do this without using slider plugins, that means you have to write your own plugin. Here is a very simple example with using javascript to achieve:
var images = new Array(
'https://dummyimage.com/1000x400/00ff00/ffffff',
'https://dummyimage.com/1000x400/0000ff/ffffff',
'https://dummyimage.com/1000x400/ffff00/ffffff',
'https://dummyimage.com/1000x400/ff0000/ffffff',
);
var slider = setInterval(function() {
document.getElementsByClassName('bg-img')[0].setAttribute('style', 'background-image: url("'+images[0]+'")');
images.splice(images.length, 0, images[0]);
images.splice(0, 1);
}, 3000);
.bg-img {
width: 100%;
padding: 10% 0;
background-size: cover;
background-position: center;
border: 1px solid;
}
<div class="bg-img" style="background-image: url('https://dummyimage.com/1000x400/ff0000/ffffff');">
<div class="overlay"></div>
</div>
you can try this
<div class="bg-img" id="mybg-div">
And javascript
$(function() {
var div = $('#mybg-div');
var backgrounds = ['url(image-one)', 'url(image-two)'];
var current = 0;
function nextBackground() {
div.css(
'background',
backgrounds[current = ++current % backgrounds.length]
);
setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
div.css('background', backgrounds[0]);
});
Working JSFIDDLE
You can also achieve this through keyframe animation:
like
#-webkit-keyframes changeBg
{
0% {background-image: url("images/img1.jpg");}
25% {background-image: url("images/img2.jpg");}
50% {background-image: url("images/img3.jpg");}
100% {background-image: url("images/img4.jpg");}
}
This works like a plugin:
$(document).ready(function(){
const imgOne = 'https://preview.ibb.co/b43uR8/img01.jpg';
const imgTwo = 'https://preview.ibb.co/ioNAzT/img02.jpg';
const imgThree = 'https://preview.ibb.co/c9xtKT/img03.jpg';
const imgArray = [imgOne, imgTwo, imgThree];
$('.bg-img').css('background-image', 'url(' + imgArray[0] + ')');
let interval = 0;
setInterval(function(){
if (interval < (imgArray.length - 1)) {
interval++;
} else {
interval = 0;
}
$('.bg-img').css('background-image', 'url(' + imgArray[interval] + ')');
}, 4000);
});
.bg-img {
width: 100%;
height: 100vh;
background-color: #eee;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg-img"></div>
Having this div's:
<div id="siteContainer">
<div id="Shadow">
<div id="Border">
<div id="Display">
<div id="NBar"></div>
<!-- End NBar -->
<div id="Screen"></div>
<!-- End Tablet Screen -->
<div id="MenuBar"></div>
<!-- End Menu Bar -->
</div>
<!-- End Display -->
</div>
<!-- End Border -->
</div>
<!-- End Shadow -->
</div>
#MenuBar is set with position fixed on the bottom of the screen (bottom: 0px) and what I want is to set position absolute when it reaches the bottom of div #Display so it doesn't go further downward.
I managed to make it work as I wanted with this code:
$(window).scroll(function (event) {
if ($(this).scrollTop() >= $("#MenuBar").height().valueOf() * 2) {
$("#MenuBar").addClass("fixedMenu");
} else {
$("#MenuBar").removeClass("fixedMenu");
}
});
I want to know if there might be a better way to do it.
I have just a simple hyperlink on which when I am trying to add an click() event handler it is not working. I tried, .on(), .live(), .delegate() none of them worked. How can I do it?
I cannot make a fiddle becuase I don't know why my bootstrap.min.css is not getting included in the external resources section.
Please tell me any other way of doing it.
My Code:
HTML:
<div class="navbar nav-fixed-top navbar-inverse" style="min-height: 50px; margin-bottom: 0; box-shadow: 0px 2px 5px #222;">
<!-- Creating a fixed to the top navbar with no bottom margin and a nice little shadow and increasing the height -->
<div class="navbar-inner" style="border-radius: 0;min-height: 50px; ">
<!-- Creating the inner content of navbar and increasng it's height aswell to match the parent's height aswell -->
<div class="container-fluid">
<!-- Main header starts -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<!-- Small screen collapseable menu starts --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
<!-- The collapseable menu icon(becuase the three `icon-bar` make an icon :P) -->
</button> <a class="brand" href="#"><img src="img/logo.png"
style="height: 25px;" /> </a>
<!-- adding the logo to the header -->
<div class="nav-collapse collapse pull-right">
<!-- div holding collapseable menu's data -->
<ul class="nav">
<!-- creating a list to be created in the collapseable menu -->
<li>Register
</li>
<!-- adding an hyper link to the collapseable menu -->
</ul>
<!-- closing the list -->
</div>
<!-- closing the div holding collapseable menu's data -->
</div>
<!-- closing the main header -->
</div>
<!-- closing inner content holder of navbar div -->
</div>
<!-- closing the fixed to top navbar holder -->
CSS: Using bootstrap.min.css
JS:
var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(registerBtn).on('click', function (e) {
i++;
if (i % 2 === 0) {
$("#register_frm").fadeToggle('fast', function () {
$("#login_frm").fadeToggle('fast');
});
$("#register").text('Register');
} else {
$("#login_frm").fadeToggle('fast', function () {
$("#register_frm").fadeToggle('fast');
});
$("#register").text('Login');
}
});
Any suggesstions?
Change your code :
$(function() {
var registerBtn = $("#register_button"); //storing the hyperlink of reg....
var i = 0; //click count
registerBtn.on('click', function (e) { // since registerBtn is a reference to anchor tag
e.prevenDefault(); // prevent default behaviour of anchor tag
.........
});
});
It's probably executing the handler binding before the element is created in the DOM. Either move the code to the end of the document (after the element has been created), or wrap it inside a ready event:
$(function() {
var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(registerBtn).on('click', function (e) {
i++;
if (i % 2 === 0) {
$("#register_frm").fadeToggle('fast', function () {
$("#login_frm").fadeToggle('fast');
});
$("#register").text('Register');
} else {
$("#login_frm").fadeToggle('fast', function () {
$("#register_frm").fadeToggle('fast');
});
$("#register").text('Login');
}
});
});
I am trying to use a link to open a specific tab that is created using divs and the tabs open and close using javascript.
Here are the tabs and the javascript is within the script tags at the bottom:
<div class="span12 module_cont module_tabs">
<div class="shortcode_tabs">
<div class="all_heads_cont">
<div class="shortcode_tab_item_title it1 head1 active" data-open="body1">%%LNG_ProductDescription%%</div>
<div class="shortcode_tab_item_title it2 head2" id="reviews" data-open="body2">%%LNG_JS_Reviews%%</div>
<div class="shortcode_tab_item_title it3 head3" data-open="body3">%%LNG_JS_ProductVideos%%</div>
<div class="shortcode_tab_item_title it4 head4" data-open="body4">%%LNG_JS_SimilarProducts%%</div>
</div>
<div class="all_body_cont">
<div class="shortcode_tab_item_body body1 it1">
<div class="ip">
%%Panel.ProductDescription%%
</div>
</div>
<div class="shortcode_tab_item_body body2 it2">
<div class="ip">
%%Panel.ProductReviews%%
</div>
</div>
<div class="shortcode_tab_item_body body3 it3">
<div class="ip">
%%Panel.ProductVideos%%
</div>
</div>
<div class="shortcode_tab_item_body body4 it4">
<div class="ip">
%%Panel.SimilarProductsByTag%%
%%Panel.ProductByCategory%%
%%Panel.ProductVendorsOtherProducts%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
</div>
</div>
</div><!-- .shortcode_tabs -->
<script type="text/javascript">
jQuery('.shortcode_tabs').each(function(index) {
/* GET ALL HEADERS */
var i = 1;
jQuery('.shortcode_tab_item_title').each(function(index) {
jQuery(this).addClass('it'+i); jQuery(this).attr('whatopen', 'body'+i);
jQuery(this).addClass('head'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_heads_cont').append(this);
i++;
});
/* GET ALL BODY */
var i = 1;
jQuery('.shortcode_tab_item_body').each(function(index) {
jQuery(this).addClass('body'+i);
jQuery(this).addClass('it'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_body_cont').append(this);
i++;
});
});
jQuery('.shortcode_tabs .all_body_cont div:first-child').addClass('active');
jQuery('.shortcode_tabs .all_heads_cont div:first-child').addClass('active');
jQuery('.shortcode_tab_item_title').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
jQuery('reviews').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
</script>
</div><!-- .module_cont -->
All I want to do is have a link on the same page that activates the reviews tab (id="reviews") and is also known as the body2.
all I have so far for my link is:
Reviews
Help. My brain hurts...
You just need to set the link up so that it doesn't take the user to a new page, and then setup a click event to open the tab up. Example:
HTML:
<a href='javascript:void(0);' id='reviewLink'>Review Tab</a>
JavaScript:
$('#reviewLink').click(function() {
$('.shortcode_tab_item_body').css({display:'none'});
$('.body2').css({display:'none'});
});
Or a jsfiddle here: http://jsfiddle.net/tKLhn/