Category Archives: Javascript

Including retweets in your custom Twitter feeds

Posted on April 30, 2012 by
1 comment

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.

Categories: CSS, HTML, Javascript | Tags: , , , , , ,

Create a custom Pinterest “Pin It” button for your website

Posted on March 20, 2012 by
1 comment

Here is the Javascript code I use to create a Pin It button for a web page using a custom graphic:

 

<div>
<a href="javascript:void((function(){var%20e=document.createElement('script'); e.setAttribute('type','text/javascript'); e.setAttribute('charset','UTF-8'); e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());"> <img src="images/pinit.jpg" alt="Pin It" /></a> </div>  

You will want to change the path to the image in the code above so that it points to the graphic that you want to use for the Pin It button. You could also substitute text for the graphic if you prefer.

 

Categories: HTML, Javascript, Random | Tags: , , , , , ,

Creating a custom Twitter feed with avatars for your website

Posted on February 20, 2012 by
2 comments

Here is the simple code I use to create a Twitter feed which includes avatars for a website:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Twitter feed with avatars</title>
	<style type="text/css">
		body {
			background: #333333;
		}
		.twtr-widget {
			float: left;
			width: 300px;
			margin: 50px 0 0 80px;
			padding: 0 0 15px;
			background: #fafafa;

			/*** cross browser box shadow ***/
			-moz-box-shadow: 0 0 2px #fff;
			-webkit-box-shadow: 0 0 2px #fff;
			-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3)";
			filter:
				progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=0,strength=3)
				progid:DXImageTransform.Microsoft.Shadow(color=#ffffff,direction=90,strength=3)
				progid:DXImageTransform.Microsoft.Shadow

(color=#ffffff,direction=180,strength=3)
				progid:DXImageTransform.Microsoft.Shadow

(color=#ffffff,direction=270,strength=3);
			box-shadow: 0 0 2px #fff;

			/*** kind of cross browser rounded corner ***/
			-webkit-border-radius: 3px;
			-khtml-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
		}
			.twtr-hd {
				/*** cross browser rgba ***/
				background-color: transparent;
				background-color: rgba(255,255,255,0.3);
				filter:progid:DXImageTransform.Microsoft.gradient

(startColorstr=#30ffffff,endColorstr=#30ffffff);
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient

(startColorstr=#30ffffff,endColorstr=#30ffffff)";
			}
			.twtr-bd {}
				.twtr-widget .twtr-bd .twtr-tweet {
					margin: 5px 0 0;
					padding: 0 0 5px;
					border-bottom: 1px solid #cecece;
				}
				.twtr-tweet:before {
					display: block;
					float: left;
					margin: -5px 0 0 5px;
					font-size: 50px; /* let's make it a big quote! */
					color: #bababa;
					text-shadow: 0 1px 1px #909090;
					font-family: "times new roman", serif;
				}
			.twtr-ft { display: none; }
	</style>
</head>
<body>
	<script src="http://widgets.twimg.com/j/2/widget.js"></script>
	<!-- first box -->
	<script>
	new TWTR.Widget({
	  version: 2,
	  type: 'profile',
	  rpp: 4,
	  interval: 6000,
	  width: 300,
	  height: 300,
	  theme: {
		shell: {
		  background: 'transparent',
		  color: '#333'
		},
		tweets: {
		  background: 'transparent',
		  color: '#333',
		  links: '#c10000'
		}
	  },
	  features: {
		scrollbar: false,
		loop: false,
		live: false,
		hashtags: true,
		timestamp: true,
		avatars: true,
		behavior: 'all'
	  }
	}).render().setUser('thelibzter').start();
	</script>

 

You can see a working example of this Twitter feed at http://icode4you.net/wp-content/uploads/2012/02/twitterfeed_with_avatars.html.

Categories: HTML, Javascript, Random | Tags: , , , ,

Website forms: Use Javascript to auto fill one field with the values from two other fields

Posted on December 5, 2011 by
1 comment

Here is the simple Javascript code that I use to auto fill one field of a form with the values of one or more other fields.

Copy and paste this line to the <head> of your web page:

 

<script type="text/javascript" charset="utf-8">    
function updateUsername(){        
first = document.getElementById("first").value;        
last = document.getElementById("last").value;         document.getElementById("username").value = first+" "+last;    
} </script>

 

Next, you simply need to add the correct ID to the three fields in your form. Make sure that the IDs correspond correctly to the Javascript code we just pasted into the header.

For example:

<input type="text" name="some_name" value="" id="first" onkeyup="updateUsername();">
<input type="text" name="some_name" value="" id="last" onkeyup="updateUsername();">
<input type="text" name="some_name" value="" id="username">

As you can see, you also need to add this line of code to the field or fields whose value(s) you want to fill the third field:

onkeyup="updateUsername();"

And that is all that you need to do. Let me know if you have any questions or run into any issues.

Categories: Javascript | Tags: , , , , ,

Developing a custom store locator map for your website using Google maps, Javascript, XML, and PHP

Posted on October 20, 2011 by
No comments

Here is a comprehensive series of posts which takes you through the entire process of developing a custom store locator map for your website using Google maps, Javascript, XML, and PHP.

Here are the basic steps to developing your store locator map:

Create a spreadsheet of your store locations

Create and populate the MySQL table

 Create a PHP file which will be used to connect to the database

Create a PHP file which will output the XML file results of a search

Create the HTML page which contains the store locator map

 

 And here are some hints and tips to help create and customize your store locator map:

Using your own custom markers for the locations in place of Google’s default markers

How to prevent the map from zooming in to close on a single location



Categories: Javascript, PHP, Random | Tags: , , , , , , , , ,

Developing a custom store locator map: Using your own custom markers instead of Google’s default markers

Posted on October 20, 2011 by
No comments

Here is a simple way to use your own custom-designed markers on your store locator map in place of Google’s default markers.

Add this line of code:

 var icon = new GIcon();
      icon.image = "http://yourwebsite.com/logo.png";
      icon.shadow = "http://youwebsite.com/shadow.png";
      icon.iconSize = new GSize(50, 28);
      icon.shadowSize = new GSize(68, 28);
      icon.iconAnchor = new GPoint(37, 59);
      icon.infoWindowAnchor = new GPoint(31, 8);

Just before this line in the html page containing your store locator map:

var map;
var geocoder;

Adjust the GSize for both iconSize and shadowSize if necessary. The first number in parentheses defines the width of your marker and the second number defines the height (both in pixels).

Now, add this line of code:

 var marker = new GMarker(point, icon);

Just after this line:

function createMarker(point, name, address, city, state, zipcode, website, phone, email, group)

Save your work and view the locator map in a browser. Your map should now display your custom icons as the marker on each location.

Let me know if you have any problems or questions.

 

Here are links to all of the posts in this series on how to create your own store locator map:

 

Create a spreadsheet of your store locations

Create and populate the MySQL table

 Create a PHP file which will be used to connect to the database

Create a PHP file which will output the XML file results of a search

Create the HTML page which contains the store locator map

 And here are some hints and tips to help create and customize your store locator map:

Using your own custom markers for the locations in place of Google’s default markers

How to prevent the map from zooming in to close on a single location

Categories: Javascript, PHP, Random | Tags: , , , , , , ,
Previous Entries