Actually I want to show the modal window over pdf and its working well in IE, Chrome & Mozilla Firefox but its not working on Safari 5.1.7
So Will any 1 please help me to find some solution on this ? I am getting this issue on Windows Operating System i.e XP, Windows 8 & Windows 7.
Here is my JS Fiddle link : http://jsfiddle.net/xdrc1nou/
Below is my code as well
HTML
<div id="divHover">try me</div>
<div id="divHoverChild">hello</div>
<iframe id="ifBG" src="about:blank"></iframe>
<iframe id="ifPDF" src="http://bitcoin.org/bitcoin.pdf"></iframe>
Javascript
$().ready(function () {
var $child = $("#divHoverChild");
var $ifBG = $("#ifBG");
$("#divHover").mouseover(function () {
$child.slideDown();
$ifBG.slideDown();
})
$child.mouseout(function () {
$child.slideUp();
$ifBG.slideUp();
});
});
It will be quite difficult to find someone with OSX Lion running Safari 5.1 to have an answer for your question (that's almost 3 versions back, with Yosemite just around the corner), and a world-wide usage of less than 0.5% of the browser.
With that in mind this answer gives you some pointers, it has not been tested by me.
In general when embedded iframes don't play nicely with the overlays on a page a common solution is applying these styles to the problematic iframes:
<iframe id="ifPDF" src="http://bitcoin.org/bitcoin.pdf" style="position: relative; z-index: -1;></iframe>
See if this does it.
A less elegant solution would be to hide the problematic iframes when overlays are triggered to be shown, and therefore avoid the overlap (since the overlapping element is gone).
Just for the record in Safari 7 it works perfectly, just like in the other modern browsers you mentioned to be functioning OK.
What about using object and ember:
<object src="http://yoursite.com/the.pdf" width="700px" height="700px" style="position: relative; z-index: -1;">
<embed src="http://yoursite.com/the.pdf" style="position: relative; z-index: -1;">
</embed>
</object>
I can't test too. I am running Linux.
Related
After testing in BrowserStack, I've concluded that using scrollTo() with option parameter behavior: smooth does not work in Chrome and Edge since version 81. Version 80 of both Edge and Chrome was working as expected. According to MDN, it should be working with no asterisk. (unlike Safari)
In popular answers such as this one, using behavior: smooth is the recommended way to enable smooth-scrolling in your web application.
Here's a small reproducible:
<html>
<button onclick="goToAnchor('b')">Scroll to B</button>
<div id="a" style="height: 1000px; background-color: blue;">Blue</div>
<div id="b" style="height: 1000px; background-color: red;">Red</div>
<div id="c" style="height: 1000px; background-color: green;">Green</div>
</html>
<script>
function goToAnchor(anchor) {
let rect = document.getElementById(anchor).getBoundingClientRect();
window.scrollTo({
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
behavior: 'smooth',
});
}
</script>
The expected behavior would be that the browser window smoothly interpolate the view down to the red div. It does this properly in all versions of Firefox I've tested. In all of the versions of Chrome since v81, and all versions of Edge since v81, it seems to use the behavior of behavior: auto - i.e. it jumps to the div rather than smoothly interpolating the view.
In version 80 of both Edge and Chrome, it behaves just like Firefox, meaning this bug (?) must've been introduced in version 81 - perhaps in the shared Chromium code-base?
I find it very unlikely that I am the first person to find this issue, as it has been not been working since April, and must therefore conclude I am doing something wrong. Can someone point towards the error in the code? Or is the Chrome and Edge APIs really broken? Is the behavior hidden behind a feature flag, like in Safari?
I believe I've found the culprit, and interestingly, it seems it is Firefox that is the odd one out.
In this StackOverflow thread about detecting RDP connections, the current top answer says:
You can use the following media query:
#media screen and (prefers-reduced-motion: reduce) { . . . }
The prefers-reduced-motion part is interesting. It seems in my testing that this also changes scrollTo() calls with scroll-behavior: 'smooth' to jump rather than interpolate.
I did an addendum to the question's code example to demo the feature:
<html>
<button onclick="goToAnchor('b')">Scroll to B</button>
<p class="reduced-motion">Reduced motion is enabled.</p>
<div id="a" style="height: 1000px; background-color: blue;">Blue</div>
<div id="b" style="height: 1000px; background-color: red;">Red</div>
<div id="c" style="height: 1000px; background-color: green;">Green</div>
</html>
<style>
.reduced-motion {
display: none;
}
#media (prefers-reduced-motion) {
.reduced-motion {
display: inline;
}
}
</style>
<script>
function goToAnchor(anchor) {
let rect = document.getElementById(anchor).getBoundingClientRect();
window.scrollTo({
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
behavior: 'smooth',
});
}
</script>
It will now say "Reduced motion is enabled." next to the button depending on your OS and browser configuration. In that case, the scrollTo call will simply jump rather than interpolate.
In short, the issue is that BrowserStack's remote desktop control is also enabling this flag.
I try to make a test with the MS Edge Version 87.0.664.60 and Google Chrome Version 87.0.4280.88.
On my side, the code works fine on both browsers.
Here is my test result: (Above is the MS Edge and below one is the Google Chrome browser)
You are making this test using the BrowserStack. It is can be possible that the issue is related to BrowserStack.
I suggest you try to make a test using the actual browsers. It may help you to find the cause of the issue.
So I want to image-resize client side, just like this, but not only in Firefox.
Notice that the element generated in Firefox, has the attribute _moz_resizing = "true".
The code is as simple as the following.
document.querySelector('p').contentEditable = true;
<p>
<img src='http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png' alt='stackoverflow icon'>
</p>
Is there any way to do this for Chrome and Edge too?. I you are going to provide a solution in JavaScript, I would like better if it's vanilla.js than jQuery. Thank you in advance.
You can achieve this in chrome by wrapping the image with a div and adding this styles..
resize: both;
overflow: auto;
demo:
https://jsfiddle.net/anwar3606/d184oqfz/
JQuery UI
JQuery UI provides very good resizability functions and is very easy to use.
https://jqueryui.com/resizable/#default
In a web app, I need to disable the default callout that mobile browsers shows when touching and holding ("long tap") on a touch target, such as an <img> or a link.
I am already using -webkit-touch-callout: none for iPhone and iPad. I tried -ms-touch-action:none and touch-action:none for IE, but this doesn't seem to work (tested on IE11, Windows Phone 8).
This post from the W3 mailing list suggests adding a listener for the "contextmenu" event in Javascript and calling e.preventDefault(). This does not seem to work either.
Any suggestions?
I did a bunch of research and as far as I can tell these are your two options:
Use a transparent <div> to cover the link/image
using a <div> with style="background: url(yourimage.png)" instead of <img src="yourimage.png">
The core problem is that mobile IE on Windows Phone doesn't properly handle preventDefault with contextmenu events. That is the proper way to do this and it works in every other browser. The contextmenu event is fired on WP IE but it actually happens when the long press context menu is dismissed. It should happen before even showing the menu so that you can prevent it.
Here are some of the other options I tried:
Events: I tried registering for every event and using e.preventDefault(), e.stopPropagation() and return false to prevent all of the default actions. JSBin example.
Use element:before or element:after to place an element on top of the link or image. I thought this might be able to automatically do what the transparent <div> does. Unfortunately the :before or :after content is part of the <a> so it is all clickable as well. Also, apprently <img> elements don't support :before or :after. JSBin example.
user-select: none
-ms-touch-action
-webkit-touch-callout: none
I even pinged someone on the IE team and he didn't know of a way.
I tried every "normal" or "elegant" option out there, but apparently IE11 mobile ignores every single one of them.
CSS properties: -webkit-touch-callout equivalent for IE
The preventDefault method Microsoft suggests: https://msdn.microsoft.com/en-US/en-en/library/jj583807(v=vs.85).aspx
Catching all touch events: Disabling the context menu on long taps on Android
A homebrewn oncontextmenu callback with stopPropagation and preventDefault
The only thing actually working is the old ugly div-over-image:
<div class="img-container">
<img src="path/to/image.jpeg" />
<div class="cover"></div>
</div>
CSS:
.img-container {
position: relative;
}
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
The link below works fine in FireFox and Chrome, however when try to open it in IE nothing seems to work or load.
I am loading the whole website inside of the iFrame. I initial analysis is it could be jQuery as there is no jquery reference in the iFrame.
Can the run on all browsers.
http://hitin.net/projects/aurion/aurion.html
I have tested it on IE9
JsFiddle: http://jsfiddle.net/ZhdMF/
<body>
<div id="content">
<iframe width="100%" height="100%" src="http://www.auriongroup.com/">
</div>
</iframe>
</div>
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0;height:100%;
}
Update:
My intention is to load the website inside the iFrame and host the iFrame page on a different domain then auriongroup.com
Regards,
Hitin
I found some introduction from here
It says,
Cross browser ?
The Flippy plugin works fine for every modern web browser except Internet Explorer 8 and before (of course…). In this demo I used the excanvas.js file to allow the use of canvas in older IE versions. You can find it here.
So the issue happens because IE8 and prior versions doesn't support canvas. You can try excanvas.js mentioned by the author.
I need help writing a conditional with javascript for 2 videos. I have searched around but I guess I am confused about how to set my variables. I have 1 video (flash iframe) that I'd like to show on a desktop browser's site but I would like a different video (non-flash) to show when viewing the site on a mobile device.
These are the two videos:
<html>
<div id="desktop_video">
<iframe src="url-here" height="650" width="600" frameborder="no" scrolling="no" marginwidth="0px" marginheight="0px"></iframe>
</div>
<div id="mobile_video">
<script type="text/javascript" src="http://url-here"></script>
</div>
</html>
Say, you're trying to show the desktop at a minimum browser width of 480px, this would be your CSS:
#mobile_video {
display: none;
}
#desktop_video {
display: block;
}
#media only screen and (max-width: 480px) {
#desktop_video { display: none; }
#mobile_video { display: block; }
}
Though the desktop should already be block, I added to code to be clear it's necessary. This is just a simple way to do this.
You could use the Navigator.useragent to detect client's browser. (There are a lot of resources out there if you search for it.)
I took the following line from javascriptkit which will check if the user is using a mobile device...
//returns true if user is using one of the following mobile browsers
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)
You can display the mobile video (non-flash) if ismobile returns true. Or else you can just display the iframe video.
Hope this helps you to get a start. As I mentioned, there are lots of resources out there to help you with this solution, even on SO...
How to detect a mobile device with javascript