I got this crazy idea trying to display a tree in a context menu. I did a google search and cudnt find anything related. Can this actually be achieved? I know I am not posting in any code, but wanted to get all your guidelines before I start with the coding part of it.
Regards,
Nikhil
Only one work around comes in my mind here. You should first of all disable the default conextmenu. And then you can show your absolutely positioned div which contains a treeview next to the cursor.
Related
JSBin here: http://jsbin.com/cusisidoja/1/edit?html,js,output
I'm trying to POC a context menu that will pop up given certain keywords are entered in a textarea element. The idea is to implement functionality similar to the way code completion drop-downs work in an IDE.
I realize the scope of this project so the details of the keywords and menu contents aren't important right now. What I'm trying to figure out is how to locate the caret position as the user is typing.
So stepping back and breaking the problem down into its most fundamental component:
How can I get the caret position of a textarea in terms of x,y coordinates that are meaningful to CSS styling?
I threw together a JSBin with (what I believe to be) a decent shell for watching/updating the scope of a div when text is changed in the textarea: http://jsbin.com/cusisidoja/1/edit?html,js,output
I know this is a far cry from what I'm trying to do, but it's as far as I can get given what I currently understand. I'm also open to the possibility that the only way to accomplish this would be either through external libraries or by use of jQuery, but I don't even know where to begin.
Simplest answer is using caret.js : http://ichord.github.io/Caret.js/
simple as :
$('#inputor').caret('position');
full documentation can be found on Github:
https://github.com/ichord/Caret.js
If I used:
parentNode.removeChild( divHere );
It does work and the scroll bar for the overflow updates accordingly. If I use JS to 'divHere.style.visibily = "hidden";' well that doesn't work anymore. What I've done pretty much is create 115 divs that are in a container div and the user can select filters to show only the images they want, all the divs have a background image and are essentially just an image with a name under it.
So I have 2 questions:
1) Is there a way to update the overflow and make it not take hidden elements into consideration?
2) If 1) isn't possible than when I use removeChild to remove a div from the container, it does indeed disappear but what exactly happens to it? Does it disappear off the page because it's not added to any element on the page? So it essentially works like it's hidden? I don't have to worry about people seeing the images in some completely weird spot in some lesser used browser?
and well 3) If you have a better method of doing this it would be greatly appreciated
Thanks in advance for any help
The removeChild() method removes a specified child node of the specified element and returns the removed node as a Node object, or null if the node does not exist.
That null means that the element is now removed from your mark-up.
You should use it to not let the browser take that into consideration, as the browser will not find that element in the mark-up.
You can do it in this way as well:
$(document).remove(object_to_remove);
FInd more about it: http://api.jquery.com/remove/
I believe I may have a response for the third part of your question. That large number of divs in your containing div and the usage of filtering make me think you might want to look into using the DataTables plugin for jQuery (http://www.datatables.net/). It has some very nice features for sorting/filtering/etc. a large number of data elements and supports a variety of data sources. There are also some plugins for the plugin if the basic functionality isn't enough for you.
There is a bit of a learning curve if you want to do more complex stuff with it, and it might be tricky to get used to if you haven't worked with jQuery much (though being someone who hasn't worked with jQuery all that much due to not doing much web development, I can say that I quite like using it whenever I get the chance, although that may just be due to me enjoying learning how to do new things in programming), but I feel that if you're willing to spend the time on it you will have something much more maintainable than what you currently have.
Good evening everyone! I am having a bit of a problem and need some advice or assistance. I designed a site in Photoshop, sliced it and exported it out as HTML/Images. I brought the HTML file into Dreamweaver, this is what I have and it is great.
View the slice here.
click here!
My problem is, I am trying to get some JavaScript/Jquery code inside those empty white boxes you see in the link above. click here! But when I try to put the images in my layout from the above link, my layout gets completely realigned and I cant seem to fix it and looks like this click here!
I give my sincere thanks to anyone who can offer any assistance or advice on this matter!
Well your first problem is outputting a sliced Photoshop file for web. It does it horribly and you should really just do it yourself.
Secondly, you need to make sure all your widths and heights are the same when putting in an image in that blank spot.
But really, you should just redo the code of it all.. using images for text is a no no. Your whole site could basically be done in HTML/CSS instead of with images.
I am looking for a straightforward jQuery tooltip script. I have been having troubles finding one that has a fixed position and doesn't move with the user's cursor. If anyone knows of one let me know :) Thanks!
I always use this one here:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
It has the option to both follow the cursor AND keep it's position, along with a few other helpful options. The css is also very minimal and therfore easy to change.
See there's this thing here called a search engine...
Okay, okay... I'll be more constructive...
My favorite is qTip 2. It does everything you want it to do. and you don't have to leave money on the table...
I use qTip2 from http://craigsworks.com/projects/qtip2.
By default, it does not move with the cursor. There are a bunch of options and some themes. The best part is that the developer answers all questions in his forum within a day or less.
Also here are some good ones meeting your requirement that it not follow the mouse cursor:
http://plugins.learningjquery.com/cluetip/
http://edgarverle.com/BetterTip/default.cfm
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://labs.dmlogica.com/dmltip/#more-53
http://www.ajaxdaddy.com/javascript-tooltip-jtip.html
http://plugins.jquery.com/project/bt
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/
http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/
http://code.drewwilson.com/entry/tiptip-jquery-plugin
http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using-css3-and-jquery/
http://gdakram.github.com/JQuery-Tooltip-Plugin/
As a side note, I'd stay away from the tool tip plugin that's part of jQuery Tools by Flowplayer. IMHO, jQ Tools is poorly implemented, out of date and not supported very well by the developer or his community.
100 various solutions on this page (however, some are not jQuery):
http://www.webdesignshock.com/showcase/best-tooltip-scripts-plugins/
The one I always use is: http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/
It's three short CSS lines to customize colors and easy to work with!
I have a requirement to have a universe type menu, where there is a main item in the center, and "X" amount of items around it. (ie: sun with planets).
I have searched high and low for an example, and all of the search results points to using css, but this requires manually figuring out the position of the items.
How can I create a menu like this where I can dynamically add items?
I am sure there is some jQuery / javascript example somewhere
Did you try searching for pie menus? There are a couple of jQuery Plugins:
jQuery - Pie Menu
jQuery Canvas Pie Menu
check out jQuery Radmenu - http://tikku.com/jquery-radmenu-plugin
I've just done a hell of lot of googling for you - but couldn't find anything either.
So, the answer must be - write it for yourself (see, that's fun!).
I found this great resource to help out. It's not JavaScript, but the code could easily be rewritten to help drawing the invisible circle needed to do the trick.
Some sin/cos stuff will probably also be needed - to determine where on the circle your menu points should be, dynamically. It's unfortunately not just as simple as saying 360/numberOfMenus ;-)
I hope this helps you out. Sometimes, the answer is that you have to do it yourself :D
I found this thread too late, because I also built one. You can find it here: http://www.pritaeas.net/public/jquery/hp/circulate/index.html
It is a jQuery plugin, very small, that positions li items in a circle.