Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development


Thank you for visiting the BlackBerry Support Community Forums.

BlackBerry will be closing the BlackBerry Support Community Forums Device Forums on April 1st (Developers, see below)

BlackBerry remains committed to providing excellent customer support to our customers. We are delighted to direct you to the CrackBerry Forums, a well-established and thorough support channel, for continued BlackBerry support. Please visit http://forums.crackberry.com or http://crackberry.com/ask. You can also continue to visit BlackBerry Support or the BlackBerry Knowledge Base for official support options available for your BlackBerry Smartphone.

"When we launched CrackBerry.com 10 years ago, we set out to make it a fun and useful destination where BlackBerry Smartphone owners could share their excitement and learn to unleash the full potential of their BlackBerry. A decade later, the CrackBerry community is as active and passionate as ever and I know our knowledgeable members and volunteers will be excited to welcome and assist more BlackBerry owners with their questions."

- Kevin Michaluk, Founder, CrackBerry.com

Developers, for more information about the BlackBerry Developer Community please review Join the Conversation on the BlackBerry Developer Community Forums found on Inside BlackBerry.


Reply
New Contributor
Posts: 4
Registered: ‎07-14-2010
My Device: Blackberry 9700
My Carrier: Orange

Load different CSS stylesheets for different screen sizes on widget

Hi

 

I have a widget form with CSS styles, i need to adapt it to the 9700 (480 px) and the 8520 (320 px)

 

I could create different CSS files (or sections on a CSS file) to adapt the objects (input elements) to the screen size

 

but how can I load them??

 

thanks in advance

 

Jose Suero

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Load different CSS stylesheets for different screen sizes on widget

You could run JavaScript to detect the screen size and then insert a <style> or <link> element into the head of the document that will then load and apply the appropriate style.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
New Contributor
Posts: 7
Registered: ‎06-03-2010
My Device: 9700 Bold
My Carrier: None

Re: Load different CSS stylesheets for different screen sizes on widget

here is how i have this configured in my app:

 

// I have this placed in the top of my global.js file. "default" value is for when previewing or coding

// in a web browser.

 

 

var modelNumber = "default"
try { modelNumber = blackberry.system.model }
catch (err) { }

 

 

 

// I have an Initialization routine that fires from teh body onLoad event which

// is where i put this code

 

 

    var loadCSS = function (file) {
        var link = document.createElement('link');
        link.href = file;
        link.rel = 'stylesheet';
        link.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(link);
    };

 


   // Basically, i have a css file for each model that gets loaded during initialization.

 

   // You can use a switch and case each model with a default fallthrough

 

if (modelNumber != "default") {

        loadCSS('bb' + modelNumber + '.css');

    } 

 

 

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Load different CSS stylesheets for different screen sizes on widget

Thanks BradThor66!

 

That is a great detailed example on how to accomplish this task Smiley Happy

 

Cheers!

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Highlighted
New Developer
New Developer
Posts: 3
Registered: ‎11-03-2010
My Device: Blackberry smartphone 8330
My Carrier: Beill

Re: Load different CSS stylesheets for different screen sizes on widget

Is there HTML or JavaScrip code can be embeded in HTML file to detect, if it is Blackberry, using another CSS file, or relocation to another HTML. I tried  "window.location="another.html", it didn't relocate to another.html