I am create an web application in Google Web Toolkit.
I want to create a On-hover tool-tip on hyperlink. In this tool-tip i need to show the user image, username, her/his designation, and address of that user.
Problem :
My problem is to stay that tooltip when i move the cursor from hyperlink to tooltip just like G+ and facebook shows the user information when i move the cursor on any user name it show an toolitp and we can easily from the cursor from username hyperlink to tooltip.
Secondly, that tooltip position should be changed dynamically, similar to facebook like sometime that tooltip shows on upper side and sometimes it shows on downside of the username hyperlink.
NOTE : i can only use javascript and GWT. No jquery answer needed.
Use a PopupPanel widget. It has a useful method showRelativeTo(), which you can use to show this panel next to your Anchor widget.
You can add your own logic when this popup shows and hides.
Related
I want to show more information when a user hovers on a link like facebook shows the names and images of our friends who have liked a post when you hover over it. How can this be done? Can it be done using javascript?
Of course this can be done with JavaScript, there are several Plugins for those Tooltips:
http://calebjacob.com/tooltipster/
http://craigsworks.com/projects/qtip/docs/reference/
http://designshack.net/articles/javascript/25-useful-resources-for-creating-tooltips-with-javascript-or-css/
You can put whatever info you want in those Tooltips.
I've got certain regions of the page that, when clicked, will redirect the user to certain addresses. My problem is that when the user 'mouses over' these regions, they see a pointer, but have no idea where it links to. For my purposes it is important that the user knows where they are being linked to. I believe Google displays 'fake' links when you mouseover links.
How can I achieve this? Is it impossible without having actual <a> tags?
I'm currently using location.href="http://www.site.com" to redirect the user where "site" is stored in a javascript array and changes depending on the mouse position.
EDIT: The link should be displayed in the normal mouseover link area - in chrome this is the bottom left corner - just like when you mouseover an ordinary link and you see where the link leads to.
I don't believe this is possible without using <a> tags, the best you could hope for is to use the title attribute to show a tooltip.
e.g.
<div title='www.google.co.uk' style='cursor:pointer'>
This is my div!
</div>
Using anchor links (as Google does), you can do something like:
<a href="http://www.mwhahaha.com"
onmouseover="this.href='http://www.test.com';"
onmouseout="this.href='http://www.mwhahaha.com';"
onclick="this.href='http://www.mwhahaha.com';">Link</a>
This will show a link that looks like it's going to www.test.com, but clicking it actually goes to www.mwhahaha.com, although I'm not sure how legal/good practice this is (only tested this in Chrome)...
If I remember correctly, Google changes the href of the link to the real url during the mousedown event. Try pressing the mouse button while hovering over a link, but moving your mouse cursor off the link before releasing the button. When you hover over the link again, you should see a new URL.
I'm answering from my phone or else I'd check it myself. They may be doing it differently now.
I'm looking for a way to create CSS/Javascript based pop-up windows. I'm fetching information from my database depending on how many (example) cars there is. I want to be able to create an equal number of CSS/Javascript based pop-up windows to each car I have in the database to show more information about the car in the pop-up.
The trick is - of course - that I want the right information about a certain car to show up when you click on the related link.
How do I solve this?
If you only ever want a popup to be open for one car at any given time, you can have a single popup element that you show/hide and reposition when they click on a link, then load the content for the specific car using AJAX.
If you want them to be able to open popups for multiple cars at any given time, dynamically generate a new popup element when they click on a link, position it correctly and then load the content for the specific car using AJAX.
I'd suggest using a Javascript framework (such as jQuery) because it will make the process considerably easier. There are also a number of plugins that you could look into using that perform this functionality.
I have created a simple website, now when I dubble click on my text on the website I want to show a 'tinymce box' that's able to edit my current text. Is that possible and how can I do that with javascript/jquery?
Check out TinyMCE's own documentation page, which is full of resources.
For example if you want to show a TinyMCE on button click, you need something like this:
http://tinymce.moxiecode.com/tryit/load_on_demand.php
First you might want to turn you div or whatever into a textarea, and then call the appropriate TinyMCE method.
Sorry for the not too detailed answer, but the question was not too detailed either...
Another easier solution might be to use functionylity that is there already. Seems like you are looking for the code plugin. On Click a box opens and the user can edit the html source of the editor content.
One of the optional buttons has 'html' written on it and can be used to go into HTML editing mode. You can see it in this full featured example - 6 places left of the top-right corner. In order to enable it on your own website you will need to add "code" to the list of plugins and "code" to the list of buttons.
I am looking for something like like FCKEditor that allows users to follow links by left clicking them.
For example, the markdown editor in StackOverflow does not allow you to click the links you add as you are entering data into the editor. I would like to render a text area pre-populated with some links to lab results that the user can choose to review while making their comments.
both tinyMCE and fck editor will highlight the links with blue color and if you ctrl+click on them, will open in a new tab/window (depends of you browser configuration)
Most HTML richtext don't do anything to the link (with the exception that you can place the cursor in them with a single left click, in order to edit their text) that would prevent you from, for instance, right-clicking to open the link, copy it, or whatever your browser allows.
TinyMCE allows you to preview within the same page and then click on any links with the click of a button/icon. I'm thinking there must be a way of triggering this outside of the TinyMCE and possibly having it populate another field/area. (You probably could also grab the value of the textarea and put that somewhere else on the page.)
Not sure if this is what you are looking for.
Or you could try a preview mode, just like StackOverflow. See How can I enable live preview for FCKeditor in an ASP.Net site?