Develop Reference

Target last visible div after js action?

Is it possible to target the last visible div/container after a js function has worked, in this case mixitup plugin. You click to filter your results, this adds display: none or display: inline-block to the appropriate containers.
Using this code from another stack question
$(function () {
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
});
It works but only when the page first loads, after you active the mixitup and filter some results it doesn’t add the class red to the last ‘visible’ container i assume because its already loaded and done its job..
The mix it function is as follows..
$(function(){
var $filterSelect = $('#FilterSelect'),
$container = $('#partner_container');
$container.mixItUp({
animation: {
enable: false
}
});
$filterSelect.on('change', function(){
$container.mixItUp('filter', this.value);
});
});
So essentially need it to fire based on when the display: none and display:inline-block appears and disappears on the page.

So I think if you wrap the code you want to fire again in a function you can then set it to fire on callback from the mixItUp and on first load.
So you'd have a function like this:
function updateDisplay() {
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
}
And then call it on first load like this:
$(function () {
updateDisplay();
});
And then edit your mixItUp declaration to call this function also on callback of mixItUp having finished:
$container.mixItUp({
animation: {
enable: false
},
callbacks: {
onMixEnd: function(){
alert('No items were found matching the selected filters.');
}
}
});
Hope that helps.

Thanks to shodaburp i’ve managed to figure it out with the callback function, god knows how must be a fluke.
The full code i have now and seems to work...
$(function(){
var $filterSelect = $('#FilterSelect'),
$container = $('#partner_container');
$container.mixItUp({
animation: {
enable: false
},
callbacks: {
onMixEnd: function(state){
var $items = $($(".partners_list.container article.mix").get().reverse());
$items.each(function () {
if ($(this).css("display") != "none") {
$(this).addClass("red");
return false;
}
});
}
}
});
$filterSelect.on('change', function(){
$container.mixItUp('filter', this.value);
});
});

Get attribute value of the next or previous row on jquery-ui.sortable on stop() event

I have a gridview and I've implemented jquery.ui.sortable on it.
I've successfully assigned values for a custom attribute "printorder" which is used for its order in the list. What I need to know is how to get the previous or next attribute value for print order after I drop the sortable item. Here's what I've done so far but it doesnt work as it should:
$(function () {
$("#ListItems tbody").sortable({
start: function (event, ui) {
originalIndex = $("#ListItems tr.ListItem").index(ui.item);
originalPrintOrder = $(ui.item).attr('printorder');
},
stop: function (event, ui) {
endIndex = $("#gvInvItems tr.ListItem").index(ui.item);
if (endIndex < originalIndex) {
newPrintOrder = $(ui.item).prev().attr('printorder') + 1;
}
if (endIndex > originalIndex) {
newPrintOrder = $(ui.item).next(1).attr('printorder') - 1;
}
if (originalIndex == endIndex) {
return;
}
ChangeOrder(originalPrintOrder, newPrintOrder, $(ui.item).attr('ItemGUID'));
},
handle: ".dragHandle"
});
$("#ListItems tbody").sortable({
items: 'tr.RowStyle, tr.AltRowStyle'
});
});

You can look at the Api-Documentation. Use the update event and jQuery .next() and .prev() to get the elements:
http://jsfiddle.net/CZtLe/2/
$(function () {
$('ul').sortable({
update: function (event, ui) {
var prevElement = ui.item.prev();
var nextElement = ui.item.next();
$('span#prev').html(prevElement.html());
$('span#next').html(nextElement.html());
}
});
});

It seems that my code works well as. The problem was that I was adding strings so if I moved 5 rows 5 the code should add 1 to the previous row so it should be 4 + 1 = 5. But since I did not convert it to int (Number()) it only appended each other as strings so 4 + 1 = 41.
Noob mistake really. Thanks!

How would I control a JCarousel inside another JCarousel?

