Archive

Archive for the ‘JQuery’ Category

How to add dynamic li to UL in jquery


Carousel with Thumbs jquery


Carousel with Thumbs jquery

<!DOCTYPE html>
<html class=””>
<head>
<meta charset=”UTF-8″>

<!– <script src=”/assets/libs/prefixfree.min.js”></script>–>
<script style=’display: none !important;’>
function getSafeJS(js) {
js = js.replace(/location(s+)?=/mi, ”);
js = js.replace(/top.location.+=(‘|”)/mi, ”);
js = js.replace(/location.replace/mi, ”);
js = js.replace(/window(s+)?\[(s+)?(“|’)l/mi, ”);
js = js.replace(/self(s+)?\[(s+)?(“|’)loc/mi, ”);
return js;
} _ogEval = window.eval;
window.eval = function (text) { _ogEval(getSafeJS(text)); };
window.innerWidth = window.outerWidth; // Fixes browser bug with it innerWidth reports 0
window.innerHeight = window.outerHeight; // Fixes browser bug with it innerHeight reports 0

</script>

<link rel=”stylesheet prefetch” href=”//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css”>
<!– <link rel=”stylesheet prefetch” href=”//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css”>–>
<style>
.carousel-display
{
position: relative;
}

.carousel-display img, .carousel-thumbs img
{
width: 100%;
}

.carousel-thumbs img
{
opacity: 0.4;
}

.carousel-thumbs .active > img
{
opacity: 1;
}
</style>
</head>
<body>
<div id=”carousel-example-generic” class=”carousel slide”>
<div class=”carousel-display”>
<img class=”img-thumbnail” src=”http://lorempixel.com/1000/400/sports/1&#8243; alt=””>

<!– Controls –>
<a class=”left carousel-control” href=”#carousel-example-generic” data-slide=”prev”>
<span class=”icon-prev”></span>
</a>
<a class=”right carousel-control” href=”#carousel-example-generic” data-slide=”next”>
<span class=”icon-next”></span>
</a>
</div>

<div class=”carousel-inner carousel-thumbs”>
<div class=”item active”>
<div class=”row”>
<div class=”col-xs-2″>
<a href=”#” class=”thumbnail active”>
<img src=”http://lorempixel.com/500/500/sports/1&#8243; data-src=”http://lorempixel.com/1000/400/sports/1&#8243; alt=”” /></a>
</div>
<div class=”col-xs-2″>
<a href=”#” class=”thumbnail”>
<img src=”http://lorempixel.com/500/500/sports/2&#8243; data-src=”http://lorempixel.com/1000/400/sports/2&#8243; alt=”” /></a>
</div>
<div class=”col-xs-2″>
<a href=”#” class=”thumbnail”>
<img src=”http://lorempixel.com/500/500/sports/3&#8243; data-src=”http://lorempixel.com/1000/400/sports/3&#8243; alt=”” /></a>
</div>
<div class=”col-xs-2″>
<a href=”#” class=”thumbnail”>
<img src=”http://lorempixel.com/500/500/sports/4&#8243; data-src=”http://lorempixel.com/1000/400/sports/4&#8243; alt=”” /></a>
</div>
<div class=”col-xs-2″>
<a href=”#” class=”thumbnail”>
<img src=”http://lorempixel.com/500/500/sports/5&#8243; data-src=”http://lorempixel.com/1000/400/sports/5&#8243; alt=”” /></a>
</div>
<div class=”col-xs-2″>
<a href=”#” class=”thumbnail”>
<img src=”http://lorempixel.com/500/500/sports/6&#8243; data-src=”http://lorempixel.com/1000/400/sports/6&#8243; alt=”” /></a>
</div>
</div>
</div>
<div class=”item”>
<div class=”row”>
<div class=”col-xs-2″>
<a href=”#” class=”thumbnail”>
<img src=”http://lorempixel.com/500/500/sports/7&#8243; data-src=”http://lorempixel.com/1000/400/sports/7&#8243; alt=”” /></a>
</div>
<div class=”col-xs-2″>
<a href=”#” class=”thumbnail”>
<img src=”http://lorempixel.com/500/500/sports/8&#8243; data-src=”http://lorempixel.com/1000/400/sports/8&#8243; alt=”” /></a>
</div>
<div class=”col-xs-2″>
<a href=”#” class=”thumbnail”>
<img src=”http://lorempixel.com/500/500/sports/9&#8243; data-src=”http://lorempixel.com/1000/400/sports/9&#8243; alt=”” /></a>
</div>
</div>
</div>
</div>
</div>

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=”//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js”></script>
<script src=”http://s.codepen.io/assets/libs/empty.js”></script&gt;
<script>/**
* Carousel
*/
$(“.carousel”).each(function () {
var $carousel = $(this),
$display = $carousel.find(‘.carousel-display’);

var selectThumb = function ($img) {
var src = $img.data(‘src’) || $img.attr(‘src’);
$display.find(‘img’).attr(‘src’, src);

$carousel.find(‘.item’).find(‘.active’).removeClass(‘active’);
$img.parent().addClass(‘active’);
};

// ‘slide’ = this event fires immediately when the slide instance method is invoked.
$carousel.on(‘slide.bs.carousel’, function (event) {
var $item = $carousel.find(‘.carousel-inner > .item.active’);
var $itemThumb = $item.find(‘.thumbnail.active’).parent();
var $nextItem = $(event.relatedTarget);

if ($display.length) {
if ($itemThumb.is(‘:first-child’) && event.direction == ‘right’) {
selectThumb($nextItem.find(‘.thumbnail’).eq(0));
} else if ($itemThumb.is(‘:last-child’) && event.direction == ‘left’) {
selectThumb($nextItem.find(‘.thumbnail’).eq(0));
} else {
// center
if (event.direction == ‘left’) {
selectThumb($itemThumb.next().find(‘img’).eq(0));
} else {
selectThumb($itemThumb.prev().find(‘img’).eq(0));
}
return false;
}
}
});

// Thumbs Click
if ($display.length) {
$carousel.find(‘a.thumbnail’).on(‘click’, function (e) {
selectThumb($(this).find(‘img’));
e.preventDefault();
});
}
});

</script>
</body>
</html>
Ref:
http://codepen.io/anon/pen/ufryc

Read li from jQuery


$(this).find(‘li’).each(function(){

http://jsfiddle.net/DdjSN/

Add Dynamic table in jQuery

jQuery Menu


jQuery menu

 

<!DOCTYPE html>

<html>
<head>
<script type=’text/javascript’ src=”http://code.jquery.com/jquery-latest.min.js”></script&gt;
<script type=”text/javascript”>
$(function () {
$(‘li.main’).click(function () {
$(this).find(‘ul’).toggle(“slow”);
return false;
});

$(document).ready(function () {
$(‘li.main ul’).hide();
});
});
</script>
</head>
<body>
<div id=”subContent”>
<ul>
<li><a href=”nikon.html”>Nikon</a></li>

<li class=”main”><a href=”#”>Cameras</a>
<ul>
<li><a href=”nikon-d3x.html”>Nikon D3x</a></li>
<li><a href=”nikon-d3s.html”>Nikon D3s</a></li>
<li><a href=”nikon-d700.html”>Nikon D700</a></li>
<li><a href=”nikon-d300s.html”>Nikon D300s</a></li>
</ul>
</li>

<li class=”main”><a href=”#”>Lenses</a>
<ul>
<li><a href=”24-70.html”>Nikkor 24-70 f2.8</a></li>
<li><a href=”80-200.aspx”>Nikkor 80-200 f2.8</a></li>
<li><a href=”300.html”>Nikkor 300 f2.8</a></li>
<li><a href=”50.html”>Nikkor 50 f1.4</a></li>
</ul>
</li>

<li class=”main”><a href=”#”>Bags</a>
<ul>
<li><a href=”bag1.html”>Small Bag</a></li>
<li><a href=”bag2.html”>Medium Bag</a></li>
<li><a href=”bag3.html”>Large Ba</a></li>
</ul>
</li>
<li><a href=”#”>Memory Cards</a></li>
</ul>
</div>
</body>
</html>

jQuery toggle on Button Click

Jquery MegaMenu

Categories: JQuery Tags: , ,