We Keep Coding

Stop 'JavaScript function triggering css width' from affecting scrolling-screen position (On Mobile device)

This might be a simple issue to fix but I struggled:
On this website index page, if you scroll a bit down to interactive map.
This problem also arises on web browser on laptop as well.(just discovered!
ps. This was an embedded map as iframe html!
See source html:
<iframe id="iframe" width="100%" height="620px" src="leaflet_v1/index.html"></iframe>
Basically after you click a lot (area), the info section will show up. (this is made from leaflet web map from QGIS)--> I changed JS code here to make slider info appear:
function popup(){
document.getElementById('slider').style.width='75%';
document.getElementById('slider').style.zIndex='1000';
//..then insert data
//.. put a inline html for js Close function
}
layer.bindPopup(popup, {maxHeight: 400});
At the end of the leaflet index page, I got a section closer JS function:
<script>
function CloseSlider(){
document.getElementById('slider').style.width='1px';
}
</script>
BUT weird thing is that when you close the section using that button on "MOBILE DEVICES", the screen will JUMP UP and make the map stick at the top of the screen.
I wish I can cancel this effect.
:) Can anyone solve it ? :)
If you need to see the css setting for that slider , here you go:
<style>
.slider{
height: 100%;
width:2px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:rgb(39,57,66);
opacity: 0.90;
padding-left: 20px;
padding-top: 20px;
overflow-x: hidden;
transition: 0.3s;
}
.slider a{
padding: 5px 20px 5px 0px;
text-decoration: none;
font-size: 15px;
color: pink;
display: block;
transition: 0.3s;
}
.slider a:hover{
background-color:rgb(39,57,66);
color: white;
}
.slider .btn-close{
position: absolute;
top:0;
right: 10px;
font-size: 35px;
margin-left: 30px;
}
</style>
Hope this is not too complex :)

Surprisingly, the Solution is so silly:
Get rid of the:
href="#"
from <a> element...

IE issue: wrong tab focus

I have a link at the very top of the page called "Skip Navigation", that appears on the screen every time user presses Tab, and if he presses Enter while "Skip Navigation" is in focus, it takes him to the #main part of the page, so that he skips top navigation and goes directly into the main area. It all works perfect in Chrome, Firefox, Safari. The issue appears in IE (I tested both ie9 and ie11).
Scenario in IE:
Presses Tab - "Skip Navigation" appears on the page - presses Enter -
refreshes the page with #main added into the url - presses Tab - "Skip
Navigation" appears on the page
Does anyone know any solution for IE to force skipping navigation and going to the main part of the page? Any help will be highly appreciated.
#skip a {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
#skip a:focus {
left: auto;
font-size: 20px;
position: static;
width: auto;
height: auto;
}
nav {
background: #847577;
color: white;
padding: 1em;
text-align: center;
}
nav a {
color: white;
}
#main {
background: #E5E6E4;
padding: 1em;
}
#main a {
color: black;
}
<div id="skip">Skip navigation</div>
<nav>
Home
About Us
</nav>
<div id="main">
Main Content On The Page Link
</div>
jsfiddle: https://jsfiddle.net/13p0eo43/

I think you have two options if it doesn't work with the standard way as you describe:
Focus the first focusable element following #main using JavaScript .focus() method. Your difficulty here will be determining which element must be focused, as it might not always be so simple.
Set tabindex=-1 on #main and focus #main using JavaScript .focus() method upon clicking on the link. The next time the user press tab, the next focusable element will take focus, and #main can't be focused again when pressing shift+tab (because of the value -1).

Add tabindex="-1" to the div, no need for javascript.
The following is working for me in IE11.
#skip a {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
#skip a:focus {
left: auto;
font-size: 20px;
position: static;
width: auto;
height: auto;
}
nav {
background: #847577;
color: white;
padding: 1em;
text-align: center;
}
nav a {
color: white;
}
#main {
background: #E5E6E4;
padding: 1em;
}
#main a {
color: black;
}
<div id="skip">Skip navigation</div>
<nav>
Home
About Us
</nav>
<div id="main" tabindex="-1">
Main Content On The Page Link
</div>

set class in css or hover over 2 overlapping divs

