WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Slider on Sat Apr 10, 2010 11:09 pm

Behavior???


Registered Member
Registered Member
I require to make a Hogwarts Magazine, and for it to look as a Magazine, I need a Slider, Is there any HTML tags with which I can create it?

http://www.thedungeons.info

2 Re: Slider on Sun Apr 11, 2010 3:04 am

Krazy


Registered Member
Registered Member
What do you mean Slider?

3 Re: Slider on Sun Apr 11, 2010 11:30 am

Behavior???


Registered Member
Registered Member
If we click Page 3 , then Page 2 Slides in and if we click Page 3 , page three slides in, Just in One Single window

http://www.thedungeons.info

4 Re: Slider on Tue Apr 13, 2010 12:34 pm

ankillien

avatar
Administrator
Administrator
Hello,

It cannot be done with just HTML. You can use some javascript. See this one...
http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/

Click the 'demo' link to see how it works.

5 Re: Slider on Tue Apr 13, 2010 10:47 pm

Behavior???


Registered Member
Registered Member
Thats fine with me, But I downloaded it but i couldnt get the Codes, please

http://www.thedungeons.info

6 Re: Slider on Wed Apr 14, 2010 7:47 pm

ankillien

avatar
Administrator
Administrator
Behavior??? wrote:Thats fine with me, But I downloaded it but i couldnt get the Codes, please

The codes are there in the jPaginate.html file. You can open it in any text editor.

7 Re: Slider on Wed Apr 14, 2010 11:15 pm

Behavior???


Registered Member
Registered Member
Is It This?

Spoiler:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery Pagination - jPaginate</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="jPaginate - jQuery Pagination Plugin" />
<meta name="keywords" content="jquery, plugin, pagination, fancy" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<style>
body{
background: #a7c7dc url(bg.png) repeat-x top left;
font-family: verdana;
padding:0px;
margin:0px;
letter-spacing:2px;
}
.header{
position:absolute;
top:0px;
left:0px;
width:100%;
height:80px;
}
.header h1{
color:#fff;
font-size: 38px;
margin:0px 0px 0px 30px;
font-weight:100;
line-height:80px;
padding:0px;
}
.footer{
width:100%;
margin:10px 0px 5px 0px;
}
a img{
border:none;
outline:none;
}
.content{
margin-top:100px;
padding:0px;
bottom:0px;
}
.about{
width:100%;
height:400px;
background:transparent url(about.png) repeat-x top left;
border-top:2px solid #ccc;
border-bottom:2px solid #000;
}
.about .text{
width:16%;
margin:5px 2% 10px 2%;
height:380px;
float:left;
color:#FCFEF3;
font-size: 16px;
text-align:justify;
letter-spacing:0px;
}
.about .text h1{
border-bottom: 1px dashed #ccc;
color:#fff;
}
.demo{
width:580px;
padding:10px;
margin:10px auto;
border: 1px solid #fff;
background-color:#f7f7f7;
}
h1{
color:#404347;
margin:5px 30px 20px 0px;
font-weight:100;
}
.pagedemo{
border: 1px solid #CCC;
width:310px;
margin:2px;
padding:50px 10px;
text-align:center;
background-color:white;
}
</style>
</head>
<body>
<div class="header">
<h1>jPaginate</h1>
</div>
<div class="content">
<div class="demo">
<h1>Demo 1</h1>
<div id="demo1">
</div>
</div>
<div class="demo">
<h1>Demo 2</h1>
<div id="demo2">
</div>
</div>
<div class="demo">
<h1>Demo 3</h1>
<div id="demo3">
</div>
</div>
<div class="demo">
<h1>Demo 4</h1>
<div id="demo4">
</div>
</div>
<div id="paginationdemo" class="demo">
<h1>Demo 5</h1>
<div id="p1" class="pagedemo _current" style="">Page 1</div>
<div id="p2" class="pagedemo" style="display:none;">Page 2</div>
<div id="p3" class="pagedemo" style="display:none;">Page 3</div>
<div id="p4" class="pagedemo" style="display:none;">Page 4</div>
<div id="p5" class="pagedemo" style="display:none;">Page 5</div>
<div id="p6" class="pagedemo" style="display:none;">Page 6</div>
<div id="p7" class="pagedemo" style="display:none;">Page 7</div>
<div id="p8" class="pagedemo" style="display:none;">Page 8</div>
<div id="p9" class="pagedemo" style="display:none;">Page 9</div>
<div id="p10" class="pagedemo" style="display:none;">Page 10</div>
<div id="demo5">
</div>
</div>
</div>
<div class="about">
<div class="text">
<h1>Demo 1</h1>
<p>Hover over the arrows to make the pages move or keep the mouse button down in order to move a whole set.</p>
<p>Clicking a page number will make it move to the center</p>
</div>
<div class="text">
<h1>Demo 2</h1>
<p>Demo 2 shows how the plugin can be used with arrow images.</p>
</div>
<div class="text">
<h1>Demo 3</h1>
<p>This is an example without any arrows. The user just sees the current page and the surrounding pages.</p>
</div>
<div class="text">
<h1>Demo 4</h1>
<p>Demo 4 shows how the plugin can be configured in style (no borders for the page numbers).</p>
</div>
<div class="text">
<h1>Demo 5</h1>
<p>This one shows how to integrate the plugin with an onChange event.</p>
</div>
</div>
</div>
<div class="footer"><a href="http://www.tympanus.net/codrops/"><img src="codrops_back.png" alt="Back to Codrops"/></a></div>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script src="jquery.paginate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#demo1").paginate({
count : 100,
start : 1,
display : 8,
border : true,
border_color : '#fff',
text_color : '#fff',
background_color : 'black',
border_hover_color : '#ccc',
text_hover_color : '#000',
background_hover_color : '#fff',
images : false,
mouse : 'press'
});
$("#demo2").paginate({
count : 50,
start : 5,
display : 10,
border : false,
text_color : '#888',
background_color : '#EEE',
text_hover_color : 'black',
background_hover_color : '#CFCFCF'
});
$("#demo3").paginate({
count : 50,
start : 20,
display : 12,
border : true,
border_color : '#BEF8B8',
text_color : '#68BA64',
background_color : '#E3F2E1',
border_hover_color : '#68BA64',
text_hover_color : 'black',
background_hover_color : '#CAE6C6',
rotate : false,
images : false,
mouse : 'press'
});
$("#demo4").paginate({
count : 50,
start : 20,
display : 12,
border : false,
text_color : '#79B5E3',
background_color : 'none',
text_hover_color : '#2573AF',
background_hover_color : 'none',
images : false,
mouse : 'press'
});
$("#demo5").paginate({
count : 10,
start : 1,
display : 7,
border : true,
border_color : '#fff',
text_color : '#fff',
background_color : 'black',
border_hover_color : '#ccc',
text_hover_color : '#000',
background_hover_color : '#fff',
images : false,
mouse : 'press',
onChange : function(page){
$('._current','#paginationdemo').removeClass('_current').hide();
$('#p'+page).addClass('_current').show();
}
});
});
</script>
</body>
</html>

http://www.thedungeons.info

8 Re: Slider on Wed Apr 14, 2010 11:17 pm

ankillien

avatar
Administrator
Administrator
Yes, that one.
You can copy-paste it in your HTML page and it should work.

Make sure that you host the javascript files, css files and images on your server and link them in the <head></head> tags of your HTML page.


You also need to host the images provided with it.

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

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