Category Archives: HTML

Joomla 1.5 Latest News Scroller Module

I have been searching for module similar to mod_scroll_news in Joomla 1.0 but was not able to find it anywhere. So i took the code from the already existing mod_latestnews and made few changes to it. It works for what I need just fine.

Maybe I will spend some more time on it and tweek it a bit to have some more custom settings …

It will display the title as a link and the contents of the articles in the section/category specified.

You can download the module here: mod_newscroller.

Perfect Full Page Background Image with CSS3

One of my latest findings in CSS3 is the full page background image. I owe this to acctually two sources. First is CSS-TRICKS and the second to ringvemedia.com.

1
2
3
4
5
6
7
8
9
html {
    background: url(bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
}

You can also check out how it looks on my project site: Full Background with CSS3

Full Background CSS3 Image

jQuery animated swap div content on hover effect

This is a simple sample how to swap div content on mouse hover. Actually I first stumbled upon this web article: http://spoonfedproject.com/jquery/jquery-image-slide-on-hover-effect/. After making few changes I was able to swap actual content of a div instead of background.

Here is the javascript i used (don’t forget to include jQuery library):

1
2
3
4
5
6
7
$(function(){
    $("#vertical div.wrap").hover(function(){
        $(this).stop().animate({top:"-130px"},{queue:false,duration:200});
    }, function() {
        $(this).stop().animate({top:"0px"},{queue:false,duration:200});
    });
});

Here is simple CSS styling:

1
2
3
4
5
6
7
8
9
html,body,div,h2,img {margin:0;padding:0;border:none;}
html { font:1em Arial, Helvetica, sans-serif; color:#444; }
h1 {text-align:center;}
.clear { clear: both; }
#vertical { margin:50px auto; width:920px; }
#vertical div.element { margin-right:3px; float:left; width:296px; height:130px; border:1px solid #999; position:relative; overflow:hidden; }
.wrap { display: block; height: 260px; width: 296px; position: absolute; top: 0; }
.init { display: block; height: 130px; width:296px; background: #F96; }
.short { display: block; height: 130px; width:296px; background: #69C; }

And at the end the actual HTML needed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="vertical" class="clear">
    <h1>jQuery image slide on hover effect (vertical)</h1>
   
    <div class="element">
        <div class="wrap">
            <div class="init">Hover over me</div>
            <div class="short">On hover content</div>
        </div>
    </div>
    <div class="element">
        <div class="wrap">
            <div class="init">Hover over me 1</div>
            <div class="short">On hover content 1</div>
        </div>
    </div>
    <div class="element">
        <div class="wrap">
            <div class="init">Hover over me 2</div>
            <div class="short">On hover content 2</div>
        </div>
    </div>
</div>