Dynamically Added HTML With Animated Positioning
Question
Ok, this is quite a tedious one.
Essentially, I have a file, "thedot". My PHP script reads from this file and splits it out into the 3 sections, called dots. It then renders the dots to the page, in rows of three, formatted with CSS and filled with the content from the file.
Easy enough so far. But, these dots are weirdly animated. They are black normally, you can't see their content. When you hover over them, they expand, and change colour so that you can. My problem is that when I render them out, hovering over each one causes all the others to move.
I have tried: a) Using position:fixed on the dots and using the PHP to assign them specific positions. This didn't work since hovering over them caused them to expand from the top left corner, when I need them to expand from the centre. b) Using individual tables for each row. This still pushed the rest down. c) Using auto margins. This had no effect.
Live site (looking hideous) at tuxnet.co.uk/dots/browse
Example of intended effect (only one, not a column of them): tuxnet.co.uk/dots/dot?dot=18668
Cheers,
Freddy.
PS When hovering over a dot in a row, it is okay if the other two members of that row are moved horizontally, as in the single row example.
2 answers
solution1
0 2013-07-08 17:43:22
This doesn't work completely as per your requirement but hovering on Dot doesn't shift the dots of other rows. You will need to make more changes to work as per your expectation.
<div><!-- first Row -->
<div class="dot one" style="margin: auto;">test</div>
<div class="dot two" style="margin: auto;">test</div>
<div class="dot three" style="margin: auto;">test</div>
</div>
<div><!-- second Row -->
<div class="dot one" style="margin: auto;">test</div>
<div class="dot two" style="margin: auto;">test</div>
<div class="dot three" style="margin: auto;">test</div>
</div>
solution2
0 ACCPTED 2013-07-08 17:43:27
I'm not sure if this answer makes any sense, but I'll take a swing.
I would try using position:relative on the <td> tags. Then use position:absolute on the child dots.
position:absolute allows an element to position itself either according to the next parent element with position:absolute/relative or to <html> if it cannot find any parent of that nature. Because you would be using position:absolute , you should not run into problems with elements being "pushed" by other elements; however, you could run into some overlapping issues (which can be solved easily using z-index).
I hope that helps!
EDIT: I fiddled with your css file linked to your demo page. Let me know if this is what you were looking for. The only changes made were in td and .dot
td {
display: table-cell;
vertical-align: middle;
text-align: center;
position:relative;
height:70px;
width:70px;
margin:0;
padding:0;
}
.dot {
position:absolute;
top:0;
left:0;
z-index:0;
font-family: "courier new";
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #000000;
color: #000000;
width: 70px;
height: 70px;
max-width: 70px;
max-height: 70px;
border-radius: 50%;
overflow: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.dot:hover {
width: 140px;
height: 140px;
max-width: 140px;
max-height: 140px;
top:-35px;
left:-35px;
z-index:1;
}
.one:hover {
background-color: #AA11FF;
}
.two:hover {
background-color: #11AAFF;
}
.three:hover {
background-color: #FFAA11;
}
.onedex {
background-color: #AA11FF;
}
.twodex {
background-color: #11AAFF;
}
.threedex {
background-color: #FFAA11;
}
.footer {
font-size: 10;
font-family: 'courier new';
position: fixed;
bottom: 15px;
width: 100px;
left: 50%;
margin: 0 0 0 -50px;
text-align: center;
}
.header {
font-size: 30;
font-family: 'courier new';
position: fixed;
top: 25%;
width: 50%;
left: 50%;
margin: 0 0 0 -25%;
text-align: center;
}
.sharer {
font-size: 20;
font-family: 'courier new';
position: fixed;
bottom: 25%;
width: 50%;
left: 50%;
margin: 0 0 0 -25%;
text-align: center;
}
input[type=text] {
width: 150px;
height: 30px;
border: none;
font-family: "courier new";
font-size: 20px;
border-bottom: 1px solid #000;
text-align: center;
outline: none;
}
input[type=submit] {
width: 100px;
height: 30px;
background-color: #FFFFFF;
color: #000000;
font-family: "courier new";
font-size: 20px;
border: 1px solid #000;
text-align: center;
outline: none;
}
input[type=submit]:hover {
border: 1px solid #11AAFF;
color: #11AAFF;
}
.dotstatic {
font-family: "courier new";
display: table-cell;
vertical-align: middle;
text-align: center;
color: #000000;
width: 200px;
height: 200px;
border-radius: 50%;
}
.error {
height: 20px;
font-size: 15px;
font-family: "courier new";
color: #E01B1B;
}
.divider {
height: 1px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
width: 150px;
opacity: 0.7;
background-color: grey;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.