I'm using jquery to drag popup control around the page ,every things work fine but when the page has flash movie the popup doesn't appear over flash also when set z-index to 100 .
is there any work around this issue???
$('.modalPopup').ready(function() {
$('.modalPopup').draggable({ zIndex: 2700 });
});
Add this param to your <object>:
<param name="wmode" value="transparent">
Be aware that there are some issues with this solution (performance, handling hit areas, etc), but this may give you what you need.
Check out this handy demonstration of different WMODEs.
Related
I cannot seem to get Chrome to pop up an "alert" page. The alert page has code in it, so it can't really be a DIV or I would just do it that way. It worked for many years, but likely do to a Chrome update it will no longer function. Still works fine in IE11, though.
The following code is used to pop up an "alert" page when there is an alert that is queried from a Database. It has always worked until recently (15 years and running)
CODE:
ClientScript.RegisterStartupScript(GetType(Page), "Alarm", "<script language='javascript'>window.showModalDialog('Alarm.aspx?ID=" & AlarmID & "', null, 'dialogWidth=460px;dialogHeight=310px;status=no;resizable=yes');document.frmA.submit();</script>")
I've tried a few things like windows.open and creating a hidden button on the asp.net page and then using the click event. Nothing works. I do not see a blocked popup in Chrome and I have even went into settings and did the following:
Set Safe Browsing to "No Protection"
Set allow pop-ups and redirects on the server name (http://servername and http://localhost)
As noted, near all browsers quite much have clamped down on popup windows. this makes things more difficult for web developers.
There are two good approaches. one I don't fancy at all is using bootstrap dialogs, but they tend to "sort of work all on their own" kind of deal based on class settings for divs etc. - really hard to debug.
Since near all sites these days include jQuery for your js code, then I quite much hands down recommend you introduce jquery.UI. It has a whole slew of nice things such as date pickers etc. But it also has a rather nice dialog pop option. They just work, and when you code them up? They follow "normal" like code approaches.
it not quite clear if your message/dialog pops after say a button click (and post back), and the at the end of that process, you need/want some dialog message to display. But all in all, I would high recommend jQuery.UI for this dialog/message that you need.
jQuery.UI in most cases expects the content you want to "display/pop" exists in a simple div in the current existing page. However, it also works VERY well if you supply the dialog another existing web page. The only REAL big issue to keep in mind? That dialog page you pop cannot handle multiple post-backs. (so, some buttons, or ONE post back in that dialog is fine - but you ONLY get the ONE post-back.
So, if that page display allows some input, or some interaction and ONLY requires ONE post-back, then jQuery.UI is again great. If that pop page requires several buttons and several post-backs, then you are in for a world of pain and hurt - jQuery.UI dialogs (like most) cannot survive or handle multiple postbacks. Any post-back means the dialog closes (collapses). So in those cases, you have to adopt ajax calls (web methods) if you need/have/want that page to have more then one active post-back button or event.
So, you could have/place a script in even your master page, and little function code stub that your register script can call.
Or, I suppose you could inject the whole script, but the script would look like this:
So, the pop page actualy is SHOVED into a div. So we have a div that "holds" the page.
The jQuery.UI code script then looks like this:
<div id="poppagearea">
</div>
<script>
function showpage() {
var mydiv = $('#poppagearea');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '30%',
position: { my: 'top', at: 'top+150' },
buttons: {
'ok': function () {
mydiv.dialog('close');
alert('user click ok');
},
'cancel': function () {
mydiv.dialog('close');
alert('user click cancel');
}
}
});
mydiv.load('Default.aspx');
// Open the dialog
mydiv.dialog('open');
}
So, in above, we loaded "default.aspx" into that dialog and thus displayed it on the page.
So, I would consider jQuery.UI - but it does mean adopting a new js library into your existing project.
The pop page does gray out the full page, and you do get a title bar, and your own ok, cancel button. The above thus looks like this:
So, it does a great job - but as noted, that page can only have one post-back, and it can't be a general working aspx page with lots of buttons and post backs - but it will render and display rather well.
I have an ASP.NET page that contains an iframe. Inside that iframe, there is a form with a DefaultFocus and a DefaultButton set, as shown below.
<form id="Form1" method="post" runat="server" defaultfocus="txtSearchPhrase" defaultbutton="btnSearch">
When viewing this page in IE11, all of the content inside of the iframe appears to be shifted off the left side of the screen by about 100px or so. This does not happen in any other browser, including IE10.
If I remove the DefaultButton and DefaultFocus from the form, the problem disappears. I can then use Javascript to manually hookup the default button and focus, but since I have many different pages that are potentially rendered inside the iframe, it's not ideal to have to change each and every one of those pages.
Does anyone know what's causing this or if there's a better way to address it?
I looked into this and found some interesting things.
First, when you include DefaultFocus or DefaultButton on a form in ASP .NET WebForms, ASP .NET will automatically emit two things:
The definition of a WebForm_AutoFocus method.
A call to this method, which looks something like: WebForm_AutoFocus('defaultFocusElementID'); It does this for both DefaultFocus and DefaultButton settings, though I'm not sure why it needs to do this for the DefaultButton setting.
The WebForm_AutoFocus method attempts to call the scrollIntoView method on the element, but only if the browser is detected as a "non MS DOM" browser. Strangely enough, IE11 is not considered an MS DOM browser, at least as far as this method is concerned. So the scrollIntoView method is designed to run on browsers which are not IE.
I suppose one could argue the bug is with the implementation of the scrollIntoView method in IE11, but it could also be viewed as a bug in the MS JS library which detects whether the browser is an MS DOM browser. I'm not sure - either way, I blame Microsoft. :)
I recommend not using DefaultFocus and DefaultButton from a philosophical perspective because these are Microsoft-specific things, and when you can keep your code away from Microsoft-specific things, you usually should. Especially when using the "Microsoft way" is totally broken. Rather, try something like this (if you're using jQuery):
<form data-defaultfocus="search">
<asp:TextBox ID="search" />
</form>
<script type="text/javascript">
// jQuery on document ready
$(function() {
var form = $('form'),
defaultButtonID,
defaultFocusID;
if (form.data('defaultfocus')) {
defaultFocusID = form.data('defaultfocus');
$('#' + defaultFocusID).focus();
}
if (form.data('defaultbutton')) {
defaultButtonID = form.data('defaultbutton');
form.on('keypress', function(event) {
if (event.keyCode === 13) {
__doPostBack(defaultButtonID, '');
}
});
}
});
</script>
This is not tested code, but you get the idea. Then you can go through and use data-defaultbutton and data-defaultfocus on your form elements instead of the Microsofty way of doing it, and it will actually work, and if it doesn't, you can fix it, because you control the code!
I hope this helps.
Update
I found this Microsoft KB article which discusses a .NET 4 patch. Issue 2 on this page appears to address an issue which might be the one you described.
When you access an ASP.NET-based webpage by using Internet Explorer 11, the webpage renders the content incorrectly.
Note This issue occurs because Internet Explorer 11 is not recognized as Internet Explorer by ASP.NET.
I haven't tried it out yet, but it seems like this would fix it.
I'm building a photo gallery in ASP.NET. The user can browse thumbnails along the left and select one, which brings a preview-sized version into the right pane of the page.
I'd like to fade between the images, so that the current one fades out and the next one fades in. I'm using jQuery to fade the preview image in after it is loaded, which works great. Unfortunately, I can't get the fadeOut script to run before the click event posts the page back to the server. The thumbnails are ASP.NET ImageButtons, which means they're <input> tags.
Is there a way to get the postback to delay just long enough for the image to fade out? I've seen some tricks with the form onSubmit and setTimeout() but that would affect all the links and buttons on the page. I want to delay postback for the thumbnails only.
TIA
EDIT: Based on my research, and trying the suggestions below, it may be possible to delay the postback to accomplish this but it's not the best approach on several levels. To get a clean fade transition between images, in the future I would not do any posting back at all. I would use jQuery exclusively for the fadeout, load, fadein.
Try adding a return false to your function that handles the fadein/out... It should prevent the page postback from occurring...
$('#<%= this.aspbutton.ClientId%>').click(function(){
$('#myDiv').fadeout("slow");
return false;
});
I'm not sure what you are getting on the PostBack where you would want to fade out an image and then fade one in. Have you considered using AJAX for that? You could even have the thumbnail image contain the necessary information within the image tags for the larger image.
Take a look at the jQuery Lightbox plugin. I have implemented this plugin and modified the .JS a bit to allow for viewing a higher resolution photo in addition to the web view. Check it out here.
$('#<%= this.aspbutton.ClientId%>').click(function(){
var $btn = $(this);
$('#myDiv').fadeout("slow", function() {
$btn.unbind('click').click();
});
return false;
});
Here's the solution I used:
Since I AM using MS AJAX with an UpdatePanel, I can use the client-side AJAX event handler.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(fadeOut);
function fadeOut() {
if ($('.mainImage').length > 0) {
$('.mainImage').fadeOut('normal');
}
}
This gives me the exact behavior I wanted- any time the user navigates between thumbnails, the image fades out, loads, then the new one fades in.
HOWEVER...
This is still not ideal, as there is a pause between fades while the page posts back. It will work for now but in the long run it would be better to use jQuery to set the preview image rather than the thumbnails posting back as ImageButtons.
i made swf using flash 9 player if i right click swf it will shows menu like zoom in , zoom out, etc option . how to remove right click menu in swf .
check this post: http://blog.another-d-mention.ro/programming/right-click-and-custom-context-menu-in-flash-flex/. If you don't want any interaction with the right click, you can just use that javascript so you add a layer on top of your flash that catches the right click events and stops them from getting to the flash player.
Try this method, or read in this class about what else you can do with the context menu.
i saw ur refer url it's shows Redraw Regions option only .you will changed on your embed code
<param name="MENU" value="false">
The as3 (in movie) put this in first frame :):
myMenu.hideBuiltInItems();
_root.menu = myMenu;
In html:
<EMBED src=Yourswf.swf type="text/html;
charset=iso-8859-1" quality="high" menu=false
bgcolor=#000000 WIDTH=120 HEIGHT=30>
As a follow up to this question: Developing a online exam application, how do I prevent cheaters?
Can I detect when Flex application looses its focus? that is if a user has clicked onto another application or opened a browser tab?
I read this: Detecting when a Flex application loses focus but was not very clear...
The key part of the code at that link is the
systemManager.stage.addEventListener(Event.DEACTIVATE,deactivate);
The Flash player send outs activate and deactivate events when the focus enters and leaves the player. All you need to do is create a listenr for them and react appropriately.
A more clear example of how to use to the activate and deactivate events can be seen at blog.flexaxamples.com.
Also, it looks like the activate and deactivate events have trouble in some browsers. Colin Moock has more info on that here.
You can add a handler for activate in the main application tag. This detects whenever the flex application comes to focus.
Eg:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
activate="activateHandler(event);"
deactivate="deactivateHandler(event);">
This will work to detect when the Flex windows loses focus, but to detect when the window regains focus without having to actually click on the flex app requires an update in the HTML wrapper, correct? Something like:
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = ${version_major};
// Minor version of Flash required
var requiredMinorVersion = ${version_minor};
// Minor version of Flash required
var requiredRevision = ${version_revision};
// -----------------------------------------------------------------------------
// -->
function onAppFocusIn()
{
${application}.onAppFocusIn();
alert("onAppFocusIn");
}
</script>
<body scroll="no" onFocus="onAppFocusIn()">
I am trying to implement this but the onAppFocusIn() function is not executing once I move back to the flex app window. When I view the source, the code is there. Does anyone know why??
Thanks,
Annie
In Flex 4.6, this command works systemManager.stage.addEventListener(Event.DEACTIVATE, deactivate)
but make sure the flash app wmode is set to window (default). When the wmode was transparent, the event didn't get caught. You set the wmode in the embedded html where you put your flash app. example:
<object classid="clsid:D27WEE-A16D-21cf-90F2-422253540410" width="100%" height="100%"
id="MyApp" name="MyApp" align="middle">
<param name="movie" value="MyApp.swf?v=1.00.008" />
<param name="wmode" value="transparent"> <----- take out this
...