[Solved] Javascript not working.

[Comatose]

Site

I have no clue what is wrong with this but it is bugging the heck out of me. I can not get tabs to work on this site in any browser. I have tried plain js and pre-made tables along with several different variations of scripts and nothing wants to work for some reason. Also, I would like to figure out a way to fully collapse the div if the tab is clicked twice -small bit of my attempt in the script below- I am more familiar with C than js so I'm not sure how to debug.

here is what I currently have:


Script:

$(document).ready(function() {
   $(".tabadoo li span a").click(function(event) {
       event.preventDefault();
       var tab = $(this).attr("href");

if($(tab).css("display") == "block"){
$(tab).css("display", "none");
} else{
        $(".togglebox").not(tab).css("display", "none");
        $(tab).css("display", "block");
}
   });
});


HTML

<div id="holddood">
   <ul class="tabadoo">
<li class="onpoint"><span id="boxinfo"><a href="#boxinfotoggle">a</a></span></li>
       <li><span id="statsbox"><a href="#statsboxtoggle">b</a></span></li>
       <li><span id="staffinfo"><a href="#staffinfotoggle">c</a></span></li>
       <li><span id="otmbox"><a href="#otmboxtoggle">d</a></span></li>
       <li><span id="ctbox"><a href="#ctboxtoggle">e</a></span></li>
   </ul>
   <div id="holdchange">
       <div class="togglebox" id="boxinfotoggle" style="display:block;">
           main info here.
       </div>
       <div class="togglebox" id="statsboxtoggle">
           stats info here.
       </div>
       <div class="togglebox" id="staffinfotoggle">
           staff info here.
       </div>
       <div class="togglebox" id="otmboxtoggle">
           of the month info here.
       </div>
       <div class="togglebox" id="ctboxtoggle">
           chat box here.
       </div>
   </div>
</div>


CSS

#boxinfo a {
   color: @purpleheart;
   text-shadow: 0 0 0.2em @purplebg,
        0 0 0.2em @purplebg,
        0 0 0.2em @purplebg;
   font-family: 'heart';
}

#statsbox a {
   color: @greenheart;
   text-shadow: 0 0 0.2em @greenbg,
        0 0 0.2em @greenbg,
        0 0 0.2em @greenbg;
   font-family: 'heart';
}

#staffinfo a {
   color: @yellowheart;
       text-shadow: 0 0 0.2em @yellowbg,
        0 0 0.2em @yellowbg,
        0 0 0.2em @yellowbg;
   transform: rotate(180deg);
   font-family: 'heart';
}

#otmbox a {color: @blueheart;
   text-shadow: 0 0 0.2em @bluebg,
        0 0 0.2em @bluebg,
        0 0 0.2em @bluebg;
   font-family: 'heart';
}
#ctbox a {
   color: @orageheart;
text-shadow: 0 0 0.2em @oragebg,
        0 0 0.2em @oragebg,
        0 0 0.2em @oragebg;
   font-family: 'heart';
}
.togglebox {
   width: 100%;
   height: 100%;
   background: #ff0000;
   overflow: auto;
   overflow: hidden;
   display: none;
}
.tabadoo{
   position: absolute;
   top: 150px;
   left: 20px;
   font-size: 35px;
}
.tabadoo a { font-family: 'heart';}
.tabadoo li { display: inline;}
#holdchange {
   position: absolute;
   overflow: hidden;
   width: 80%;
   height: 60%;
   top: 200px;
   left: 14px;
}
#boxinfotoggle {
   background: @purplebg;
   -webkit-transition: 2s; /* Safari */
   transition: 2s;
}
#statsboxtoggle {
   background: @greenbg;
   -webkit-transition: 2s; /* Safari */
   transition: 2s;
}
#staffinfotoggle {
   background: @yellowbg;
   -webkit-transition: 2s; /* Safari */
   transition: 2s;
}
#otmboxtoggle {
   background: @bluebg;
   -webkit-transition: 2s; /* Safari */
   transition: 2s;
}
#ctboxtoggle {
   background: @oragebg;
   -webkit-transition: 2s; /* Safari */
   transition: 2s;
}
/*credit boxes */
#credit{
   position: absolute;
   bottom: 0px;
   height: 100px;
   width: 80%;
}


