Results 1 to 10 of 10

Thread: Windows 8 Metro App - Button Background

  1. #1

    Thread Starter
    Lively Member
    Join Date
    Feb 2008
    Posts
    107

    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.

  2. #2
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    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).
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  3. #3

    Thread Starter
    Lively Member
    Join Date
    Feb 2008
    Posts
    107

    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.

  4. #4
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    Re: Windows 8 Metro App - Button Background

    Thread moved.

  5. #5

    Thread Starter
    Lively Member
    Join Date
    Feb 2008
    Posts
    107

    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.

  6. #6
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    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.

  7. #7

    Thread Starter
    Lively Member
    Join Date
    Feb 2008
    Posts
    107

    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.

  8. #8
    I'm about to be a PowerPoster!
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,647

    Re: Windows 8 Metro App - Button Background

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

  9. #9

    Thread Starter
    Lively Member
    Join Date
    Feb 2008
    Posts
    107

    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.

  10. #10

    Thread Starter
    Lively Member
    Join Date
    Feb 2008
    Posts
    107

    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
  •  



Click Here to Expand Forum to Full Width