Hi I have a problem and I can't find solution
If you know / used highslide script you know it's amazing, but as always f***g IE has to make life more difficult.
Launch IE9 and go to page http://highslide.com/examples/youtube.html
Then try to open and close video, you will see that it won't close (ESC button works properly). You have to do it more than once. The problem appears only in IE9
Any ideas?
Thanks a lot and sorry for my english :)
This is a known issue in IE9; the flash player throws an error, and unfortunately this JavaScript error somehow affects the Highslide close button the second time we tries to close the popup. Our developer has not been able to find why this error affects the Highslide close button.
You can however still close the popup with the ESC key.
A workaround for IE 9 is to add a message in the caption telling IE 9 users to use the ESC key to close the popup. Demo page: http://roadrash.no/hs-support/youtube-with-alternative-close-method-for-ie9.htmlAdd this code after the regular Highslide settings:
<!--[if IE 9]>
<script style="text/javascript">
hs.captionText = 'Click the ESC key to close';
</script>
<style type="text/css">
.draggable-header .highslide-header ul {
display: none;
}
.highslide-caption {
font-style: italic;
font-size: 11px !important;
text-align: center;
}
</style>
<![endif]-->
Related
I'm using popup over whole screen. When popup is opened I set body and html CSS to overflow: hidden and prevent screen from scrolling. In all browsers working fine and on the android devices also, but the problem is on the iOS devices. I cannot stop scrolling on the ios devices.
<html style="overflow: hidden;">
<body style="overflow: hidden;">
<div class="popup" style="position: fixed;">
</div>
</body>
</html>
I need clean CSS solution for this. I tried already to add position: relative, position: fixed but it's not working.
Any solutions?
I had the same problem some days ago and I finally came up with this.
Well, there is a very simple solution to solve this problem... All you
have to do is set that element to have a relative position. For
instance, if you were to specify for the body to hide the horizontal
scrollbars you would want to have the following CSS in your
stylesheet:
body {
position:relative;
overflow:hidden;
}
OR
Another method is adding jQuery if above doesn't work
we can prevent swiping by using something like so:
$('body').bind('touchmove', function(e){e.preventDefault()});
And to re-allow swiping again (i.e. when a menu or full screen modal is closed):
$('body').unbind('touchmove');
Hope this helps you :)
Sorry my English. After some days , I found this solution, it worked for me!
position: touch-action: none;
-ms-touch-action: none;
I am making a hybrid app, in which I have a left panel. On opening the left panel my page turns black. I am facing this problem only in windows phone 8. Panels work properly on android devices. Is there a problem with Windows support for jQuery Mobile?
I have an image for the menu button. onclick event of this image i have called a javascript function. the javascript function is as follows
<img src="images/leftnav_icon.png" id="leftnavImage" onclick="OpenLeftPanel()"/>
function OpenLeftPanel() {
$('#myPanel ul').listview();
$('#myPanel ul').listview('refresh');
$("#myPanel").panel("open");
}
How about just opening the panel th default way like described in the docs
<a href="#[your_panel_id]" data-rel="panel">
<img src="..." />
</a>
The data-rel should be optional. To run your listview-foo, bind to panelbeforeopen and run your stuff then (described on the same link as above).
Thank you all for your help. I got this problem solved. I just added a footer to all my pages and the left panel works fine now! CSS for footer is
#yourFooterId{
position: absolute;
bottom: 0px;
width: 100%;
height: 1px;
opacity: 0;
}
I have Ajax file upload control on an aspx page. The drag and drop zone of the control is visible on Chrome and mozilla but not on IE10. I understand that it should be visible on browsers which support HTML5 and CSS3. I believe IE10 has the support.
I went through the CSS and found this difference
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; visibility: visible;">Drop files here</div> (In Chrome)
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; display: none; visibility: hidden;"/> (In IE10)
In case of IE10, The display is set to none and visibility to hidden.
My question specifically is
At what point is this browser specific css rendered? so that I could get to why this is happening even when there is support for HTML5 and CSS3
I believe I cannot change this property in my code as it would be overwritten again in case of IE10.
EDIT:
I did try to edit the css by setting display to "block" and visibility to "visible". But this creates a disproportionate view with scroll bars which is not an ideal solution in my case
catch it with jquery.
// let the dropzone load first
setTimeout(function () {
$('.ajax__fileupload_dropzone').text('Drag Drop/Click');
if ($.browser.msie) {
$('.ajax__fileupload_dropzone').css({'visibility': 'visible','display':''});
}
}, 10);
this got it to show but it would not work right. I updated the toolkit from 15.1.2.0 to 15.1.3.0 and this seems to fix the problem. The odd thing is the night before I had no problems with IE.
how to remove default close button in dialog page in jquery mobile 1.0.
i'm using RC2 version.
thanks in advance.
Please put this in your page or stylesheet:
<style>
.ui-dialog .ui-header .ui-btn-icon-notext { display:none;}
</style>
<style>
.ui-dialog .ui-header .ui-btn-icon-notext { display:none;}
</style>
this doesn't work. at least with jquery.mobile-1.2.0
.ui-dialog .ui-header a[data-icon=delete] {
display: none;
}
but this way works
Now I'm using jQueryMobile 1.0.1. In this version no need to add this line in CSS file.
<style>
.ui-dialog .ui-header .ui-btn-icon-notext { display:none;}
</style>
If you have the situation that you want the close button refer to an arbitrary (not the last) page, you could also change the page to your desired close page first. Afterwards open the dialog like this:
// change to the "close" page first
$.mobile.changePage('#your_page_id_here');
now you can open the dialog and the close button will open #your_page_id_here
// for some reason you have to wrap it in a timeout
window.setTimeout(
function( data){
$.mobile.changePage('#dialog');
},
1
);
Advantages:
solution works for single dialogs rather than removing all close buttons from all dialogs
seamless integration on a single point of code
history manipulation is not recommended, see here
I am using MVC2 on VS2010 Express edition.
I Have a (simplified) page that includes RenderPartial for a dialog. The dialog is supposed to pop up when a button is clicked. However, if I include modal:true as one of the dialog options, then when the button is clicked nothing happens. The dialog does not pop up. When I remove modal:true from the dialog options then dialog pops up as expected and closed as expected. Please help. I have sent so much time researching this problem and can't find anything. When at first I had a list several options specified for this dialog and it was not poping up, I removed them one by one to find out if any of them are causing the problem, and sure enough when I removed modal the dialog was rendered on clicking the button. Adding back the option modal: true stopped rendering of the dialog again.
These are in master page:
<link href="<%=ResolveUrl("~")%>App_Themes/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<%=Html.Script("~/Scripts/jquery-1.4.2.min.js")%>
<%=Html.Script("~/Scripts/jquery-ui-1.8.2.custom.min.js")%>
<%=Html.Script("~/Scripts/jquery.form.js")%>
This is the page that is initially rendered. The first line in bold is the line for the button that when clicked, it would open the dialog. The second line in bold the line that is supposed to actually render the dialog:
Request Dialog
My Menu
<% Html.RenderPartial("get_dlg", ViewData.Model.FName); %>
This is the entire code for the dialog page (get_dlg). As such, the dialog does not show up when the button is clicked. Removing the line in bold will some reason allow the dialog to be rendered!
<script type="text/javascript">
$(document).ready(function () {
$("#get_dlg").dialog({
title: 'Get Dialog',
autoOpen: false,
modal: true
});
$('#requestDialog').click(function () {
$('#get_dlg').dialog("open");
})
});
</script>
show me something!
Any suggestions please?
I got help from someone on ASP.NET Forum: it is a CSS problem. adding the following to the ascx (view) fixed the problem:
<style type="text/css">
.ui-widget-overlay {
background-color: #000000;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
}
.ui-dialog {
background-color: #FFFFFF;
border: 1px solid #505050;
position: absolute;
overflow: hidden;
}
</style>