Jquery doubt
3 posters
Page 1 of 1
Jquery doubt
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.
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
Re: Jquery doubt
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
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
Re: Jquery doubt
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
How do I put java (Jquery) on my forum? :S
Dark_Jak_999- New Member
- Posts : 16
Reputation : 0
Language : Portuguese
Re: Jquery doubt
Try creating an Html page with this
Edit your links (downloads etc) in this section
then create a widget with an iframe of the page like this
Scroll down ⇒this page for an example
- 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
Re: Jquery doubt
Problem solved, thanks RoNo ^^
Dark_Jak_999- New Member
- Posts : 16
Reputation : 0
Language : Portuguese
Re: Jquery doubt
This topic is closed. Glad I could help. LockedRoNo |
General rules Tricks & Tips FAQ listing | For founders who lost their passwords About support requests by PM Announcements & Updates |
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum