I am writing a code with multiple divs that uses a button to change the background colors of divs when clicked. The background of the divs are hard coded into the html:
ex:
<div style="background-color: grey">
</div>
When I click the button, I want the background color to be permanently changed to white. However, the color only changes to white for an instant. the code is as such:
<script>
var divs=document.getElementsByTagName("div");
function noColors(){
for(i=0;i<divs.length;i++){
divs[i].style.backgroundColor="white";
}
};
</script>
<form>
<button onclick="noColors()"> I HATE THESE COLORS!!! </button>
</form>
Any help would be appreciated
Remove the form tag:
<button onclick="noColors()"> I HATE THESE COLORS!!! </button>
<div style="width: 100px;height: 100px; background-color: red"></div>
<div style="width: 100px;height: 100px; background-color: yellow"></div>
<div style="width: 100px;height: 100px; background-color: blue"></div>
<script>
var divs=document.getElementsByTagName("div");
function noColors(){
for(i=0;i<divs.length;i++){
divs[i].style.backgroundColor="white";
}
};
</script>
when the form tag is used and you click on the button the colors change but the form also submits, which leads to reload of the page. This way you loose the colors of the div elements.
Related
I made a simple "website" that behaves like this:
Clicked paragraph receives focus and changes background color to red.
When user clicked one of the paragraphs (it received focus and changed color to red) and then user clicks other paragraph, the "old" paragraph looses focus and red color and passes it to the "new" clicked paragraph.
When user clicked one of the paragraphs (it received focus and changed color to red) and then user clicks the background (projectsDiv) or any other element of the website the paragraph looses focus and red color.
I want the website to behave like this:
Same as above
Same as above
When user clicked one of the paragraphs (it received focus and changed color to red) and then user clicks the background (projectsDiv) the paragraph looses focus and red color. Clicking any other element of the website doesn't affect focus of the paragraphs inside projectsDiv.
Here is a code:
<div class="container">
<div id="projectsDiv">
<p tabindex="0">P1</p>
<p tabindex="0">P2</p>
<p tabindex="0">P3</p>
</div>
<div id="tagsDiv">
<button id="Tag1" class="Tag">Tag1</button>
<button id="Tag2" class="Tag">Tag2</button>
<button id="Tag3" class="Tag">Tag3</button>
</div>
</div>
#projectsDiv p:focus {
background-color: red;
}
#projectsDiv {
border: 1px solid black;
}
You probably need JavaScript. Just use classes to keep track of which element got clicked last.
document.querySelectorAll("#projectsDiv, p").forEach(element=>{
element.addEventListener("click", event=>{
if (document.querySelector(".lastClicked")) {
document.querySelector(".lastClicked").classList.remove("lastClicked")
}
event.target.classList.add("lastClicked")
event.stopPropagation()
})
})
#projectsDiv p.lastClicked {
background-color: red;
}
#projectsDiv {
border: 1px solid black;
}
<div class="container">
<div id="projectsDiv">
<p tabindex="0">P1</p>
<p tabindex="0">P2</p>
<p tabindex="0">P3</p>
</div>
<div id="tagsDiv">
<button id="Tag1" class="Tag">Tag1</button>
<button id="Tag2" class="Tag">Tag2</button>
<button id="Tag3" class="Tag">Tag3</button>
</div>
</div>
If you're not comfortable with Javascript you can use check-box and labels.
input[name="_radio"]{
display: none;
}
#projectsDiv input:checked+p {
background-color: red;
}
#projectsDiv {
border: 1px solid black;
}
<div class="container">
<div id="projectsDiv">
<label>
<input type="radio" name="_radio">
<p tabindex="0">P1</p>
</label>
<label>
<input type="radio" name="_radio">
<p tabindex="0">P2</p>
</label>
<label>
<input type="radio" name="_radio">
<p tabindex="0">P3</p>
</label>
</div>
<div id="tagsDiv">
<button id="Tag1" class="Tag">Tag1</button>
<button id="Tag2" class="Tag">Tag2</button>
<button id="Tag3" class="Tag">Tag3</button>
</div>
</div>
I want the screen to scroll down to the div. This div has an ID of 'weather-data'
I have tried the following;
document.getElementById('weather-data').scrollIntoView();
I have also tried using anchor tags this did not seem to work
The button which the user will click:
<button id="submit" onclick="myFunction()">
Submit
</button>
The function that runs when the button is clicked:
function myFunction(){
cityName();
getData();
clear();
document.getElementById('weather-data').scrollIntoView();
}
This is the div I want the screen to scroll to:
<div id="weather-data">
</div>
use the anchor tag to link the the div
body{
margin: 0;
}
div{
height: 100vh;
border: 1px solid black;
}
<html>
<body>
<div id='a'>a</div>
<div id='b'>b</div>
<div id='c'>c</div>
<div id='d'>d</div>
<div id='e'>e</div>
<button><a href='#c'>go to c</a></button>
</body>
</html>
I fixed the issue I had to write an if statement to check if there was any text in the h1 element.
if(weatherMain != null){
document.getElementById('icon').scrollIntoView();
document.getElementById('weather-main').scrollIntoView();
}
I have list and each list has "move top" button.
when click "move top" button, div element shoul be move to top(in DOM).
But I am getting little trouble to make it.
Also when using keyboard tabbing to the button and press enter key, the focus has to be keep to the button, after press the keyboard enter.
This is what I tried so far here
Please help.
$('.btnTop').on('click', function() {
$(this).parent().prepend(this).focus();
});
.box {
border: 1px solid #000;
margin: 0 0 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div id="aa" class="box">
aa <button class="btnTop">Top</button>
</div>
<div id="bb" class="box">
bb <button class="btnTop">Top</button>
</div>
<div id="cc" class="box">
cc <button class="btnTop">Top</button>
</div>
</div>
You are prepending the wrong item. You need to prepend the parent div of the button, not the button itself. Also, you need to prepend to the .wrap div, which is the button's parent parent rather than to the button's parent which is just the div wrapping the button.
Lastly, you need to focus() on this (which is the button you clicked) to get the tab button working. At the moment you are not focusing on the button you clicked on.
See working example below:
$('.btnTop').on('click', function() {
let this_div = $(this).parent();
this_div.parent().prepend(this_div);
$(this).focus();
});
.box {
border: 1px solid #000;
margin: 0 0 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div id="aa" class="box">
aa <button class="btnTop">Top</button>
</div>
<div id="bb" class="box">
bb <button class="btnTop">Top</button>
</div>
<div id="cc" class="box">
cc <button class="btnTop">Top</button>
</div>
</div>
its an i tag
(the image is)
which uses css to display the icons
through a cdn hosted stylesheet and how would I incorporate that.
So lets say there is a magnifying glass icon on the web page, we the user clicks on the icon , a div dropdown search box appears. that is what i am asking help for.
not sure how to do it but I know I am close.
The icon is the
<section class="search">
<div id="searchbar"><i class="search-bar"></i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
//// javascript////
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Don't know what your goal is, but your code seems to work.
Have you checked so your div wraps around the image so when you click it you click inside the div (try to do as I in the fiddle, a border around the div so you can see).
else it should work just fine.
What is the css for the .hidden class?
<style>
.hidden
{
background-color: yellow;
}
#searchbar
{
border: 1px solid black;
height: 16px;
width: 50px;
}
</style>
<section class="search">
<div id="searchbar"><i class="search-bar">CLICK</i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
Script:
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Check this jsfiddle out!
I found lots of information on the web about how to remove, attach, prepend, etc. Element from and to DIV. Unfortunately I have a hard time making it work.
In my project, I will have to attach element to div and move them around on a grid (each grid cell being a div of it's own) Bellow is a small script which mimics what I'm trying to do.
Here's the example (here's a link to JSFiddle : http://jsfiddle.net/mgR5b/25/):
HTML:
<div id="LeftAndRightRow1" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;">
<div id="Left" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: blue;">
<button id="B1">B1</button>
</div>
<div id="Right" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: pink;">
<button id="B2">B2</button>
</div>
</div>
<div id="LeftAndRightRow2" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;">
<div id="Left2" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: yellow;">
<button id="B3">B3</button>
</div>
<div id="Right2" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: purple;">
<button id="B4">B4</button>
</div>
</div>
<br>
<button id="SwapButton">Swap Button</button>
JQuery / JavaScript
Now, imagine I want to swap the container "Left" (I want to move the Div, not the button) to the second row (LeftAndRightRwo2).
I tried various things but not of them worked... My last attempt:
$(document).ready(function () {
$("#SwapButton").click(function () {
alert('trying to swap');
$("#Left").remove();
$("#LeftAndRightRow2").append($("#Left"));
});
});
etc.
None of what I tried worked.
Can someone help understand how to move div from one place to another.
Thank you
When you remove an element, it is no longer on the DOM. If you want to move a DOM element like that you need to store it in a variable. Also you should use detach instead of remove as it is more efficient in this case.
$(document).ready(function () {
$("#SwapButton").click(function () {
var left = $('#Left');
left.detach();
$("#LeftAndRightRow2").append(left);
});
});
When you use $("#Left").remove() you are actually removing it from the DOM, so you can't recall it later with $("#LeftAndRightRow2").append($("#Left"));.
Try to save it, like this, in a variable:
JS
$("#SwapButton").click(function () {
alert('trying to swap');
var left = $("#Left");
$(left).remove();
$("#LeftAndRightRow2").append($(left));
});
Now the entire div moves from the right to the left.
fiddle
http://jsfiddle.net/mgR5b/26/
I think your problem is more of CSS and less in JS I have changed your mark up and CSS to get the result you are looking for
Markup
<div id="LeftAndRightRow1" class="rows">
<div id="Left">
<button id="B1">B1</button>
</div>
<div id="Right">
<button id="B2">B2</button>
</div>
</div>
<div id="LeftAndRightRow2" class="rows">
<div id="Left2">
<button id="B3">B3</button>
</div>
<div id="Right2">
<button id="B4">B4</button>
</div>
</div>
<br style="clear:both;" />
<button id="SwapButton">Swap Button</button>
JS
$(document).ready(function () {
$("#SwapButton").click(function () {
//alert('trying to swap');
// $("#Left").remove();
$("#LeftAndRightRow2").append($("#Left"));
});
});
CSS
.rows{
display:block;
clear:left;
}
.rows div{
float:left;
}
JSFIDDLE