Through the years I already found a lot of answers over here, but now I'm really stuck on something and writing my first posted question ever!
I am making a website with some graphs. The background of the graph is an image showing the x and y-axis. I am drawing all the dots using Javascript and positioning them based on data out of a .txt-file. That is all working (yay!), but... here's my problem:
I've got 15 people who answered in 7 graphs. When you click on a dot from person1 in graph1, I want this dot and all the dots from this person in the other graphs to become bigger. All the dots have 2 classes: .circle and .circle[number] (each circle[number] appears in every graph, so the [number] is the person ID). So I though adding the class .big to .circle1 when clicked would do the trick, but I for some reason the class is never added.
I tried all my stuff that usually works, also tried a lot of answers I found over here and when I try this on for instance the title of my page it is working. So I have a feeling the problem lies with the dots... I already made sure that the dots are above the image, so that is not the problem. And when I style the dot with an hover it does know on which one I'm hovering and makes it bigger. Also tried adding some HTML in the divs, but still not working.
I'm drawing the dots using Javascript in HTML like this:
<div class="circle circle0" style="position: absolute; left: 275.988px; top: 165.559px;"></div>
<div class="circle circle1" style="position: absolute; left: 231.204px; top: 141.898px;"></div>
<div class="circle circle2" style="position: absolute; left: 228.308px; top: 138.01px;"></div>
etc... (in every graph, so 7 times but every time different positions based on the data)
.circle {
border-width: 2px;
border-style: solid;
border-color: black;
border-radius: 50%;
width: 10px;
height: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
z-index: 999;
}
An example of what is not working (only on the dots, when using a title it is working):
$(".circle").on("click",function(){
$(".circle").addClass("big");
});
Does anyone have an idea of why this is not working and how it can work?
Thanks!
ANSWER: There was nothing wrong with the code, I just had to move my code a level higher (stupid! Sometimes it's so simple..)
You're missing the "big" class in your CSS, so that might be one reason it's not working. Here's an example of it working with your code and the class added:
$(document).ready(function() {
$(".circle0").on("click",function(){
$(".circle0").toggleClass("big");
});
$(".circle1").on("click",function(){
$(".circle1").toggleClass("big");
});
$(".circle2").on("click",function(){
$(".circle2").toggleClass("big");
});
});
.circle {
border-width: 2px;
border-style: solid;
border-color: black;
border-radius: 50%;
width: 10px;
height: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
z-index: 999;
}
.big {
width: 15px;
height: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle circle0" style="position: absolute; left: 275.988px; top: 165.559px;"></div>
<div class="circle circle1" style="position: absolute; left: 231.204px; top: 141.898px;"></div>
<div class="circle circle2" style="position: absolute; left: 228.308px; top: 138.01px;"></div>
Related
I am working on making a Google Chrome extension. Part of this extension injects some HTML into whatever webpage it is loaded with. That HTML is displayed supposed to be displayed on top of the rest of the HTML. The problem I am having is when I load some pages I can not see the injected HTML while on other pages it does show up. I did some research and tried setting the z-index to the maximum value of 2147483647 based on this post. Even when I did that, on some of the webpages it still did not show up. I am wondering if there is a way I can get the HTML to show up. I looked at the styles on the pages and I might have missed something but I did not see any z-index styles.
The following code is:
#reading-lines-injected {
position: fixed;
z-index: 2147483647;
width: 100%;
}
#top-bar-reading-line, #bottom-bar-reading-line {
position: relative;
height: 20px;
background-color: black;
opacity: 70%;
}
#gap-reading-line {
position: relative;
height: 15px;
}
<div id="reading-lines-injected">
<div id="top-bar-reading-line"></div>
<div id="gap-reading-line"></div>
<div id="bottom-bar-reading-line"></div>
</div>
Some of the webpages that don't display the HTML: digitalocean.com, schoology.com, hashbangcode.com. It does work on [stackoverflow.com5.
Thank you for all of your answers.
Just for future reference, evolutionxbox said that when there is no position applied the element might get pushed off of the screen. To prevent that I just added top:0 to the #reading-lines-injected div.
#reading-lines-injected {
position: fixed;
z-index: 2147483647;
width: 100%;
top: 0;
}
#top-bar-reading-line, #bottom-bar-reading-line {
position: relative;
height: 20px;
background-color: black;
opacity: 70%;
}
#gap-reading-line {
position: relative;
height: 15px;
}
<div id="reading-lines-injected">
<div id="top-bar-reading-line"></div>
<div id="gap-reading-line"></div>
<div id="bottom-bar-reading-line"></div>
</div>
I have done successfully moved a image with arrow keys but now i want getting id behind the moved image. And here i want all div id when image overlap.
html
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<img id="image" src="http://placekitten.com/69/69" style="position:absolute;left:0; top:0; z-index: 1;" height="15" width="15">
css
body{background:yellow;}
#box2,
#box3,
#box4,
#box5 {
width: 50px;
height: 50px;
background: greenyellow;
position: absolute;
top: 50px;
left: 50px;
z-index: 2
}
#box3 {
top: 150px;
left: 150px;
}
#box4 {
top: 50px;
left: 250px;
}
Please check demostration link
https://jsfiddle.net/36y0ztn9/1/
Following up to my comments above,
document.elementFromPoint only gets the top most element - mozilla docs, which here is the image itself, so use a work around like setting display:none or pointer-events:none to the image to make the box as the top most elem and get the box Id. Then reset the value back.
Check this working fiddle, where I made some modifications to yours : https://jsfiddle.net/y6xsnc8h/1
Also Check this answer for a reusable function : https://stackoverflow.com/a/22428553/7314900
for getting id you can usedocument.querySelector('#idname) or document.getElementById('idname') in your JavaScript file.
So I know there are plenty of feeds about these issues and I've been through most of them yet I can't make it work. I get really lost with .js.
So I'm using very simple pop up windows that provide more contents on a topic by cicking on the title of the topic. I'm using a simple css code:
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
left: 20%;
top:25%;
width: 70%;
height: auto;
padding: 10px;
border: 6px solid #ed7d86;
background-color: white;
text-align: center;
z-index: 1002;
overflow: auto;
}
And html:
<div class="flex-item">
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='block';
document.getElementById('fade').style.display='block'">TITLE</a>
<div id="TITLE" class="white_content">Something else about TITLE.
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='none';
document.getElementById('fade').style.display='none'">Close</a></div>
</div>
This code works great until I try it on elements that are lower on the page in which case the box obviously continue showing at the set top and left position, which means that I have to scroll back up to see it. If I get rid of top and left conditions, I just end up with the box showing up randomly at some corner of the page.
I also want people to be able to leave the box just by clicking on the black_overlay area. Can anyone recommend a fix that would work with my code?
Ah well, not much success with my question. Wanted to let you know that I changed the position of the .white_content to fixed and it solved my problem for positioning. I'm still working on closing the window by clicking outside the box without changing all my code.
Im relatively new to Selenium and faced this particular issue while Scrolling inside a DIV.
I used the following code for Scrolling
< je.executeScript("arguments[0].scrollIntoView(true);", driver.findElement(By.id("rowOfTable_"+reset_on_dropdown_boundry))); >
[reset_on_dropdown_boundry-> is the row number in numerals,eg.rowOfTable_1, implemented a loop to navigate through the rows to get the data]
Now the problem that i face is while using the above piece of code even though the Scroll is working the alignment of the page changes the other button/dropdowns etc move due to which other automation actions on the same doesnt work.
Is there any other way to scroll through a div without causing any UI issues, tried with mouseActions , but the same didnt help.
Here is the DIV on which i am trying to perform the action,
<div class="slimScrollBar ui-draggable ui-draggable-handle" style="width: 8px; position: absolute; top: 0px; opacity: 1; border-radius: 8px; z-index: 99; right: 0px; height: 255.346px; display: none; background: rgb(124, 145, 151);"></div>
<div class="slimScrollRail" style="width: 8px; height: 100%; position: absolute; top: 0px; border-radius: 8px; opacity: 0.3; z-index: 90; right: 0px; display: none; background: rgb(144, 141, 141);"></div>
I am trying to display divs with some information after a client clicks on a small dot-like div (7x7px black background) pointing to a place on a map. It works but the distance between the dot-like div and the information div is different in every dot-information couple.
Here is the HTML/JS script. Please, don't mind that all the JavaScript and CSS are in the same file, it is done for the sake of simplicity and will be changed lately.
<html>
<head>
<meta charset="utf8" />
</head>
<body>
<div id="pointer_div"
onclick="getClickPosition(event)"
style="position:absolute; top:1px; left:1px; border: 1px solid black;
background-repeat: no-repeat; width: 1146px; height: 714px;" >
<div id="sofia"
onclick="showForecast('Sofia_381_178')"
style="position:relative; top: 381px; left: 178px;
background:black; width: 7px; height: 7px;" ></div>
<div id="plovdiv"
onclick="showForecast('Plovdiv_512_435')"
style="position:relative; top: 512px; left: 435px;
background:black; width: 7px; height: 7px;" ></div>
<div id="ruse"
onclick="showForecast('Ruse_77_662')"
style="position:relative; top: 77px; left: 662px;
background:black; width: 7px; height: 7px;" ></div>
<div id="result_data"
style="visibility:hidden; width:300px; height:100px;
border: 1px solid black; background:white;"/></div>
</div>
<script language="JavaScript">
function showForecast (strr) {
var splits = strr.split('_');
var xcoord = splits[2];
var ycoord = splits[1];
if (xcoord>810) xcoord= xcoord-300;
if (ycoord>610) ycoord= ycoord-100;
var resultDiv= document.getElementById("result_data");
resultDiv.style.visibility="visible";
resultDiv.style.position = "relative";
resultDiv.style.left = xcoord;
resultDiv.style.top = ycoord;
resultDiv.innerHTML = 'Forecast for: ' + splits[0];
};
</script>
</body>
</html>
So, when I click on div "plovdiv", info div appears some 30px below the dot-div, but when I click "ruse" the info div shows right below the dot. I checked both in Firefox and SeaMonkey browsers and they behave identically.
I tried to put the script in jsfiddle but it was showing all the info divs at the top left of the page and I couldn't fix that. Here it is anyway, if anyone is interested jsfiddle.
The coordinates for the info divs are passed to the JS function in a string, and they are the same as those of the dot divs (one of the reasons I kept the css in the html file). I hope someone with better understanding of JS will be able to explain that.
It's because you are using position:relative on your divs, which moves them from the position they would be in by default. So (because divs are a block element) ruse would be under plovdiv which would be under sofia, then they are moved by the top and left values. Make them all position: absolute and they'll behave uniformly.
Here's your code working in jsfiddle(I added px units to your js): https://jsfiddle.net/wkz6dj04/5/
#sofia {
position: absolute;
top: 381px;
left: 178px;
background: black;
width: 7px;
height: 7px;
}
#plovdiv {
position: absolute;
top: 512px;
left: 435px;
background: black;
width: 7px;
height: 7px;
}
#ruse {
position: absolute;
top: 77px;
left: 662px;
background: black;
width: 7px;
height: 7px;
}
Here's the code working with the above modifications: https://jsfiddle.net/wkz6dj04/6/
If you want the gap back in, I suggest using margin-top on your #result_data like in this fiddle: https://jsfiddle.net/wkz6dj04/7/