Posts Tagged "JQuery"
JQuery Progressbar
Progressbar is a really useful JQuery widget. Its really easy to use. The only thing that you need to know about this widget is how to set and get the current progress value. The rest is done by JQuery. The following code changes the progress every few seconds until it reaches 100%.
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.progressbar.js"></script>
<script type="text/javascript">
$(function(){
$("#progressbar").progressbar({ value: 0 });
setTimeout(updateProgress, 100); });
function updateProgress() {
var progress;
//The getter
progress = $("#progressbar").progressbar("option","value");
if (progress <= 100) {
//The setter
$("#progressbar").progressbar("option", "value", progress + 1);
$("#progressText").text(progress+"%");
setTimeout(updateProgress, 100);
}
}
</script>
</head>
<body>
<div id="progressbar"></div>
<div id="progressText"></div>
</body>
</html>
You could also view the demo by clicking here. To get more info regarding this widget you could see the dcumentation here.
Read More
JQuery Plugins
I have just read a post called “4 Superb jQuery Plugins”. It basically introduces 4 really useful JQuery plugins, which are:
- rf.Sparks
- jQuery Dropdown Search Panel
- Use jQuery to “turn off the lights” while watching videos
- Make an Animated Alphabet using Keypress Events in jQuery
There are also demos available for every plugin and there are tutorials on how to use them. Most of these plugins cannot be used in most of the websites, mainly because they provide specific animations, which may not not be useful on many websites. But if I ever had to implement any of them just using these plugins would save me so much time.
Read More
JQuery: Accordion Widget
Accordion is a really useful JQuery widget. Besides adding a nice look and movement into the website it is a great way of saving space in case of websites with lots of content. By Using this widget most of the data is hidden from the user they are only displayed when the user wishes to see them. This widget is also really easy to implement. The following code is all you need to have in order to create a simple Accordion widget:
Read More
How to slide a Div Horizantally using JQuery
This is a small tutorial that describes how to create a div that slides horizontally using JQuery. As I mentioned I’m using JQuery to animate the div there are many examples on the web that people are using their own defined functions but the best approach I believe is to use the functions inside JQuery because it’s faster to implement and also to apply the code into your own code.
As you can see I’m using the animate function to apply the sliding effects, you could add/remove other parameters to this function to get the sliding you like.
Here is the code:
<script src=”http://www.google.com/jsapi?key=ABQIAAAA1z2R5qvV2le8XlHGBMQW_BT2p0lhzy-giP_0zK-c010Lfxp0GhRrBN2wCdM7TBNC0YRkYDixL7chxg” type=”text/javascript”>
</script>
<script type=”text/javascript”>
google.load(”jquery”, “1?);
</script>
<style type=”text/css”>
#slidingDiv {
display: none;
}
</style>
<script type=”text/javascript”>
//<![CDATA[
function showSlidingDiv(){
$("#slidingDiv").animate({"width": "toggle"}, { duration: 1000 });
}
//]]>
</script>
<a href=”#” onClick=”showSlidingDiv(); return false;”>Show/hide</a><br />
<div id=”slidingDiv”>
<p>The text inside the sliding div should be placed here! 
</p>
</div>
Read More