What is this?

DuxRawr · 02-11-2008, 03:33 PM

tis quite a sexy design

Iszak · 02-11-2008, 04:46 PM

Not exactly like the habbo one, but it's quite similar if you're interested. I suggest learning jQuery over Prototype, the prototype selectors are extremely slow especially #id last time I checked. Plus it's got to 'piggy back' to scriptalous for effects which annoys me. Anyhow here is the code.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>jQuery Slider</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $('.content').css('display', 'none');

  $('.link').click(function(){
    var id = $(this).attr('id').substr(9);
    var content = $('#faq-content-'+id);

    if (content.css('display') == 'none')
    {
      $('.content').slideUp('slow');
      content.slideDown('slow');
    }

    else
    {
      content.slideUp('slow');
    }
  });

  $('.close').click(function(){
    $(this).parent().slideUp('slow');
  });
});
</script>

<style type="text/css">
html
{
  border: 0;
  overflow: auto;
}

body
{
  margin: 0;
  padding: 0;
  font-size: x-small;
  font-family: Verdana;
}

#faqs
{
  width: 530px;
  color: #808080;
  list-style: none;
}

#faqs li a
{
  color: #808080;
  cursor: pointer;
  text-decoration: none;
}

#faqs li a:hover
{
  color: #76c7e6;
}

.link:hover
{
  padding-left: 8px;
}

#faqs li p
{
  margin: 0;
  color: #808080;
  margin-top: 2px;
  padding: 8px 8px 25px;
  background-color:#efefef;
}

.close
{
  float: right;
  color: #808080;
}
</style>

</head>
<body>

<div id="container">
  <ul id="faqs">
    <li>&gt;
      <a id="faq-link-1" class="link" href="#">What commands do you get with Habbo Club?</a>
      <p id="faq-content-1" class="content">
        <img align="right" src="http://images.habbohotel.co.uk/c_images/album98/hc_oillamp.gif">
        <b>:chooser</b> ? This brings up a list of all Habbos in the room<br><br>
        <b>:furni</b> ? This brings up a list of all items of furni in the room (Only available to Habbos who have been
        in Habbo Club for more than one year).<br>To use these commands you just type them where you type to speak and
        click return or enter, then a pop up will appear containing the list.<br><br>
        <br>
        <a class="close" href="#">Close FAQ</a>
      </p>
    </li>
    <li>&gt;
      <a id="faq-link-2" class="link" href="#">How do I get the special Habbo Club clothes, furni and room layouts?</a>
      <p id="faq-content-2" class="content">
        Look in your Hand - within 3 days after you join the club, you'll have an special green HC sofa in there that
        only Habbo Club members can get. Every month for the first eleven months, you'll get one item of special HC furni
        as a member of the club. To get your cool clothes, hair, and hats etc, go to 'Update my Habbo ID' and scroll
        through the options - you'll see the Habbo Club stuff there. To get the special room layouts, make a new guest 
        room and you'll see the Habbo Club options in the Room-O-Matic.<br><br>
        <br>
        <a class="close" href="#">Close FAQ</a>
      </p>
    </li>
    <li>&gt;
      <a id="faq-link-3" class="link" href="#">I've seen someone with an HC badge - what does that mean?</a>
      <p id="faq-content-3" class="content">
        <img alt="habbo HC 1" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_1.gif">
        <img alt="habbo HC 2" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_2.gif">
        <img alt="habbo HC 3" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_3.gif">
        <img alt="habbo HC 4" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_4.gif">
        <br>
        It means that they're a member of Habbo Club.
        <a class="close" href="#">Close FAQ</a>
      </p>
    </li>
  </ul>
</div>

</body>
</html>

Here's a pastebin one where you can see the example! http://pastebin.me/490dd8e2e80bc enjoy

Oh just for the record - I coded it all.

HabbDance · 02-11-2008, 05:04 PM

Originally Posted by Iszak

