HTML5, CSS Transitions & JS Triggers

Question

To give a basic idea of what I hope to accomplish;

I currently have a site live at: http://shiinachi.com

As it is, the body element is changed using javascript when clicking between the home and email tab.

However, I hope to redo this. I aim to have the width of the body expand when a button is clicked, so the body "drops down" to show the menu in question.

I have experimented using an onload function to trigger a css class;

function bodyloaderS() { classList.add("body-loader")

The css of the body is set to a width of 0 by default, then I attempted to use the body-loader class in question to adjust the width.

body-section.body-loader{ width: 745px; }

I then called the transition onload to test it. However... The results were less than successful. Is there a better way I can go about doing this?

Edit: Here's a dump of the code being used

Body tag;

<div id="body-section" onload="bodyloaderS(document.body-section)">
    <h1>Home</h1>
     <p>Hello.<br><br>Temp</p>                  </div>

Relevant CSS;

#body-section{
position: relative;
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
height: 350px;
width: 0px;
transition: width 2s;
border-color: #ffffff;
border-style: solid;
border-width: 1px 1px 3px 3px;
border-radius: 3px 9px 3px 0px;
top: -752px;
left: 325px;
background-color: #222222;
}

#body-section.body-loader{
width: 745px;
}

The script in use;

    <script>
function bodyloaderS() { classList.add("body-loader") 
}
    </script>

maye if you post the minimal code to let us reproduce the code and see what you have tried so far, then we can help yout better — Calvin Nunes
– Calvin Nunes, Commented Apr 27, 2018 at 12:12
You want a transition effect on the body maybe when a button is clicked, if I understand right? — Alon Parag
– Alon Parag, Commented Apr 27, 2018 at 12:33

Asons · Accepted Answer · 2018-04-27 12:37:22Z

1

If you also add a target element in your function it will work, e.g.

function bodyloaderS() {
  document.querySelector('#body-section').classList.add("body-loader");
}

Also, you might want to consider start using event listeners instead

var thebody = document.querySelector('#body-section');
thebody.addEventListener('load', function() {
  this.classList.add("body-loader");
})

Updated based on a comment and a question edit

The onload event doesn't work on div elements.

Here is a suggestion using a DOMContentLoaded listener

document.addEventListener("DOMContentLoaded", function() {

  var thebody = document.querySelector('#body-section');
  thebody.classList.add("body-loader");
  
});

#body-section {
  position: relative;
  padding-left: 50px;
  padding-top: 50px;
  padding-right: 50px;
  height: 350px;
  width: 0px;
  transition: width 2s;
  border-color: #ffffff;
  border-style: solid;
  border-width: 1px 1px 3px 3px;
  border-radius: 3px 9px 3px 0px;
  /*
  top: -752px;
  left: 325px;
  background-color: #222222;
  */
}

#body-section.body-loader {
  width: 745px;
}

<div id="body-section">
  <h1>Home</h1>
  <p>Hello.<br><br>Temp</p>
</div>

edited Apr 27, 2018 at 12:37

answered Apr 27, 2018 at 12:19

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shiina Sylande Over a year ago

Hello, Thanks for the quick reply. I'm afraid to say both ideas yielded no different results. I've attempted to check for errors using chrome's dev mode, but there are no errors dumped.

Shiina Sylande Over a year ago

Thanks! That event listener made it work straight away.

Collectives™ on Stack Overflow

HTML5, CSS Transitions & JS Triggers

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related