To make a expanding FAQ style section, first make a simple definition list with terms and definitions. Give the list an id of ‘faq’. The code should look something like this:
[HTML]
- FAQ 1
- Answer 1
- FAQ 1
- Answer 1
- FAQ 1
- Answer 1
[/HTML]
Make sure you have included jQuery and then use the following code
[JS]
[/JS]
This will make a simple toggle open/close on each FAQ.
We can take this one step further and make the FAQs slide up and down. Also included in the code below is having the first one open and all the others close when you open a new one.
[JS]
[/JS]
14. April 2011 by Mike
Categories: Javascript |
Tags: animation, definition, faq, html, jquery, sliding, toggle |
Leave a comment
If you would like to limit the amount of items coming out of an array (for example the first 5 news items), then before your loop (e.g. while), specify your start and finish points
[PHP]
$A = array_slice($A, START, END);
while $A {
[/PHP]
For example, if you did want to only pull out the first 5 news items in an array, you would:
[PHP]
$news_items = array_slice($news_items, 0, 5);
while $news_items {
[/PHP]
10. March 2011 by Mike
Categories: PHP |
Tags: array, limit, loop, php, slice |
Leave a comment
If you would like to ‘redirect’ all your users to a central domain (for example if you would like all users to browse your site with the www or you have several parked domains) then paste the following code into your .htacces file (normally located in the root) – works on Linux servers with cPanel.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !=www.codehorse.co.uk
RewriteRule ^(.*)$ http://www.codehorse.co.uk/$1 [L,R=301]
</IfModule>
Change the domain where appropriate. In English this says if its not codehorse.co.uk then redirect to codehorse.co.uk.
This is especially good for SEO purposes as it means google does not see duplicate content if you have several parked domains, or if you have flash on your website which generally requires the www. prefix to work
21. February 2011 by Mike
Categories: HTML/CSS |
Tags: central domain, flash, google, Htaccess, redirect, seo, URL |
Leave a comment
This simple PHP statement applies class=”even” to every other element when in a loop.
I often use this on tables to get an even class to help devide up the rows, but it can also be used to add a class to the 4th item in a list (if you want to remove certain margin/padding for example).
To start, ‘clear’ i and make it 0. (if $i is already used elsewhere in your code, you can replace it with anything)
[PHP]$i=0;[/PHP]
Then once in the loop, use/adapt the following code to achieve the desired result (have broken it up into seperate lines to add comments. The single line code is included after)
[PHP]
echo $i++ % 2 ? //if $i divided by 2 has no remainder
' class="even"' : //then echo this result
''; //if not echo this result
?>
[/PHP]
the number 2 can be replaced with what ever number item you want the class. And if you already have existing classes on your item, then remove the class=”" and just have the class name.
The code as a single line:
[PHP]
[/PHP]
16. February 2011 by Mike
Categories: PHP |
Tags: class, css, if statement, loop, php |
Leave a comment
If you want to apply a different class to the last item in a list generated by PHP, start off with Setting the $lastOne variable to the end of your list
$lastOne = end($A);
This stores the details of the last one in your list into the lastOne variable – we’ll compare later.
You may need to modify your existing while/foreach loop, adding in the $i variable to your item. If i is already used, then pick any other letter.
foreach($A as $i => $B){
Then on the list item or table row that you want to apply the last class to, compare your $lastOne with the current one your are looping through.
<?=$lastOne==$B?' class="last"':''?>
To give you an real life example, the below was used on a project while listing out related categories to the one the user was currently browsing. We experienced a recurrence loop and so to overcome this, we simply compare the unique ID (primary key) field for ease and to bypass any problems
$lastOne = end($relatedCategories);
foreach($relatedCategories as $i => $relCat){
<?=$lastOne->uid==$relCat->uid?' last':''?>
14. February 2011 by Mike
Categories: PHP |
Tags: css, last class, last one, last row, list item, loop, php, table |
Leave a comment
The following code will get the dimensions of an image:
<?php
list($width, $height, $type, $attr) = getimagesize(PATH_TO_IMAGE);
?>
I found this useful when using a lightbox to load an image that I didn’t initially know the size of, to ensure the lightbox positioned itsself in the middle, based on the height and width of the image.
The contents of $attr is useful for slotting straight into an
tag, like so:
<img src="URL" <?=$attr?>" />
This will produce, for example:
<img src="URL" width="200" height="300" />
04. February 2011 by Mike
Categories: HTML/CSS |
Leave a comment
If you want to develop/edit something on a live website, but you want to send a preview to a client, it can sometimes be tricky weighing up where and how to do it.
If your website is PHP, there is a simple piece of code you can implement to send someone a test URL. Copy and paste the below code into wherever you need to add/change.
<?php if($_SERVER['QUERY_STRING'] == 'test') { ?>
<!-- code protected from public viewing -->
<?php } ?>
You can put anything in between the PHP, Including CSS, HTML and PHP. If you need to replace something rather than add, simply adapt it to be an ELSE statement like so:
<?php if($_SERVER['QUERY_STRING'] == 'test') { ?>
<!-- code protected from public viewing -->
<?php } else { ?>
<!-- Original Code -->
<?php } ?>
To access the extra content, navigate to www.yoursite.com/anypage?test. To change ‘?test’ to any other word, edit the first line of the PHP.
This is also helpful for use with contact forms (sending the user back to your contact page with ?thanks in the URL or similar and replacing the contact form with a message), or sending users to different links on the same page to reveal codes or links.
21. December 2010 by Mike
Categories: HTML/CSS, PHP |
Tags: adding content, develop, html, php, redirecting, secret links, style |
Leave a comment
These text and box shadow techniques were written in an edition of .net magazine. At the time I couldn’t find any documentation on the text/box shadow fallbacks for up to IE 5.5 (which these are.)
However, they should be used with great caution – the MS Filer CSS properties use a lot of processing power and should be used sparingly.
The .net magazine article can be found here: CSS3 Techniques
Box Shadow:
-moz-box-shadow:0px 5px 5px #333333;
-webkit-box-shadow:0px 5px 5px #333333;
box-shadow:0px 5px 5px #333333;
/*IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#333333')";
/*IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#333333');
Text Shadow:
text-shadow:2px 2px 2px #333333
/*IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#333333')";
/*IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#333333');
16. December 2010 by Mike
Categories: HTML/CSS |
Tags: css3, drop shadow, IE drop shadow, internet explorer |
Leave a comment
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, select, textarea { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus, :active {outline: none;}
/*The elements below get reset but generally want to have the default settings */
strong {font-weight: bold;}
em {font-style: italic;}
input, textarea, select {padding: 3px; border: 1px solid #ccc;}
This reset css has been slightly adapted and adjusted from the original reset css created by Eric Meyer. If you have any suggestions or improvements, let us know.
16. December 2010 by Mike
Categories: HTML/CSS |
Tags: css, Eric Meyer, reset CSS |
Leave a comment
Sometimes fonts can be hugely different when using cufon. The base font and styles you set can end up massive, tiny or just generally wierd in that short time before the cufon takes over.
The easiest solution i’ve found is to style the page WITHOUT cufon – get font sizes nice and neat and spacing good with the closest web-safe font.
Then, in your header where you define what to cufon, set the font size and font weight of the cufon’d text:
Eg.
[CSS]
#nav li a {
font-size: 16px;
font-weight: bold;
}
[/CSS]
[JS]
[/JS]
If your JS in the header is getting you big – you can always put it in an external JS file.
Other vairables which can be set can be found here:
https://github.com/sorccu/cufon/wiki/API
14. December 2010 by Mike
Categories: HTML/CSS, Javascript |
Leave a comment
← Older posts
Newer posts →