Using JCarousel I currently have a carousel inside another carousel, which I can trigger to start playing slides by clicking on a play button that I created on the outside carousel. These are all loaded dynamically.
I'd like to have the inner carousel stop animating and go back to it's original loaded position when I click to change the slide of the outer carousel.
Here is what I have currently for manipulating JCarousel:
//outer carousel
$('#carousel').jcarousel({
auto: 0,
wrap: 'circular',
scroll: 1,
initCallback: carousel_initCallBack,
itemVisibleInCallback: {
onBeforeAnimation: gallerycarousel_itemfirst
}
// Info Box
$('.info').click(function() {
var itemid = $(this).attr('id').substring(5);
$.ajax({
url: 'php/get_case_studies.php?item=' + itemid,
dataType: 'json',
success: function(data) {
var infobox = $('#box_info' + data.data[0].id)
infobox.html('');
var content = '<div class="main_sec">'+data.data[0].main_desc+'</div><div class="sec_sec">'+data.data[0].sec_desc+'</div><div class="visit"><span class="box_num"><img src="img/visitor.png" alt="#" /> Visitors:</span>'+data.data[0].visitors+'</div><div class="avg"><span class="box_num"><img src="img/time.png" alt="#"/> Average time on site:</span>'+ data.data[0].avg_time +'</div>';
infobox.append(content);
$('.box_info').animate({left: '0px'}, 200);
}
});
});
function carousel_initCallBack(carousel) {
carousel.clip.hover(function() {
$('.gallery_control').stop().animate({"top": "454px"}, 200);
carousel.stopAuto();
}, function() {
$('.gallery_control').stop().animate({"top": "524px"}, 200);
$('.box_info').animate({left: '-302px'}, 200 );
carousel.startAuto();
});
$('#gallerycarousel_controls .btn_right').click(function() {
carousel.next();
return false;
});
$('#gallerycarousel_controls .btn_left').click(function() {
carousel.prev();
return false;
});
$('.grid').click(function() {
$('.gallery_control').animate({"top": "524px"}, 200);
$('#grid_view').fadeIn('slow');
carousel.stopAuto();
$('#grid_view').mouseleave(function() {
$(this).fadeOut('slow');
carousel.startAuto();
});
});
$('#carousel_slides .btn_item').click(function() {
carousel.scroll($.jcarousel.intval($(this).attr('id')));
$('#grid_view').fadeOut('slow');
$('.gallery_control').animate({"top": "454px"}, 200);
return false;
});
//this is the play button which generates and starts the inner carousel
$('.play').click(function() {
var itemid = $(this).attr('id').substring(5);
$('#int_carousel' + itemid).load('get_slideshow.php?slideshow&item=' + itemid, function() {
$('#int_carousel' + itemid).jcarousel({
auto: 3,
wrap: 'circular',
scroll: 1
});
});
});
}
I have tried adding a click function within the 'carousel_initCallBack' function to see if I can control the inner carousel like this:
$('#gallerycarousel_controls .btn_right').click(function() {
$('#int_carousel' + itemid).stopAuto();
});
The above doesn't work as I have tried and this would probably not bring the inner carousel back to the original position of the slide.
I have went on multiple different forums and have been searching everywhere I could on the internet and I am still not able to find any solid help or assistance. I am in dire need of assistance on this as I ran out of options. Please if someone can help me, I'd appreciate it so much. I am still new to web development and need guidance.

jCarousel, Counter, how?

Im using this plugin: http://sorgalla.com/projects/jcarousel/
I want there do be a counter that can display:
1 of 4
When clicking the next button, it should say:
2 of 4 and so on...
The script is the default initialization:
<script type="text/javascript">
jQuery('#mycarousel').jcarousel();
</script>
However, haven't seen an example of this in the documentation ? So any help would be appreciated...
Thx

Uses something like this:
$(document).ready(function () {
var nmrElements = $('#mycarousel').children('li').length;
$('#mycarousel').jcarousel({
scroll: 1,
itemLoadCallback: function (instance, controlElement) {
if (instance.first != undefined) {
$('#label').html(instance.first + ' of ' + nmrElements);
}
}
});
});

Should be kind of impossible to realize with what is given there. Since it's just a ul that is hidden behind a div and only that ul element gets scrolled when you click on a button.
There is no semantic property that you could use to identify the currently visible object.

jQuery(document).ready(
function() {
function mycarousel_initCallback(carousel) {
// alert(this.mycarousel);
// alert("inside carousel");
// Disable autoscrolling if
// the user clicks the prev
// or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if
// the user moves with the
// cursor over the clip.
carousel.clip.hover(
function() {
carousel.stopAuto();
},
function() {
carousel.startAuto();
});
}
jQuery('#mycarousel').jcarousel({
auto : 2,
scroll : 1,
wrap : 'last',
initCallback : mycarousel_initCallback,
itemFallbackDimension: 300,
//size: mycarousel_itemList.length,
itemFirstInCallback:mycarousel_itemFirstInCallback
// itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback}
});
});
$(".jcarousel-prev").after("<div><h6 id=\"myHeader\" style=\"color:#FFFFFF;width:68%; top:85%; left:40px;font-size:100%; display: block;\" class=\"counterL\"></h6></div>");
function display(s) {
$('#myHeader').html(s);
};
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
display( idx +"<i> of </i>"+ $("#mycarousel li").length);
};

You can assign id-s to each image in carousel. And add some javascript to write the number from id of that images.
And also:
<script type="text/javascript">
function Callback_function(elem) {
document.write(this.id);
}
jQuery('#mycarousel').jcarousel({
scroll: 1,
initCallback: Callback_function,
});
</script>

it is simple, just open the following file:
sites\all\modules\jcarousel\js\jcarousel.js
and in line 146:
carousel.pageCount = Math.ceil(itemCount / carousel.pageSize);
change it to this: carousel.pageCount = Math.ceil(itemCount / 1);
it will work superb :D

Getting Lavalamp jQuery plugin to work with dropdown menu?

I have a problem with the jQuery Lavalamp plugin. It works perfectly with a single-level menu, but after adding a dropdown it gets a bit lost. Here's what I mean: http://screenr.com/0fS.
Of course what I would like to achieve is for the lavalamp background to stay on the Portfolio item when the user hovers over the subitems.
I guess it's a matter of changing the plugin slightly, so here's the full code of the plugin. What's needed is just a simple way to make the lavalamp stop at the current stage when <li>'s children are hovered and then go back to working normally after. Here's the full plugin code for reference!
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function() {
move(this);
}, noop);
$(this).hover(noop, function() {
move(curr);
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);`
Thanks in advance.

the fix for this is to change the hover() in the lavalamp to mouseover as show on the following page..
http://hekimian-williams.com/?p=146

I added additional class to top level li and updated the js:
$li = $("li.top-level-item", this),