I have part of jQuery code that makes my photos bigger. It works perfectly in Firefox, Chrome or Opera, but if I use whichever IE it doesn't work and I can't find which part of this code isn't compatible with IE (I think this is a problem), so I don't know how to find solution (if some solution is possible of course)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Moje portfolio</title>
<meta content="Ewa, Makowska, strony www, grafika komputerowa" name="keywords">
<link rel="Stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*show bigger picture*/
function showit(src){
document.getElementById("picture").innerHTML = "<img src="+src+" id='bigimg' />";
$('#mask').css('display','block');
$('#mask').animate({'width':screen.width,'height':screen.height +100, opacity:'0.5'});
$('#fixed').css('display','block');
var bigimg = document.getElementById("bigimg");
$('#picture').css('display','block');
$('#picture').animate({
width: bigimg.width,
height:bigimg.height});
$('#close').css('display','block');
}
function closeit(){
$('#close').click(function(){
$('#close').css('display','none');
$('#fixed').css('display','none');
$('#picture').css('display','none');
$('#mask').css('display','none');
})
$('#fixed').click(function(){
$(this).css('display','none');
$('#mask').css('display','none');
$('#picture').css('display','none');
$('#close').css('display','none');
})
}
$('.smallimages').hover(function(){
$(this).stop().css({'border':'1px solid #666699'});
},function(){
$(this).stop().css('border', 'none');
});
</script>
</head><body>
<div id ="close" onClick="closeit();"></div>
<div id="mask"></div>
<div id="fixed"><div id="picture"></div></div>
<div id="insidetext">
<?php
function listfile($dir)
{
$tab=array();
$handle=opendir($dir);
while ($file = readdir($handle)){
if($file=='.'||$file=='..' || is_dir($dirname.$file)) continue;
array_push($tab,$file);}
closedir($handle);
return $tab;
}
$tab=listfile('gallery');
foreach($tab as $value)
{
echo '<img src="gallery/'.$value.'"
onClick="showit(`gallery/'.$value.'`)" class="smallimages" />';
}
?>
</div>
</body>
</html>
Thank for all answer very much. Then I removed second version of jquery console showed me where was a problem. IE has problem with this (small tilde?), and work with \'. So than I change
"showit(gallery/'.$value.'`) to "showit(\'gallery/'.$value.'\')"
everything is perfect.
Related
With IE officially deprecated in Angular 12, I want to display a static warning in my page to notify the user to switch to a supported browser.
I'm using a simple snippet like this in the index.html
to append a css class to the body, when then displays a div element.
<body class="mat-typography">
<script>
(function msieversion() {
const ua = window.navigator.userAgent;
const msie = ua.indexOf('MSIE ');
if (msie > 0) {
document.body.classList.add('is-internet-explorer');
}
})();
</script>
<div class="ie">isIE</div>
<app-root></app-root>
</body>
.is-internet-explorer {
.ie {
display: flex;
}
app-root{
display: none;
}
}
.ie {
display: none;
}
But I'm getting errors in internet explorer, that runtime.js, polyfills.js, vendor.js and main.js wont run. I assume it is because of missing polyfills and the tsconfig target setting, that these won't run.
Is there a way to "prevent" angular from inserting or executing these script tags in the first place? I've tried to remove them in my if (msie > 0) block, but that doesn't work.
setTimeout(() => {
const x = document.body.querySelectorAll('script[defer]');
x.forEach((i) => document.body.removeChild(i));
});
My goal is to accomplish this without having to adjust polyfill and tsconfig settings, to keep the build size to a mininum.
The errors showing in IE is due to the scripts still load in IE. If you don't want to see the errors in IE, you can load an unsupported html page when the browser is IE.
Besides, it seems that there're some issues in your detecting IE code. I made some changes, and you can refer to my steps below, I test it and it works well:
Add a unsupported.html file in the root of src folder. Example unsupported.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<h1>The app is not supported in IE. Please use other browsers!</h1>
</body>
</html>
Add "src/unsupported.html" in angular.json assets property. For example:
"assets": [
"src/favicon.ico",
"src/assets",
"src/unsupported.html"
],
Detect browser in src/index.html, if IE then redirect to unsupported.html, if not then render <app-root>. The code is like below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<script type="text/javascript">
var msie = /msie\s|trident/i.test(window.navigator.userAgent);
if (msie) {
//IE, redirect page
window.location.href = "./unsupported.html";
}
else {
//render app
var elem = document.createElement("app-root");
document.body.appendChild(elem);
}
</script>
</body>
</html>
I suggest to display an alert before IE encounters any problem. I use below code:
<body>
<script>
function isUserUsingIeBrowser() {
return /MSIE|Trident/.test(window.navigator.userAgent);
}
if (isUserUsingIeBrowser()) {
alert('IE not supported');
}
</script>
<app-root></app-root>
</body>
Why doesn't image show on load, but shows on refresh?
My problem is like the one above, except with multiple video files. On Chrome, videos won't display unless after refresh. On Safari, they seem to display fine. Per the other answer, I'm assuming this has to do with files loading asynchronously and can be fixed by proper use of onload in my jquery, but I'm unfamiliar with how to best do that.
HTML
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/hinukan/style.css">
</head>
<body>
<div id = "container">
<div id="box1" class = "box">
<div id="video1" class="video"> <video poster loop muted playsinline controls><source src=assets/portrait.mp4></video></div>
<div id="text1" class="text"><p>mytext</p></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="/hinukan/javascript.js"></script>
</html>
JAVASCRIPT
if ($(".video").css("max-width") == "850px" ){
$(".box").children(".text").click(function() {
$(this).toggleClass("ttoggle");
$(this).siblings(".video").toggleClass("vtoggle");
});
$('video').click(function(){
this[this.paused ? 'play' : 'pause']();
});
}
else {
$(".box").children(".video").click(function () {
if (!$(this).hasClass("vtoggle")) {
$(this).siblings(".text").toggleClass("ttoggle");
$(this).toggleClass("vtoggle");
}
});
$(".box").children(".text").click(function() {
if ($(this).hasClass("ttoggle")) {
$(this).siblings(".video").toggleClass("vtoggle");
$(this).toggleClass("ttoggle");
}
});
$(".video").hover(function () {
$(this).siblings(".text").addClass("tselect");
$(this).children("video")[0].play();
}, function () {
var el = $(this).children("video")[0];
el.pause();
$(this).siblings(".text").removeClass("tselect");
});
}
the add class is not working even if it is in document ready. I tried both with document ready and without it. it is not working but alert is working.
var $jbanner = jQuery.noConflict(true);
if ($jbanner(window).width() < 1200) {
alert("Less than 1200");
$jbanner("#wad").addClass("hide");
}
other code
var $jbanner = jQuery.noConflict(true);
$jbanner(document).ready(function () {
if ($jbanner(window).width() < 1200) {
alert("Less than 1200");
$jbanner("#wad").addClass("hide");
}
})
With document ready function even the alert box is not working. is it conflicting with other jquerys in the page.
#wad is an image
<img id="wad" src="images/banner.jpg"/>
thanks
ok this should be pretty easy, but not working for me. I just pasted what i am trying to do in a separate html file. but still not working, any help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript">
var $jbanner = jQuery.noConflict(true);
if ($jbanner(window).width() < 1200) {
alert("Less than 1200");
$jbanner("#wad").addClass("hide");
}
else {
alert("greater than 1200");
$jbanner("#wad").addClass("show");
}
</script>
<style type="text/css">
.hide{display:none;}
.show{display:block;}
</style>
</head>
<body><div>
<div id="wallpaperad">
<a href="http://www.yaho.com" target="_blank" rel="nofollow">
<img src="http://www.placehold.it/160x160" alt="banners" id="wad" /> </a>
</div>
</div>
</body>
</html>
I am just trying to create a floating banner ad. that hides for smaller screen sizes.
Try to without jbanner.
$("#wad").addClass("hide");
I am building a phonegap app using javacsript and jquery.I wrote this piece of code to swipe images.
$('#fullscreen').swipeleft(function () {
//Show next image
showNext();
alert('Left');
});
function showNext() {
$("#fullscreen").attr('src', "images/next.png");
}
But when I swipe, the image doesn't change and I get the error "09-13 14:49:21.188: W/webview(20238): Miss a drag as we are waiting for WebCore's response for touch down."
After browsing through some forums I added the following code.
var fullScr = document.getElementById("fullscreen");
fullScr.addEventListener( "touchstart", function(e){ onStart(e); }, false );
function onStart ( touchEvent ) {
if( navigator.userAgent.match(/Android/i) ) {
touchEvent.preventDefault();
}
}
But it still doesn't work.Although when I change my screen orientation from portrait to landscape, the image changes.
What is it that happens when I change the orientation and how could I get it working in the same orientation (portrait/landscape) please?
Thanks in advance.
Well it worked for me :S... I used version 1.5.0 of Cordova and run the app on Android simulator 4.0.3. Could you try the following example?
HTML content:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- BASIC INCLUDES - TO BE MODIFIED ACCORDING TO YOUR CONVENIENCE -->
<link rel="stylesheet" href="./css/jquery.structure-1.1.0.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.1.0.min.js"></script>
<!-- END - BASIC INCLUDES -->
<script type="text/javascript" charset="utf-8">
$(function() {
$('#fullscreen').swipeleft(function () {
//Show next image
showNext();
});
function showNext() {
$("#fullscreen").attr('src', "./images/next.png");
}
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<img id="fullscreen" src="./images/previous.png"></img>
</div>
</div>
</body>
</html>
NB: Make sure of the following things:
Modify the source of the "basic includes" of the code to your convenience (source of the CSS / JS files of jQuery / jQuery Mobile)
Change the source of the version of cordova if yours is not 1.5.0
Hope this will work for you too. Anyway, let me know about your result.
I have to print out a div which I'm doing in the following way:
function PrintElem(elem)
{
Popup(elem.html());
}
function Popup(data)
{
var mywindow = window.open('', 'to print', 'height=600,width=800');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="css/mycss.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
My problem is that on IE, when I click the button nothing happens. However, on Chrome and Firefox it works. What can I do to print it out correctly?
EDIT: I'm call print in the following way:
$('#print_it').click(function(){
var element = $('#itinerario');
PrintElem(element);
});
This is where print_it is the id of the button.
Another thing I've seen is that after a period of time, Chrome along with other browsers tells me that the page isn't responding. Why is this happening?
You MUST do a mywindow.document.close() and you may NOT have a space in the window name
I assume you invoke PrintElem from onclick of something - if that something is a link, you need to return false in the onclick handler!
Here is how I would do it if I had to
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'to_print', 'height=600,width=800');
var html = '<html><head><title></title>'+
'<link rel="stylesheet" href="css/mycss.css" type="text/css" />'+
'</head><body onload="window.focus(); window.print(); window.close()">'+
data+
'</body></html>';
mywindow.document.write(html);
mywindow.document.close();
return true;
}
but I am not sure whether or not the window.close() will interfere with the printing
And why not
$(function() {
$('#print_it').click(function(){
popup($('#itinerario').html());
});
});
I see you've solved it using mplungjan's note about no spaces in the window name, but an alternative would be to use #media print css styles, crudely:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#media print {
* {
visibility: hidden;
}
.printMe {
visibility: visible;
}
}
</style>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
var divToPrint = $("#div3");
$(divToPrint).addClass("printMe");
window.print();
$(divToPrint).removeClass("printMe");
}
)
}
);
</script>
</head>
<body>
<div id="div1">fhgjghajghhjagjdag</div>
<div id="div2">ytiyrtiyertuyeyiyt</div>
<div id="div3">We want to print this one.</div>
<div id="div4">vnbcxbvmzxbvc,xbv</div>
<div id="buttonContainer">
<input id="Button1" type="button" value="button" />
</div>
</body>
</html>
On my case I just needed to use the code below:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
In my case this issue was resolved by doing a focus before the print.
window.focus();
window.print();