Tag Archives: html

Javascript Trick: Add a class or ID to an HTML element on hover

Here is the line of code you can use to add a class or ID to an element in your webpage when a user hovers over it (for example: if you want to add a class called “active” to an li element with a class called “top-nav” in the div called “menu” when a user hovers over it):

<script>

	$('#menu li').hover (
	function(){ $('.top-nav').addClass('active')},
	function() {$('.top-nav').removeClass('active')}
	)
</script>

CSS Tricks: Custom styling for your scrollbars

Here is the simple code I use to style scrollbars in a web page. Simply add this code to your stylesheet:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 8px;
   background:#A020F0;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background:#fff;
}

And customize it to fit the design that you want!

Javascript: Display a second drop-down menu or div based on user’s selection in first drop-down menu

Here is the Javascript that I use to display a second drop-down menu or a div based on a user’s selection in the first drop-down menu.
Read more …

Including retweets in your custom Twitter feeds

Here are the codes I use to create a custom Twitter feed for my websites which includes retweets.

First you will want to insert the Javascript that makes the whole thing work. Copy and paste this line of code into your website, preferably just before the closing <body> tag:

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=thelibzter&include_rts=1&callback=twitterCallback2&count=6" type="text/javascript"></script>

Replace the words THELIBZTER in the above example with your own Twitter username. Change the number 4 after “count” to the number of tweets that you want to display.

Next, copy and paste the following html into the web page where you want the Twitter widget to display:

<div id="twitter">
<div id="twitter_t"></div>
<div id="twitter_m">
 <div id="twitter_container">
 <ul id="twitter_update_list"></ul>
 </div>
</div>
<div id="twitter_b"></div>
</div>

And, finally, copy and paste the following CSS into your website’s stylesheet:

#twitter {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:430px;
border:1px solid #c9c9c9;
}
#twitter_t {
width:405px;
height: 44px;
background:#c68aeb url(yourimagehere);
color:#fff;
text-shadow:.5px .5px #333;
font-size:18px;
font-family:Candara;
padding-top:20px;
padding-left:25px;
}
#twitter_m {
width: 400px;
padding: 0 15px;
background:#f7effc;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:5px;
padding-top:5px;
}
#twitter_update_list {
width: 413px;
padding: 0;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #31353d;
line-height: 16px;
font-weight:bold;
margin-left:-13px;
}
#twitter_update_list li {
width: 400px;
list-style: none;
padding:15px;
border-bottom: dotted 1px #ccc;
}
#twitter_update_list li a {
color:#631891;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #31353d;
}
#twitter_b {
width: 430px;
height: 29px;
background:#c68aeb url(yourimagehere);
}

Of course, you will probably want to edit the CSS codes for your Twitter widget.

And that, my friends, is all it takes to create a custom Twitter widget for your website! :) Have fun, and let me know if you run into any issues.

FURTHER READING:

If you want to remove the time stamp from the tweets in your custom Twitter feed, please check out this post  – http://icode4you.net/creating-a-custom-twitter-feed-how-to-remove-the-time-stamp-from-tweets.

Make sure you also check out another post I wrote that has the styles for several different custom Twitter widgets that are all ready to incorporate into your website!

And here is a link to a post that provides the codes and instructions on how to create a Twitter feed of the search results for a certain term.

HTML: Add a drop down list of states with links to their respective pages

Here is how to add a drop down list of states with links to each of their respective pages to your web page.

First, add this script to the <head> section of your website:

<SCRIPT LANGUAGE="JavaScript"><!--
function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value;
}
//--></SCRIPT>

Then build your list of states like this:

<FORM>
<SELECT NAME="selectName" onChange="goto_URL(this.form.selectName)">
<option value="#" selected>Choose Your State...</option>
<option value="/states/alabama.html">Alabama</option>
<option value="/states/alaska.html">Alaska</option>
<option value="/states/arizona.html">Arizona</option>
<option value="/states/arkansas.html">Arkansas</option>
<option value="/states/california.html">California</option>
<option value="/states/colorado.html">Colorado</option>
<option value="/states/connecticut.html">Connecticut</option>
<option value="/states/dc.html">DC</option>
<option value="/states/delaware.html">Delaware</option>
<option value="/states/florida.html">Florida</option>
<option value="/states/georgia.html">Georgia</option>
<option value="/states/guam.html">Guam</option>
<option value="/states/hawaii.html">Hawaii</option>
<option value="/states/idaho.html">Idaho</option>
<option value="/states/illinois.html">Illinois</option>
<option value="/states/indiana.html">Indiana</option>
<option value="/states/iowa.html">Iowa</option>
<option value="/states/kansas.html">Kansas</option>
<option value="/states/kentucky.html">Kentucky</option>
<option value="/states/louisiana.html">Louisiana</option>
<option value="/states/maine.html">Maine</option>
<option value="/states/maryland.html">Maryland</option>
<option value="/states/massachusetts.html">Massachusetts</option>
<option value="/states/michigan.html">Michigan</option>
<option value="/states/minnesota.html">Minnesota</option>
<option value="/states/mississippi.html">Mississippi</option>
<option value="/states/missouri.html">Missouri</option>
<option value="/states/montana.html">Montana</option>
<option value="/states/nebraska.html">Nebraska</option>
<option value="/states/nevada.html">Nevada</option>
<option value="/states/newhampshire.html">New Hampshire</option>
<option value="/states/newjersey.html">New Jersey</option>
<option value="/states/newmexico.html">New Mexico</option>
<option value="/states/newyork.html">New York</option>
<option value="/states/northcarolina.html">North Carolina</option>
<option value="/states/northdakota.html">North Dakota</option>
<option value="/states/ohio.html">Ohio</option>
<option value="/states/oklahoma.html">Oklahoma</option>
<option value="/states/oregon.html">Oregon</option>
<option value="/states/pennsylvania.html">Pennsylvania</option>
<option value="/states/puertorico.html">Puerto Rico</option>
<option value="/states/rhodeisland.html">Rhode Island</option>
<option value="/states/southcarolina.html">South Carolina</option>
<option value="/states/southdakota.html">South Dakota</option>
<option value="/states/tennessee.html">Tennessee</option>
<option value="/states/texas.html">Texas</option>
<option value="/states/utah.html">Utah</option>
<option value="/states/vermont.html">Vermont</option>
<option value="/states/virginia.html">Virginia</option>
<option value="/states/washington.html">Washington</option>
<option value="/states/westvirginia.html">West Virginia</option>
<option value="/states/wisconsin.html">Wisconsin</option>
<option value="/states/wyoming.html">Wyoming</option>
</select></FORM>

True or False: HTML Tags are case sensitive

[wpsqt_quiz name="True or False: HTML Tags are case sensitive"]

 

Note: the source for this quiz is http://www.computerhope.com/answer.htm