Not exactly like the habbo one, but it's quite similar if you're interested. I suggest learning jQuery over Prototype, the prototype selectors are extremely slow especially #id last time I checked. Plus it's got to 'piggy back' to scriptalous for effects which annoys me. Anyhow here is the code.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>jQuery Slider</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $('.content').css('display', 'none');

  $('.link').click(function(){
    var id = $(this).attr('id').substr(9);
    var content = $('#faq-content-'+id);

    if (content.css('display') == 'none')
    {
      $('.content').slideUp('slow');
      content.slideDown('slow');
    }

    else
    {
      content.slideUp('slow');
    }
  });

  $('.close').click(function(){
    $(this).parent().slideUp('slow');
  });
});
</script>

<style type="text/css">
html
{
  border: 0;
  overflow: auto;
}

body
{
  margin: 0;
  padding: 0;
  font-size: x-small;
  font-family: Verdana;
}

#faqs
{
  width: 530px;
  color: #808080;
  list-style: none;
}

#faqs li a
{
  color: #808080;
  cursor: pointer;
  text-decoration: none;
}

#faqs li a:hover
{
  color: #76c7e6;
}

.link:hover
{
  padding-left: 8px;
}

#faqs li p
{
  margin: 0;
  color: #808080;
  margin-top: 2px;
  padding: 8px 8px 25px;
  background-color:#efefef;
}

.close
{
  float: right;
  color: #808080;
}
</style>

</head>
<body>

<div id="container">
  <ul id="faqs">
    <li>&gt;
      <a id="faq-link-1" class="link" href="#">What commands do you get with Habbo Club?</a>
      <p id="faq-content-1" class="content">
        <img align="right" src="http://images.habbohotel.co.uk/c_images/album98/hc_oillamp.gif">
        <b>:chooser</b> ? This brings up a list of all Habbos in the room<br><br>
        <b>:furni</b> ? This brings up a list of all items of furni in the room (Only available to Habbos who have been
        in Habbo Club for more than one year).<br>To use these commands you just type them where you type to speak and
        click return or enter, then a pop up will appear containing the list.<br><br>
        <br>
        <a class="close" href="#">Close FAQ</a>
      </p>
    </li>
    <li>&gt;
      <a id="faq-link-2" class="link" href="#">How do I get the special Habbo Club clothes, furni and room layouts?</a>
      <p id="faq-content-2" class="content">
        Look in your Hand - within 3 days after you join the club, you'll have an special green HC sofa in there that
        only Habbo Club members can get. Every month for the first eleven months, you'll get one item of special HC furni
        as a member of the club. To get your cool clothes, hair, and hats etc, go to 'Update my Habbo ID' and scroll
        through the options - you'll see the Habbo Club stuff there. To get the special room layouts, make a new guest 
        room and you'll see the Habbo Club options in the Room-O-Matic.<br><br>
        <br>
        <a class="close" href="#">Close FAQ</a>
      </p>
    </li>
    <li>&gt;
      <a id="faq-link-3" class="link" href="#">I've seen someone with an HC badge - what does that mean?</a>
      <p id="faq-content-3" class="content">
        <img alt="habbo HC 1" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_1.gif">
        <img alt="habbo HC 2" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_2.gif">
        <img alt="habbo HC 3" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_3.gif">
        <img alt="habbo HC 4" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_4.gif">
        <br>
        It means that they're a member of Habbo Club.
        <a class="close" href="#">Close FAQ</a>
      </p>
    </li>
  </ul>
</div>

</body>
</html>

Here's a pastebin one where you can see the example! http://pastebin.me/490dd8e2e80bc enjoy

Oh just for the record - I coded it all.

Wow, well done! I'll be using this. Iszak should be a coding community member. +rep

Iszak · 02-11-2008, 05:08 PM

Thank you, anything else you want?

HabbDance · 02-11-2008, 05:15 PM

Originally Posted by Iszak

Thank you, anything else you want?

Your welcome, and I have to spread :[. I'll put in in my sig.
Umm... anything else I need..
a usersystem, but I don't know if you'd do that for free x]

Turbocom · 02-11-2008, 08:24 PM

Originally Posted by Iszak

