Info box won't slide up on first click...

[Plixlze]

poe-rpg.proboards.com/


The info box I'm working on only slides up after clicking the arrow twice, I had it working perfectly outside of the wrapper but because it was stretching smaller screens and warping the finished product I was forced to move it inside the wrapper. I have minimal Javascript/Jquery knowledge as I've just started learning how to code in that language so I have no idea what the problem could be. If anyone has a solution and would love to help I'll provide the coding I've used below.


           <div class="cbhide">
               <div id="box-main">
                   <table class="welinfo">
                       <tbody>
                           <tr>
                               <td>
                                   <div class="welcome">
                                       <table width="100%">
                                           <tbody>
                                               <tr>
                                                   <td style="background-color: #005FA1;width:70%;">Title</td><td style="background-color: #005FA1;width:30%;">Game Data</td>
                                               </tr>
                                               <tr>
                                                   <td style="background-color: #4E4D4A;" colspan="2">
                                                       <div style="width:100%;overflow:hidden;">
                                                           <div class="weltext">
                                                               This text scrolls even though no scroll bar appears!!!
                                                               <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam sed felis a faucibus. Nullam tincidunt placerat sapien, non lacinia odio tincidunt ut. Sed ut orci tincidunt, auctor neque vel, laoreet dui. Phasellus hendrerit ornare purus, et vulputate enim fermentum ut. Praesent vel diam venenatis turpis malesuada tincidunt. Vivamus quis dapibus nibh. Nam tempor, erat in pellentesque auctor, lacus libero malesuada dolor, in suscipit dui sem quis erat. Vivamus vel congue lacus. Duis nec pretium metus. Cras arcu velit, efficitur id ipsum vitae, semper sollicitudin massa.

                                                               <br />Suspendisse vitae lacus nulla. Curabitur dignissim magna a lorem dapibus iaculis. Aenean venenatis fermentum tincidunt. Ut eu orci elit. Cras placerat metus ut eros malesuada vulputate. Nullam tristique a turpis eu vestibulum. Pellentesque sit amet pharetra justo, quis pharetra sapien. Nullam cursus metus nec eleifend sagittis.
                                                           </div>
                                                       </div>
                                                   </td>
                                               </tr>
                                           </tbody>
                                       </table>
                                   </div>
                               </td>
                               <td>
                                   <div class="otm">
                                       <div class="member">
                                           <div class="membert">
                                               Motm
                                           </div>
                                       </div>
                                       <div class="character">
                                           <div class="charactert">
                                               Cotm
                                           </div>
                                       </div>
                                       <div class="horse">
                                           <div class="horset">
                                               Hotm
                                           </div>
                                       </div>
                                       <br />
                                       <div class="stallion">
                                           <div class="stalliont">
                                               Sotm
                                           </div>
                                       </div>
                                       <div class="mare">
                                           <div class="maret">
                                               Motm
                                           </div>
                                       </div>
                                       <div class="stable">
                                           <div class="stablet">
                                               Sotm
                                           </div>
                                       </div>
                                   </div>
                               </td>
                               <td>
                                   <div class="staff">
                                       <div class="imgcon">
                                           <a href="#" onclick="popup('staff1')">
                                               <img src="http://i.imgur.com/TrLRwBk.png">
                                           </a>
                                       </div>
                                       <div class="imgcon">
                                           <a href="#" onclick="popup('staff2')">
                                               <img src="http://i.imgur.com/TrLRwBk.png">
                                           </a>
                                       </div>
                                       <div class="imgcon">
                                           <a href="#" onclick="popup('staff3')">
                                               <img src="http://i.imgur.com/TrLRwBk.png">
                                           </a>
                                       </div>
                                       <br />
                                       <div class="imgcon">
                                           <a href="#" onclick="popup('staff4')">
                                               <img src="http://i.imgur.com/TrLRwBk.png">
                                           </a>
                                       </div>
                                       <div class="imgcon">
                                           <a href="#" onclick="popup('staff5')">
                                               <img src="http://i.imgur.com/TrLRwBk.png">
                                           </a>
                                       </div>
                                       <div class="imgcon">
                                           <a href="#" onclick="popup('staff6')">
                                               <img src="http://i.imgur.com/TrLRwBk.png">
                                           </a>
                                       </div>
                                   </div>
                               </td>
                               <td>
                                   <div class="qlinks">
                                       <a href=""><div class="qlink">Link 1</div></a>
                                       <a href=""><div class="qlink">Link 2</div></a>
                                       <a href=""><div class="qlink">Link 3</div></a>
                                       <a href=""><div class="qlink">Link 4</div></a>
                                       <a href=""><div class="qlink">Link 5</div></a>
                                       <a href=""><div class="qlink">Link 6</div></a>
                                       <a href=""><div class="qlink">Link 7</div></a>
                                       <a href=""><div class="qlink">Link 8</div></a>
                                   </div>
                               </td>
                               <td>
                                   <div class="credits">
                                       <table width="100%">
                                           <tbody>
                                               <tr>
                                                   <td>
                                                       <div class="ctitle">Title</div>
                                                   </td>
                                               </tr>
                                               <tr>
                                                   <td>
                                                       <div class="ctext">
                                                           Credits
                                                       </div>
                                                   </td>
                                               </tr>
                                           </tbody>
                                       </table>
                                   </div>
                               </td>
                           </tr>
                       </tbody>
                   </table>
               </div>
               <div id="arrow-hover"><i class="fa fa-chevron-up fa-2x"></i></div>
           </div>
           <div id="blanket" style="display:none"></div>
           <div id="staff1" style="display:none">
               <img src="http://i.imgur.com/TrLRwBk.png">
               <div class="sname">
                   Display Name
               </div>
               <div class="prome">
                   <a href="">Profile</a> ~ <a href="">Message</a>
               </div>
               <a href="#" onclick="popup('staff1')">
                   <div class="close">
                       X
                   </div>
               </a>
               <div class="stext">
                   A little blurb about them or whatever!
               </div>
           </div>
           <div id="staff2" style="display:none">
               <img src="http://i.imgur.com/TrLRwBk.png">
               <div class="sname">
                   Display Name
               </div>
               <div class="prome">
                   <a href="">Profile</a> ~ <a href="">Message</a>
               </div>
               <a href="#" onclick="popup('staff2')">
                   <div class="close">
                       X
                   </div>
               </a>
               <div class="stext">
                   A little blurb about them or whatever!
               </div>
           </div>
           <div id="staff3" style="display:none">
               <img src="http://i.imgur.com/TrLRwBk.png">
               <div class="sname">
                   Display Name
               </div>
               <div class="prome">
                   <a href="">Profile</a> ~ <a href="">Message</a>
               </div>
               <a href="#" onclick="popup('staff3')">
                   <div class="close">
                       X
                   </div>
               </a>
               <div class="stext">
                   A little blurb about them or whatever!
               </div>
           </div>
           <div id="staff4" style="display:none">
               <img src="http://i.imgur.com/TrLRwBk.png">
               <div class="sname">
                   Display Name
               </div>
               <div class="prome">
                   <a href="">Profile</a> ~ <a href="">Message</a>
               </div>
               <a href="#" onclick="popup('staff4')">
                   <div class="close">
                       X
                   </div>
               </a>
               <div class="stext">
                   A little blurb about them or whatever!
               </div>
           </div>
           <div id="staff5" style="display:none">
               <img src="http://i.imgur.com/TrLRwBk.png">
               <div class="sname">
                   Display Name
               </div>
               <div class="prome">
                   <a href="">Profile</a> ~ <a href="">Message</a>
               </div>
               <a href="#" onclick="popup('staff5')">
                   <div class="close">
                       X
                   </div>
               </a>
               <div class="stext">
                   A little blurb about them or whatever!
               </div>
           </div>
           <div id="staff6" style="display:none">
               <img src="http://i.imgur.com/TrLRwBk.png">
               <div class="sname">
                   Display Name
               </div>
               <div class="prome">
                   <a href="">Profile</a> ~ <a href="">Message</a>
               </div>
               <a href="#" onclick="popup('staff6')">
                   <div class="close">
                       X
                   </div>
               </a>
               <div class="stext">
                   A little blurb about them or whatever!
               </div>
           </div>

.cbhide {
   position: absolute;
   top: 0px;
   width: 100%;
   height: 320px;
   overflow: hidden;
}
#box-main{
   position: absolute;
   bottom: -250px;
   width: 100%;
   height: 250px;
   background-color: rgba(53,52,50,0.4);
   z-index: 100;
}
#arrow-hover{
   position: absolute;
   bottom: 0px;
   left: 947px;
   width: 40px;
   height: 30px;
   z-index: 100;
   background-color: rgba(53,52,50,0.4);
   color: rgba(0,47,113,0.4);
   text-align: center;

}
#box-main table.welinfo {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   text-align: center;
}
#box-main table.welinfo td {
   vertical-align: center;
   padding: 10px;
}
.welcome {
   background-color: #353432;
   padding: 5px;
   height: 200px;
}
.weltext {
   height: 144px;
   width: 100%;
   overflow: auto;
   text-align: center;
   padding-right: 6%;
   padding-left: 3%;
}
.otm {
   background-color: #353432;
   padding: 5px;
   height: 200px;
}
.member {
   position: relative;
   background-image: url('http://i.imgur.com/qqUA61A.png');
   background-size: 50px 95px;
   background-repeat: no-repeat;
   margin-bottom: 5px;
   margin-right: 55px;
   width: 50px;
   height: 95px;
   display: inline-block;
}
.membert {
   background-color: rgba(0,95,161,0.8);
   margin-top: 69px;
   padding: 5px;
   font-variant: small-caps;
}
.character {
   position: relative;
   background-image: url('http://i.imgur.com/qqUA61A.png');
   background-size: 50px 95px;
   background-repeat: no-repeat;
   margin-bottom: 5px;
   margin-right: 55px;
   width: 50px;
   height: 95px;
   display: inline-block;
}
.charactert {
   background-color: rgba(0,95,161,0.8);
   margin-top: 69px;
   padding: 5px;
   font-variant: small-caps;
}
.horse {
   position: relative;
   background-image: url('http://i.imgur.com/qqUA61A.png');
   background-size: 50px 95px;
   background-repeat: no-repeat;
   margin-bottom: 5px;
   width: 50px;
   height: 95px;
   display: inline-block;
}
.horset {
   background-color: rgba(0,95,161,0.8);
   margin-top: 69px;
   padding: 5px;
   font-variant: small-caps;
}
.stallion {
   position: relative;
   background-image: url('http://i.imgur.com/qqUA61A.png');
   background-size: 50px 95px;
   background-repeat: no-repeat;
   margin-bottom: 5px;
   margin-right: 55px;
   width: 50px;
   height: 95px;
   display: inline-block;
}
.stalliont {
   background-color: rgba(0,95,161,0.8);
   margin-top: 69px;
   padding: 5px;
   font-variant: small-caps;
}
.mare {
   position: relative;
   background-image: url('http://i.imgur.com/qqUA61A.png');
   background-size: 50px 95px;
   background-repeat: no-repeat;
   margin-bottom: 5px;
   margin-right: 55px;
   width: 50px;
   height: 95px;
   display: inline-block;
}
.maret {
   background-color: rgba(0,95,161,0.8);
   margin-top: 69px;
   padding: 5px;
   font-variant: small-caps;
}
.stable {
   position: relative;
   background-image: url('http://i.imgur.com/qqUA61A.png');
   background-size: 50px 95px;
   background-repeat: no-repeat;
   margin-bottom: 5px;
   width: 50px;
   height: 95px;
   display: inline-block;
}
.stablet {
   background-color: rgba(0,95,161,0.8);
   margin-top: 69px;
   padding: 5px;
   font-variant: small-caps;
}
.staff {
   background-color: #353432;
   padding: 5px;
   height: 200px;
}
div.imgcon {
   display: inline-block;
}
.staff img {
   width: 70px;
   height: 70px;
   margin-top: 15px;
   margin-bottom: 12px;
   margin-left: 9px;
   margin-right: 9px;
}
#blanket {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}

