We Keep Coding

While focus the element, page not get scrolled in firefox and IE?

I have tried to focus the element in my page using focus method. When the element is focusing, page scrolled automatically in to the focused element. But In firefox and IE browsers page not scrolled properly. So my focused element visible in bottom of the page.
Steps:
Run the sample in chrome, element will be appear in middle of the page.
In Firefox it will appear in bottom of the page.
How to resolve it?
setTimeout(() => {
document.getElementById('parent-element').focus();
}, 10);
body {
touch-action: none;
}
#target {
height: 2000px;
background-color: aliceblue;
}
#parent-element {
max-height: 980px;
width: 400px;
left: 150px;
top: 958px;
display: inline-flex;
background-color: #fff;
box-shadow: 0 12px 40px 5px rgba(0, 0, 0, 0.26);
max-width: 100%;
min-width: 240px;
height: auto;
position: absolute;
}
.Child-element {
border-bottom: none;
padding: 18px;
border-radius: 1px 1px 0 0;
line-height: 30px;
background-color: #fff;
}
.childcontent {
display: block;
width: 83%;
color: rgba(0, 0, 0, 0.87);
}
<div id="target">
<div id="parent-element" role="dialog" tabindex="-1">
<div class="Child-element">
<div class="childcontent">Am developer</div>
</div>
</div>
</div>

I can offer an experimental alternative solution I found while trying to figure out why Firefox doesn't center on focus().
scrollIntoView() will work for you if all you want to do is scroll the div into the center of the page. Again, its experimental, but I tested it in the latest Chrome and Firefox browsers and it works there.
You can use the following:
document.getElementById('parent-element').scrollIntoView({behavior: "instant", block: "center"});
You can check browser compatibility from these two resources. MDN and Can I Use

text wont activate js and css animation

I'm not the best with javascript and I've been asked to include it in a page I'm creating. I'm nearly there, getting a box containing a video, to slide over the screen from above and create a dark overlay. I can only get it to work using an image. I want to activate it from a href text link. I've looked everywhere, but everything I see uses the same method, using an image. Can someone help please?
$(function() {
$('#activator').click(function() {
$('#overlay').fadeIn('fast', function() {
$('#box').animate({
'top': '120px'
}, 500);
});
});
$('#boxclose').click(function() {
$('#box').animate({
'top': '-500px'
}, 500, function() {
$('#overlay').fadeOut('fast');
});
});
});
a.activator {
background: url(Overlay/clickme.png) no-repeat top left;
z-index: 1;
cursor: hand;
}
.overlay {
background: transparent url(Overlay/images/overlay.png) repeat top left;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
}
.box {
position: fixed;
top: -500px;
left: 20%;
width: 610px;
background-color: #fff;
color: #7F7F7F;
padding: 20px;
border: 2px solid #F79510;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<!-- I want to add the text here, separate to the image, but to do the same activation. -->

Either you need to add the text inside the original "activator", or create another one.
Try this:
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<div id="activator2"> Some text that activates the overlay </div>
And in your JS change
$('#activator').click(...
To:
$('#activator, #activator2').click(...
Now, both activators will trigger your script that makes the overlay show.
Also, in your CSS, you have a.activator while in your HTML is id="activator", but that might be just a typo.

Overlay is clickable through an element in front of it

I am using an overlay for a login which appears in front of everything when the user hit "sign-in". The overlay consists of an opaque wrapper which contains a solid inner-div where the login form is held.
Here is the html:
<div class="login_wrapper">
<div class="login_info">
<div class="login_form">
// form
</div>
</div>
</div>
and the css:
.login_wrapper{
position:absolute;
position: fixed;
margin: auto;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
z-index:9998;
display: none;
}
.login_info{
font-family: "NimbusCondensed";
position:absolute;
margin: auto;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 350px;
height:300px;
background: #cacaca;
border: solid #000000 1px;
border-radius: 10px;
z-index:99999;
pointer-events: none;
}
.login_form{
margin-top: 40px;
margin-left: 12.5%;
padding: 10 20 0 20;
width: 220px;
border: 1px solid black;
border-radius: 7px;
background: white;
box-shadow: 0px 5px 13px black;
z-index: 100000;
}
I would like this overlay to be hidden when the user clicks anywhere outside of the login_info.
I have the following JQuery handling this:
$(document).ready(function(){
$(".login_wrapper").click(function(){
$(".login_wrapper").fadeToggle(300);
});
});
But login_wrapper is hidden if the use clicks ANYWHERE on the overlay, including the form in the middle which prevent then form entering any info.
Somehow the click events are getting "through" login_form & login_info and the browser reacts like login_wrapper is clicked.
How can I resolve this so that jQuery code applies ONLY when the overlay is clicked outside the inner divs.
Thanks!

Change your code to this:
$(document).ready(function(){
$(".login_wrapper").click(function(){
$(".login_wrapper").fadeToggle(300);
});
$(".login_info").click(function(event){
event.stopPropagation();
});
});
This will stop the click event from bubbling up to the .login_wrapper. For more information on stopPropagation() see https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation.

First, you have to transform .login_wrapper in #login_wrapper, then add this:
$('#login_wrapper').click(function(e) {
if (e.target.id === "login_wrapper")
$('#login_wrapper').fadeToggle(300);
});
This will target only the element with the id login_wrapper.
Hope this helps

animate fixed bottom bar to appear on hover

i have a bar that is fixed to the bottom of the browser. i want to make the bar displayed as 'none', so that when a user hovers over the bar it is displayed until they hover out.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
html {
background: #34495e;
}
#pagebottom {
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
}
</style>
</head>
<body>
<div id="pagebottom">
random text
</div>
</body>
</html>

try this css solution
#pagebottom {
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
opacity:0;
}
#pagebottom:hover{
opacity:1;
transition:all .5s linear;
}

