Have you ever seen on a blog you visit widget displays a beautiful as in the picture below:
This widget is called 'News Previewer scroll Fantastic'. To view a demo of this widget please just it. This widget displays Previewer news that we create later become such a list a list of articles on the left and a preview of the article with a longer description on the right. After the list on the left is clicked, the preview will slide in on the right pane.
Placing HTML Code
Here, we will have an id selector play "com_wrapper" which also will contain class elements "cn_preview" which is on the right, we call it window priview and class elements "cn_list" located on the left is what we call the list. Then the tag <div class="cn_content"> Each contains a preview image, title, description, tag along with the "Read More" link as the link to the article page / your post.
On the list to the left we will have the appropriate item from the brief description priview window. and we will also add navigation to get to the next list.
For users of Blogspot, html code below you can also enter on Page element »add a gadget» HTML and Javascript. News Priviewer width of the size that we will create is 500 pixels.
Examples in section <body>
<div class="cn_wrapper">
<div id="cn_preview" class="cn_preview">
<div class="cn_content" style="top:5px;">
<img src="images/polaroidphotobar.jpg" alt=""/>
<h1>Polaroid Photobar Gallery with jQuery</h1>
<span class="cn_date">28/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create an...</p>
<a href="#" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/fullpageimagegallery.jpg" alt=""/>
<h1>Full Page Image Gallery with jQuery</h1>
<span class="cn_date">08/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create a stunning...
</p>
<a href="#" target="_blank" class="cn_more">Read more</a>
</div>
...
</div>
<div id="cn_list" class="cn_list">
<div class="cn_page" style="display:block;">
<div class="cn_item selected">
<h2>Polaroid Photobar Gallery with jQuery</h2>
<p>Tutorial on how to create a gallery in polaroid style</p>
</div>
<div class="cn_item">
<h2>Full Page Image Gallery with jQuery</h2>
<p>Another tutorial on how to make a full gallery</p>
</div>
...
</div>
<div class="cn_page">
...
</div>
<div class="cn_page">
...
</div>
<div class="cn_nav">
<a id="cn_prev" class="cn_prev disabled"></a>
<a id="cn_next" class="cn_next"></a>
</div>
</div>
</div>
Results from a series of above code »content is at the first (div class =" cn_content "style =" top: 5px;) is a preview window that will priview kanan.dan located next to all the existing content is in a position hidden underneath which will appear with slide effect when list item in the list in the left pane click.
Height of the window contains priview right is 310px which each item contains:
- Content Figure »<img src="images/polaroidphotobar.jpg" alt=""/>
- Title »<h1> Photobar Polaroid Gallery with jQuery </ h1>
- Date Postings »<span class="cn_date"> 28/09/2010 </ span>
- Label Post »<span class="cn_category"> Tutorials </ span>
- Description Post article »<p> In this tutorial we are going to create an ... </ p>
- Read More »<a target="_blank" href="#" class="cn_more"> Read more </ a>
Now let's see sususan of CSS Style.
The CSS
We will be using a lot of CSS3 properties to create some effects. we will use the shadows, rounded borders, gradients and RGB hexadecimal values.
Let's start with the main container. We will set it relatively so we can then use some absolute positioning in it:
.cn_wrapper{
margin:0px auto 0px auto;
width:500px;
height:300px;
position:relative;
color:#fff;
overflow:hidden;
padding:5px;
text-shadow:1px 1px 1px #000;
border:1px solid #111;
background-color:#333;
-moz-box-shadow:1px 1px 4px #222;
-webkit-box-shadow:1px 1px 4px #222;
box-shadow:1px 1px 4px #222;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
Style that we use in the header (title)
.cn_wrapper h1{
font-size:20px;
text-transform:uppercase;
}
.cn_wrapper h2{
font-size:12px;
border-bottom:1px solid #000;
padding-bottom:4px;
text-transform:uppercase;
}
h2 used in the list on the title section (left) and we give you the bottom line to create a wonderful impression underneath.
Mailing list and the window is positioned absolute priview like the style sheet below.
.cn_preview, .cn_list{
width:250px;
height:300px;
position:absolute;
top:2px;
left:6px;
}
.cn_preview{
left:255px;
}
In the preview window section we will have a system like what I've described above is to be structured as follows:
.cn_content{
border:1px solid #444;
top:310px;/*5*/
left:5px;
width:219px;
padding:10px;
position:absolute;
background-color:#101010;
height:275px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
These elements will be animated in JavaScript. Initially, we will hide the element, so we set the upper part of the greater whole wrapper itself. This is why we set the overflow on the wrapper to hide in, so we will not see something moving out of the confines wrapper.
Now we will give style to the inner div element content.
In this case, we use an image that will have a maximum width of 219 pixels and height 119 piksel.Itulah basic values of the height and width of the following elements:
Note : That if you have a different image size, you have to adjust all elements below it as well.
.cn_content img{
width:219px;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
Date and label the post will be positioned absolutely at the bottom of the content div.
.cn_date{
position:absolute;
bottom:30px;
right:8px;
font-size:11px;
}
.cn_category{
position:absolute;
bottom:30px;
left:8px;
font-size:11px;
padding:1px 3px;
background:#ccc;
border:1px solid #ddd;
color:#000;
text-shadow:-1px 0px 1px #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
In the Description window priview we use the element will have a height tetap.jadi <p> ... when we make the description too long will be truncated (not shown).
.cn_content p{
height:57px;
margin-top:2px;
overflow:hidden;
}
Button "Read more" which will be the link to the original article will be peppered with some gradation, such as rounded shadow and border line at the bottom left and right to adjust the content:
a.cn_more{
position:absolute;
padding: 4px 0px;
left:0px;
bottom:0px;
width:236px;
color:#fff;
text-align:center;
font-size:12px;
letter-spacing:1px;
text-shadow:1px 1px 1px #011c44;
text-transform:uppercase;
text-decoration: none;
border:1px solid #4c7ecb;
outline:none;
cursor:pointer;
background-color: #1951A5;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-border-bottom-left-radius: 5px;
-border-bottom-right-radius: 5px;
-moz-box-shadow:1px 1px 3px #111;
-webkit-box-shadow:1px 1px 3px #111;
box-shadow:1px 1px 3px #111;
}
a.cn_more:hover{
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}
Now we will give style to the list section. While mouse hover (through) the list will change and have a gradient as a background effect.
. cn_item {
border: 1px solid # 090909;
cursor: pointer;
position: relative;
overflow: hidden;
height: 49px;
color: # fff;
padding: 5px;
margin: 0px 0px 5px 6px;
text-shadow: 1px 1px 1px # 000;
background: # 2b2b2b;
background:
-webkit-gradient (
linear,
top left,
bottom left,
from (# 171 717),
to (# 2b2b2b)
);
background:
-moz-linear-gradient (
top,
# 171 717,
# 2b2b2b
);
-moz-box-shadow: 1px 1px 3px # 111;
-webkit-box-shadow: 1px 1px 3px # 111;
box-shadow: 1px 1px 3px # 111;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
. cn_item: hover,. selected {
border-color: # 4c7ecb;
background-color: # 1951A5;
background-image:
-moz-linear-gradient (
top,
RGBA (255,255,255,0.25),
RGBA (255,255,255,0.05)
);
background-image:
-webkit-gradient (
linear,
top left,
bottom left,
color-stop (0, RGBA (255,255,255,0.25)),
color-stop (1, RGBA (255,255,255,0.05))
);
}
. cn_item: active {
color: # 011c44;
text-shadow: 1px 1px 1px # ccdffc;
}
. cn_list p {
height: 29px;
padding-top: 2px;
overflow: hidden;
border-top: 1px solid # 333;
}
now we mebuat style on navigation and actually put it in the bottom of the list.
. cn_nav {
width: 55px;
height: 24px;
position: absolute;
bottom: 0px;
left: 94px;
}
Elements of the next (next) and previous (prev) will have the following style:a.cn_next, a.cn_prev {float: left;height: 23px;width: 23px;background-color: # 212121;background-repeat: no-repeat;background-position: center center;cursor: pointer;outline: none;border: 1px solid # 111;-Moz-border-radius: 5px;-Webkit-border-radius: 5px;border-radius: 5px;-Moz-box-shadow: 1px 1px 3px # 000;-Webkit-box-shadow: 1px 1px 3px # 000;box-shadow: 1px 1px 3px # 000;}a.cn_next {background-image: url (.. / images / next.png);}a.cn_prev {margin-right: 5px;background-image: url (.. / images / prev.png);}. Cn_nav a: hover {background-color: # 101010;}. Cn_nav a: active {margin-top: 1px;background-color: # 000;}. Cn_nav a.disabled {opacity: 0.5;}. Cn_page {display: none;}
We
have completed the design style of each piece of project practice
us.And now we are trying to implement jQuery effect therein.
The JavaScript
In the jQuery function we will start by defining some variables that we put at the top of the closing </ body>:<script type="text/javascript">
$ (Function () {
/ / Caching
/ / Next and prev buttons
cn_next $ var = $ ('# cn_next');
cn_prev $ var = $ ('# cn_prev');
/ / Wrapper of the left items
cn_list $ var = $ ('# cn_list');
var $ pages = $ cn_list.find ('. cn_page');
/ / How many pages
cnt_pages var = $ pages.length;
/ / The default page is the first one
var page = 1;
/ / List of news (items left)
var $ items = $ cn_list.find ('. cn_item');
/ / The current item being Viewed (right side)
cn_preview $ var = $ ('# cn_preview');
/ / Index of the item being Viewed.
/ / The default is the first one
var current = 1;/ *
for each item we store its index relative to all the document.
we bind a click event that slides up or down the current item
and slides up or down the clicked one.
Moving up or down will depend if the clicked item is after or
before the current one
* /
Items.each $ (function (i) {
var $ item = $ (this);
Item.data $ ('idx', i +1);
$ Item.bind ('click', function () {
var $ this = $ (this);
Cn_list.find $ ('. Selected'). RemoveClass ('selected');
This.addClass $ ('selected');
var idx = $ (this). Data ('idx');
var $ cn_preview.find current = $ ('. cn_content: nth-child (' + current + ')');
var $ next = $ cn_preview.find ('. cn_content: nth-child (' + idx + ')');
if (idx> current) {
$ Current.stop (). Animate ({'top': '-300px'}, 600, 'easeOutBack', function () {
$ (This). Css ({'top': '310px '});
});
$ Next.css ({'top': '310px '}). Stop (). Animate ({' top ': '5 px'}, 600, 'easeOutBack');
}
else if (idx <current) {
$ Current.stop (). Animate ({'top': '310px '}, 600,' easeOutBack ', function () {
$ (This). Css ({'top': '310px '});
});
$ Next.css ({'top': '-300px'}). Stop (). Animate ({'top': '5 px '}, 600,' easeOutBack ');
}
current = idx;
});
});
/ *
next page shows if exists:
the next page fades in
also checks if the button should get disabled* /
$ Cn_next.bind ('click', function (e) {
var $ this = $ (this);
Cn_prev.removeClass $ ('disabled');
+ + Page;
if (page == cnt_pages)
This.addClass $ ('disabled');
if (page> cnt_pages) {
page = cnt_pages;
return;
}
$ Pages.hide ();
Cn_list.find $ ('. Cn_page: nth-child (' + page + ')'). FadeIn ();
e.preventDefault ();
});
/ *
previous page shows if exists:
fades in the previous page
also checks if the button should get disabled
* /
$ Cn_prev.bind ('click', function (e) {
var $ this = $ (this);
Cn_next.removeClass $ ('disabled');
- Page;
if (page == 1)
This.addClass $ ('disabled');
if (page <1) {
page = 1;
return;
}
$ Pages.hide ();
Cn_list.find $ ('. Cn_page: nth-child (' + page + ')'). FadeIn ();
e.preventDefault ();
});
});
</ Script>
To create a better view, we will customize the title by adding the following line to the header of the HTML with jQuery plguin that will be applied to the above variables. Put in the section (below) <head>
src="js/cufon-yui.js" <script type="text/javascript"> </ script>
src="js/Bebas_400.font.js" <script type="text/javascript"> </ script>
<script type="text/javascript">
Cufon ('. Cn_wrapper h1, h2', {
textShadow: '-1px 1px black'
});
</ script>
Not very long to make it? My advice before trying to make this widget for your blog, keep it first tamplete there, in order to be returned if there is an error. Good luck and make sure you succeed.
Thank you'r review this article blog. May be a good benefit for all bloggers. regards