#staff1 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   position:absolute;
   background-color:#353432;
   width:400px;
   height:300px;
   padding: 10px;
   border:5px solid #000;
   z-index: 9002;
}
#staff1 img {
   float: left;
   width: 100px;
   height: 100px;
   margin-bottom: 10px;
}
#staff2 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   position:absolute;
   background-color:#353432;
   width:400px;
   height:300px;
   padding: 10px;
   border:5px solid #000;
   z-index: 9002;
}
#staff2 img {
   float: left;
   width: 100px;
   height: 100px;
   margin-bottom: 10px;
}
#staff3 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   position:absolute;
   background-color:#353432;
   width:400px;
   height:300px;
   padding: 10px;
   border:5px solid #000;
   z-index: 9002;
}
#staff3 img {
   float: left;
   width: 100px;
   height: 100px;
   margin-bottom: 10px;
}
#staff4 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   position:absolute;
   background-color:#353432;
   width:400px;
   height:300px;
   padding: 10px;
   border:5px solid #000;
   z-index: 9002;
}
#staff4 img {
   float: left;
   width: 100px;
   height: 100px;
   margin-bottom: 10px;
}
#staff5 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   position:absolute;
   background-color:#353432;
   width:400px;
   height:300px;
   padding: 10px;
   border:5px solid #000;
   z-index: 9002;
}
#staff5 img {
   float: left;
   width: 100px;
   height: 100px;
   margin-bottom: 10px;
}
#staff6 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   position:absolute;
   background-color:#353432;
   width:400px;
   height:300px;
   padding: 10px;
   border:5px solid #000;
   z-index: 9002;
}
#staff6 img {
   float: left;
   width: 100px;
   height: 100px;
   margin-bottom: 10px;
}
.sname {
   float: left;
   margin-left: 10px;
   background-color: #005FA1;
   padding: 5px;
   
}
.prome {
   float: right;
   background-color: #005FA1;
   padding: 5px;
}
.close {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   float: right;
   margin-top: -25px;
   margin-right: -150px;
   border-radius: 100%;
   width: 25px;
   height: 25px;
   background-color: #4E4D4A;
   padding: 5px;
   text-align: center;
}
.stext {
   clear: both;
   height: 150px;
   background-color: #4E4D4A;
   padding: 5px;
}
.qlinks {
   background-color: #353432;
   padding: 5px;
   height: 200px;
}
.qlink {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   background-color: #005FA1;
   margin-bottom: 10px;
}
.qlink:hover {
   border-left: 30px solid #4E4D4A;
   border-top: 1px solid #4E4D4A;
   border-right: 1px solid #4E4D4A;
   border-bottom: 1px solid #4E4D4A;
   padding-right: 30px;
}
.credits {
   background-color: #353432;
   padding: 5px;
   height: 200px;
}
.ctitle {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   background-color: #005FA1;
   padding: 5px;
   margin-top: -10px;
   margin-bottom: -10px;
}
.ctext {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   background-color: #4E4D4A;
   padding: 5px;
   height: 164px;
}
<script>
$('body').on('click','#arrow-hover',function(){
   if($('#box-main').hasClass("visible"))
   {
       $('#arrow-hover').animate({
           bottom: '250px'
       },250).children("i").toggleClass("fa-chevron-up fa-chevron-down");
       $('#box-main').animate({
           bottom: '0px'
       },250).toggleClass("visible");
   }else
   {
       $('#arrow-hover').animate({
           bottom: '0px'
       },250).children("i").toggleClass("fa-chevron-up fa-chevron-down");
       $('#box-main').animate({
           bottom: '-250px'
       },250).toggleClass("visible");
   }
     
   
});
</script>

