We Keep Coding

When clicking on toggle menu it opens but automatically closes

When I click on the toggle menu it opens properly and then it automatically closes. I don't know why it is happening. I have only a little knowledge of JS.
How can I solve this problem?
My code
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class = "icofont-navigation-menu" > < /i></button > ');
$('body').append('<div class="mobile-nav-overly"></div>'); $(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function(e) {
e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
}
else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}

Now its working
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function (e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function (e) {
e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function (e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
// I removed the unnecessary code from here
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}

Javascript click event is doubling every click

Would be really grateful for some advice with this javascript issue I am having with a click event that seems to be doubling every time my slider is closed then reopened.
When you open the slider for the first time and click through the slides you can see in the console the clicks incrementing by 1 every time the 'btn--next' is clicked which is of course correct. When i then close the slider down and re-open it again when the 'btn--next' is clicked the clicks in the console are now incrementing by 2 every click. Close the slider again and re-open and then the 'btn--next' clicks in the console increment by 3 and so on every time the slider is re-loaded.
https://jsfiddle.net/95afhtx8/2/
var loadSlider = document.querySelector('.load__slider');
loadSlider.addEventListener('click', function() {
var slider = document.querySelector('.animal__slider');
var sliderSlide = document.querySelectorAll('.animal__slider__slide');
var nextSlide = document.querySelector('.btn--next');
var previousSlide = document.querySelector('.btn--previous');
var closeSlider = document.querySelector('.animal__slider__close');
var currentSlide = 0;
slider.classList.add('active');
setTimeout(function() {
slider.classList.add('active--show');
startSlide();
}, 100);
//Reset Slider
function resetSlides() {
for (var s = 0; s < sliderSlide.length; s++) {
sliderSlide[s].classList.remove('active--show');
sliderSlide[s].classList.remove('active');
}
}
//Start Slider
function startSlide() {
resetSlides();
sliderSlide[0].classList.add('active');
setTimeout(function() {
sliderSlide[0].classList.add('active--show');
}, 100);
}
//Previous slide
function slidePrevious() {
resetSlides();
sliderSlide[currentSlide - 1].classList.add('active');
setTimeout(function() {
sliderSlide[currentSlide].classList.add('active--show');
}, 100);
currentSlide--;
}
previousSlide.addEventListener('click', function() {
if (currentSlide === 0) {
currentSlide = sliderSlide.length;
}
console.log('click');
slidePrevious();
});
//Next slide
function slideNext() {
resetSlides();
sliderSlide[currentSlide + 1].classList.add('active');
setTimeout(function() {
sliderSlide[currentSlide].classList.add('active--show');
}, 100);
currentSlide++;
}
nextSlide.addEventListener('click', function() {
if (currentSlide === sliderSlide.length - 1) {
currentSlide = -1;
}
console.log('click');
slideNext();
});
closeSlider.addEventListener('click', function() {
slider.classList.remove('active--show');
slider.classList.remove('active');
resetSlides();
});
});

It's because every time you click on your slider toggle:
loadSlider[s].addEventListener('click', function () {
You're re-running code like this, which will add another click handler to the element:
nextSlide.addEventListener('click', function() {
You can add multiple event listeners to any object in the DOM. So you just keep adding more every time the slider opens.
You have three general options here.
Option 1: only set click handlers once
Don't re-add event handlers inside your loadSlider[s].addEventListener('click', function () { function. Do it outside so you aren't re-adding handlers.
Option 2: remove click handlers on close
You can remove the event listeners on close. To do this, you should store a reference to the function you make, so you can explicitly remove it later. You should do this for any handlers you add.
const nextClick = function () {
...
};
nextSlide.addEventListener('click', nextClick);
function resetSlides() {
nextSlide.removeEventListener('click', nextClick);
...
}
This way, when the slider is hidden, the click functionality will be turned off, and re-opening it will add new click handlers and the old ones won't fire because you removed them.
Option 3: Re-create the elements
If you remove an element from the DOM and make a completely new one, the new one won't have stale click handlers on it. This means you'll need to dynamically build your markup with Javascript (using document.createElement), not store it in the HTML page body.

I update your code to work properly (you need to close the anonymous function of the first event listener before you start declaring the others, otherwise you are copying them over and over and therefore the doubling/quadrupling etc...). I would also suggest to move DOM selectors outside of the event listener, they can evaluate only once:
var loadSlider = document.querySelector('.load__slider');
var slider = document.querySelector('.animal__slider');
var sliderSlide = document.querySelectorAll('.animal__slider__slide');
var nextSlide = document.querySelector('.btn--next');
var previousSlide = document.querySelector('.btn--previous');
var closeSlider = document.querySelector('.animal__slider__close');
var currentSlide = 0;
loadSlider.addEventListener('click', function() {
slider.classList.add('active');
setTimeout(function() {
slider.classList.add('active--show');
startSlide();
}, 100);
});
//Reset Slider
function resetSlides() {
for (var s = 0; s < sliderSlide.length; s++) {
sliderSlide[s].classList.remove('active--show');
sliderSlide[s].classList.remove('active');
}
}
//Start Slider
function startSlide() {
resetSlides();
sliderSlide[0].classList.add('active');
setTimeout(function() {
sliderSlide[0].classList.add('active--show');
}, 100);
}
//Previous slide
function slidePrevious() {
resetSlides();
sliderSlide[currentSlide - 1].classList.add('active');
setTimeout(function() {
sliderSlide[currentSlide].classList.add('active--show');
}, 100);
currentSlide--;
}
previousSlide.addEventListener('click', function() {
if (currentSlide === 0) {
currentSlide = sliderSlide.length;
}
console.log('click');
slidePrevious();
});
//Next slide
function slideNext() {
resetSlides();
sliderSlide[currentSlide + 1].classList.add('active');
setTimeout(function() {
sliderSlide[currentSlide].classList.add('active--show');
}, 100);
currentSlide++;
}
nextSlide.addEventListener('click', function() {
if (currentSlide === sliderSlide.length - 1) {
currentSlide = -1;
}
console.log('click');
slideNext();
});
closeSlider.addEventListener('click', function() {
slider.classList.remove('active--show');
slider.classList.remove('active');
resetSlides();
});
.animals {
text-align: center;
position: relative;
width: 80%;
height: 300px;
margin: 0 auto;
background-color: grey;
}
.load__slider {
text-align: center;
}
.animal__slider {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
display: none;
}
.animal__slider.active {
display: block;
}
.animal__slider.active .animal__slider__close {
display: block;
}
.animal__slider.active+.animal__slider__open {
opacity: 0;
}
.animal__slider__slide {
display: none;
position: absolute;
width: 100%;
height: 100%;
}
.animal__slider__slide1 {
background-color: red;
}
.animal__slider__slide2 {
background-color: green;
}
.animal__slider__slide3 {
background-color: yellow;
}
.animal__slider__slide4 {
background-color: blue;
}
.animal__slider__slide.active {
display: block;
}
.btn {
color: black;
position: absolute;
bottom: 5px;
cursor: pointer;
}
.btn--previous {
right: 60px;
}
.btn--next {
right: 30px;
}
.animal__slider__close {
display: none;
position: absolute;
right: 0;
cursor: pointer;
}
.animal__slider__open {
display: block;
cursor: pointer;
}
<section class="animals">
<div class="animal__slider">
Slider
<div class="animal__slider__slide animal__slider__slide1">
slide 1
</div>
<div class="animal__slider__slide animal__slider__slide2">
slide 2
</div>
<div class="animal__slider__slide animal__slider__slide3">
slide 3
</div>
<div class="animal__slider__slide animal__slider__slide4">
slide 4
</div>
<span class="btn btn--previous">previous</span>
<span class="btn btn--next">next</span>
<span class="animal__slider__close">close slider</span>
</div>
<span class="animal__slider__open load__slider">open slider</span>
</section>

In your code, you call nextSlide.addEventListener(...) each time you open the slider, but you never remove that listener. you have to call the function nextSlide.removeEventListener(...) when you close the slider. You also can make sure to call addEventListener only when you open the slider the first time, or even before you open it, as the html element is never destroyed.
To be able to remove the listener, you have to make it accessible in your code when you close the slider. You can't use anonymous functions for this.
EDIT :
An other, simpler solution is to change
nextSlide.addEventListener('click', function(){...});
to:
nextSlide['onclick'] = function() {...};

Trigger text selection while mouse is down ( window.getSelection() is empty until mouseup )

It seems that window.getSelection() is empty until mouseup occurs. I am able to get the clicked word and select it on mouseup, but I need to do this on mousedown (before mouseup occurs). In the following jsfiddle example below I am triggering mouseup (which is triggered successfully) but the text selection is still empty until the physical mouseup occurs.
https://jsfiddle.net/aoznge7j/1/
$(function() {
app_init();
});
function app_init() {
container = $('div');
selection = false;
word = false;
start = false;
end = false;
if(window.getSelection) {
selection = window.getSelection();
selection.empty();
} else {
alert('Please update your browser to use this application.');
}
container.mousedown(function(e) {
console.log('mousedown');
mouse_press(e);
});
container.mouseup(function(e) {
console.log('mouseup');
mouse_release(e);
});
}
function mouse_press(e) {
$(e.target).trigger('mouseup'); // this triggers the mouseup but selection is empty
}
function mouse_release(e) {
handle_selection(); //physical mouseup works
}
function handle_selection() {
selection = window.getSelection();
//console.log(selection);
if(selection.isCollapsed) {
// this is how i am selecting the clicked word, and yes i know .modify is non-standard
selection.modify('move', 'forward', 'character');
selection.modify('move', 'backward', 'word');
selection.modify('extend', 'forward', 'word');
word = selection.toString();
start = selection.anchorOffset;
end = selection.focusOffset;
console.log( 'word:'+word+' start:'+start+' end:'+end );
}
}
Is there another way to trigger the text selection (which isCollapsed true) while the mouse is still down?

Just call window.getSelection() in the mousedown event. But keep in mind that it will return what was selected before the mousedown.
container.mousedown(function(e) {
selection = window.getSelection();
console.log('mousedown='+ selection);
mouse_press(e);
});
$(function() {
app_init();
});
function app_init() {
container = $('div');
selection = false;
word = false;
start = false;
end = false;
if(window.getSelection) {
selection = window.getSelection();
selection.empty();
} else {
alert('Please update your browser to use this application.');
}
container.mousedown(function(e) {
$('.result').text($('#word').text());
});
container.mouseup(function(e) {
mouse_release(e);
});
}
function mouse_press(e) {
$(e.target).trigger('mouseup');
//container.trigger('mouseup');
//handle_selection();
}
function mouse_release(e) {
handle_selection();
}
function handle_selection() {
selection = window.getSelection();
if(selection.isCollapsed) {
selection.modify('move', 'forward', 'character');
selection.modify('move', 'backward', 'word');
selection.modify('extend', 'forward', 'word');
word = selection.toString();
start = selection.anchorOffset;
end = selection.focusOffset;
}
}
// wrap words in i.ele
$(document).on('mouseenter', 'p', function() {
var $this = $(this);
var word = $this.text().replace(/\b(\w+)\b/g, "<i class='ele'>$1</i>");
$this.html( word );
});
// unwrap on mouseleave
$(document).on('mouseleave', 'p', function() {
$(this).find('i.ele').contents().unwrap().end().end().html()
});
// bind to each span
$(document).on('mouseenter', 'p i.ele', function() {
var word = $(this).css('background-color','#ffff66').text();
$('#word').text(word);
});
$(document).on('mouseleave', 'p i.ele', function() {
$('#word').text('');
$(this).css('background-color','');
});
div {
border: 1px dotted orange;
padding: 1em;
}
p {
font-size: 1.5em;
font-family: sans-serif;
}
.result {
border: 1px #ccc solid;
padding: 3px 10px;
height: 30px;
}
i.ele {
font-style: normal;
}
#word {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>
This is some type of testing test.
</p>
<p class="result"></p>
mousedown word: <span id="word"></span>
</div>
Edit: now shows text that is highlighted while dragging the mouse, using mousemove. You may need to expand the snippet to see the result.
Edit 2: Now detects words on hover and captures it on mousedown.

Stop focusout when clicking search results div

This is in reference to the code at this fiddle: http://jsfiddle.net/x8whpx09/17/
I am trying to create a search box with a result list that pops up when the user enters something. The problem I am encountering is when the user clicks anywhere other than the input element the search result list will close. I have a focusout event attached to the parent DIV, but even if I attach it to the input I get the same behavior. What I want is for the user to be able to select the scroll bar on the list and not have the list disappear. If they click outside of the input, or the list then the list should close.
Right now it closes no matter where they click unless it is in the input.
EDIT: The performSearch function body is wrapped in an AJAX request.
SOLUTION: I finally figured out what is happening. You need to bind to the mousedown event and return false in order to allow selecting the scrollbar in the dropdown. This question finally gave me the solution.
$target.on('mousedown',function (event) {
return false;
});
Here is the code at the fiddle:
var search = {
closing: null,
performSearch: function(elem, e) {
var $this = $(elem);
var $target = $('#search-results');
if ($target.length === 0) {
$target = $('<div id="search-results" class="sb-list"></div>');
$target.insertAfter($this);
var p = $this.position();
$target.css('top', (p.top + $this.height() + 15) + 'px');
$target.css('width', ($this.width() + p.left + 10) + 'px');
$target.css('width', ($this.width() + 25) + 'px');
$target.css('left', (p.left) + 'px');
$target.slideDown('fast', function() {
$target.css('overflow', 'auto');
});
$target.on('mouseover', '.sb-row', function() {
$(elem).addClass('sb-active');
$('.sb-active').removeClass('sb-active');
});
$target.on('click', '.sb-row', search.click);
//$target.parent().on('focusin focusout', search.listFocus);
} else {
$target.empty();
$target.slideDown('fast', function() {
$target.css('overflow', 'auto');
});
}
for (i = 0; i < 40; i++) {
var html = [];
html.push('<div class="sb-row' + (i == 0 ? ' sb-active' : '') + '">');
html.push('test result' + i + '');
html.push('</div>');
var $out = $(html.join(''));
$target.append($out);
}
},
delayClose: function(e) {
console.log('delayClose');
var self = this;
console.log('results focused: ' + $('#search-results').is(':focus'));
console.log('div focused: ' + $('#parent').is(':focus'));
search.closing = window.setTimeout(function() {
search.close.apply(self, arguments);
}, 1000);
},
listFocus: function(e) {
console.log(e.type);
var self = this;
window.clearTimeout(search.closing);
},
click: function(e) {
console.log('clicked');
},
close: function(e) {
console.log('closing');
window.clearTimeout(search.closing);
var $this = $(this);
$('#search-results').slideUp('fast');
}
};
$(document).ready(function() {
$searchBox = $('#search');
$searchBox.on('focus', function(e) {
this.value = '';
this.select();
e.stopPropagation();
return false;
});
$searchBox.on('keyup', function(e) {
search.performSearch($searchBox[0], e);
});
$searchBox.parent().on('focusout', search.delayClose);
});
.sb-list {
position: absolute;
width: 250px;
top: 0;
left: 0;
height: 300px;
background: #FAFAFA;
border: solid 1px #999;
border-top: none;
display: none;
overflow: auto;
z-index: 92592;
-webkit-box-shadow: 0 2px 2px #999999;
-moz-box-shadow: 0 2px 2px #999999;
-ms-box-shadow: 0 2px 2px #999999;
box-shadow: 0 2px 2px #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
<input type="text" id="search" />
</div>

You have some malfunctioning code here and multiple things to fix. If you inspect #search (the input box), you'll see that search results appear additively for every character entered. That is, you end up with multiple id="search-results" elements.
A very easy oneline solution for this single error is to add $('#search-results').remove(); to your performSearch handler function:
performSearch: function (elem, e) {
$('#search-results').remove();
// ...
}
I have created an updated JSFiddle to demonstrate its functioning and the additional inconveniences and errors this introduces, one of them being the lack of correct event handling when you click the #search-results dropdown itself.
I suggest you try and track the source of errors in the code of your search using Developer Tools or a Javascript debugger, because there are numerous sections in your code that would need either fixing, or rethinking; too much for a single answer.

Drag and drop picture to text and with double click to remove the text inside the box

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Basic Drag and Drop</title>
<style>
#drop {
min-height: 200px;
width: 200px;
border: 3px dashed #ccc;
margin: 10px;
padding: 10px;
clear: left;
}
p {
margin: 10px 0;
}
#triangle {
background: url(images/triangle.jpg) no-repeat;
}
#square {
background: url(images/square.gif) no-repeat;
}
#circle {
background: url(images/circle.jpg) no-repeat;
}
#red {
background: url(images/red.jpg) no-repeat;
}
#yellow {
background: url(images/yellow.jpg) no-repeat;
}
#green {
background: url(images/green.jpg) no-repeat;
}
.drag {
height: 48px;
width: 48px;
float: left;
-khtml-user-drag: element;
margin: 10px;
}
</style>
<script>
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
(function () {
var pre = document.createElement('pre');
pre.id = "view-source"
// private scope to avoid conflicts with demos
addEvent(window, 'click', function (event) {
if (event.target.hash == '#view-source') {
// event.preventDefault();
if (!document.getElementById('view-source')) {
// pre.innerHTML = ('<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]});
var xhr = new XMLHttpRequest();
// original source - rather than rendered source
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
pre.innerHTML = this.responseText.replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]});
prettyPrint();
}
};
document.body.appendChild(pre);
// really need to be sync? - I like to think so
xhr.open("GET", window.location, true);
xhr.send();
}
document.body.className = 'view-source';
var sourceTimer = setInterval(function () {
if (window.location.hash != '#view-source') {
clearInterval(sourceTimer);
document.body.className = '';
}
}, 200);
}
});
})();
</script>
<style id="jsbin-css">
</style>
</head>
<body>
<div class="drag" id="triangle" draggable="true"></div>
<div class="drag" id="square" draggable="true"></div>
<div class="drag" id="circle" draggable="true"></div>
<div class="drag" id="red" draggable="true"></div>
<div class="drag" id="yellow" draggable="true"></div>
<div class="drag" id="green" draggable="true"></div>
<div id="drop"></div>
<script>
function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
var dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(dragItems[i], 'dragstart', function (event) {
// store the ID of the element, and collect it on the drop later on
event.dataTransfer.setData('Text', this.id);
});
}
var drop = document.querySelector('#drop');
// Tells the browser that we *can* drop on this target
addEvent(drop, 'dragover', cancel);
addEvent(drop, 'dragenter', cancel);
addEvent(drop, 'drop', function (e) {
if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
this.innerHTML += '<p>' + e.dataTransfer.getData('Text') + '</p>';
return false;
});
</script>
</body>
</html>
how to double click remove the text inside the textbox by using html5? I having problem on how to remove the text out from the textbox in this html5. things can be drag and drop inside, but i want to remove the things inside that i have been dragged inside... i having problem on removing the item inside that.

Try using this.
document.getElementById('selectID').ondblclick = function(){
alert(this.selectedIndex);//remove your text here
};