Archive for the ‘Solutions’ category

« Older Entries

Using JavaScript/jQuery to match a word in the URL string and apply CSS accordingly

October 16th, 2012

Styling based on window

A little back story into why I am writing this little post:

I am currently working on a web app that requires different functionality and styling between desktop and mobile views (Yes, I’m talking responsive here :D ). I ran into some trouble with the “mobile menu” view – the menu gets hidden for mobile to make space for content (UX win!) which the user can then call back into view via a button that is only visible in mobile. Pretty standard stuff right?
» Read more: Using JavaScript/jQuery to match a word in the URL string and apply CSS accordingly

No comments »

Posted in Solutions

Tags:

HTML emails only displaying partially on iOS email client

September 5th, 2012

While using the native email clients for the iPhone and iPad, I noticed that in most emails only displayed a small segment of the HTML. When this happens, it renders the loaded portion of the email with a button at the bottom which reads: “Download remaining xx bytes.” Often this button appears below the fold, making it easy to miss.

The reason for this is that for native iOS email clients you must have a minimum 1,019 characters before your closing head tag (</head>) in your HTML.

You can do this 3 ways:

  1. Try inserting several lines of empty spaces.
  2. Remove the <head> tag completely. Be careful with this solution, some email service providers might place head tags within your email dynamically.
  3. Put some fake CSS in the header – <style type=text/css> … </style> – and fill it up with CSS to make up the extra required characters. This is probably the most fool-proof method as it wont be stripped out or replaced dynamically.

No comments »

Posted in Solutions

iPad automatically resizing text in HTML emails

August 13th, 2012

iPad and iPhone tends to automatically resize curtain text in HTML emails / newsletters.

This happens even when a specific font-size is set in the inline style tag:

style=”font-family:Arial, Geneva, sans-serif; font-size: 12px; color: #1498d2; font-weight: bold;”

By default, Apple sets the minimum font size in an HTML email to 15px.

The solution is to add the following CSS rule at the end of the inline style tag of every element that has a text-size of less than 15px in the HTML email:

-webkit-text-size-adjust: none;

So a full element tag will look like this:

<td align=”center” valign=”top” bgcolor=”#ffffff” style=”font-family:Arial, Geneva, sans-serif; font-size: 12px; color: #cccccc; -webkit-text-size-adjust: none“>Dear Name,</td>

This will force the text-size to 12px on Apple devices, with no automatic text-adjusting.

No comments »

Posted in Solutions

Sharepoint deleting ‘src’ tag content from HTML when images are not uploaded

May 22nd, 2012

I was doing some HTML the other day, and while I was writing the markup, I realised that I haven’t uploaded the images used in it to the SiteCollection.

No big deal, I thought, as I will just upload them afterwards.

So from my local HTML build, I put the markup into Sharepoint. After uploading the images, though, I noticed that none of them were displaying.

After a brief look at my HTML in Sharepoint, I noticed that all the <img src=”pathToImage”> tags were empty, like so – <img src=”">

Lesson learned – upload images 1st, as Sharepoint simply strips out any reference to images it cannot find within the SiteCollection.

No comments »

Posted in Solutions

How to fix z-index in YouTube iframes

January 25th, 2012

Ever noticed how the highest possible z-index gets assigned to embedded Youtube iframes? It cases a real headache if you have a modal popup on the page, as the popup, which should obviously be on top of the page contents, sits underneath the iframe.

Here’s how to fix it – simply add ?wmode=transparent to the video URL.

<iframe type="text/html" width="520" height="330"
src="http://www.youtube.com/embed/videoURL?wmode=transparent"
frameborder="0"></iframe>

No comments »

Posted in Solutions

Disable links with CSS

December 22nd, 2011

The attribute – disabled=”disabled” – does not work with elements other than form elements (submit, text-fields etc).

Trying to add this attribute to a link styled as a button does not work. Here is the workaround:

Set up your style for the link button, an active and disabled state. In this example Active will be normal (class=”btn”) and Disabled (class=”btn disabled”) will be greyed out.

To deactivate the button, add this to your disabled class (along with the rest of your styling for the button):

.disabled {
pointer-events: none;
cursor: default;
}

» Read more: Disable links with CSS

No comments »

Posted in Solutions

DevExpress controls: The ‘Microsoft.Jet.OLEDB.4.0′ provider is not registered on the local machine on 64bit machine.

December 1st, 2011

Error

PROBLEM

Installing DevExpress controls apparently this problem you get with Telerik controls (RadControls) as well on a 64-bit machine and running the examples that use Access as its database may cause the following error above even if you have the Microsoft.Jet.OLEDB.4.0 provider installed.

DESCRIPTION

This problem comes from the fact that the MS Jet engine (the DB engine behind Microsoft Access) does not have a 64-bit port. Running on a 64-bit machine will default to a 64-bit web application pool and it will not be able to find the 32-bit version of the Jet engine component.

SOLUTION

The solution is to configure the application pool and enable 32-bit application support. For IIS 7, running on Windows 7, you can do this from the application pool’s advanced settings dialog:

Photobucket

2 comments »

Posted in Solutions

Tags:

CSS3 box-sizing property

November 28th, 2011

An interesting CSS3 property that I have found to be very useful is the ‘box-sizing’ property.

This has two official values:
- content-box
- border-box
» Read more: CSS3 box-sizing property

No comments »

Posted in Solutions