Zeus did it.

JQuery Full Screen Images

articles | utilities |

By Zeus Perez ::) | Jan 26, 2012

This script will allow you to use full cover background images on your website. You can use it with z-index to lay it all the way to the back of the content so you can also stack items! You can get really creative with building fullscreen ready content for tablets, mobile devices or full screen websites. I'm using it on a variety of blogs so I'll explain some of the principles below.

head tag:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>

<script type="text/javascript">

jQuery(function() {

var theWindow = jQuery(window),

$bg = jQuery("#bg_img"),

aspectRatio = $bg.width() / $bg.height() ;

function resizeBg() {

if ( (theWindow.width() / theWindow.height() ) < aspectRatio ) {

$bg

.removeClass()

.addClass('bgheight');

} else {

$bg

.removeClass()

.addClass('bgwidth');

}

}

theWindow.resize(function() {

resizeBg();

}).trigger("resize");

});

</script>

<!--You need to include the code above into the head of your HTML document. This will set the resize feature for the image-->

////////////////////////////////////////////////////////////////////////////////////

style tag:

#bg_img {

background-position: center center;

top: 0;

left: 0;

position: fixed;

z-index: -1;margin:0px;padding:0px;

margin:0px;

}

.bgwidth {

width: 100%;height:auto;}

.bgheight {

height: 100%;width:auto;}

// I've set the z-index but using inline styles you can rewrite this.

////////////////////////////////////////////////////////////////////////////////////

img tag:

use 1:

img src="http://distilleryimage7.instagram.com/0447ed8c47c411e180c9123138016265_7.jpg" id="bg_img" class="bgwidth"

<!-- this is standard use where the image fits to the width-->

use 2:

img src="http://distilleryimage7.instagram.com/0447ed8c47c411e180c9123138016265_7.jpg" id="bg_img" style="height:100%;width:auto;

<!-- here i start to use inline to control the photos, in this case I want the photo to fit to the height of the page, which messes up the width, but whatever-->

use 3:

img src="http://distilleryimage7.instagram.com/0447ed8c47c411e180c9123138016265_7.jpg" id="bg_img" style="height:100%;width:100%;

<!--here i just tell the picture to fit however it can on the screen

use 4:

<div id="bg_img" style="width:50%;height:100%">

<iframe width="100%" height="100%" src="http://www.youtube.com/embed/Gw09tAcNB0Q" frameborder="0" allowfullscreen></iframe>

</div>

<!-- this is where I had some fun, see, you can use the bg_img ID on ANYTHING so I added it to a DIV and then I added a youtube embedded iframe set to 100% so it just fills the screen, but it's being controlled by the DIV with the inline style! If I added z-index I'd have things hovering over or behind but I'll show some examples later.-->

Meta tag for Mobile Web Design

scripts | utilities |

By Zeus Perez ::) | Aug 29, 2011

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=10.0; user-scalable=1;" />

How To Use Google Site Search

articles | stories | utilities

By Zeus Perez ::) | Jan 04, 2011

I’ve come to the realization from a colleague that there’s a paid site search that gives you results from Google but there’s also a concern with paid support for the product. Imagine sitting there and paying for something and not having a support group, some of their features are not fully explained or documented and their code isn’t documented well either. In most cases they say their products are easy to use, but remember YouTube wasn’t built by Google, neither was Blogger and traditionally they hire geniuses so if you prepare to use their paid site search find someone technically savvy to set up the site otherwise you may feel like you are at your wits end. Hopefully you won’t but just try to make sure you find someone before jumping into paying for the service. Head over to TutorialZine.com for help and linkage if you get stuck!

What does "google inc." mean when you visit Google's Analytics?

articles | stories | utilities

By Zeus Perez ::) | Nov 18, 2010

I know what you’re thinking. “Zeus, it’s someone searching google and it found your site 1 time on that day.” Ok. I get that, but I have three reports giving me different reports. So who is right? I guess I’ll have to hunt down anhttp://blog.zeusdidit.com/textpattern/index.php?event=paged answer from someone (hello, google. please call me @ 305-608-0534 and please explain. thanks.)

Here’s the screenshots for reference. I used my web logs from Textpattern , GetClick web logs and google analytics for the images below.

THIS IS ALL FROM NOVEMBER 17. 2010
Get Clicky

Google Analytics

Google Analytics Map Location

Textpattern

According to the post on google’s forums it may due to their new “preview”. This could mean that your page may or may not get extra “views” but not necessarily “hits” since users don’t have to visit your site thanks to Google’s new feature. This can impact SEO quite a bit if you consider how users search blindly :) lol. That’ funny because now you have an awesome preview but this could have horrendous impact on sites. Just saying. It’s awesome for the user, but for companies or people trying to make a site that makes money it may be bad news.

Google Adds Screenshots To Searches -DUH

articles | utilities | stories

By Zeus Perez ::) | Nov 17, 2010

Forget tiny thumbnails.
Forget wondering if that’s the right site.
Forget searching reading.
Google adds screenshots to their searches, and they change their search algorithm AGAIN with better results.

Maybe Google will one day have a “In This Release” section for what’s new in their sites and optimization.

Textpattern Shout Outs and Link Backs

articles | applications | utilities

By Zeus Perez ::) | Nov 05, 2010

If you didn’t know as of yet, this site was built using open source content management software named Textpattern , a highly extensible and powerful CMS solution. The core of the code when installed gives users the ability to have complete flexibility and control over having multiple sections and categories out of the box. This means it’s easy to build a magazine style site since you can easily attach related articles, create lists of articles or custom lists of articles which means and even the ability to selectively choose where you want to show them! Look at my about page or the other pages to see some ways it can be done. Best part of Textpattern is you can have countless stylesheets and pages for each section but bigger yet you can even control how the pages look right from the writing area!

I have installed so far for testing over 61 Plugins with 33 of them turned on!

So here’s the list of all the plugins I’m using and a huge THANK YOU to the community.

Simple PHP Mail

scripts | utilities |

By Zeus Perez ::) | Sep 29, 2009

Here's a simple php mail you can use for your site.

Add this to you page with your form. Notice the send_contact.php page.
<form action="send_contact.php" method="post"  >
Name:<br />
<input name="iFirstName" type="text" id="fn" size="50"><br /><br />
Email:<br />
<input name="iEmail" type="text" id="em" size="50"><br /><br />
 Phone<br />
<input name="iPhone" type="text" id="ph" size="50"><br /><br />
Comments:<br />
<textarea name="iComments" cols="48" rows="4" id="co"></textarea><br /><br />
<input type="submit" name="Submit" value="Submit"> <input type="reset" name="Submit2" value="Reset">
</form>


Add this to the php page that sends the email:
<?php
$fn = $_POST["iFirstName"];
$em = $_POST["iEmail"];
$ph = $_POST["iPhone"];
$co = $_POST["iComments"];
echo "Thank you for your comments. We will get back to you soon." ;


$message = "First Name: ".$fn."\r\n\r\nHome Phone: ".$ph."\r\n\r\nEmail: ".$em."\r\n\r\nComments: ".$co;
$headers = 'From: flygirl2@bellsouth.net' . "\r\n" .
    'cc: ' . "\r\n" .
    'Reply-To: flygirl2@bellsouth' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

mail("flygirl2@bellsouth.net","Email from Ute Site",$message,$headers);
?>