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 -----------------
- Coding JavaScript for Mobile Browsers (part 8) - DOM
- iPad SDK : Preparing Dudel for a New Tool (part 1) - Setting Up the GUI
- Coding JavaScript for Mobile Browsers (part 7)
- Coding JavaScript for Mobile Browsers (part 6)
- 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
- Coding JavaScript for Mobile Browsers (part 5)
- Coding JavaScript for Mobile Browsers (part 4)
- Coding JavaScript for Mobile Browsers (part 3) - Writing to the document
- Coding JavaScript for Mobile Browsers (part 1) - Standard dialogs
- Coding JavaScript for Mobile Browsers (part 1) - Code Execution
- 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
 
 
Most View
- Configuring Windows 7 for Secure Networking
- Developing an SEO-Friendly Website : Keyword Targeting (part 1) - Title Tags
- Windows Server 2008 R2 : Installing Windows SharePoint Services (part 1)
- SOA with .NET and Windows Azure : Windows Workflow Foundation (part 4) - Activities
- Microsoft Dynamics GP 2010 : Populating Initial Data - Open receivables transactions
- Exchange 2007: Choose the Right Hardware for the Role
- Windows 7 : Securing the File System - Encrypting Files and Folders
- Identity and Access Management : Trust Boundaries and IAM
- ASP.NET Security : Security-Related Controls (part 2)
- SQL Server 2008 : SQL Server Profiler Architecture
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