I desperately need somebody to help me make my CSS slider autoplay - javascript

I have this css only slider and I need to make it autoplay.
I'm not too familiar with coding javascript so this is a rather challenging problem for me.
I'm aware that the Javascript will/may have to be written for this code, but I figure that someone out there can could help clarify this for me?
<div class="sliderContainer 6u">
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<img src="images/1.jpg" />
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<img src="images/2" />
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slide">
<img src="images/3.jpg" />
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
<li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
<label for="img-3" class="nav-dot" id="img-dot-3"></label>
<label for="img-4" class="nav-dot" id="img-dot-4"></label>
<label for="img-5" class="nav-dot" id="img-dot-5"></label>
<label for="img-6" class="nav-dot" id="img-dot-6"></label>
</li>
</ul>
Any help you can give me will be extremely helpful,
thanks


Since you have no markup to offer, I've created this:
Example snippet (pure css):
body {
background: #eee;
font-family: arial, helvetica, sans-serif;
margin: 50px auto;
padding: 0;
}
h1 {
font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;
font-size: 22px;
font-style: italic;
color: #4e4e4e;
text-align: center;
margin-bottom: -100px;
}
#wrapper {
width: 400px !important;
margin: 0 auto;
overflow: hidden;
}
#wrapper {
perspective: 2500;
-webkit-perspective: 2500;
width: 800px;
margin: 200px auto 0 auto;
perspective-origin: 50% 150px;
-webkit-perspective-origin: 50% 150px;
transition: perspective, 1s;
-o-transition: -o-perspective, 1s;
-moz-transition: -moz-perspective, 1s;
-webkit-transition: -webkit-perspective, 1s;
}
#image:hover {
animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#-webkit-keyframes spin {
from {
transform: rotateY(0);
-o-transform: rotateY(0);
-ms-transform: rotateY(0);
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
to {
transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-webkit-transform: rotateY(-360deg);
}
}
#image {
margin: 0 auto;
height: 300px;
width: 400px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: spin 24s infinite linear;
-moz-animation: spin 24s infinite linear;
-o-animation: spin 24s infinite linear;
-webkit-animation: spin 24s infinite linear;
}
.image {
position: absolute;
height: 300px;
width: 400px;
border-radius: 25px;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
font-size: 20em;
color: #fff;
}
#image > .i1 {
transform: translateZ(485px);
-moz-transform: translateZ(485px);
-o-transform: translateZ(485px);
-ms-transform: translateZ(485px);
-webkit-transform: translateZ(485px);
}
#image > .i2 {
transform: rotateY(45deg) translateZ(485px);
-moz-transform: rotateY(45deg) translateZ(485px);
-o-transform: rotateY(45deg) translateZ(485px);
-ms-transform: rotateY(45deg) translateZ(485px);
-webkit-transform: rotateY(45deg) translateZ(485px);
}
#image > .i3 {
transform: rotateY(90deg) translateZ(485px);
-moz-transform: rotateY(90deg) translateZ(485px);
-o-transform: rotateY(90deg) translateZ(485px);
-ms-transform: rotateY(90deg) translateZ(485px);
-webkit-transform: rotateY(90deg) translateZ(485px);
}
#image > .i4 {
transform: rotateY(135deg) translateZ(485px);
-moz-transform: rotateY(135deg) translateZ(485px);
-o-transform: rotateY(135deg) translateZ(485px);
-ms-transform: rotateY(135deg) translateZ(485px);
-webkit-transform: rotateY(135deg) translateZ(485px);
}
#image > .i5 {
transform: rotateY(180deg) translateZ(485px);
-moz-transform: rotateY(180deg) translateZ(485px);
-o-transform: rotateY(180deg) translateZ(485px);
-ms-transform: rotateY(180deg) translateZ(485px);
-webkit-transform: rotateY(180deg) translateZ(485px);
}
#image > .i6 {
transform: rotateY(225deg) translateZ(485px);
-moz-transform: rotateY(225deg) translateZ(485px);
-o-transform: rotateY(225deg) translateZ(485px);
-ms-transform: rotateY(225deg) translateZ(485px);
-webkit-transform: rotateY(225deg) translateZ(485px);
}
#image > .i7 {
transform: rotateY(270deg) translateZ(485px);
-moz-transform: rotateY(270deg) translateZ(485px);
-o-transform: rotateY(270deg) translateZ(485px);
-ms-transform: rotateY(270deg) translateZ(485px);
-webkit-transform: rotateY(270deg) translateZ(485px);
}
#image > .i8 {
transform: rotateY(315deg) translateZ(485px);
-moz-transform: rotateY(315deg) translateZ(485px);
-o-transform: rotateY(315deg) translateZ(485px);
-ms-transform: rotateY(315deg) translateZ(485px);
-webkit-transform: rotateY(315deg) translateZ(485px);
}
img {
border-radius: 25px;
<body>
<h3>(hover over to pause)</h3>
<div id="wrapper">
<div id="image">
<div class="image i1">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Noe-in-leaves.jpg">
</div>
<div class="image i2">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-sitting.jpg">
</div>
<div class="image i3">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-noodles.jpg">
</div>
<div class="image i4">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-smiling.jpg">
</div>
<div class="image i5">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Girls-in-leaves.jpg">
</div>
<div class="image i6">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Natalie-smiling.jpg">
</div>
<div class="image i7">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-sleeping.jpg">
</div>
<div class="image i8">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Sledding.jpg">
</div>
</div>
</div>
</body>
I would like to draw attention to this hover state:
#image:hover {
animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
since it is what is actually 'pausing' the animation.


I think you should study about setTimeout and SetInterval of Javascript.
Hope this helps.

Related

Putting html/css animated element on top of header

I have this:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 2 seconds
}
.downArrow{
background-color: transparent;
text-align: center;
}
.bounce {
background-color: transparent;
-moz-animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
<div id="headerr" class="home">
<div class="w3-content w3-section">
<img class="mySlides" src="https://images.unsplash.com/photo-1629199022827-eede3c3df471?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%">
<!-- Learn More! -->
<!-- <button class="button ahref-learn-more" type="button">Learn More!</button> -->
<div class="downArrow bounce">
<img width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yODUsMTEuMjg0TDE2LDE5LjU3MWwtOC4yODUtOC4yODhjLTAuMzk1LTAuMzk1LTEuMDM0LTAuMzk1LTEuNDI5LDAgIGMtMC4zOTQsMC4zOTUtMC4zOTQsMS4wMzUsMCwxLjQzbDguOTk5LDkuMDAybDAsMGwwLDBjMC4zOTQsMC4zOTUsMS4wMzQsMC4zOTUsMS40MjgsMGw4Ljk5OS05LjAwMiAgYzAuMzk0LTAuMzk1LDAuMzk0LTEuMDM2LDAtMS40MzFDMjUuMzE5LDEwLjg4OSwyNC42NzksMTAuODg5LDI0LjI4NSwxMS4yODR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iRXhwYW5kX01vcmUiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=" />
</div>
</div>
</div>
however, right on the image, I want that dancing animated arrow instead of below it. how can I do this? I tried forcing it with the em using css, but it doesn't work, and just keeps everything on the left side, as well as doesn't adjust the height :
left: 10em;
bottom: 10em;
but it doesn't make any difference. thx 4 the help

If you want it in the middle:
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 2 seconds
}
.sec {
position: relative;
}
.downArrow{
position: absolute;
top: 50%;
left: 45%;
background-color: transparent;
text-align: center;
}
.bounce {
background-color: transparent;
-moz-animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
<div id="headerr" class="home">
<div class="w3-content w3-section sec">
<img class="mySlides" src="https://images.unsplash.com/photo-1629199022827-eede3c3df471?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%">
<!-- Learn More! -->
<!-- <button class="button ahref-learn-more" type="button">Learn More!</button> -->
<div class="downArrow bounce">
<img width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yODUsMTEuMjg0TDE2LDE5LjU3MWwtOC4yODUtOC4yODhjLTAuMzk1LTAuMzk1LTEuMDM0LTAuMzk1LTEuNDI5LDAgIGMtMC4zOTQsMC4zOTUtMC4zOTQsMS4wMzUsMCwxLjQzbDguOTk5LDkuMDAybDAsMGwwLDBjMC4zOTQsMC4zOTUsMS4wMzQsMC4zOTUsMS40MjgsMGw4Ljk5OS05LjAwMiAgYzAuMzk0LTAuMzk1LDAuMzk0LTEuMDM2LDAtMS40MzFDMjUuMzE5LDEwLjg4OSwyNC42NzksMTAuODg5LDI0LjI4NSwxMS4yODR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iRXhwYW5kX01vcmUiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=" />
</div>
</div>
</div>

You can work with absolute positioning. That way you can position your arrow relatively to the parent.
Here, I've marked the w3-content class to be relative and downArrow to be absolutely positioned, relatively to w3-content. With left: 50% the image is moved to start at the horizontal center of the container, with margin-left: -20px the image is moved back half of its width (40px) to have it perfectly in the center, and with bottom: 10px it's positioned 10px above the bottom of the container.
I've also added a red border to make it better visible in this example.
.w3-content {
position: relative;
}
.downArrow {
position: absolute;
left: 50%;
margin-left: -20px;
bottom: 10px;
border: 1px solid red;
}
<div id="headerr" class="home">
<div class="w3-content w3-section">
<img class="mySlides" src="https://images.unsplash.com/photo-1629199022827-eede3c3df471?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%">
<div class="downArrow bounce">
<img width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yODUsMTEuMjg0TDE2LDE5LjU3MWwtOC4yODUtOC4yODhjLTAuMzk1LTAuMzk1LTEuMDM0LTAuMzk1LTEuNDI5LDAgIGMtMC4zOTQsMC4zOTUtMC4zOTQsMS4wMzUsMCwxLjQzbDguOTk5LDkuMDAybDAsMGwwLDBjMC4zOTQsMC4zOTUsMS4wMzQsMC4zOTUsMS40MjgsMGw4Ljk5OS05LjAwMiAgYzAuMzk0LTAuMzk1LDAuMzk0LTEuMDM2LDAtMS40MzFDMjUuMzE5LDEwLjg4OSwyNC42NzksMTAuODg5LDI0LjI4NSwxMS4yODR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iRXhwYW5kX01vcmUiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=" />
</div>
</div>
</div>
Now add your animation again and you should be fine.

check this code
<div id="headerr" class="home">
<div class="w3-content w3-section" style="display: flex;">
<img class="mySlides" src="https://images.unsplash.com/photo-1629199022827-eede3c3df471?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" style="width:100%">
<!-- Learn More! -->
<!-- <button class="button ahref-learn-more" type="button">Learn More!</button> -->
<div class="bounce1">
<img class="bounce1"width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yODUsMTEuMjg0TDE2LDE5LjU3MWwtOC4yODUtOC4yODhjLTAuMzk1LTAuMzk1LTEuMDM0LTAuMzk1LTEuNDI5LDAgIGMtMC4zOTQsMC4zOTUtMC4zOTQsMS4wMzUsMCwxLjQzbDguOTk5LDkuMDAybDAsMGwwLDBjMC4zOTQsMC4zOTUsMS4wMzQsMC4zOTUsMS40MjgsMGw4Ljk5OS05LjAwMiAgYzAuMzk0LTAuMzk1LDAuMzk0LTEuMDM2LDAtMS40MzFDMjUuMzE5LDEwLjg4OSwyNC42NzksMTAuODg5LDI0LjI4NSwxMS4yODR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iRXhwYW5kX01vcmUiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=" />
</div>
</div>
</div>

Blur Filter In CSS Keyframe Animation Makes Animation Choppy(non smooth). How Can I achieve Smooth animation with blurr filter?

I just started using Css animation. I ran in to this problem. When I use blur filter the animation becomes really choppy but as I refresh the window it becomes slightly smoother and when I keep refreshing
it becomes more smoother. when I restart my Browser, It again shows choppy animation. Please Help Me solve this problem.
#keyframes slide-blur-translation {
0% {
-webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0) scaleY(1) scaleX(1);
transform: translateY(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
CODE:
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
sleep(3000).then(() => {
document.getElementsByClassName('element')[0].setAttribute('id', 'visible')
for (i = 1; i < 9; i++) {
document.getElementsByClassName(`text${i}`)[0].setAttribute('style', `animation-delay:${0.07+(0.14*(i-1))}s;`)
document.getElementsByClassName(`text${i}`)[0].setAttribute('id', 'animation')
}
})
#hidden {
display: none;
}
#visible {
position: absolute;
}
.text {
display: block;
height: 100px;
}
.Sn {
float: left;
width: 100px;
}
.teamname {
width: 100px;
float: left;
}
.win {
width: 100px;
float: left;
}
.lose {
width: 100px;
float: left;
}
.draw {
width: 100px;
float: left;
}
.total {
width: 100px;
float: left;
}
#animation {
animation: slide-blur-translation 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
#keyframes slide-blur-translation {
0% {
-webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0) scaleY(1) scaleX(1);
transform: translateY(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
<div class="element" id='hidden'>
<div class='text1 row2'>
<div class='Sn Sn8'>Hello</div>
<div class='draw draw8'>123</div>
<div class='total total8'>Friends</div>
</div>
<div class='text2 row2'>
<div class='Sn Sn8'>HELLO</div>
<div class='draw draw8'>123</div>
<div class='total total8'>Friends</div>
</div>
<div class='text3 row2'>
<div class='Sn Sn8'>HELLO</div>
<div class='draw draw8'>123</div>
<div class='total total8'>Friends</div>
</div>
<div class='text4 row2'>
<div class='Sn Sn8'>HELLO</div>
<div class='draw draw8'>123</div>
<div class='total total8'>Friends</div>
</div>
<div class='text5 row2'>
<div class='Sn Sn8'>HELLO</div>
<div class='draw draw8'>123</div>
<div class='total total8'>Friends</div>
</div>
<div class='text6 row2'>
<div class='Sn Sn8'>HELLO</div>
<div class='draw draw8'>123</div>
<div class='total total8'>Friends</div>
</div>
<div class='text7 row2'>
<div class='Sn Sn8'>HELLO</div>
<div class='draw draw8'>123</div>
<div class='total total8'>Friends</div>
</div>
<div class='text8 row2'>
<div class='Sn Sn8'>HELLO</div>
<div class='draw draw8'>123</div>
<div class='total total8'>Friends</div>
</div>
</div>

CSS Pie Slices Unable To Hover

I have recently been trying to work on css pie menu. Everything works fine, except the hover doesn't work if the slices are more than 9 parts. For clearer picture, visit demo.
The following is my html:
<div class="menu">
<div class="menu-btn"><i class="fa fa-bars"></i></div>
</div>
<div class="menu-items">
<div class="menu-item">
<div class="menu-item-content active"><i class="fa fa-home"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-user"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-sliders"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-envelope"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-cog"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-archive"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-calendar"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-comments"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-suitcase"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-database"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-graduation-cap"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-newspaper-o"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-shopping-bag"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-send"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-support"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-question-circle-o"></i></div>
</div>
</div>
And this is my css:
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
html,
body {
color: #000;
}
.menu {
position: fixed;
left: -60px;
top: -60px;
z-index: 10;
width: 120px;
height: 120px;
border-radius: 50%;
border:0.01em solid #455A64;
background-color: #3F51B5;
cursor:pointer;
}
.menu .menu-btn {
position: absolute;
bottom: 30px;
right: 30px;
color:#fff;
font-size:20px;
transition:0.1s linear all;
}
.menu:hover .menu-btn{
font-size:24px;
right:28px;
bottom: 28px;
}
.menu-items {
position: fixed;
top: 100px;
left: 100px;
z-index: 9;
width: 200px;
height: 200px;
color:#fff;
background: transparent;
border-radius: 50%;
/*display:none;*/
}
.menu-item {
position: absolute;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 200px, 200px, 100px);
cursor:pointer;
}
.menu-item:nth-child(1) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu-item:nth-child(2) {
-webkit-transform: rotate(112.5deg);
-moz-transform: rotate(112.5deg);
-o-transform: rotate(112.5deg);
transform: rotate(112.5deg);
}
.menu-item:nth-child(3) {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu-item:nth-child(4) {
-webkit-transform: rotate(157.5deg);
-moz-transform: rotate(157.5deg);
-o-transform: rotate(157.5deg);
transform: rotate(157.5deg);
}
.menu-item:nth-child(5) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.menu-item:nth-child(6) {
-webkit-transform: rotate(202.5deg);
-moz-transform: rotate(202.5deg);
-o-transform: rotate(202.5deg);
transform: rotate(202.5deg);
}
.menu-item:nth-child(7) {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu-item:nth-child(8) {
-webkit-transform: rotate(247.5deg);
-moz-transform: rotate(247.5deg);
-o-transform: rotate(247.5deg);
transform: rotate(247.5deg);
}
.menu-item:nth-child(9) {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.menu-item:nth-child(10) {
-webkit-transform: rotate(292.5deg);
-moz-transform: rotate(292.5deg);
-o-transform: rotate(292.5deg);
transform: rotate(292.5deg);
}
.menu-item:nth-child(11) {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
.menu-item:nth-child(12) {
-webkit-transform: rotate(337.5deg);
-moz-transform: rotate(337.5deg);
-o-transform: rotate(337.5deg);
transform: rotate(337.5deg);
}
.menu-item:nth-child(13) {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.menu-item:nth-child(14) {
-webkit-transform: rotate(382.5deg);
-moz-transform: rotate(382.5deg);
-o-transform: rotate(382.5deg);
transform: rotate(382.5deg);
}
.menu-item:nth-child(15) {
-webkit-transform: rotate(405deg);
-moz-transform: rotate(405deg);
-o-transform: rotate(405deg);
transform: rotate(405deg);
}
.menu-item:nth-child(16) {
-webkit-transform: rotate(427.5deg);
-moz-transform: rotate(427.5deg);
-o-transform: rotate(427.5deg);
transform: rotate(427.5deg);
}
.menu-item-content {
position: absolute;
width: 200px;
height: 200px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 100px, 200px, 0px);
background-color: #1b458b;
-webkit-transform: rotate(22.5deg);
-moz-transform: rotate(22.5deg);
-o-transform: rotate(22.5deg);
transform: rotate(22.5deg);
}
.menu-item .menu-item-content i{
position:absolute;
top:12px;
left:77px;
font-size: 16px;
transform: rotate(180deg);
}
.menu-item .menu-item-content:hover, .menu-item .active {
background-color : #1976D2 !important;
}
If possible, there is another problem. If you can observe in the demo, after every 4 parts the border is missing. Please help me with these problems.

Change the menu-item class to
.menu-item {
position: absolute;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 138px, 100px, 100px);
cursor: pointer;
}
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
html,
body {
color: #000;
}
.menu {
position: fixed;
left: -60px;
top: -60px;
z-index: 10;
width: 120px;
height: 120px;
border-radius: 50%;
border: 0.01em solid #455A64;
background-color: #3F51B5;
cursor: pointer;
}
.menu .menu-btn {
position: absolute;
bottom: 30px;
right: 30px;
color: #fff;
font-size: 20px;
transition: 0.1s linear all;
}
.menu:hover .menu-btn {
font-size: 24px;
right: 28px;
bottom: 28px;
}
.menu-items {
position: fixed;
top: 100px;
left: 100px;
z-index: 9;
width: 200px;
height: 200px;
color: #fff;
background: transparent;
border-radius: 50%;
/*display:none;*/
}
.menu-item {
position: absolute;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 138px, 100px, 100px);
cursor: pointer;
}
.menu-item:nth-child(1) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu-item:nth-child(2) {
-webkit-transform: rotate(112.5deg);
-moz-transform: rotate(112.5deg);
-o-transform: rotate(112.5deg);
transform: rotate(112.5deg);
}
.menu-item:nth-child(3) {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu-item:nth-child(4) {
-webkit-transform: rotate(157.5deg);
-moz-transform: rotate(157.5deg);
-o-transform: rotate(157.5deg);
transform: rotate(157.5deg);
}
.menu-item:nth-child(5) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.menu-item:nth-child(6) {
-webkit-transform: rotate(202.5deg);
-moz-transform: rotate(202.5deg);
-o-transform: rotate(202.5deg);
transform: rotate(202.5deg);
}
.menu-item:nth-child(7) {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu-item:nth-child(8) {
-webkit-transform: rotate(247.5deg);
-moz-transform: rotate(247.5deg);
-o-transform: rotate(247.5deg);
transform: rotate(247.5deg);
}
.menu-item:nth-child(9) {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.menu-item:nth-child(10) {
-webkit-transform: rotate(292.5deg);
-moz-transform: rotate(292.5deg);
-o-transform: rotate(292.5deg);
transform: rotate(292.5deg);
}
.menu-item:nth-child(11) {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
.menu-item:nth-child(12) {
-webkit-transform: rotate(337.5deg);
-moz-transform: rotate(337.5deg);
-o-transform: rotate(337.5deg);
transform: rotate(337.5deg);
}
.menu-item:nth-child(13) {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.menu-item:nth-child(14) {
-webkit-transform: rotate(382.5deg);
-moz-transform: rotate(382.5deg);
-o-transform: rotate(382.5deg);
transform: rotate(382.5deg);
}
.menu-item:nth-child(15) {
-webkit-transform: rotate(405deg);
-moz-transform: rotate(405deg);
-o-transform: rotate(405deg);
transform: rotate(405deg);
}
.menu-item:nth-child(16) {
-webkit-transform: rotate(427.5deg);
-moz-transform: rotate(427.5deg);
-o-transform: rotate(427.5deg);
transform: rotate(427.5deg);
}
.menu-item-content {
position: absolute;
width: 200px;
height: 200px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
clip: rect(0px, 100px, 200px, 0px);
background-color: #1b458b;
-webkit-transform: rotate(22.5deg);
-moz-transform: rotate(22.5deg);
-o-transform: rotate(22.5deg);
transform: rotate(22.5deg);
}
.menu-item .menu-item-content i {
position: absolute;
top: 12px;
left: 77px;
font-size: 16px;
transform: rotate(180deg);
}
.menu-item .menu-item-content:hover,
.menu-item .active {
background-color: #1976D2 !important;
}
<div class="menu">
<div class="menu-btn"><i class="fa fa-bars"></i></div>
</div>
<div class="menu-items">
<div class="menu-item">
<div class="menu-item-content active"><i class="fa fa-home"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-user"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-sliders"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-envelope"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-cog"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-archive"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-calendar"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-comments"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-suitcase"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-database"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-graduation-cap"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-newspaper-o"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-shopping-bag"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-send"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-support"></i></div>
</div>
<div class="menu-item">
<div class="menu-item-content"><i class="fa fa-question-circle-o"></i></div>
</div>
</div>

window.getSelection().getRangeAt(0) innerHTML without breaking nodes

I'm working on a JavaScript extension that is supposed to wrap the selected text somehow and send it to my server. The "wrapping" is done so that the server can identify the exact position of the highlighted text, even if there were duplicates.
I followed this link, How to change CSS of selected text using Google Chrome Extension, to be able to obtain the selected text. Afterwards I followed this approach, How to get selected html text with javascript?, specifically the chosen answer, to obtain the innerHTML. The problem is that when the selection is across different divs, it breaks the DOM, or just as zyklus said in that answer "WILL have side effects from breaking nodes in half and creating an extra span".
As an example,
<div id="IntroDiv">
<p>
<img src="http://localhost:9000/Theme/Images/Intro/logo.png">
<br><br>
A neat th<f5e975aa551d1ae4e91e8ce9><div id="IntroDiv"><p>eme for start-ups and small corporations.
</p>
</div>
<div id="ProjectsSlider">
<div id="ProjectsSliderContent">
<p class="Title">Projects</p>
<p class="Subtitle">Samples O</p></div></div></f5e975aa551d1ae4e91e8ce9>eme for start-ups and small corporations.
</p>
</div>
<div id="ProjectsSlider">
<div id="ProjectsSliderContent">
<p class="Title">Projects</p>
<p class="Subtitle">Samples Of Our Work</p>
<div id="SliderContainer">
<div class="LeftArrow"></div>
<div class="RightArrow"></div>
<div class="ThreeD swiper-container stop-swiping">
<div class="swiper-wrapper swiper-no-swiping" style="width: 2365px; height: 285px; transform: translate3d(-430px, 0px, 0px); -webkit-transform: translate3d(-430px, 0px, 0px); transition-duration: 0s; -webkit-transition-duration: 0s;"><div class="swiper-slide swiper-slide-duplicate" style="width: 215px; height: 285px; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, -336px) rotateX(0deg) rotateY(-75deg); -webkit-transform: translate3d(0px, 0px, -336px) rotateX(0deg) rotateY(-75deg); z-index: -2; background-image: url(http://placehold.it/215x270/);">Project 3</div><div class="swiper-slide swiper-slide-duplicate" style="width: 215px; height: 285px; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, -224px) rotateX(0deg) rotateY(-50deg); -webkit-transform: translate3d(0px, 0px, -224px) rotateX(0deg) rotateY(-50deg); z-index: -1; background-image: url(http://placehold.it/215x270/);">Project 4</div><div class="swiper-slide swiper-slide-duplicate swiper-slide-visible swiper-slide-active" style="width: 215px; height: 285px; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, -112px) rotateX(0deg) rotateY(-25deg); -webkit-transform: translate3d(0px, 0px, -112px) rotateX(0deg) rotateY(-25deg); z-index: 0; background-image: url(http://placehold.it/215x270/);">Project 5</div> <!-- Add your slides here. You're free to have different styles or content -->
<div class="swiper-slide swiper-slide-visible" style="width: 215px; height: 285px; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg); -webkit-transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg); z-index: 1; background-image: url(http://placehold.it/215x270/);">Project 1</div>
<div class="swiper-slide swiper-slide-visible" style="width: 215px; height: 285px; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, -112px) rotateX(0deg) rotateY(25deg); -webkit-transform: translate3d(0px, 0px, -112px) rotateX(0deg) rotateY(25deg); z-index: 0; background-image: url(http://placehold.it/215x270/);">Project 2</div>
<div class="swiper-slide" style="width: 215px; height: 285px; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, -224px) rotateX(0deg) rotateY(50deg); -webkit-transform: translate3d(0px, 0px, -224px) rotateX(0deg) rotateY(50deg); z-index: -1; background-image: url(http://placehold.it/215x270/);">Project 3</div>
<div class="swiper-slide" style="width: 215px; height: 285px; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, -336px) rotateX(0deg) rotateY(75deg); -webkit-transform: translate3d(0px, 0px, -336px) rotateX(0deg) rotateY(75deg); z-index: -2; background-image: url(http://placehold.it/215x270/);">Project 4</div>
<div class="swiper-slide" style="width: 215px; height: 285px; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, -448px) rotateX(0deg) rotateY(100deg); -webkit-transform: translate3d(0px, 0px, -448px) rotateX(0deg) rotateY(100deg); z-index: -3; background-image: url(http://placehold.it/215x270/);">Project 5</div>
<div class="swiper-slide swiper-slide-duplicate" style="width: 215px; height: 285px; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, -560px) rotateX(0deg) rotateY(125deg); -webkit-transform: translate3d(0px, 0px, -560px) rotateX(0deg) rotateY(125deg); z-index: -4; background-image: url(http://placehold.it/215x270/);">Project 1</div><div class="swiper-slide swiper-slide-duplicate" style="width: 215px; height: 285px; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, -672px) rotateX(0deg) rotateY(150deg); -webkit-transform: translate3d(0px, 0px, -672px) rotateX(0deg) rotateY(150deg); z-index: -5; background-image: url(http://placehold.it/215x270/);">Project 2</div><div class="swiper-slide swiper-slide-duplicate" style="width: 215px; height: 285px; transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate3d(0px, 0px, -784px) rotateX(0deg) rotateY(175deg); -webkit-transform: translate3d(0px, 0px, -784px) rotateX(0deg) rotateY(175deg); z-index: -6; background-image: url(http://placehold.it/215x270/);">Project 3</div></div>
<div class="SeePhotos"></div>
</div>
</div>
<ul id="ThreeDSwiperBullets"><li id="0" class="active"></li><li id="1"></li><li id="2"></li><li id="3"></li><li id="4"></li></ul> <!-- Where slider bullets are automatically added according to the slider by JavaScript, Index.js file -->
</div>
</div>
I use f5e975aa551d1ae4e91e8ce9 here to identify the text, just as any kind of unique text that most probably will not exist in a usual web page. As you see above, "IntroDiv" is there twice, as well as "ProjectsSlider". That's the same part of the page before calling any functions.
<div id="IntroDiv">
<p>
<img src="Theme/Images/Intro/logo.png">
<br/><br/>
A neat theme for start-ups and small corporations.
</p>
</div>
<div id="ProjectsSlider">
<div id="ProjectsSliderContent">
<p class="Title">Projects</p>
<p class="Subtitle">Samples Of Our Work</p>
<div id="SliderContainer">
<div class="LeftArrow"></div>
<div class="RightArrow"></div>
<div class="ThreeD swiper-container stop-swiping">
<div class="swiper-wrapper swiper-no-swiping"> <!-- Add your slides here. You're free to have different styles or content -->
<div class="swiper-slide" style="background-image:url('http://placehold.it/215x270/');">Project 1</div>
<div class="swiper-slide" style="background-image:url('http://placehold.it/215x270/');">Project 2</div>
<div class="swiper-slide" style="background-image:url('http://placehold.it/215x270/');">Project 3</div>
<div class="swiper-slide" style="background-image:url('http://placehold.it/215x270/');">Project 4</div>
<div class="swiper-slide" style="background-image:url('http://placehold.it/215x270/');">Project 5</div>
</div>
<div class="SeePhotos"></div>
</div>
</div>
<ul id="ThreeDSwiperBullets"></ul> <!-- Where slider bullets are automatically added according to the slider by JavaScript, Index.js file -->
</div>
</div>
That's my code.
//save_last_element.js
document.body.addEventListener('contextmenu', function(e) {
LAST_SELECTION = window.getSelection().getRangeAt(0);
}, false);
//script.js
if (LAST_SELECTION) {
var mySelection = LAST_SELECTION.cloneRange();
var selectionContents = mySelection.cloneContents();
var div = document.createElement("f5e975aa551d1ae4e91e8ce9");
div.appendChild(selectionContents);
mySelection.insertNode(div);
}
Is there a way to avoid messing up the DOM? Can I somehow identify the position of the selected text by a completely different approach?

So, after a lot of trying, I could do it.
var myAnchorNodeValue = window.getSelection().anchorNode.nodeValue;
var myAnchorOffset = window.getSelection().anchorOffset
var myFocusOffset = window.getSelection().focusOffset
var myFocusNodeLength = window.getSelection().focusNode.nodeValue.length;
window.getSelection().anchorNode.nodeValue = myAnchorNodeValue.slice(0, myAnchorOffset) + "[IDENTIFY]" + myAnchorNodeValue.slice(myAnchorOffset);
var myFocusNodeValue = window.getSelection().focusNode.nodeValue;
if(window.getSelection().focusNode.nodeValue.length - myFocusNodeLength > 0) {
myFocusOffset += window.getSelection().focusNode.nodeValue.length - myFocusNodeLength;
}
window.getSelection().focusNode.nodeValue = myFocusNodeValue.slice(0, myFocusOffset) + "[/IDENTIFY]" + myFocusNodeValue.slice(myFocusOffset);
LAST_SELECTION = window.getSelection().getRangeAt(0);
myDocument = document.documentElement.innerHTML;
That worked perfectly.

To extract the selected text, you could walk the selection for text nodes only and concatenate them.
var content = window.getSelection().getRangeAt(0).cloneContents();
var treeWalker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT);
var text = '';
while (treeWalker.nextNode()) {
text = text.concat(treeWalker.currentNode.nodeValue);
}
console.log(text);
EDIT
How to wrap a selection with an identifier string:
String.prototype.splice = function( idx, rem, s ) {
return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};
var range = window.getSelection().getRangeAt(0);
range.startContainer.nodeValue = range.startContainer.nodeValue.splice(range.startOffset, 0, '[highlight]');
range.endContainer.nodeValue = range.endContainer.nodeValue.splice(range.endOffset, 0, '[/highlight]');
splice courtesy of this post

css animation works just once in FF and works fine other webkit browsers(like Chrome etc)

I have two css classes called slideLeft and slideRight. I am adding them dynamically using jquery like the code below for jquery. but animation just takes effect only once in FF while works completely as expected in webkit browsers.
Here is the Fiddle(try this in FF and Chrome)
I have the following html:
<div class="container">
<h3 align="center" style="padding-top: 10px;">
<span id="login" style="cursor: pointer; color: #006699;">LOGIN</span><span> | </span><span id="register" style="cursor: pointer; color: #006699;">REGISTER</span></h3>
<div class="form-group login" style="border-top: 1px solid gray;">
<div class="col-md-4" style="background: #fff; padding-top: 5px;">
<form method="post">
<div style="padding-bottom: 15px; padding-top: 15px;"><label>Name:</label>
<input type="text" name="name" class="form-control">
</div>
<div style="padding-bottom: 15px;"><label>Email:</label>
<input type="email" name="email" class="form-control">
</div>
<div style="padding-bottom: 25px;"><label>Password:</label>
<input type="password" name="pwd" class="form-control"></div>
<div><button class="btn btn-success form-control"><b>Register</b></button></div>
</form>
</div>
<div class="col-md-4"></div>
</div>
<div class="form-group register" style="border-top: 1px solid gray; padding-bottom: 301px; display: none;">
<div class="col-md-4"></div>
<div class="col-md-4" style="background: #fff; padding-top: 5px;">
<form method="post">
<div style="padding-bottom: 15px;"><label>Email:</label>
<input type="email" name="em" class="form-control">
</div>
<div style="padding-bottom: 25px;"><label>Password:</label>
<input type="password" name="pwd1" class="form-control"></div>
<div><button class="btn btn-success form-control"><b>Login</b></button></div>
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>
and my jquery:
$('#login').css('color', '#000');
$('#register').on('click', function(){
$('#register').css('color', '#000');
$('.login').removeClass('slideRight');
$('.login').hide();
$('.register').addClass('slideRight');
$('.register').show();
$('#login').css('color', '#006699');
});
$('#login').on('click', function(){
$('#login').css('color', '#000');
$('.register').removeClass('slideLeft');
$('.register').hide();
$('.login').addClass('slideLeft');
$('.login').show();
$('#register').css('color', '#006699');
});
and my css:
.slideLeft{
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideLeft {
0% {
transform: translateX(150%);
}
50%{
transform: translateX(-8%);
}
65%{
transform: translateX(4%);
}
80%{
transform: translateX(-4%);
}
95%{
transform: translateX(2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
/*
==============================================
slideRight
==============================================
*/
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
It works fine on webkit browser but not in mozilla. What am i missing??

Categories

Resources