[Tumbleweed]

I don't see any kind of an info box on your site but I'll toss this on my test site inside the wrapper and see if I get what you get and we can go from there.


Edit: I viewed your source and put the code where you have it and I see nothing to click just like on your site. I did fiddle with the positioning to get something to show and I saw some tabs, but they didn't do anything at all clicking, double clicking so I need to first get it to show up right to even test and as it is getting late, not sure I'll get anywhere tonight. Do you actually see something to click on, on your site because I checked in Chrome, FF and even IE and I see nothing.   

Is this your own code or is it a pre-made template because something must be missing here. If it is a pre-made you may be best asking the person who created it. Meanwhile, while I wait for your reply, I may play with it a bit.

Ignore all of the above. You arrow looks just like the one that people used to go to the top of the page and bottom of the page so I was totally ignoring it.  Now I just need to figure out what the deal is as it does take me two clicks initially but after that, just one click.


Save your jquery that you have and try this: (I got it working with one click by finding the original code here..    jsfiddle.net/hapttwf6/28/  ..and then fiddling with it a bit. Before you do that though, see if it works for you on my test site. putteraround.boards.net/



<script>
   
$('body').on('click','#arrow-hover',function(){
   if($('#box-main').hasClass("visible"))
   {
       $('#arrow-hover').animate({
           bottom: '250px'
       },250).children("i").toggleClass("fa-chevron-up fa-chevron-down");
       $('#box-main').animate({
           bottom: '-250px'
       },250).toggleClass("visible");
   }else
   {
       $('#arrow-hover').animate({
           bottom: '250px'
       },250).children("i").toggleClass("fa-chevron-up fa-chevron-down");
       $('#box-main').animate({
           bottom: '0px'
       },250).toggleClass("visible");
   }
     
   
});

</script>




[Plixlze]

It works on the first click but now the arrow stays stuck up in the middle when you go to close it, this is how it goes with coding though you fix one thing and another thing breaks. At least you've made a little bit of progress!

I'll probably add a click for info bit of text below the arrow, so people won't be confused.

[Tumbleweed]

May 31, 2016 10:11:13 GMT -8 Plixlze said:

It works on the first click but now the arrow stays stuck up in the middle when you go to close it, this is how it goes with coding though you fix one thing and another thing breaks. At least you've made a little bit of progress!

I'll probably add a click for info bit of text below the arrow, so people won't be confused.

Check my test site again and let me know if that is how you want it to work.

[Plixlze]

Tumbleweed Yes that is perfect! Thank you so much for your help!!!

[Tumbleweed]

May 31, 2016 12:22:50 GMT -8 Plixlze said:

Tumbleweed Yes that is perfect! Thank you so much for your help!!!

Here is the script for the settings I have. Hopefully they will work for you too:




<script>
   
$('body').on('click','#arrow-hover',function(){
   if($('#box-main').hasClass("visible"))
   {
       $('#arrow-hover').animate({
           bottom: '0px'
       },250).children("i").toggleClass("fa-chevron-up fa-chevron-down");
       $('#box-main').animate({
           bottom: '-250px'
       },250).toggleClass("visible");
   }else
   {
       $('#arrow-hover').animate({
           bottom: '250px'
       },250).children("i").toggleClass("fa-chevron-up fa-chevron-down");
       $('#box-main').animate({
           bottom: '0px'
       },250).toggleClass("visible");
   }
     
   
});

</script>


By the way, I really don't know what was wrong with your code in the first place as I didn't compare then side by side. It's just easier to just start fresh with the original code and luckily, I was able to find it. Fingers crossed it works on your site the same as it works on mine.

[Plixlze]

Tumbleweed Seems like everything is working now. I'm sure I somehow buggered up the coding at some point, thank you very much for the help. I was thinking I was going to have to redesign everything to just make a hover banner. Now I can continue working on the rest of the layout without having to worry about this info box anymore.