You can accomplish this with CSS. No JavaScript needed.:
#pagebottom {
opacity: 0;
width: 92%;
height: 20px;
background: rgba(255, 255, 255, 0.80);
margin-left: 4%;
margin-right: 4%;
bottom: 0;
position: fixed;
color: #3498db;
text-align: center;
}
#pagebottom:hover {
opacity: 1;
}

EDIT This is a jQuery solution. There are some great CSS only solutions above.
You can't display your div as none, as it will have no width or height, and therefore be un-hoverable. However, you can use the opacity attribute, and modify the footer's CSS accordingly.
Take a look at this JSFiddle
Here are the changes I made:
I added opacity: 0; to the #pagebottom CSS so it is invisible by default.
I added the following jQuery:
$('#pagebottom').mouseenter(function(){
$('#pagebottom').css('opacity','1');
});
$('#pagebottom').mouseleave(function(){
$('#pagebottom').css('opacity','0');
});
This code waits until the mouse enters the div area, and sets the opacity to 1. When the mouse leaves, it sets the opacity to 0 again, making the element invisible.
If you want a nice tradition so the div fades in and out, you can use CSS transitions or a jQuery plugin like Transit, or even the animate feature that Felix describes in his answer.

You can use:
1) css() to set the opacity of your div:
2) hover() to keep track of when the mouse pointer enters and leaves your div
3) animate() to apply fadeIn() and fadeOut animation when changing the opacity
$('#pagebottom').css('opacity','0');
$( "#pagebottom" ).hover(
function() {
$('#pagebottom').stop().animate({opacity: 1}, 500);
}, function() {
$('#pagebottom').stop().animate({opacity: 0}, 500);
}
);
Fiddle Demo

IE requires double click with custom button

