Programming4us
         
 
 
Programming

Coding JavaScript for Mobile Browsers (part 9) - Scripting Styles

1/15/2011 4:11:42 PM

4. Scripting Styles

Changing content with JavaScript is useful, but sometimes it’s easier to use styles from JavaScript to make things appear and disappear and change their appearance.

4.1. Changing styles

With DOM support, we can read and dynamically change every inner CSS style using style and its subproperties, like backgroundColor, textAlign, and margin. We can also change CSS styles using the className property of every element. Table 20 explores which browsers support changing the class, removing the class, and applying multiple classes using a space (e.g., class1 class2).

Table 20. Changing CSS dynamically compatibility table
Browser/platformSupport for changing styles and classes dynamically
SafariYes
Android browserYes
Symbian/S60Yes
Nokia Series 40No before 6th edition
webOSYes
BlackBerryNo before 4.6
NetFrontYes
Internet ExplorerYes
Motorola Internet BrowserPartial
Opera MobileYes
Opera MiniYes

4.2. Showing and hiding styles

Table 21 shows which browsers support showing and hiding block content using element.style.display='none' or element.style.display='block'. We can also use style.visibility, but in this case the block will still occupy the box without showing its contents.

Table 21. Showing and hiding elements compatibility table
Browser/platformSupport for showing/hiding content
SafariYes
Android browserYes
Symbian/S60Yes
Nokia Series 40No before 6th edition
webOSYes
BlackBerryNo before 4.6
NetFrontYes
Internet ExplorerYes
Motorola Internet BrowserNo
Opera MobileYes
Opera MiniYes

Other -----------------
- iPad SDK : Preparing Dudel for a New Tool (part 1) - Setting Up the GUI
- iPad SDK : The Structure of Core Text
- iPad SDK : PDF Generation
- jQuery 1.3 : Sorting and paging (part 5) - Finessing the sort keys
- jQuery 1.3 : Sorting and paging (part 4)
- jQuery 1.3 : Sorting and paging (part 3) - Using a comparator to sort table rows
- jQuery 1.3 : Sorting and paging (part 2) - JavaScript sorting
- jQuery 1.3 : Sorting and paging (part 1) - Server-side sorting
- Programming the Mobile Web : JavaScript Mobile - Supported Technologies
- Security in Cloud Computing (part 4) - Audit and Compliance
- Security in Cloud Computing (part 3)
- Security in Cloud Computing (part 2) - Identity and Access Management
- Security in Cloud Computing (part 1) - Data Security and Storage
- Cloud Security and Privacy : Analyst Predictions
- CSS for Mobile Browsers : WebKit Extensions (part 2) - Border Image
- CSS for Mobile Browsers : WebKit Extensions (part 1) - Text Stroke and Fill
- jQuery 1.3 : Working with numeric form data (part 9) - The finished code
- jQuery 1.3 : Working with numeric form data (part 8) - Editing shipping information
- jQuery 1.3 : Working with numeric form data (part 7) - Deleting items
- jQuery 1.3 : Working with numeric form data (part 6) - Finishing touches
 
 
Most View
- Exchange Server 2010 : Fundamentals and Components of Federated Delegation (part 4)
- Exchange Server 2010 : Designing and Implementing Message Classifications (part 1)
- SharePoint 2010 : Excel Services - Using the JavaScript Object Model
- Exchange Server 2010 : Manage Access for Mobile Devices (part 2) - Manage Mobile Device Features and Settings
- SQL Server 2008 Analysis Services : Understanding the SSAS Environment Wizards (part 1)
- Exchange 2007 : Choose a High Availability Solution
- Active Directory Domain Services 2008 : Transfer the PDC Emulator Role
- Exchange Server 2010 : Availability Planning for Mailbox Servers (part 1)
- Performing Administrative Tasks Using Central Administration (part 8)
- Windows 7 : Adding Folders and Files to the Default Website (part 2) - Changing the Default Website Home Page
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS