Change href on Internet Explorer - html

I want to change the value "href" in my html page if someone opens it using IE.
At first I tried with the button, but the final goal is without it.
This is what I have:
<script type="text/javascript">
function myFunction()
{
var oldHTML = document.getElementById('troca').href="http://player.vimeo.com/video/39640718?title=0&byline=0&portrait=0"
var newHTML = document.getElementById('troca').href="http://www.youtube.com/embed/VwjI7ICgcJ0?rel=0";
if (navigator.appName!='Microsoft Internet Explorer')
{
**//what action i have to put in here?**
}
document.getElementById("troca").innerHTML=x;
}
</script>
</head>
<body>
<p>clique, se for internet explorer nao vai trocar nada!</p>
<button onclick="myFunction()">Troca</button>
<br/><br/>
<iframe id="troca" src="http://player.vimeo.com/video/39640718?title=0&byline=0&portrait=0" width="910" height="512" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</body>
Does someone know what I have to put in there for my code changes?

You can use conditional comments if you don't want to use JS:
<!--[if IE]> hello ie user! <![endif]-->
<![if !IE]>
hello non-ie user!
<![endif]>
Here's a fiddle and another link about IE conditional comment syntax.

Simply call document.getElementById('troca').src= again with the new value. Just know that browsers can and do lie about their appName. IE tends to be Microsoft Internet Explorer, but just about everything else identifies as Netscape.
iframes do not have a href, only a src.

Related

IE Redirect Method

Use Different HTML for IE
I have developed a CSS Grid Site that works with all browsers except IE and have tried Autoprefixer which made improvements but did not fix all problems, some of which may not be Grid related. I am looking for recommendations to redirect ALL IE browsers to a completely different HTML file and would appreciate recommendations to do so. I already have separate HTML and CSS files that work with IE. Thanks for any suggestions.
I found this on another post and it seems to work well:
<<!-- For IE <= 9 -->
<!--[if IE]>
<script type="text/javascript">
window.location = "https://google.com";
</script>
<![endif]-->
<!-- For IE > 9 -->
<script type="text/javascript">
if (window.navigator.msPointerEnabled) {
window.location = "http://bobabend.com/index-old-as-of-3-7-2019.html";
}
</script>

I can use footer tag from HTML5 in IE8

I found something strange in my website... I'm using HTML5 and this script to use in olders browsers.
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
When I use <article>,<section> it works but when I use <footer> it doesn't.
I don't know the reason.
The others tags have the open tag and close tag.... This is the html code
Header:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script type="text/javascript">
activaMapa = 0;
</script>
<![endif]-->
Footer Code
<footer class="pie">
<p>Web Site</p>
</footer>
Thanks for all the responses!
I found the problem...I'm looking my settings in IE and I've the scripting disabled... I activated and works!
Thanks for all!
Please change html5shim to html5shiv
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Hope this may work
Older browsers doesn't support HTML5 tags. For this, you can use libraries like Modernizr or html5shim.
These libraries will provide support for older browsers bearing the HTML5 tags.
A good way to see if a tag is supported or not is by using CanIUse.com, and in this case, no, <footer> is not supported in ie8.
Instead, try using
<div id="footer"></div>
and for your css instead of
footer {
...
}
use
#footer {
...
}

Unable to focus input on embedded swf on page load in Opera

I have a simple html file which is meant to display embedded flash where I can write straight from the start, withouth clicking on it earlier.
To my dissapointment, I can't do it in my favorite browser! Problem happen to occur only on Opera. On FF and Chrome works fine.
Here's the code:
(...)
<script type="text/javascript">
function setFocus()
{
<!-- document.getElementById("clock-countdown").tabIndex = -1; -->
document.getElementById("clock-countdown").focus();
}
</script>
</head>
<body onLoad="setFocus();">
<object name="clock-countdown" tabIndex="0" >
<embed id="clock-countdown" wmode="opaque" src="clock-countdown.swf"> </embed>
</object>
</body>
It might help to have an external script insert the object/embed into the DOM, to avoid the click-to-activate state. (Sorry about that.. :-/)

Float a Div over an Embedded Pdf/Applet a Solution for Safari

I have nav menu html that I would like to be able to open over top of objects underneath it. Fx. An applet or an embedded pdf file. However, floating a div over an embeded element or applet doesnt work in all browsers (need safari, ie8+, firefox, chrome). By doesnt work i mean it does not appear on top.
Looking at various posts i came to the following code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showHideElement(element){
var elem = document.getElementById(element);
if (elem.style.display=="none"){
elem.style.display="block"
}
else{
elem.style.display="none"
}
}
</script>
<style>
div:hover {
background-color:red !important;
}
</style>
</head>
<body>
<div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me to toggle elem (ie)</div>
<div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>
<div style="position:absolute;z-index:20;margin-left:200px;">
<iframe visible="true" id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
<div style="position:absolute;z-index:10;margin-left:100px;">
<iframe visible="true" style="z-index:1" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
</body>
</html>
This works on all browsers now except Safari, is there anyway to make it work on Safari (I'm using 5.1.4 Windows) as well?
I see no mention of Safari on previous posts...
Thanks
I'm still looking for a solution to this myself. So far I have found nothing that works with Safari. I have tried wrapping the embedded PDF in an iframe, in a div, setting it to visibility:hidden, display:none, and/or both on a click event (so the pop-up modal dialog show up on top of the PDF area), etc. Nothing works with Safari. Here's what's really weird though. At work I'm on a Windows 7 PC and when one mouses over the icons of open apps on the taskbar, a preview window comes up with a miniature version of the app in it. When I mouse over my open Safari, the image that comes up displays my fixes working properly! And when I click on the image to get the actual Safari window to come to the forefront ... everything is "broken" again. Now THAT is BIZARRE.
Please contact me if you find a working solution for Safari, and I will do likewise.

Hiding some HTML from IE6?

I've tried:
<!--[if lt IE 6.0]>
HTML TO HIDE FROM IE6
<![endif]-->
but unfortunately the stuff gets hidden from firefox too. Anyone have methods that work? I want the stuff to be hidden from only IE6
Thanks
You can actually use conditional comments to hide things from Internet Explorer contrary to the answer from deceze. These types of conditional comments are called 'Downlevel Reveal Conditional Comments'. (These are different from comments used to show things to internet explorer which are more common, those are known as 'Downlevel hidden conditional comments')
<!--[if lte IE 6]><![if gte IE 7]><![endif]-->
<!-- This is a bit mad, but code inside here is served to everything
except browsers less than IE7, so all browsers will see this -->
<!--[if lte IE 6]><![endif]><![endif]-->
However if you already using a downlevel hidden conditional comment to show a IE6 stylesheet just to IE6 then you might be best off just hiding it with CSS.
I hope this helps.
Little confused with your question but Here is the javascript code to detect the version of Internet Explorer. Taken from Detecting Internet Explorer More Effectively. Add the HTML contents which are to be hidden from IE6 in a div and hide it using the function below.
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
function checkVersion()
{
var msg = "You're not using Internet Explorer.";
var ver = getInternetExplorerVersion();
if ( ver > -1 )
{
if ( ver == 6.0 )
**Hide the DIV here**
}
alert( msg );
}
Try
<!--[if lte IE 6.0]>
in your CSS, using lte (less-than or equal) rather than lt (less-than).
Conditional comments shouldn't affect Firefox at all as they are commented out and the browser should ignore it. I would check that your Firefox stylesheet is correct and embeded correctly something like this:
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link href="/css/ie6.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->
Edit
After reading Natalie Downe's answer, I'd do it like this:
<!--[if true]><![if !IE]><![endif]-->
<h1>You're not using IE. Well done!</h1>
<!--[if true]><![endif]><![endif]-->
You can use negated conditional comments to hide things from IE but not from other browsers.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<![if !IE]>
<h1>You're not using IE. Well done!</h1>
<![endif]>
</body>
</html>
It renders some invalid markup, but it works.
Reference: http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
Natalie Downe's answer is good enough, but there's a shorter and clearer version to hide content from IE6 (or whatever version below 10):
<!--[if !IE 6]><!-->IE6 can't see me<!--<![endif]-->
To target IE6 and below, you can use
<!--[if gt IE 6]><!-->IE6 and lower can't see me<!--<![endif]-->
And if you want to support IE10+ only, you can use
<!--[if !IE]><!-->IE9 and lower can't see me<!--<![endif]-->
In fact, IE10+ doesn't support conditional comments. Inspired by Browserhacks.
Every other browser can see the content, of course, since it's all valid HTML.