We Keep Coding

Trigger a 'Click' on an Input field [duplicate]

I'm trying to simulate a click on an input tag, through the click on an anchor tag, this way I can hide the input and wrap an image inside the anchor tag.
This works using the jQuery trigger function, but I can't make it work with just "plain" Javascript:
jQuery version:
let fake = $('.fake')
fake.click(function(e) {
e.preventDefault();
$('#user_avatar').trigger('click');
})
#user_avatar { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
<img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>
The JavaScript version using new Event and dispatchEvent:
let fake = document.querySelector('.fake');
fake.addEventListener('click', function(e) {
e.preventDefault();
console.log('testing');
let clickEvent = new Event('click');
document.getElementById('user_avatar').dispatchEvent(clickEvent)
})
#user_avatar { display: none; }
<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
<img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>
The console.log is rendered, but the event isn't being dispatched, what am I doing wrong?

Use:
document.getElementById('user_avatar').click();
Tested and it works.

document.getElementById('user_avatar').click() will work
let fake = document.querySelector('.fake');
fake.addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('user_avatar').click()
})
#user_avatar {
display: none;
}
<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
<img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>

You don't need JavaScript at all to solve this problem.
Just make the input invisible by setting its opacity:0 and position both elements absolutely within a common parent element, then make sure the input is on the top layer and is the same size as the image behind it.
#user_avatar { opacity:0; position:absolute; z-index:9; width:320px; height:240px; }
img { position:absolute; z-index:-1; }
<div>
<input type="file" name="file_field" id="user_avatar">
<img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</div>

Image tag inside a button makes the js stop working on chrome

I'm trying to make a button with an image that will toggle a div's class, however, when I use the tag image inside the button, the js won't work. This only happens on chrome, the same code works normally on firefox. Is there any solution to this?
codepen: https://codepen.io/luansergiomattos/pen/zydWyM
html:
<div class="bar" style="background-color: #474973; ">
<br />
<button id="searchButton">
<img
src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png"
alt=""
style="width: 20px;"
/>
</button>
</div>
<div class="bar off but" id="search" style="background-color: #9CEAEF">
<form action="#">
<input
type="text"
placeholder="Search.."
name="search"
class="header__search"
/>
</form>
</div>
js:
var focused = document.querySelector('.header__search'), searchWrapper = document.querySelector('#search'),
searchInput = document.querySelector('#searchButton');
document.addEventListener('click', function (e) {
if (~e.target.className.indexOf('header__search')) {
searchWrapper.classList.remove('off');
focused.focus();
} else if (~e.target.id.indexOf('searchButton')) {
searchWrapper.classList.toggle('off');
focused.focus();
} else {
searchWrapper.classList.add('off');
}
});
edit: this is what the code is supossed to do: when i press the button, the js will toggle a class, the class named "off" has width: 0px; display: none etc. So the element will be hidden when i press the button, and it will show up again when i press the button. Sorry for any english mistak

The reason this happens is the image becomes the target in your click function – try disable pointer events and it will work again :)
button img { pointer-events: none; }

Make an image visible when I hover over another

Essentially I have an interactive map which contains 4 div statements each of which contains an image of an island. I would like to create an on hover event which will display a corresponding sailing timetable depending on which image the user hovers. e.g. island 1 should display timetable 1.
I have the following code so far and ideally I am looking for a javascript or css solution:
<div class="Map">
<div id="Island_Morar">
<img src="images/IsleOfMorar.jpg"/>
</div>
<div id="Island_Rum">
<img src="images/IsleOfRum.jpg"/>
</div>
<div id="Island_Eigg">
<img src="images/IsleOfEigg.jpg"/>
</div>
<div id="Island_Muck">
<img src="images/IsleOfMuck.jpg"/>
</div>
</div>
<img id="TimetableEigg" src="images/TimetableEigg.jpg">
any help is appreciated.

You need some different markup if you want a plain css solution. If you want to have different timetables for each hover you should go with something like this:
markup
<div class="tt-container" id="Island_Rum">
<img src="images/IsleOfRum.jpg"/>
<img class="timetable" src="images/TimetableRum.jpg">
</div>
<div class="tt-container" id="Island_Eigg">
<img src="images/IsleOfEigg.jpg"/>
<img class="timetable" src="images/TimetableEigg.jpg">
</div>
<div class="tt-container" id="Island_Muck">
<img src="images/IsleOfMuck.jpg"/>
<img class="timetable" src="images/TimetableMuck.jpg">
</div>
</div>
css
.timetable {
display : none;
}
.tt-container:hover .timetable {
display : block;
}
That should do the trick

