Posts Categorized: jQuery and JavaScript

Please Notice that this is my personal code snippets which I put there to behold and to more quickly find the required code.
And if these snippets will help somebody in his work, I’ll be happy that I could help

31/07/2015

Using jQuery for Spliting li list to three ul list and speparating them with hr

In short :

foo = [1,2,3,4,5,6,7,8];
alert(foo);
bar = foo.slice(3);
alert(bar);

foo = [1,2,3,4,5,6,7,8];

alert(foo);

bar = foo.slice(3);

alert(bar);

and more complex example:

<ul class="products">
<li>object1</li>
<li>object2</li>
<li>object3</li>
<li>object4</li>
<li>object5</li>
<li>object6</li>
<li>object7</li>
<li>object8</li>
<li>object9</li>
<li>object10</li>
</ul>

<li>object1</li>

<li>object2</li>

<li>object3</li>

<li>object4</li>

<li>object5</li>

<li>object6</li>

<li>object7</li>

<li>object8</li>

<li>object9</li>

<li>object10</li>

</ul>

//split ul into three parts with hr between
//add 2 uls after first one
//move lis into 2 uls
jQuery("li.product-cat-an-mala-mor").parent("ul").addClass("splitme");
	if(jQuery(".splitme").length > 0) {
		jQuery(".splitme").after('<hr class="product-separator"><ul class="products splitme2"></ul><hr class="product-separator"><ul class="products"></ul>');
		jQuery("ul.products").eq(1).append(jQuery(".splitme li").slice(3).detach());
		jQuery("ul.products").eq(2).append(jQuery(".splitme2 li").slice(2).detach());
		}

//split ul into three parts with hr between

//add 2 uls after first one

//move lis into 2 uls

jQuery("li.product-cat-an-mala-mor").parent("ul").addClass("splitme");

if(jQuery(".splitme").length > 0) {

jQuery(".splitme").after('<hr class="product-separator"><ul class="products splitme2"></ul><hr class="product-separator"><ul class="products"></ul>');

jQuery("ul.products").eq(1).append(jQuery(".splitme li").slice(3).detach());

jQuery("ul.products").eq(2).append(jQuery(".splitme2 li").slice(2).detach());

}

Because I using this on woocomerce shop, I was added extra class splittime with the if statement to make sure is all changes will work only in one category .

23/10/2014

W4P-Note Function update customform

Function updating the CustomForm in Web4print Server

<div style="display:none;">
<!-- bg -->
<input type="text" name="upload_1"/>
<input type="text" name="XSave_1" class="imgstore" value="http://...">
<!-- ribbon -->
<input type="text" name="upload_21" id="ribbon_graphic_go"/>
<input type="text" name="XSave_21" class="imgstore" id="ribbon_graphic"/>
</div>

<script>
setthumbs();
function update_custom() {
	//check if any flash text and update the value of background graphic input
	//also set it like this: $("input[name=upload_1]").val( [put correct path here] );
	
	myheading = $("[name=text_201]").val();
	if($("#flash_text").val() == "") {
		//do something
	myheading = "&#10;<st_10>" + myheading; //this one sets it for no flash
	$("input[name=upload_1]").val("http://...")
	} else {
		myheading = "&#10;<st_9>" + myheading; //this one sets it for with flash
		$("input[name=upload_1]").val("http://...")
	}
	$("[name=text_201]").val(myheading);
}

</script>

</div>

setthumbs();

function update_custom() {

//check if any flash text and update the value of background graphic input

//also set it like this: $("input[name=upload_1]").val( [put correct path here] );

myheading = $("[name=text_201]").val();

if($("#flash_text").val() == "") {

//do something

myheading = "
<st_10>" + myheading; //this one sets it for no flash

$("input[name=upload_1]").val("http://...")

} else {

myheading = "
<st_9>" + myheading; //this one sets it for with flash

$("input[name=upload_1]").val("http://...")

}

$("[name=text_201]").val(myheading);

}

</script>

17/10/2014

showing how to repeat code using array join method

var foo = ["a","b","c"];
alert(foo.join("--"));

var num_of_boxes = 13;
alert(new Array(num_of_boxes + 1).join("X"));

var foo = ["a","b","c"];

alert(foo.join("--"));

var num_of_boxes = 13;

alert(new Array(num_of_boxes + 1).join("X"));

14/10/2014

Display Loading Graphic Until Page Fully Loaded

<!DOCTYPE html>
<html class="no-js">

<head>
	<meta charset='UTF-8'>
	
	<title>Simple Loader</title>
	
	<style>
		/* This only works with JavaScript, 
		   if it's not present, don't show loader */
		.no-js #loader { display: none;  }
		.js #loader { display: block; position: absolute; left: 100px; top: 0; }
	</style>
	
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	
	
	<script src="http://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
	<script>
		// Wait for window load
		$(window).load(function() {
			// Animate loader off screen
			$("#loader").animate({
				top: -200
			}, 1500);
		});
	</script>	
</head>

<body>
		
	
	<img src="download.png" id="loader">
	
	
	<img src="http://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
		
</body>

</html>

<!DOCTYPE html>

<head>

<title>Simple Loader</title>

<style>

/* This only works with JavaScript,

if it's not present, don't show loader */

.no-js #loader { display: none; }

.js #loader { display: block; position: absolute; left: 100px; top: 0; }

</style>

// Wait for window load

$(window).load(function() {

// Animate loader off screen

$("#loader").animate({

top: -200

}, 1500);

});

</script>

</head>

<body>

</body>

</html>

14/10/2014

Adding/Removing Class on Hover

<ul id="my-list">
    <li>
        Am I right?
        <div>
            Yugi....
        </div>             
    </li>
    <li>
        But am I right?!
        <div>
            Yugi...
        </div>            
    </li>

<li>

Am I right?

<div>

Yugi....

</div>

</li>

<li>

But am I right?!

<div>

Yugi...

</div>

</li>

ul#my-list div {
    height: 50px;
    background-color: #ddd;
}

ul#my-list li.hover {
    background-color: #ffde8e;
}

ul#my-list div {

height: 50px;

background-color: #ddd;

}

ul#my-list li.hover {

background-color: #ffde8e;

}

$("ul#my-list li div").hide();

$("ul#my-list li").on({
    mouseenter : function() {
        $(this).addClass("hover");
    },
    mouseleave : function() {
        $(this).removeClass("hover");
    },
    click      : function() {
        var obj = $(this),
            div = obj.children("div");
        
        if(div.is(":visible")) {
            div.slideUp();
            obj.removeClass("hover");
        } else {
            div.slideDown();
        }
    }
});

$("ul#my-list li div").hide();

$("ul#my-list li").on({

mouseenter : function() {

$(this).addClass("hover");

mouseleave : function() {

$(this).removeClass("hover");

click : function() {

var obj = $(this),

div = obj.children("div");

if(div.is(":visible")) {

div.slideUp();

obj.removeClass("hover");

} else {

div.slideDown();

}

});

RAFAL CHELPA

FREELANCER WEB & GRAPHIC DESIGNER

Posts Categorized: jQuery and JavaScript

Using jQuery for Spliting li list to three ul list and speparating them with hr

W4P-Note Function update customform

showing how to repeat code using array join method

Display Loading Graphic Until Page Fully Loaded

Adding/Removing Class on Hover