Not exactly like the habbo one, but it's quite similar if you're interested. I suggest learning jQuery over Prototype, the prototype selectors are extremely slow especially #id last time I checked. Plus it's got to 'piggy back' to scriptalous for effects which annoys me. Anyhow here is the code.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>jQuery Slider</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $('.content').css('display', 'none');

  $('.link').click(function(){
    var id = $(this).attr('id').substr(9);
    var content = $('#faq-content-'+id);

    if (content.css('display') == 'none')
    {
      $('.content').slideUp('slow');
      content.slideDown('slow');
    }

    else
    {
      content.slideUp('slow');
    }
  });

  $('.close').click(function(){
    $(this).parent().slideUp('slow');
  });
});
</script>

<style type="text/css">
html
{
  border: 0;
  overflow: auto;
}

body
{
  margin: 0;
  padding: 0;
  font-size: x-small;
  font-family: Verdana;
}

#faqs
{
  width: 530px;
  color: #808080;
  list-style: none;
}

#faqs li a
{
  color: #808080;
  cursor: pointer;
  text-decoration: none;
}

#faqs li a:hover
{
  color: #76c7e6;
}

.link:hover
{
  padding-left: 8px;
}

#faqs li p
{
  margin: 0;
  color: #808080;
  margin-top: 2px;
  padding: 8px 8px 25px;
  background-color:#efefef;
}

.close
{
  float: right;
  color: #808080;
}
</style>

</head>
<body>

<div id="container">
  <ul id="faqs">
    <li>&gt;
      <a id="faq-link-1" class="link" href="#">What commands do you get with Habbo Club?</a>
      <p id="faq-content-1" class="content">
        <img align="right" src="http://images.habbohotel.co.uk/c_images/album98/hc_oillamp.gif">
        <b>:chooser</b> ? This brings up a list of all Habbos in the room<br><br>
        <b>:furni</b> ? This brings up a list of all items of furni in the room (Only available to Habbos who have been
        in Habbo Club for more than one year).<br>To use these commands you just type them where you type to speak and
        click return or enter, then a pop up will appear containing the list.<br><br>
        <br>
        <a class="close" href="#">Close FAQ</a>
      </p>
    </li>
    <li>&gt;
      <a id="faq-link-2" class="link" href="#">How do I get the special Habbo Club clothes, furni and room layouts?</a>
      <p id="faq-content-2" class="content">
        Look in your Hand - within 3 days after you join the club, you'll have an special green HC sofa in there that
        only Habbo Club members can get. Every month for the first eleven months, you'll get one item of special HC furni
        as a member of the club. To get your cool clothes, hair, and hats etc, go to 'Update my Habbo ID' and scroll
        through the options - you'll see the Habbo Club stuff there. To get the special room layouts, make a new guest 
        room and you'll see the Habbo Club options in the Room-O-Matic.<br><br>
        <br>
        <a class="close" href="#">Close FAQ</a>
      </p>
    </li>
    <li>&gt;
      <a id="faq-link-3" class="link" href="#">I've seen someone with an HC badge - what does that mean?</a>
      <p id="faq-content-3" class="content">
        <img alt="habbo HC 1" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_1.gif">
        <img alt="habbo HC 2" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_2.gif">
        <img alt="habbo HC 3" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_3.gif">
        <img alt="habbo HC 4" src="http://images.habbohotel.co.uk/c_images/album103/habbo_HC_4.gif">
        <br>
        It means that they're a member of Habbo Club.
        <a class="close" href="#">Close FAQ</a>
      </p>
    </li>
  </ul>
</div>

</body>
</html>

Here's a pastebin one where you can see the example! http://pastebin.me/490dd8e2e80bc enjoy

Oh just for the record - I coded it all.

Plus rep you are amazing ;D

~~Calon~~ · 03-11-2008, 03:57 AM

Originally Posted by TomSpit

Agree X2.
USE TEH POWERZ OF SCRIPTOSUCULANTICIOUS.

what the hell..

Iszak, I have noticed how much you contribute, and feel the need to +REP you.

Thread: What is this?

Thread Tools

Posting Permissions