There is a website, there is a mobile version. The mobile version has a drop-down menu. This menu works fine, but it doesn't close when clicked outside the block.
I've been looking for a solution on the Internet for a really long time, but nothing came up( I'll be very grateful for the help!
HTML
<header class="header" id="header">
<div class="container">
<div class="header__inner" id="header">
<div class="header__logo">
<img src="Images/ActiveBox_logo.png" alt="Logo" class="img__logo">
</div>
<nav class="nav" id="nav">
Features
Works
Our Team
Testimonials
Download
</nav>
<button class="burger" type="button" id="navToggle">
<span class="burger__item">Menu</span>
</button>
</div> <!-- header__inner -->
</div>
</header>
JS
let header = $("#header");
let intro = $("#intro");
let introH = intro.innerHeight();
let scrollPos = $(window).scrollTop();
let nav = $("#nav");
let navToggle = $("#navToggle");
checkScroll(scrollPos, introH);
$(window).on("scroll resize", function() {
introH = intro.innerHeight();
scrollPos = $(this).scrollTop();
checkScroll(scrollPos, introH);
});
function checkScroll(scrollPos, introH) {
if( scrollPos > introH ) {
header.addClass("fixed");
} else {
header.removeClass("fixed");
}
}
/* Smooth scroll */
$("[data-scroll]").on("click", function(event) {
event.preventDefault();
let elementId = $(this).data('scroll');
let elementOffset = $(elementId).offset().top;
nav.removeClass("show");
$("html, body").animate({
scrollTop: elementOffset - 70
}, 700);
});
// Nav Toggle
navToggle.on("click", function(event) {
event.preventDefault();
nav.toggleClass("show");
});
How about something like this?
$(document).on('click', function (e) {
if ($(e.target).closest("#box").length === 0) {
$("#box").hide();
console.log('clicked outside the box');
}
else {
console.log('clicked on the box');
}
});
#box{
width:100px;
height:40px;
background-color:blue;
color:white;
padding:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box'>
click me, then click outside
</div>
Related
I'm creating a website which has some JavaScript code. Everything of that JavaScript is working fine on the computer. But on my iPhone 7 the getElementById function does not work. I try to set a source of an img tag but nothing happens.
JavaScript:
var header_bar = $('.js-header-bar, .js-header-bar-mobile');
var header_bar_mobile = $('.js-header-bar-mobile');
var header_bar_navbar = header_bar_mobile.find('.navbar-primary');
var header_bar_toggler = header_bar_mobile.find('.navbar-toggler');
var header_bar_offsetTop = header_bar.offset().top;
$(window).on('scroll', onScroll);
function onScroll(){
if ($(this).scrollTop() > header_bar_offsetTop){
header_bar.addClass("sticky");
document.getElementById("headerLogo").src = "images/logo-black.png";
} else {
header_bar.removeClass("sticky");
document.getElementById('headerLogo').src = "images/logo-white.png";
}
}
The function should add at the top of the site a black logo and if I scroll a white logo.
On the computer it works but on my smartphone not.
HTML:
<header class="header header-mobile js-header-bar-mobile d-md-none">
<div class="header-bar">
<div class="header-bar-logo">
<a href="index.html">
<img class="originalTest" alt='Auto mit Schriftzug: "Autohandel-ZAR"' id="headerLogo" src="images/logo-white.png"/>
</a>
</div>
<div class="header-bar-menu">
<button class="navbar-toggler hamburger" type="button" id="js-header-toggle">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
Thank you in advance.
Add an additional event listener for mobile devices:
$(document.body).on('touchmove', onScroll);
so the complete code should looks like:
var header_bar = $('.js-header-bar, .js-header-bar-mobile');
var header_bar_mobile = $('.js-header-bar-mobile');
var header_bar_navbar = header_bar_mobile.find('.navbar-primary');
var header_bar_toggler = header_bar_mobile.find('.navbar-toggler');
var header_bar_offsetTop = header_bar.offset().top;
$(document.body).on('touchmove', onScroll);
$(window).on('scroll', onScroll);
function onScroll(){
if ($(this).scrollTop() > header_bar_offsetTop){
header_bar.addClass("sticky");
document.getElementById("headerLogo").src = "images/logo-black.png";
} else {
header_bar.removeClass("sticky");
document.getElementById('headerLogo').src = "images/logo-white.png";
}
}
I solved the problem by getting the element with jQuery by class and not by Id
so the issue was the Id part.
Working Code:
function onScroll(){
if ($(this).scrollTop() > header_bar_offsetTop){
header_bar.addClass("sticky");
$(".logoHeader").attr("src", "images/logo-black.png");
} else {
header_bar.removeClass("sticky");
$(".logoHeader").attr("src", "images/logo-white.png");
}
}
I cannot Close the dropdown using the button but i can close it when I clicked the outer page.
Working Demo here
var $menu = $('.menu');
$('.toggle').click(function () {
$menu.toggle();
});
$(document).mouseup(function (e) {
if (!$menu.is(e.target) // if the target of the click isn't the container...
&& $menu.has(e.target).length === 0) // ... nor a descendant of the container
{
$menu.hide();
}
});
Please help me guys.
$(document).ready(function(){
var $menu = $('.menu');
$('.toggle').click(function (e) {
e.stopPropagation();
$menu.toggle();
});
$('.container').click(function (e) {
e.stopPropagation();
$menu.toggle();
});
});
.dropdown {
margin: 200px auto;
position: relative;
width: 50%;
}
.toggle, .dropdown-menu {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="text-center col-xs-12">
<h1>jQuery: click outside to close menu</h1>
<p>Click the button to toggle the dropodown menu.</p>
<p>Then click outside dropdown menu to close.</p>
<div class="dropdown">
Toggle menu
<ul class="dropdown-menu menu">
<li class="dropdown-item">List item 1</li>
<li class="dropdown-item">List item 2</li>
<li class="dropdown-item">List item 3</li>
</div>
</div>
</div>
</div>
Use event.stopPropagation(); this will not prevent other handlers on the same element from running.
Simply U need only one action on mouse click. Your JS must be:
var $menu = $('.menu');
var $toggle = $('.toggle');
$(document).mouseup(function (e) {
if ($toggle.is(e.target)) {
$menu.toggle()
} else {
$menu.hide();
}
});
If you want to open and close on button. Just remove the second function and your code will work.
var $menu = $('.menu');
$('.toggle').click(function () {
$menu.toggle();
});
Hi i have 2 divs one is named as basic and other is advanced.
Then I have button to show advanced.
When I click on show advanced button it toggle down. But I want it to slide from right to left.
here is html
<div class="container" id="divBasic">Basic data</div>
<div class="container top_offset" id="divAdvanced" style=""> Advanced data</div>
<a style="float:right; margin-right: 10px; padding-right: 10px" href="javascript:void(0);" onclick="toggle_advanced(this);" id="hpAdvanced_top">Show Advanced ></a>
here is js
function toggle_basic(source) {
var div = $("#divBasic");
var top_btn = $("#divButtons");
div.toggle();
top_btn.toggle();
$("#divShapes").toggle();
if (source == "shapes") {
storeValue("Basic", "none");
} else {
storeValue("Basic", "block");
}
}
function toggle_advanced(hp) {
var divAdvanced = $("#divAdvanced");
divAdvanced.toggle();
if (hp.outerText != "Show Advanced") {
storeValue("Advanced", "none");
//top_btn.css("height", "30px");
hp.innerText = "Show Advanced";
} else {
storeValue("Advanced", "block");
//top_btn.css("height", "0px");
hp.innerText = "Hide Advanced";
}
}
kindly help me get advanced div as slide from right to left
Thank you
function toggle_basic(source) {
var div = $("#divBasic");
var top_btn = $("#divButtons");
div.toggle();
top_btn.toggle();
$("#divShapes").toggle();
if (source == "shapes") {
storeValue("Basic", "none");
} else {
storeValue("Basic", "block");
}
}
function toggle_advanced(hp) {
var divAdvanced = $("#divAdvanced");
divAdvanced.toggle("slide");
if (hp.outerText != "Show Advanced") {
//storeValue("Advanced", "none");
//top_btn.css("height", "30px");
hp.innerText = "Show Advanced";
} else {
//storeValue("Advanced", "block");
//top_btn.css("height", "0px");
hp.innerText = "Hide Advanced";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container" id="divBasic">Basic data</div>
<div class="container top_offset" id="divAdvanced" style=""> Advanced data</div>
<a style="float:right; margin-right: 10px; padding-right: 10px" href="javascript:void(0);" onclick="toggle_advanced(this);" id="hpAdvanced_top">Hide Advanced ></a>
Use ele.toggle("slide"); to slide left to right, and use jquery-ui to get the effect
use this
$('#divAdvanced').toggle('slide', {
direction: 'left'
}, 1000);
you can change left to right as you like
I am trying an animation on the two divs on button click . Here is the demo i have created js fiddle. what i want is
when the user will click on the button the right div will slide to right (it will hide). and the width of left div will become 100%.
on second time when user will click the right div will visible from right to left slide and the width of left div will 50 %
I am trying this code .
my html is
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
my js is
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
This one is simple solution without doing much coding see the fiddle: https://jsfiddle.net/uzar3j4q/7/
JS
var action = 1;
$("#show-tag").click(function () {
if ( action == 1 ) {
$("#tag-div" ).animate({'width':'0%',});
$('#tags-left').animate({'width':'90%'});
action = 2;
} else {
$("#tag-div" ).animate({'width':'45%',});
$('#tags-left').animate({'width':'45%'});
action = 1;
}
});
CSS
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
overflow:hidden; /* This property is added just to hide overflowing content */
}
first of all .. put left and right div in same div and in css
CSS
.col-md-12 {
white-space: nowrap;
overflow: hidden;
height:200px;
}
and you can use animate() method in js
JS
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//$('#tags-left').css('width','0%');
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').animate({'width':'45%'},500);
} else {
$('#tags-left').animate({'width':'100%'},500);
}
});
});
DEMO HERE
you can just play around that to get the exact action you need
Optimized #Nilesh Mahajan's answer.
Found a problem with it when clicking on the button continuously.
// Caching
var $tagsLeft = $('#tags-left'),
$tagDiv = $('#tag-div');
var tagLeftWidth,
tagDivWidth;
$("#show-tag").on('click', function () {
var $this = $(this);
$this.prop('disabled', true).addClass('disabled'); // Disable the button
tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
tagDivWidth = $tagDiv.width() ? '0%' : '45%';
$tagDiv.animate({
'width': tagDivWidth
}, function() {
$this.prop('disabled', false).removeClass('disabled'); // Enabling button
});
$tagsLeft.animate({
'width': tagLeftWidth
});
});
Demo: https://jsfiddle.net/tusharj/uzar3j4q/11/
Try this html:
<div id="tag-left" class="col-md-6">div left</div>
<div id="tag-right" class="col-md-6">div right</div>
and this javascript:
$("#show-tag").click(function (e) {
if($("#tag-right").width() == 0) {
$("#tag-left").animate({
width: '0'
});
$("#tag-right").animate({
width: '90%'
});
} else {
$("#tag-left").animate({
width: '90%'
});
$("#tag-right").animate({
width: '0'
});
}
});
jsfiddle
I'm trying to make a website scroll divs. When a visiter wants to scroll it should automatically go to the next or previous div.
Below you can see how my html looks like.
<body>
<header>
</header>
<div id="content">
<div id="contentv1">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv3">
</div>
</div>
</body>
I'm trying it with the following code:
(function() {
var scrollTo = function(element) {
$('html, body').animate({
scrollTop: element.offset().top
}, 500);
}
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if ($current.index() != $('#content > div').length - 1) {
$current.removeClass('current').next().addClass('current');
scrollTo($current.next());
}
});
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if (!$current.index() == 0) {
$current.removeClass('current').prev().addClass('current');
scrollTo($current.prev());
}
});
})();
The header has an height of 10% and sticks to the top. The content divs have a height of 90%. So when scrolled the top of the content divs should aline with the bottom of the header.
Can anyone help me into the right direction?