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

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

 

Cheers!

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
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