How to Detect iPhone with JavaScript

By Mika | Published: 03/09/2010

Use Javascript to detect then apply different style for iPhone.

JavaScript

  1.  
  2. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  3.     if (document.cookie.indexOf("iphone_redirect=false") == -1) {
  4.         window.location = "http://yoursite.com/iphone";
  5.     }
  6. }
  7.  
Posted in JavaScript | Tagged , , | 1 Comment

Basic Default CSS Print Template

By Mika | Published: 02/23/2010

CSS

  1.  
  2. /* Set default width, margin, float, and
  3.    background.  */
  4. body, #wrap, #content, #container, {
  5.    width: 100%;
  6.    margin: 0;
  7.    float: none;
  8.    background: #fff url(none);
  9. }
  10.  
  11. /* Remove any elements not needed in print.
  12.    This would include navigation, ads, sidebars, etc. */
  13. #nav, .noprint, #footer {
  14.    display: none;
  15. }
  16.  
  17. /* Set body font face, size, and color.
  18.    Consider using a serif font for readability. */
  19. body {
  20.    font: 1em Arial, "Times New Roman", Times, serif;
  21.    color: #000;
  22. }
  23.  
  24. /* Set heading font face, sizes, and color.
  25.    Diffrentiate your headings from your body text.
  26.    Perhaps use a large sans-serif for distinction. */
  27. h1,h2,h3,h4,h5,h6, p, span {
  28.    font-family: Georgia, Arial, sans-serif;
  29.    color: #000;
  30. }
  31. h1 { font-size: 250%; }
  32. h2 { font-size: 175%; }
  33. h3 { font-size: 135%; }
  34. h4 { font-size: 100%; font-variant: small-caps; }
  35. h5 { font-size: 100%; }
  36. h6 { font-size: 90%; font-style: italic; }
  37.  
  38. /* Make hyperlinks more usable.
  39.    Ensure links are underlined, and consider appending
  40.    the URL to the end of the link for usability. */
  41. a:link, a:visited {
  42.    color: #ff9900;
  43.    text-decoration: underline; }
  44.    
  45. #content a:link:after, #content a:visited:after {
  46.    content: " (" attr(href) ") ";
  47. }
  48.  

HTML

  1.  
  2. <link rel="stylesheet" href="print.css" type="text/css" media="print" />
  3.  
Posted in CSS | Tagged , , , , , | 4 Comments

Simple and Smooth Expand and Collapse with jQuery

By Mika | Published: 01/26/2010

HTML example

  1.  
  2. <h2 class="myClass" id="trigger1">Click here to expand</h2>
  3. <div class="hide-container">
  4.      <p>Here goes whatever you want to expand/collapse</p>
  5.      <p>Here goes whatever you want to expand/collapse</p>
  6.      <p>Here goes whatever you want to expand/collapse</p>
  7.      <p>Here goes whatever you want to expand/collapse</p>
  8. </div>
  9.  

