Slide Transition via Javascript?

As the title says, is this possible? I saw this slide function in action on the link below. What in particular I want to know about it are as follow: first, whether the sliding action can work in general; second, whether each function in it can be anchored to a specific ID or class; third, if said functions can be anchored, whether the javascript page will only affect the posts that have said IDs or classes.

Thank you for your time.

EDIT: Link - http://backtoneverland.b1.jcink.com/index.php?showtopic=1802

Hello @Eden Alexandria,

Of course, it is possible with either normal JavaScript or jQuery. If you plan on using jQuery you can read up on them here. If not, I can provide an example.

I am more used to reading Javascript, though I am still extremely inexperienced with writing it. I would like to have an example of this. I understand setting up the function and options; I get stumped on all the stringing and logic.

Well, for example you have the following HTML :

Code:

<input class="contentToggler" type="button" value="Toggle"/>
<div style="display:none" class="contentContainer">CONTENT</div>

Then your JavaScript :

Code:

$(function() {
  $('.contentContainer').hide(); // hide elements with the contentContainer class
 
  $('.contentToggler').click(function() {
    $(this).next().slideToggle(); // toggle the container ( which is NEXT to it )
  });
});

( I'll be using mainly jQuery for this example )

The first query on .contentContainer finds and sets all elements with this class to display:none;

The second query on .contentToggler applies a function that will be executed when it's clicked.

The third query is inside the function. this refers to the button you just clicked, and we use next() to move over to the next element which is .contentContainer. Once we're on it, we execute slideToggle() which will slide up or down depending on the display state.


It's a basic spoiler concept. With the example I gave you, you could put that script in JS codes management and it'll apply what's written to any elements that have the specified classes. Then you can use the HTML I gave you anywhere.


If you want a more simple example to play around with, here's one for HTML pages.

Code:

<input class="contentToggler" type="button" value="Toggle"/>
<div class="contentContainer">CONTENT</div>

<script type="text/javascript">
$(function() {
  $('.contentContainer').hide(); // hide elements with the contentContainer class
 
  $('.contentToggler').click(function() {
    $(this).next().slideToggle(); // toggle the container ( which is NEXT to it )
  });
});
</script>

Just make sure to choose "Use your forum header and footer", otherwise you'll need to include the jQuery library.

Alright. Now, with the link I provided, is it possible to make it toggle side-to-side? Also, is there a way to add buttons to it so that, when clicked, it performs the "toggle"? Would this work similarly to transitions? (The difference being that this would require JS and there is no hover functionality to it)


When listing the "pages" for each container, would it be done something like this:

Code:


<div class="contentContainer">
       <ul>
          <li><img src="images/01.jpg" alt="" /></li>
          <li><img src="images/02.jpg" alt="" /></li>
          <li><img src="images/03.jpg" alt="" /></li>
          <li><img src="images/04.jpg" alt="" /></li>
          <li><img src="images/05.jpg" alt="" /></li>
       </ul>
    </div>


Though, this is if I am toggling images. How would I go about integrating something like this but instead of images, specify only the "page" that is contained? Would I just keep something like this out, since only the classes themselves would be necessary? And similarly, would I do something like this in order to anchor an image to the "contentToggler"?

Then would I use CSS to anchor the image to the sides of a page wherever I want them? Or would this have to be done within the JS?

Well, jQuery-wise they only provide vertical sliding, unless you want to go and install jQueryUI. Anyhow, you can make a similar effect by using transitions on your element.

This is a quick HTML page example that provides a horizontal sliding, using only CSS to give the effect and JS to simply toggle the CSS classes.

Code:

<style>
.contentContainer {
  background:#DEF;
  border:1px solid #CDE;
  width:90%;
  padding:6px;
  overflow:hidden;
  transition:500ms;
}
 
.contentHidden {
  width:0%;
  visibility:hidden;
}
</style>

<a href="#" class="contentToggler">Toggle</a>
<div class="contentContainer">
CONTENT
</div>

<script>
$(function() {
  $('.contentContainer').addClass('contentHidden'); // add hidden class to all containers
 
  $('.contentToggler').click(function() {
    var container = $(this).next()[0]; // get container
   
    if (container) {
      // remove or add the class depending on the state
      if (/contentHidden/.test(container.className)) {
        container.className = container.className.replace(/contentHidden/g, '');
      } else container.className += ' contentHidden';
    }
    return false;
  });
});
</script>

( make sure to use your forum's header and footer for this example )

You can change the button and container tags to whatever tag you want. In this example I changed it to an anchor, so inside you can place an image instead of text, if you want.

There should be no problem with the amount of content contained in the container. I think the only difference would be the transition speed based on the total width or height of the element. In this case it's width from 0% to 90% so the transition should always be the same.

Okay, so I have added this to an HTML page with some slight alterations.

Code:


<style>
.pageContainer1 {
  background: #DEF;
  border: 1px solid #CDE;
  width: 90%;
  padding: 6px;
  overflow: hidden;
  transition: 500ms;
}
 
.containerHidden1 {
  width: 0%;
  visibility: hidden;
}

.containerToggle {
  float: right;
  margin-top: 215px;
}
</style>

<script>
$(function() {
  $('.pageContainer1').addClass('containerHidden1'); // add hidden class to all containers
 
  $('.containerToggle').click(function() {
    var container = $(this).next()[0]; // get container
   
    if (container) {
      // remove or add the class depending on the state
      if (/containerHidden1/.test(container.className)) {
        container.className = container.className.replace(/containerHidden1/g, '');
      } else container.className += ' containerHidden1';
    }
    return false;
  });
});
</script>


Few things. First, will the class I put down for the toggle work properly with the JS the way it is? Second, when clicking the image I have for the toggle, it does not register. Mainly, it's just an image and not a button. Is there a way to fix that? Third, would there be a way to have a "previous" function where, on click of a different button, the toggle returns to an earlier page?

1. ) It appears it should work without problem, although if you're using multiple classes you'll need to separate them by a comma in the query select. ( e.g. $('.class1, .class2, .class3') )

2. ) Does the image or it's parent have the toggle class ?

3. ) What do you mean by "page" ? From what you said I'm thinking of tabs, like we have on the homepage :

I am testing it with this template, there being 3 "pages" in it I am currently using webkit scrollbars to move through them:

Code:


<link href='http://fonts.googleapis.com/css?family=Quattrocento:700' rel='stylesheet' type='text/css'> <center>
  <div class="containerToggle" style="float: right; margin-top: 215px; margin-right: 100px;"><img src="http://i.imgur.com/sEqEGEK.png" /></div>
  <div class="ultramain">
    <div style="width: 100%; height: 20px;"></div>
    <div class="ultraname">EDEN D. SCYTHE</div>
    <div class="ultralyr">CAPTAIN OF THE DARK SOUL PIRATES</div>
    <div class="ultrastat">"WATCH OUT, MEAT-HEADS! JIGOKU IS COMING FOR YOU!"</div><img src="http://i.imgur.com/j0DBvKk.png" class="ultraic">
    <div style="width: 100%; height: 50px;"></div>
    <div class="ultrafill">
      <table style="width: 1085px;">
        <tr>
          <div class="pageContainer1">
            <td class="ultrabasics">
              <div class="ultrainner">
                <div class="ultrainnerh">SOMETHING</div> HERE
                <p>
                  <div class="ultrainnerh">SOMETHING</div> HERE
                  <p>
                    <div class="ultrainnerh">SOMETHING</div> HERE
                    <p>
                      <div class="ultrainnerh">SOMETHING</div> HERE
                      <p>
                        <div class="ultrainnerh">SOMETHING</div> HERE
                        <p>
                          <div class="ultrainnerh">SOMETHING</div> HERE
                          <p>
              </div>
              <div class="ultrainner">
                <div class="ultrainnerh">POSITIVE</div> TRAIT
                <br>TRAIT
                <br>TRAIT
                <br>TRAIT
                <br>TRAIT
                <br>
                <p>
                  <div class="ultrainnerh">NEGATIVE</div> TRAIT
                  <br>TRAIT
                  <br>TRAIT
                  <br>TRAIT
                  <br>TRAIT
                  <br> </div>
          </div>
          </td>
    </div>
    <div class="pageContainer1">
      <td class="ultrabasics">
        <div class="ultratext" style="vertical-align:top">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          <br />
          <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          <br />
          <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </td>
    </div>
    <div class="pageContainer1">
      <td class="ultrabasics">
        <div class="ultratext" style="vertical-align:top">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
          TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
          TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
          TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT! </div>
      </td>
    </div>
    </tr>
    </table>
  </div>
  </div>
  <div class="ultracred">CULT OF BACK TO NEVERLAND
    <br>EDEN OF OP: PIRATE NATION</div>
</center>


CSS

Code:


.ultramain {
  background: #000000;
  width: 360px;
  padding: 30px;
  font-size: 10px;
  font-family: 'Quattrocento', serif;
  line-height: 16px;
  text-align: center;
  color: #F5F5F5;
}

.ultraic {
  float: left;
  border-radius: 0px;
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-top: -75px;
}

.ultralyr {
  background: #D1CCCC;
  padding: 2px 0px 0px 115px;
  text-align: center;
  font-family: 'Quattrocento', serif;
  font-size: 8px;
  letter-spacing: 1px;
  color: #000000;
  line-height: 10px;
}

