css-tricks / movingboxes Goto Github PK

Is there a bug in the code that displays incorrectly in IE7? It looks like the javascript code isn't loading correctly on that browser
www.lowcostwebdesignfirm.com

Thanks,
Hiren

You're going to like this one. It's important for sliders to allow users to link to a specific panel. Here's some not-fully-tested code for doing this with Moving Boxes:

function updateHash(a,n){
var s = a + "=" + n;
var href = window.location.href;
var url = href.substr(0,href.indexOf("#"));
var h = window.location.hash.substr(1);
var re = new RegExp(a+"=\d+");
if(h.match(re)!=null){
var n = h.replace(re, s);
window.location.replace(url+"#"+n);
}
else{
n = window.location.replace(url + "#" + h + "&" + s);
}
}
function getPanelNumFromHash(a){
var h = window.location.hash.substr(1);
var re = new RegExp(a+"=(\d+)");
var m = h.match(re);
if(m) return m[1];
else return null;
}

You might want to integrate these functions into MovingBoxes directly.

then add this to the top of base.growBigger function:
updateHash(base.el.id, num);

and then where you initialize the slider, do something like this:

$(function(){
myStartPanel = getPanelNumFromHash("featuresCore") || 2;
$('#slider1').movingBoxes({
startPanel : myStartPanel, // start with this panel
...

If you integrate the hash functions into movingboxes, you might simply want to make it so that any hash set will override the default value provided in the init.

This approach maintains the state of multiple movingboxes within the url hash (ie- you can have more than one slider on a page and it will track for all of them). The hash will look something like mypage.php#&slider1=3&slider2=5

Also, I used location.replace so that the browser history doesn't have entries for every change of the slider--just the most recent one... otherwise the user might have to click the back button an annoying number of times to get to whatever the previous page was. This way, too, I didn't have to write anything that monitors the hash for changes--it just checks the hash upon init.

I just notice this but maybe it’s my pc resolution settings. When navigating to each individual slide I notice that flickers when it moves across the screen.

Has anyone else experienced an issue where the right and left arrow buttons don't work? But you can still scroll through the photos by clicking directly on them? I would put in a link. But i want to ask first, The issue with putting a link in here is that the issue only happens intermittently. So I can't really troubleshoot like I normally would. So I'll just ask straight out, has anyone experienced this as well? I work for a media company and we're willing to provide compensation for someone who can help us troubleshoot this. I'm at my wit's end.

I came across a bug whereby the current slide does not keep the "current" class, and applied a fix to the code.

On line 203 you'll find this:

var panels = base.$panels.eq(num-1);

It should be changed to this:

var panels = base.$panels.eq(num-1).addClass(base.options.currentPanel);

I'm using movingboxes inside a tabbed page, where each tab is loaded by ajax (jquery tools tabs). The first time I go to the tab with the movingboxes, the height is often wrong (too narrow), cutting off the bottom of my text.

If I change tabs and go back, then the height is correct. I'm not a javascript guru so I can't explain it much better, other than to say it's not working right :)

You can see for youself at www.haast.ca and click Products | High Availability Asterisk and then click the screenshots tab.

Thanks!

IS this possible to Get the results (Pictures, other info) from Databases like Sql Server?
When I try to get data from Db it starts firing Exceptions because of Panels... Can anyone help me in this regards?

How can I remove the #&slider1=4 that gets attached to the URL when using the movingboxes?
It doesn't happen on the css tricks demo but with the downloaded files I get it.

http://css-tricks.com/examples/MovingBoxes/

thanks

I'm having an IE only issue since the update in version 1.7 (v.1.5 doesn't have this issue). I'm using the following settings... width to 960, panelWidth to 1, reducedSize to 1, and imageRatio to 1.

In IE 7 and 8 the animations are really slow, if they slide at all, although I find that they work fine if the link is double clicked instead of single clicked.

Is there an easy way to make the current panel align to the left of the wrapper instead of centering it?

I have a form on the page w/ movingBoxes, and if I hit the left/right arrow key while in a text box, the box rotates.

I'm using moving boxes as a dynamic selector. If I put a single item in it, the image is cut off. You can see this at:
http://apps.facebook.com/wishgenies-qa. You'll have to click:
"Break the Cycle"
Then choose 1 recipient, and save.
That will take you to the page w/ moving boxes.

thanks guys. Sorry to find several issues, but I'm loving this plugin. Very cool effect. Just what I needed.

I discovered that if you have smaller images and the imagesize of the smaller ones differs stronger from big ones you'll get problems with centering the images because there is a bug in calculating the center in the script. It calculates the center of the scroll and substracts the half of the small images instead of the big ones.

My fix looks like this:
Around line 105 it looks like this:
var leftValue = base.$el.find('.scroll').innerWidth() / 2 - panels.eq(curPanel-1).outerWidth() / 2;
you have to replace it with this:
var leftValue = base.$el.find('.scroll').innerWidth() / 2 - base.options.curImgWidth / 2;

At first image, when it is in center, last image should be displayed at left side & at last, the first should be displayed at right side.
Any Help?
Thanks.

Adding a request to make MovingBoxes fill 100% browser width. Or as cbarnes0981 stated, fill 100% of it's container.

Hi,

I am trying to implement Moving Boxes in a website. Everything works fine but I'd like to change the animation.

I was wondering if it's possible to make the panel zoom in keeping the edge. I mean, I'd like the picture to grow but to keep the same position. I've tried with CSS but it grows down and then goes up. It would be great if I can decide where is the final position of the picture.

I hope you will understand me, I know my English needs to improve.

Thank you all of you in advance.

I was wondering.... is it possible to hide the panel content (text) of a panel that is not the primary focus one? I want the primary focus panel to have the text display only. Does that make sense?

First, This issue can be reproduced in IE6 only. Please close this soon if you are NOT going to support IE6 officially.

Description: [left|right] arrow png images are not displayed in IE6
How reproducible: Always
How to reproduce: display index.html with IE6.
Expected result: [left|right]_arrow.png can be displayed.
Aucual result: They are not displayed, but we can click them and scroll images.

How to fix: This issus is caused by the following css in movingboxes.css, background transparent setting.

 /*** Left & Right Navigation Arrows ***/
 a.scrollButtons {
     display: block;
     width: 45px;
     height: 58px;
     background: transparent no-repeat top center; /*** this causes a probrem in IE6 */

We can fix this by patching IE6 specific css hacks. If you can accept, I'll send you a pull request.
Best Regards.

The original article writeup had this demo:
http://css-tricks.com/examples/MovingBoxes/

The demo includes a shadow on the left and right sides of the scrollContainer that look really slick. Is there any way to pull this off w/ the current plugin?

Thank you!

When wrap is set to true and the focus panel is in the "last" slide and I click forward the left panel image disappears and comes back again.

Same when the "first" panel is set and I click back arrow, the right panel image disappears and comes back again.

BTW.. thanks for fixing issue#44

With keyboard nagivation, scroll wheel navigation and mouse-click navigation, the additional buttons should not be mandatory. It would be nice if the script looked for a div of class mb-left/right and added an anchor to it, instead of forcing it in init(). That would be preferred to adding another config option.

all that I need to do its make links in the slides unclicable until the slide became selected
i try something like this

$("#slider li").not(".current").find("a").live("click",function(event){event.preventDefault();});

but this don't work

also i find out that when i clear cashe slider stops on first slide and buttons don't work, but when i click on left or right slide it sliding out as usual

I am unable to determine how to incurease the panel height. Any idea?

I know we can increase the size of the panel width by updating the panelWidth value in the demo.js file but I don't see the option for the height.

$('#slider-two').movingBoxes({
...
panelWidth: .8, // current panel width adjusted to 70% of overall width
...
});

Please advice...

thanks in advance

1. Setup an image carousel with one image in it.
2. Use any parameters to initialize the carousel
3. Notice that part of the image is hidden by the generated CSS

The problem is that the width of mb-scrollContainer is too small when there are few items. My short terms fix was to change lines 61-67 to this:

        // make scrollContainer wide enough to contain all the panels
        var width = (base.curWidth + 50) * base.totalPanels;
        width = Math.max(width,(base.curWidth + 50) * 3);
        base.$container.css({
            position : 'absolute',
            width    : width,
            height   : Math.max.apply( this, base.heights )
        });

I am trying to use sortify to sort the entries. After sorting I can call movingBoxes but when the yget sorted they retain the original css that was applied. IE: if element one becomes element 3, then what is now element 3 has padding on the left side.

I have also tried to reload the dataset via jquery .get(), but pleasing to share how to re-init the entire list after performing an action. I am not a jquery guru, but isnt movingBoxes set to initialize on docuemnt.ready? Is there a method I can use to re-init?

Love the plug!

cheers.bo

Hi,

This is really very nice jquery plugin. But I have one problem.

What I am doing is, I am previewing htmls in this scrollbar (instead of images). after previewing html,I want to change any of that html (change text of html or change image) which gets update in database and preview the updated html fetched from database on this scrollbar. I am updating these htmls using ajax.
Now when I am previewing updated html using ajax page is not reloading where as your jquery calls only when page loads. So I want to know how can i call this jquery on any event. like onclick or etc.

Hi, this is more of a question than an issue but wasn't sure where to put it.

Is it possible to have a fixed height for images (i wont be displaying any text so the box can be of a fixed height) and adjust the width accordingly rather than the other way round which is how the default system does it.

Just to explain what i'm trying to do i want to use this as a filmstrip across the page so i want all images to scale to 400px high for example with the width scaling to keep the correct aspect ratio for the original image. So some images might need to be 300px wide and others might need to be 900px wide maybe, both 400px high.

Hope that makes sense

Hi.

to call the incredible work of MovingBoxes I use:

var winwidth = $(window).width() - 160;
$('#webkat').movingBoxes({width:winwidth,panelWidth:0.6,reducedSize:0.2,wrap:false});

inside the &(document) ready function.

This works fine to get the size of the browsers window dynamically and fit the MovingBoxes into it.
I tried a long time to resize the width of the MovingBoxes dynamically with the jquery resize function if the browser window is resized after first loading. So far it is beyond my skills.

My question: is there a workaround to do this anywere. How could I get help for doing this?

Thanks.

If an item is clicked before the setTimeout on line #93 is triggered, the events never get bound.

A work around for me is to set the initial speed to 0 and and then change it back with slider.options.speed = 500 on a subsequent event.

First of all, I want to thank you for posting your code online. It’s been very useful for me my learning curve to understand Jquery.

What I am posting is not an issue but just wanted to see if this is doable.

According to your latest fix when the wrap option is set to true the scrolling image will rewind to the first image.

Question: Instead of a rewind look and feel, is it possible just to continue looping the image so it seems streamless?

Any thoughts?

The image in the center is not actually centered. Even if you look on the example the image on the right is cut off more than the image on the left. In my implementation, this anomaly is very obvious. Can someone suggest how to fix this? thanks.

If anyone knows how to make this jQuery plugin into a WordPress plugin, it would be greatly appreciated :)

I would attempt it (http://www.jdmweb.com/resources/jquery_to_wordpress_plugin), but I don't have any easy way to test my work.

I have panels that were different heights. To make the container hold the tallest panel without cropping (versus using the height of the first panel), I first adding a jQuery plugin (I'm no expert, so not sure if this is the best way to do it):

jQuery.fn.maxOuterHeight = function(){
var max = 0;
this.each(function() {
max = Math.max( max, $(this).outerHeight() );
});
return max;
};

then right after defining base.panels:

        base.tallest = base.panels.maxOuterHeight();

and then in setting scrollContainer:

        base.container = base.$el.find('.scrollContainer').css({
            position : 'relative',
            width    : (base.curWidth + 50) * base.totalPanels,
            height   : base.tallest
        });

This seems to work for me.

Is it possible to get access to the movingstatus from outside to check if the boxes already moving or completed from a other script?

Many requests to loop the slideshow instead of rewinding... I'll look into it when I get time.

Rather than having the images spaced apart, I'd like to have them overlapping, with the .current over laying its neighbours on either side. Giving the li a negative margin seems to work fine to make them overlap, but the "next"

I was just wondering if there is an easy way to put multiple instances of the Moving Boxes on a single page. I have tried renaming the file and the id's and it doesn't seem to work.
Thanks for your help

Thanks for making the Continues sliding work!

But I did quickly notice that when wrap is set to true, clicking the left panel to navigate back doesn't work. Only way to navigate back is to click the arrow?
Clicking the right panel to move forward does work....

Tested it out and noticed there is a sliding glitch when more than 11 panels are used with the following settings... width to 960, panelWidth to 1, reducedSize to 1, and imageRatio to 1.

The glitch is that instead of sliding to the next slide, it will loop through all the panels first before going to the next slide. The same is true for previous slides. Also, when the current state is the last slide and using the navigation to click on the first slide link... it will just pop to the first slide instantly, instead of sliding backwards.

Before this became a plugin, this: http://webdesignandsuch.com/set-the-jquery-moving-boxes-slider-to-autoplay/
worked well to have it autoplay. This: http://tc.eserver.org/js/slider.js
had enabled random startPane.
With the new design as a Plugin it's much better integrated in my page but I'm too noob to make those enhancements to the plugin.
Any help would be greatly appreciated!

If movingboxes is placed toward the bottom of a web page, when a user first opens the page the page is scrolled to the movingboxes div (similar to a hash link)|, even when hashTags is set to false.

As the title says, is there any way to make the actual first slide be selected first? currently when I load the page the slider always automatically slides to the middle.

If possible I like it to load the first slide and then stay and not move unless clicked.

Appreciate any help with this.

This was a very crude fix on my part, but I was experiencing flickering with youtube video I have embedded. I was able to solve the problem by suppressing the grow shrink functions. I still had the flickering issue. after some code tracing I discovered the when jQuery touched the DOM looking at the em height of the text, the youtube embed was reacting with a reload.

Could there be an option to have no resizing whatever, and just be a simple slider for an instance?

cheers!
bo huttinger

Sir,

How can i increase the width and add more then one moving box in it

Regards:
Sibtul Hasnain

CSS class names are too common. Add some prefix please.

It is grate slider.
I have already given opacity to right & left images but how can it be darken to a light black? so middle image looks brighter.
Any Help Please?
Thanks.

It's a little misleading if there are arrows on the first or last item. People click but there are no more to display anyway.
Any way to hide arrows if there are no more items to cycle?

my Issue is that in IE 8 the script on line 166
base.change( base.$el.find('.panel').index($(this).closest('.panel')) + 1, false );
IE 8 doesn't slide when i push the arrow. it gives me a script warning. In Firefox it's going but i gives me a warning in the firebug console. the warning is that the .closest() isn't a function. so i changed this to next. it's solved my problem. i use linux opensuse 11.3 64x version and win7 64x version as well. i got the newest jquery. to say is that i took the moving boxes into Drupal 6.x
any idea to solve them without changing closest to next?

I'd like to contribute an example of how I set the number of visible panels on each side to 1.6 given an image size of 640 and a variable screen resolution:

    gBigPanelMax = 640;
    //figure out how big to make the carousel
    var carWidth = screen.width * .9;
    var bigPanelWidth = gBigPanelMax / screen.width;
    var smallPanelNum = 1.6;
    var smallPanelWidth = 1 / (2 * smallPanelNum) * (1 / bigPanelWidth - 1);
    //create the moving boxes carousel
    $('#carousel').movingBoxes({
        startPanel: 0,
        width: carWidth,
        panelWidth: bigPanelWidth,
        reducedSize: smallPanelWidth,
        imageRatio: 4 / 3
    });

works in FF3.5, Chrome 9, IE8

I have the following...

$('#slider-two').movingBoxes({
startPanel : 1,
width : 500,
wrap : false,
panelWidth : .7,
buildNav : true,
navFormatter : function(index, panel){ return panel.find('h2 span').text(); }
});

When I click on the F5 button I don't see the scroll animation.
But when I change the wrap variable to "true" and I click F5, I see the scroll animation run. How do I turn off the default scroll animation when F5 or page is loaded? I like it when I don't see the animation run by default.

Please advice.

thanks!