CODEWITHSUNDEEP
javascriptjquery
pithhelmet
pithhelmet

Reputation: 2282

Javascript sliding a div left and right - but with a little 'ear'

I would like to be able to slide a div left and right... i have read the other posts and have it working using a button click.

BUT

I would like to have a little floating 'ear' (small rounded icon that acts like a button) that will stick to the upper right corner of the div. This 'ear' would act as the button for sliding left and right in the form.

My question is.... How do I make this little ear stick to the upper right corner of the div, but have it hang over and outside of the div.
Another way of saying it is, i would like to have a floating div that will stick to the upper right corner of a div, regardless of where the other div is located.

I was thinking of having another div that contained the graphic, and force the location of the 'ear' to be the upper right corner of the div that the 'ear' is supposed to attach to.

thank you

Upvotes: 0

Views: 135

Answers (2)

Halcyon
Halcyon

Reputation: 57729

I'm using an implementation like this:

<div class="tooltip">
    <div class="tooltip-inner">I'm a tooltip</div>
    <div class="tooltip-ear"></div>
   <!--tooltip-ear last so you can float it over tooltip-inner without z-index-->
</div>

Styling:

.tooltip { position: absolute; left: 0; top: 0; width: 200px; }
.tooltip-inner { padding-right: 10px; } /* make space for the ear */
.tooltip-ear { position: absolute; right: 0; top: 0; width: 10px; height: 10px; }

You can add a border to .tooltip-inner. and have a graphic that does the border for the ear. You can shift the ear over 1px to the left so it covers the .tooltip-inner border to make the border look fluent.

You can even go one step further and add .tooltip-orientation-top-left or .tooltip-orientation-bottom-right to change the position of the ear by just changing one class.

Your style will look like:

.tooltip.tooltip-orientation-top-left .tooltip-inner { padding-right: 10px; }
.tooltip.tooltip-orientation-top-right .tooltip-inner { padding-left: 10px; }
.tooltip.tooltip-orientation-top-left .tooltip-ear { position: absolute; right: 0; top: 0; width: 10px; height: 10px; }
.tooltip.tooltip-orientation-top-right .tooltip-ear { position: absolute; left: 0; bottom: 0; width: 10px; height: 10px; }

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Something like this might work:

#container {
    position:relative;
    overflow:visible;
}
#ear {
    position:absolute;
    left: 100%; /* hang over right edge */
    top: 0;
}

Assuming this HTML:

<div id="container">
    <div id="ear">Click me!</div>
    Look at me, I'm a moving box!
</div>

Upvotes: 2

Related Questions