Is it possible to give the hover-icon a class, so that the icon is the triggerinfo? The image is in gray when i hover it, it gets colored but I wan't to hover a text when is colored, when I going over the little icon. Is there a way overlapping the div with the triggerinfo class over the image, but not leaving the hover of the image. Like hover the div that is not visible and not leaving the hover effect colored ?
Thanks !
If it helps I can share the link to my website, but only as message not for the public post. It gets more visual, and I think better to understand what I mean.
jQuery(document).ready(function() {
jQuery(".triggerinfo").mouseleave(function() {
jQuery(this).next(".info").hide();
});
jQuery(".triggerinfo").hover(function() {
jQuery(this).next(".info").toggle("fade");
});
});
.info {
display: none;
padding: 10px;
background: #fff;
position: absolute;
box-sizing: border-box;
z-index: 1;
}
.triggerinfo {
display: inline-felx;
opacity: 0.1;
position: absolute;
margin-top: -50px;
margin-left: 30px;
z-index: 3;
}
.uk-overlay-icon:before {
content: "\f0c9";
position: absolute;
top: 90%;
left: 10%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
line-height: 1;
font-family: FontAwesome;
text-align: center;
color: #f69c00;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-uk-filter="dsgf" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;">
<div class="uk-panel">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover ">
<img src="/wp-content/uploads/bilder/projekte/dsf.jpg" class="uk-overlay-grayscale" alt="dfsg">
<div class="uk-overlay-panel uk-overlay-icon uk-overlay-fade"></div>
<a class="uk-position-cover" href="/wp-content/plugins/widgetkit/cache/nuding-35281426b204ba8667e05928e60e8a11.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'.wk-1b2a'}" title="dsfg"></a>
</figure>
</div>
<div>
<div class="triggerinfo">
sdf
</div>
<div class="info">
<h5>dsfg</h5>
</div>
</div>
</div>
</div>

The Fiddlejsfiddle.net/e8qd8gvf/3/ works now as it should on my site. Now the thing is: on hover the img get colored and it appears a little icon in the bottom left coner, the trigger that is now under the img should be this little icon, because the icon is from the css definition in uk-overlay-icon (from the font awesome)
I dont now how to set the info class on this icon.
Or I was trying put an div with the info class over the img at the position of the icon and than trigger it, but than the colored effekt dont show when I trigger it, so I thought there must be a way to trigger the div on hover and not lose the colored effect, so the trigger div would trigger the Info and musst trigger the hover from the img at the same time
PS: Sorry for the long css !

The <figure> element is intended to mark up diagrams, illustrations, photos, code examples and similar content, "that can be moved away from the main flow of the document without affecting the document’s meaning" (http://w3c.github.io/html-reference/figure.html).
Your way of using it seems to be against this specification.
It's your own responsibility to code according to specification and best practices.
I just opted with your provided example: https://jsfiddle.net/e8qd8gvf/4/
I moved the uk-overlay-icon outside of the figure, added the toggle-info class and put the info box inside it.
All that was left was adding some CSS:
.uk-position-cover { cursor: default; }
.uk-panel-teaser { position: relative; }
.toggle-info {
display: none;
cursor: pointer;
position: absolute; bottom: 20px; left: 20px;
width: 30px; height: 30px;
}
.toggle-info > .info {
width: 150px; height: 150px;
border: 2px solid red;
position: absolute; bottom: -20px; left: 10px;
transform: translateY(100%);
}
.toggle-info, .info { display: inline-block !important; }
.toggle-info.hidden, .info.hidden { display: none !important; }
as well as changing your JS to:
jQuery(document).ready(function() {
jQuery(".uk-overlay").hover(
function() {
jQuery(this).next(".toggle-info").removeClass("hidden");
},
function() {
jQuery(this).next(".toggle-info").addClass("hidden");
}
);
jQuery(".toggle-info").hover(
function() {
jQuery(this)
.removeClass("hidden")
.children(".info").removeClass("hidden");
},
function() {
jQuery(this)
.addClass("hidden")
.children(".info").addClass("hidden");
}
);
});
 
My solution is only showing you a way to accomplish things and is by far not "nice". You need to adapt it yourself and to specifications.

Why isn't the hover working on child but parent?

I want some action to be performed when the child element .menuitems is hovered. Currently I've replaced the action with an alert to make it simple.
Now the problem is that when I use selector ("#result_row .menuitems"), nothing works. But if I use ("#result_row"), it works fine i.e., alert works.
Why is it so? It should work in both cases? I want the hover to work on child as well as grandchilds (.menu1).
Here's my code:
HTML
<div id="result_row"><div class="menuitems">
<div class="menu1">sfsdsf<span id="srno">4</span></div>
<div class="menu2">sfsdfs#saf</div>
<div class="menu3">sdfsdf<span id="cross">X</span></div>
<div class="clear"></div>
</div>
</div>
CSS
.menuitems{
margin-bottom: 5px;
background: #007fad;
}
.resultmenu > .menuitems{
background: #004068;
}
.menuitems div{
background: #00aeef;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
position: relative;
}
.menu1{
float: left;
width: 25%;
margin-right: 2px;
}
.menu2{
float: left;
width: 40.4%;
}
.menu3{
float: right;
width: 34%;
}
.clear{
clear: both;
padding: 0 !important;
}
JavaScript
$(document).ready(function(){
$("#result_row .menuitems").hover(function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
NOTE: This code won't render fine as it is missing many other styles, parent elements etc. So I've put a screenshot to describe the problem.
Red rectangle is .result_row. Green is child, .menuitems.
EDIT:
If you want to know something else, here it is: when I use .menuitems:hover in CSS (not jQuery), the hover works.
EDIT2:
One more thing that can be important to you while answering is: The window "EMAIL" you're seing in this image is no loaded when open the main page(site). It is loaded only when I click a button on the page, and the content you're seeing in 2nd and 3rd row are loaded ALONG WITH IT, i.e., they're not static!

I entered everything you had into jsfiddle and it worked (hit F12 to see console.log)
https://jsfiddle.net/bLjmocza/
I also replaced
$("#result_row .menuitems").hover(function(){
with
$(".menuitems").hover(function(){
as that seemed to be more what you were trying to achieve in the first place

use this code:
$(document).ready(function(){
$("#result_row .menuitems").mouseover(function(){
alert("Hello");
});
});

Your problem is float in your CSS. See: http://wtfhtmlcss.com/#floats-computed-height.
The quick and diry fix ist to float the parent. But you are better off applying a clearfix to the parent. The added bonus is you can then get rid of your clear div.
Below is clearfix option:
$(document).ready(function(){
$("#result_row .menuitems").hover(function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
.menuitems{
margin-bottom: 5px;
background: #007fad;
}
.resultmenu > .menuitems{
background: #004068;
}
.menuitems div{
background: #00aeef;
color: white;
font-family: sans-serif;
text-align: center;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
position: relative;
}
.menu1{
float: left;
width: 25%;
margin-right: 2px;
}
.menu2{
float: left;
width: 40.4%;
}
.menu3{
float: right;
width: 34%;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result_row"><div class="menuitems clearfix">
<div class="menu1">sfsdsf<span id="srno">4</span></div>
<div class="menu2">sfsdfs#saf</div>
<div class="menu3">sdfsdf<span id="cross">X</span></div>
</div>
</div>

Updated: This won't work in jQuery 1.9 onwards!
http://api.jquery.com/on/#additional-notes. Use mouseenter/mouseleave instead
A second anser as this one addresses binding handlers to dynamic elements
As you are dynamically adding elements to the page you want to use jquery's on method
Change gour jquery to
$(document).ready(function(){
$("#result_row").on(".menuitems", "hover", function(){
//var tarparent=$(event.target).parent().find("#cross");
//$(tarparent).toggle();
alert("Hello");
});
});
The main difference is this will attatch the hover event handler any child of resultrow with a class of menuitems that exist now or that are added later.

Disable Anchor Within Hover Div on Mobile Until Open

I've searched high and low but can't find a solution to this exact problem.
On a desktop browser, when the user hovers over an image, a div appears and they can click the link within the div if they want. However, on a mobile device, the hover is triggered by a click. If the user clicks in just the right spot, even though the div isn't visible yet, they can accidentally click the anchor and navigate away from the page. (In other words, the div goes from display:none to display:block at the same time that the link is clicked.)
I want to prevent that accidental click from happening on mobile browsers, however I still want the link to be usable once the div is visible.
My code:
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | Email John
</div>
</div>
Any ideas? HTML, CSS, JS and jQuery solutions are all welcome! (Maybe something more clever than what I can think of using pointer-events:none along with some jQuery?)

I'm actually about to encounter the same problem in a project, and jotted down a potential solution. Haven't tested it yet but it might help you out. The link should only trigger if the element has a display that's not 'none':
var popup = $('.popup'),
display = popup.css('display');
if (!(display === 'none')) {
popup.on('click', function(e) {
e.preventDefault();
});
}

I found a solution but it's not elegant. I wanted to post it in case someone has this problem in the future and just needs something that will work!
I added a fake link in a span with the real link then set new display styles for it and the real link based on the parent span is being hovered over.
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.staffpic a {
display: none; /* Added */
}
.staffpic.link:hover a {
display: inline; /* Added */
}
.staffpic.link:hover .fakelink {
display: none; /* Added */
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | <span class="link">Email John<span class="fakelink">Email John</span></span>
</div>
</div>
I'd still love a cleaner solution without all this added html if someone has it.