I have a script that is dived as:
HTML:
<div id="wrapper">
<div id="container">
<div id="button">Click me!</div>
<form>
<input type="file" />
</form>
</div>
<div id="notice">File is uploaded!</div>
</div>
JavaScript(JQuery 2):
$(document).ready(function () {
$("input").on("change", function () {
$("div#notice").fadeIn();
//$("form").submit(); //If you want it to submit on your site uncomment this
});
});
CSS:
div#wrapper {
background-color: #ccc;
position: absolute;
width: 300px;
height: 200px;
}
div#wrapper > form > input {
color: rgba(0, 0, 0, 0);
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
color: rgba(0, 0, 0, 0);
}
div#container {
width: 200px;
height: 20px;
overflow: hidden;
}
div#button, input {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
div#button {
z-index: 1;
background-color: #AAA;
}
input {
z-index: 2;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
alpha: filter(opacity=0);
font-size: 25px;
color: rgba(0,0,0,0);
filter: alpha(opacity=0);
zoom: 1;
}
div#notice
{
background-color: green;
display: none;
position: absolute;
bottom: 0px;
left: 0px;
}
Note: This issue was there before blur was put to hide the flashing icon in IE.
In Chrome and Firefox the button only requires a single click. In IE 10 it requires a double click, which I don't want. I am trying to think of a way to make it single click.
The only thing I've tried so far is to .render("click") on the input, but that didn't work.
JSFiddle: http://jsfiddle.net/plowdawg/mk77W/

I had the same problem and found different approach. I just made that button be as big as I need with font-size on it. Then person simply can't click on text section.
<div class="divFileUpload">
<input class="fileUpload" type="file" />
</div>
and css:
.divFileUpload {
background-color: #F60;
border-radius: 5px;
height: 50px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
width: 50%
}
.fileUpload {
cursor: pointer;
font-size: 10000px; /* This is the main part. */
height: 100%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}

To follow up on what SDLion said....
This might be what you see
But really on top of that there is a file upload control that has been made transparent.
Clicking on the browse button brings up the file upload dialog with one click.
In IE You have to double click the text box to the left of it if you want to see the file upload dialog.
Increase the font size of the file input to fill the button image

While #bastos.sergio is right about it happening in the text section there is a way to get around this if you are comfortable using JavaScript.
You will need:
A wrapper div tag
An inner dev tag
Some sort of form input
JQuery (tested on 2.1)
Steps:
Create the "wrapper" div
Create an inner "button " div
Place the form element underneath the inner "button" div
Set the "wrapper" and "inner" divs to the same size
Set overflow:hidden on the wrapper
Create a JQuery script for the "inner" div setting the on click function
In the "inner" function click function call .click() on the input
Seems to work for me in IE 10.
$(document).ready(
function()
{
$("#open_dialog").on("click",function()
{
$("input").click();
});
$("input").on("change",function()
{
alert($("input"));
$("#notice").html("uploading");
});
});
#open_dialog
{
position: relative;
width: 200px;
height: 50px;
color: white;
font-family: "Arial";
font-size: 14pt;
text-align: center;
top: 25px;
margin-top: -.5em;
z-index: 1;
}
#wrapper
{
width: 200px;
height: 50px;
overflow: hidden;
cursor: pointer;
border-radius: 10px;
background: green;
z-index: 0;
}
input
{
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="open_dialog">Click Me</div>
<input type="file" />
</div>
<div id="notice">Nothing to upload</div>

The double click is happening on the text portion of the file upload, like #TravisPessetto stated.
Since it's not possible to hide/remove the text portion out of the file input control, I recommend that you put a regular button over the file input.
See here for more details.

I found another more simple solution, just trigger the event "click" on mousedown for this element only:
$("input").mousedown(function() {
$(this).trigger('click');
})
in order to avoid problems on other browsers, apply this solution to IE only:
if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
$("#your_file_input").mousedown(function(event) {
if (event.which == 1) {
$(this).trigger('click');
}
})
}
here's your jfiddle modified, check it on IE 9-10:
http://jsfiddle.net/7Lq3k/
Edit: example modified in order to limit the event handling for left click only
(see: How to distinguish between left and right mouse click with jQuery for details)

I mixed various solutions to get this one that works for me (on every browser). It's written using LESS nesting.
HTML
<!--/* Upload input */-->
<div class="input-file">
Select image
<input type="file" />
</div>
LESS CSS
/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
position: relative;
overflow: hidden;
margin: 10px;
input[type="file"] {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
cursor: pointer;
width: 100%;
height: 100%;
font-size: 10000px;
}
// For Chrome
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
}