I needed to use the tall Delicious save button, but I found that it wasn't tall at all.. it was short & fat :)
So, I had to shrink it a little by hiding some parts. And, since
Delicious was smart enough to implement their button using AJAX. It is
easy to customize the button using CSS.
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
for those who want or can only use JavaScript to convert regular tags list into a Tag-Cloud. jQuery and regular expressions are here to help.
Why Tag-Cloud? It is better looking and more meaningful.
Update:
Since Aug. 25, 2009: blogger now offers a built-in Tag-cloud. So you won't need this code for that job. still, jQuery manipulation is cool :)
This is a complete javascript example to detect your site visitors referrer and greeting them with a message based on their referrer url.
For example, when a dzone user clicks on your link from dzone site, they get a message to remind them to vote up your site.
If you didn't see the message already, click here to see a greeting box..
Or Try pressing 'enter' on the Browser address bar to see the no-referrer message.
Or click here to google this post title then click on my site link to get referred back here and see the googler message.
The code consists of few CSS to style the message box and uses jQuery to show up the message box and array of regular expressions to define each referrer URL pattern and the corresponded message.
<html>
<head>
<title>jQuery Fun: Greeting Your Site Referrals</title>
<style type="text/css">
/* Style your Message Div */
#WelcomePlaceHolder{
/* Keep hidden until called by javascript */
display:none;
Border:silver 2px solid;
width:240px;
height:125px;
/* some space for BG image */
padding:2px 2px 2px 100px;
background:url('http://www.01gif.com/base/les_gifs_personnage_humains/hommes/hommes002.gif') no-repeat left center;
font-size:25px;
color:#333333;
margin:5px;
}
/* Style Close Button */
A.CloseButton {
font-size:11px;
font-weight:bolder;
color:black;
border:silver 2px solid;
text-decoration:none;
float:right;
padding:2px;
}
A.CloseButton:hover {
border:gray 2px outset;
text-decoration:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//Add urls regular expressions and your message(any HTML Code) to the array
var msgs = [
//null url : to show a message for direct traffic (no referer, some one who remember your site url!)
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
//My url! : show message for referrals from your own site or null so you do not annoy them
,{'url':/^http:\/\/(\w+\.)?moretechtips\.net/, 'msg':null}
//Other urls
,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
//You must keep it at the end of the list as it will match any non empty referrer
,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
//if Div was not placed means , not to show message
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// if not null msg found
if(msg) {
//Add Close Button and Show up message
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
//Hide On click close Button
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}
// Call the Referrer Detector function on document ready
$(DetectReferrer);
</script>
</head>
<body>
<div id="WelcomePlaceHolder"></div>
</body>
</html>Note that patterns array includes 4 type of patterns (in lowercase):
- Null Pattern, to add a message for direct traffic visitors (no-referrer)
- Your Site Pattern, to match when people referred by your site links. and i kept the message 'null' so i don't annoy the visitors.
- Generic pattern to match any referrer you didn't specify a message for, and it must come at the end of the array as it will match any non-empty referrer url.
- The rest are Sites Patterns.
for example [/^http:\/\/(\w+\.)?google\.com/] will match referrer urls that:
[^] Start with
[http:\/\/] means 'http://'
[(\w+\.)?] Any -optional- sub domain
[google\.com] match 'google.com'
Also note that, you should put the place holder div (ID='WelcomePlaceHolder') where the message should appear, and if you didn't put it there no message will come up.
If you need to review regular expressions, check this good reference [RegExp Object Reference]
Optimizing web pages for Google and other search engines is not enough. A successful concept for online marketing your blog or site has to be regarded in a more comprehensive way and must include the community [The Wisdom of Crowds!].
Web 2.0 is part of the community and vice versa. Social bookmarking is part of it, too. so you should make it as easy as possible for your visitors to bookmark your site. and gathering information on the best social bookmarking sites, their icons, submission URLs, and ranking is quite a pain.
This is a simple JavaScript that you can paste to any web page or blog to add the top 20 ranked social bookmarking sites as advised in [List of social bookmarking sites] and It should look like Icons on the right side -->>
And as you might know: loading many small images can slow down your page loading, as browser opens a new connection for each image to download, a well-known better approach is to put all this related images in one image, and use CSS to set background-position..
Here is the JavaScript to paste
<script type='text/javascript'>
function SocialBookmarks(){
var holder = document.getElementById("SocialButtonsPlace");
if (!holder) return;
var title = encodeURIComponent(document.title);
var url = encodeURIComponent(location.href);
/* these are the social bookmaking sites' icons ,ordered by rank, you can remove a line
but don't change the 'pos' so icon would show up correctly */
var socials = [
{'name':'Yahoo','pos':-16,'url':'http://myweb2.search.yahoo.com/myresults/bookmarklet?t='+title+'&u='+url},
{'name':'Google','pos':-32,'url':'http://www.google.com/bookmarks/mark?op=edit&bkmk='+url+'&title='+title},
{'name':'Live','pos':-48,'url':'https://favorites.live.com/quickadd.aspx?url='+url+'&title='+title},
{'name':'Facebook','pos':-64,'url':'http://www.facebook.com/sharer.php?u='+url+'&t='+title},
{'name':'Digg','pos':-80,'url':'http://digg.com/submit?phase=2&url='+url+'&title='+title},
{'name':'Ask','pos':-96,'url':'http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&t=webpages&url='+url+'&title='+title},
{'name':'Technorati','pos':-112,'url':'http://technorati.com/faves?sub=addfavbtn&add='+url+'&title='+title},
{'name':'Delicious','pos':-128,'url':'http://del.icio.us/post?url='+url+'&title='+title},
{'name':'StumbleUpon','pos':-144,'url':'http://www.stumbleupon.com/submit?url='+url+'&title='+title},
{'name':'Squidoo','pos':-160,'url':'http://www.squidoo.com/lensmaster/bookmark?'+url},
{'name':'Propeller','pos':-176,'url':'http://www.propeller.com/submit/?U='+url+'&T='+title+'&C='+title},
{'name':'Slashdot','pos':-192,'url':'http://slashdot.org/bookmark.pl?url='+url+'&title='+title},
{'name':'Reddit','pos':-208,'url':'http://reddit.com/submit?url='+url+'&title='+title},
{'name':'Fark','pos':-224,'url':'http://cgi.fark.com/cgi/fark/submit.pl?new_url='+url+'&new_comment='+title+'&linktype='},
{'name':'Newsvine','pos':-240,'url':'http://www.newsvine.com/_wine/save?u='+url+'&h='+title},
{'name':'Furl','pos':-256,'url':'http://www.furl.net/storeIt.jsp?t='+title+'&u='+url},
{'name':'Blinklist','pos':-272,'url':'http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url='+url+'&Title='+title},
{'name':'dzone','pos':-288,'url':'http://www.dzone.com/links/add.html?url='+url+'&title='+title},
{'name':'Magnolia','pos':-304,'url':'http://ma.gnolia.com/bookmarklet/add?url='+url+'&title='+title},
{'name':'SWiK','pos':-320,'url':'http://stories.swik.net/?submitUrl&url='+url}
];
for(var i=0; i<socials.length; i++)
holder.innerHTML = holder.innerHTML + '<li><A class=\'SocialButton\' style=\'background-position:0 '+socials[i].pos+'px\' href=\''+socials[i].url+'\' title=\''+socials[i].name+'\' target=\'_blank\'> </A></li>';
}
/* This call can be placed in body onload event */
SocialBookmarks();
</script>
And place this CSS code in the HTML Head or in an included CSS file
#SocialButtonsPlace {
list-style:none;
/* must do - Browsers WORLD WAR!*/
margin:0; padding: 0;
}
#SocialButtonsPlace Li{
float:left;
}
.SocialButton {
display:block;
height:16px;
width:16px;
line-height:16px;
margin:2px;
text-decoration:none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWuhPxjyWXhmT9ax0HQ-a-A1tkGL_hUK5WnSPdXu2uN9C1YsuEJMb5YyVD3rXtuMX4W3bRQDMMT5pWzXxBe5ezHun2B8uVxJzud3WwYjhWrScnKfoB8e3hT4kt7vqlxJzyzhFqLxcQf5_/s400/bar.gif);
}
And create a place holder UL where the icons will show up
<UL id="SocialButtonsPlace"></UL>
Don't forget to save the icons [Bar Image] and upload it some where on your site and change its location in CSS.
You may also use an Image-Map to display the bar image horizontally or vertically and define the clickable regions..
that's it.. enjoy!
it's all about Regular expressions; Regular expressions are a very powerful tool for performing pattern matches in strings. You can perform complex tasks that once required lengthy procedures with just a few lines of code using regular expressions...
in this example,i made a simple Code Beautifier and formatter for VB/VBScript/VB.net using JavaScript and CSS.
in this syntax highlighter There are patterns for matching Comments lines,Quoted strings,Escape HTML tags,and Language Keywords..
To extend this to format C# for example; all you need to change is the keywords of that programming language at the line
s = keywords_Beautifier("New|Class|..",s);
where you should place language keywords as one string separated by | as the first parameter
Go ahead try it your self
Output will look like this
Copy & paste this
You will need to include this css
<style>
b.KW {
color:blue;
}
b.Cm , b.Cm b.KW , b.Cm b.QS {
color:green;
font-weight:lighter;
}
b.QS, b.QS b.KW {
color:maroon;
font-weight:lighter;
}
</style>Code Beautifier And Formatter Source Code
<SCRIPT LANGUAGE=javascript>
function Code_Beautifier(){
var a = document.getElementById("codearea");
if (!a) return;
var s = a.value;
//escape HTML Tags <>
s= s.replace(/</g ,"<");
s= s.replace(/>/g ,">");
//next will use regular expressions patterns, and surround matches with <b ClssS="[Css class]"></b>
// but note that 'ClssS' is misspelled so it don't get changed by keywords pattern
//Beautify a quoted string
s= s.replace(/(\"[^\"]*\")/gi ,'<b ClssS="qs">$1</b>');
//Beautify Comments
s = Comments_Beautifier(s);
//escape lines
s= s.replace(/\n/g ,"<br />");
//escape spaces
s= s.replace(/\s\s/gi ," ");
//Beautify keywords
s = keywords_Beautifier("New|Class|Shared|Protected|Friend|byval|byREF|Optional|RETURN|GET|Property|Erase|LBound|UBound|Let|Set|Rem|Const|Empty|Nothing|Null|True|False|Control|Do|Loop|For|Next|For|If|Then|Else|select|While|Wend|end|Abs|Asc|AscB|AscW|Chr|ChrB|ChrW|CBool|CByte|CDate|CDbl|Cint|CLng|CSng|CStr|DateSerial|DateValue|Hex|Oct|Fix|Int|Sgn|TimeSerial|TimeValue|date|Time|DateSerial|DateValue|Day|Month|Weekday|Year|Hour|Minute|Second|Now|TimeSerial|TimeValue|Dim|Private|Public|ReDim|Sub|On|Err|InputBox|MsgBox|Atn|Cos|Sin|Tan|Exp|Log|Sqr|Randomize|Rnd|Mod|Is|And|Or|Xor|Eqv|Imp|CreateObject|IsObject|option|Call|FUNCTION|Sub|Instr|InStrB|Len|LenB|Lcase|Ucase|Left|LeftB|Mid|MidB|Right|RightB|Space|StrComp|string|Ltrim|Rtrim|Trim|IsArray|IsDate|IsEmpty|IsNull|IsNumeric|IsObject|VarType|ERROR",s);
s = CorrectCssClass(s);
var o = document.getElementById("output") ;
if (o) o.innerHTML = s;
var oa = document.getElementById("outarea");
if (oa) oa.value=s;
}
function keywords_Beautifier(keys,s) {
var rx = new RegExp("(\\b)("+ keys +")(\\b)", "gi")
return s.replace(rx ,'$1<b ClssS="Kw">$2</b>$3');
}
function Comments_Beautifier(s) {
return s.replace(/\'([^\n]+)\n/gi ,'<b ClssS="Cm">\'$1</b>\n');
}
function CorrectCssClass(s) {
return s.replace(/ClssS/g ,'class');
}
</SCRIPT> Some fine JavaScript Regular Expressions References
Using Regular Expressions with JavaScript and ActionScript
javascript regual expressions
JavaScript RegExp Object Reference
Subscribe to:
Comments
(
Atom
)
Web developer, jQuery plugin author, social media fan and Technology Blogger.