CSS

  1.  
  2. .myClass {font-size:20px; color: #FF0000;}
  3. div#hide-container {width: 500px; height: 300px; background-color: #ccc;}
  4.  

jQuery

  1.  
  2. <script>
  3. $(document).ready(function(){
  4.  
  5.         //Hide (Collapse) the toggle containers on load
  6.         $(".hide-container").hide();
  7.        
  8.         //Switch the "Open" and "Close" state per click
  9.         $("#trigger1").toggle(function(){
  10.                 $(this).addClass("active");
  11.                 }, function () {
  12.                 $(this).removeClass("active");
  13.         });
  14.  
  15.        //Slide up and down on click
  16.         $("#trigger1").click(function(){
  17.                 $(this).next(".hide-container").slideToggle("slow");
  18.         });
  19. </script>
  20.  
Posted in jQuery | Tagged , , , , | Leave a comment

how to disable the Autoresponder for Web Forms – Business Catalyst/GoodBarry

By Mika | Published: 01/10/2010

Just add &SAR=False to the form code:

HTML:

  1.  
  2. <form name="catwebformform47565" method="post" onsubmit="return checkWholeForm47565(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=12374&amp;OID={module_oid}&amp;OTYPE={module_otype}&amp;EID={module_eid}&amp;CID={module_cid}&amp;SAR=False">
  3.  
Posted in Business Catalyst / GoodBarry | Tagged , , , , | Leave a comment

How to Change the Default Text Selection Color with CSS

By Mika | Published: 12/13/2009

HTML Example

  1.  
  2. <p class="selectionBlue">Testing blue selections.</p>
  3.  

CSS 3

  1.  
  2. .selectionBlue::selection {
  3.         background: #0000FF; /* Safari */
  4.         }
  5. .selectionBlue::-moz-selection {
  6.         background: #0000FF; /* Firefox */
  7. }
  8.  
Posted in CSS | Tagged , , , | Leave a comment

Alert Box on iPhone – Xcode

By Mika | Published: 12/11/2009

Example:

  1.  
  2. UIAlertView *someError = [[UIAlertView alloc] initWithTitle: @"Network error" message: @"Error sending your info to the server" delegate: self cancelButtonTitle: @"Ok" otherButtonTitles: nil];
  3.  
  4. [someError show];
  5. [someError release];
  6.  
Posted in iPhone Xcode - Objective C | Tagged , , , | 10 Comments

How to Flipping a View on iPhone SDK

By Mika | Published: 12/11/2009

Objective C

  1.  
  2. - (void) flipView {
  3.         [UIView beginAnimations:nil context:NULL];
  4.         [UIView setAnimationDuration:kTransitionDuration];
  5.                
  6.         [UIView setAnimationTransition:([mainView superview] ?
  7.                                 UIViewAnimationTransitionFlipFromLeft : UIViewAnimationTransitionFlipFromRight)
  8.                                 forView:self.view cache:YES]
  9.        
  10.         if ([flipView superview])
  11.         {
  12.                 [flipView removeFromSuperview];
  13.                 [self.view addSubview:mainView];
  14.         }
  15.         else
  16.         {
  17.                 [mainView removeFromSuperview];
  18.                 [self.view addSubview:flipView];
  19.         }
  20.                
  21.         [UIView commitAnimations];
  22. }
  23.  
Posted in iPhone Xcode - Objective C | Tagged , , , , , | 1 Comment

How to Rename /Duplicate iPhone Project in Xcode 3.x

By Mika | Published: 12/11/2009

Rename iPhone Project Step by Step:

 

1. Copy/rename the folder into new name.

2. Get inside the new folder and rename the .pch and .xcodeproj files.

3. Delete the build folder.

4. Open .xcodeproj file in text editor, like TextMate or TextWrangler. That’s actually a folder, which contains 4 files (you can also right-click and do Show package contents, which will reveal the files)

5. Open project.pbxproj in text editor and replace all instances of the old name with the new name.

6. Load the project file in XCode, do Build/Clean all targets.

 

 

Posted in iPhone Xcode - Objective C | Tagged , , , , | 4 Comments

How to show/hide div with HTML and CSS only – Toggle visibility with CSS

By Mika | Published: 12/08/2009

HTML Example:

  1.  
  2. <a onclick="document.getElementById(‘myDiv’).style.display=’block’;" href="javascript:void(0)">Click Here to show  my div</a></div>
  3. <div class="anyclass" id="myDiv">
  4. <p>Here goes the content you want to toggle the visibility</p>
  5. <a onclick="document.getElementById(‘myDiv’).style.display=’none’;" href="javascript:void(0)">Close [x]</a>
  6. </div>
  7.  
Posted in CSS | Tagged , , , , , | 2 Comments

How to set more than one event/option – jQuery Accordion

By Mika | Published: 11/25/2009

In The example below we set the mouseover event, auto height option as false and starts with the 3rd selector opened. (The index is a zero-indexed number to match the position of the header)

 

JavaScript

  1.  
  2. <script type="text/javascript">
  3.         $(function() {
  4.                 $(‘.subnav-rhs’).accordion({event: ‘mouseover’, autoHeight: false, active: 2});
  5.         });
  6. </script>
  7.  
Posted in jQuery | Leave a comment