The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Jquery doubt

View previous topic View next topic Go down

Solved Jquery doubt

Post by Dark_Jak_999 on June 28th 2010, 9:40 pm

Hi everyone.
Does anybody know why this code does not work on my forum?
It takes Jquery, Css and Html. I'm trying to put it in the home page menssage.


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta http-equiv="imagetoolbar" content="no" />
   <title>Feature List | Demo page</title>
   <link rel="stylesheet" href="style.css" />
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
   <script type="text/javascript" src="jquery.featureList-1.0.0.js"></script>
   <style type="text/css">
   
      h3 {
         margin: 0;   
         padding: 7px 0 0 0;
         font-size: 16px;
         text-transform: uppercase;
      }

      div#feature_list {
         width: 750px;
         height: 240px;
         overflow: hidden;
         position: relative;
      }

      div#feature_list ul {
         position: absolute;
         top: 0;
         list-style: none;   
         padding: 0;
         margin: 0;
      }

      ul#tabs {
         left: 0;
         z-index: 2;
         width: 320px;
      }

      ul#tabs li {
         font-size: 12px;
         font-family: Arial;
      }
      
      ul#tabs li img {
         padding: 5px;
         border: none;
         float: left;
         margin: 10px 10px 0 0;
      }

      ul#tabs li a {
         color: #222;
         text-decoration: none;   
         display: block;
         padding: 10px;
         height: 60px;
         outline: none;
      }

      ul#tabs li a:hover {
         text-decoration: underline;
      }

      ul#tabs li a.current {
         background:  url('http://img266.imageshack.us/img266/8906/kunai.png');
         color: #000;
      }

      ul#tabs li a.current:hover {
         text-decoration: none;
         cursor: default;
      }

      ul#output {
         right: 0;
         width: 463px;
         height: 240px;
         position: relative;
      }

      ul#output li {
         position: absolute;
         width: 463px;
         height: 240px;
      }

      ul#output li a {
         position: absolute;
         bottom: 10px;
         right: 10px;
         padding: 8px 12px;
         text-decoration: none;
         font-size: 11px;
         color: #FFF;
         background: #000;
         -moz-border-radius: 5px;
      }
      
      ul#output li a:hover {
         background: #F90;
         color:#000;
         font:Tahoma, Geneva, sans-serif;
         
      }
   </style>
   <script language="javascript">
      $(document).ready(function() {

         $.featureList(
            $("#tabs li a"),
            $("#output li"), {
               start_item   :   1
            }
         );

      });
   </script>
</head>
<body>
   <div id="content">

      <div id="feature_list">
         <ul id="tabs">
            <li>
               <a href="javascript:;">
                  <img src="http://img411.imageshack.us/img411/7259/akatsukicloud.png" />
                  <h3>Eventos</h3>
                  <span>Confere a lista de eventos/concursos

do Shinobi Society</span>
               </a>
            </li>
            <li>
               <a href="javascript:;">
                  <img src="http://img443.imageshack.us/img443/7223/curseseal.png" />
                  <h3>Manga</h3>
                  <span>Todas as semanas, o teu manga</span>
               </a>
            </li>
            <li>
               <a href="javascript:;">
                  <img src="http://img809.imageshack.us/img809/179/gaaralove.png" />
                  <h3>Episodios</h3>
                  <span>Faz download do novo episodio de

 Naruto Shippuuden</span>
               </a>
            </li>
         </ul>
         <ul id="output">
            <li>
               <img src="http://img227.imageshack.us/img227/8445/eventosu.png" />
               <a href="#">Ver eventos</a>
            </li>
            <li>
               <img src="http://img706.imageshack.us/img706/3128/sample1nc.jpg" />
               <a href="#">Ler online</a>
            </li>
            <li>
               <img src="http://img808.imageshack.us/img808/3738/episodios.jpg" />
               <a href="#">Download</a>
            </li>
         </ul>

      </div>
   </div>
</body>
</html>


Dark_Jak_999
New Member

Posts : 16
Reputation : 0
Language : Portuguese

Back to top Go down

Solved Re: Jquery doubt

Post by [GM]DoubleAgent on June 28th 2010, 9:55 pm

What is this code used for?!! Question

[GM]DoubleAgent
Forumember

Male Posts : 340
Reputation : 0
Language : Arabic

http://progamescheating.forumotion.com

Back to top Go down

Solved Re: Jquery doubt

Post by Dark_Jak_999 on June 28th 2010, 10:06 pm

It's supost to be something like this:


It's like a slideshow, people should be able to clik on the image and do some things like do the download of the Naruto episodes. My problem is that I don't know how to put that code correctly in my forum :S

Dark_Jak_999
New Member

Posts : 16
Reputation : 0
Language : Portuguese

Back to top Go down

Solved Re: Jquery doubt

Post by [GM]DoubleAgent on June 28th 2010, 10:09 pm

Emmmmm, I dont know...

But it works for me...

[GM]DoubleAgent
Forumember

Male Posts : 340
Reputation : 0
Language : Arabic

http://progamescheating.forumotion.com

Back to top Go down

Solved Re: Jquery doubt

