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.
Related
Please see the code below (very stripped back and not my full function). I've also got a fiddle that you can test it at: https://jsfiddle.net/glenn2223/uk7e7rwe/1/
var
hov = $("<div class=\"over\">I'm Over You</div>"),
box = $("<div>Result: WAITING</div>")
$("body").append(hov).append(box);
$("#MeHover").on('mouseleave', function(){
var d = new Date();
box.text("Result: " + hov.is(":hover").toString().toUpperCase() );
});
We have a div and div.over overlaps it slightly. When you move from div to div.over I want the function to return true.
In my full function: this stops it from hiding the div.over element.
Opening it in Chrome it works as expected. However, it's not in pretty much everything else (Tested in: Edge, IE11 and Firefox).
Okay so we've found out why it doesn't work the :hover was removed from .is() a while back.
Rather than changing this question to suit my findings I will ask another (saves confusion).
My New Question: Keep jQuery Appended Element Open When Hovering It
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/
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.
I have following question.
My page contains some custom javascript, which adds tags, images etc.
A simplest example which I have is:
function handleIMGDown(index, source)
{
var filename = source.substring(source.lastIndexOf('/')+1);
var source_input = document.getElementById("imageLoader" + index);
var image = new Image();
image.src=source;
source_input.parentNode.insertBefore(image, source_input);
source_input.parentNode.removeChild(source_input);
return true;
}
So when I load image with this, I get:
http://img141.imageshack.us/img141/9141/screenshot1352718777001.png
Can anyone help me to workaround this?
Wow... seems I found what's wrong.
I made my WebView transparent, and that seems to be the issue. When setting WebView's background color to any other than 0x00000000, problems disappear.
It's still unclear to me, why content doesn't get updated if background is transparent. Seems some lazy developers forgot this xD
I have built a web application using jQuery and it is working perfectly in a browser on a computer but I can not for the life of me get it to work on my mobile iPad. It is a critical part of the website and expect a lot of traffic coming from mobile devices so I really need this to work. I am very very new to programming so any help is appreciated getting this to work :). Thanks!
I am working in Drupal to lay out my website so jQuery is written out instead of the $ sign. The javascript wont work if i do not write it out.
Here is the web application working on the computer :
http://www.famousartistprints.com/content/select-house-design
Here is the code:
<div id="settingHeight"><ul data-role="listview" id="list" class="tilelist" > </ul><div>
jQuery(document).ready(function() {
jQuery.get('http://www.famousartistprints.com/xml/designs.xml',function(data){
jQuery(data).find('slide').each(function(){
var slide = jQuery(this);
var caption = slide.find('caption').text();
var source = slide.find('source').text()
var html = '<li class="mySlides"><a href="' + caption + '_Letterpress_Wedding_Invitation"><img src="/sites/aerialist.localhost/files/images/selectThumbs/' + source + '"/><p>' + caption + '</p><a>';
jQuery('#list').append(html);
jQuery('#list').hide();
jQuery('#list').fadeIn(800);
});
return false;
});
});
It's probably because of the way different browsers handle syntax errors, which your code has.
Even if you run this on the desktop, notice that the browser console tells you about a syntax error on line 584. Fix this and you should be ok.