Changing background of a div when hovered over a link Vanilla JS - javascript

I am looking to change the background of one class of div's called "grid-light" when I hover over a link on the page. I feel my JS is correct but I am not getting the result I am looking for. Here is my code:
grid-light
JS
an element to hover over
class to change "grid-light" to

https://gyazo.com/f36d9970fa6100e2ac9af41a1d2d7a59
This link shows you what i think you're going for, you declare your variables,
on mouse over of your link1, it will change div1 items to red
on mouse out of your link1, it will change div1 back to black
Please let me know if i can clarify more!

It looks like you're trying to use the elements like jquery, and className is a React thing.
div1.className = "div1hovered";
Instead with javascript you can access the classList:
div1.classList.add("div1hovered");
Also recommended to do this with CSS:
div1:hover {
background-color: red;
}

Related

How to get this glass shatter effect to work on multiple divs?

Situation
I have this glass shatter effect simulation that involves some basic javacsript code and right now it works fine; When you click on the logo, the glass shatters accordingly and then a new unshattered logo re-appears in its place.
Take a look at the jSFiddle here:
https://fiddle.jshell.net/9n9ft9ks/3/
Problem
Right now, there's only one logo on the page. I need there to be more than one logo, probably like five (of the same Floyd's autoglass logos) all on the same page, all with the same onClick glass shatter effect. But when I try to do this myself - put more than one (of the same logo) on the page, the code just breaks.
How I tried to fix it
The logo with the glass shatter effect is a div called "#container". So since I want more than one of these logo's on the page, I tried just duplacting "<div id="container"></div>" a bunch of times in the HTML code. That didn't work:
https://fiddle.jshell.net/9n9ft9ks/5/
So I tried changing the div id into a div class and I edited all the appropriate javascript & CSS lines that needed to be changed like:
document.getElementById('container');
to:
document.getElementsByClassName('container');
and
#container: {} to .container{}
But that didn't seem to work for me either. The logo doesn't even show up on the page anymore after making these changes, take a look here: https://fiddle.jshell.net/9n9ft9ks/4/
Summary
I have a logo with an onClick glass shatter effect. There is only one logo on the page. I need there to be more than one on the page, but can't seem to get it to work myself... If anyone could take a look at the code and try to get it to work so there is more than one logo on the page, i would appreciate it so much! Here is the original jSfiddle one more time: https://fiddle.jshell.net/9n9ft9ks/3/
You cannot use a single ID multiple times on the same page.
Use a class instead:
CSS:
.className {
/* attributes: values; */
}
HTML:
<div class="className"></div>
In your attempt, try changing the getElementByClassName for $('.container') and then replace the appendChild by append.
I made it work, but it was a bit messy, it would need more CSS to make the logos not overlap one over each others.
(You can add a style on the second div to see the multiple logos, ex: <div class="container" style="left: 50px;"></div>)
Here's the jsfiddle: https://fiddle.jshell.net/9n9ft9ks/7/

Change background color when div class changes?

I have made a nav that opens with a button click. When you click the button, the class of the div for the nav changes. I want to dim the background color of the body when the nav opens (and more eventually).
I can think of a few ways to do this but I'm not sure which would be the easiest or if they are possible.
Method 1:
Somehow changing the class/div of the body when the button is clicked. This would not be hard to do, if you could set a class to the body.
Method 2:
Using js to change the elements individually. This would be relatively easy but more code than might be needed.
Method 3:
I tried using .closed > body, but this method can only be used to change things on a level down (held within the parent). So, with this in mind, I tried using .closed < bodybut it still did not work. I have also seen ~ used so I tried that but still no result.
Any advice anyone can give would be greatly appreciated. Thank you.
This should work given it's the first nav element.
var nav = document.getElementsByTagName('nav');
nav[0].addEventListener('click', function(e){
var body = document.getElementsByTagName('body');
body[0].style.backgroundColor = "some color value";
});

Javascript: Visibility

Been working on the same problem and am now trying to use a different solution using visibility:hidden; visibility:visible; . The issue I am having is not making something visible or hidden, but rather combining two elements to play off each other. For example here is what I have:
<div id="external"></div>
<div>
<img src="../../images/labortab.png" style="float:left; width:38px; height:125px;" id="labor" onmousedown="document.external.visibility='false';document.external.visibility='true';"/>
<img src="../../images/odctab.png" style="float:left; width:38px; height:125px;" id="odc" onmousedown="document.external.visibility='true';document.external.visibility='false';"/>
</div>
When I click on the first image or button, I want the external div to switch from its current state of visible to off and replace that div with another element already in the div that is hidden, switching this element to true and holding it there.
Then I want the second image or button to do the exact opposite switching the states from off to visible of the first element and then turning the 2nd element off. I am not good at writing JavaScript code and reading some of the solutions online are Greek to me. So if anyone understands what I'm trying to do would be much appreciated.
It looks like you are trying to toggle the visibility of the div based on a click event to one of the images. Try using the event onclick instead, and correctly reference the div's DOM properties:
document.getElementById('external').style.visibility='hidden';
Here is an example.
You're probably better off using style.display='hidden' instead of the the visibility property. That would look something like this:
document.getElementById('id').style.display = 'hidden'
to hide
and
document.getElementById('id').style.display = 'block'
//or inline or inline-block as needed
to show again.

Text on image mouseover like youtube

How can I show text on top of my images when a mouse moves over them.
For example you see on youtube you have an add to playlist button on the thumbnails. How can I setup something similar but for a like button.
I am not looking for a tooltip. I want the text to shown on the image when the mouse is hovered over it.
Put each of your images inside a seperate "container" div. These divs should have the position: relative attribute. Give all the images the class name 'singleImage' Put another div inside of this each of the "container" divs with position: absolute and display none. Set the class name for these divs to 'toolTip'. This div will be the tooltip. Put a title attribute on your images. You will need jQuery to rig up the hovering or plain javascript if your feeling adventurous
In jQuery you would do something like:
$('.singleImage').mouseover(function(){
var tt = $(this).parent().find('.toolTip');
tt.html($(this).attr('title'));
tt.show();
});
$('.singleImage').mouseout(function(){
var tt = $(this).parent().find('.toolTip');
tt.hide();
});
you are looking for tipsy I think
The functionality you are referring to is called a "tooltip". There are plenty of different plugins ciruclating out there that you may be able to utilize. Without having specific code, it will be hard for anyone to present a tailor-made solution.

How can I use this JQuery plugin to move an object X positions?

http://desandro.com/demo/masonry/docs/
I got this to display nicely. But,
How can I modify this plugin so that when someone clicks an object, it does the nice "re-ordering" effect as seen in: http://desandro.com/demo/masonry/docs/filtering.html#demo
And it moves the object "X" positions up or down the list?
Is it easy to modify this to do that?
From the moment that all elements has float:left; when the user click the button hide the element with specific classes, for example if he clicks grey, then will hide red and black. In jquery the above example would be like this:
$(document).ready(function(){
$("#grey-button").click(function(){
$(".red, .black").hide()
});
});
This will hide all elements with classes red and black, adding the css property display and value none.
This will make the browser don't "see" them, so the rest elements will be positioned in a different place, according the floats you have set for them.

Categories