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.
Related
I'm using a poshytip, it is working fine, until I want to display my tip on the element that is under the current page (I mean that page where I have to scroll down to see it, don't really know how to name it properly). Unfortunately, poshytip has some bugs related to that - if I want to display a tip on the element that is currently lower than the current page position, then tip is showing at the bottom of my page. Havent seen any better tip plugin than this, so I decided to fix it on my own.
The question is - is there a way in jQuery/javascript to check if the element (for example the input with ID) is on the current page that user is viewing? By saying current page I mean the top of the page - my element is placed much lower, so user have to scroll down the page to see it, so is there a way to do something like: if user is scrolling down the page, and the element will be finally visible then send alert to the user?
I know this may be kinda complicated, but couldn't find any better words to describe my problem, I'd answer additional questions, if you have one.
If you want to test for an element's visibility in the viewport, you should reference this post here as it's outlined quite clearly.
On another note, I prefer using the jQuery tools suite for my Tooltip plugin of choice. You can see it here
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.
I'm working on a web app where in I need to add some values inputted by the user.
When the user clicks on the Add button he sees a form and these values then show up on the page. Now to implement this I can do two things
Use a modal window
Make a form inside the page itself(in a div) and toggle its visibility by the Add button.
If I go with the former solution is it necessary to use Ajax or I can add elements on the main page directly itself? Are there any jQuery plugins to accomplish the same?
As Diodeus mentioned, you don't need Ajax.
In answer to your other question about the plugins, have a look at jQuery UI Dialog for the dialog. Generating the form is pretty trivial. There's no need for a plugin there
You don't need to use Ajax to accomplish this. The difference in the two methods is simply whether you use an inline block of code that is hidden and displayed later, or whether you use an absolutely-positioned block of code doing exactly the same thing.
In most cases there is a single form that envelops the entire page. The rest is a matter of a CSS and positioning.
I want to put a link in a Javascript alert.
Is this possible? (I've searching for a solution, but I keep getting things about links that fire alerts!)
AFAIK you can't do that with a normal javascript alert box.
Make a custom alert box and then make a link inside it.
Here is a nice one
YUI: Dialog Alert Widget
Also a jQuery based one
jQuery Impromptu
Nope. Only standard OS dialog boxes are available (alert, input, etc.), and none support embedded hyperlinks.
You can could a pop-up window that is styled to look like a dialog, but pop-up windows are likely to have various user blocks, etc. in place.
My advice is to use a an absolutely-positioned DIV with a high z-order centered on your page that looks like a dialog box and put whatever you want in it. Various UI toolkits like JQuery UI take the pain out of this.
I'm interested in alert boxes such as,
http://www.visual-blast.com/javascript/nice-alert-box-with-jquery-impromptu/
and
http://woork.blogspot.com/2008/08/design-stunning-alert-box-using.html
but with a different functionality, the user should be able to interact with the page even with the alert box present, so it needs to be movable and not obscure the underlying page, as in this example,
http://www.open-lab.com/mb.ideas/index.html
Alert box should be generated automatically on page view plus the title and message of the alert box should change with each page refresh from expandable library.
Is there anything out there like this?
Thanks
Sounds like the jQuery UI dialog widget might do what you need?
http://jqueryui.com/demos/dialog/
Here is an example with mootools. You easily can extend any element on the page to be draggable. You may use this plugin as a sample of alerts and you'll just need to remove some functionality and add make it draggable.
There are few custom dialogs in moo.rd. One of them is the Custom.Alert:
http://www.moord.it/examples/custom_alert