Post by Dark_Jak_999 on June 28th 2010, 10:19 pm

That image is how it should be.However, when I try to put it in the forum it stays like this:


How do I put java (Jquery) on my forum? :S

Dark_Jak_999
New Member

Posts : 16
Reputation : 0
Language : Portuguese

Back to top Go down

Solved Re: Jquery doubt

Post by RoNo on June 29th 2010, 12:26 am

Try creating an Html page with this
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="imagetoolbar" content="no" />
  <title>Feature List | Demo page</title>
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://jqueryglobe.com/labs/feature_list/jquery.featureList-1.0.0.js"></script>
  <style type="text/css">
 
      h3 {
        margin: 0; 
        padding: 7px 0 0 0;
        font-size: 16px;
        text-transform: uppercase;
      }

      div#feature_list {
        width: 750px;
        height: 240px;
        overflow: hidden;
        position: relative;
      }

      div#feature_list ul {
        position: absolute;
        top: 0;
        list-style: none; 
        padding: 0;
        margin: 0;
      }

      ul#tabs {
        left: 0;
        z-index: 2;
        width: 320px;
      }

      ul#tabs li {
        font-size: 12px;
        font-family: Arial;
      }
     
      ul#tabs li img {
        padding: 5px;
        border: none;
        float: left;
        margin: 10px 10px 0 0;
      }

      ul#tabs li a {
        color: #222;
        text-decoration: none; 
        display: block;
        padding: 10px;
        height: 60px;
        outline: none;
      }

      ul#tabs li a:hover {
        text-decoration: underline;
      }

      ul#tabs li a.current {
        background:  url('http://img266.imageshack.us/img266/8906/kunai.png');
        color: #000;
      }

      ul#tabs li a.current:hover {
        text-decoration: none;
        cursor: default;
      }

      ul#output {
        right: 0;
        width: 463px;
        height: 240px;
        position: relative;
      }

      ul#output li {
        position: absolute;
        width: 463px;
        height: 240px;
      }

      ul#output li a {
        position: absolute;
        bottom: 10px;
        right: 10px;
        padding: 8px 12px;
        text-decoration: none;
        font-size: 11px;
        color: #FFF;
        background: #000;
        -moz-border-radius: 5px;
      }
     
      ul#output li a:hover {
        background: #F90;
        color:#000;
        font:Tahoma, Geneva, sans-serif;
       
      }
  </style>
  <script language="javascript">
      $(document).ready(function() {

        $.featureList(
            $("#tabs li a"),
            $("#output li"), {
              start_item  :  1
            }
        );

      });
  </script>
</head>
<body>
  <div id="content">

      <div id="feature_list">
        <ul id="tabs">
            <li>
              <a href="javascript:;">
                  <img src="http://img411.imageshack.us/img411/7259/akatsukicloud.png" />
                  <h3>Eventos</h3>
                  <span>Confere a lista de eventos/concursos <br />
do Shinobi Society</span>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                  <img src="http://img443.imageshack.us/img443/7223/curseseal.png" />
                  <h3>Manga</h3>
                  <span>Todas as semanas, o teu manga</span>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                  <img src="http://img809.imageshack.us/img809/179/gaaralove.png" />
                  <h3>Episodios</h3>
                  <span>Faz download do novo episodio de<br />
 Naruto Shippuuden</span>
              </a>
            </li>
        </ul>
        <ul id="output">
            <li>
              <img src="http://img227.imageshack.us/img227/8445/eventosu.png" />
              <a href="#">Ver eventos</a>
            </li>
            <li>
              <img src="http://img706.imageshack.us/img706/3128/sample1nc.jpg" />
              <a href="#">Ler online</a>
            </li>
            <li>
              <img src="http://img808.imageshack.us/img808/3738/episodios.jpg" />
              <a href="#">Download</a>
            </li>
        </ul>

      </div>
  </div>
</body>
</html>

Edit your links (downloads etc) in this section
Code:
        <ul id="output">
            <li>
              <img src="http://img227.imageshack.us/img227/8445/eventosu.png" />
              <a href="#">Ver eventos</a>
            </li>
            <li>
              <img src="http://img706.imageshack.us/img706/3128/sample1nc.jpg" />
              <a href="#">Ler online</a>
            </li>
            <li>
              <img src="http://img808.imageshack.us/img808/3738/episodios.jpg" />
                <a href="DOWNLOAD LINK HERE" target="_blank">Download</a>
            </li>
        </ul>

then create a widget with an iframe of the page like this
Code:
<center><iframe src=http://Your New Html Page Address.htm marginheight=0 marginwidth=0 frameborder=0 height=285 scrolling=no width=750></iframe></center>

Scroll down this page for an example


Last edited by RoNo on June 29th 2010, 3:15 am; edited 1 time in total

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

Solved Re: Jquery doubt

Post by Dark_Jak_999 on June 29th 2010, 12:42 am

Problem solved, thanks RoNo ^^

Dark_Jak_999
New Member

Posts : 16
Reputation : 0
Language : Portuguese

Back to top Go down

Solved Re: Jquery doubt

Post by RoNo on June 29th 2010, 3:15 am


RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum