ASP.NET: Help button - javascript

net APPLIATION dashboard, i need to provide help icon on the screen. For that i have few option as follows
I can use AJAX modal popup and register usercontrol having help content and show it on modal popup control on click of help button
I can use javascript buble tooltip for help on mouse over/enter of help icon.
Can you suggest me right approach

There is never a "right" or "wrong" approach, certainly not in a clear-cut fashion. What I personally would do is use jQuery to provide a client-side modal (or modeless) dialog and populate the dialog via AJAX. In this regard I could have a dynamic help page loading help from a database and I wouldn't have to reinvent the wheel on each page so to speak. jQuery.UI has a decent modal dialog that would work well in this situation so long as you coded up the rest to pull the content.

I would also go with a jQuery/JavaScript type popup, I think a correct approach might be to only load the content when its required, ie on icon rollover or on click to reduce overhead.

Related

How to create an alert dialog with "more" or "details" expendable section?

I am interested in displaying an alert to a user with OK button to close the alert, and a more/details button which upon clicking on it displays certain details (text, table, data, etc). Can it be done using PHP/HTML alone?
The situation you're describing is possible, but would not be the accepted or fastest way of doing it. Using PHP requires a trip back to the server which reloads the page - not something you want to be doing if you want easy usability.
The recommended solution is to use Javascript, or jQuery. I would recommend against using jQuery UI unless you're going to use more than one part of it - it's a great library but it has much more functionality than you need and unless you host the file yourself, the download you get from major CDNs is large and will take a while to load.
However, there is a solution I know of and have use called Alertify. It is a JS plugin that deals specifically with alert, confirm and prompt dialog boxes, and can be fully customised. Here's the site if you want to have a look: https://fabien-d.github.io/alertify.js/. It comes with demos and example code so you can adapt that to your purposes.

How to organize overlapping javascript onclick events in overlapping divs

Especially on smaller screens like iPad and iPhone it happens that a click on a element does not only trigger the "onclick function of the actual script but also the "onclick" function of the javascript of the underlaying div.
On my homepage http://www.somersetsights.co.za/en/index.html for example on a iPad a click on the like button activates the FB Like dialog and a click on the OK button of this Like dialog triggers the start of a movie from the slideshow function underneeth the Like dialog.
I tried to find a solution by googling this problem but struggled to find something. I am not a beginner but I am also not a experianced javascript programmer. Help would be very much appreciated.
Peter
Maybe that could help you : http://www.quirksmode.org/js/events_order.html
Tell us if you use jQuery or another JS library.

Create Zooming Box

I'm trying to create a website and I've been trying to create something which will open new content when clicked on, somewhat like Facebook has on the pictures: You click, Get a window with the picture and text area for commenting. I'm specifically trying to avoid popups because I don't find them very neat.
Does anybody know how i could create this/ have any tutorials? Is this extremely complex?
Have a look at jquery ui:
http://jqueryui.com/demos/dialog/
You can not avoid a popup. The only difference is that using a javascript framework like jquery you can have a beautiful popup.
So use the jquery dialog box to display the image and textbox for commenting. Using ajax you can save the comment and exit the dialog box. The trick is to make good use of css and opacity on the dialog box.

How to make popup help/info message?

How do show pop up help messages in jquery?
I.e You might want to let the user know about a new feature, or might want to provide the user with help on how to use a feature.
Your best bet to get started would be the jQuery Dialog which is part of jQuery UI. That can give you basic message abilities
You could use a popup lightbox plugin, there are plenty available, but I'd recommend FancyBox because it's flexible, easy to use, and looks quite professional. You can them to display any content, including simple text, buttons, forms, iframes and images.
Have a div element hidden. Position is absolute, z-index to something greater than 0 (css).
Onclick on some button or something, have javascript change the display of this element to block.

Selective overlay and expose with tooltips

I want to show my first-time users different functions of my web-app. To do this, I want to make an in-page tutorial that will guide the users through different parts of the page.
I would like to use tooltip modals with instructional content. When the modal is showing, the page element in question will be exposed while the rest of the page is darkened. When the user presses "next" on the instructional modal, another set of instructions will show up and another part of the page will be exposed and the rest of the page will still be dimmed.
What's the best approach to take for this? Please advise. thanks!
jQuery Tools expose should take care of that nicely.

Categories