array(0) { array[0]=> }

When looking in Charles I saw all my POST variables so i was like … HUH?

Anyway it turns out that the submit Format was incorrect, so to fix it you must…

Highlight the submit button and click the XML Source tab. Below the tag, near the tag for the button, find and change format="formdata" to format="urlencoded"

Bit more playing around with CSS3.

I was trying to get an effect with a single shadow down one side of a box, using the BOX-SHADOW in CSS.  The “standard” deployment gave some results I was not too happy with. This was because the Shadow were spilling out over edges that I didn’t want it to be displayed on. See the image below.

As you can see the shadow is spilling over the top an bottom edge

I wanted the Left Side edge to ONLY have shadow on it….so after about 10 mins of clicking…..

After a bit of tinkering this is the result!

The CSS code is a follows :
box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;
-o-box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;
-icab-box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;
-khtml-box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;
-moz-box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;
-webkit-box-shadow: 0px -5px 0px #fff, 0px 5px 0px #fff, 5px 0px 0px #fff, -2px 0px 5px #333;


The way that this code is working is the first three shadows are full opacity in White (#fff) – which matches the BG of the box, and the last shadow applies the #333 shadow to the left hand edge. Yes it does increase the edge by 5px, but thats how I wanted the effect to look…

if you look up you will se it in action, I have made a single page with the JQuery in and some sample data so you can see it without the bulk of my site surrounding it.

How it works:
Its a really simple function set on a Interval than changes the opacity of the selected item, it could be a link, an image or anything you like really.

There is a small number of variables that you can change to make it fit your site better, the code is to be used at your own risk etc… I am just simply pointing out what you could do.

It can just be plugged into a WordPress theme if you wanted, just change the “what” variable in the JQuery to reflect the name of your cloud.

Enjoy it.

See the example code

So taking that in mind I will show you how I did it, the idea of out front page was for a Showcase that shows off their current products.

What I use is two ‘pages’ one of them being the frame (index.php) and the second being the contents (index_include.php).

On the index I put a PHP include to the ‘index_include’, the index page contains :

<!-- The JQuery (later explained) --->
<script src="/common/js/contentswitcher.js" type="text/javascript"></script>
<div>
<div id="contentstochange">
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/index_include.php'); ?>
</div>
</div>
<a href="index.cfm?tab=FR" class="stayblack bigtabs <?php if($tab=='FR') echo ' selected' ; ?>">
<h2>
<img src="/images/fr_box_front.png" alt="FR" border="0" />FusionReactor
</h2>
</a>

The <A> tag is the key here : as you can see it calls the href to itself with a URL string of tab=FR

the Class tag contains modification for PHP to add selected when that tab is selected.

Index_include page contains: A Simple Switch statement.

<?php
$tab = 'FR';
if(isset($_GET['tab'])){
$tab = $_GET['tab'];
}
switch($tab) { case 'FR' : ?>
THE HTML CONTENTS GO IN HERE
<?php
break;
case 'n' :
break;
?>
So what we have done here is Really simple. We have an index page with a PHP include of the page ‘index_include’. when the <a href> is pressed it will load the correct case statement into the ‘index’ page.

So, where is the JQuery ?

all what we need to do now is to stop the Page moving as we want the user to remain on the same page so it looks like the tabs are fading in and out nicely.

so add this to the <a href>

onClick="runcontent('FR');return false;" id="FR"

Then we go make the JQuery

function runcontent(selection){
$("#contentstochange").fadeOut('fast');
// Now make the request
this.timer = setTimeout(function () {
$.ajax({
url: "/index_include.php?tab=" + selection,
dataType: 'html',
success: function (response) {
runme(response)
}
});
}, 150);
function runme(response) {
$("#contentstochange").fadeIn('slow').html(response);
}
$(".bigtabs").removeClass("selected");
$("#"+selection).addClass("selected");
}

What it does is Fade out the container div – Requests the index_include page with the Sent variable, it responds then Fades in the new page – it also sends through data to the ‘index’ page to change the style on the Tab so it looks selected.

So what we have now is a Tab that when clicked will open a new tab with new content with a nice fade in fade out effect.

I have been looking at getting a replacement to Dreamweaver as its starting to bug me using it with an SVN. as the file view is scattered full of .svn files, and the FTP client in DW is well…crap…

So I have been looking at Coda + TEA …. as you can use ZEN CODE inside, which will help me with my development speed and the Coda CSS editor is wonderfull

I was looking at how to add extra books to Coda and came across a wonderful Blog post explaining how to do it, along with front covers for each book. So to find out how to add more books to coda follow me …. Enjoy

To me an absolute horrific comment, Internet Explorer is holding back the development on the World Wide Web again.
Lets just remind ourselves that Silverlight Can ONLY be developed under windows, and is not supported on Linux or the web browser Opera…..

What a Shambles.

Lets just show Silverlight is not supported, compared to Adobe Flash….

OS Support Statistics: shows the percentage of computers that do NOT support RIA’s (not detected, reasons for non-detection is because JavaScript is disabled).

Lower % is better - Stats from riastats.com

Read the Full Article