Sliding Boxes using jQuery

1 comments - Post a comment

Popular JavaScript framework jQuery has caught my attention just a month ago when I felt strong need to expand my web dev knowledge beyond XHTML / CSS. Surprisingly after one month, I still haven't heard any negative opinion on jQuery - none, and I'm on Twitter search stream every day.

Start was easy because framework's home page is full of tutorials, examples and links to external blogs. Community around it is very strong and is growing rapidly. So, jQuery is THE right choice. After basic syntax and methods learning first thing is to write some code, my own library to use in future projects. Among few effects one is good enough to share - sliding boxes effect.

This is very basic jQuery effect. It uses only 6 lines of code, but I find it to be useful for some website layouts design, specially magazine style templates. It can also be used as sidebar navigation.

We will use only one click function wrapped inside DOM ready function:

$(document).ready(function() {
... // click function here
});


We will use separate divs for boxes. To make difference with other, not sliding divs, we'll use class slidingBox:


$(".slidingBox").click(function() {
// effects here
});


All that's left are sliding jQuery command. Box content has two parts. First one is inside paragraph that is always visible, 'ptitle' class and second part is paragraph hidden by default and visible when clicked inside box, 'entirePost' class. We use this parameter to animate only currently clicked box. Here is final code:


$(this).find("p.entirePost:visible").slideUp("normal");
$(this).find("p.entirePost:hidden").slideDown("normal");


We have finished with jQuery code! Just few lines of code and we are done. Some css styling must take place including important display:hidden property within 'ptitle' class.


div.slidingBox {
color: #41505E;
padding: 1px;
width: 300px;
background-color: #DFE0AF;
border: 1px solid #569492;
}
p.ptitle {
text-align: center;
font-size: 1.2em;
}
p.entirePost {
display: none;
padding: 10px;
}


sliding boxes jQuery example
You can also easily change slideUp with fadeOut and slideDown with fadeIn, leave everything else the same and you have new Fading Boxes jQuery Example. Sweet!


download source code


AddThis Social Bookmark Button

Green Awareness Website Template

3 comments - Post a comment

'Green Awareness' is first website template to present here. I hope many more will come shortly, every new better than the last one.

Green Awareness is basic website template with one content column and a sidebar (click image to see full size). Notice how sidebar navigation has small rectangle left from currently hovered link.


green awareness website template
Constructive comments are welcomed and appreciated! Thanks.


AddThis Social Bookmark Button

Pure CSS Navigation

2 comments - Post a comment

One of the things I have been playing around lately is different blog navigation styles and specially how to create pure CSS navigation, without any JavaScript, external images and other stuff. This is what I have made so far. Check the code below and feel free to ask anything about it.

view live demo

pure CSS navigation


.bar, .ncontent {
font-family: Garamond, sans-serif;
}
.bar {
width: 200px;
border: 1px solid black;
background-color: #669999;
text-align: center;
font-weight: bold;
}
.bar+.ncontent {
display: none;
}
.bar:hover+.ncontent {
width: 200px;
border: 1px solid black;
display: block;
}
.ncontent:hover {
display: block !important;
width: 200px;
border: 1px solid black;
}
.bar:hover+.ncontent ul,
.ncontent:hover ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.bar:hover+.ncontent li,
.ncontent:hover li {
text-decoration: none;
text-align: center;
padding: 3px;
font: Geneva, Helvetica;
font-size: 0.8em;
background-color: #E0DFB3;
}
.bar:hover+.ncontent li a,
.ncontent:hover li a {
text-decoration: underline;
color: #333333;
}

Class 'bar' is used for styling navigation sections and class 'ncontent' for navigation sub-content.

AddThis Social Bookmark Button

Wind of Change

1 comments - Post a comment

Webomatik is nearly one year old (if we count active blogging period) and it's time for some changes. This blog deserves better structure and some new goals. Interests are not different, but only wider and because this blog is still about web2.0 enthusiasm new perspectives are appearing.

* * * * *

Final Contest is closed

Some time ago Webomatik started Final contest, monthly prizes giveaway, but since last two months winners of free 6 months ad spot haven't contacted me with details, I figured it doesn't make any sense to continue with contest.

Lifetime Drops is suspended

It was great fun to visit and 'drop' blogs on Lifetime Drops List in last few months. However list grew and I found myself spending at least one hour every single day doing this which is very time consuming. I will suspend Lifetime Drops List for a month to use that extra time on some new things and after that I hope I will continue with it.

New interests

You can expect to read some new stuff here about web development. This will include subjects like XHTML/CSS techniques and layouts development, Blogger and website templates, maybe even Flash and JavaScript stuff like frameworks and tutorials. Old interests in free web services will remain important part of Webomatik experience.

You are invited to join the team.

AddThis Social Bookmark Button