Category: JavaScript

Open window with information (AJAX WAY)

In this example we will execute AJAX that will return data which will be visualised in new window (tab).

$(document).on("click", ".sysnav", function(){ //On clicked button
	id=$(this).attr('id');                 //Command that will be executed in script.php
		$.ajax({
			  url:'script.php',
			  type:'POST',
			  data:{ 
				command:id 
			  }  
		}).done(function(data){
			var target = window.open("/admin.php");   //Open new window
			target.NavigationPopup = data;	          //Data to be loaded in new window
		});		
});

Div with class “content” in new window will be filled with data from AJAX.
File “admin.php”(new window) must include this code. 

var NavigationPopup;            //Data from ajax

$(document).ready(function(){
	if(NavigationPopup){ 	$('.content').html(NavigationPopup);	} //Fill the "content" div
}

Load jQuery if not loaded (Asynchronous Way)

If you load scripts through ajax and they won’t execute.

After that place your code that you want to run.

Pagination example

PHP and HTML

    
	
  • «
    • 
$last){$top=$last;}
		if($x<=0){$bottom+=1;$top+=1;}								
	}
				
	for($i=$bottom;$i<=$top;$i++){ ?>
	       
  • ">
    • 

		
  • »
    •

jQuery

$(document).on("click",".pbutton",function() {
		var selected = this.text; //Selected page
		if(selected=="«"){selected = 1;} //first rows
		if(selected=="»"){selected = $(".last_page").attr("id");} //last rows
		
		$.ajax({
		  url:'admin.php',
		  type:'POST',
		  data:{ 
			command:"show_regular_quotation", //name of var: value of var  
			selected:selected
		  }  
		 }).done(function(data){
			$(".content").html(data);
		});		
	});

The code is perfectly compatible with bootstrap.

Display A Popup Only Once Per User

HTML:

jQuery code:

jQuery(document).ready(function(){
		
		if(localStorage.getItem('popState') != 'shown'){
			jQuery('#wrap-banner').css({
				'display':'block'
			});
			localStorage.setItem('popState','shown')
		}	
		
		jQuery('#close-offer').click(function(){
			jQuery('#wrap-banner').hide();
		});
	});

How to create simple parallax effect.

It is really simple to create parallax effect on your site. Add this script to your html head.

In your body tag add -> onload=”onLoad()”. This will automatically start the script on page load. Here is some css you will need for example to work:

body{background: url("/image/bg-texture-1200.png") repeat-x top center; width: 100%;  background-color: #E9F5FA; background-attachment: fixed;}

Passing values in JS in objects is by reference

Passing in a primitive type variable like a string or a number, the value is passed in by value. Passing in an object, however, passes it in by reference.

Here is an example:

What is this (IIFE) construct in javascript?

Immediately-Invoked Function Expression, or shorter: IIFE. It executes immediately after it’s created.
This pattern is often used when trying to avoid polluting the global namespace, because all the variables used in the function are not visible outside its scope. It’s good to use when we have multiple functions with the same name.

The output will be 5.