Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript New footer (CSS-Tricks) Re: New footer (CSS-Tricks)

#48965
MFCDeveloper
Member

hi …
i saw this one many days ago and i like it.i was looking for a tutorial for it but i found the HTML 5 version here.so i decided to simulate this nice roll over effect for older browsers (even ie 6) with jquery and css. it is interesting.but i done it in almost 1 hours.
if you knew a bit about css and JQuery , you can easily got this simple source code in your HTML page. here is the work…

CSS :



.container
{
background-color:#d9d3cf;
width:90%;
height:auto;
padding:20px;
margin:0px auto;
display:table;
}

.container .box
{
width:300px;
height:120px;
padding:10px;
background-color:#e6e2df;
background-repeat:no-repeat;
float:left;
clear:none;
margin:5px;
cursor:pointer;
color:#b2aaa4;
}

.container .box h1
{
font-size:20px;
color:inherit;
float:left;
width:100%;
clear:both;
margin:0px;
}

.container .box .desc
{
width:70%;
height:auto;
color:inherit;
font-size:12px;
line-height:1.5em;
}

the css code is pretty straight-forward. we have a box that contains a heading (H1) and a text as description(div.desc).
all of boxes contained in the main div called container.

The markup :




this is the main div we use to hold our boxes.and has a attribute called ImageSource that refers to loaction of our sprite file.



WUFOO



I wrote fot WUFOO Te Online From Building Service.
WOFUU Takes te all the hard.crappy work out of
building power full forms.


each box contains a “altbg” and “altcolor” attributes that holds the alternative background color and foreground color respectively.
and an image number that refers to order of image inside Image sprite(we got all of our images inside a single png file and we use this number to address the appropriate image using background position CSS role).

the criteria for accessing our arbitrary image is setting background-position vertical value as follow(horizontal value always equals 0).

imagenum * 160

that “160” is height of a single image inside our sprite.

and another things that are inside our box is a heading and a div containing description.

for adding more boxes repeat this divs inside the container division.

and finally the JQuery :



$(function () {
$(".container .box").each(function () {

//load background image for each box;
var path = $(this).parent().attr("ImageSource");
var imgNum = parseInt($(this).attr("imagenum"));
var maxX = parseInt($(this).css("width")) + parseInt($(this).css("padding-left")) + parseInt($(this).css("padding-right"));
$(this).css("background-image", "url('" + path + "')");
$(this).css("background-position", maxX + "px " + (imgNum - 1) * -160 + "px");

$(this).hover(function () {
ToggleBox($(this));
ToggleImage($(this), "in");
}
,
function () {
ToggleBox($(this));
ToggleImage($(this), "out");
}
);
});
});

function ToggleImage(box, option) {
if (option == "in") {
var imgNum = parseInt(box.attr("imagenum"));
var maxX = parseInt(box.css("width")) + parseInt(box.css("padding-left")) + parseInt(box.css("padding-right"));
box.stop().animate({"backgroundPosition": maxX - 150 * 80 / 100 + "px " + (imgNum - 1) * -160 + "px" });
}
else {
var imgNum = parseInt(box.attr("imagenum"));
var maxX = parseInt(box.css("width")) + parseInt(box.css("padding-left")) + parseInt(box.css("padding-right"));
box.stop().animate({ "backgroundPosition": maxX + "px " + (imgNum - 1) * -160 + "px" });
}
}

first of all i set the image source for each box by background-image
role then i have set the appropriate vertical position value for each box depending the imagenum attribute.



$(this).css("background-position", maxX + "px " + (imgNum - 1) * -160 + "px");

note that i have set the horizontal position equals to width of the box + left padding + right padding(maxX) for hiding the background initially. and then in event i set the horizontal position to a value lower than box width , that makes the background appear.



$(this).hover(function () {
ToggleBox($(this));
ToggleImage($(this), "in");
}
,
function () {
ToggleBox($(this));
ToggleImage($(this), "out");
}
);

and here is the ToggleImage function:



function ToggleImage(box, option) {
if (option == "in") {
var imgNum = parseInt(box.attr("imagenum"));
var maxX = parseInt(box.css("width")) + parseInt(box.css("padding-left")) + parseInt(box.css("padding-right"));
box.stop().animate({"backgroundPosition": maxX - 150 * 80 / 100 + "px " + (imgNum - 1) * -160 + "px" });
}
else {
var imgNum = parseInt(box.attr("imagenum"));
var maxX = parseInt(box.css("width")) + parseInt(box.css("padding-left")) + parseInt(box.css("padding-right"));
box.stop().animate({ "backgroundPosition": maxX + "px " + (imgNum - 1) * -160 + "px" });
}
}

we pass the box as the argument to this function and depending on option(“in” – “out”) its bring it into view or makes it disappear.
we used the animate jquery function to give a smooth animation to background image.



box.stop().animate({"backgroundPosition": maxX - 150 * 80 / 100 + "px " + (imgNum - 1) * -160 + "px" });

when bringing into view the background.we bring it partially(80%).
it means we decrease the left position by 80 percent of our box width(150).you can replace the “150” by a variable and giving it your arbitrary value.

all is that….

and you can grab the source from here:

Code

i hop this was useful.

have a nice day.