-
Jul 25th, 2012, 10:24 AM
#1
Thread Starter
Lively Member
Windows 8 Metro App - Button Background
Hey guy's at a total loss as to what is causeing this problem
Problem Description:
Trying to set a <button> tags inline style background to a url. Here is the full code.
NOTE: THe background image is just a sample image, I have also tried this locally i.e. C:\image.jpg
Code:
document.getElementById("theText").innerHTML = document.getElementById("theText").innerHTML + window.toStaticHTML("<button id='buttonBox' style='width:185px; height:274px; margin-left:15px; margin-right:15px; margin-top:0px; margin-bottom:0px; background:url(C:\Users\Anton\Documents\Visual Studio 2012\Projects\MetroApp1\MetroApp1\images\logo.png) no-repeat; background-position:center;'></button>");
Also if that's ^^^^ to hard to read here is a patebin link http://pastebin.com/9C3T0nzC
TIA - Anto.
Last edited by anton2k; Jul 25th, 2012 at 10:32 AM.
-
Jul 25th, 2012, 06:46 PM
#2
Re: Windows 8 Metro App - Button Background
Hi please check if you get the button at all because (i assume u use asp.net) asp.net has some issues in that department.
Also Windows8 is the worst thing i have ever seen in my life,well after Windows millennium.I just hope i never have the "pleasure" to user them(ok in a mobile app there is no way on earth but if they continue this on Windows9, i will start learning Linux).
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Jul 25th, 2012, 06:59 PM
#3
Thread Starter
Lively Member
Re: Windows 8 Metro App - Button Background
Thanks for the reply. I am using only css javascript and html, that's it, as far as I know any way. I think windows 8 once you get used to it becomes good after a while, metro is defiantly only for tablets though, the desktop part of windows it is just a more optimized version of windows 7 IMO that works well, I have quite enjoyed using it over the past few days, first time I used metro I was like *** back when the first release came out / got leaked but since then its grew on me, a bit like the windows 7 taskbar lol. oh and yea the buttons are being displayed I have since changed the buttons to images i.e. <img> I have also found out you cant just link to resoucres like http etc it has to go through some secure sh** first before I can do any thing, trying to find exactly what I need to do is proving difficult, I think it may have something to so with setStaticHtml stripping out any urls
Cheers - Anton.
-
Jul 25th, 2012, 08:44 PM
#4
Re: Windows 8 Metro App - Button Background
-
Jul 25th, 2012, 10:38 PM
#5
Thread Starter
Lively Member
Re: Windows 8 Metro App - Button Background
Hi, penagate. You should also make a javascript/html/css > metro section as this is a javascript question, I think.
- Cheers Anton.
-
Jul 25th, 2012, 11:05 PM
#6
Re: Windows 8 Metro App - Button Background
Perhaps it is, perhaps it isn't... either way, since you're working with Metro, I felt this was the appropriate section.
Now that I'm looking at your problem more closely, I suspect the issue is that you need to add the file:// protocol prefix to background image URI.
Also, this is how I would create the element (in a normal browser environment):
Code:
var button = document.createElement('button');
button.id = 'buttonBox';
button.style.width = '185px';
button.style.height = '274px';
button.style.marginLeft = '15px';
button.style.marginTop = '0';
button.style.marginRight = '15px';
button.style.marginBottom = '0';
button.style.background = "url('file:///c:/Users/Anton/Documents/Visual Studio 2012/Projects/MetroApp1/MetroApp1/images/logo.png') center center no-repeat";
document.getElementById("theText").appendChild(button);
The advantage of this method is that it is far easier to spot syntax errors, where using innerHTML would silently fail.
However, I don't know if there are any caveats specific to Metro that would prevent this from working.
Also, you may simply be able to use a relative path to the image, rather than an absolute one.
-
Jul 26th, 2012, 08:58 AM
#7
Thread Starter
Lively Member
Re: Windows 8 Metro App - Button Background
Thanks for the reply penagate, could I also do this?
Code:
button.style.background = "url(http://www.website.com/logo.png') center center no-repeat";
Cheers - Anton.
-
Jul 26th, 2012, 09:13 AM
#8
Re: Windows 8 Metro App - Button Background
Yeah, as long as you have the opening single quote as well.
-
Jul 26th, 2012, 09:34 AM
#9
Thread Starter
Lively Member
Re: Windows 8 Metro App - Button Background
Oh yea lol didn't see that. Ok so I tried this with no luck, I don't see what it is I am doing wrong.
Code:
function setSrc() {
document.getElementById("theText").innerHTML = document.getElementById("theText").innerHTML + window.toStaticHTML
("<img id='picBox' style='width:185px; height:274px; margin-left:15px; margin-right:15px; margin-top:0px; margin-bottom:0px;'></img>");
var theElement = document.getElementById("picBox");
theElement.style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Apple-logo.svg/125px-Apple-logo.svg.png') center center no-repeat";
}
Don't get any images instead I get this weird looking thing. I believe it might be the metro icon for no image? like the red cross you get in web browsers. Though I seem to remember getting a red cross before, so maybe this icon represents something else. Here is the image.
Cheers - Anton.
-
Jul 26th, 2012, 05:03 PM
#10
Thread Starter
Lively Member
Re: Windows 8 Metro App - Button Background
Found a solution, quite simple but I also feel un necessary, metro has allot of programming restrictions than I first though, Microsoft have limited what you can do.. any way here is the solution.
Code:
function setSrc() {
document.getElementById("theText").innerHTML = document.getElementById("theText").innerHTML + window.toStaticHTML
("<img id='picBox' style='width:185px; height:274px; margin-left:15px; margin-right:15px; margin-top:0px; margin-bottom:0px;'></img>");
WinJS.xhr({ url: "http://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Apple-logo.svg/125px-Apple-logo.svg.png", responseType: "blob" })
.done(
function (request) {
var imageBlob = URL.createObjectURL(request.response);
document.getElementById("picBox").src = imageBlob;
});
}
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|