Develop Reference

Issues with rotating jqueryUI modal

I am trying to build a modal that rotates to a particular element, $(.linkmoddet), based on a clicked element in the navbar $('.selectcircle') using the .switchClass function in jQueryUI.
However, I am having issues with the actual math involved, often causing:
only one or two elements to rotate at a time.
multiple elements gaining classes but not losing them.
occasionally losing all the classes involved, defaulting the element in question to a standard size and position in CSS.
Code
Edit: This has now been fixed.
http://codepen.io/yeasayer/pen/ZWxYZG
var selectcircle = $('.selectcircle');
var linkmoddet = $('.linkmoddet');
selectcircle.click(function(){
var circleindex = $(this).index()-1;
var centerindex;
console.log(circleindex);
selectcircle.each(function (index){
if (circleindex == index)
{
console.log($(this));
}
});
linkmoddet.each(function (index){
if ($(this).hasClass('moddetcenter'))
{
centerindex = $(this).index();
console.log("the center is index #"+centerindex);
}
var rotation = centerindex - circleindex;
//This is where I start having issues.
var i = $(this).index() + rotation;
var j;
if (i <= -1)
{
j = i + moddetids.length-1;
$(this).switchClass(classes[i+$(this).index()],classes[j]);
}
if (i >= moddetids.length)
{
j = i - moddetids.length;
$(this).switchClass(classes[i-$(this).index()],classes[j]);
}
else
{
if (rotation < 0)
{
j = i-1;
}
else
{
j = i+1;
}
$(this).switchClass(classes[i], classes[j]);
}
});
});
Does anyone have an idea on how to achieve the desired results, possibly in a simpler manner than described above?

