I am building an app for mobiles, using jquery mobile framework. I want to be able to make a simple dialog box/pop up, so that when you click on a picture of a "question mark" the pop up/ dialog box would appear with a simple message.
I have tried different approaches from http://jquerymobile.com/test/docs/pages/dialog-alt.html to so many others. I couldnt get non of them to work. So If you know how to make a simple pop up or a simple dialog box could you please give me an example!
If you want to open a dialog in jquery mobile you have to use an attribute data-rel="dialog" and the href must point to a URL where your dialog lives:
Open dialog
Here's a fiddle so you can see how it works.
Hope it helps.
UPDATE:
It seems there's a problem with jQuery Mobile dialog and some devices.
There's an issue open in the GitHub repository.
I've found this plugin which seems to work really well.
Related
I want to select the files using file-selector after getting confirmation from the user through dialog box. I have used below code to make it work.
angular.element('#ngFileElementId').trigger('click');
It's working fine in firefox i.e. displaying file-selector using which user can select multiple files after providing confirmation through dialog box but it's not working in chrome.
I think, it is probably a setting error in Chrome which is affecting the working of ng-file-upload.
CodePen Issue Generator
Thanks for Reading it.
Regards
Ajay
I am writing tests for my Bootstrap 3.x webapp using Nightwatch. All is working fine, but I would like to add the "close modal by clicking somewhere next to it" in one of my tests. I don't seem to be able to identify the html element that's supposed to receive the click event however.
Can anyone help me with this?
Thanks!
The background is a div with class .modal-backdrop. According to the docs: "...generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal."
I need to be able to have a popup, preferably like a lightbox that displays an html message when a user clicks a link. The popup will populate the screen and the user will have to click "OK" after reading the message. How can this be done using lightbox? I'd rather avoid using a boring prompt as its much less attractive.
http://lokeshdhakar.com/projects/lightbox2/
You might be able to do it in lightbox, but as far as I can tell it's not quite what lightbox was intended for. You may want to consider a more generic "modal" type of solution. A common one is jQuery UI's Dialog. Another common one is Bootstrap's modal solution.
Was just trying to cobble a quick site together as a favour for my sister. It's based on a template she bought and I've just quickly bunged her copy/pictures in, so I'm aware the markup is far from perfect. That said, I can't see how it would be causing the following issue...
The template uses a jQuery plugin called jScrollPane to make the content sections scrollable. Sometimes however, in Chrome (v20) this doesn't work - it doesn't let you scroll all the way down.
What's really odd though, is the pattern I've found that seems to effect whether it works or not. Try the following
Go to http://mattandkate2012.co.uk in Google Chrome - click 'Ceremony' - can you scroll down far enough to see the map? I can't.
Press the reload icon, click 'Ceremony' - can you scroll down? I can't.
Select the URL in the browser URL bar, press enter - can you scroll down? I can now!
Does everyone else get the same results as above, and do you have any idea why pressing enter in the URL bar has a different effect to the reload button?
This functionality works fine in Firefox and even IE!
Thanks
Pete
From a very quick look I guess it's because the section contains an image and you aren't re-initialising jScrollPane once the image loads. See:
http://jscrollpane.kelvinluck.com/image.html
The difference between refreshing and pressing enter in the location bar is that the cached image is shown when you press enter in the location bar...
I would suggest moving the call to $('.content').jScrollPane({showArrows: true}); to inside the $(document).ready block - if you call it before the document is ready often images or other elements won't have loaded and so the height of the containers will be wrong.
According to this S.O. answer the Firefox Web Developer toolbar has a Save button:
However, the answer shows an image of the toolbar which does not show a Save button:
(source: mozilla.org)
I just installed the toolbar to take advantage of this option but I do not see a Save button.
Does the Save button exist?
Yes, when you actually edit the CSS there is a "Save" button on the window:alt text http://img14.imageshack.us/img14/6628/screenshotdoesthewebdev.png
You can also try http://cssUpdater.com which saves your css while you change in FireBug.
This way you can develop in FireBug, hit the "Sync now" button from within the FireBug panel. And reload the page to see that your changes is still present!