Posts Tagged ‘jQuery’

Simple jQuery popup on page load examples

Sometimes people need to show some important information or Facebook likebox or advertisement or newsletter signup on popup when the website loads, without opening in a separate window. This can be achieved using the jQuery. Further these popup should not be popping every time the user browses various pages from the same website. So to prevent this we can use cookie or session check.

jQuery Popup

Here are two jQuery popup examples that will automatically loads on website visit.

1. First one uses PHP session to load it only once during the total browsing session, to see the popup again in action, close the browser and visit the demo link.

A simple jQuery slider – Unslider

While searching for a simple jQuery slider, I found this one very simple and light-weight (3kb). It avoids fancy effects and unnecessary markup. We can put any text in the slides and extend with CSS.

Here is an example usage of the slider.

DEMO     DOWNLOAD

You can get more details and original files/examples from here.

Create Bar Graph, Line Plot and Pie Chart using jqPlot

jqPlot is a jQuery plugin to create eye catching charts in your web sites. It’s versatile and expandable. You can create very nice line plotting, bar graphs or pie charts easily. You can choose from various styles and options as per your requirements. It uses client-side JavaScript so you don’t have to install anything extra on the server. Moreover, it’s free and open source.

Here I’m testing an example with Bar Graph.

Bar Chart

Graph container:

<div id="chart1" style="margin-top: 20px; margin-left: 20px; width: 300px; height: 300px;"></div>

The height and width of the graph can be adjusted from style options.

jQuery script:

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){         $.jqplot.config.enablePlugins = true;         var s1 = [26, 35];         var ticks = ['Grade IX', 'Grade X'];         plot1 = $.jqplot('chart1', [s1], {             // Only animate if we're not using excanvas (not in IE 7 or IE 8)             animate: !$.jqplot.use_excanvas,             seriesDefaults:{                 renderer:$.jqplot.BarRenderer,                 pointLabels: { show: true }             },             axes: {                 xaxis: {                     renderer: $.jqplot.CategoryAxisRenderer,                     ticks: ticks                 }             }, 			seriesColors: [ "#8E73B2"],   			title: 'Student Chart',      // Title for the plot.               highlighter: { show: false }         });     });
// ]]></script>

Simple Contact Us form using jQuery and PHP

Here is a simple contact form which is very essential to get feedback from website. It uses JavaScript validation of input parameters like name, address, phone, email, message etc. It uses jQuery post method to submit the input values such that they will be sent without page refresh.

DEMO DOWNLOAD

Show popup message for few seconds using jQuery

We have seen checking username availability using jQuery in earlier post. Here is a slight modification on showing of error/success message. The message will be shown as popup and disappears after few seconds. Using this way we can show the message in more fancy way.
The Javascript Code:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
function checkUserName(usercheck)
{
	var uname = document.getElementById('username').value;
	$.post("checkuser.php", {user_name: uname} , function(data)
		{			
			   if (data != '' || data != undefined || data != null) 
			   {				   
				  $('#usercheck').show();
				  $('#usercheck').html(data);
				  setTimeout("$('#usercheck').hide(); ", 3000); //display message for 3 seconds
			   }
          });
}

function checkUserLogin(user_id)
{
   if (user_id == '' || user_id == undefined || user_id == null) 
   {				   
	  $('#logincheck').show();
	  $('#logincheck').css('color', '#CC0000');
	  $('#logincheck').html('You must be logged in to submit.');
	  setTimeout("$('#logincheck').hide(); ", 3000); //display message for 3 seconds
   }
   else {
   	  document.frmPopMessage.submit();
   }
}
</script>


The CSS Code:

Showing contents with Read more for news, faq, help topics using jQuery

I have shown with you simple jQuery accordion for displaying News, Faq, Questions & Answers in the previous post. In that example we can show heading and detail would be seen upon clicking each heading.
But here is little different where you can show small portion of the text under each heading and the complete content would be displayed upon clicking the “Read More” button.

The Javascript Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript">
function Expand ( id )
{
	jQuery("#news div").each
	(
		function() { jQuery(this).children('p').eq(0).height(35); }
	);

	jQuery("#" + id + " p").hide().height('auto').slideDown('slow');
}
</script>

The CSS used:

Powered by WordPress