Please see code at http://cyclestreets.darkgreener.com/location/ - if necessary, go to a London, UK location to see some markers)
When you click on a marker, a jQuery mobile dialog opens. However, the CSS is broken - it's against a black background.
(Compare the About and Prefs dialogs on the home page to see the correct CSS.)
It looks as though some of the dialog classes are not being applied to the content div.
Can anyone explain how to fix this?
The jquery mobile dialogs appear against a black background because the parent page is removed from the DOM as soon as the transition completes.
You can get more standard looking dialogs with a couple of changes to the css and transition code:
https://github.com/jquery/jquery-mobile/pull/2380
Related
I saw a good website template and started making a website. The link is: https://html5up.net/lens. In the process, I observed a typical UI bug, where in if a user scrolls down the page and clicks on "X" of the image (to see fullscreen image),toggles back, scrolls to the top of the page, the content which was visible before disappears though it still appears in the DOM.
I saw the js function written for the toggle, it's straightforward and works fine until we don't scroll on the web page. Please see bug screenshot.Screenshot of the bug
This is a known, ongoing issue with Chrome and CSS visibility. You can 'fix' this by updating the CSS of the affected children, ie. changing classes or simply setting the visibility of the child element manually. I believe this to be because Chrome automatically prevents the rendering of the divs because at the time they are called to be shown, they are off screen and not viewable.
I've got a page that I'm building for IE8, and it currently has three modal jquery dialogs. When the page is fully loaded, they're perfectly hidden and invisible to the user until they click the buttons that call the dialogs. However, when the page first loads, all three of them cluster at the top left corner of the page and then blink away when the page finishes loading. Here's what it looks like when that happens
It loads just fine in Firefox, but that's not what my users are using.
Try setting display:none as a default CSS style on the dialog div
I'm using jQuery mobile for a project and need to react to vclick events when a popup is opened.
My problem is that the vclick event is just fired inside the popup, not on the whole page.
You can find a minimal example here.
Thanks in advance for your help!
Your code works correctly, I dont know if this was your intention but you are using popup overlay panel. Unlike normal panel in jQuery Mobile 1.3 version, popup overlay panel has an hidden div witch stretches full width and full height of the screen.
What looks like a click on a mail page is just a click on a hidden overlay div.
You can even test this, use Firefox or Chrome and take a look at a popup HTML, you will find that DIV.
In your case this DIv is a problem:
<div id="panelPopup-screen" class="ui-popup-screen in" style="height: 611px;"></div>
You can always switch to jQuery Mobile 1.3 RC1, use its panel, just make it semi transparent.
EDIT :
Found a solution for you, here's a live working jsFiddle example: http://jsfiddle.net/SC8hH/
This will fix your problem:
#panelPopup-screen {
display: none;
}
I'm using the jQueryUI (extension?) and have a simple overlay on a page. Here's what I have so far
Anyway is there any built in way to grey out the screen when the dialog is open? I know you can do this by appending another div to the page, I want to know if jQueryUI has something like this built in.
I couldn't find anything like this on the API, maybe I missed something.
You can specify options for the dialog using an object literal. One of these options is modal which will place an overlay on the screen behind the dialog. This overlay will prevent the user from clicking behind the dialog.
$('#over').dialog({modal:true});
Example: http://jsfiddle.net/vhA2w/1/
Checkout all of the available options at: http://jqueryui.com/demos/dialog/
This jsfiddle should work for you
$('#over').dialog({ modal: true });
when you visit http://www.daniweb.com you get a popup window, what is this called + any idea how to do it?
Thank you for your reply, what is the simplest way to do have a modal loading animation only i.e. when page loads that animations shows and when done the animation goes? ASP.NET/Ajax
You'd call this a modal dialog, and you can implement one very easy with jquery ui:
http://jqueryui.com/demos/dialog/#modal
I like to refer to these windows as ANNOYING
The other name is some form of JS or JQuery.
Its called a javascript popup window.
Here's a link to show you how to open a js window
The way it looks though is they are using the modal popup extender provided by the ASP.net AJAX Control library. This can be simulated via JQuery as well.
It's called a modal dialog window. "Modal" meaning "mode" as in the UI has two modes, one where you can only interact with the dialog window, the other where there is no dialog window and you can interact with the rest of the page.
Probably looks something like a lightbox/thickbox .Showing some text/html instead of images
This is a modal pop up window, meaning you can't do anything else while that window is open.
Here are a bunch of ways to make them.
You can set up this kind of popup by having Javascript on the onload event create an overlay div that has height 100% and a higher z-index than the content, and also a div for the popup with position fixed and an even higher z-index. Then when the user clicks on close or otherwise it is time for the popup to go away, the Javascript can set display: none on these divs.
You can use Firebug (or IE Developer toolbar) to see the styles used on the example page you mentioned and use that as a model.
(Also they are annoying, but at least better than pop-unders, IMO ;-) )
Thats a modal dialog popup. Here's a nice jQuery version that I have used before.