jQuery: Dragable html-element with position:fixed
Here I'll talk about how to make dragable html-element with fixed style-position.
I'll use jQuery library.
I'll show how to make it work fine in MicroSoft Internet Explorer too.
Working example is here: dragablefixed.html
It's my first time of using jQuery javascript library. Now I love it :). There are also a lot of plugins for jQuery. One of them is jquery.event.drag which implements drag event model. Here is an example of adding dragable feature to an element:
Now I want to show how to add such ability to
However you can notice that such DIV will blinks in MSIE during document scrolling. It can be realy annoing. In this case one more hack can helps. Just add fixed-background to the body styles:
Now lets adopt drag-script for such elements.
First do html work:
Second do script work:
Thanks jQuery for so short code!
Full code is in dragablefixed.html. Use "view source" to research.
It's my first time of using jQuery javascript library. Now I love it :). There are also a lot of plugins for jQuery. One of them is jquery.event.drag which implements drag event model. Here is an example of adding dragable feature to an element:
$( elems ).bind( 'drag', function( event ){
$( this ).css({ top:event.offsetY, left:event.offsetX });
});
It's realy the simplest way. I did it with pure javascript. And it takes ~25 line of code.
Now I want to show how to add such ability to
position:fixed element.
What is that? It's like position:absolute but position is related not to document.body.
Position is related to the viewport.
Such element will be allways visible, ever if you will scroll the document.
<div style='position:fixed'>This text has fixed position</div>All would be good. But MSIE doesn't support this style. Example above will not work in IE. I found one solution for emulation:
<div style=' position:fixed; //position: absolute; top:expression(eval(document.body.scrollTop) + "px"); left:expression(eval(document.body.scrollLeft) + "px");" '>This text has fixed position</div>This example should work everywhere. It looks like hack. MSIE ignores remarks:"//". And others ignores "expression" in styles.
However you can notice that such DIV will blinks in MSIE during document scrolling. It can be realy annoing. In this case one more hack can helps. Just add fixed-background to the body styles:
<body style="background: url('/any.gif') no-repeat;background-attachment: fixed;">
"/any.gif" can be ever unexisten. After that all will be fine in IE, no any blinks.
Now lets adopt drag-script for such elements.
First do html work:
<script src="jquery-1.2.6.min.js"></script>
<script src="jquery.event.drag-1.0.js"></script>
<body style="background: url('/any.gif') no-repeat;background-attachment: fixed;">
<div style='
position:fixed;
top:0px;
left:0px;
//position: absolute;
top:expression(eval(document.body.scrollTop) + "px");
left:expression(eval(document.body.scrollLeft) + "px");
'>
<div class="fixedDragableDiv"
style='position:absolute;background:#fff;width:200px;border:1px solid gray'>
<div class="fixedDragableDivBar" style='background:#acf;height:24px;'></div>
<div style='height:100px;background:#eee'>Drag this box with blue bar.
Scroll window to be sure that position is fixed.</div>
</div>
<div class="fixedDragableDiv"
style='position:absolute;background:#fff;width:200px;border:1px solid gray;left:250px;'>
<div class="fixedDragableDivBar" style='background:#acf;height:24px;'></div>
<div style='height:100px;background:#fff'>Drag this box with blue bar.
Scroll window to be sure that position is fixed.</div>
</div>
</div> <!-- FIXED DIV -->
To avoid the problem of setting fixed position in different browsers I created only one div with fixed position
and then put two divs with position absolute inside.
Second do script work:
$(document).ready(function(){
$(".fixedDragableDiv .fixedDragableDivBar").bind( 'drag', function( event ){
$( this ).parent().css({
top:(event.offsetY-document.body.scrollTop),
left:(event.offsetX-document.body.scrollLeft)
});
});
});
I tested it in Opera, Firefox, IE7.0. All work.
Thanks jQuery for so short code!
Full code is in dragablefixed.html. Use "view source" to research.
|
Category: JavaScript |
|
you kinda genius!
Posted by tbela on October 08, 2008 at 08:32 PM GMT+03:00 #
haha!
two thumbs up.
Posted by ratu mulya on October 20, 2008 at 09:21 AM GMT+03:00 #
wow.. thats great..
Posted by bintang on December 22, 2008 at 08:49 PM GMT+03:00 #
you genius, two thumbs up!
Posted by marko on January 12, 2009 at 10:44 PM GMT+03:00 #
Wow !!! Absolute genius :))) Thanks a lot !!
Also I really like your style of captcha down there :)) Much better than pics and also efficient to block bots !
Posted by Simon on January 16, 2009 at 04:50 PM GMT+03:00 #
This is just a beginning. You may get more than that...
Posted by Prashant Sharma on January 20, 2009 at 12:22 PM GMT+03:00 #
Good translate from http://www.artlebedev.ru/tools/technogrette/html/fixed_in_msie/
Posted by Dima on February 09, 2009 at 07:05 PM GMT+03:00 #
Yea, I used ideas from that site.
But it's only the part of solution :)
Posted by Ahot on February 25, 2009 at 02:45 PM GMT+03:00 #
Hi there. It's most popular page on my blog.
I'm very sorry. But I am not working in Sun Microsystems (or have I told "Oracle"? :)) now. So I can't write new entries there.
Only comments can be written.
I'd like to announce new iPhone game there: Hedgehogs. It was done by me and my friend-designer recently.
You can find some video of gameplay on my blog: http://devirtu.com/2009/04/16/hedgehogs-iphone-logic-game/.
The Hedgehogs iPhone game is on the fourth place in top paid apps in Russian App Store today. It can mean that people love Hedgehogs :).
Official game-website: http://hedgehogs.anvi-soft.com
ITunes link: http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=311031598&mt=8
Hope you enjoy playing.
Thanks.
Posted by Ahot on April 24, 2009 at 12:36 PM GMT+03:00 #
test
Posted by 203.187.233.94 on May 07, 2009 at 01:19 PM GMT+03:00 #
passed
Posted by Ahot on May 07, 2009 at 07:49 PM GMT+03:00 #