Feb22
CSS, HTML, Javascript, Web Development
While building a photo gallery for a client I ran into an issue where the photos took too long to load and clicking thumbnails before all the photos loaded resulted in ugly transitions.
My solution was to put a semi-transparent “shield” (containing a loading animation) over the gallery. The user will be able to see the images loading, but will be unable to click anything until all images are loaded and the shield is hiddenHere’s the finished product.
Explanation follows the code.
Here’s the html. This goes inside the div that contains your gallery.
<div id="gallery_loader"> <!-- wrapper for shield -->
<div></div> <!-- this is the actual shield -->
<img src="animated_loader.gif"><!-- image preloader -->
</div>…and the CSS:
#gallery_loader {
position:absolute; /* Position the wrapper at the top left corner */
top:0;
left: 0;
width:100%; /* cover the entire width of your gallery */
height:100%; /* cover the entire height of your gallery */
overflow:hidden; /* hide anything that might overflow */
z-index:999; /* make sure the shield is on top over everything */
}
#gallery_loader div { /* the actual shield */
position:absolute; /* Position the shield at the top left corner of the wrapper */
top:0;
left:0;
width:100%; /* Take up the entire wrapper */
height:100%; /* Take up the entire wrapper */
background: #fff;
opacity: .8; /* .8 = 80% opacity for all non-ie browsers*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* This and the next style are for IE */
filter: alpha(opacity=80);
}
#gallery_loader img {
position:relative;
display:block; /* Need this so we can center the image */
margin: 150px auto 0 auto; /* Set this to whatever looks good */
padding: 30px; /* Adjust to your needs */
background: #fff;
border: 1px solid #333;
-moz-border-radius:5px; /* Round corners in mozilla browsers */
-webkit-border-radius: 5px; /* Round corners for webkit browsers */
}Put this inside an included javascript file. This will wait until the page is loaded entirely (images and all) and then fade the loader out. Requires jquery.
$(window).bind("load", function() {
$('#gallery_loader').fadeOut();
});#gallery_loader is positioned absolutely and placed on top of everything else (z-index:999). It’s set to take up the entire width/height of its parent. Next comes the shield that will actually do the “blocking” of everything in the gallery. The shield is opacited and set to take up the entire width/height of the wrapper. Finally the animated loading image is loaded and centered.
As you can tell from the HTML, the actual shield is not the container of the loading animation gif. This is because the children of transparent elements can’t be more opaque than their parents. In other words if we put the loading image inside the transparent “shield” (which has an opacity of 80%) it would have a max opacity of 80%. To fix this we put the “shield” underneath the loading image and opacitate it. Here’s a good page on opacity.
Note: If you’re having issues where the loading gif isn’t loading immediately add this right after the opening of your body element
<body>
<img src="animated_loader.gif" style="display:none">
...
This will cause the loading gif to load first.
Here is where i obtained my loading gif
Feb11
Magento
- In the admin menu navigate to CMS -> Manage pages.
- Click Home page to edit it.
- Enter this code substituting The category id of the category you want to show for CATEGORY_ID
{{block type="catalog/product_list" category_id="CATEGORY_ID" template="catalog/product/list.phtml"}}To get the category id go to Catalog -> Manage Categories and click the category you wish to add to your homepage. The category id will be in parenthesis at the top (ID: XX)
Feb01
iPhone
For this work your phone must be jailbroken.
- Open itunes and go into preferences.
- Under the general tab click the import settings button and change import using to aiff encoder.
- Right click your text message sound (add the sound to your library if you haven’t already) and go to create aiff version.
- Rename the file to sms-received6.caf (if you need it).
- Using whatever method you want put the file into your iphone under /System/Library/Audio/UISounds/ (i use iphone explorer). Overwrite the old file.
- On your phone go to your text message sound settings and click the last text message sound. You should recognize it.
Dec31
CSS, Web Development
When styling a button using the sliding doors technique i found that firefox shifted the span down 1px, thus foiling the entire idea of sliding doors.
To fix it use this:
button::-moz-focus-inner { border: none;}
Dec27
Mac
- In safari (must use safari) go to pandora.com and login or signup
- Go to file->Open in dashboard
- Select the main pandora window and adjust the edges to fit the area you want
- Click Add on the top right of your screen
- On the widget click the i on the bottom right and uncheck the only play audio in dashboard option
Tip: To refresh the widget press CMD+R
Dec24
Apache, Web Development
Today while setting up an ssl certificate i obtained for my new installation of activecollab i ran into this error:
VirtualHost *:80 -- mixing * ports and non-* ports with a NameVirtualHost address is not supported, proceeding with undefined results
To fix this add this to the beginning of your virtual host
Also change
to
Then restart apache
Dec08
Mac, Web
By default when you’re tabbing through a form a Mac won’t stop on selects or checkboxes. To fix this open system preferences, and go to the keyboard section under hardware. Click “Keyboard Shortcuts” on the top. On the bottom of that page there is an option for “Full Keyboard Access”. Set it to all controls.
Nov22
Web Development
This tutorial is aimed at developers who just want wordpress to function as a lightweight CMS, that is wordpress will only be used for editing page content.
First install wordpress in whatever directory you want the admin to live. I chose /admin.
Any page that needs to use wordpress functionality you must add this:
require('/path/to/wp-blog-header.php');This gives you access to wordpress functions that we need:
- get_page – Get the page data from the database
- wpautop – Automatically add paragraph tags to page content
To get page content:
$page_data = get_page( 4 ); // Where 4 is the page ID in wordpress
There is a bug in certain versions of php, if you get the error:
Fatal error: Only variables can be passed by reference…
Then use this format instead:
$page_id = 4;
$page_data = get_page( $page_id );
$page_data now contains all of the info for that page, and is ready for use in your templates/views. Check the function reference to see the data you have available to you.
To display post_content use the wp function wpautop.
<?= wpautop($page_data->post_content) ?>
It’s simple!
Oct17
Mac
Finally, a way to make the home and end keys work on my mac (only cocoa apps) as they do on my pc. Put this file in /Library/KeyBindings/. Create the folder if it doesn’t exist. The keys will work the next time you open an application.
Oct16
Web
I recently had to do some work on a client’s facebook page. They wanted tabs created on their facebook fan page to hold some custom content. Here’s how to do it…
- Log in to the account that has admin rights to the fan page and do a facebook search for “fbml”
- Click “Add to page” on the top left
- In the box that pops up select the fan page you want it added to.
- On your fan page, hit “edit page”, located under your photo.
- Click the pencil next to the fbml application and choose “edit”
- Add your content (you can use normal html) and click “save changes”
- To add it as a tab, go back to the “edit page” screen and click the pencil next to your fbml application. Click “applications settings”, and finally “add” next to the tab option
