Windows 8 Metro App - Button Background

[anton2k]

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

        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.

[sapator]

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).

[anton2k]

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.

[penagate]

Thread moved.

[anton2k]

Hi, penagate. You should also make a javascript/html/css > metro section as this is a javascript question, I think.

- Cheers Anton.

[penagate]

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):

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.

[anton2k]

Thanks for the reply penagate, could I also do this?

button.style.background = "url(http://www.website.com/logo.png') center center no-repeat";

Cheers - Anton.

[penagate]

Yeah, as long as you have the opening single quote as well.

[anton2k]

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.

 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.

[anton2k]

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.

    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;
                });

                
    }