Archive for the ‘JavaScript’ Category

session_start() php when to do it again!

Thursday, April 29th, 2010

I was stuck for a bit there.

I have a page that loads via AJAX, but I had to modify it to work for Google’s googlebot #! system…

The googlebot logic senses that it’s googlebot, and uses PHP includes instead of the AJAX!

Well the includes don’t need the session_start() again, but the AJAX loads DO!

So, NOT to be forgotten, session_start() will work per LOAD, hard to explain that, but you can wrap your head around it…

fancy!

BETTER SOLUTION: Sessions manager class, framework or similar…

jQuery scrollTo id

Monday, April 26th, 2010

<style>

.pointer { cursor: pointer; }

</style>

<a class=”pointer” onclick=”$.scrollTo(‘#here1’, 1000); return false;”>Here</a>

<h3 id=”here1″>text</h3>

<h3 id=”here2″>text</h3>

jQuery Javascript CSS gray out faded disabled element fadeTo() onload .ready()

Friday, April 23rd, 2010

Simply fade the element you’d like faded, grayed, via your .ready onload jQuery function:

$(document).ready(function() {

jQuery(‘#top_button’).fadeTo(0, 0.5);

});

jQuery set tag element disabled

Friday, April 23rd, 2010

jQuery(‘#element1’).attr(‘disabled’,’disabled’);

jQuery setTimeout fadeOut() fadeIn() show() hide() example

Friday, April 23rd, 2010

This is a bit of craziness, still it works nicely to hide a element, show another, and then a bit later hide the latter, and again show the original.

$(‘#item1’).bind(‘click’,function() {

$(‘#item1’).fadeOut( function(){

setTimeout( function(){

$(‘#item2’).fadeIn(function() {

setTimeout( function(){

$(‘#item2’).fadeOut(function(){

setTimeout( function() {

$(‘#item1’).fadeIn();

}, 100);

});

}, 2000 );

});

}, 100);

}); return false;

});

jQuery Fancybox IE width issue don’t forget the doctype!

Wednesday, April 14th, 2010

Required, a doctype!

example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

also, it never hurts to go get the latest versions of jquery and fancybox, at the time of this post: http://code.jquery.com/jquery-1.4.2.min.js & fancybox-1.3.1.js worked nicely…

Lightwindow IE fix

Tuesday, April 13th, 2010

Replace:

this.checkImage = new PeriodicalExecuter(function(i) {
if (!(typeof $(‘lightwindow_image_’+i).naturalWidth != “undefined” && $(‘lightwindow_image_’+i).naturalWidth == 0)) {

this.checkImage.stop();

var imageHeight = $(‘lightwindow_image_’+i).getHeight();
if (imageHeight > this.resizeTo.height) {
this.resizeTo.height = imageHeight;
}
this.resizeTo.width += $(‘lightwindow_image_’+i).getWidth();
this.imageCount–;

$(‘lightwindow_image_’+i).setStyle({
height: ‘100%’, width: ‘100%’
});

if (this.imageCount == 0) {
this._processWindow();
}
}

}.bind(this, i), 1);

With:

// We have to do this instead of .onload
var ie = (document.all)?1:0;
this.checkImage = new PeriodicalExecuter(function(i) {
if(ie){ //THE BROWSER IS IE
if ( $(‘lightwindow_image_’+i).complete && !(typeof $(‘lightwindow_image_’+i).naturalWidth != “undefined” && $(‘lightwindow_image_’+i).naturalWidth == 0)) {
this.checkImage.stop();

var imageHeight = $(‘lightwindow_image_’+i).getHeight();
if (imageHeight > this.resizeTo.height) {
this.resizeTo.height = imageHeight;
}
this.resizeTo.width += $(‘lightwindow_image_’+i).getWidth();
this.imageCount–;

$(‘lightwindow_image_’+i).setStyle({
height: ‘100%’, width: ‘100%’
});

if (this.imageCount == 0) {
this._processWindow();
}
//alert(‘IE has been detected’)
}
}
else
{//NOT IE, PROBABLY FF, OPERA, OTHER
//this line works for all other browsers
if ($(‘lightwindow_image_’+i).complete && !(typeof $(‘lightwindow_image_’+i).naturalWidth != “undefined” && $(‘lightwindow_image_’+i).naturalWidth == 0)) {

this.checkImage.stop();

var imageHeight = $(‘lightwindow_image_’+i).getHeight();
if (imageHeight > this.resizeTo.height) {
this.resizeTo.height = imageHeight;
}
this.resizeTo.width += $(‘lightwindow_image_’+i).getWidth();
this.imageCount–;

$(‘lightwindow_image_’+i).setStyle({
height: ‘100%’, width: ‘100%’
});

if (this.imageCount == 0) {
this._processWindow();
}
}
}

}.bind(this, i), 1);

credit:
http://www.silverstripe.org/all-other-modules/show/251991?start=8

Prototype script.aculo.us form simple handling

Tuesday, April 13th, 2010

I’ve pretty much left script.aculo.us for jQuery for the most part, but sometimes I’m still animating with it, thought it would be good to make this easily and quickly reference-able just in case:

The Form:

<form id=”enewsform” name=”enewsform”>
<input name=”first_name” id=”first_name” type=”text” value=”First Name”/>
<input name=”last_name” id=”last_name” type=”text” value=”Last Name”/>
<input name=”email” id=”email” type=”text” value=”Email” onFocus=”if(this.value == ‘Email’) this.value = ”;” onBlur=”if(this.value == ”) this.value = ‘Email’;”/>
<div id=”hp_email_loading” style=”font-size:11px;display:none;”>Loading… please wait.</div><br />
<span style=”font-size:11px;”>Your email address will be kept strictly confidential.</span><br /><br />
<img style=”cursor:pointer;” onClick=”enewsSubscribe(); return false” onMouseOver=”this.src=’images/submit-over.gif'” onmouseout=”this.src=’images/submit.gif'” src=”images/submit.gif” alt=”Submit”>
</form>

The Javascript:

function enewsSubscribe()
{
var email = document.getElementById(’email’).value;
var first_name = document.getElementById(‘first_name’).value;
var last_name = document.getElementById(‘last_name’).value;
new Ajax.Updater(‘hp_email_box’, ‘filter.php?email=’ + email + ‘&first_name=’ + first_name + ‘&last_name=’ + last_name //);
, { onCreate: show_subscribe_loader, onComplete: hide_subscribe_loader });
}

function show_subscribe_loader()
{
document.getElementById(‘hp_email_loading’).style.display = ‘block’;
return false;
}

function hide_subscribe_loader()
{
document.getElementById(‘hp_email_loading’).style.display = ‘none’;
return false;
}

Javascript HTML form field onFocus onBlur

Tuesday, April 13th, 2010

<input name=”email” id=”email” type=”text” value=”Email” onFocus=”if(this.value == ‘Email’) this.value = ”;” onBlur=”if(this.value == ”) this.value = ‘Email’;”/>

jQuery fancybox iframe syntax

Wednesday, April 7th, 2010

<head>

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.fancybox.1.2.1.js”></script>
<link type=”text/css” href=”css/fancybox.css” rel=”stylesheet” media=”screen” />

<script>

$(document).ready(function() {
$(“a#iframe”).fancybox({
‘speedIn’ : 600,
‘speedOut’ : 200,
‘padding’ : 20,
‘overlayOpacity’: 0.7,
‘overlayColor’ : ‘#FFF’,
‘titleShow’ : false,
});
});

</script>

</head>

<body>

<a id=”iframe” href=”The_Power_of_Meditation_Tracks.html”>View Tracks &raquo;</a><br />

</body>

quick note: Javascript equivalent to PHP isset variable

Saturday, April 3rd, 2010

Check to see whether or not a variable has been declared

if ( typeof ( $variable ) == ‘undefined’ )

{}
else
{}

jQuery change anchor tag href url via select option

Tuesday, March 30th, 2010

<select name=”tpom” onchange=”$(‘#tpom_download’).attr(‘href’,this.value);”>
<option value=”media/tpom.mp3″>MP3</option>
<option value=”media/tpom.zip”>ZIP</option>
<option value=”media/tpom.m4a”>IPOD</option>
</select>
<div style=”float:left;width:75px;margin-top:-3px;”>
<ul name=”st_btn” style=”text-align: right; float: right;”>
<li name=”submit”> <a id=”tpom_download” title=”blah” href=”media/tpom.mp3″ onclick=”return false;”>Download</a></li>
</ul>
</div>

CSS link rollover class change

Monday, March 8th, 2010

<a onMouseOver=”this.className=’on'” onMouseOut=”this.className=’off'” href=”10_9_08 MEETING.mp3″>October 9, 2008</a>

JavaScript image preloader script

Monday, March 8th, 2010

var myimages = new Array();

function preloading(){

for (x=0; x<preloading.arguments.length; x++)
{

myimages[x] = new Image();
myimages[x].src = preloading.arguments[x];

}

}

preloading(
‘images/1.jpg’,
‘images/2.jpg’,
‘and_so_on.jpg’)
;

script.aculo.us Scroll to top of page

Monday, March 8th, 2010

/* Scroll to Top of Page Functino */
var scroll = { top: function(event) { new Effect.ScrollTo(‘top’, {duration: 1.0}); } }

in html place something like:

<div id=”top” style=”visibility:hidden;”></div>

in onclick or elsewhere place:

scroll.top();

jQuery document ready

Monday, March 8th, 2010

<html>
<head>
<script src=”jquery.1.3.2.min.js” type=”text/javascript”></script>
<script>
$(document).ready(function()
{
// display main_wrapper
$(‘.site_container’).css(‘display’, ‘block’);
});
</script>

</head>
<body>
<div id=”main_wrapper” style=”display:none;”>
Page Content
</div>
</body>
</html>

JavaScript script.aculo.us Fade & Appear + IE Internet Explorer FIX

Monday, March 8th, 2010

new Effect.Fade(‘left_block3’, { duration: 0.5 });
new Effect.Appear(‘left_block4′, { duration: 0.5, queue:’end’ });

FULL CODE:

Blocks that fade and appear look like this:

<div id=”block1″ style=”display:none;”>
<div id=”header3″>
<div style=”position:absolute;top:0px;”><img border=”0″ align=”left” alt=”blah” src=”images/blah.gif”></div>
<div style=”position:absolute;top:110px;right:0px;”><img border=”0″ align=”right” alt=”blah” src=”images/blah.gif”/></div>
<div style=”position:absolute;top:25px;left:50px;margin-right:30px;width:290px;color:#2A5041;”>
<em>copy<div style=”text-align:right;”>&mdash;P.R.</div>
</em>
</div>
</div>
</div>

CSS for blocks:

#block1, #block2, #block3, #block4, #block5, #block6, #block7, #block8, #block9 {
float: left;
position: absolute;
left: 635px;
top: 225px;
height: 375px;
width: 375px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
padding-left: 0px;
display: inline;
line-height:1.5em;
text-align:left;
}

.smooth_it {
width: 68px;
height: 50px;
}

Full Javascript function:

/* ROTATING BLOCK */
var spot = 0;
var how_many = 7;
var current_rotator = ‘block1’;

function swap_block()
{
new Effect.Fade(current_rotator, { duration: 0.5, queue: ‘end’ });
spot++;
if(spot == 8){ spot = 1; }
current_rotator = ‘block’ + spot;
new Effect.Appear(current_rotator, { delay: 1.0, duration: 0.5, queue: ‘end’ });
rotatorer = setTimeout(“swap_block()”, 10000);
}

The keys, things to remember:

CSS defines the outermost block div, NOT the inner div, but DO note that it has an inner wrapping div (header3) that is NOT CSS defined.

The Internet Explorer IE fix is that if these things aren’t all perfectly done as described, IE simply won’t fade but will show/hide without transition, and furthermore, if the block’s background isn’t defined it may also granulate text rather than treat it as “has layout”.

JavaScript URL tracker function array

Monday, March 8th, 2010

<script>

/* URL Tracker */
last_page = new Array();
go_here = ”;

function tracker()
{

go_here = location.hash;
go_here = go_here.substr(1);
last_page.unshift(go_here);

}

function visit_last_remove_from_tracker()
{

go_here = last_page.shift();
//alert(go_here);
if(go_here == ”){go_here = ‘state_link_28’;}
if(go_here == ‘undefined’){go_here = ‘state_link_28’;}
return go_here;

}

</script>

JavaScript URL sniffer forward redirect

Monday, March 8th, 2010

<!–Let’s make sure this wasn’t loaded outside the framework! –>
<script src=”../js/forwarder.js” type=”text/javascript”></script>

<script>
function where_are_we(){

var pushoff = “http://url/folder1/base_url_for_site”;
var str = window.location.toString();
var temp = new Array();
temp = str.split(/pages/);
//alert(‘0 ‘ + temp[0] + ‘ 1 ‘ + temp[1]);
switch(temp[1])
{

case ‘/01.php’: window.location = “http://url/folder1/folder2/#state_lesson_more_1”; break;

}
//if(str.search(/pages/) != -1 ){ window.location = push_off; }

}
window.onload = where_are_we();

</script>

JavaScript use img onload tag to set variable

Monday, March 8th, 2010

<img onload=”javascript: number_of_accordians = 5;” src=”<? echo $prefix; ?>images/beauty-2.gif” border=”0″ alt=” ” style=”float:left; margin:0px 20px 15px 0;” />

JavaScript getElementsByTagName anchor tag CSS function

Monday, March 8th, 2010

function anchorcss() {

var elements = document.getElementsByTagName(“a”);
var limit = elements.length;
var i = 0;

for(i=0;i< limit;++i)
{

if(elements[i].getAttribute(“name”)) {

elements[i].onmouseover = elements[i].style.color = “#140b48”;
elements[i].onmouseover = elements[i].style.textDecoration = “none”;

}

}

}

Inline Javascript CSS properties

Monday, March 1st, 2010

Inline Javascript CSS properties

dash replaced by capital

<a
href=”#”
onmouseover=”this.style.textDecoration=’none'”
onmouseout=”this.style.textDecoration=’underline'”

style=”color:#FFFFFF text-decoration:underline;”
>
Details
</a>