Alright, it turns out that I figured it out by doing the following:
linkmoddet.each(function (index){
var classnum;
var newrot;
if ($(this).hasClass('moddetcenter'))
{
classnum = 2;
if (rotation < 0)
{
rotation += classes.length;
}
if (classnum + rotation >= classes.length)
{
newrot = classnum + rotation - classes.length;
$(this).switchClass(classes[classnum],classes[newrot]);
}
else if (rotation != 0)
{
$(this).switchClass(classes[classnum],classes[classnum+rotation]);
}
}
/* This is repeated for all the classes available in the classes array.
* ie: 0 being the first class, 1 being the second, etc. It's not an
* elegant solution, but it works for my current needs at the moment
* while I put it in a function in the future. */
Thanks!

Animate ui ul to left and right - not circular

Want to display 3 items from ul at a time. And when user clicks to the next arrow each element is traversed and when control reaches to last item i.e 3rd item , next three items should be shown in place of first three items.
The list should not be circular, means after last item in the list there must not be first item.
Have created fiddle but it traversing in circular fashion.
I am traversing list using this,
$("#rightArrow").click(function (e) {
var curr = $("#itemsListBox ul li:last");
curr.parent().prepend(curr);
});
$("#leftArrow").click(function (e) {
var curr = $("#itemsListBox ul li:first");
curr.parent().append(curr);
});
http://jsfiddle.net/N6XrL/

You could simply hide and show the appropriate element instead of appending/prepending:
http://jsfiddle.net/N6XrL/2/
var $elements = $("#itemsListBox ul li");
var count = $elements.length;
var showNum = 3;
var counter = 0;
$("#rightArrow").click(function (e) {
if (counter + showNum < count) {
counter++;
}
display();
});
$("#leftArrow").click(function (e) {
if (counter > 0) {
counter--;
}
display();
});
function display() {
$elements.hide();
$elements.slice(counter, counter + showNum).show();
}
display();

You should keep track of you current picture. like in following code.
var items_count = $("#itemsListBox ul li").length, current_item_counter=0;
$("#rightArrow").click(function(e) {
if(current_item_counter<items_count)
{
var curr = $("#itemsListBox ul li:last");
curr.parent().prepend(curr);
current_item_counter++;
}
});
$("#leftArrow").click(function(e) {
if(current_item_counter> 0)
{
var curr = $("#itemsListBox ul li:first");
curr.parent().append(curr);
current_item_counter--;
}
});
here is jsFiddle.

dcdrilldown with breadcrumb not having correct height size

I am using dcdrilldown with the version posted by #Tay on this topic. It works fine when I use linkType:'link' but if I change it to linkType:'breadcrumb' it just does not size the height correctly and only show one "item".
Please check this jsfiddle to see that with breadcrumb it does not show "Cat 2" while with link it works perfectly. I'd very much like to use breadcrumb but I can't find out where the bug lie.
Any help would be really appreciated.

Your script isn't setting the height properly on the ul#drilldown-2 menu container. The menu choices are there, but the fixed height on the container is too small for them to show. The version you are using assumes that your top level menu only has one entry.
http://jsfiddle.net/TLuBN/8/
find this function:
function findMaxHeight(element) {
var maxIndex = undefined;
$(element).each(function () {
var val = parseInt($('> li', this).length);
$(this).attr('rel', val);
if (maxIndex === undefined || maxIndex < val) {
maxIndex = val;
}
});
if ($(element).find('li').length > maxIndex) {
//the longest 'submenu' could be the root menu
return 1;
} else {
return maxIndex;
}
}
and change the line that says return 1; to return $(element).closest('.dd-menu').find('> li').length; so it reads
function findMaxHeight(element) {
var maxIndex = undefined;
$(element).each(function () {
var val = parseInt($('> li', this).length);
$(this).attr('rel', val);
if (maxIndex === undefined || maxIndex < val) {
maxIndex = val;
}
});
if ($(element).find('li').length > maxIndex) {
//the longest 'submenu' could be the root menu
return $(element).closest('.dd-menu').find('> li').length;
} else {
return maxIndex;
}
}
and see if that's the desired behavior.

jQuery add row number as class on the divs on current row

I need to make jquery fill all the rows in a layout as the first row in the fiddle
not sure if I explained well enough but the fiddle should clear out what I want.
first five divs have width changed a bit to make sure the row is filled, but I can't make the rest of rows fill the container
basically I want to justify all the divs by increasing their widths
http://jsfiddle.net/SG9Vx/
so far I have this function, modified from here: jQuery Find number of items per row in floated li's:
var lisInRow = 0;
$('#posts div').each(function() {
if($(this).prev().length > 0) {
if($(this).position().top != $(this).prev().position().top) return false;
lisInRow++;
$(this).addClass("row1");
}
else {
lisInRow++;
$(this).addClass("row1");
}
});
var itemNumber = $(".row1").length
var widthRow = 0;
$('.row1').each(function() {
widthRow += $(this).outerWidth( true );
});
var widthContainer = $("#posts").width();
var remaining = widthContainer - widthRow;
leftMargin = Math.floor(remaining / itemNumber);
$(".row1").each(function(){
var addedwidth = $(this).width() + leftMargin;
$(this).width(addedwidth);
});
What I do for the first row is calculate what's left of the container, divide it by number of items on the row, and add the result to the width of each item on the row.

If I understood what you're trying to do, I made some small changes to the code
var lisInRow = 0;
var lisInRow2 = 0;
var row = 0;
$('div div').each(function() {
if($(this).prev().length > 0) {
if($(this).position().top != $(this).prev().position().top) row++;
lisInRow++;
$(this).addClass("row"+row);
//console.log($(this).prev().length)
}
else {
lisInRow++;
$(this).addClass("row0");
}
});
for(var i=0;i<=row;i++){
var itemNumber = $(".row"+i).length
console.log(row);
var widthRow = 0;
$(".row"+i).each(function() {
widthRow += $(this).outerWidth( true );
});
var widthContainer = $("#posts").width();
var remaining = widthContainer - widthRow;
leftMargin = Math.floor(remaining / itemNumber);
$(".row"+i).each(function(){
var addedwidth = $(this).width() + leftMargin;
$(this).width(addedwidth);
$(this).find("img").width(addedwidth);
});
}
Here you have it:
http://jsfiddle.net/SG9Vx/3/

Here's a simplified version of what I think you're trying to achieve:
var lisInRow = 0;
$('div div').each(function() {
if($(this).prev().length > 0) {
if($(this).position().top != $(this).prev().position().top){
lisInRow++;
}
$(this).addClass("row" + lisInRow);
}
});
Fiddle: http://jsfiddle.net/568mP/

Can i create a javascript carousel which contains a flash file as well as static images?

I was wondering if it's possible to include an swf within a javascript carousel that currently just contains stagic images. What I'm looking to do is include a flash animation within the carousel.
I guess I've got two main questions:
Is it possible to cycle through flash files in the same way as an image?
How would I get the javascript and flash to interact so the flash file would know when it had been selected?
If it helps, here's the js we're using:
$(document).ready(function(){
var $looper = true;
var timer;
var currentSlide = 0;
var cell = 0;
var row = 1;
var hCycles = 0;
var aCycles = 0;
//no. of full cycles
var homecycles = 2;
var aboutcycles = 2;
//aboutSlide speed
var fast = 1200;
var slow = 4000;
//hide homepage slides
$('#slide2').fadeOut(0);
$('#slide3').fadeOut(0);
$('#slide4').fadeOut(0);
$('#slide5').fadeOut(0);
$('#slide6').fadeOut(0);
//hide about slides
$('.a-slide1').fadeOut(0);
$('.a-slide2').fadeOut(0);
$('.a-slide3').fadeOut(0);
$('.a-slide4').fadeOut(0);
$('#slide-c1 .a-slide1').fadeIn(1200);
runSlide(fast);
function runSlide(x) {
if ($('body').is('.about')) {
setTimeout(function() {
aboutSlides();
}, x);
} else {
if ($looper) {
setTimeout(function() {
slideShow();
}, 4000);
}
}
}
function slideShow() {
if ($looper) {
if (currentSlide++ < 6 && hCycles < homecycles) {
$('#slide'+ currentSlide).fadeOut(1200);
if (currentSlide == 6) {
$('#slide1').fadeIn(1200);
$('#slide-wrapper li').removeClass('active');
$('#btn1').addClass('active');
currentSlide = 0;
hCycles = hCycles+1;
} else {
$('#slide'+ (currentSlide+1)).fadeIn(1200);
$('#slide-wrapper li').removeClass('active');
$('#btn'+ (currentSlide+1)).addClass('active');
}
runSlide();
} else {
$looper = false;
}
}
};
$('#slide-wrapper li').each(function(index) {
$('#btn'+(index+1)).click(function(){
$looper = false;
$('.slide').fadeOut(1200);
$('#slide'+ (index+1)).fadeIn(1200);
$('#slide-wrapper li').removeClass('active');
$(this).addClass('active');
});
});
function aboutSlides() {
if (cell++ < 3 && aCycles < aboutcycles) {
if (cell == 3) {
if (row < 3) {
row = row+1;
} else {
row = 1;
aCycles = aCycles+1;
}
var hide = (row-1);
if ((row-1) == 0) {hide = 3}
$('#slide-c1 .a-slide'+ hide).fadeOut(1200);
$('#slide-c1 .a-slide'+row).fadeIn(1200);
cell = 0;
runSlide(fast);
} else {
$('#slide-c'+(cell+1)+' .a-slide'+ (row-1)).fadeOut(1200);
$('#slide-c'+(cell+1)+' .a-slide'+(row)).fadeIn(1200);
if (cell == 2) {
runSlide(slow);
} else {
runSlide(fast);
}
}
} else {
// create the final strip
$('#slide-c3 .a-slide3').fadeOut(1200);
$('#slide-c3 .a-slide4').fadeIn(1200);
}
}
});
Thanks!

There isn't any problem as to whatever content you want to put in your slides. As long as it is valid html, it's valid in a slide. Countless jquery/motools/etc plugins let you specify whatever you want for content.
flash is valid.
But you might want to revert to another revealing method. setting the opacity on a swf from javascript is complex and yields to different results, according to browser and flash version. If your flash file is custom made, then you can create a function that fades it to white for example, and call it from javascript. But from experience, changing the opacity of a swf is calling for trouble.
I don't know if this is relevant enough to be an answer, I wanted to post it as a comment, but there isn't any comment button. Oh well.