Also, I have never messed with getting and setting cookies... how would i go about setting a cookie to record which tag has an open state upon refresh?

[Comatose]

Still no progress attempting to get this to work. I did make a jsfiddle though if any one wants to check that out to see if they can help out a bit.

[Comatose]

The Fiddle works perfectly now, but it outright refuses to work on the site. I am at a loss at what to do.

[Tumbleweed]

Apr 29, 2016 18:51:10 GMT -8 Comatose said:

The Fiddle works perfectly now, but it outright refuses to work on the site. I am at a loss at what to do.

I copied what you have in your fiddle and put it on my test site and it works fine. I don't see it on your site so I can't really say why it doesn't work on yours. Where are you adding it? I just tossed the css and html in my wrapper template below the menu bar and then the script is at the very bottom of the wrapper.

Oh, wait, is it the hearts I see in the side table? I bet you need to add a z-index to the content of your css to get it to show because it is working because the link changes in your browser address bar. The text is probably hiding behind your background.  There is something funky with your image so it could be it is just getting pushed off the page. But try the z-index first and set it high at least to start with, like z-index:500;

[Comatose]

May 1, 2016 1:36:18 GMT -8 Tumbleweed said:

Oh, wait, is it the hearts I see in the side table? I bet you need to add a z-index to the content of your css to get it to show because it is working because the link changes in your browser address bar. The text is probably hiding behind your background.  There is something funky with your image so it could be it is just getting pushed off the page. But try the z-index first and set it high at least to start with, like z-index:500;

Yes, the hearts are the tabs

I have it inside of the side bar on the left. The z-index doesn't seem to do anything for it. Would you mind if I sent you a copy of the theme to diagnose the issue that way?

[Tumbleweed]

May 1, 2016 11:53:36 GMT -8 Comatose said:

May 1, 2016 1:36:18 GMT -8 Tumbleweed said:

Oh, wait, is it the hearts I see in the side table? I bet you need to add a z-index to the content of your css to get it to show because it is working because the link changes in your browser address bar. The text is probably hiding behind your background.  There is something funky with your image so it could be it is just getting pushed off the page. But try the z-index first and set it high at least to start with, like z-index:500;

Yes, the hearts are the tabs

I have it inside of the side bar on the left. The z-index doesn't seem to do anything for it. Would you mind if I sent you a copy of the theme to diagnose the issue that way?

Sorry the z-idex didn't work. Really, I probably don't need the whole theme. Just a copy of your side bar.

[Comatose]

<div id="headbox">
           <div id="currentuser">
               <div id="imagebox"></div><div id="namebox"></div>
               <a href="$[current_user.href]">
                  $[current_user.avatar]
               </a>
               <div id="curname">
                   <div style="margin-bottom: 0px; width: 100%!important;"><a href="$[current_user.link.href]">$[current_user]</a></div>
                   <div style="font-size: 11px; margin-top: -5px; width: 100%;">
                       {if $[current_user.is_member]} $[logout_link] :||: <a href="http://login.proboards.com/select/login/6506519">Switch</a>
                   
                   {else}
                    $[login_link] or $[register_link]
                   {/if}
                   </div>
               </div>
               
           </div>
           $[header]
           <div id="navigation">
               {foreach $[navigation.menu]}
               {if $[navigation.menu.name] == "Home"}
              <a href="$[navigation.menu.href]">
                    <img src="http://storage.proboards.com/6506519/i/uzfs2jcMyJckTiJjZRhg.png">
                </a>
               {/if}

               {if $[navigation.menu.name] == "Search"}  
                <a href="$[navigation.menu.href]">
                    <img src="http://storage.proboards.com/6506519/i/L51KIvLlEpJI5eiBZpqq.png">
                </a>
               {/if}
               {if $[navigation.menu.name] == "Members"}  
                <a href="$[navigation.menu.href]">
                    <img src="http://storage.proboards.com/6506519/i/cVPAKKiByukPOwdSxuCJ.png">
                </a>
               {/if}
               {if $[navigation.menu.name] == "Messages"}  
                <a href="$[navigation.menu.href]">
                    <img src="http://storage.proboards.com/6506519/i/WTXrxygXL27mTjMm4wxK.png">
                </a>
               {/if}
               {if $[navigation.menu.name] == "Admin"}  
                <a href="$[navigation.menu.href]">
                    <img src="http://demo4servicebus1.stampedeinnovations.com/stampede-content/uploads/sites/2/2014/04/cog-icon-50x50.png">
                </a>
               {/if}
{/foreach}
           </div>
           <div id="namesake">
               <div id="red1">
                       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;?&nbsp;?&nbsp;?&nbsp;
               </div>
               <div id="front">INFINITE LOOP</div>
               <div id="back">INFINITE LOOP</div>
           </div>
