Html Jquery help
4 posters
Page 1 of 1
Html Jquery help
Instead of asking whether jquery works or not in this Thread , i think i will ask on how to make it work instead
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
so , if there are any one who can help me?
im using PunBB
Omg edit : ooops i posted this in a wrong section can someone move this in the scripting problem section?
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
so , if there are any one who can help me?
im using PunBB
Omg edit : ooops i posted this in a wrong section can someone move this in the scripting problem section?
Re: Html Jquery help
Hello,
I think jQuery won't work unless you host the JS files somewhere and link them via <script> tag, like this..
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- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: Html Jquery help
Edit :
i tried what you said , and it only works 10% , as in , only the word changes , the block doesnt moves
http://kmlforumhl.forumotion.net/Slide-Panel-Bottom-h20.htm
i tried what you said , and it only works 10% , as in , only the word changes , the block doesnt moves
http://kmlforumhl.forumotion.net/Slide-Panel-Bottom-h20.htm
Re: Html Jquery help
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...
In short, you can host the JS file on your forum itself as a HTML page
- 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
ankillien- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: Html Jquery help
i already tried uploading somewhere else , and put the url but it didnt work instead only the word changes , not the block
Re: Html Jquery help
--kml-- wrote:i already tried uploading somewhere else , and put the url but it didnt work 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- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: Html Jquery help
ankillien wrote:--kml-- wrote:i already tried uploading somewhere else , and put the url but it didnt work 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 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
are there any way to make it works
Re: Html Jquery help
Additional sheets are required for it to work:
slidebox-my-own-style.css
slidebox.css
jquery.js
slidebox.js
Sam's page
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)
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)
Re: Html Jquery help
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
Re: Html Jquery help
Linked pages should contain script or css only...
Like this
Such as this
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
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);
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>
Re: Html Jquery help
omg , thx !!!! !
xDDDDDDD i knew that i should post my problems at forumotion
as the people here is very kind xD
thx again
You can now close this thread
but i will bookmark this thread though just incase if i need to refer or something
xDDDDDDD i knew that i should post my problems at forumotion
as the people here is very kind xD
thx again
You can now close this thread
but i will bookmark this thread though just incase if i need to refer or something
Re: Html Jquery help
Since this thread appears to be solved, I will lock this thread and mark it as solved.
Sanket
Sanket
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Similar topics
» Pop-up box with html and jquery
» RollOver Nav HTML & JQuery
» Does HTML page have jquery installed?
» JQuery
» JQuery Help
» RollOver Nav HTML & JQuery
» Does HTML page have jquery installed?
» JQuery
» JQuery Help
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum