Geek Answers Handbook

Floating toolbar in jQuery

I am trying to create a floating menu, such as the Aloha editor, but it does not work properly. Anyone can help me with a basic example for a floating menu in jquery.

I'm not looking for a floating menu I need a similar toolbar floating in the Aloha editor

$(document).ready(function() {
            var fBox = $('#box');
              fBox.draggable();
              $(".columns").click(function(e){
                var mouseXPos = e.pageX;
                var mouseYPos = e.pageY;
                console.log("mouseXPos:"  + mouseXPos + "cleft:" +mouseYPos);
              fBox.animate({top:mouseYPos},1000);
              fBox.animate({left:mouseXPos},1000);
              });
            });

CSS

<style>
        #page{width:600px;margin:0 auto;}
        #page .columns{float:left;width:250px;}
        #box{   background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    left: 749px;
    opacity: 0.9;
    padding: 0 10px;
    position: absolute;
    top: 35px;
    width: 216px;}
        </style>

HTML

<div id="page">
            <div class="columns">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </div>
            <div class="columns">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </div>
            <div id="box">
                <h2>hello world</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
            </div>
        </div>

floating panel example http://elankeeran.com/manish/prototype/alohaEditor/

+5
source share
4 answers

I wanted to do the same, and I found a great tutorial here !

+1

CSS : fixed

, Internet Explorer 6. Internet explorer jQuery . , , : , - , div, :

$(window).scroll(function() {
   $('#myElement').css('top', $(this).scrollTop() + "px");
});

, , , . . John Resigs .

0

You might want to see Toolbar.js. It creates a tooltip, such as a toolbar, into which you can add various controls. It is really nice and very customizable.

Toolbar.js - jQuery plugin for creating responsive toolbar style toolbars

0
source

More articles:


All Articles