<div id="holddood">
    <ul class="tabadoo">
<li class="onpoint"><span id="boxinfo"><a href="#boxinfotoggle">a</a></span></li>
            <li><span id="statsbox"><a href="#statsboxtoggle">b</a></span></li>
        <li><span id="staffinfo"><a href="#staffinfotoggle">c</a></span></li>
      <li><span id="otmbox"><a href="#otmboxtoggle">d</a></span></li>
        <li><span id="ctbox"><a href="#ctboxtoggle">e</a></span></li>
    </ul>
    <div id="holdchange">
        <div class="togglebox" id="boxinfotoggle">
            main info here.
        </div>
        <div class="togglebox" id="statsboxtoggle">
            stats info here.
      </div>
        <div class="togglebox" id="staffinfotoggle">
            staff info here.
        </div>
        <div class="togglebox" id="otmboxtoggle">
            of the month info here.
        </div>
        <div class="togglebox" id="ctboxtoggle">
                    <!-- Chat goes here -->
                       chatty
        </div>
    </div>
</div>
<div id="credit">
<div id="innercred">
undertale © Toby Fox<br>
               forum design and layout <a href="/user/1">Comatose</a><br>
               Background image: <a href="http://ckibe.deviantart.com/">CKibe</a>
           </div>
       </div>
   </div>



/* Side box/banner box */
#headbox{
   height: 100%;
   width: 25%;
   background-image: @banner_background_image;
   position:fixed;
   top: 0px;
   left: 0px;
   z-index: -99;
   background-position: 79% 20%;
   background-repeat: no-repeat;
   background-size: auto 100%;
}
/* "center" divider */
#navigation{
   width: 60px;
   position: absolute;
   height: 100%;
   background-color: @title_bar_background_color;
   padding: 270px 0px 20px 0px;
   right: -60px;
   left: auto;
   text-align: center;
}
/* User information and navigation menu */
#currentuser{
   width: 150px;
   position: absolute;
   top: -10px;
   right: -113px;
   background-color: transparent;
   height: 250px;
   z-index: 99;
   text-align:center;
   padding: 10px;
}
#currentuser img {
   border-radius: 50%;
   border: 5px solid @dark;
}
#curname{
   background: @medium1;
   margin-top: -10px;
   padding: 6px;
   font-size: 18px;
   width: auto;
   border-radius: 30px;
   border: 5px solid @dark;
}
#namesake {
   position: relative;
   top: 60px;
   font-family: 'monster front';
   color: #fff;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   text-align: center;
   font-size: 30px;
   white-space: nowrap;
}
/* Forum Title */
#front{
   color: @logo2;
   font-family: @font_3;
   padding-right: 10px;
}
#back{
   color: @logo1;
   font-family: @font_2;
   margin-top: -36px;
   padding-right: 10px;
}
#red1{
   background-color: transparent;
   color: @pop;
   width: 20px;
   height: 20px;
width: 100%;
   margin-bottom: -24px;
margin-left: 0px;
   padding-right: 13px;
   font-size: 18px;
   letter-spacing: 4px;
}

/* Sidebar information */
/* purple colored heart/ "forum info" */
#boxinfo a {
   color: @purpleheart;
   text-shadow: 0 0 0.2em @purplebg,
        0 0 0.2em @purplebg,
        0 0 0.2em @purplebg;
   font-family: 'heart';
}
/* green colored heart /  */
#statsbox a {
   color: @greenheart;
   text-shadow: 0 0 0.2em @greenbg,
        0 0 0.2em @greenbg,
        0 0 0.2em @greenbg;
   font-family: 'heart';
}

