I want to open a popupwindow (with close button only) when the user clicks a button and the parent window should be disabled until the popup window closed. For that I'm using the following code
function popup_window(url) {
popupwin = window.showModalDialog(url,null,'height=20,width=150,status=no,resizable=no,scrollbars=no,toolbar=no,location=no,menubar=no');
}
Anyhow, this code is working perfectly in IE. But, I hav two problems.
In firefox, it is not opening with the size I've mentioned in the script. It is opening in full size. And In Google Chrome, parent window is not getting disabled.
Thanks in Advance
The syntax of the args is different. For example:
window.showModalDialog(url, null,
"dialogwidth: 150; dialogheight: 20; resizable: no")
Related
I was creating a page and want to have css accordingly to browser window size. Is there a tool (maybe in f12 developer tools?) that could show me exact pixels when I am resizing a window so I could set a particular style for that size of window?
For example, I write:
#media ( max-width: 768px) { .picture-to-hide {display : none; } }
But when testing my page I see that I would like to hide the picture earlier. How do I know exact pixels? Just by try and fail method of trying different numbers? Or maybe I can see pixels in developer tools somewhere?
Thank you in advance!
When it comes to your display on Windows 10, in your Laptop’s Settings Panel, you should find all the relevant information. To get there, go to the Search panel in your Taskbar, and write “Display”.
Once you enter the “Display” word, Windows will suggest opening the “Display Settings”. Select then “Open Display Settings”. The system will show you all the options for Display. Look for the “Advanced Display Settings”.
Once in “Advanced Display Settings”, Windows will show you information like monitor resolution, Model of the Video Card, Color format and size of the screen.
If you are doing responsive designing i suggest you to try webdeveloper mode in mozilla firefox where you can change the screen size accordingly .Shortcut to switch onto resposive web design mode in mozilla firefox : Ctrl+Shift+M
I have a large, wide image I'm animating using CSS. The image is displayed and animated as expected on Chrome (Both desktop & on Android) and Firefox.
However, on Safari (Both desktop & mobile, v12.1), the image is usually not being animated, or worse - shown partly/not being shown at all - on the initial load. After one or two page refreshes it begins to behave as expected (probably because it loads the image from the cache).
After disabling the animation, the image is displayed fine on the initial load.
Demo
Source code
Any ideas why Safari behaves like that?
I ended up loading the image through JavaScript which made it show up and animate properly on Safari. This does not solve the source of the problem but works fine as a temporary fix.
const imageElement = document.getElementById('image');
const image = new Image();
image.onload = function() {
imageElement.src = image.src;
imageElement.className = 'animation-class-name';
};
image.src = 'pic.jpg';
I have a weird problem occurring with a web page being viewed in google chrome. When viewed in ie9 / safari the embedded youtube video works fine but for some reason in chrome it just displays a black box on page load. The weird thing is the moment the page is interacted with, ie. the user scrolls down, the video will display correctly. I'm not sure what's going wrong.
The page in question is: http://core.slnmedia.com/inspiration/
There's a script on the page that will detect the width available to the right of a large tile and if there is sufficent space, the pop-out panel will display on the right. If not, the panel will display on the left. If you resize your browser window so that the 'bevis marks' tile sits at the top right corner of the screen and only has a small amount of space available on the right, then click on it, you'll see the effect I'm talking about.
The javascript function that's changing the position of the tile is below:
$('.large-tile').hover(function() {
$(this).find('.bw-photo').hide();
$(this).find('.inspiration-detail-wrapper').show();
$(this).css("z-index", "2");
var profile = $(this).find('.inspiration-detail');
if(profile.find('.content').text().trim().length == 0) {
showData($(this).attr('id').substring(1, $(this).attr("id").length));
}
// **Depending on how much window space is available, position the panel on**left/right
var available = $(window).innerWidth() - ($(this).offset().left + 300);
if(available >= 412) {
// If enough space then show panel on right
profile.css("left", "320px");
}
else {
// Otherwise attach left
profile.css("left", "-368px");
}
profile.show();
$('.scrollbar-wrapper').tinyscrollbar({ size: 252 });
},
function() {
$(this).find('.bw-photo').show();
$(this).find('.profile').hide();
$(this).css("z-index", "1");
$(this).find('.inspiration-detail-wrapper').hide();
});
The weird thing is that the line profile.css("left", "320px"); is what causes the trouble. If you don't include this line then the video displays correctly. For some reason the positioning causes the video not to display correctly.
I hope I've explained the problem correctly - does anyone have an idea of where I'm going wrong here? It's driving me nuts!
Thanks
I was having trouble after a Microsoft update. I cleared my cache and cookies for the last week and everything works fine now.
This worked for me:
<iframe allowfullscreen frameborder="0" height="315"
src="http://www.youtube.com/embed/A3pIrBZQJvE?wmode=transparent" width="420"
wmode="Opaque"></iframe>
Source
I am using GWT 2.4, GWTP and Chrome 22.0.1229.94 for testing. I have struggled with this issue for days.
On startup I present a custom PopupDialog using a view that has extended PopupViewImpl. In an overridden onReveal() method I center the dialog. The GWTP code centers synchronously and also using scheduleDeferred.
In development mode and running complied on local server everything works as expected: the popup dialog is always rendered and centered correctly. I have also tested in IE.
However, when deploying to the live web server on the Internet I notice that when I refresh using F5, sometimes the CSS is not applied before the script tries to center the dialog. This results in the measurements being wrong and the dialog is not placed in the center. Interestingly this only seems to happen now and then, typically when the browser is not fast enough in rendering all (CSS) resources before the scheduled deferred command is invoked.
So, I have already tried the following:
Loading CSS using different techniques (reference in HTML-file, reference in GWT-module, put in CssResouce)
Center using Scheduler.get().scheduleDeferred as default code also does.
Calling RootLayoutPanel.get().onResize() in onReveal to try to trigger some layout before centering deferred.
I notice the same behaviour in Chrome and IE so it might not be a browser issue. My question is where to put my "center"-call to ensure that it is called after the all CSS has been properly applied or if there is anything else I can do to force the CSS to render?
Thanks!
Here is the onReveal code in the Presenter extending PresenterWidget:
#Override
protected void onReveal() {
super.onReveal();
// Hide loading image
fireEvent(new HideApplicationLoadingImageEvent());
// Reset message
getView().setStatusMessage(null);
// Center the popup
getView().center();
}
There is method addToPopupSlot(child, boolean center); if you send true for center argument it take care of centering the popup in GWTP Example:- addToPopupSlot(widget, true)
I've created a rather simple Flex application using Flex Builder 4, which connects to a webcam on the user's PC. To do so, Flash is presenting the user with the infamous privacy warning.
Now, the problem is that user can't click on the panel, as it seems unresponsive to any user interaction.
Some more details:
Firefox 3.6.12 on Mac/OSX, Snow Leopard.
Adobe Flash Plugin 10.1.85.3 / 10.1 r85
The Flex app is working fine in its own window/tab but the problem shows up as soon as the html page with the Flex app is embedded into the iframe of another page.
If I artificially put an Alert box before connecting the camera, the user is able to interact with the Flex application but as soon as the Privacy panel is shown, the Flex app stops interacting.
The app works fine under Chrome and Safari but I have not tried this under Windows.
I've read that there are problems with CSS positioning so I removed any CSS style impacting the Flex app.
Before I change my strategy and get rid of the iframe (which will cost me quite some effort) I'd be happy to know whether others have experienced the same problem and if there are workarounds.
Thanks.
I had the same issue for weeks now. I found what may be the problem. It has something to do with the css alignment. try to remove the text-align:center; from the div flash is in and it will work again. Somehow the active areas from the security panel don´t shift with the display image…
In my application, this problem is apparently caused by an element containing the flash having the css margin: 0 auto. This leads to the left edge of the flash object sometimes being reported as a decimal, e.g. $('.flash').position().left --> 450.5px. Whenever it's not a whole number, the security panel failed to react to clicks.
The fix described in https://bugs.adobe.com/jira/browse/FP-4183 and linked to by Christiano almost works. However, it failed whenever the browser was resized to be so small that the left margin disappeared.
Here's what fixed the issue for me:
function registerMozillaFlashFix() {
if ($.browser.mozilla) {
$(window).resize(function() {
$(".flash").each(function(ii, e) {
var $e = $(e);
$e.css('margin-left', $e.position().left % 1 === 0 ? '0' : '0.5px');
});
});
}
}
Then just call window.resize() once your flash has been set up.