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 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.
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
Hitting a wall with this one, hope someone can lend a hand. I have a wrapper div containing many fixed-width "content" divs. It's like a table, except that the number of items "per row" aren't fixed, so that whenever the screen size is wide, more items fit onto the screen. Pretty basic.
Also, each of these "content" divs has an adjacent "details" div that is hidden by default ("style=display:none"), and an adjacent "separator" div that is empty, containing only the style "clear:both;".
Each content/details/separator div has a unique number in its ID, so that I can tell they are related (e.g., content123, details1234, separator1234)
Now, when one of these content divs is clicked, I want to reveal its "details" div below it. That part, I've got working partially, by wrapping an anchor tag around the content div, which fires an onClick javascript event, which in turns runs a jQuery statement to make visible the details and separator divs jQuery(".details1234").css("display","block");"
But you can imagine my problem. Once that "separator" div is reveled, it pushes down (clears) any "content" divs that appears to the right of it, ugly. My thought, what I have been wrestling with for hours, is to reveal the "separator" div of the content div, that is the last one appearing in the "row" that was clicked. That way, a new "row" will be opened up by the separator, so that when the "content" div is revealed it appears below the clicked item in the new row. To do that, I need to figure out the elementID of the last content div in the "row", and I was thinking about using the Y-coord of the mouse click event, plus the X-coord = to the right-most edge of the wrapper div minus half the width of the fixed-width content div. Something like that. But I am smashed into a wall and can't figure it out.
Can anyone help me do that? Or offer a different solution?
If sample code would help let me know, I could whip up an example, but it may take some screen space in this post.
Thanks everyone.. going nuts with this.
EDIT: the sample code below is based on my site. When a cell is clicked, you can see its "details" div appear below it, but unfortunately the other divs in the "row" get pushed down. that is the effect I'm trying to avoid. When a cell is clicked, I want the "details" to appear below it, but also the other divs to stay in their positions above the other cell's details, basically I want to keep the "row" intact. In the code, you can see my fruitless experiments using a "separator" div, because my assumption is that if I can insert that after the last div in the row, then the "details" div will become the next row, followed then by the next row of cells. Hope I explained it OK. Thanksgiving feast causing blood to divert from brain ;)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#overallwrapper{
background: #CCCCCC;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin-top: 5px;
}
.contentcell{
border: 2px solid blue;
padding: 4px;
float: left;
width: 200px;
}
.separator{
clear:both;
display: none;
}
.details{
background:lightgreen;
border: 2px solid green;
width:450px;
display:none;
float:left;
clear:both;
}
</style>
<script type="text/javascript">
function showDetails(contentid){
//first, reset all highlights and close any open content divs
$("#overallwrapper .contentcell").css("border","2px solid blue");
$(".details").css("display","none");
$(".separator").css("display","none");
//now highlight the clicked div and reveal its content div
var contentHI = "#content"+contentid;
var detailsON = "#details"+contentid;
var separatorON = "#separator"+contentid;
$(contentHI).css("border","2px solid green");
//$(separatorON).css("display","block");
$(detailsON).css("display","block");
}
</script>
</head>
<body>
<div id="overallwrapper">
<div id="contentwrapper01">
<div id="content01" class="contentcell">cell01</div>
<div id="details01" class="details">here are details about cell01</div>
<div id="separator01" class="separator"> </div>
</div>
<div id="contentwrapper02">
<div id="content02" class="contentcell">cell02</div>
<div id="details02" class="details">here are details about cell02</div>
<div id="separator02" class="separator"></div>
</div>
<div id="contentwrapper03">
<div id="content03" class="contentcell">cell03</div>
<div id="details03" class="details">here are details about cell03</div>
<div id="separator03" class="separator"></div>
</div>
<div id="contentwrapper04">
<div id="content04" class="contentcell">cell04</div>
<div id="details04" class="details">here are details about cell04</div>
<div id="separator04" class="separator"></div>
</div>
<div id="contentwrapper05">
<div id="content05" class="contentcell">cell05</div>
<div id="details05" class="details">here are details about cell05</div>
<div id="separator05" class="separator"></div>
</div>
<div id="contentwrapper06">
<div id="content06" class="contentcell">cell06</div>
<div id="details06" class="details">here are details about cell06</div>
<div id="separator06" class="separator"></div>
</div>
<div style="clear:both;"></div><!-- to prevent parent collapse -->
</div>
</body>
</html>
User ,
if you give as regular position be default , it pushes the other contents definetly down as they come in squence.
Change the hidden divs position to absolute so that it will go out of sequence and you can position at anywhere on the page by top and left property.
get the offset of the div you want next to...
http://api.jquery.com/offset/
it will have top and left property , use those property's and position next to them.
let me know if you need anything else.
give a bigger z-index for the hidden divs.
What about showing the details div with position: absolute, on top of everything else? (See here, the code's a little messy but you get the idea).
I partially figured it out, but the logic may be very clunky. I basically walk left by 100px from the width of the container div until I find a content div. Plus it doesn't work in IE8, because IE is not getting the same results from jQuery's offset() or position() as firefox, it always reports "19". So in IE, I can never get a Y-coordinate value. I'm too sleepy now to work on this anymore today. If someone can lend a hand or tell me how to improve the javascript that would be cool.
Here is the working code for Firefox (I changed javascript and css of the detail divs, compared to original question):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#overallwrapper{
background: #CCCCCC;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin-top: 5px;
}
.contentcell{
border: 2px solid blue;
padding: 4px;
float: left;
width: 200px;
}
.separator{
clear:both;
display: none;
}
.details{
background:lightgreen;
border: 2px solid green;
display:none;
clear:both;
}
</style>
<script type="text/javascript">
function showDetails(contentid){
//first, reset all highlights and close any open content divs
$("#overallwrapper .contentcell").css("border","2px solid blue");
$(".details").css("display","none");
$(".separator").css("display","none");
//now highlight the clicked div and reveal its content div
//first, figure out which separator to display.
//1.get the y-pos from the clicked element, this gives y-coord of the row
contentClicked = "#content"+contentid;
var clickedoffset = $(contentClicked).offset();
var ypos = clickedoffset.top;
var wrapperwidth = $("#overallwrapper").width();
for (var xpos=wrapperwidth; xpos>0; xpos-=100){
var elematpos = document.elementFromPoint(xpos, ypos);
var elematposid = elematpos.id;
if (elematposid.substring(0,7) == "content") {
var lastcontentdivID = elematposid.substring(7);
break;
}
}
$(contentClicked).css("border","2px solid green");
var detailsON = "#details"+contentid;
$(detailsON).css("display","block");
var lastidonscreen = "#content"+lastcontentdivID;
$(detailsON).insertAfter(lastidonscreen);
}
</script>
</head>
<body>
<div id="overallwrapper">
<div id="contentwrapper01">
<div id="content01" class="contentcell">cell01</div>
<div id="separator01" class="separator"> </div>
<div id="details01" class="details">here are details about cell01</div>
</div>
<div id="contentwrapper02">
<div id="content02" class="contentcell">cell02</div>
<div id="separator02" class="separator"></div>
<div id="details02" class="details">here are details about cell02</div>
</div>
<div id="contentwrapper03">
<div id="content03" class="contentcell">cell03</div>
<div id="separator03" class="separator"></div>
<div id="details03" class="details">here are details about cell03</div>
</div>
<div id="contentwrapper04">
<div id="content04" class="contentcell">cell04</div>
<div id="separator04" class="separator"></div>
<div id="details04" class="details">here are details about cell04</div>
</div>
<div id="contentwrapper05">
<div id="content05" class="contentcell">cell05</div>
<div id="separator05" class="separator"></div>
<div id="details05" class="details">here are details about cell05</div>
</div>
<div id="contentwrapper06">
<div id="content06" class="contentcell">cell06</div>
<div id="separator06" class="separator"></div>
<div id="details06" class="details">here are details about cell06</div>
</div>
<div style="clear:both;"></div><!-- to prevent parent collapse -->
</div>
</body>
</html>
EDIT:
Blasted IE. I just can't trust it to determine screen coordinates. I got it working though, but only for Firefox. again IE is trying to drive me insane by not handling insertAfter properly. arrgh! here is the final code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#overallwrapper{
background: #CCCCCC;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin-top: 5px;
}
.contentwrapper{
}
.contentcell{
padding: 4px;
float: left;
width: 200px;
height: 100px;
border: 2px solid blue;
}
.separator{
clear:both;
display: none;
}
.details{
background:lightgreen;
border: 2px solid green;
display:none;
clear:both;
}
</style>
<script type="text/javascript">
function showDetails(contentid){
//first, reset all highlights and close any open content divs
$("#overallwrapper .contentcell").css("border","2px solid blue");
$(".details").css("display","none");
$(".separator").css("display","none");
var contentClicked = "#content"+contentid;
var thisypos = $(contentClicked).offset().top;
var nextdivid = contentClicked;
var countid = contentid;
do
{
var prevdivid = nextdivid;
var nextcontentid = (countid * 1) + 1;
var nextcontentid = '' + nextcontentid;
if ( nextcontentid.length < 2)
{ nextcontentid = "0" + nextcontentid; }
nextdivid = "#content" + nextcontentid;
if ( $(nextdivid).length ) {
var nextypos = $(nextdivid).offset().top;
countid++;
} else {
break;
}
}
while (thisypos == nextypos);
$(contentClicked).css("border","2px solid green");
var detailsON = "#details"+contentid;
$(detailsON).css("display","block");
$(detailsON).insertAfter(prevdivid);
}
</script>
</head>
<body>
<div id="overallwrapper">
<div id="contentwrapper01" class="contentwrapper">
<div id="content01" class="contentcell">cell01</div>
<div id="separator01" class="separator"> </div>
<div id="details01" class="details">here are details about cell01</div>
</div>
<div id="contentwrapper02" class="contentwrapper">
<div id="content02" class="contentcell">cell02</div>
<div id="separator02" class="separator"></div>
<div id="details02" class="details">here are details about cell02</div>
</div>
<div id="contentwrapper03" class="contentwrapper">
<div id="content03" class="contentcell">cell03</div>
<div id="separator03" class="separator"></div>
<div id="details03" class="details">here are details about cell03</div>
</div>
<div id="contentwrapper04" class="contentwrapper">
<div id="content04" class="contentcell">cell04</div>
<div id="separator04" class="separator"></div>
<div id="details04" class="details">here are details about cell04</div>
</div>
<div id="contentwrapper05" class="contentwrapper">
<div id="content05" class="contentcell">cell05</div>
<div id="separator05" class="separator"></div>
<div id="details05" class="details">here are details about cell05</div>
</div>
<div id="contentwrapper06" class="contentwrapper">
<div id="content06" class="contentcell">cell06</div>
<div id="separator06" class="separator"></div>
<div id="details06" class="details">here are details about cell06</div>
</div>
<div style="clear:both;"></div><!-- to prevent parent collapse -->
</div>
</body>
</html>