13

This is a bit difficult to explain but I'll give it a shot. I'm using this slider tutorial(http://css-tricks.com/slider-with-sliding-backgrounds/) to create a step form.

It's working perfectly well and all but I have a tiny problem, I have a section for uploading pictures(large background pictures) and I'm not resizing the height.

Since this upload section sits on top of the first slide, when I upload an image it pushes the second and third slide down. Is there way to make the other slides(2 & 3) stay at the top regardless of what's done to the first slide?

A quick diagram to help further explain what I'm on about.

Ps: I follow the same semantics as they used in the tutorial. e.g.. id's, classes etc.

Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
Skyalchemist
  • 461
  • 1
  • 7
  • 18
  • Are you adding the picture above the slide picture? Because i got [this](http://jsfiddle.net/G9uMQ/) by replacing it. Feel free to edit the fiddle to better describe your issue, please. – UIlrvnd Aug 10 '13 at 16:22
  • Thanks for your comment, i'm using it as a form wizard so the background image isn't there it was replaced with a form(text fields etc) and in that form i have an ajax file uploader that displays the picture you've uploaded(Which is what causes the problem). And yes the uploaded picture is above the first slide :) – Skyalchemist Aug 10 '13 at 16:28
  • Hmm, i've tried several variations and in none of them does it push the images down... Could you please provide an example in jsfiddle or whatever you like. – UIlrvnd Aug 10 '13 at 17:10
  • I've updated it(http://jsfiddle.net/G9uMQ/3/) but this is just an example, slide-0, slide-1 and slide-2 contain form elements(text boxes, text areas etc) so it doesn't have a bg image. – Skyalchemist Aug 10 '13 at 17:37
  • Perhaps i'm missing something... Why not just put the image into the slide? – UIlrvnd Aug 10 '13 at 20:46
  • Basically the slides have float:left, that's why they'r lining up side by side instead of vertically. In order to do what you want, you'd have to manipulate the other 2 slides (e.g. set their top values to - image.height)... – UIlrvnd Aug 10 '13 at 20:53
  • Yh i wish i could do that too but it's in ruby and the file upload is done by a separate class so it has it's own partial. To put the rendered partial from the file upload class into the slide would mean putting a form in another form. – Skyalchemist Aug 10 '13 at 20:59
  • Yh that's the hack i'm using right now but as i'm sure you know, these hacks don't play nice equally in some browsers. – Skyalchemist Aug 10 '13 at 21:02
  • Idk, pretty tired right now, try the plugin from [this question](http://stackoverflow.com/questions/172821/detecting-when-a-divs-height-changes-using-jquery) (answer by JLarky), should let you detect the holding div's resize event - then just get the new height and readjust the other 2 slides. Perhaps you should put a bounty up if you don't get much attention (assuming it's urgent). – UIlrvnd Aug 10 '13 at 21:13
  • Thanks a lot for your help so far bro, i really appreciate. I'll check that out and see, i'll try putting a bounty as well if i can :) – Skyalchemist Aug 10 '13 at 21:25
  • It would be nice to have a fiddle that is right. how is that fiddle anything like the picture? – iConnor Aug 18 '13 at 09:25
  • 2
    is this **not** what you wan't? http://jsfiddle.net/G9uMQ/7 – iConnor Aug 18 '13 at 09:27
  • Please add your code and attempted solutions to the question. – apaul Aug 19 '13 at 14:43
  • @Pinocchio: the fiddle shows what happens after the image has been uploaded. – Skyalchemist Aug 22 '13 at 11:21
  • @apaul34208: current soln, getting the height of the image and manually giving the other slides a margin-top: -height of image + padding and margin of image div. Like i said previously it doesn't play well with all the browsers. – Skyalchemist Aug 22 '13 at 11:25

4 Answers4

4

You could do it by storing the original .offset() using .data() like so:

Working Example 

$('#slide-1').data('offset-top', $('#slide-1').offset().top); //store the initial offset top 

$('#add').click(function () { // click the button to add an image
    $('div.image-holder').html('<img src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /> '); 

    $('#slide-1, #slide-2').offset({ // keep slides 1 and 2 in their original positions
        top: $('#slide-1').data('offset-top')
    });
});
apaul
  • 16,092
  • 8
  • 47
  • 82
2

Made the following change to your html which made it work DEMO

  <nav class="slider-nav">
    <a href="#slide-0" class="active">Slide 0</a> 
    <a href="#slide-1">Slide 1</a> 
    <a href="#slide-2">Slide 2</a> 
  </nav>

<div class="slider-wrap">
  <div class="image-holder">
     <img src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg"/> 
  </div>
  <div class="slider" id="slider">
    <div class="holder">
      <div class="slide" id="slide-0">

      </div>
      <div class="slide" id="slide-1"> 
       </div>
        <div class="slide" id="slide-2">

        </div>
    </div>
  </div>

</div>
AdityaSaxena
  • 2,147
  • 11
  • 16
0

You should use the <div class="slide" /> as a wrapper around everything that you want in the first slide. That way, the file uploader in the first slide won't affect the other two.

Here's a fixed JSFiddle!

tangphillip
  • 47
  • 4
0

The problem is that divs automatically take up the full width of their container, and they're block-level elements, so they stack.

To make this work, you'd need to wrap the uploader and the first slide in their own, separate div so that the width is constrained and they don't affect the other slides.

<div class="holder">
    <div class="first-slide-wrap">
        <div class="image-holder"></div>
        <div id="#slide-0"></div>
    </div>
    <div id="#slide-1"></div>
    <div id="#slide-2"></div>
</div>

CSS would be modified to look like this:

.first-slide-wrap {
    float:left;
    width:300px;
}
.first-slide-wrap .slide {float:none;}

The fiddle: http://jsfiddle.net/PjxzH/

Steve Ray
  • 158
  • 8