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];
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>
//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 .

 

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>

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="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	
	
	<script src="https://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="https://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
		
</body>

</html>

 

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>

 

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();
        }
    }
});