so long story short,
I'm testing something out, a simple rollover and i notice that for example, if i use this
css:
#box{ width:200px; height:200px; background-color:#F00;}
html:
<div id="box" class="boxClass">this is sample text</div>
Js:
var box = document.getElementById("box");
function changeBox(){
//box.style.backgroundColor = "#1896fa";
box.style.backgroundColor = "#1896fa";
}
box.onmouseover = changeBox;
it works, simple as can be. simple mouseover, simple js...simple. Mouse rolls over and changes from red to bue...good, but then when i try to target the same div via
var box = document.getElementsByTagName("div");
or
getElementsByClassName("boxClass");
nothing happens. my ? is why?
reason im asking is because, i have a simple image gallery and wanted to implement gallery wide rollovers but didnt want to write them for EVERY image.
was trying to somehow group them all together via tagName("img") or ClassName("boxClass")
but to no avail. i know older browsers dont support some of these but i looked it up and saw all modern browsers sans Ie are a go. what am i missing?
any tips help direction is appreciated. thanks in advance.
Contrary to the getElementById function which returns a single element, the getElementsByTagName function returns a NodeList of DOM elements (which is normal as you could have multiple elements with this tag). So if you want to change the background color to all <div> elements in the DOM you will have to first loop through the elements of this collection.
var boxes = document.getElementsByTagName("div");
for (var i = 0; i < boxes.length; i++) {
boxes[i].style.backgroundColor = "#1896fa";
}
Same remark stands true for the getElementsByClassName function.
Related
I have a web page that is structured like this:
<canvas id="myCanvas"></canvas>
#for(var i=0; i<10; i++) {
<div class="my-element">
<canvas></canvas>
</div>
}
This code generates one main canvas. Below it, 10 other dynamically generated divs are being generated. In reality, this loop is just used to show that I have some code being dynamically generated. The main thing to understand is the my-element piece.
In my javascript, I have the following:
$(function() {
var mainCanvas = document.getElementById('myCanvas');
initializeCanvas(mainCanvas); // This works.
var dynamicElements = $('.my-element');
for (var i=0; i<dynamicElements.length; i++) {
initializeCanvas($(dynamicElements[i])[0]); // This does not work
}
});
function initializeCanvas(canvas) {
// do stuff
}
The first call to initializeCanvas works because I'm passing in an actual HTML Dom element. But the second initializeCanvas, which is called multiple times, fails because it's passing in something else. How do I get the same type of element as what's returned by document.getElementById in this case?
Thanks!
First of all, this doesn't make sense:
$(dynamicElements[i])[0]
You are getting jQuery element, unwrapping it, then wrapping again in jQuery...
what you simply need to do is get canvas from the element
dynamicElements.eq(i).find('canvas')[0] should do the job
You can't use the same element for this purpose. I suggest you to clone it. Like;
var dynamicElements = $('.my-element').clone();
Also when you add more element with my-element class this will be messy. You should make sure to select only one element with $('.my-element') selection.
I'm trying to quickly fix something that is broken on a wordpress site. The problem is that someone else created the soup sandwhich and I'm stuck fixing it. I have an element that shows up in two different sections on the page. The first is a post-status form, the second time it shows up is in a comment-add section that repeats indefinitely on the page. The block of code works on the comments, but doesn't work on the status form, so I wan't to simply hide it until I figure out how to A) find where the heck the code is being generated, B) fix the issue.
The element has a style that is being dynamically applied (assuming javascript) at load of the element. It starts off hidden, then something somewhere down the pipe shows it.
Here is what my code looks like, first the element that works:
<div class="activity-comments">
<div class="audio_controls fresh" style>
....
</div>
</div>
The block that is broken:
<div id="whats-new-post-in-box">
<div class="audio_controls fresh" style="display: block;">
...
</div>
<div>
So in that first block the code sits without a style in it, which for some odd reason whoever wrote it left the style tag in anyway without any style to apply (completely stupid and malformed code). But in the second element, the one that's broke, it has a display:block dynamically written in at run time. I'm trying to figure out how to force it to display:none. I've tried js, but I'm somehow not calling it correctly (not sure how to call nested elements, I only want the audio_controls within that nested ID but not the other class).
Anyone have any ideas for me?
You can do it with CSS:
#whats-new-post-in-box > .audio_controls.fresh {
display: none !important;
}
An !important style rule can override an inline style rule (unless the inline style rule is also !important).
Alternately, with JavaScript on any modern browser:
var list = document.querySelectorAll("#whats-new-post-in-box .audio_controls.fresh");
var n;
for (n = 0; n < list.length; ++n) {
list[n].style.display = "none";
}
For older browsers it's more of a pain:
var elm = document.getElementById("whats-new-post-in-box").firstChild;
while (elm) {
if (elm.className &&
elm.className.match(/\baudio_controls\b/) &&
elm.className.match(/\bfresh\b/)) {
elm.style.display = "none";
}
elm = elm.nextSibling;
}
Obviously, for the two JS solutions, you need to run that code after whatever it is that's setting the style in the first place...
Pretty sure you can write a CSS rule for #whats-new-post-in-box .audio_controls and mark it with !important.
Another way to hide the inner div, and this requires jQuery:
$('div.audio_controls', $('#whats-new-post-in-box')).hide();
This code select all div elements with an audio_controls class that are inside the element with an id of whats-new-post-in-box, and hides them.
I have this form and several divs in it. The matter is, that color of one div is set with javascript, randomly, and border of another div has to be in one color with first one. It gets even more complicated, because several divs have one class names.
Basically, what I mean here is that one house should be of one color, and "roof" depends on content, color of which is set randomly with js.
worked on this for quite a long time, but seem to have no solution(
I guess, javascript should look something like this
document.getElementByClassName("roof").style.border-bottom-color = document.getElementByClassName("contents").style.background-color;
my jfiddle with html and css
If you'd like to keep "Pure" JS, take a look on this approach:
document.getElementsByClassName("roof")[0].style.borderBottomColor =
getStyle(document.getElementsByClassName("contents")[0], 'backgroundColor');
function getStyle(el,styleProp)
{
if (el.currentStyle)
return el.currentStyle[styleProp];
return document.defaultView.getComputedStyle(el,null)[styleProp];
}
Please notice, that getElementsByClassName returns a set of elements which have all the given class names. To access all of them and fill in elements border with ramdom color i can advice you to go in loop throuth them like:
var yourElements = document.getElementsByClassName('className');
for(var i=0; i<yourElements.length; i++) {
yourElements[i].style.borderColor= "#RANDOM_COLOR";
}
Advanced technique is to use jQuery, and correct answer was given above by JustAnil.
Hope it helps. Cheers!
I have a javascript function that is supposed to hide and show layered divs by simply changing the z-index. I don't know if this is the best way to do it, but it works except for one issue. I have the content divs (absolutely positioned in CSS on top of each other), but I also have a navigation div (absolutely positioned in CSS at the bottom of the page) that should always remain on top. So I have this javascript code:
<script type="text/javascript">
var z = 1;
function showHide(id) {
document.getElementById(id).style.zIndex = z++;
document.getElementsByTagName('nav').style.zIndex = z++;
}
</script>
And I have this html:
<div id="1a" class="content" style="z-index:1;">Content</div>
<div id="1b" class="content">More Content</div>
<div id="1c" class="content">Even More Content</div>
<div class="nav" style="z-index:2;">
1
| 2
| 3</div>
The problem is that the z-index line for the navigation div messes it up. Not only does it not execute, but anything I put after it doesn't get executed as well (even a basic alert). If I change navigation from a class to an id, it works fine, but I'm going to have multiple navigation divs on each page (multiple slides in a SlideDeck). I could just set the navigation div's z-index to 99999, but I wanted to see why it wasn't working in the "cleaner" way, since it looks like I might be making a basic mistake.
Thank you.
I'm not sure if this is exactly what you're after, but you need to create a loop for getElementsByTagName or getElementsByClassName:
var cells = table.getElementsByClassName('nav');
for (var i = 0; i < cells.length; i++) {
cells[i].style.zIndex = z++;
}
Edit: Changed method call to getElementsByClassName. I initially just took what he wrote and added the loop.
Looks like your problem is that you are trying to use getElementsByTagName when you should be using getElementsByClassName. getElementsByTagName searches for elements based on tag name, like 'div' or 'span', not class names.
So, use it like this:
<script type="text/javascript">
var z = 1;
function showHide(id) {
document.getElementById(id).style.zIndex = z++;
document.getElementsByClassName('nav')[0].style.zIndex = z++;
}
</script>
Keep in mind that method was added in Firefox 3 and may not be supported in your browser. I would recommend using something like jQuery to maintain cross browser compatibility. Using jQuery, it would look like this:
<script type="text/javascript">
var z = 1;
function showHide(id) {
$('#'+id).style.zIndex = z++;
$('.nav').style.zIndex = z++;
}
</script>
I need a little help with (probably) something really simple.
I want to use a script which converts images from color to grayscale.
I got it working partially — the first image turns gray, but the second won’t.
I know this is because an id cannot be used multiple times:
var imgObj = document.getElementById('grayimage');
I tried this:
var imgObj = $(’.grayimage’)[0];
But it didn’t work. Changing it to getElementByClass also does not work. (Before people ask, I did change the id to class in the <img> tag.)
I really could use some help here. Thanks in advance!
$('.grayimage').each(function(idx,imgObj){
<do your code here>
});
$('.grayimage') gives you a list of all elements with grayimage as a class. If you add '[0]' you're accessing the first element, so any changes you make will apply to only the first image that it finds with this class.
You should loop through all elements:
var images = $('.grayimage');
for(i = 0; i < images.length; i++) {
var image = images[i];
// Do stuff
}