#staffinfo a {
   color: @yellowheart;
       text-shadow: 0 0 0.2em @yellowbg,
        0 0 0.2em @yellowbg,
        0 0 0.2em @yellowbg;
   font-family: 'heart';
}
#staffinfo{transform: rotate(180deg)!important;}
#otmbox a {color: @blueheart;
   text-shadow: 0 0 0.2em @bluebg,
        0 0 0.2em @bluebg,
        0 0 0.2em @bluebg;
   font-family: 'heart';
}
#ctbox a {
   color: @orageheart;
text-shadow: 0 0 0.2em @oragebg,
        0 0 0.2em @oragebg,
        0 0 0.2em @oragebg;
   font-family: 'heart';
}
.togglebox {
   width: 100%;
   height: 100%;
   background: #ff0000;
   overflow: auto;
   overflow: hidden;
   display: none;
}
.tabadoo{
   position: absolute;
   top: 150px;
   left: 20px;
   font-size: 35px;
}
.tabadoo a { font-family: 'heart';}
.tabadoo li { display: inline;}

/* tab information containers */
/* Main container */
#holdchange {
   position: absolute;
   overflow: hidden;
   width: 80%;
   height: 60%;
   top: 200px;
   left: 14px;
}
/* internal boxes */
#boxinfotoggle {
   background: @purplebg;
   -webkit-transition: 2s; /* Safari */
   transition: 2s;
   z-index:9999999!important;/* it won't change ;_; */
}
#statsboxtoggle {
   background: @greenbg;
   -webkit-transition: 2s; /* Safari */
   transition: 2s;
}
#staffinfotoggle {
   background: @yellowbg;
   -webkit-transition: 2s; /* Safari */
   transition: 2s;
}
#otmboxtoggle {
   background: @bluebg;
   -webkit-transition: 2s; /* Safari */
   transition: 2s;
}
#ctboxtoggle {
   background: @oragebg;
   -webkit-transition: 2s; /* Safari */
   transition: 2s;
}
/*credit boxes */
#credit{
   position: absolute;
   bottom: 0px;
   height: 90px;
   width: 100%;
}
#innercred{
   margin-left:auto;
   margin-right:auto;
   position: relative;
   width: 95%;
   text-align:center;
   opacity: 0.7;
   
}

[Tumbleweed]

Thanks, I could have copied the code you put in your first post but I wanted to be sure I had the current version since you got the fiddle to work. How have you added that so I can replicate it exactly? In your global header, in your wrapper template? Meanwhile, I'll just toss it in my wrapper and see if I get the same thing you do, to start with. Edit: Actually looking at that code you must have it in your wrapper. Edit again: Not sure if I'll have time to figure this out tonight as I'm getting sleepy but will work fiddle with it a few more minutes.

[Comatose]

wrapper template, above the head (wanted the ads on the right side of the screen)

[Tumbleweed]

May 1, 2016 20:23:16 GMT -8 Comatose said:

wrapper template, above the head (wanted the ads on the right side of the screen)

I have it on my test site and it's working fine. I was and am missing some elements, like the hearts and was missing your background of the two characters so I added the background in with just a link. By the way, your background is weird because when I view elements it moves up out of the way which I have never had happen before. Not that it has anything to do with it not working on your site but that is just odd but that's why I felt the need to add it, just in case it was somehow messing things up.

Anyway, I'm trying to work out what is different on your site than my test site: abetteramerica.freeforums.net/ (Ignore the borders, I just add those when testing just to make sure things are the width/height and where they should be.


I guess the next step is for you to give me your whole wrapper template (sorry, was hoping I wouldn't need it) since I can't be sure there isn't something that might be messing something up. (I know you gave me the majority of it. You can pm me that if you want or post it here. I'll probably be heading for bed in a few minutes so it'll have to wait until tomorrow to do anything further on this.

[Comatose]

hah yah the background does that for some reason, I have no clue why but it is kind of entertaining to watch it exponentially get larger/smaller. I'll message you the pbt file since it will probably be quicker than copy+pasting everything.

[Tumbleweed]

May 2, 2016 10:53:06 GMT -8 Comatose said:

hah yah the background does that for some reason, I have no clue why but it is kind of entertaining to watch it exponentially get larger/smaller. I'll message you the pbt file since it will probably be quicker than copy+pasting everything.

Well, for sure that makes your site even more unique. lol. Got the file, uploaded it to my test site and replied in pm.