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.-->
You like this.
articles | stories |
By Zeus Perez ::) | Jan 18, 2012
You like this.
Zeus Pérez i like this song because it reminds me of a sweet place in my mind, a song that just fills the room, cascades, resonates just ugh umm. just overthinking, passing the time just bringing us all a little bit closer, attached. attachments. the symbolism this piece of beauty states, it’s ‘state’, it’s a sense of absolute attachment. and it’s ok. you’re ip is ok. my ip is ok, even though for two whole seconds in the cosmic digital interlude, yours, mine, everyones ip. sok. it’s to be attached -to something. a feeling, a vice, a, a, love ok. it’s our voice, our brilliance, ours. hmm, art. set us free. every connection, like, share, hmmm, just delicious. ip. lol. also its funny, they shouldnt take away our funny stuff. you know cascadements of sharing. lol. sharing is love. look at how progressive we’ve become… this song is nicer… lol
thanks :)
besides i’ll prob delete this in 5 minutes. cuz i can! we can open plenitudes of information with the new found selection, we can embrace our RIGHT to share, to say, hi, i like this. lol. this is like a walking ip sharing connection right now. sup ip. how you doing. you looking good in them wires, sup girl lol. all these mythical contributions, ok, billions of them to other ips… time to go build something so i can thank you all. in fact, everyone should! upload a photo! like everywhere. all over. take it a notch up. download every single free app you can find. lol. start with sktd
i am a f$%&*tard with this amount of writing. i gotta find a way to snap out and write every so often and i go on a site wise/wide commenting rhapsody. i’m amazed i started here. i usually leave crazy ass comments but sup! :) anyways who often have you had an “open letter” thanking you for saving our freaking IP. I honestly didn’t think it was going to get this far so fast. anyways. your red eyes are like staring at me freaking me out! off to draw something.
and now for the gayest song ever of 20-whatever we in.
sup. rocketship lol. music gets me… :) but ti’s about ROBOTS. ip man. sup love.robot love!31121111 winning this bill is probably the first artificial intelligence link we’ll have. ::)) oh. double eyes double mouth.
ascii code, you know it’s been free forever.
tanks robots. I should just fastforward to 2:47.
but sup. sok.
brand new ip. new yo new yo…. :) cheers. and sup. figured it’d make you lol for 1/2 a sec then be like, oh
new yo. 2012 ffffffight < 000000 so freaking jedi that there. the darkside wins, just saying. now how do i copy this into my blog… i hate facebook sometimes! hey FB employ a rapid deployso i can post from your network to OTHER networks without copy and paste. it wouldnt take long to program how the NEW facebook should interact with other respective social medias.
User Experience Design for Comments
articles | Web-Design-Articles |
By Zeus Perez ::) | Jan 13, 2012
Here’s a short list of items your next user experience design for comments should contain in order of priority. This will allow for sites to capture more relative analytics per site without needing to go through Google Analytics, even though you could use their transparent pixel capturing to send data to them as well per post.
So let’s start the list:
1. First Name, Last Name, Thumbnail (readers love icons)
2. Link to a users site
3. Global Location
4. Date commented.
5. Comments, delimited to 566 characters which is about 2 paragraphs
6. An Expand button for comments so websites can capture using AJAX or JQuery how often user’s are interacting or reading comments but not posting.
7. Nested comments for responses, and even chained comments. Users love to comment on one another.
7. A Sharing or Recommend Facebook button or text
8. Filtering mechanism that compute Most Shared, Most Commented and Latest posts.
Here’s some important aspects to remember for commenting. I’m going to use the New York Times as my example due their popularity and level of commenting. The Times has the ability to sort or just show top most shared comments. But they are missing some simple elements. The UI for Esquire’s online edition already does some the nesting, though they don’t have the sorting I’d like.
Today's Hot Links #16: Soul Reaper
articles | hot-links |
By Zeus Perez ::) | Jan 11, 2012
http://www.soul-reaper.com/ Reaper HTML5 meets comic books
Today's Hot Links #15: Fotoshop by Adobé
articles | hot-links |
By Zeus Perez ::) | Jan 11, 2012
Fotoshop by Adobé from Jesse Rosten on Vimeo.
With a bit of humor this artist blows wide open what it takes to make anyone, regardless of race or age, to be ‘magazine’ or ‘movie’ quality. Please note, you may really laugh really hard as wrinkles are removed easily with this product. Reapplication is necessary.
Today's Hot Links #14: Cut The Rope
articles | hot-links |
By Zeus Perez ::) | Jan 11, 2012
Talk about HTML5 taking over. This simple site works in all browsers and mobile devices seamlessly. Keep an eye out for http://www.zeptolab.com/ I see wonderful games and experiences coming from them since they think outside the complex box and leap into a fun simple box kids and adults love.
Using Google Analytics For GIF And Email Tracking
articles | hardware |
By Zeus Perez ::) | Jan 04, 2012
I’ve been using Google Analytics for a while but wanted to use a way to track email open or deliver rates. Enter this page regarding email tracking:
http://code.google.com/apis/analytics/docs/tracking/gaTrackingTroubleshooting.html#GIFVars Tracking
Then of course I find
http://code.google.com/apis/analytics/docs/mobile/mobileWebsites.html Analytics for Mobile
Where Turadg says on Stack Overflow:
“As others have pointed out, you can’t use Javascript in email. The actual tracking is done by a request for __utm.gif though and the Javascript just constructs the GET parameters.
Google supports non-Javascript uses of Google Analytics per their Mobile web docs: http://code.google.com/mobile/analytics/docs/web/
They document the full list of parameters, but the only necessary parameters are:
Parameter Description
utmac Google Analytics account ID
utmn Random ID to prevent the browser from caching the returned image
utmp Relative path of the page to be tracked
utmr Complete referral URL
So let’s create an example email, send it via MailChimp or WordPress or other item, or hell, all mail servers I can find to make sure I get some analytics back!
