Response title
This is preview!
- Screen name: henk
henk's Profile
8 Posts
9 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- 25-Apr-2016 04:59 AM
- Forum: Using jQuery UI
Hi,
I'm building a website where a part can be shown full screen.
Unfortunately when the div is shown in full screen mode, the dialog is hidden behind the full screen div. Only after pressing escape to undo full screen, the dialog is visible.
See code below. Button 'Show full screen' makes the div full screen.
Button 'Show dialog' supposes to show the dialog, but does this only when the div is not full screen.
What am I'm doing wrong?
Thanks!
[code]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" type="text/css">
<style>
body {background-color:lightgrey;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" defer></script>
</head>
<body>
<div>This text won't be full screen.</div>
<button id="idBtnShowFullScreen">Show full screen</button><br /><br />
<div id="idContentToShowFullScreen">This text will be full screen.<br />
<button id="idBtnShowDialog">Show dialog</button><br />
<div id="idDialog" title=" "><p><span id="idDialogMessage"> </span></p></div>
</div>
<script>
function requestFullscreen(id) {
var elem = $(id)[0],
isFullscreenSupported = false;
if (elem.requestFullscreen) {
elem.requestFullscreen();
isFullscreenSupported = true;
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
isFullscreenSupported = true;
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
isFullscreenSupported = true;
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
isFullscreenSupported = true;
}
return isFullscreenSupported;
}
function customAlert(title, message) {
"use strict";
$("#idDialogMessage").html(message);
$("#idDialog").dialog({
'position': { my: "center", at: "center", of: "#idContentToShowFullScreen" }, //?
'title': title,
'modal': true,
//zIndex: 1001,
'buttons': [{
'text': "OK",
'click': function () {
$(this).dialog("close");
}
}]
});
}
$("#idBtnShowFullScreen").click(function () {
requestFullscreen("#idContentToShowFullScreen");
});
$("#idBtnShowDialog").click(function () {
customAlert('Test', 'Dialog is visible!');
});
</script>
</body>
</html>
[/code]- This is part of the JQM source, around line 1880:
// Whenever `document.title` changes, update the Iframe's title to
// prettify the back/next history menu entries. Since IE sometimes
// errors with "Unspecified error" the very first time this is set
// (yes, very useful) wrap this with a try/catch block.
doc.onpropertychange = function(){
try {
if ( event.propertyName === 'title' ) {
iframe.document.title = doc.title;
}
} catch(e) {}
};
Closure Compiler raises this error:
jquery.mobile-1.4.5.js:1881: ERROR - variable event is undeclared
if ( event.propertyName === 'title' ) {
^
I suppose Closure is right (as always).
Is this on the radar for the next version?- Is this a bug or is there something else wrong?
Open the Slider widget demo (I use Firefox):
http://api.jquerymobile.com/slider/
The mini-version looks wrong when I make the window small as a mobile phone:
- 02-Apr-2015 08:30 AM
- Forum: Developing jQuery Mobile
The separator displaying the selected options in a multiselect selectmenu is a comma.
This looks strange when options are sentenses with capitals.
Example: http://jsfiddle.net/t2oh50e0/
Is it possible to change the separator from comma (,) to semicolon (;)?
Now I have to modify the JQM source, but I prefer not to.
Thanks!
- 05-Jun-2014 03:14 PM
- Forum: Using jQuery UI
The following error appears on my website, when I want to show a dialog:TypeError: undefined is not a function (Chrome)
- Error: TypeError: $(...).dialog is not a function (Firefox)
The second one is not from my website, but included by the adware WindowShopper in the browser of some visitors.
How to prevent this error?
Example in jsFiddle: http://jsfiddle.net/fybJ3/
[I asked this question on Stackoverflow but got no responses]
http://stackoverflow.com/q/24045676/3708485- 02-Jan-2014 07:52 AM
- Forum: jQuery Mobile
This attribute disables an option in a selectmenu:
disabled="disabled"
How to set or unset this option in a JQM not-data-native menu dynamically?
This is my fiddle:
http://jsfiddle.net/rCFzP/3/
I tried:
$("#idSel option[value='c']").prop('disabled', true);
This only works when the selectmenu has data-native-menu="true", not when false.
What it does, is adding this property:disabled=""
Please help! I tried the whole morning to solve this..- I need to change the header of a collapsible.
This is my JSFiddle:
http://jsfiddle.net/rCFzP/2/
Somehow the icon dissapears. How can I get the icon back?
Thanks,
H- 23-Dec-2013 11:10 AM
- Forum: jQuery Mobile
I have a project in JQM 1.3.2. This project uses a collapsible. For multi language I have to update the header and the content dynamically.
In version 1.3.2 this worked:
HTML
<div id="idCollapsible" data-role="collapsible">
<h3 id="idCollHead">OK!</h3>
<p id="idCollCont"></p>
</div>
JS
$('#idCollHead').text('translation');
In 1.4.0 this no longer works. The icon dissapears. I tried a lot to fix this, but without success.
Please help!
© 2013 jQuery Foundation
Sponsored by and others.