Change background color when div class changes? - javascript

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";
});

Related

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

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;
}

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.

JScrollPane Dynamic Height

The demo page referenced can be found here.
I'm trying to determine a way that on the click of a parent category (ex: Stone Tiles, Stone Sinks), that the JScrollPane would re-determine the current height and adjust as needed. Unfortunately, my attempts to do so have not worked yet.
I referenced the example here which provided the following function (to do a refresh)...
api.reinitialise();
I've tried to setup this function to be triggered by the category parents like so...
var pane = $('.menuwrap')
pane.jScrollPane();
var api = pane.data('jsp');
var i = 1;
$("li.expandable.parent").click(function() {
api.reinitialise();
});
Unfortunately, while I was able to verify the click is being rendered, the function (api.reinitialize) doesn't appear to be working. I'm hoping that a fresh pair of eyes could point me in the right direction. :-)
Thanks!
The problem is that api.reinitialise executes immediately after the click, and the li element will not have expanded yet so when jscroll pane goes to to recalculate the height it gets it wrong. You can try adding a delay but the best solution would be to bind api.reinitialise() to an event that's triggered once the your list has finished expanding. I'm not sure how you're expanding the div within the li but if for instance it's using .animate, you could bind the api.reinitialise to the animation complete event.
Also noted that not all the parent li's have the class parent associated it to them. I would expect you would want the pane to reinitialize on the expansion and collapsing of all the main li elements.
Hope that helps !
Cheers :)
What you can do is have your inner divs expanded by default, and then close them with jquery, rather than in the CSS directly.
So instead of doing this:
.mydiv.closed {display:none}
do this in your jquery after the elements are drawn to the page:
$('.mydiv.closed').hide();
This will load the jscrollpane at the necessary height, and then collapse what you want to be initially hidden.

Mouse cursor change Javascript - linked DIV

I have this JS code.
I want to show a "hand" cursor when I hover on the div like it would normally do for an a href.
$("#button1div").click(function(){
window.location = 'http://google.com';
});
How do I make the cursor change to a hand?
Thanks.
While you seem to want to do this with Javascript, there is a much easier way to do it with CSS alone:
#button1div {
cursor: pointer;
}
And, I'm not sure if you're really doing anything more than changing window.location when that div is clicked, but it looks like you could use an a element with no problem.
$("#button1div").css('cursor','pointer');
will set the cursor as hand symbol.

"Disabling" an HTML table with Javascript

I've seen this done in a lot of sites recently, but can't seem to track one down. Essentially I want to "disable" an entire panel (that's in the form on an HTML table) when a button is clicked.
By disable I mean I don't want the form elements within the table to be usable and I want the table to sort of fade out.
I've been able to accomplish this by putting a "veil" over the table with an absolutely positioned div that has a white background with a low opacity (so you can see the table behind it, but can't click anything because the div is in front of it). This also adds the faded effect that I want. However, when I set the height of the veil to 100% it only goes to the size of my screen (not including the scrolling), so if a user scrolls up or down, they see the edge of the veil and that's not pretty.
I'm assuming this is typically done in a different fashion. Does anyone have some suggestions as a better way to accomplish this?
You could try javascript like:
function disable(table_id)
{
var inputs=document.getElementById(table_id).getElementsByTagName('input');
for(var i=0; i<inputs.length; ++i)
inputs[i].disabled=true;
}
Try the below with Jquery
$("#freez").click(function(){
$('#tbl1').find('input, textarea, button, select').attr('disabled','disabled');
});
$("#unfreez").click(function(){
$('#tbl1').find('input, textarea, button, select').removeAttr("disabled");
});
Disabling the inner elements of an HTML table can also be done using pointer-events CSS style as shown below:
table[disabled], table[disabled] input { pointer-events: none }
At any desired point in our JavaScript code, we can add disabled attribute to the parent table which will bring the CSS styling into effect:
let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);
Another way to do it would be using the opacity property.
function disablePanel(id) {
var panel = document.getElementById(id);
var inputs = panel.querySelectorAll('input, button'); //anything else can go in here
for (var i=0; i<inputs.length; i++) {
inputs[i].disabled = true;
}
panel.style.opacity = 0.3; //or any other value
}
Can't you just find out the height of the area in pixels with JavaScript? And then set the veil's height to that number?
I don't have the exact code in my head but offsetHeight might do the trick
Somebody please correct me if I am wrong, but I have seen Javascript and some derivate Javascript libraries that have a lot of options for accomplishing for what you would like to do. I have used the jQuery library to do some similar effects.
One thing to think about is what exactly you are trying to disable. Essentially tables are not interactive so disabling a table would not accomplish much. If it is the form elements within the table you want to disable. You can accomplish this using JavaScript.
Along with using JavaScript for disabling the form elements, you can also use it to change properties of the non interactive elements.
An example of this would be using JavaScript to change the color of the font and borders and other non interactive elements in the table to give the "look" of being disabled. Of course you still need to use JavaScript to disable the form elements.

Categories