Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Height % minus px in dynamic border (w/demo) – anythingSlider

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #35099
    AngelLestat
    Participant

    I have this problem:

    http://www.artesano-naturista.com.ar/demo-page/
    (use arrow keys to see the animation in the border when anythingSlider change)

    I want to make this PNG background border who can change their size depending on anythingSlider child divs.
    The problem is that the heigth of lateral borders has to be 100% minus 52px (border up margin)

    I am learning javascript and jquery since 4 days ago to try to find a solution (i dint find a solution in the web)

    I am trying to change this with jquery after anythingSlider effect:
    $(‘#right-border,#left-border’).height($(‘.anythingSlider’).height()-51);

    But just work in the first div (no animation, no change)

    I tried to add this change to the anythingSlider script like this:

    // resize slider if content size varies
    if (!o.resizeContents) {
    // animating the wrapper resize before the window prevents flickering in Firefox
    d = base.getDim(page);

    //newcode
    bordeAltura = d[1] || base.height – 103;
    $(‘#left-border,#down-border’).animate(
    // prevent animating a dimension to zero
    { height: bordeAltura },
    { queue: false, duration: (time < 0 ? 0 : time), easing: o.easing }
    );
    //newcode

    base.$wrapper.filter(‘:not(:animated)’).animate(
    // prevent animating a dimension to zero
    { width: d[0] || base.width, height: d[1] || base.height },
    { queue: false, duration: (time < 0 ? 0 : time), easing: o.easing }
    );

    I dont know what i am doing… or in what part of the code i need to do this.

    I think the best solution it will be get an event that everytime that the heigth change trigger a heigth correction, using anythingSlider flags to know when the animation starts.

    #90468
    Mottie
    Member

    Hi AngelLestat!

    I ended up updating the AnythingSlider script to the latest version because I was getting an error from that older version. But I messed around and I got the following code to work… to keep the slider from collapsing, you’ll also need this css:

    #visor, #slideshow { width: 960px; height: 350px; }

    and this code

    var resizeSides = function(slider,target){
    console.debug([ slider.options.animationTime ]);
    borderAltura = target.height() - 63;
    $('#left,#right').animate(
    { height: borderAltura },
    { queue: false, duration: slider.options.animationTime, easing: slider.options.easing }
    );
    };

    $('#visor').anythingSlider({
    resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
    navigationSize : 3, // Set this to the maximum number of visible navigation tabs; false to disable
    navigationFormatter : function(index, panel){ // Format navigation labels with text
    return [index - 1];
    },
    onInitialized : function(e, slider) { resizeSides(slider, slider.$currentPage); },
    onSlideBegin : function(e, slider) { resizeSides(slider, slider.$targetPage); },
    onSlideComplete: function(slider) {
    // keep the current navigation tab in view
    slider.navWindow( slider.currentPage );
    },
    });

    If you have trouble getting it working, I can send you the test file I got working. :)

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.