javascript - Getting an element to follow another element - Stack Overflow

admin管理员组

文章数量:1384426

Not sure what to call this so that will do, right what I would like to do is find a way to get a div to follow another div.

I am using this jquery slider, using this I want to connect a div (just a box) to the knob of the slider so it follows above with the current value for the slider.

I would give an example of this but the site I have linked has it all there and my code is elsewhere currently.

Now im not sure if there is anything like follow() in jquery where you can just point a element to what you want it to follow and set the distance (I have looked for something like this) so these are the ideas (that I tried and failed) I came up with to try and solve this.

• Find the slider knob's CSS live on the page and set it to the div (following div) so I would grab left: 0; from the slider knob and put this on following div. - Not sure if this is possible I had ago but couldn't find a way to do this.

• Change the image for the slider knob to include a box above. But I don't think I would be able to put the value onto this.

Again with all things I get stuck with, am I over thinking this? Is there an easier way to do this.

Any help with this would be great, even just pointing me in the right direction would be helpful as I have just hit a brick wall on this one.

I just set-up the basic version of it here if you want to have ago at it.

BASIC VERSION

In short: How can I get a div to sit ontop (just above) and follow of the slider knob?

div would look something like:

div {
    width: 200px;
    height: 100px;
    border: 1px solid;
}

Image: This is what I want it to look like, and the div will follow the knob.

Not sure what to call this so that will do, right what I would like to do is find a way to get a div to follow another div.

I am using this jquery slider, using this I want to connect a div (just a box) to the knob of the slider so it follows above with the current value for the slider.

I would give an example of this but the site I have linked has it all there and my code is elsewhere currently.

Now im not sure if there is anything like follow() in jquery where you can just point a element to what you want it to follow and set the distance (I have looked for something like this) so these are the ideas (that I tried and failed) I came up with to try and solve this.

• Find the slider knob's CSS live on the page and set it to the div (following div) so I would grab left: 0; from the slider knob and put this on following div. - Not sure if this is possible I had ago but couldn't find a way to do this.

• Change the image for the slider knob to include a box above. But I don't think I would be able to put the value onto this.

Again with all things I get stuck with, am I over thinking this? Is there an easier way to do this.

Any help with this would be great, even just pointing me in the right direction would be helpful as I have just hit a brick wall on this one.

I just set-up the basic version of it here if you want to have ago at it.

BASIC VERSION

In short: How can I get a div to sit ontop (just above) and follow of the slider knob?

div would look something like:

div {
    width: 200px;
    height: 100px;
    border: 1px solid;
}

Image: This is what I want it to look like, and the div will follow the knob.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 10, 2014 at 11:57 Ruddy asked Jan 10, 2014 at 11:43 RuddyRuddy 9,91355 gold badges4949 silver badges6868 bronze badges 3

• 2 what is the question mate???either put question on top or bottom..helps in understanding!!! :) – NoobEditor Commented Jan 10, 2014 at 11:46
• Added a short question at the end. – Ruddy Commented Jan 10, 2014 at 11:49
• @NoobEditor Take a look at the question, I added an image to make it clear what I'm saying. I'm counting on you to help me with this. I doubt anyone else can be asked to put effort in for this. :P – Ruddy Commented Jan 10, 2014 at 12:00

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Check this one out - Updated so the follow div does not extend outside the parent's width.

http://jsfiddle/8d9ek/8/

Basic idea is...

1. Create a div to contain your "following" markup, positioned relative.

2. inside that are 2 positioned absolute elements. (1 for content and 1 for the little arrow below that)

3. The drag callback updates the "left" property of the two following elements to reflect the percentage selected with the slider.
4. those following elements have nagative margin left of half their width to keep them centered on the chosen point.

HTML:

<div id="follow-container">
    <div id="follow">I am following the knob below me</div>
    <div id="follow-container-inner">
        <div id="follow-arrow"></div>
    </div>
</div>
<div id="testslider"></div>
<div id="percentage"></div>

CSS:

#follow-container {
    padding: 0px 5px;
    overflow: hidden;
    position: relative;
}
#follow-container-inner {
    height: 55px;
    position: relative;
}

#follow {
    position: absolute;
    border: solid 1px #000;
    bottom: 10px;
    width: 150px;
    margin-left: -77px; /* half width */
    text-align: center;
}

#follow-arrow {
    display: inline-block;
    border: solid 10px transparent;
    border-top-color: #000;
    bottom: 0px;
    border-bottom-width: 0px;
    position: absolute;
    left: 50%;
    margin-left: -10px;
}

And JS:

$('#testslider').sGlide({
    height: 10,
    image: 'knob.png',
    startAt: 70,
    colorStart: '#3a4d31',
    colorEnd: '#7bb560',
    buttons: true,
    drag: function(o){
        var pct = Math.round(o.value)+'%';
        $('#percentage').html(pct);

        // Position the follow div and arrow
        $('#follow, #follow-arrow').css('left', o.value+'%');

        // a little offsetting required to stop the elements going outside 100% width of the container
        var $follow = $('#follow');
        $follow.css('margin-left', -(Math.round(o.value)/100*$follow.outerWidth()));
    },
    onButton: function(o){
        var pct = Math.round(o.value)+'%';
        $('#percentage').html(pct);
    }
});

The library you're using has a drag callback you can pass a function to that will be called whenever the slider moves.

function callback(o) {
    var pos = o.el.find('.slider_knob').offset() // Grab the knob's page location
    $('#div').css({'left': pos.left, 'top': pos.top + 10}) // Shove the div right under it
}
$('#slider').sGlide({
    // Stuff
    drag: callback
});

Demo

There isn't a regular callback for element movement, however you can tie in a check at an interval using setInterval(function, time) that checks the offset().left or offset().top of the slider, then copies the value to the Div CSS.

Will edit with example when I'm not on mobile.

check this

http://jsfiddle/8d9ek/1/

<div  style="text-align:center">
 <div id="test" style="display:inline-block; width:70%; vertical-align:middle;">
   <div id="testslider" class="slider_bar">
    </div>
   </div>
  <div class="pct"></div>

New Demo here http://jsfiddle/8d9ek/2/

Redited with tooltip

http://jsfiddle/8d9ek/3

jsfiddle/8d9ek/5

本文标签： javascriptGetting an element to follow another elementStack Overflow