I'm looking to reveal a div when I click on a corresponding div, much like when you click on an image in Google's image search results. The row of images split, and a new area is revealed. I got pretty far with my minimal knowledge of javascript here: http://codepen.io/anon/pen/fKEgw
The basics of it works like this:
document.getElementById("a-section").addEventListener("click", function () {
document.getElementById("a-reveal").style.height = "300px";
document.getElementById("b-reveal").style.height = "0px";
document.getElementById("c-reveal").style.height = "0px";
document.getElementById("d-reveal").style.height = "0px";
document.getElementById("e-reveal").style.height = "0px";
document.getElementById("f-reveal").style.height = "0px";
document.getElementById("g-reveal").style.height = "0px";
document.getElementById("h-reveal").style.height = "0px";
});
How can I get a similar effect without being forced to set a height value? Is there a better way to code this type of thing so I'm not making duplicate divs for the mobile view? SHould I use something other than just javascript?
Thank you very much for your help!
If you use jquery, you can simply do, for example
$("#a-reveal").show();
and
$("#b-reveal").hide();
rather than changing the heights. In plain javascript this is basically setting the 'display' css attribute to 'none' to hide it and then back (default is 'block').
edit:
Also, if you modify the html so that the divs are like this:
<div id="a-section" class="section" reveal="a-reveal">
....
<div id="a-reveal" class="reveal">
where reveal contains the ID of the associated reveal div, you could replace all the separate event handler attaching code with the following:
//attaches event to every div with class "section"
$(".section").click(function(){
$(".reveal").hide();
var thisRevealID = $(this).attr("reveal");
$("#"+thisRevealID).show();
});
There may be a cleaner way to get the appropriate reveal div than to resort to adding the reveal attribute, but the idea is to make it so you can determine what you need based on the clicked div without the code knowing exactly which div was clicked.
I agree that if the project is large you might be better off with JQuery, see thogue's excellent answer. If you want to stay with plain Javascript you can certainly clean it up a little bit:
var reveal_func = function(section){
var arr_a = new array("a-reveal","b-reveal","c-reveal");
for (var i=0; i<var_a.length; i++){
if (arr_a[i] === section){
document.getElementById(arr_a[i]).style.height = "300px";
}else{
document.getElementById(arr_a[i]).style.height = "0px";
}
}
};
and then
document.getElementById("a-section").addEventListener("click", reveal_func("a-reveal"))
document.getElementById("b-section").addEventListener("click", reveal_func("b-reveal"))
as needed.
Related
I have a DIV that needs to be displayed/hide whenever i hover a menu item.
Here it is my website: Website
The Blug light section should be displayed only when I hover the Photo Booths menu on the header.
I have tried the following code on JSFiddle which it works but when i use it on my site it doesn't work
<script>
let test = document.getElementByClassName(".menu-item.menu-item-7912");
test.addEventListener("mouseover", function( event ) {
document.getElementById('test2').style.display = 'none';
});
test.addEventListener("mouseleave", function( event ) {
document.getElementById('mega-menu-customized').style.display = 'block';
});
</script>
I have tried using getElementByClassName but without success. Any ideas of how to make it work?
Are you getting DOM node in test variable, one problem I can see in your code is:
let test = document.getElementsByClassName(".menu-item.menu-item-7912");
Should be:
let test = document.getElementsByClassName("menu-item, menu-item-7912");
We do not use dot before class name and multiple classes can be separated by comma like:
let test = document.getElementsByClassName("class1, class2, class3");
Your issue is in the header element. On scroll, the style property of the document header is changing. Look:
sorry for the bad quality, upload size is maxed at 2MB
Without getting into too much detail, one thing that I see is that the height of the header is being reduced to only contain the main header. When the larger blue subheader is visible, part of that is because the style.height of the header is made to be much larger. Additionally, the first child of the header is a div with id 7905, and that seems to be what you need to target to modify the opacity of the larger blue header. You need to target that div:
const blueBannerContainer = document.getElementById('7905')
But your event handlers will also need to account for the height of the header element. display: block won't really help you here.
Hi I am creating dynamic form in new tab using JavaScript. Margin effects on div are not taking effect. I am neither able to set the margins using class and id in css nor using div.setAttribute. Below is the code.
`
var openWindow = window.open('dynForm.html','_blank','');
var windoc=openWindow.document;
windoc.write("This is dynamic form ");
var div=document.createElement("div");
div.setAttribute("style","border:solid");
div.setAttribute("style","margin-left:1cm");
div.setAttribute("style","margin-right:1cm");
div.setAttribute("style","margin-bottom:1cm");
div.setAttribute("style","margin-top:1cm");
div.setAttribute("style","background-color:lightblue");
`Only background color is taking effect on the new tab. The below screen shot shows how the screen looks irrespective of the values of margin.
Quesstion 2: No class or id attribute in my css is being applied to div.
#myDIV2{
background-color:lightblue;
}
I tried div.id="myDIV2";
I also tried div.setAttribute("id","myDIV2");` I applied the same using class also, but still couldn't find any difference. I do not know why its not working and what went wrong here. Please help
You're overriding the styles every time you call setAttribute, try combining the styles and then set the style attribute only once:
var openWindow = window.open('dynForm.html','_blank','');
var styles= [
"border:solid;",
"margin: 1cm;",
"background-color:lightblue;"
];
var windoc=openWindow.document;
windoc.write("This is dynamic form ");
var end_styles = "";
for (var i=0; i<styles.length;i++) {
end_styles += styles[i];
}
var div=document.createElement("div");
div.setAttribute("style", end_styles);
Note: the fiddle won't work on stackoverflow, I used it because it's easier to format code
This is happening because your all style attribute are getting overridden by previous div.setAttribute and your last attribute div.setAttribute("style","background-color:lightblue"); getting applied. Try to put all styles in one go. div.setAttribute("style","style1:value1;style2:value2;style3:value3;");
I'm working on something where multiple functions will add various Event listeners to an initially hidden div, let's just call it secretBlock. Only one will ever be active at any given point, but all said functions will manipulate it by:
First cloning sercetBlock to ensure no previous listeners are still attached
Then setting the display to flex
HTML:
<div id="secretBlock" hidden>Secret</div>
JavaScript:
function exampleFuction() {
var secretBlock = document.getElementById('secretBlock');
var secretClone = secretBlock.cloneNode(true);
secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock.style.display = 'flex';
....
}
but the last part, setting the display, is not firing.
I assumed this had something to do with async-ness, but
setTimeout(function(){ secretBlock.style.display = 'flex' }, 999);
also had no effect.
However, one of the functions appends the div inside of another div right after setting the display, causing it to fire properly:
secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock.style.display = 'flex';
otherDiv.appendChild(secretBlock);
After a bit of testing, I found out it doesn't matter when I set the display (now vs later) or where it is in the code, as long as secretBlock gets appended to another div, the display change will register, otherwise staying hidden.
.......which sorta left me clueless as to what's going on, any insight would thus be much appreciated~~
Was a reference issue.
After .replaceChild() replaces secretBlock, the initial reference:
var secretBlock = document.getElementById('secretBlock')
becomes obsolete as it still points to the old, original element which is not apart of the html document anymore. Thus you need to redirect the reference to the cloned element:
secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock = document.getElementById('secretBlock');
secretBlock.style.display = 'flex';
Thanks Dr.Molle!
So I JUST asked a question and I've already hit another roadblock. Thanks so much to the stackoverflow community for helping me out so much recently :)
Every time I see people changing the innerHTML of some tag, they use document.getElementByID(id).innerHTML. My images do NOT have ids, nor do I want to give each and every one of them an id.
Here is my code:
function clickImages()
{
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++)
{
var delegate = function() { hover(this); };
images[i].onmouseover = delegate;
}
}
function hover(img)
{
img.innerHTML = "Text!";
}
The innerHTML doesn't seem like it's working; when I mouse over the image nothing changes.
Thanks in advance! Let me know if I can clarify!
An image is itself a replaced element, so there is no innerHTML to replace.
Based on your comment, if you want to add HTML adjacent to the image, you could do this:
img.insertAdjacentHTML('afterend', 'HTML code');
You could also change 'afterend' to 'beforebegin' if you wanted to add the HTML before the image.
Writing on the image itself would be much more complicated and would require positioning another element above it with a transparent background, or using the image itself as the background of another element, or a variety of other similar techniques.
Element.innerHTML
innerHTML sets or gets the HTML syntax describing the element's
descendants
innerHTML means the HTML that comes between the start and end HTML tags. Images don't have innerHTML
I am not sure what you want to achieve.
If you want to have a text displayed onmouseover, you can use the title attribute to do that.. for example:
<img src="smiley.gif" alt="Smiley face" title="Hello" />
If you are trying to replace the image with text on onmouseover ... then as an example (only to show the possibilities), the following code will hide the image & display a text onmouseover and make the image visible & remove the text onmouseout (although not very satisfactorily IMHO, more work has to be done on the code to improve it)
Please note: There shouldn't be any gap between the image tag and the span for this particular code to work. Also, a negative margin-left added to the span element can make it appear over the location of the image.
<img onmouseover="toText(this)" onmouseout="toImage(this)" src="smiley.gif" alt="Smiley" /><span style="visibility: hidden; margin-left: -30px;">Show Text</span>
function toText(img) {
img.style.visibility = 'hidden';
img.nextSibling.style.visibility = 'visible';
}
function toImage(img) {
img.style.visibility = 'visible';
img.nextSibling.style.visibility = 'hidden';
}
Good luck
:)
I have serval div's with classes and I want to define them in javascript.
Here is my jsfiddle script, It's only using DIV ID now but it has to be classes because I want to Add multiple blocks.
Can someone help?
var block = document.getElementById('block');
var minimizewindow = document.getElementById('minimizewindow');
block.style.height = "250px";
minimizewindow.style.display = "none";
//function minimize
minimize.onclick = function(){
if(block.style.height == "250px") {
block.style.display = "none";
} .........
http://jsfiddle.net/uVSyX/
click on the broken images for : minimize, maximze, close
Thank you!
EDIT : Think I don't get it, I wan't to show and hide multiple div's...
document.getElementsByClassName('myClass'); is the easiest way, however it is not supported by IE. Mozilla has great documentation on this.
If you need IE support, this page might be a good resource for you: http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/
and I want to define them in javascript.
this is a bad idea. Styling instructions belong in CSS style sheets.
The right way to go here would be having classes, like .expanded and .contracted
They would contain rules like
.expanded { width: 800px; display: block }
you then just change the class property in JavaScript. jQuery makes this very easy because it has convenient methods for dealing with classes.
http://api.jquery.com/hasClass/
http://api.jquery.com/addClass/
http://api.jquery.com/toggleClass/
I don't remember where I found this function at but it's what I've used to find elements based on class.
var elems = document.getElementsByTagName('div'),i;
for (i in elems) {
if((" "+elems[i].className+" ").indexOf(" "+matchClass+" ") > -1) {
elems[i].style.display = "none";
}
}
with matchClass being the name of the class you are looking for.
I updated the above code to set all div with a specific class that is defined as matchClass to be set to display:none when the function is run.