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

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];
bar = foo.slice(3);

and more complex example:

<ul class="products">
//split ul into three parts with hr between
//add 2 uls after first one
//move lis into 2 uls
	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 .


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"/>

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
	} else {
		myheading = "&#10;<st_9>" + myheading; //this one sets it for with flash


Display Loading Graphic Until Page Fully Loaded

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

	<meta charset='UTF-8'>
	<title>Simple Loader</title>
		/* 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; }
	<script src=""></script>
	<script src=""></script>
		// Wait for window load
		$(window).load(function() {
			// Animate loader off screen
				top: -200
			}, 1500);

	<img src="download.png" id="loader">
	<img src="">



Adding/Removing Class on Hover

<ul id="my-list">
        Am I right?
        But am I right?!


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() {
    mouseleave : function() {
    click      : function() {
        var obj = $(this),
            div = obj.children("div");
        if(":visible")) {
        } else {