You are reading...

January 24th

Fun with jQuery

So here’s the updated markup based on Part I


<ul id="miniblog">
<li class="miniblog"><a href="#bottom"></a></li>
<li><a id="twitter_link" href="#bottom">twitter</a> /</li>
<li><a id="tumblr_link"  href="#bottom">tumblr</a> /</li>
<li><a id="flickr_link" href="#bottom">flickr</a> /</li>
<li><a id="profile_link" href="#bottom">my profile...r</a></li>
</ul>

<div id="popups">
<div id="twitter_popup"><?php twitter_messages("saikit", 1); ?>
<a class="exit" href="#"></a></div>

<div id="tumblr_popup"><?php echo SimplePieWP('http://saikit.tumblr.com/rss',
array(
    'items' => 1,
    'template' => 'rui_popup'
    )); ?><a class="exit" href="#"></a>
</div>

<div id="flickr_popup"><?php echo
SimplePieWP('http://api.flickr.com/services/feeds/photos_public.gne
?id=82767974@N00&lang=en-us&format=rss_200', array(
    'items' => 1,
    'template' => 'flickr',
    'processing' => 'images_only' )); ?><a class="exit" href="#"></a>
</div>

<div id="profile_popup"><p class="title">are you<em>ready</em><strong>?</strong>
<br /><span><em>Design Studio</em></span></p>
	<p class="info">Sai-Kit Hui, web professional<br />
<a href="mailto:saikit@areyoudesign.com">saikit@areyoudesign.com</a><br />
<a href="/">http://www.areyoudesign.com</a><br /><a href="/">full profile</a></p>
	<a class="exit" href="#"></a>
</div>

</div>

This sets up a short little jQuery action.

jQuery(document).ready(function(){

	 jQuery("#twitter_link").click(function() {
		jQuery("#popups div:not(#twitter_popup)").hide("fast");
		jQuery("#twitter_popup").toggle("slow");
	  return false;
	});
	 jQuery("#profile_link").click(function() {
		jQuery("#popups div:not(#profile_popup)").hide("fast");
		jQuery("#profile_popup").toggle("slow");
	  return false;
	});
	 jQuery("#flickr_link").click(function() {
		jQuery("#popups div:not(#flickr_popup)").hide("fast");
		jQuery("#flickr_popup").toggle("slow");
	  return false;
	});
	 jQuery("#tumblr_link").click(function() {
		jQuery("#popups div:not(#tumblr_popup)").hide("fast");
		jQuery("#tumblr_popup").toggle("slow");
	  return false;
	});
	 jQuery("a.exit").click(function() {
		jQuery(this).parent().hide();
	  return false;
	});
});

In WordPress, the dollar sign is a Prototype framework property, so that’s why I put “jQuery” instead.

By the way, while jQuery plugins are nice, it’s always better to write your own jQuery. One, it is almost always smaller than plugins, which are feature rich. Second, learning jQuery is useful and easy. I wrote this and I suck at javascript. Like all jQuery actions, you need CSS to go with it. So…

.exit {
position:absolute;
display:block;
}

#popups div {
position:absolute;
top:130px;
right:0;
z-index:100;
display:none;
}

#twitter_popup {
width:287px;
height:62px;
background:url(images/mini_twitter.png) no-repeat;
padding:25px 10px 0;
font:11px/14px Verdana, Geneva, sans-serif;
}

#twitter_popup a.exit {
right:7px;
width:17px;
height:22px;
bottom:6px;
}

#tumblr_popup {
width:329px;
height:63px;
background:url(images/tumblr_popup.png) no-repeat;
padding:10px;
font:14px/18px Verdana, Geneva, sans-serif;
}

#tumblr_popup small {
font-family:Georgia, "Times New Roman", Times, serif;
}

#tumblr_popup a.exit {
right:7px;
width:17px;
height:22px;
bottom:6px;
}

#flickr_popup {
width:240px;
height:188px;
padding:14px;
background:url(images/flickr_popup.png) no-repeat;
}

#flickr_popup a.exit {
right:7px;
width:10px;
height:10px;
bottom:6px;
}

#profile_popup {
width:239px;
height:131px;
background:url(images/profile_popup.png) no-repeat;
padding:10px;
}

#profile_popup p {
margin:0;
font:11px Corbel, "Times New Roman", Times, serif;
}

#profile_popup .title {
font:32px Calibri, "Times New Roman", Times, serif;
text-transform:uppercase;
color:#000;
position:absolute;
right:5px;
top:0px;
text-align:right;
}

#profile_popup .title em {
font:75% Cambria, "Times New Roman", Georgia, Times, serif;
text-transform:none;
font-style:italic;
color:#6b6b6b;
}

#profile_popup .title span {
line-height:100%;
font-size:11px;
}

#profile_popup .title span em {
font:11px Cambria, "Times New Roman", Georgia, Times, serif;
color:#000;
line-height:50%;
position:relative;
bottom:25px;
right:25px;
}

#profile_popup .title em strong {
font-weight:400;
color:#000;
}

#profile_popup .info {
position:absolute;
bottom:6px;
left:7px;
}

#profile_popup .exit {
bottom:6px;
right:7px;
width:15px;
height:19px;
} 

So here you go HTML/CSS/jQuery working together to make the web more beautiful and more money in my pocket.

Go home