October 7, 2005
As I am working on customizing the look-and-feel of this blog site (thanks to WordPress for some great work!), I came across a CSS problem. The problem involved using a “floating” div layer. In Figure 1 below, you can see that the floating blog text area div layer (box with blue-gray border) floats right over the main container (box with red border). The sidebar nav layer is not floating and causes the container div to extend down based on the height of the sidebar nav layer.
Now you can see how this causes a problem. The blog text div creates an empty gap where the background now displays (in the figures, the bg is light gray). Note: the problem was displaying in Firefox; it showed up correctly in IE 6. The problem should be addressed nevertheless. So always be sure to test your layouts in all browsers.
How do we fix this you ask? Well, Figure 2 shows how I used another div layer (displayed as a box w/ a green border) to push down the container div down to the correct height. The following style was used to create the “cleared” div layer.
.cleared {
clear:both;
height:1px;
overflow:hidden;
}
Since we want the new div layer to appear below the floating blog div layer, I applied the “clear” property. The clear property is used if you don’t want the next element to wrap around the floating objects. clear: left will clear left-floated elements, clear: right will clear right-floated elements and clear: both will clear both left and right floated elements.
I read somewhere that the overflow:hidden style must be used since IE refuses to automatically make div tags < 1em high (Standards Compatible mode. )
Update: One of my friends gave me a link to an easier way to accomplish this.
The link is http://www.positioniseverything.net/easyclearing.html
September 28, 2005
I was asked to create some JavaScript code to mimick the star ratings process of other sites being used today. Below is my first attempt. Please feel free to use the code, but please reference this site, if used.
At some later date in the future, I will break down the logic section by section. For the most part, I think the average programmer can understand the jist of it. So, enjoy!
Images Needed:
Empty Star
Empty Star
<script language=”JavaScript”>
/***********************************************
* Rating Stars v1.0- By Naldo P
* Visit ODLAN at http://odlan.com
* Read blog http://www.odlan.com/blog
***********************************************/
// Define constants
var STAR_BAR_MAX = 5;
var STAR_WIDTH = 16;
var STAR_HEIGHT = 16;
var STAR_EMPTY = new Image(STAR_WIDTH, STAR_HEIGHT);
var STAR_FULL = new Image(STAR_WIDTH, STAR_HEIGHT);
STAR_EMPTY.src = “star_empty.gif”;
STAR_FULL.src = “star_full.gif”;
// Define ALT tags for stars
var starbarAlts = new Array();
for (var i=1; i< =STAR_BAR_MAX; i++)
starbarAlts[i] = i + ' out of ' + STAR_BAR_MAX;
// Define variables
var setStarBar, endStar;
// This function dissects the name of the star selected into appropriate vars - Dissect Data (dd)
function dd(whichStar){
starData = whichStar.split("_");
setStarBar = starData[0]; endStar = starData[1];
}
// This function turns on stars from 1 until star that is mouseovered
function starsOn(whichStar){
dd(whichStar);
for (i=1;i<=endStar;i++)
document['star' + setStarBar + '_' + i].src = STAR_FULL.src;
}
// This function turns off stars -- Defaults to selected hidden amount
function starsOff(whichStar){
dd(whichStar);
for (i=1;i<=STAR_BAR_MAX;i++)
document['star' + setStarBar + '_' + i].src = STAR_EMPTY.src;
if (currStarValue = document.quickRate['set_' + setStarBar].value)
starsSetNow(setStarBar+'_'+currStarValue);
}
// This function sets the stars from 1 to the clicked-on star
function starsSetNow(whichStar){
if (whichStar) {
dd(whichStar);
for (i=1;i<=STAR_BAR_MAX;i++)
document['star' + setStarBar + '_' + i].src = STAR_EMPTY.src;
for (i=1;i<=endStar;i++)
document['star' + setStarBar + '_' + i].src = STAR_FULL.src;
document.quickRate['set_' + setStarBar].value = endStar;
}
}
// Variables for doTimer function
var MAX_TIME = 30;
var START_TIME = 0;
var timeCurrent = 0;
var selectedStar;
// This function is used as a timer loop to delay the setting of stars
// The mouseover event may take precendence over the onclick event -- so a delay was needed
function doTimer(){
if (!timeCurrent) timeCurrent = START_TIME;
timeCurrent += 1;
if (timeCurrent < 2) {
setTimeout("doTimer();", 200);
} else {
starsSetNow(selectedStar); timeCurrent = 0;
}
}
// This function sets the clicked-on star to a global var and performs the timed delay
// before setting the desired star amount
function starsSet(whichStar){
selectedStar = whichStar; // Re-assign selected star value to global var
doTimer(); // Timer needed to set stars after onmouseover event passed
}
function submitForm() {
document.quickRate.submit();
}
// This function writes out the HTML to display a star bar for a set
// and preloads the stars
function insertStarsBar(setNum){
for (i=1;i<=STAR_BAR_MAX;i++){
document.write("<a href=\"javascript:starsSet('" + setNum + "_" + i + "')\" onmouseover=\"starsOn('" + setNum + "_" + i + "')\" onmouseout=\"starsOff('" + setNum + "_" + i + "')\"><img src=\"star_full.gif\" name=\"star" + setNum + "_" + i + "\" border=\"0\" class=\"star\" alt=\"" + starbarAlts[i] + "\"/>");
document['star' + setNum + '_' + i].src = STAR_EMPTY.src;
}
}
// --/>
</script>
<style>
img.star { vertical-align: middle; }
<br />
Overall: <script>insertStarsBar(1);</script>
<p>
Speed: <script>>insertStarsBar(2);</script>
<p>
Tires: <script>insertStarsBar(3);</script>
<p>
<a href=”#” onclick=”submitForm()”>Submit</a>
<form name=”quickRate” action=”test.php” method=post>
Overall Hidden: <input type=text name=”set_1″ size=”3″ value=”0″>
Speed Hidden: <input type=text name="set_2" size="3" value="0"/ >
Tires Hidden: <input type=text name=”set_3″ size=”3″ value=”0″/ >
<input type=hidden name=”overall”/ >
<input type=hidden name=”speed”/ >
<input type=hidden name=”tires”/ >
<input type=hidden name=”seats”/ >
</form>
</p>
Download Files
Comments Off