Is it possible to click all div boxes on a website using javascript?
here's the css of the div box:
.bird {
float: left;
position: absolute;
margin-top: 0;
margin-left: 0;
margin-right: 0;
top: auto;
left: auto;
right: auto;
bottom: auto;
z-index: 200;
text-align: center;
display: block;
}
and this is the javascript i want to use:
var myLinks = document.getElementsByClass("bird");
for (var i = 0; i < myLinks.length; i++) {
myLinks[i].click();
}
There is no getElementsByClass. There's a getElementsByClassName but it's not supported in IE8 and earlier.
You can use document.querySelectorAll(".bird") (which is supported by all modern browsers including IE8 and above) to get your list on IE8 and above and any other modern browser:
var myLinks = document.querySelectorAll(".bird");
Then your code for looping through the resulting NodeList is fine. Note that calling click on the element may not completely simulate a click (not least because there's no mouse position information given). To go further in your event simulation, you can use createEvent (for most browsers).
Why don't you try it with jquery? Like this:
$('.bird').each(function(){
$(this).click();
});
Related
I've got a simple text button with an image of an arrow next to it. I'm wanting the arrow image to move when someone hovers over the button.
I currently have this working in one instance with JS 'document.getElementById...', but I have several buttons across my site that I'd like to have the same behavior. My first thought would be to use a class instead of an id, and use the same functions.
For whatever reason, document.getElementsByClassName doesn't work - even in one instance.
Here's a simpler version to demonstrate - View on Codepen: https://codepen.io/sdorr/pen/JxYNpg
HTML
<HTML>
hover over me
<div id="block"></div>
hover over me
<div class="block"></div>
CSS
* {
margin: 0;
padding: 0;
}
.button {
color: #000000;
text-decoration: none;
background-color: cyan;
margin: 0;
display: block;
width: 300px;
padding: 20px;
text-align: center;
}
#block {
width: 30px;
height: 30px;
background-color: red;
}
.block {
width: 30px;
height: 30px;
background-color: green;
}
JS
function move() {
document.getElementById("block").style.marginLeft = "35px";
}
function moveBack() {
document.getElementById("block").style.marginLeft = "0px";
}
function moveAlt() {
document.getElementsByClassName("block").style.marginLeft =
"35px";
}
function moveBackAlt() {
document.getElementsByClassName("block").style.marginLeft =
"0px";
}
First off, why isn't the behavior with a class working but an id works fine?
Secondly, would a class solve this issue and be scalable across all buttons with the same two functions (onmouseover / onmouseout)?
If not, any ideas on a solution? I currently have a solution I found using jQuery that does work, but when hovering over one button, all arrow images move across the site. I don't necessarily mind this behavior because only one button is really in view at a time - but I'm trying to learn JS and solve problems with my own solutions!
I greatly appreciate your desire to learn on your own and not rely on premade solutions. Keep that spirit and you will go places!
When it comes to getElementsById, we know this should work for one element, since the function returns a single Element.
However, what does getElementsByClassName return?
(see: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName)
It returns an HTMLCollection which you can iterate over to change an single element's style.
So, to get this to work with JavaScript you need to write a function that will be able to identify the particular div.block you want to move. But, this puts you back to where you started, needing some particular identifier, like an id or a dataset value to pass to the function.
Alternately, based on the HTML structure you provide, you could look for nextElementSibling on the a that get's clicked. But I would set up an eventListener rather than adding a JS function as a value to the onmouseenter property.
const btns = document.getElementsByTagName('a');
/*** UPDATE forEach is a NodeList method, and will fail on HTMLCollection ***/
/* this fails -> Sorry! ~~btns.forEach(button=>{~~
/* the following will work
/**********/
for (let i = 0; i < btns.length; i++){
btns[i].addEventListener('mouseenter', function(e) {
//we pass e to the function to get the event and to be able to access this
const block = this.nextElementSibling;
block.style.marginLeft = "35px";
})
btns[i].addEventListener('mouseleave', function(e) {
const block = this.nextElementSibling;
block.style.marginLeft = "0";
})
}
But with siblings, there is a CSS-only solution.
We can use the Adjacent Sibling Selector combined with the :hover state selector and no JavaScript is needed, if we are just moving back and forth.
.button:hover+.block {
margin-left: 35px;
}
See the Snipped Below
* {
margin: 0;
padding: 0;
}
.button {
color: #000000;
text-decoration: none;
background-color: cyan;
margin: 0;
display: block;
width: 300px;
padding: 20px;
text-align: center;
}
.block {
width: 30px;
height: 30px;
background-color: green;
}
.button:hover+.block {
margin-left: 35px;
}
hover over me
<div class="block"></div>
hover over me
<div class="block"></div>
As Vecta mentioned, getElementsByClassName returns an array-like. You'll need to do something like this to get the first element:
function moveAlt() {
document.getElementsByClassName("block")[0].style.marginLeft = "35px";
}
function moveBackAlt() {
document.getElementsByClassName("block")[0].style.marginLeft = "0px";
}
However a better solution might be to use document.querySelector, which operates similarly to jQuery's $() syntax:
function moveAlt() {
document.querySelector(".block").style.marginLeft = "35px";
}
function moveBackAlt() {
document.querySelector(".block").style.marginLeft = "0px";
}
I am trying to get a cell, within div table created in jquery, to change color when I hover over it and remain that color when the mouse leaves the cell.
I have tried adding a .hover command but when I add it the entire grid goes away.
Here is my code at JSfiddle: https://jsfiddle.net/davidtaylorjr/eemLsjg7/8/
$(document).ready(function() {
$(function() {
for (var x = 0; x < 16; x++) {
for (var y = 0; y < 16; y++) {
$("<div>").addClass("unit").appendTo('#container');
}
}
});
$(".unit").hover() {
$(this).css("background-color", "black");
});
});
#container {
background-color: lightblue;
height: 192px;
width: 192px;
}
.unit {
background-color: white;
height: 10px;
width: 10px;
margin: 1px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
Your logic is correct aside from two syntax issues. Firstly, you need to provide a function to hover() to be executed when the mousenter and mouseleave events fire. Secondly, you have nested document.ready handlers which you should unwrap. With those fixed it works fine.
Note however that you can make a couple of tweaks to improve the logic. Firstly the nested loops are redundant as you append the same HTML in all iterations. You can make this a single loop. Secondly it's better practice to keep all styling in CSS, so you can simply use addClass() to change the background colour. Lastly, the hover() creates two events, of which the mouseleave isn't needed for your code, so you can use just mouseenter to make it more efficient.
With all that said, try this:
$(document).ready(function() {
var html = ''
for (var x = 0; x < 16 * 16; x++) {
html += '<div class="unit"></div>';
}
$(html).appendTo('#container');
$(".unit").mouseenter(function() {
$(this).addClass('black');
});
});
#container {
background-color: lightblue;
height: 192px;
width: 192px;
}
.unit {
background-color: white;
height: 10px;
width: 10px;
margin: 1px;
float: left;
}
.unit.black {
background-color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
Also note that you can remove the loop altogether and use the fill() method of an array to create your .unit elements:
var arr = new Array(256);
arr.fill('<div class="unit"></div>');
$('#container').html(arr.join(''));
Note that this is unsupported in IE and Safari, although a polyfill is available at MDN
The following will change the background color of your element when the mouse enters, and subsequently unbind the handler (so the code will only execute on first mouseenter - as specified in your description)
$(".unit").mouseenter(function() {
$(this).css("background-color", "black");
$(this).unbind('mouseenter');
});
jQuery mouseenter documentation for reference: https://api.jquery.com/mouseenter/#mouseenter-handler
Updated (and simplified for the sake of demonstration) fiddle: https://jsfiddle.net/eemLsjg7/9/
I'm trying to show some team staff in my website, so, I want to show some small info, like picture and name and then, when you click it, it pops up a div with hole info about the person.
I'm trying to do it through getElementsByClassName, but, it's not working, it only works for the first node.
i have two divs, one div named 'popup' which contains info and one full size div with opacity.
so, there's my functions for opening and closing divs:
function showWindow(className,number){
var obj = document.getElementsByClassName(className);
$obj[number].fadeIn(1000);
var obj2 = document.getElementById('transparentBox');
obj2.style.display='block';
}
function closeWindow(className,number){
var obj = document.getElementsByClassName(className);
$obj[number].fadeOut("slow");
var obj2 = document.getElementById('transparentBox');
$(obj2).fadeOut(1000);
}
The funny thing is that it does work if i click at the first element node, but it doesn't work for the other nodes(i.e. first node = obj[0]). For the other ones, only transparentBox shows up.
the css of both divs:
#transparentBox
{
position: fixed;
display:none;
padding:0;
margin:0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(255,255,255,0.5);
z-index: 499;
}
.popup {
position: absolute;
display:none;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:700px;
padding:20px;
background-color:white;
margin: auto;
z-index:500;
overflow-y: scroll;
}
And I'm calling them by More Info
but it's only displaying for the first call showWindow('popup',0), the other calls doesnt display popup, only the transparentBox.
$(obj[number]) is what you are looking for I think, instead of $obj(number). So your fadeIn/fadeOut should become: $(obj[number]).fadeIn(1000);
I figured out what happened wrong.
The problem was that, in my HTML code, the transparentBox div was covering only the first popup div, that's why the other ones didn't show up.
Fixed it. Thanks
I am trying to create a page that has before and after images that use a slider based on mouse movement to show both images. I need to have multiple sliders on the page and can not seem to get them to work. Below are a couple of different examples I have found and the challenges I am having.
http://codepen.io/dudleystorey/pen/JDphy - This works well with mobile but I can not seem to add a second version without adding css for every image since the background image is embedded in the css.
div#inked-painted {
position: relative; font-size: 0;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
div#inked-painted img {
width: 100%; height: auto;
}
div#colored {
background-image: url(https://s3-us-west2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);
position: absolute;
top: 0; left: 0; height: 100%;
width: 50%;
background-size: cover;
}
http://codepen.io/ace/pen/BqEer - Here is the other example that does not work as well with mobile. I can add the second image but the slider works all the images simultaneously and not individually when a second image is added.
Can anyone help with adding the second image. I am sure both of these are very workable but I am missing something in my css/javascript knowledge that is not allowing multiple images.
You need to loop though all classes to be able set the eventhandlers individual. Your codepen example could be change to this to work with individual images at once:
var blackWhiteElements= document.getElementsByClassName("black_white");
for (i = 0; i < blackWhiteElements.length; i++) {
initCode($(blackWhiteElements[i]));
}
function initCode($black_white) {
var img_width = $black_white.find('img').width();
var init_split = Math.round(img_width/2);
$black_white.width(init_split);
$black_white.parent('.before_after_slider').mousemove(function(e){
var offX = (e.offsetX || e.clientX - $black_white.offset().left);
$black_white.width(offX);
});
$black_white.parent('.before_after_slider').mouseleave(function(e){
$black_white.stop().animate({
width: init_split
},1000)
});
}
codepen here: http://codepen.io/anon/pen/mJPmKV
Your first attempt is near sufficient.
Assign the background-image inline in the html to avoid extra classes
<div id="colored" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg);"></div>
change background-size on #colored to background-size: auto 100%; to reduce the "shaky" effect
background-size: auto 100%;
The little popup window appears in the middle of the original page.
The original page is covered by grey shade if not by the popup window.
The underneath original page can still be scrolled up and down.
Follow these steps:
1) Create this CSS rule:
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
background: #666;
filter: alpha(opacity=50); /* opacity for IE browsers */
}
2) Add this code to your jQuery:
$("body").prepend("<div class='overlay'></div>");
3) When done, remove it like this:
$(".overlay").remove();
Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.
http://twitter.github.com/bootstrap/
Regards.
You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal
This is easy enough to achieve with some simple CSS...
The overlay (the grey background) is fixed in place and covers everything below:
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
filter: alpha(opacity=0);
z-index: 2; // above content
}
The "dialog" itself is similar in style, but smaller:
#dialog {
display: none;
position: fixed;
width: 500px;
height: 250px;
background-color: #fff;
z-index: 3; // above 'overlay'
}
The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:
positionDialog = function() {
if (typeof window.innerHeight != 'undefined') {
dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
}
}
And also upon window resize:
$(window).resize(function() {
positionDialog();
}
Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.
These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.
It's called a light box. There's a way that you can do it using only CSS:
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:
-moz-opacity: 0.8;
opacity:.80;
You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals