JS


Oct
28

jQuery Check

Posted in JS by Admin

0


{code type=html}
<html>
<head>
<!– rename files to force them to fail
for example rename “min.js” to “m1n.js” –>
<!– grab 1.6.4 from google –>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js”></script>
<!– if its not online grab from jquery –>
<script>!window.jQuery &#x26;&#x26; document.write(unescape(‘%3Cscript type=”text/javascript” src=”http://code.jquery.com/jquery-1.6.4.min.js”%3E%3C/script%3E’));</script>
<!– if its not online grab latest from google –>
<script>!window.jQuery &#x26;&#x26; document.write(unescape(‘%3Cscript type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”%3E%3C/script%3E’));</script>
<!– if its not online grab local –>
<script>!window.jQuery &#x26;&#x26; document.write(unescape(‘%3Cscript type=”text/javascript” src=”/js/jquery-1.6.4.min.js”%3E%3C/script%3E’));</script>
<!– if its not online your S.O.L. –>
<script type=”text/javascript”>
$(document).ready(function() {
$(“.disabled”).hide();
$(“body”).css(“background-color”,”green”);
$(“body”).append(‘<div class=”enabled”>jQuery is Loaded!!</div>’);
});
</script>
<script type=”text/javascript”> <!–
if (typeof jQuery == ‘undefined’) {
function createDiv() {
var _body = document.getElementsByTagName(‘body’) [0];
var _div = document.createElement(‘div’);
var _text = document.createTextNode(‘jQuery is ‘)
_div.appendChild(_text);
var _span = document.createElement(‘span’);
var _text2 = document.createTextNode(‘not’)
_span.appendChild(_text2);
_div.appendChild(_span);
var _text3 = document.createTextNode(‘ available!!’)
_div.className = ‘disabled’;
_div.appendChild(_text3);
_body.appendChild(_div);
}
window.onload = createDiv;
}
–> </script>
<style>
body { background: #c91f2c; display: block; height: 100%; margin: 0; padding: 0; width: 100%; }
noscript { background: none repeat scroll 0 0 #555555; box-shadow: 0 0 5px #000000 inset, 0 0 5px #FFFFFF; color: white; display: block; font-size: 100px; font-weight: bold; position: relative; text-align: center; text-shadow: 0 0 10px #000000; top: 50%; padding: 15px; margin-top: -50px; }
.enabled { background: none repeat scroll 0 0 #555555; box-shadow: 0 0 5px #000000 inset, 0 0 5px #FFFFFF; color: white; display: block; font-size: 100px; font-weight: bold; position: relative; text-align: center; text-shadow: 0 0 10px #000000; top: 50%; padding: 15px; margin-top: -50px; }
.disabled { background: none repeat scroll 0 0 #555555; box-shadow: 0 0 5px #000000 inset, 0 0 5px #FFFFFF; color: white; display: block; font-size: 100px; font-weight: bold; position: relative; text-align: center; text-shadow: 0 0 10px #000000; top: 50%; padding: 15px; margin-top: -50px; }
span {color:#c91f2c}
</style>
</head>
<body>
<noscript>Javascript is <span>disabled</span>!!</noscript>
</body>
</html>
{/code}

Jun
10

Epoch Time Converter Bookmarklet

Posted in JS by Admin

0


These are bookmarklets I created because I am a developer and always working with the Epoch (Unix) TimeStamp.

Epoch Time Converter – Epoch To Human

The e2h bookmarklet converts Epoch (a.k.a Unix) TimeStamp into a human readable Date and Time based on your locale!
e2h <-- Epoch 2 Human Bookmarklet Click - hold - and drag the link to your Favorites / Bookmark toolbar.

Epoch Time Converter – Human To Epoch

The h2e bookmarklet converts a Human Date and time into an Epoch (a.k.a Unix) TimeStamp
h2e <– Human 2 Epoch Bookmarklet Click – hold – and drag the link to your Favorites / Bookmark toolbar.

You can rename these bookmarklets by adding them to your bookmark tool bar, right clicking them, select property, and then change the name. I have over 600 bookmarks – so the bookmarks on the toolbar need to have short names so I can cram as many as possible up there!

Sep
11

Let Google Host Jquery

Posted in JS by Admin

0


jQuery

There are benefits as well as drawbacks with Google Hosting jQuery.

A benefit with Google hosting the jQuery library is the fact that it will increase your page load speed – by a margin.

A draw-back is the fact that if Google code is down, so is the library that your site needs.

Google Host Jquery 1.4.2

{code type=html}<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>{/code}

Google Host Jquery UI 1.8

{code type=html}<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script>{/code}

jquery 1.2.x does not contain sizzle
jquery 1.3.x does not contain sizzle
jquery 1.4.x contains sizzle
jquery 1.5.x does not contain sizzle

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Sep
6

Blow Up

Posted in JS by Admin

0


jQuery Blow Up Effect


XHTML

{code type=html}<ul class=”thumb”>
<li><a href=”http://validator.w3.org/check?uri=referer” class=”external”> <img src=”/images/sealxhtml.png” alt=”Valid XHTML” /> </a></li>

<li><a href=”http://www.fremonttech.com” class=”external” ><img src=”/images/sealft.png” alt=”FremontTech” /></a></li>
<li><a href=”http://jigsaw.w3.org/css-validator/validator?uri=http://www.code.fremonttech.com&profile=css3&usermedium=all&warning=1&lang=en” class=”external” ><img src=”/images/sealcss.png” alt=”Valid CSS!” /></a></li>

</ul>{/code}


CSS

{code type=css}ul.thumb { float: left; list-style: none; width: 228px; }
ul.thumb li { float: left; position: relative; width: 54px; height: 51px; border: 0px !important; }
ul.thumb li img { width: 54px; height: 41px; -ms-interpolation-mode: bicubic; position: absolute; border: 0px !important; }
ul.thumb li img.hover { border: none; }
{/code}


JS

{code type=php}/*Added to add external window and be xhml valid */
$(function(){$(‘a.external’).click(function(){window.open(this.href);return false;});});
$(function(){$(‘a[href*=#fremonttech]‘).click(function() {if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {var $target = $(this.hash);$target = $target.length && $target || $(‘[name=' + this.hash.slice(1) +']‘);if ($target.length) {var targetOffset = $target.offset().top;$(‘html,body’).animate({scrollTop: targetOffset}, 0);return false;}}});});

/* Blow Up Effect */
$(“ul.thumb li”).hover(function() {
$(this).css({‘z-index’ : ’10′}); /*Add a higher z-index value so this image stays on top*/
$(this).find(‘img’).addClass(“hover”).stop() /* Add class of “hover”, then stop animation queue buildup*/
.animate({
marginTop: ‘-150px’, /* The next 4 lines will vertically align this image */
marginLeft: ‘-164px’,
// top: ’50%’,
left: ’82′,
width: ’218px’, /* Set new width */
height: ’164px’, /* Set new height */

}, 200); /* this value of “200″ is the speed of how fast/slow this hover animates */

} , function() {
$(this).css({‘z-index’ : ’0′}); /* Set z-index back to 0 */
$(this).find(‘img’).removeClass(“hover”).stop() /* Remove the “hover” class , then stop animation queue buildup*/
.animate({
marginTop: ’0′, /* Set alignment back to default */
marginLeft: ’0′,
top: ’0′,
left: ’0′,
width: ’54px’, /* Set width back to default */
height: ’41px’, /* Set height back to default */

}, 200);
});
{/code}

Origionaly Found On

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/


Demo

  • Valid XHTML
  • FremontTech
  • Valid CSS!

Sep
6

Jquery Hide / Show – Collaps / Expand

Posted in JS by Admin

0


Blog Posting

Header Text 1

This is some hidden text #1
Header Text 2

This is some hidden text #2
Header Text 3

This is some hidden text #3
Header Text 4

This is some hidden text #4

Sep
6

JS Magic Clear

Posted in JS by Admin

0


The Purpose

This is a JavaScript (js) clearing function of special use. I have a text area that is used for both the input as well as the response. I want to preload the text area with some instructions, but I wanted the instructions to disappear when the user clicks in the box. The problem cames into play when the form is submitted and someone clicks in the box to copy the responded text. I needed a way to clear the instructions without clearing the response – so a simple JS clear would not work for me.

A Simple Demo

Notice how you can click in the box, the instructions go away. Just type what ever you want in there and hit Submit. It will flip your text and deliver the response in the same box. But now you can click in the box and copy the text for use else where!

The JS

{code type=html}function cleardefault(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = “”;
}
}{/code}

 

The html / PHP

{code type=html}<textarea onclick=”cleardefault(this, ‘Type the words you want to flip here!’)”>Type the words you want to flip here!</textarea>{/code}

Other Notes

If you use this script, dont forget to change BOTH instances of “Type the words you want to flip here!” If they do not match character for character it will not clear it!

The demo uses Javascript to submit and return the data, but this also works with HTML and PHP forms!

Categories