Javascript/Jquery – Ansyori's Blog

Published November 12, 2018

Knockoutjs: populate json url data to select options

Today this thing got me frustrated, let’s straight to the main problem, before I forget create js function to load from an URL contains json…

Comments closed

Published April 30, 2015

Magento : Infinite Scroll for WordPress Posts Integration on Magento

i wrote some jquery script to perform infinite scroll WordPress posts on magento site, here you go

<style>
/*hide the toolbars */
.pager.pager-no-toolbar{
	display:none;
}

/* biar kelap kelip */
.blink_me {
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: blinker;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

	animation-name: blinker;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@-moz-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
@keyframes blinker {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

</style>
<script>
$j = jQuery.noConflict();
$j(document).ready(function(e) {

	var container_index = 0;
	var current_page = <?php echo $this->getRequest()->getParam('page') + 0; ?> ;
	var current_url = window.location.href;
	var base_url = '';

	if(current_page == 0)
	current_page = 1;

	$j(window).scroll(function() {
	   if($j(window).scrollTop() + $j(window).height() == $j(document).height()) {

		 $j('.post-list').append('<h2 class="load-notif blink_me">Loading.....</h3>');

		 $j('.post-list').append('<div class="load_contain'+container_index+'"></div>');
		 current_page = current_page + 1;

		 $j('.post-list .load_contain'+container_index).load(current_url+'?page='+current_page+'  .post-list > * ', function( response, status, xhr ) {

			if(status == 'success'){
				$j('.load-notif').remove();
			};

  		});

		 container_index++;

	   }
	});

});
</script>

<style>

/*hide the toolbars */

.pager.pager-no-toolbar{

display:none;

}

/* biar kelap kelip */

.blink_me {

-webkit-animation-name: blinker;

-webkit-animation-duration: 1s;

-webkit-animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

-moz-animation-name: blinker;

-moz-animation-duration: 1s;

-moz-animation-timing-function: linear;

-moz-animation-iteration-count: infinite;

animation-name: blinker;

animation-duration: 1s;

animation-timing-function: linear;

animation-iteration-count: infinite;

}

@-moz-keyframes blinker {

0% { opacity: 1.0; }

50% { opacity: 0.0; }

100% { opacity: 1.0; }

}

@-webkit-keyframes blinker {

0% { opacity: 1.0; }

50% { opacity: 0.0; }

100% { opacity: 1.0; }

}

@keyframes blinker {

0% { opacity: 1.0; }

50% { opacity: 0.0; }

100% { opacity: 1.0; }

}

</style>

$j = jQuery.noConflict();

$j(document).ready(function(e) {

var container_index = 0;

var current_page = <?php echo $this->getRequest()->getParam('page') + 0; ?> ;

var current_url = window.location.href;

var base_url = '';

if(current_page == 0)

current_page = 1;

$j(window).scroll(function() {

if($j(window).scrollTop() + $j(window).height() == $j(document).height()) {

$j('.post-list').append('<h2 class="load-notif blink_me">Loading.....</h3>');

$j('.post-list').append('<div class="load_contain'+container_index+'"></div>');

current_page = current_page + 1;

$j('.post-list .load_contain'+container_index).load(current_url+'?page='+current_page+' .post-list > * ', function( response, status, xhr ) {

if(status == 'success'){

$j('.load-notif').remove();

};

});

container_index++;

}

});

</script>

Leave a Comment

Published December 26, 2014

CSS tricks for Cross Browser Issues

if you a web developer, this is one the most common issue when you develop a website, yes… some css script not working properly on…

Leave a Comment

Published August 30, 2014

JQuery: Manipulate Select Button

here some jquery tricks for select button: anyway, i just use following tricks coulpe minutes ago 😀 here we go! /* sort options by text…

Leave a Comment

Published March 7, 2014

Magento : Add certain tags (iframe, script, etc) in CMS editor?

this is useful trick, i found on stackoverflow monggo gan open js/mage/adminhtml/wysiwyg/tiny_mce/setup.js find this block : var settings = { mode : (mode != undefined…

Leave a Comment

Published February 27, 2014

PHP Script to Check Magento Server Requirement

use this script to check is your server meet the requirement to run Magento enjoy gan !!! <?php extension_check(array( ‘curl’, ‘dom’, ‘gd’, ‘hash’, ‘iconv’, ‘mcrypt’,…

1 Comment

Published January 21, 2014

jQuery : Increase / Decrease All Element Font Size

just figure it out couple minutes ago, hope this is useful jQuery(‘body’).each(function(index) { jQuery(this).find(‘*’).each(function() { var cur_size = jQuery(this).css(‘font-size’); //alert(cur_size); cur_size = cur_size.replace(“px”,””); jQuery(this).css(‘font-size’, (cur_size…

Leave a Comment

Published January 6, 2014

jQuery: Detect if Browser Scrollable

to detect when browser is scrollable, use below jQuery script: if (jQuery(document).height() > jQuery(window).height()) { //alert(‘scroll bar exist’); }else { //alert(‘scroll bar Not exist’);…

Leave a Comment

Published November 25, 2013

CSS: Animate with CSS Only

this example css code, to perform animate like jQuery, but without any js code, but following code works on modern browser only <style> .theBox…

Leave a Comment

Published November 24, 2013

HTML : Avoid Page Cache

this an old trick, but very useful for me, especially when dealing with html page only or simple php, here you go, put this code…

1 Comment

Published October 24, 2013

Javascript: Create Map Directions by Google Maps

i will show you, example code, how to create map directions use Googgle Map, here is the code: <style> #map_canvas { width: 100%; height:…

Leave a Comment

Published October 22, 2013

jQuery: Search String Inside DIV tag

let say..you want to modify/add style inside DIV tag contains “Jhon” string below example the code <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn</div>…

Leave a Comment

Published September 4, 2013

jQuery: Stupid Way to Create Tabs

it is very stupid way to create jquery tabs… the CSS code: .product-tabs li a{ float: left; display: block; padding: 20px 0px; width: 187px; text-align:…

Leave a Comment

Published August 28, 2013

jQuery:Animated Scroll Back to Top

this example of jQuery snippet for animated scroll-up <a href=”#”>Back to Top</a> <script> $(document).ready(function(){ $(‘#do-nothing’).click(function(e) { $(‘body,html’).animate({“scrollTop”:0},’slow’); }); }); </script>

Leave a Comment

Published August 28, 2013

jQuery: Prevent Href/Hyperlink

This snippet will prevent the default behaviour of a hyperlink <a href=”#”>Go </a> <script> $(document).ready(function(){ $(‘#do-nothing’).click(function(e) { e.preventDefault(); }); }); </script>

Leave a Comment

Published August 21, 2013

Magento: Add External JS/CSS File to Header Tag

this is example how to add an external JS/CSS files to magento header into layout file : <default> <reference name=”head”> <block type=”core/text” name=”google.cdn.jquery”> <action method=”setText”>…

Leave a Comment

October 2019
M	T	W	T	F	S	S
« Sep
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Category: Javascript/Jquery