If you want to keep your current HTML code, I'd make three image blocks for timetables, and initially set them all to display: none; and add onmouseover event handlers to island elements which would contain Javascript statement which will set disply: block; on appropriate timetable.
Something like this:
<div class="Map">
<div id="Island_Morar" onmouseover="document.getElementById('TimetableEigg1').style.display = 'block';">
<img src="images/IsleOfMorar.jpg"/>
</div>
<div id="Island_Rum" onmouseover="document.getElementById('TimetableEigg2').style.display = 'block';" >
<img src="images/IsleOfRum.jpg"/>
</div>
<div id="Island_Eigg" onmouseover="document.getElementById('TimetableEigg3').style.display = 'block';" >
<img src="images/IsleOfEigg.jpg"/>
</div>
<div id="Island_Muck" onmouseover="document.getElementById('TimetableEigg4').style.display = 'block';" >
<img src="images/IsleOfMuck.jpg"/>
</div>
</div>
<img id="TimetableEigg1" src="images/TimetableEigg1.jpg">
<img id="TimetableEigg2" src="images/TimetableEigg2.jpg">
<img id="TimetableEigg3" src="images/TimetableEigg3.jpg">
<img id="TimetableEigg4" src="images/TimetableEigg4.jpg">

Seems you barely know the basics of HTML and already trying to jump too deep. External libraries will help you and speed up your progress. I see people gave you CSS solutions so here is a JS solution.
First thing is download the well known JS library called jQuery.
then load this file to your page and add a script at the bottom of your body tag:
$("div.map").on("mouseover", "#Island_Morar", function(e) {
$(this).show(); // option one
//$(this).addClass("class-name"); // option two
}).on("mouseout", "#Island_Morar", function(e) {
$(this).hide(); // option one
//$(this).removeClass("class-name"); // option two
});
With this script you can do whatever you want, for example - use the second option of adding and removing classes in order to animate your Timetables (see Example).

Possible CSS / JQuery solution:
$(".Map a").hover(
function() {
$('#' + $(this).attr('class')).show();
}, function() {
$('#' + $(this).attr('class')).hide();
}
);
.timetables img { display:none; }
<div class="Map">
<a href="#" class="islandmorar">
<img src="images/IsleOfMorar.jpg"/>
</a>
<a class="islandrum">
<img src="images/IsleOfRum.jpg"/>
</a>
<a class="islandeigg">
<img src="images/IsleOfEigg.jpg"/>
</a>
<a class="islandmuck">
<img src="images/IsleOfMuck.jpg"/>
</a>
</div>
<div class="timetables">
<img id="islandmorar" src="images/TimetableEigg.jpg"/>
<img id="islandrum" src="images/TimetableEigg.jpg"/>
<img id="islandeigg" src="images/TimetableEigg.jpg"/>
<img id="islandmuck" src="images/TimetableEigg.jpg"/>
</div>

Pure CSS solution but you need to place the large image in .main div
the first image will be displayed first and will change on hover on other images and when you leave move out of the main div it will show the first image
Note: used random images
.Map > div {
display: inline-block;
}
img.two,
img.three,
img.four,
#Island_Rum:hover ~ img.one,
#Island_Muck:hover ~ img.one,
#Island_Eigg:hover ~ img.one {
display: none;
}
img.one {
display: block;
}
#Island_Morar:hover ~ img.one {
display: block;
}
#Island_Rum:hover ~ img.two {
display: block;
}
#Island_Eigg:hover ~ img.three {
display: block;
}
#Island_Muck:hover ~ img.four {
display: block;
}
<div class="Map">
<div id="Island_Morar">
<img src="http://placeimg.com/100/100/any/animals" />
</div>
<div id="Island_Rum">
<img src="http://placeimg.com/100/100/any/arch" />
</div>
<div id="Island_Eigg">
<img src="http://placeimg.com/100/100/any/nature" />
</div>
<div id="Island_Muck">
<img src="http://placeimg.com/100/100/any/tech" />
</div>
<img class="one" src="http://placeimg.com/400/400/any/animals" />
<img class="two" src="http://placeimg.com/400/400/any/arch" />
<img class="three" src="http://placeimg.com/400/400/any/nature" />
<img class="four" src="http://placeimg.com/400/400/any/tech" />
</div>

Don't put class="map" to the wrapper div, give it to every div with id beginning with "Island_...".
Do the same with your timeTable images, give them a class "timeTable".
Put this before your "head" end tag :
<script>
"use strict";
//wait for every element to be loaded
window.onload = function(){initialization();}
</script>
Then, put this before your "body" end tag :
<script>
"use strict";
//first create a function that hides elements with class 'timeTable'
function hide(elements){
var htmlClass = document.getElementsByClassName(elements);
//hide every element with class
for (var i = 0 ; i < htmlClass.length ; i++){
htmlClass[i].style.display = "none";
htmlClass[i].style.visibility = "hidden";
}
}
//create a function that show only the timeTable you want
function show(element){
document.getElementById(element).style.display = "block";
document.getElementById(element).style.visibility = "visible";
}
function initialization(){
//replace 'someMapId' with the id of the image you are hovering
//replace 'someTimeTableId' with the id of the image you want to show
//replace 'timeTable' with the name of a class you want to hide
document.getElementById("someMapId").onmouseover = function(){
hide("timeTable");
show("someTimeTableId");
}
//repeat these 3 lines for every image the user will hover
}
</script>
Don't forget the quotes when using the functions.
You should use css for styling and javascript for interactions.
You don't need jQuery for basic scripts like that, it only slows page loading and keeps you away from learning basic javascript.
(Ok, I edited mistakes, now it works ;)
jsFiddle

