event.stopPropagation() Does not work as it should be in the Firefox browser, but in Google Chrome or Internet Explorer or opera it is works well, the problem in Firefox browser when Clicking on btn_1 should show message btn_1 not show div1 .Is there another function or a solution to this problem? Gratefully
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Hello!</title>
<style type="text/css">
<!-- body {
text-align: center;
}
#main {
position: absolute;
height: 400px;
width: 600px;
border: 1px solid black;
left: 400px;
}
#btn1 {
position: absolute;
height: 30px;
width: 200px;
border: 1px solid black;
left: 500px;
top: 420px;
}
#btn2 {
position: absolute;
height: 30px;
width: 200px;
border: 1px solid black;
left: 800px;
top: 420px;
}
#div1 {
height: 100px;
width: 100%;
background-color: #FF3399;
}
#div2 {
height: 100px;
width: 100%;
background-color: #99FF00;
position:relative;
}
#div3 {
height: 100px;
width: 100%;
background-color: #00CC99;
}
-->
</style>
<script>
function addElement2() {
var element = document.getElementById("main");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
var newContent = 0;
for (var i = 0; i <= 2; i++) {
newContent = newContent + 1;
var divname = "div" + newContent;
var divname2 = "div" + newContent;
var Content_text = "newContent" + newContent;
divname = document.createElement("div");
document.getElementById("main").appendChild(divname);
Content_text = document.createTextNode(divname2);
divname.id = divname2.toString().trim();
divname.appendChild(Content_text);
var btn = document.createElement("BUTTON")
document.getElementById(divname2.toString().trim()).appendChild(btn);
var btn_id= "btn_" + newContent;
btn.id =btn_id;
var Content_text2 = document.createTextNode("btn_" + newContent);
btn.appendChild(Content_text2);
btn.onclick = function(){delete_cooke1(this) ;} ;
divname.onclick = function(){go_to(this) ;} ;
}
}
function delete_cooke1(mmm){
event.stopPropagation();
var str = mmm.id.toString() ;
alert(str);
return;
}
function go_to(mmm){
var str = mmm.id.toString() ;
alert(str);
return;
}
</script>
</head>
<body>
<div id="main"></div>
<button id="btn1" onclick="addElement2()">1-Create 3 divs</button>
</body>
</html>
You will need to explicitly pass the event object into your callback function. For example:
document.querySelector("body").onclick = function(e){
console.log(e); // the current event
};
You are taking advantage of the fact that Chrome exposes the current event as a global on the window (i.e. window.event or just event). Firefox does not do this -- and other browsers are affected as well.
Calling event.preventDefault() worked in my case.
I have a react app and I was calling event.stopPropagation() inside the onclick handler of a material-ui checkbox like so:
<StyledCheckBox
icon={<CircleUnchecked />}
checkedIcon={<CircleChecked />}
checked={shipmentEditIds.includes(id)}
onClick={event => {
event.stopPropagation();
setShipmentEditIds({ id });
}}
/>
For some reason, only in firefox browser, this wasn't stopping the event from propagating.
Once I added event.preventDefault() to the onClick handler it fixed the problem.
I know this doesn't provide an answer as to why stopPropagation() isn't working in Firebox browser but just sharing what worked for me.
Pass event from onclick:
btn.onclick = function(){delete_cooke1(this, event) ;} ;
And use event argument with stopPropagation()
function delete_cooke1(mmm, e){
e.stopPropagation();
e.preventDefault(); // Add this line also
var str = mmm.id.toString() ;
alert(str);
return;
}
Related
I'm trying to do a basic toggle clicking with js... I have this
<div id="box"></div>
<button id="btn"></button>
#box {
background: black;
width: 50px;
height: 50px;
position: absolute;
left: 50px;
}
js:
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.addEventListener('click', function(){
if (box.style.left === '50px') {
box.style.left = '200px';
}
if (box.style.left === '200px') {
box.style.left = '50px';
}
});
I looked it up and this seems to be the method everyone uses for toggle clicking with pure js so I have no idea why it's not working for me, any ideas?
You should use the window.getComputedStyle instead (This way you will get the actual value of the style that applied to that element, and not just what's on the style attribute)..
You are missing an else there (otherwise you will always get the two if and nothing will change)
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.addEventListener('click', function(){
if (window.getComputedStyle(box).left === '50px') {
box.style.left = '200px';
} else if (window.getComputedStyle(box).left === '200px') {
box.style.left = '50px';
}
});
#box {
background: black;
width: 50px;
height: 50px;
position: absolute;
left: 50px;
}
<div id="box"></div>
<button id="btn"></button>
#Dekel's answer already explains what was wrong with your code. However, you should work with classes instead. Not only is this way faster than retrieving window.getComputedStyle, it's also much easier
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
var box = document.getElementById('box');
box.classList.toggle('left-50');
box.classList.toggle('left-200');
});
.left-50 {
left: 50px;
}
.left-200 {
left: 200px;
}
#box {
background: black;
width: 50px;
height: 50px;
position: absolute;
}
<div id="box" class="left-50"></div>
<button id="btn">bt</button>
Better use offset. Beside you are making a kind of toggle operation in here. Meanwhile, I modified your script to make it work:
<div id="box"></div>
<input type="button" id="btn" value=" Try it ">
<style>
#box {
background: black;
width: 50px;
height: 50px;
position: absolute;
left: 50px;
}
</style>
<script>
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.addEventListener('click', function(){
if (box.offsetLeft == 50 ) {
box.style.left = 200 ;
}
else if (box.offsetLeft == 200 ) {
box.style.left = 50;
}
});
</script>
I am working on a video player that launches a video into an iframe within a div overlay. I want to avoid repetetive code such as onclick=() in every link, and want to avoid external libraries such as jQuery, because jQuery produces an unpleasant flickering screen when my video window is launched.
My problem is that with my work so far, only the first link opens the video overlay. I (somewhat) understand that the [0] indicates the first element in an array. Can an array contain an infinite numerical range, or is there a better way to accomplish my goal here? There will potentially be thousands of videos in these galleries, so listing them one at a time in my script is not practical.
I am still struggling to learn, so a working example would be greatly appreciated. Thanks
My work so far
https://jsfiddle.net/4oomb9rt/
example code
<!doctype html>
<html>
<head>
<title>Video Overlay</title>
<style>
body {
margin: 0;
font-family: arial;
}
#vidPlayer {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000;
overflow: hidden;
transition: 0.5s;
display: none;
color: white;
}
.closebtn {
position: absolute;
top: 7px;
right: 7px;
font-size: 50px;
}
.openbtn {
font-size: 30px;
}
.openbtn, .closebtn {
max-height: 48px;
max-width: 48px;
min-height: 48px;
min-width: 48px;
border-radius: 7px;
line-height: 12px;
}
.vidContent {
width: 100%;
text-align: center;
font-size: 32px;
}
</style>
</head>
<body>
<div id="vidPlayer">
<button class="closebtn">×</button>
<div class="vidContent">vidplayer content</div>
</div>
<button class="openbtn">☰</button>
<button class="openbtn">☰</button>
<button class="openbtn">☰</button>
<script>
function openNav() {
document.getElementById("vidPlayer").style.display = "block";
}
function closeNav() {
document.getElementById("vidPlayer").style.display = "none";
}
var opener = document.getElementsByClassName('openbtn')[0];
opener.addEventListener("click", function(e) {
openNav();
}, false);
var closer = document.getElementsByClassName('closebtn')[0];
closer.addEventListener("click", function(e) {
closeNav();
}, false);
</script>
</body>
</html>
You can iterate over element using ClassName and assign event listener.
for(var i=0;i<document.getElementsByClassName("openbtn").length;i++){
document.getElementsByClassName("openbtn")[i].addEventListener("click", function(e) {
openNav();
}, false);
}
Demo : https://jsfiddle.net/tj23hy3h/
You are on the right track. You want to make a few minor changes to your javascript.
var openers = document.getElementsByClassName('openbtn');
for(var i=0; i<openers.length; i++) {
openers[i].addEventListener("click", function(e) {
openNav();
}, false);
}
var closers = document.getElementsByClassName('closebtn');
for(var i=0; i<closers.length; i++) {
closers[i].addEventListener("click", function(e) {
closeNav();
}, false);
}
by iterating through all of your openers or closers you can add the listener to each one.
What you're problem is that you'll have to add you event listener to all of the elements of that type so something like this would work:
var opener = document.querySelectorAll('.openbtn');
Array.from(opener).foreach(function(opener_single){
opener_single.addEventListener("click", openNav, false);
});
and then the same theory for the closer elements.
what I'm doing here is I'm getting all elements with the class name of openbutton then looping through them in the loop i am then applying the click event listener in which runs the openNav function.
I am trying to achive a fixed position after a certain point of the page is passed using CSS JS and HTML.
Also I don't know the bet aproach in loading the function into the html doc, I was thinking on using the onload...
Here is what I have done until now:
<!DOCTYPE html>
<html>
<head>
<script>
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script language="JavaScript">
<style>
#main {
position: relative;
width: 620px;
margin: 0 auto;
height: 1800px;
}
#left1{
position: absolute;
font-family: sans-serif;
left: 0px;
top: 10px;
height: 200px;
width: 300px;
background-color: #F6D565;
}
#right1{
position:absolute;
font-family: sans-serif;
top: 10px;
right: 0px;
height: 300px;
width: 300px;
background-color: #DFFCC2;
}
#right2{
position:absolute;
top: 320px;
right: 0px;
font-family: sans-serif;
height:300px;
width: 300px;
background-color: #DFFCC2;
}
#right3{
position:absolute;
top: 630px;
right: 0px;
font-family: sans-serif;
height: 300px;
width: 300px;
background-color: #DFFCC2;
}
</style>
</head>
<body >
<div id="main">
<div id="left1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="right1">bbb</div>
<div id="right2">cccccccccccccccccccccc</div>
<div id="right3">ddd</div>
</div>
</body>
</html>
DEMO
The DOM is not available when you are trying to access div with id left1.
So your first line var left1 = document.getElementById("left1"); will give error.
Instead Wrap your current code within window.onload
<script>
window.onload = function() {
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
console.log("calling scroll")
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
}
</script>
Else place your javascript just above the </body> tag
Yes, you can use onload to call a function after the page is loaded like so:
<script type="text/javascript">
function onLoad(){
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
}
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script>
and replace
<body>
with:
<body onload="onload()">
Note that you can still leave the script in the header of your page (between <head> and </head>).
You can use window.addEventListener() if you don't like <body onload="onload">, but IE won't support this. See "Hook a javascript event to page load" for details.
You have to load your script after the DOM is created. The time you are trying to parse var left1 =document.getElementById("left1"); DOM hasn't created yet so var left1 is null
TRY:
<!DOCTYPE html>
<html>
<head>
<style>
//YOUR CSS
</style>
</head>
<body >
<div id="main">
<div id="left1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="right1">bbb</div>
<div id="right2">cccccccccccccccccccccc</div>
<div id="right3">ddd</div>
</div>
<script>
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script language="JavaScript">
</body>
</html>
EDIT:
By changing position you have to rearrange your item.
Try:
function onScroll(e) {
if (window.scrollY >= origOffsetY) {
left1.style.position = "fixed";
left1.style.left = "66px"
} else {
left1.style.position = "absolute";
left1.style.left = "0px";
}
}
DEMO
I am trying to create a pop-up message that disables the rest of the screen until you confirm it, only by using CSS and JavaScript (and without the alert function).
Although http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx declares that setAttribute is supported in IE8 and higher, it does not seem to work correctly - well, actually it doesn't seem to work at all.
Here is my code:
<html>
<style type="text/css">
.overlay
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
}
.overlaytext
{
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
width: 300px;
height: 100px;
padding-top: 5px;
background-color: #777777;
color: #000000;
font-size: 20px;
text-align: center;
}
.overlaybutton
{
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: 20px;
width: 60px;
height: 25px;
border: solid;
border-color: #000000;
border-width: 1px;
background-color: #999999;
color: #000000;
font-size: 20px;
}
</style>
<script type="text/javascript">
function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.setAttribute('id','overlay');
overlay.setAttribute('class','overlay');
document.body.appendChild(overlay);
var overlaytext = document.createElement('div');
overlaytext.setAttribute('id','overlaytext');
overlaytext.setAttribute('class','overlaytext');
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);
var overlaybutton = document.createElement('input');
overlaybutton.setAttribute('type','button');
overlaybutton.setAttribute('id','overlaybutton');
overlaybutton.setAttribute('class','overlaybutton');
overlaybutton.setAttribute('value','OK');
overlaybutton.setAttribute('onclick','deleteoverlay()');
document.body.appendChild(overlaybutton);
}
function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}
</script>
<body>
<input type="button" value="Show message" onclick="showoverlay('Message text')"/>
</body>
</html>
It works just fine in Firefox and Chrome, but IE (testing with IE9) seems to ignore the setAttribute method, because it only puts in the text and the button, but without the formatting (i.e. class was not applied) and also clicking the newly created button does not remove the objects (i.e. either id was not applied, or there is some additional incompatibility with portions of the code that remove the objects).
I tried to replace setAttribute like this:
<script type="text/javascript">
function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.id = 'overlay';
overlay.class = 'overlay';
document.body.appendChild(overlay);
var overlaytext = document.createElement('div');
overlaytext.id = 'overlaytext';
overlaytext.class = 'overlaytext';
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);
var overlaybutton = document.createElement('input');
overlaybutton.type = 'button';
overlaybutton.id = 'overlaybutton';
overlaybutton.class = 'overlaybutton';
overlaybutton.value = 'OK';
overlaybutton.onclick = 'deleteoverlay()';
document.body.appendChild(overlaybutton);
}
function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}
</script>
But this time it does not even add the text and the button.
So, how to make this script IE compatible, both showing all the elements and then removing them?
Thanks
Use this as your doctype
<!DOCTYPE html>
and then put this in the head of the document
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and then enjoy using setAttribute and a number of other features which this will allow to properly work on IE8+ environments.
The correct way to set a class in your second example is:
overlaybutton.className = 'overlaybutton';
That will get classes working in IE. As far as deleting elements goes, I'd recommend reformatting your event handling attachment like so:
overlaybutton.onclick = deleteoverlay;
I have run into this issue as well. If you are able to include jQuery on the site, you can use $('#overlay').attr('class', 'overlay');. jQuery is extremely useful for making cross-browser compatible code.
i'm having the following piece of code:
<head>
<style>
#mainDiv {
background-color: grey;
position: absolute;
}
#one {
height: 150px;
width: 70px;
bottom: 300px;
right: 500px;
background-color: green;
position: absolute;
}
#two {
height: 200px;
width: 200px;
margin-top: 50px;
margin-bottom: 20px;
margin-left: 90px;
margin-right: 5px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div id="mainDiv">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
i want to resize #mainDiv so it will include its children and will consider all positioning and margin attributes (basically #mainDiv's grey area will surround children and visually show the positioning and margins spaces).
i know it can't be done dynamically using CSS. how can i implement such using pure JavaScript without the use of JQuery?
note: there's no restriction on children's position attribute it can be any of them but "fixed".
code need to support all major browsers + IE8 + mobile (android 2.3 + 4, iphone).
thanks!
Use position relative for second div so the mainDiv greay area will surround your children element
#mainDiv {
background-color: grey;
position: absolute;
}
#one {
height: 150px;
width: 100px;
bottom: 300px;
right: 500px;
background-color: yellow;
}
#two {
height: 200px;
width: 200px;
margin-top: 50px;
margin-bottom: 20px;
margin-left: 90px;
margin-right: 5px;
background-color: blue;
position: relative;
}
I did something maybe complicated that you can find here: http://jsfiddle.net/YMmHz/1/
Basically I get all possible values:
var widthOne, widthTwo, heightOne, heightTwo;
var leftOne, leftTwo, rightOne, rightTwo, topOne, topTwo, botOne, botTwo;
var marginLeftOne, marginLeftTwo, marginRightOne, marginRightTwo, marginTopOne, marginTopTwo, marginBotOne, marginBotTwo;
var paddingLeftOne, paddingLeftTwo, paddingRightOne, paddingRightTwo, paddingTopOne, paddingTopTwo, paddingBotOne, paddingBotTwo;
var maxWidthOne, maxWidthTwo, maxHeightOne, maxHeightTwo;
With different tests:
widthOne = $('#one').width();
widthTwo = $('#two').width();
(parseInt($('#one').css('left')))? leftOne = parseInt($('#one').css('left')):leftOne = 0;
(parseInt($('#two').css('left')))? leftTwo = parseInt($('#two').css('left')):leftTwo = 0;
And then define the size of the #mainDiv like this:
(maxWidthOne>=maxWidthTwo)? $('#main_div').width(maxWidthOne):$('#main_div').width(maxWidthTwo);
(maxHeightOne>=maxHeightTwo)? $('#main_div').height(maxHeightOne):$('#main_div').height(maxHeightTwo);
In your case it's not possible because of some logical reasons.
How is it possible to find a right position for id one when the
parent has no size and therefor no usable right position.
If you are using left instead of right for id one the situation
becomes better.
all the best
try this one
<script>
window.onload = function() {
var elems, max_top, max_right;
elems = mainDiv.getElementsByTagName( 'div' );
for( i = 0; i < elems.length; i++ ) {
elem = elems[ i ].offsetLeft + elems[ i ].offsetWidth + elems[ i ].style.marginLeft;
max_right = ( max_right > elem ) ? max_right : elem;
elem = elems[ i ].offsetTop + elems[ i ].offsetHeight + elems[ i ].style.marginBottom;
max_top = ( max_top > elem ) ? max_top : elem;
}
console.log( 't: ' + max_top + ', r: ' + max_right );
mainDiv.style.height = max_top;
mainDiv.style.width = max_right;
}
</script>
The code is having some problem with getting the margins.
I found a good page which solves the problem.
http://www.quirksmode.org/dom/getstyles.html