.ultraname {
  padding-left: 105px;
  font-size: 20px;
  text-align: center;
}

.ultrastat {
  line-height: 12px;
  padding-left: 115px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ultrafill {
  width: 360px;
  height: 301px;
  overflow: auto;
  border-bottom: solid 10px #B50505;
}

.ultrafill::-webkit-scrollbar {
  height: 10px;
  background: #B50505;
}

.ultrafill::-webkit-scrollbar-thumb {
  background: #D1CCCC;
}

.ultrabasics {
  width: 340px;
  height: 260px;
  padding: 5px;
  font-size: 12px;
  font-family: 'Quattrocento', serif;
  line-height: 16px;
  text-align: justify;
  color: #D1CCCC;
}

.ultratext {
  overflow: auto;
  width: 330px;
  height: 260px;
  margin: 5px -10px 5px 5px;
  padding-right: 10px;
  color: #D1CCCC;
}

.ultratext::-webkit-scrollbar {
  width: 5px;
  background: #B50505;
}

.ultratext::-webkit-scrollbar-thumb {
  background: #D1CCCC;
}

.ultrainner {
  text-transform: uppercase;
  text-align: center;
  width: 330px;
  overflow: hidden;
  -webkit-column-count: 2;
}

.ultrainnerh {
  padding-top: 3px;
  width: 100%;
  font-size: 10px;
  font-family: 'Quattrocento', serif;
  background: #B50505;
  letter-spacing: 0px;
  margin-bottom: 10px;
}

.ultracred {
  clear: both;
  text-align: center;
  font-size: 8px;
  font-family: 'Quattrocento', serif;
  opacity: .7;
}


Should I instead make the div class into an img class? For the .containerToggle, I mean. And should I be doubling these up in the JS sections and Stylesheets? What went in the HTML page I mean.

I see what you mean by three pages. I think the best thing to do for what you want would be tabs. This way you can change which page you're looking at by clicking a specific tab.

The method I like to do for tabs is this :

Code:

<div id="tabBar">
  <a id="_box1" href="#">Box 1</a>
  <a id="_box2" href="#">Box 2</a>
  <a id="_box3" href="#">Box 3</a>
</div>
 
<div id="tabBox">
  <div id="box1" class="tab_box">
    You're viewing box 1 !
    <img src="http://i18.servimg.com/u/f18/18/21/41/30/fdf_ex10.png" alt=""/>
  </div>
   
  <div id="box2" class="tab_box">
    You're viewing box 2 !
    <img src="http://i18.servimg.com/u/f18/18/21/41/30/fdf_st10.png" alt=""/>
  </div>
   
  <div id="box3" class="tab_box">
    You're viewing box 3 !
    <img src="http://i18.servimg.com/u/f18/18/21/41/30/fdf_su10.png" alt=""/>
  </div>
</div>
   
<script type="text/javascript">//<[CDATA[
(function() {
  var tab = document.getElementById('tabBar').getElementsByTagName('A'),
      box = document.getElementById('tabBox').getElementsByTagName('DIV'),
      i = 0, j = box.length;
 
  // hide boxs by default
  for (; i < j; i++) if (/tab_box/.test(box[i].className)) box[i].style.display = 'none';
 
  // apply onclick handler
  for (i = 0, j = tab.length; i < j; i++) {
    tab[i].onclick = function() {
      var tab = document.getElementById('tabBar').getElementsByTagName('A'),
          box = document.getElementById('tabBox').getElementsByTagName('DIV'),
          activeBox = document.getElementById(this.id.slice(1)),
          i = 0, j = box.length;
     
      for (; i < j; i++) if (/tab_box/.test(box[i].className)) box[i].style.display = 'none'; // hide previously active boxes
     
      if (activeBox) activeBox.style.display = 'block'; // show the current box
     
      for (i = 0, j = tab.length; i < j; i++) if (/activeTab/.test(tab[i].className)) tab[i].className = tab[i].className.replace(/activeTab/g, ''); // remove the activeTab class from recently active tabs
      this.className += ' activeTab'; // make the current tab active
     
      return false;
    };
  }
 
  tab[0].click(); // click the first tab to activate it
})();
//]]></script>

That'll work regardless if you're using your forum header or not. Although it would need some reworking to work for multiple tab sets.

The problems I am running into with this are two things. First, the JS in the HTML page doesn't completely register; the </script> tag comes up in red as an error. Second, the links go to different pages. How would I make it so that it changes the pages only within the specific body that I want?

For instance, if I wanted to put up an announcement at the top of the homepage that has multiple tabs, how would I go about keeping the links anchored to the contents of the announcements, rather than to different pages of the forum?