0
votes

I have a page that has a background wallpaper with 100% width and its 100vh height. The page has 3 buttons on it and one of the buttons is located at the extreme left side of the screen. When I click that button, I am hoping the div would slide to the right to cover the entire page.

I had tried using slide toggle but my div is currently located at the bottom of my title page so when it toggles, the div toggles vertically--not horizontally.

My title page is 100vh but the div I'm trying to slide into place doesn't have a fixed height.

#title {
  width: 100%;
  background-image: url(../Images/Arthur%20and%20Merlin%202%20updated.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100vh;
  position: relative;
  display: inline-block;
}
#characters {
  width: 100%;
  display: inline-block;
}
<div id="maincontainer">
  <header id="title">
    <h1>Arthur and Merlin</h1>
    <h3>Battle For Camelot</h3>
    <div id="titlebutton"><a href="#">Join The Battle</a>
    </div>
    <input id="checkboxforplaces" type="checkbox">
    <label id="toplaces" for="checkboxforplaces">
      <img src="Icons/castle.png">
    </label>
    <input id="checkboxforchar" type="checkbox">
    <label id="tocharacters" for="checkboxforchar">
      <img src="Icons/helmet.png">
    </label>
  </header>
  <section id="characters">
    <div id="firstrow">
      <article id="arthurbox">
        <a id="arthur" href="#">
          <img src="Images/Arthur/Arthur%201.jpg" </a>
      </article>
      <article id="merlinbox">
        <a id="merlin" href="#">
          <img src="Images/Merlin/merlin%202.jpg">
        </a>
      </article>
    </div>
    <div id="clear"></div>
    <div id="secondrow">
      <article id="morganabox">
        <a id="morgana" href="#">
          <img src="Images/Morgana/Morgana1.jpg">
        </a>
      </article>
      <article id="youngmordredbox">
        <a id="youngmordred" href="#">
          <img src="Images/YoungMordred/Mordred2.jpg">
        </a>
      </article>
    </div>
    <div id="clear"></div>
    <div id="thirdrow">
      <article id="utherbox">
        <a id="uther" href="#">
          <img src="Images/Uther/Uther.jpg">
        </a>
      </article>
      <article id="gaiusbox">
        <a id="gaius" href="#">
          <img src="Images/Gaius/Gaius-15hdg5a.jpg">
        </a>
      </article>
      <div id="clear"></div>
    </div>
  </section>
</div>
1
can you give absolute position to the div and left = 0; then on click use jquery animation and make left: calc(100% - $("youdiv").width())Araz Shamsaddinlouy
which div are you trying to slide ???? how the css for that div looks like ... where is the JS you have tried ... please try to replicate your whole code on jsffiddle or codepenDaniP
Hi! Sorry for the late reply! I replicated my codes! codepen.io/anon/pen/WGmdBJ my objective is for #sidepost to be located at the left side(out of view) so when #button2 is pressed, the div slides into view. As #sidepost has images with hover on transparency, #title must be hidden or else it can be seen if the images are hovered on.Levin

1 Answers

1
votes

I think this jsfiddle may be useful for you.

$(document).ready(function(){    
$('#hide').click(function(){
    var hidden = $('.hidden');
    hidden.hide('slide', {direction: 'left'}, 400);
});

$('#show').click(function(){
    var hidden = $('.hidden');
    hidden.show('slide', {direction: 'left'}, 400);
});

});

https://jsfiddle.net/ZQTFq/3372/

Modify the code depending on your needs.