JQUERY

jQuery large pictures with a loading spinner

November 13, 2013 Ning AJAX, CSS, JAVASCRIPT, JQUERY, 0

Basic Version In our basic version, we will have a single div containing a loading spinner and once our large image is loaded (in the background) we will remove the spinner and insert our image. There’s a few ways to approach the loading screen, two of which are: Use a background image on the holder […]

cool jQuery touch slider owl carousel

November 4, 2013 Ning CSS, JQUERY, 0

Here is link http://owlgraphic.com/owlcarousel/ Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.

    <!-- Important Owl stylesheet -->
    <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
     
    <!-- Default Theme -->
    <link rel="stylesheet" href="owl-carousel/owl.theme.css">
     
    <!-- jQuery 1.7+ -->
    <script src="jquery-1.9.1.min.js"></script>
     
    <!-- Include js plugin -->
    <script src="assets/owl-carousel/owl.carousel.js"></script>

2. Set up your HTML You don’t need any […]

js form validation with JQuery

August 26, 2013 Ning JAVASCRIPT, JQUERY, 0

Here is good tutorial for js form validation with JQuery http://jqueryvalidation.org/documentation/

jquery render with object javascript and ajax example

August 22, 2013 Ning AJAX, JAVASCRIPT, JQUERY, 0

HTML

<ul class="products-list" id="computer-list">
		<li class="prod-tramp">
			<div class="product-t">
				<div class="product-b">
					<h2 class="prodname"></h2>
					<div class="pic">
						<img class="tramp-img" src="" alt="New Model image" style="margin-left: 17px;" />
					</div>
                                        ....
				</div>
			</div>
		</li>
</ul><!--products-list-->

</div>

....

</div>

</li>

</ul>

Javascript

	var url = ajaxUrl;
	$.post(url, { method: "getAllProducts" },
	function(data) {
		var obj = jQuery.parseJSON(data);
		var directive = {
			"li.prod-tramp": {
				"t<-Computer": {
					"img.tramp-img@src": "#{t.store_path}/media/catalog/product#{t.small_image}",
					"h2.prodname": "#{t.name}",
					...
				}
			}
		};
		$("ul#trampoline-list").render(obj,directive);

var url = ajaxUrl;

$.post(url, { method: "getAllProducts" },

function(data) {

var obj = jQuery.parseJSON(data);

var directive = {

"li.prod-tramp": {

"t<-Computer": {

"img.tramp-img@src": "#{t.store_path}/media/catalog/product#{t.small_image}",

"h2.prodname": "#{t.name}",

...

}

};

$("ul#trampoline-list").render(obj,directive);

Ajax return data(JSON)

-Computer 0
	Object { name="Computer name 1", small_image="/url/imagename1.png", more...} 
          1
	Object { name="Computer name 2", small_image="/url/imagename2.png", more...}
          2
	Object { name="Computer name 3", small_image="/url/imagename3.png", more...}
          3
	Object { name="Computer name 4", small_image="/url/imagename4.png", more...}

-Computer 0

Object { name="Computer name 1", small_image="/url/imagename1.png", more...}

Object { name="Computer name 2", small_image="/url/imagename2.png", more...}

Object { name="Computer name 3", small_image="/url/imagename3.png", more...}

Object { name="Computer name 4", small_image="/url/imagename4.png", more...}

Memory Game

July 21, 2013 Ning AJAX, CSS, JAVASCRIPT, JQUERY, MYSQL, PHP, 0

Game link: http://www.maning.ca/ats/memory-game/ Download Demo: http://www.maning.ca/ats/memory-game/memory-game-Demo.zip “Memory game is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.” I used half day to program this […]

Jquery iframe parent element in same domain

August 30, 2012 Ning JAVASCRIPT, JQUERY, 0

jQuery allowed control iframe parent element, but it must be in the same domain name.

var button = jQuery("#indigenous"+video_id, window.parent.document);
 if(button.length>0){
	 button.removeClass('indigenous-watchvideo').addClass('indigenous-votevideo');
 }

var button = jQuery("#indigenous"+video_id, window.parent.document);

if(button.length>0){

button.removeClass('indigenous-watchvideo').addClass('indigenous-votevideo');

}

Slickgrid custom field sample

July 17, 2012 Ning JAVASCRIPT, JQUERY, 0

Documenting here the code and answer, for future use by any user which will stumble upon my question. The logic of SlickGrid works like this: Columns that define the table headers and other run time properties like Sortable, width, etc. Data loop that gets your json & register values to the DataView, which hold for […]

Uploadprogress PHP extension tutor

June 27, 2012 Ning JQUERY, LINUX, PHP, 2

When it comes to uploading files, users expect visual feedback, usually in the form of a progress bar. The problem is that PHP doesn’t offer a way to track file uploads in progress by default. Fortunately, there is an extension that enables this functionality and this tutorial will show how it can be combined with […]

25 Best jQuery Tooltip Plugins

February 8, 2012 Ning JQUERY, 1

Tooltips, although are small things but one can’t underestimate their importance in website design. Tooltip is an excellent way to put up any extra information on site without hampering basic design or the main information. A “hover box” appears and disappears on hovering the cursor/mouse. Jquery Tooltip is the key to make a well made […]

55 jQuery Form Plugins To Download And Use

February 8, 2012 Ning JQUERY, 19

Default forms are boring and that’s for certain. Styling your form with a jQuery plugin is the solution for your aesthetic issues with basic and old forms. There are here 55 jQuery plugins for forms covering everything that you would think of related to form styling with the powerful jQuery. >> Start saving on printing […]