Simple Slideshow on Hover, Slideshow stops on mouseleave

This is my first post. My code works in chrome and safari, but the slideshow won't stop in firefox. I want to show a live version of this code to make it easier, but I'm working locally. I'm wondering if its because I wrote it with hover instead of mouseover and mouseleave, but I dont know how to write it out correctly that way. There may even be an error in this code, but the browser is not detecting it.
HTML:
<div class="fadelinks">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
jQuery:
jQuery(document).ready(function($) {
$(".fadelinks").each(function(){
var $this = this;
$($this).hover(function(){
$('> :gt(0)', $this).hide();
timer = setInterval(function(){$('> :first- child',$this).fadeOut()
.next().fadeIn().end().appendTo($this);}, 1500);
}, function() {
clearInterval(timer);
});
});
});

a simpler way to achieve is to add onmouseover = "mouseoverFunction();" onmouseout = "mouseoutFunction()" to each img tag
then in javascript
mouseoverFunction()
loop through image array
show next
wait
mouseoutFunction()
stop looping
you do not need the a tags

well you want that on mouse hover your images start sliding here is another code i am not so good in jquery but here is the code:
css
#fadelinks{
width: 100px;
height: 100px;
overflow: hidden;
}
set your image height and width equal to the width and height of fadelinks
HTML
<div class="fadelinks">
<a id="same1" href="#"> <img src=""/> </a>
<a id="same2" href="#"> <img src=""/> </a>
<a id="same3" href="#"> <img src=""/> </a>
<a id="same4" href="#"> <img src=""/> </a>
</div>
<button onclick="slid1">image1<button>
<button onclick="slid2">image2<button>
<button onclick="slid3">image3<button>
<button onclick="slid4">image4<button>
jquery
var slide1 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same1").fadeIn();
});
}
var slide2 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same2").fadeIn();
});
} var slide3 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same3").fadeIn();
});
} var slide4 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same4").fadeIn();
});
you will understand what will this do but as i told you i am not so good in jquery so i have done this in you know in noob style. but from this you might get the idea and you can intregate this with event handler mousehover and mouseout and also use setinterval to slide automatically.
thanks.

onMouseOut Event is not working in my HTML

I have this code in my page.
<div class="MenuItemContainer">
<a href="javascript:ShowHelpMenu()">
<div class="MenuItemContent">
<div>
<img src="/Content/TopMenu/Icons/Help.png" alt="Help" />
</div>
<div>
Help
</div>
<div id="divHelpMenu" class="HelpMenuDisplayDiv" style="z-index:9999; width: 400px;margin: 10px 20px; background-color:Aqua" onmouseout="HideHelpMenu()">
<%=Session["helpUrls"]%>
<%-- <%=Session["Links"]%>
--%>
</div>
</div>
This is my Functions
function ShowHelpMenu() {
$("#divHelpMenu").css("display","block");
}
function HideHelpMenu() {
$("#divHelpMenu").css("display","none");
}
When I click on Help Link I can display all the Links but when I mouseover on the links my Div tag is closing. onmouseout event is not firing when I mouse out from the div tag.
its closing when I mouse in on HTML links.
Thanks

It looks like you have your mouse out code on the wrong element, I think you'd want it on the MenuItemContainer div. You could also remove your inline mouse out code and bind the event to the correct container when you show the help div, like this:
function ShowHelpMenu() {
$("#divHelpMenu").css("display","block");
$('#MenuItemContainer').bind('mouseout.helpmenu', HideHelpMenu);
}
function HideHelpMenu() {
$("#divHelpMenu").css("display","none");
$('#MenuItemContainer').unbind('mouseout.helpmenu');
}

You missing some closing tags. Try next HTML markup:
<div class="MenuItemContainer">
<a href="#" onclick="javascript:ShowHelpMenu();return false;">
<div class="MenuItemContent">
<div><img src="/Content/TopMenu/Icons/Help.png" alt="Help" /></div>
<div>Help</div>
</div>
</a><br/>
<div id="divHelpMenu" class="HelpMenuDisplayDiv"
style="display:none;z-index:9999; width: 400px;margin: 10px 20px; background-color:Aqua"
onmouseout="HideHelpMenu()">
Link1<br/>
Link2<br/>
Link3<br/>
Link4<br/>
Link5<br/>
Link6<br/>
</div>
</div>

I got it working,
$(document).ready(function () {
$('#divHelpMenu').hover(function () {
$("#divHelpMenu").css("display", "block");
}, function () {
$("#divHelpMenu").css("display", "none");
});
});