Javascript/Jquery | Ansyori Blog

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>

Continue reading Magento : Infinite Scroll for WordPress Posts Integration on Magento

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…

Continue reading CSS tricks for Cross Browser Issues

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…

Continue reading JQuery: Manipulate Select Button

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…

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

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’,…

Continue reading PHP Script to Check Magento Server Requirement

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…

Continue reading jQuery : Increase / Decrease All Element Font 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’);…

Continue reading jQuery: Detect if Browser Scrollable

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…

Continue reading CSS: Animate with CSS Only

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…

Continue reading HTML : Avoid Page Cache

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:…

Continue reading Javascript: Create Map Directions by Google Maps

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>…

Continue reading jQuery: Search String Inside DIV tag

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:…

Continue reading jQuery: Stupid Way to Create Tabs

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>

Continue reading jQuery:Animated Scroll Back to Top

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>

Continue reading jQuery: Prevent Href/Hyperlink

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”>…

Continue reading Magento: Add External JS/CSS File to Header Tag

Leave a Comment

April 2018
M	T	W	T	F	S	S
« Feb
						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

Category: Javascript/Jquery