CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Beginner
Beginner

Reputation: 117

Change div width on load instead of on hover

How can I replace "hover" with something like a timer or something. I want to make changes that should happen like on load or like 2 sec after load.

Code:

body {
  background: white;
}

div.container {
  width: 60%;
  height: 1em;
  overflow: hidden;
  position: absolute;
  border-style: none;
  border-width: none;
  border-color: none;
}

div.content {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
}

div.content:hover {
  -webkit-transition: all 5s linear;
  -moz-transition: all 5s linear;
  -o-transition: all 5s linear;
  transition: all 5s linear;
  width: 500px;
  right: 0px;
  text-overflow: clip;
}
<div class="container">
  <div class="content">Text text text text text text text text text nb textdfrsdfsdfs dsdfsdfsdfsdfsdf .</div>

Upvotes: 1

Views: 604

Answers (7)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14022

Pure CSS solution. You can achieve this via CSS animations:

div {
  width: 100px;
  height: 100px;
  background: red;
  /* apply 2 second animation with name "grow" */
  /* with 2 second delay */
  /* and prevent resetting using forwards value */
  animation: grow 2s 2s forwards;
}

@keyframes grow {
  from { width: 100px; }
  to { width: 300px; }
}
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

Updated for new requirements

For new requirements you just need to duplicate in from and to blocks properties that need to be changed on animation start (text-overflow: clip and right: 0). Demo:

body {
  background: white;
}

div.container {
  width: 60%;
  height: 1em;
  overflow: hidden;
  position: absolute;
  border-style: none;
  border-width: none;
  border-color: none;
}

div.content {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  /* apply 5 second animation with name "move-text" */
  /* with linear timing function and 2 second delay */
  /* and prevent resetting using forwards value */
  animation: move-text 5s linear 2s forwards;
}

@keyframes move-text {
  from {
    width: 100%;
    text-overflow: clip;
    right: 0;
  }
  to {
    width: 500px;
    text-overflow: clip;
    right: 0;
  }
}
<div class="container">
  <div class="content">Text text text text text text text text text nb textdfrsdfsdfs dsdfsdfsdfsdfsdf .</div>

Upvotes: 2

Cabine
Cabine

Reputation: 1

You could use JavaScript.

HTML:

 <!DOCTYPE html>
 <html lang="en-US en">
 <head>
    <meta charset="UTF-8" />
    <title>Your Title</title>
 </head>
 <body>
     <div></div>
 </body>
 </html>

CSS:

div{
   width: 100px;
   height: 100px;
   background: red;
}

JavaScript:

  window.addEventListener('load', function(){
     setTimeout(function(){
         let i = 100;
         setInterval(function(){
             if(i < 300)
               i++;
               document.getElementsByTagName('div')[0].style.width = `${i}px`;
         }, 5);
      }, 2000);
  });

Upvotes: 0

Kaps
Kaps

Reputation: 189

You can use onmouseover Event on element. for example:

   function hoverFunc(element) {
     setTimeout(function() {
      element.textContent = "You have unboxed me ";
     }, 2000);
   }
<div onmouseover="hoverFunc(this)"> hover and unbox me </div>

Upvotes: 0

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

You can do like this:

 <!DOCTYPE html>
 <html>
 <head>
 <style> 
 div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}

 my-div:hover {
width: 300px;
 }
       </style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
 setTimeout(function(){$("div").addClass("my-div")},2000);
});
</script>
  </head>
 <body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

  <div class=""></div>

 <p>Hover over the div element above, to see the transition effect.</p>

 </body>
</html>

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65853

See comments inline:

// When the document is ready...
window.addEventListener("DOMContentLoaded", function(){
  // Wait 2000 milliseconds and run the supplied function
  setTimeout(function(){
    document.querySelector(".special").classList.add("delay");
  }, 2000);
});
.special {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

.delay {
  width: 300px;
}
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class="special"></div>

Upvotes: 0

marzelin
marzelin

Reputation: 11610

setTimeout(() => document.querySelector(".box").classList.add("grow"), 2000)
<!DOCTYPE html>
<html>

<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: red;
      -webkit-transition: width 2s;
      /* For Safari 3.1 to 6.0 */
      transition: width 2s;
    }
    
    .grow {
      width: 300px;
    }
  </style>
</head>

<body>

  <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

  <div class="box"></div>

  <p>Hover over the div element above, to see the transition effect.</p>

</body>

</html>

Upvotes: 1

Subendra Sharma
Subendra Sharma

Reputation: 121

u can do sth like this

setTimeout(function(){}, 2000)

the function passed to setTimeout will execute after 2 seconds

Upvotes: 0

Related Questions