Hi I'm trying to make a functionality where if the customer clicks the show more, 3 images will appear, and if it was clicked one more time another 3 images will appear and so fourth. I'm having trouble on Javascript, just wondering if someone can help me see the error.
my fiddle here
$(document).ready(function () {
image_x = $(".handler .col-md-4").size();
x=1;
$('.handler .col-md-4:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= image_x) ? x+1 : image_x;
$('.handler .col-md-4:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('.handler .col-md-4').not(':lt('+x+')').hide();
});
});
.col-md-4 {
width: 100%;
text-align: center;
}
.col-md-6 {
width: 100%;
text-align: center;
}
#loadmore {
border: 1px solid;
padding: 20px;
}
#loadless {
border: 1px solid;
padding: 20px;
}
<div class="handler">
<div class="col-md-4">
<div class="livery-article">
<a href="/blogs/good-company/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
</a>
</div>
</div>
<br />
<div class="col-md-4">
<div class="livery-article">
<a href="/blogs/good-company/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
</a>
</div>
</div>
<br />
<div class="col-md-4">
<div class="livery-article">
<a href="/blogs/good-company/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
</a>
</div>
</div>
<br />
<div class="col-md-4">
<div class="livery-article">
<a href="/blogs/good-company/72810435-hello-america">
<img class="livery-article-image"
src="http://cdn.shopify.com/s/files/1/0893/1740/files/blog1_large.png?16108356891554572192">
</a>
</div>
</div>
<br />
</div>
<br />
<br />
<div class="col-md-6">
show more image
show more image
</div>
<br />
<br />
<br />
<br />
<br />
<br />
Your code required some minor fixes. The id used in html and jquery were not in coherence. I have updated displays to be modified by toggling css display.
$(document).ready(function () {
x=1;
$('.handler li:lt('+x+')').css('display','block');
$('.handler li').not(':lt('+x+')').css('display','none');
});
$('#loadMore').click(function () {
image_x = $(".handler li").size();
x= (x+1 <= image_x) ? x+1 : image_x;
$('.handler li:lt('+x+')').css('display','block');
});
$('#loadLess').click(function () {
image_x = $(".handler li").size();
x=(x-1<=0) ? 3 : x-1;
$('.handler li').not(':lt('+x+')').css('display','none');
});
Refer this: http://fiddle.jshell.net/n8f983cb/7/
See the fiddle
A number of problems in your code, from logic issues to classname typos.
So, i rewrote your code a little bit. Check if this attends your need.
Thank you (:
There were a few mistakes in your code such as using the wrong id's as well as other things. But, instead of detailing the minor typos and syntax errors that won't really be helpful knowledge for anyone in the future, I'm going to demonstrate how I would approach the problem.
Create an object which holds a function for each action.
showMore should increment the counter, then show the appropriate items
showLess should decrement the counter, then hide the appropriate items
Create one function that hides or shows items based on the counter and hides or shows each action based on whether it can be used or not. Call this function at the end of each action defined previously.
Assign a delegated event listener to the parent of the controls, lookup the correct function based on the id and execute it. I added a fallback in case for some reason the code is changed and it can no longer find the correct function.
I've reduced the HTML and used placeholder images to reduce the size of the demo below, but it will work with your HTML as well.
$(document).ready(function() {
var images = $(".handler > div").hide(), x = 1;
var showMore = $('#showMore');
var showLess = $('#showLess');
var funcs = {
'showMore': function() { ++x; show(); },
'showLess': function() { --x; show(); }
}
$('.controls').on('click', 'a', function(e){
return (funcs[e.target.id] || function(){})(), false;
});
function show() {
images.hide().filter(function(i){ return i < (x * 3); }).show();
showMore.show().filter(function(){ return !images.is(':hidden'); }).hide();
showLess.show().filter(function(){ return x === 1; }).hide();
}
show();
});
.handler { width: 600px; } .handler > div { display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="handler"><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/abstract"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/business"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/animals"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/transportation"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/sports"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/cats"></div></div><div class="col-md-4"><div class="livery-article"><img src="//lorempixel.com/200/100/animals"></div></div></div><br /><div class="col-md-6 controls">show more images show less images</div>
Related
I have a set of div elements. In jQuery, I would like to be able to find out the div with the maximum height and also the height of that div. For instance:
<div>
<div class="panel">
Line 1
Line 2
</div>
<div class="panel">
Line 1<br/>
Line 2<br/>
Line 3<br/>
Line 4<br/>
</div>
<div class="panel">
Line 1
</div>
<div class="panel">
Line 1
Line 2
</div>
</div>
By looking at the above, we know that the 2nd div (with 4 Lines) has the maximum height of all. How do I find this out? Could someone please help?
So far I've tried:
$("div.panel").height() which returns the height of the 1st div.
Use .map() and Math.max.
var maxHeight = Math.max.apply(null, $("div.panel").map(function ()
{
return $(this).height();
}).get());
If that's confusing to read, this might be clearer:
var heights = $("div.panel").map(function ()
{
return $(this).height();
}).get();
maxHeight = Math.max.apply(null, heights);
The html that you posted should use some <br> to actually have divs with different heights. Like this:
<div>
<div class="panel">
Line 1<br>
Line 2
</div>
<div class="panel">
Line 1<br>
Line 2<br>
Line 3<br>
Line 4
</div>
<div class="panel">
Line 1
</div>
<div class="panel">
Line 1<br>
Line 2
</div>
</div>
Apart from that, if you want a reference to the div with the max height you can do this:
var highest = null;
var hi = 0;
$(".panel").each(function(){
var h = $(this).height();
if(h > hi){
hi = h;
highest = $(this);
}
});
//highest now contains the div with the highest so lets highlight it
highest.css("background-color", "red");
If you want to reuse in multiple places:
var maxHeight = function(elems){
return Math.max.apply(null, elems.map(function ()
{
return $(this).height();
}).get());
}
Then you can use:
maxHeight($("some selector"));
function startListHeight($tag) {
function setHeight(s) {
var max = 0;
s.each(function() {
var h = $(this).height();
max = Math.max(max, h);
}).height('').height(max);
}
$(window).on('ready load resize', setHeight($tag));
}
jQuery(function($) {
$('#list-lines').each(function() {
startListHeight($('li', this));
});
});
#list-lines {
margin: 0;
padding: 0;
}
#list-lines li {
float: left;
display: table;
width: 33.3334%;
list-style-type: none;
}
#list-lines li img {
width: 100%;
height: auto;
}
#list-lines::after {
content: "";
display: block;
clear: both;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id="list-lines">
<li>
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />
<br /> Line 1
<br /> Line 2
</li>
<li>
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />
<br /> Line 1
<br /> Line 2
<br /> Line 3
<br /> Line 4
</li>
<li>
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />
<br /> Line 1
</li>
<li>
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />
<br /> Line 1
<br /> Line 2
</li>
</ul>
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
display: flex;
flex-wrap: wrap;
}
ul li {
width: calc(100% / 3);
}
img {
width: 100%;
height: auto;
}
<ul>
<li>
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">
<br> Line 1
<br> Line 2
</li>
<li>
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">
<br> Line 1
<br> Line 2
<br> Line 3
<br> Line 4
</li>
<li>
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">
<br> Line 1
</li>
<li>
<img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">
<br> Line 1
<br> Line 2
</li>
</ul>
Try Find out divs height and setting div height
(Similar to the one Matt posted but using a loop)
If you were interested in sorting entirely in standard JavaScript, or without using forEach():
var panels = document.querySelectorAll("div.panel");
// You'll need to slice the node_list before using .map()
var heights = Array.prototype.slice.call(panels).map(function (panel) {
// return an array to hold the item and its value
return [panel, panel.offsetHeight];
}),
// Returns a sorted array
var sortedHeights = heights.sort(function(a, b) { return a[1] > b[1]});
Easiest and clearest way I'd say is:
var maxHeight = 0, maxHeightElement = null;
$('.panel').each(function(){
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
maxHeightElement = $(this);
}
});
This might be helpful, in some way. Fixing some code from #diogo
$(window).on('load',function(){
// get the maxHeight using innerHeight() function
var maxHeight = Math.max.apply(null, $("div.panel").map(function () {
return $(this).innerHeight();
}).get());
// Set the height to all .panel elements
$("div.panel").height( maxHeight );
});
A solution suggested by #musicnothing in an older thread displays a content div below the row of inline divs, this works good when the div.wrapblock is clicked itself.
http://jsfiddle.net/SYJaj/7/
function placeAfter($block) {
$block.after($('#content'));
}
$('.wrapblock').click(function() {
$('#content').css('display','inline-block');
var top = $(this).offset().top;
var $blocks = $(this).nextAll('.wrapblock');
if ($blocks.length == 0) {
placeAfter($(this));
return false;
}
$blocks.each(function(i, j) {
if($(this).offset().top != top) {
placeAfter($(this).prev('.wrapblock'));
return false;
} else if ((i + 1) == $blocks.length) {
placeAfter($(this));
return false;
}
});
});
The issue I'm having.
I need to trigger the same effect, but by adding the click event to a link within the wrapblock itself.
My code is nearly identical.
What I have changed is the click event handle, from $('.wrapblock').click(function() to $('.more').on('click', function() I also needed to add .closest(".wrapblock") for the content div to position itself outside of the wrapblock.
$('.more').on('click', function() {
...
if ($blocks.length == 0) {
placeAfter($(this).closest(".wrapblock"));
return false;
}
Everything can be seen and tested http://jsfiddle.net/7Lt1hnaL/
Would be great if somebody could shed some light on how I can calculate which block it needs to follow with the offset method, thanks in advance.
As you can see in the latest fiddle example, the content div is not displaying below the row of divs.
I also apologise, I wanted to post on the thread in discussion but I only have a minor posting reputation which doesn't let me, thanks.
var $chosen = null;
var $allBlocks = [];
$(function(){
$allBlocks = $('.wrapblock');
})
$(window).on('resize', function() {
if ($chosen != null) {
$('#content').css('display','none');
$('body').append($('#content'));
$chosen.trigger('click');
}
});
$('.more').on('click', function() {
$chosen = $(this);
var position = $chosen.parent('.wrapblock').position();
$('#content').css('display','inline-block');
$allBlocks.filter(function(idx, ele){
return $(ele).position().top == position.top;
})
.last()
.after($('#content'));
});
.wrapblock
{
background: #963a3a;
display: inline-block;
width: 90px;
height: 90px;
color: white;
font-size: 14px;
text-align: left;
padding: 10px;
margin: 10px;
vertical-align:top;
position:relative;
}
#content
{
display:none;
vertical-align:top;
width:100%;
background: #5582c1;
font-size: 12px;
color: white;
padding: 10px;
}
.more {
position:absolute;
bottom:15px;
right:15px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wrapblock">1
<span class="more" data-ref="1">more</span>
</div>
<div class="wrapblock">2
<span class="more" data-ref="2">more</span>
</div>
<div class="wrapblock">3
<span class="more" data-ref="3">more</span>
</div>
<div class="wrapblock">4
<span class="more" data-ref="4">more</span>
</div>
<div class="wrapblock">5
<span class="more" data-ref="5">more</span>
</div>
<div class="wrapblock">6
<span class="more" data-ref="6">more</span>
</div>
<div class="wrapblock">7
<span class="more" data-ref="7">more</span>
</div>
<div class="wrapblock">8
<span class="more" data-ref="8">more</span>
</div>
<div class="wrapblock">9
<span class="more" data-ref="9">more</span>
</div>
<div id="content">Some Content</div>
Seems to do what you want. Basically, it just filters down the set of all blocks to the row of the block you clicked on using the assumption that they'll all have the same vertical offset (top), then takes the last one, because jQuery will keep them in document order, so that'll be the last one in the layout row.
Oh, and I updated the fiddle http://jsfiddle.net/7Lt1hnaL/1/
I need to develop a News page with 3 articles that can be hidden or showed one by one, by means of 2 buttons: "Show more news" and "Show less news"
Each article must be hidden/displayed by clicking the relevant button only once, starting from the last article (at the bottom page) to the first one (top of page). HTML:
<!-- Articles-->
<article id="art-1" class="row" >My first Art</article>
<article id="art-2" class="row art" >My second Art</article>
<article id="art-3" class="row art" >My last Art</article>
<!--Buttons-->
<button class="button-grey" id="show-less-news1">Show Less</button>
<button class="button-grey" id="show-less-news2">Show Less</button>
<button class="button-grey" id="show-less-news3">Show Less</button>
<button class="button-grey" id="show-more-news1">Show More</button>
<button class="button-grey" id="show-more-news2">Show More</button>
<button class="button-grey" id="show-more-news3">Show More</button>
I managed to do this with JQuery but the code is extremely verbose and I need 6 buttons instead of 2, but I believe there must be a simplier way to get the same result with a less complex code. This is the JQuery code:
$("#show-more-news1").css({display:'none'});
$("#show-more-news2").css({display:'none'});
$("#show-more-news3").css({display:'none'});
$("#show-less-news1").css({display:'none'});
$("#show-less-news2").css({display:'none'});
//function 1 less
$("#show-less-news3").click(function(){
$("#art-3").hide(400);
$("#show-less-news3").hide();
$("#show-more-news3").show();
$("#show-less-news2").show();
});
//function 2 less
$("#show-less-news2").click(function(){
$("#art-2").hide(400);
$("#show-less-news2").hide();
$("#show-more-news3").hide();
$("#show-less-news1").show();
$("#show-more-news2").show();
});
//function 3 more
$("#show-more-news3").click(function(){
$("#art-3").show(400);
$("#show-more-news3").hide();
$("#show-less-news2").hide();
$("#show-less-news3").show();
});
//function 3 less
$("#show-less-news1").click(function(){
$("#art-1").hide(400);
$("#show-less-news1").hide();
$("#show-more-news2").hide();
$("#show-more-news1").show();
});
//function 2 more
$("#show-more-news2").click(function(){
$("#art-2").show(400);
$("#show-more-news2").hide();
$("#show-less-news1").hide();
$("#show-less-news2").show();
$("#show-more-news3").show();
});
//function 1 more
$("#show-more-news1").click(function(){
$("#art-1").show(400);
$("#show-more-news1").hide();
$("#show-less-news1").show();
$("#show-more-news2").show();
});
Some CSS:
article {
position: realtive;
width: 100%;
height: 50px;
border: 1px solid red;
float:left;
background-color: yellow;
}
.button-grey {
display: block;
background-color: #cfcfcf;
width: 150px;
height: 30px;
float:right;
}
Here's a CodePen. Can someone help me to get the same result with a better code?
Thanks a lot!
Using your HTML with only two buttons and identical CSS
The following JS works for better for me:
Javascript:
var newsDepth = 3;
var maxNewsDepth = 3;
$('#show-more-news').hide();
$('#show-more-news').click( function () {
(newsDepth < maxNewsDepth ) && newsDepth++;
$('#art-' + newsDepth).show();
$('#show-less-news').show();
if (newsDepth == maxNewsDepth) $('#show-more-news').hide();
});
$('#show-less-news').click( function () {
( newsDepth > 1 ) && newsDepth--;
$('#art-' + (newsDepth + 1)).hide();
$('#show-more-news').show();
if (newsDepth == 1) $('#show-less-news').hide();
});
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Articles-->
<article id="art-1" class="row">My first Art</article>
<article id="art-2" class="row art">My second Art</article>
<article id="art-3" class="row art">My last Art</article>
<!--Buttons-->
<button class="button-grey" id="show-less-news">Show Less</button>
<button class="button-grey" id="show-more-news">Show More</button>
Here is a codepen for you
I've got a better version in this jsfiddle.
HTML:
<!-- Articles-->
<div id="articles">
<article id="art-1" class="row">My first Art</article>
<article id="art-2" class="row art">My second Art</article>
<article id="art-3" class="row art">My last Art</article>
</div>
<!--Buttons-->
<button class="button-grey" id="show-less">Show Less</button>
<button class="button-grey" id="show-more" style="display: none">Show More</button>
JS:
var allArticles = $('#articles article');
var visibleCount = 3;
$('#show-less').on('click', function() {
// no more articles to hide
if (visibleCount == 0) return;
// hide the previous one
$(allArticles[--visibleCount]).hide();
// Show the more button
$('#show-more').show();
// hide the less button
if (visibleCount == 0)
$('#show-less').hide();
});
$('#show-more').on('click', function() {
if (visibleCount == allArticles.length) return;
// show the next article
$(allArticles[visibleCount++]).show();
// Show the less button
$('#show-less').show();
// hide the more button
if (visibleCount == allArticles.length)
$('#show-more').hide();
});
I've been trying for the past hours to create a Comic Book online reader to allow my images to load up.
Everything works fine but I use a counter using a increment method basically and it just doesn't work because bringing down the increments breaks the function.
Maybe there is a simpler way? Also jQuery is the most obscure language to learn unlike HTML or PHP, jQuery has a documentation that pretty much has no organization. Its like here's all the stuff now read each one and maybe you'll find yours. My code is below
<script>
$(function manga () {
var count = 0;
var images = ["source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg", "source_images/07.jpg"];
$("#left").click(function () {
var img = images[count % images.length];
++count;
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
$("#right").click(function () {
var img = images[count % images.length];
--count;
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
manga();
});
</script>
<title></title>
<center>
<img id="left" style="width:10%; float:left; padding:1.3%" src="files/left_arrow.png" />
<div >
<img id="manga" style="width:75%; float:left" src="source_images/00.jpg" />
</div>
<img id="right" style="width:10%; float:left; padding:1.2%" src="files/right_arrow.png" />
</center>
Basically your calling your function manga 3 times
first when it loads
second when your do left click
and third when you do right click
In this your initializing counter to keep track of the images and everytime
your calling function again your initializing it to 0
so your count again starting from 0.
So to avoid it make your count variable global declare it outside the manga() function.
checkout this code
<script>
var count = 0;
$(function manga () {
var images = ["source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg", "source_images/07.jpg"];
$("#left").click(function () {
++count;
var img = images[count % images.length];
alert(img);
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
$("#right").click(function () {
if(count == 0)
{
count = images.length-1;
}
else {
--count;
}
var img = images[count % images.length];
alert(img);
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
manga();
});
</head>
<body>
<center>
<center>
<img id="left" style="width:10%; float:left; padding:1.3%" src="files/left_arrow.png" />
<div >
<img id="manga" style="width:75%; float:left" src="source_images/00.jpg" />
</div>
<img id="right" style="width:10%; float:left; padding:1.2%" src="files/right_arrow.png" />
</center>
</center>
I changed the position of count variable in both left and right click. And added one if condition in left click so that when the page loads first time and if user click left arrow first it will show last image.
so image src will move from first to last.It will work.
I am using jQuery miniColors colorpicker but in the sample code the picker appears right next to the field and button, in my case it appears at the very bottom of my document, it is as if it can't read in the position data of the button calling it.
Anyone had a similar issue with this plugin?
Here is what my code looks like (before jQuery initializes this as a color-picker)
<p style='position:absolute;top:0px;left:0px;margin-left:10px;'>
<input type='text' class='color-picker miniColors' name='data_0' id='data_0' size='6' value='".$data[0]."' />
</p>
. And after I run this code on it.
$('#data_0').miniColors({
change: function(hex, rgb) { $('#slide_bg').css("background-color",hex); }
});
. It looks like this.
<p style="position:absolute;top:0px;left:0px;margin-left:10px;">
<input type="text" class="color-picker miniColors" name="data_0" id="data_0" size="6" value="#ffffff" maxlength="7" autocomplete="off">
<span class="miniColors-triggerWrap">
<a class="miniColors-trigger" style="background-color: #ffffff" href="#"></a>
</span>
</p>
. And the actual colorpicker gets inserted at the very last of my (so right before the and looks like this:
<div class="miniColors-selector color-picker miniColors" style="left: 116px; ">
<div class="miniColors-hues">
<div class="miniColors-huePicker" style="top: 0px; "></div>
</div>
<div class="miniColors-colors" style="background-color: rgb(255, 0, 0); ">
<div class="miniColors-colorPicker" style="top: -5px; left: -5px; ">
<div class="miniColors-colorPicker-inner"></div>
</div>
</div>
</div>
. And appears below the footer of my page =(
As you can see it has a value for left:116px but nothing for the vertical positioning.
Please consider trying MiniColors 2.0, which changes the way positioning is handled for the dropdown. This version is a complete rewrite of the original one. We also added a number of new features that you may find useful.
Try putting the field inside a paragraph and define the position of paragraph with css and it will work.
E.g. -
<p style="position: absolute; left: 100; top: 100; margin-left: 10px;">
<input type="input" name="color-picker" class="color-picker" size="7" />
</p>
SOLUTION:
This is how I solved it. Solution is a bit jerky though.
I used show callback and add remove classes based on view
// add jquery function removeClassPrefix
$.fn.removeClassPrefix = function(prefix) {
this.each(function(i, it) {
var classes = it.className.split(' ').map(function(item) {
return item.indexOf(prefix) === 0 ? '' : item;
});
it.className = classes.join(' ');
});
return this;
};
// add more selector expressions to jquery
$.extend($.expr[':'], {
'off-top': function(el) {
return $(el).offset().top < $(window).scrollTop();
},
'off-right': function(el) {
return $(el).offset().left + $(el).outerWidth() - $(window).scrollLeft() > $(window).width();
},
'off-bottom': function(el) {
return $(el).offset().top + $(el).outerHeight() - $(window).scrollTop() > $(window).height();
},
'off-left': function(el) {
return $(el).offset().left < $(window).scrollLeft();
}
});
// use show event
$('#div_id').miniColors({
theme: 'bootstrap',
show: function() {
var $input = $(this);
var $minicolors = $input.parent();
var $panel = $minicolors.find('.minicolors-panel');
var classPrefix = 'minicolors-position-';
$minicolors.removeClassPrefix(classPrefix);
if ($panel.is(':off-top')) {
$minicolors.addClass(classPrefix + 'bottom');
}
if ($panel.is(':off-bottom')) {
$minicolors.addClass(classPrefix + 'top');
}
if ($panel.is(':off-left')) {
$minicolors.addClass(classPrefix + 'right');
}
if ($panel.is(':off-right')) {
$minicolors.addClass(classPrefix + 'left');
}
}
});