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
 
 
Video tutorials
- How To Install Windows 8 On VMware Workstation 9

- How To Install Windows 8

- How To Install Windows Server 2012

- How To Disable Windows 8 Metro UI

- How To Change Account Picture In Windows 8

- How To Unlock Administrator Account in Windows 8

- How To Restart, Log Off And Shutdown Windows 8

- How To Login To Skype Using A Microsoft Account

- How To Enable Aero Glass Effect In Windows 8

- How To Disable Windows Update in Windows 8

- How To Disable Windows 8 Metro UI

- How To Add Widgets To Windows 8 Lock Screen
programming4us programming4us
 
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
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS