We Keep Coding

Jquery altering background-url in IE

I ran into a problem using jquery in IE for a background-url. I have some html (that contains a style with a background-url) that I make a jquery object from. After that I change some properties in this object and want back the outerhtml. This all works fine in chrome, but in IE it changes the background url a bit (removing slashes and adding quotes) because of this the url is not working anymore. I can add more slashes for IE, but I was wondering why this happens and if there is a better solution?
So the following peace of code will give the same html back in chrome as was put in, but in IE it has been altered:
function test() {
var logo = '<div class=\"item__img\" style=\"background-image: url(graphic?path=avatars\\OSDAFIJ-Employee_Large.JPEG?ts=1433171332313)\"></div>';
var $logo = $(logo);
var logoOuterHtml = $logo.prop('outerHTML');
console.info(logo + " || " + logoOuterHtml);
alert(logo === logoOuterHtml);
}
test();
Fiddle: https://jsfiddle.net/v7fs4xvr/

How to show multiple page `.tif` file on Internet Explorer?

My requirement is to show .tiff image on browser. So currently I'm showing tiff file on Internet Explore using img tag like below.
<img src="myTiff.tif" type="image/tiff" alt="My Tiff">
And it works perfect with the tif file having only single page. In case there would an multiple pages in .tif then the img tag only shows 1st image. User can not get option to view other image.
Sample tiff image
I already tried all the option suggested here
I'm using C# on server side & on front end using AngularJS. Any help would appreciated. Thanks :)
Edit
Would it be better way to go with AltraTiff plugin? I looks like working on Internet Explorer.

Content rendering is always browser's responsibility so you rely in its capabilities.
Maybe there is some plugin for some browser that supports multiple-page tiffs, but, if you can't control software installed in your clients, I think your best option would be to implement some pagination by separating pages server side.
You can achieve that easily with imagemagick.
The only drawback is that, if user try to download it, it will download only the single page he were currently viewing.
But yo can mitigate it by providing separate download link or, simply, linking full version to the displayed image. Example using jQuery:
<div id="tiffPager">
<a href="myTiff.tif">
<img width=200 height=200 data-pageCount=5 src="myTiff_page0.tif" alt="My Tiff">
</a>
<button class="pageBack"><<</button>
<button class="pageForward">>glt;</button>
</div>
<script>
$(function(){
var container = $("div#tiffPager");
var img = $("img", container);
var backBtn = $("button.pageBack", container);
var fwBtn = $("button.pageForward", container);
var pgCount = img.data("pageCount");
var currPage = 0;
backBtn.on("click", function(){
currPage = (currPage + 1) % pgCount; // Cycle though pages.
img.attr("src", "myTiff_page" + currPage + ".tif");
});
fwBtn.on("click", function(){
currPage = (currPage - 1) % pgCount; // Cycle though pages.
img.attr("src", "myTiff_page" + currPage + ".tif");
});
});
</script>

Changing Display of Div not working correctly on iPad(8.0.1, Safari)

On a button click event in jQuery I have code that shows a div(and it's contents) which were previously set to 'display:none;". It works fine on all other browsers but not Safari on the iPad.
My code:
$(document).ready(function(){
<cfoutput>var cnt = #cnt#;</cfoutput>
$('##add_#dialog_label#_b').click(function() {
if (cnt < 10) {
cnt++
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "";
}
});
});
I've also tried all the following 'show' functions:
$("###dialog_label#_dv_"+cnt).fadeIn();
$("###dialog_label#_dv_" + cnt).css('display','inline');
$("###dialog_label#_dv_" + cnt).show();
Everyone one of which work fine on all other browsers. Also the dozens of hash tags are Coldfusion evaluations. Another possibly important note is this is all taking place within a modal window.

Credit goes to #Wolff here:
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "block";
This worked just fine on Safari. The apparent reasoning being that when I chose not to set display to any value (other than an empty string) it ignored the command. I don't understand whythe newest version of Safari on the newest version of iOS was refusing to do these things using jQuery, but I'm happy with this solution!
UPDATE: Still not working on the clients iPad. I'm at a loss.

Changing Background Image in IE 10 using javascript

I'm developing a web site these days, I developed a option for my site so users can change the background image.
I previously used windows 7 and XP, changing background image worked on both win 7 and XP's Internet Explorer but recently I moved to windows 8 which comes with IE 10, when I test my site with IE 10, changing background images doesn't work.
why are these guys changing these stuff? I shouldn't even care about this matter but still there are people who use IE. :(
here is my code
var body = document.getElementsByTagName("body")[0];
body.style.backgroundImage = "url(" + picurl + ")";
Any idea how it can be done with IE 10 ?

The code you provided is working for me in IE10. Incase your url has a space character,
Try this
body.style.backgroundImage = "url('" + picurl + "')";

If the image is already known in advance, it would reduce maintenance if you specified it in a class in a CSS file, and simply added a new class. In jQuery:
$(body).addClass('my-bgd-class');
However, since you're using a variable, you would do:
$(body).css('background-image', 'url("' + picurl + '")');

The code you've quoted works fine for me.
I've done a jsFiddle to prove it -- http://jsfiddle.net/Ryavz/
var picurl = "http://static.travelblog.org/Wallpaper/pix/waterfall_desktop_background-1600x1200.jpg"; //just a random image I found on the web
var body = document.getElementsByTagName("body")[0];
body.style.backgroundImage = "url("+picurl+")";
The above code works the same for me in IE10 and other browsers.
If there is a specific problem with your site in IE10, it's not with the code you quoted.
You probably should be adding quotes to the url() style parameter, in case the URL has a space or a bracket or something like that in it, but other than that, your code is fine, and it works for me in all browsers with or without quotes.

Print section of page script works perfectly in IE but problems in Firefox

In my battles to find a solution to printing just one area of the page that works within WordPress, I came across an excellent little script that meets my needs perfectly.. but only in IE browser. For some reason Firefox doesn't want to play ball.
The script is:
function printURL(sHref) {
if(document.getElementById && document.all && sHref) {
if(!self.oPrintElm) {
var aHeads = document.getElementsByTagName('HEAD');
if(!aHeads || !aHeads.length)
return false;
if(!self.oPrintElm)
self.oPrintElm = document.createElement('LINK');
self.oPrintElm.rel = 'alternate';
self.oPrintElm.media = 'print';
aHeads[0].appendChild(self.oPrintElm);
}
self.oPrintElm.href = sHref;
self.focus();
self.print();
return true;
}
else
return false;
}
Called by:
<a onclick="printURL(this.href); return false;" href="http://printstuff.com" target="_blank">print</a>
This is working in IE, but not FF. I don't know much about JavaScript, so would appreciate if you could tell me if there's anything you see that's giving Firefox headaches.
By the way - I have to go a javascript route instead of using a print CSS file, as the area I want to print (a coupon) is set in a table which is obviously set in the WordPress theme's container and wrapper divs which makes it difficult to isolate it for printing.
I've also experimented with iframe printing, which I made some headway with, but IE gives me problems there (rolleyes). So this script above seems a good answer to me, except Firefox does nothing when I click 'print'. Thanks a lot.

document.all tests false in all browsers other than IE. So your code is very explicitly only running the self.print() line in IE only.