Alpha Video Training
Results 1 to 7 of 7

Thread: Change panel background image on orientation change

  1. #1
    Member
    Real Name
    David Dukes
    Join Date
    Dec 2012
    Location
    Florida, USA
    Posts
    75

    Default Change panel background image on orientation change

    Does anyone know how to set the background image for a panel programmatically? I want to be able to change the panel's background image on an orientation change. I can emulate the effect by using two panels inside a orientation change navigator but that resets the app when changing the orientation within a child component which is not what I'm looking for. Any help would be appreciated.

  2. #2
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,819

    Default Re: Change panel background image on orientation change

    The UX Component has a Client side event named onOrientationChange. In here you could do something like...

    Code:
    switch(e.orientation)
    {
    case "portrait":
      $("{dialog.ComponentName}.R1.PANEL.0.BODY").style.backgroundImage = "url(http://localhost:81/LivePreview/Images/01674b02.jpg);"
      break;
    case "landscape":
      $("{dialog.ComponentName}.R1.PANEL.0.BODY").style.backgroundImage = "url(http://localhost:81/LivePreview/Images/01669b04.jpg);"
      break;
    }
    That was a very cool question... thanks for that.

  3. #3
    Member
    Real Name
    David Dukes
    Join Date
    Dec 2012
    Location
    Florida, USA
    Posts
    75

    Default Re: Change panel background image on orientation change

    Perfect! Thanks David. I played around with the onOrientationChange event but couldn't figure out how to reference the background image property. I'm just coming over to Alpha from Access and have a lot to learn about xBasic, Javascript, and HTML. Most of it is pretty straightforward but my biggest challenge has been determining how to reference the various controls and components. There doesn't seem to be much documentation on the subject and unfortunately, I haven't been getting many responses to my posts. Thank you so much for replying.

  4. #4
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,819

    Default Re: Change panel background image on orientation change

    Chrome and Firefox are very useful for finding component information and how properties may be set. Firefox Firebug is essential. In this case I did a Live Preview under Chrome. Then a right-click Inspect Element on the background of the panel which produced this parent div...

    Code:
    <div id="DLG1.R1.PANEL.0.BODY" a5customscroll="0,0" a5dragscrolldisabled="false" a5hasdrag="true" class="GrGrayPanelBody" a5abstevntd="true" style="background-image: url(http://localhost:81/LivePreview/Images/01674b02.jpg); background-size: cover; position: relative; overflow: hidden; -webkit-user-select: none; box-sizing: border-box; height: 418px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">...
    I saw I was working with DLG1.R1.PANEL.0.BODY so I knew I was in the right spot. Now that I have the right ID I can work with the style object.

    Replace DLG1 with the Alpha Placeholder and you're done.

  5. #5
    Member
    Real Name
    David Dukes
    Join Date
    Dec 2012
    Location
    Florida, USA
    Posts
    75

    Default Re: Change panel background image on orientation change

    Very useful information... thanks for the advice.

  6. #6
    Member
    Real Name
    Carlos Alvarez
    Join Date
    Jun 2014
    Location
    Portugal
    Posts
    165

    Default Re: Change panel background image on orientation change

    I followed the above example, that works fines except for the fact that when in a larger screen as in iphone 5 or ipad, i get several images instead of only one centered image. Is there a way to avoid that ?

    fruit.png


    switch(e.orientation)
    {
    case "portrait":
    $("{dialog.ComponentName}.R1.PANEL.0.BODY").style.backgroundImage = "url(http://localhost:8080/LivePreview/dietP.png);"
    break;
    case "landscape":
    $("{dialog.ComponentName}.R1.PANEL.0.BODY").style.backgroundImage = "url(http://localhost:8080/LivePreview/dietL.png);"
    break;
    }
    thanks for your help

  7. #7
    Member
    Real Name
    Carlos Alvarez
    Join Date
    Jun 2014
    Location
    Portugal
    Posts
    165

    Default Re: Change panel background image on orientation change

    i added a couple more lines to the javascript to center it and not repeat the image.

    Code:
    switch(e.orientation)
    {
    case "portrait":
      $("{dialog.ComponentName}.R1.PANEL.0.BODY").style.backgroundImage =  "url(http://localhost:8080/LivePreview/dietP.png);"
      $("{dialog.ComponentName}.R1.PANEL.0.BODY").style.backgroundPosition = "center";  
      $("{dialog.ComponentName}.R1.PANEL.0.BODY").style.backgroundRepeat = "no-repeat";  
      break;
      
    case "landscape":
      $("{dialog.ComponentName}.R1.PANEL.0.BODY").style.backgroundImage =  "url(http://localhost:8080/LivePreview/dietL.png);"
      $("{dialog.ComponentName}.R1.PANEL.0.BODY").style.backgroundPosition = "center";  
      $("{dialog.ComponentName}.R1.PANEL.0.BODY").style.backgroundRepeat = "no-repeat";  
      break;
    }
    fruta.png

Similar Threads

  1. Dynamically change background color of cell
    By lgrupido in forum Application Server Version 10 - Web/Browser Applications
    Replies: 2
    Last Post: 09-16-2011, 04:33 PM
  2. How do you change the background colour of a Button?
    By Keith Hubert in forum Application Server Version 10 - Web/Browser Applications
    Replies: 2
    Last Post: 07-28-2011, 04:25 PM
  3. Change Background color with xbasic
    By crimmelcp in forum Alpha Five Version 7
    Replies: 2
    Last Post: 03-16-2006, 09:28 AM
  4. change font color and background
    By Romy Huang in forum Alpha Five Version 5
    Replies: 8
    Last Post: 12-17-2004, 08:03 AM
  5. change form background colour
    By Jeremy Packman in forum Alpha Five Version 4
    Replies: 13
    Last Post: 08-27-2000, 04:00 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •