The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Html Jquery help

4 posters

Go down

Solved Html Jquery help

Post by --kml-- February 10th 2010, 04:49

Instead of asking whether jquery works or not in this Thread , i think i will ask on how to make it work instead Very Happy



Now , if you visit this website : http://www.hotajax.org/demo/jquery/SlideBox/SlideBox/index.html

it , is an example of jquery box sliding plugin , and i tried to follow it in my html page : http://kmlforumhl.forumotion.net/Slide-Panel-Bottom-h20.htm

but it didnt work Html Jquery help Redface
so , if there are any one who can help me? Mr. Green

im using PunBB

Omg edit : ooops i posted this in a wrong section Confused can someone move this in the scripting problem section?
--kml--
--kml--
Forumember

Male Posts : 456
Reputation : 1
Language : english

http://kmlforumhl.forumotion.net/forum.htm

Back to top Go down

Solved Re: Html Jquery help

Post by ankillien February 10th 2010, 07:05

Hello,

I think jQuery won't work unless you host the JS files somewhere and link them via <script> tag, like this..

Code:
<script type="text/javascript" src="JS FILE URL HERE">
ankillien
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

Back to top Go down

Solved Re: Html Jquery help

Post by --kml-- February 10th 2010, 14:59

Edit :

i tried what you said , and it only works 10% , as in , only the word changes , the block doesnt moves Sad

http://kmlforumhl.forumotion.net/Slide-Panel-Bottom-h20.htm
--kml--
--kml--
Forumember

Male Posts : 456
Reputation : 1
Language : english

http://kmlforumhl.forumotion.net/forum.htm

Back to top Go down

Solved Re: Html Jquery help

Post by ankillien February 10th 2010, 15:34

You can create new HTML page on your forum and put the code from JS file there. Save it with desired name and use its link in this code...

Code:
<script type="text/javascript" src="JS FILE URL HERE">

In short, you can host the JS file on your forum itself as a HTML page Very Happy
ankillien
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

Back to top Go down

Solved Re: Html Jquery help

Post by --kml-- February 10th 2010, 16:02

i already tried uploading somewhere else , and put the url but it didnt work Sad instead only the word changes , not the block
--kml--
--kml--
Forumember

Male Posts : 456
Reputation : 1
Language : english

http://kmlforumhl.forumotion.net/forum.htm

Back to top Go down

Solved Re: Html Jquery help

Post by ankillien February 10th 2010, 16:04

--kml-- wrote:i already tried uploading somewhere else , and put the url but it didnt work Sad instead only the word changes , not the block

Normal file hosting sites won't help to upload JS file. Try hosting the JS code on your forum itself by creating new HTML page.
ankillien
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

Back to top Go down

Solved Re: Html Jquery help

Post by --kml-- February 10th 2010, 16:14

ankillien wrote:
--kml-- wrote:i already tried uploading somewhere else , and put the url but it didnt work Sad instead only the word changes , not the block

Normal file hosting sites won't help to upload JS file. Try hosting the JS code on your forum itself by creating new HTML page.

=0 instead , it didnt works at all Sad i didnt upload the js file , i took it directly from the tut page it self ( http://samuelgarneau.com/lab/slidebox/slidebox.js ) , only for temporary and to see if it works , and it didnt Sad

are there any way to make it works Shocked
--kml--
--kml--
Forumember

Male Posts : 456
Reputation : 1
Language : english

http://kmlforumhl.forumotion.net/forum.htm

Back to top Go down

Solved Re: Html Jquery help

Post by RoNo February 11th 2010, 00:10

Additional sheets are required for it to work:

slidebox-my-own-style.css
slidebox.css
jquery.js
slidebox.js


Sam's page
Code:
<head>
   <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
   <title>Samuel Garneau dot com - jQuery : Slide Panel</title>
   
   <link rel="stylesheet" href="http://samuelgarneau.com/default.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="slidebox-my-own-style.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="slidebox.css" type="text/css" media="screen" />
   
   <script src="jquery.js" type="text/javascript"></script>

   <script src="slidebox.js" type="text/javascript"></script>
   <script>
   $(document).ready(function(){
   
      $("#testZone").slideBox({width: "100%", height: "200px", position: "top"});
   });
   </script>

</head>
<body>
   <div id="testZone">
      <ul id="list-1" class="list">
          <li class="header">Lorem lispum.</li>
          <li class="item">In blandit turpis.</li>

         <li class="item">Cras a mi at odio.</li>
         <li class="item">Vivamus egestas urna.</li>
         <li class="item">Furce gravida lectus.</li>
      </ul>
      
      <ul id="list-2" class="list">
          <li class="header">Lorem lispum.</li>
          <li class="item">In blandit turpis.</li>

         <li class="item">Cras a mi at odio.</li>
         <li class="item">Vivamus egestas urna.</li>
         <li class="item">Furce gravida lectus.</li>
      </ul>
      
      <ul id="list-3" class="list">
          <li class="header">Lorem lispum.</li>
          <li class="item">In blandit turpis.</li>

         <li class="item">Cras a mi at odio.</li>
         <li class="item">Vivamus egestas urna.</li>
         <li class="item">Furce gravida lectus.</li>
      </ul>
      
      <ul id="list-4" class="list">
          <li class="header">Lorem lispum.</li>
          <li class="item">In blandit turpis.</li>

         <li class="item">Cras a mi at odio.</li>
         <li class="item">Vivamus egestas urna.</li>
         <li class="item">Furce gravida lectus.</li>
      </ul>
   </div>

You can get by with linking the jquery.js sheet only
and adding the others to your content. (if need be)
I have an example using this method *here
(transparent "open panel" button at top of page)
RoNo
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: Html Jquery help

Post by --kml-- February 11th 2010, 05:27

RoNo wrote:Additional sheets are required for it to work:

slidebox-my-own-style.css
slidebox.css
jquery.js
slidebox.js


Sam's page
Code:
<head>
   <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
   <title>Samuel Garneau dot com - jQuery : Slide Panel</title>
   
   <link rel="stylesheet" href="http://samuelgarneau.com/default.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="slidebox-my-own-style.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="slidebox.css" type="text/css" media="screen" />
   
   <script src="jquery.js" type="text/javascript"></script>

   <script src="slidebox.js" type="text/javascript"></script>
   <script>
   $(document).ready(function(){
   
      $("#testZone").slideBox({width: "100%", height: "200px", position: "top"});
   });
   </script>

</head>
<body>
   <div id="testZone">
      <ul id="list-1" class="list">
          <li class="header">Lorem lispum.</li>
          <li class="item">In blandit turpis.</li>

         <li class="item">Cras a mi at odio.</li>
         <li class="item">Vivamus egestas urna.</li>
         <li class="item">Furce gravida lectus.</li>
      </ul>
      
      <ul id="list-2" class="list">
          <li class="header">Lorem lispum.</li>
          <li class="item">In blandit turpis.</li>

         <li class="item">Cras a mi at odio.</li>
         <li class="item">Vivamus egestas urna.</li>
         <li class="item">Furce gravida lectus.</li>
      </ul>
      
      <ul id="list-3" class="list">
          <li class="header">Lorem lispum.</li>
          <li class="item">In blandit turpis.</li>

         <li class="item">Cras a mi at odio.</li>
         <li class="item">Vivamus egestas urna.</li>
         <li class="item">Furce gravida lectus.</li>
      </ul>
      
      <ul id="list-4" class="list">
          <li class="header">Lorem lispum.</li>
          <li class="item">In blandit turpis.</li>

         <li class="item">Cras a mi at odio.</li>
         <li class="item">Vivamus egestas urna.</li>
         <li class="item">Furce gravida lectus.</li>
      </ul>
   </div>

You can get by with linking the jquery.js sheet only
and adding the others to your content. (if need be)
I have an example using this method *here
(transparent "open panel" button at top of page)

i did include all those , but still didnt work Sad
--kml--
--kml--
Forumember

Male Posts : 456
Reputation : 1
Language : english

http://kmlforumhl.forumotion.net/forum.htm

Back to top Go down

Solved Re: Html Jquery help

Post by RoNo February 11th 2010, 10:31

Linked pages should contain script or css only...
Like this
Code:
(function($){
      
      $.fn.slideBox = function(params){
      
         var content = $(this).html();
         var defaults = {
            width: "100%",
            height: "200px",
            position: "top"         // Possible values : "top", "bottom"
         }
         
         // extending the fuction
         if(params) $.extend(defaults, params);
         
         var divPanel = $("<div class='slide-panel'>");
         var divContent = $("<div class='content'>");
      
         $(divContent).html(content);
         $(divPanel).addClass(defaults.position);
         $(divPanel).css("width", defaults.width);
         
         // centering the slide panel
         $(divPanel).css("left", (100 - parseInt(defaults.width))/2 + "%");
      
         // if position is top we're adding
         if(defaults.position == "top")
            $(divPanel).append($(divContent));
         
         // adding buttons
         $(divPanel).append("<div class='slide-button'>Open Panel</div>");
         $(divPanel).append("<div style='display: none' id='close-button' class='slide-button'>Close</div>");
         
         if(defaults.position == "bottom")
            $(divPanel).append($(divContent));
         
         $(this).replaceWith($(divPanel));
         
         // Buttons action
         $(".slide-button").click(function(){
            if($(this).attr("id") == "close-button")
               $(divContent).animate({height: "0px"}, 1000);
            else
               $(divContent).animate({height: defaults.height}, 1000);
            
            $(".slide-button").toggle();
         });
      };
      
})(jQuery);
No tags/other info should be added...
Such as this
Code:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>jQuery Slider Menu</title></head>
<body></body></html>

Anyway... I had time to go to your site & create it for you *here

It links one sheet only (added to your Html pages list)
here > http://kmlforumhl.forumotion.net/jquery-js-h26.htm

I've added code from the other (3) sheets to the page itself
to avoid any .js & .css Html page creation/linking issues.


Here is the entire code I used for the page
Code:
<head>
<!--- Begin jQuery Sliding Panel --->


   <script src="http://kmlforumhl.forumotion.net/jquery-js-h26.htm" type="text/javascript"></script>
   

   <script>
      $(document).ready(function(){
      
         $("#testZone").slideBox({width: "100%", height: "200px", position: "top"});
      });
   </script>

   


<!--- Link sheet #1: slidebox.js --->

   <script  type="text/javascript">

   
   (function($){
      
      $.fn.slideBox = function(params){
      
         var content = $(this).html();
         var defaults = {
            width: "100%",
            height: "200px",
            position: "top"         // Possible values : "top", "bottom"
         }
         
         // extending the fuction
         if(params) $.extend(defaults, params);
         
         var divPanel = $("<div class='slide-panel'>");
         var divContent = $("<div class='content'>");
      
         $(divContent).html(content);
         $(divPanel).addClass(defaults.position);
         $(divPanel).css("width", defaults.width);
         
         // centering the slide panel
         $(divPanel).css("left", (100 - parseInt(defaults.width))/2 + "%");
      
         // if position is top we're adding
         if(defaults.position == "top")
            $(divPanel).append($(divContent));
         
         // adding buttons
         $(divPanel).append("<div class='slide-button'>Open Panel</div>");
         $(divPanel).append("<div style='display: none' id='close-button' class='slide-button'>Close</div>");
         
         if(defaults.position == "bottom")
            $(divPanel).append($(divContent));
         
         $(this).replaceWith($(divPanel));
         
         // Buttons action
         $(".slide-button").click(function(){
            if($(this).attr("id") == "close-button")
               $(divContent).animate({height: "0px"}, 1000);
            else
               $(divContent).animate({height: defaults.height}, 1000);
            
            $(".slide-button").toggle();
         });
      };
      
})(jQuery);
   
   </script>
   
      
   
   
<!--- Link sheet #2: slidebox.css --->   

<style type="text/css">

body {
   margin: 0;
   padding: 0px 0 0;
}

.slide-panel {
   z-index: 25;
   width: 5px;
   position: absolute;
}

.bottom {
   bottom: 0;
}

.right {
}

.left {
   position: absolute;
   left: 0;
}

.top {
   top: 0;
}

.content {
   margin-left: auto;
   margin-right: auto;
   z-index: 10;
   overflow: hidden;
   text-align: left;
   background-color: #343434;
   height: 0;
   width: 100%;
   color: #fff;
}

.slide-button {
   margin-left: auto;
   margin-right: auto;
        margin-top: 7px;
   position: relative;
   width: 110px;
   z-index: 20;
   cursor: pointer;
   height: 26px;
   padding-top: 10px;
   text-align: center;
}

.slide-button:hover {
   color: #9f9d8e;
}


</style>




<!--- Link sheet #3: slidebox-my-own-style.css --->

<style type="text/css">


/* @override http://samuelgarneau.com/slidebox.css */

.slide-button {
   margin-left: auto;
   margin-right: auto;
   cursor: pointer;
   color: #4c5153;
   background-color: transparent;
}

.slide-button:hover {
   color: #9f9d8e;
}

#workspace {
   padding-top: 50px;
}

#list-1 {
   display: inline;
   float: left;
}

#list-2 {
   display: inline;
   float: left;
}

#list-3 {
   float: left;
}

#list-4 {
   float: left;
}

ul.list {
   line-height: 20px;
   list-style-type: none;
   width: 20%;
   font-size: 0.85em;
}

ul.list li {
   border-bottom: 1px solid rgba(73,81,84,0.49);
   padding-top: 3px; padding-left:20px;
   padding-bottom: 3px;
   cursor: pointer;
}

ul.list li:hover {
   color: #9f9d8e;
}

ul.list li.header {
   color: #e56f03;
   letter-spacing: 3px;
   padding-bottom: 20px;
   font-variant: small-caps;
   font-size: 1.7em;
   margin-top: 10px;
   cursor: text;
}

ul.list li.header:hover {
   font-size: 1.7em;
}

label {
   display: block;
}


ul.params {
   font-size: 0.9em;
   font-weight: bold;
   padding-bottom: 30px;
   margin: 0;
}

ul.params li span {
   font-weight: normal;
   font-style: normal;
}

#testZone a {
   background-color: #97ad7e;
   text-decoration: none;
   color: #fff;
   padding: 3px;
}

ul.list a {
   color: #ffffff;
}

ul.list a:hover {
   color: #9f9d8e;
}



</style>

</head>

<body>
   <div id="testZone">
      <ul id="list-1" class="list">
          <li class="header">Lorem ipsum</li>
          <li class="item"><a href="http://zone2.forumotion.net">Zone II Music - Games - Testing</a></li>

         <li class="item">Important Links</li>

         <li class="item">Important Links</li>
         <li class="item">Important Links</li>
      </ul>
      
      <ul id="list-2" class="list">
          <li class="header">Lorem ipsum</li>
          <li class="item">Important Links</li>

         <li class="item">Important Links</li>
         <li class="item">Important Links</li>
         <li class="item">Important Links.</li>
      </ul>
      
      <ul id="list-3" class="list">
          <li class="header">Lorem ipsum</li>
          <li class="item">Important Links</li>

         <li class="item">Important Links</li>
         <li class="item">Important Links</li>
         <li class="item">Important Links</li>
      </ul>
      
      <ul id="list-4" class="list">
          <li class="header">Lorem ipsum</li>

          <li class="item">Important Links</li>

         <li class="item">Important Links</li>
         <li class="item">Important Links</li>
         <li class="item">Important Links</li>
      </ul>
   </div>



<!--- End jQuery Sliding Panel / RoNo :^)> --->



</body>
Have fun customizing your panel Cool
RoNo
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: Html Jquery help

Post by --kml-- February 11th 2010, 13:24

omg , thx !!!! ! Mr. Green

xDDDDDDD i knew that i should post my problems at forumotion Very Happy
as the people here is very kind xD

thx again Very Happy

You can now close this thread Smile
but i will bookmark this thread though Very Happy just incase if i need to refer or something Mr. Green
--kml--
--kml--
Forumember

Male Posts : 456
Reputation : 1
Language : english

http://kmlforumhl.forumotion.net/forum.htm

Back to top Go down

Solved Re: Html Jquery help

Post by Sanket February 11th 2010, 13:38

Since this thread appears to be solved, I will lock this thread and mark it as solved.
Html Jquery help 2j4t5a8

Sanket Smile
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Back to top

- Similar topics

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