alexyz » JavaScript

jQuery .hover change div background-position example

admin — Wed, 16 Nov 2011 23:48:11 +0000

example for reference:

$(“#formButtonSubmit“).hover(function(){
$(this).css({
backgroundPosition: ’0px 0px’
});
}, function(){
$(this).css({
backgroundPosition: ’0px 30px’
});
});

Secure HTML form example using PHP htmlentities, passing a token PHP, AJAX submission via jQuery

admin — Wed, 21 Sep 2011 16:55:44 +0000

// form page (index.php): initialize a session so that we can set a unique, random, encrypted value to a user session
session_start();
$token = md5(uniqid(rand(), true));
$_SESSION['token'] = $token;
? >

// The jquery.validation.js class uses a regular expression to stop the process if the email entered isn’t acceptable

;(function($) {
$.validation = {};
$.extend( $.validation, {
email:function(email) {
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if ( filter.test(email) ) {
return true;
}
return false;
}
});
})(jQuery);

// The registerSubmit.js submits the entered email via AJAX, returning a success or failure message, to our contactSubmit.php script, which handles the submission of the new email to a database

$(document).ready(function() {

$(“#reg-button”).click(function(){
$(“#topForm”).submit();
});

$(“#topForm”).submit(function(event) {
event.preventDefault();
var $form = $( this ),
emailAddress = $form.find( ‘input[name="emailAddress"]‘ ).val(),
token = $form.find( ‘input[name="token"]‘ ).val(),
formaction = $form.attr( ‘action’ );

if($.validation.email(emailAddress)){
$( “#reg-description” ).html (“submitting…”);
$.ajax({
type: “POST”,
url: “contactSubmit.php”,
data: “firstName=” + firstName + “&lastName=” + lastName + “&emailAddress=” + emailAddress + “&token=” + token,
success: function(){
$( “#reg-description” ).html( “Thank you. You have been registered.” );
},
});
}
else{
$( “#emailAddress” ).val (“Please enter a valid email address”);
}
});
});

// contactSubmit.php: receive the email, check the token, clean the data, pass to a database layer API

session_start();

set_include_path(‘DBlayerClass’);
require_once(‘EmailContact.php’);

if (isset($_SESSION['token']) && $_POST['token'] == $_SESSION['token']){
if(isset($_POST['emailAddress'])){
$emailAddress = htmlentities($_POST['emailAddress']);
} else { $emailAddress = ”; }

$contact = new EmailContact($emailAddress)

try {
$contact->save();
} catch (Exception $e) {
; // do something
}
//$retrieve = new EmailContact($emailAddress);
//$retrieve->load();
//print_r($retrieve);
//}
? >

Post via jQuery across domains (in this case to a Zend Controller and subsequent view) and display the results

admin — Thu, 25 Aug 2011 23:09:49 +0000

the jQuery posting page, in brief:

<head>

</head>
<body>
<form id=”enewsform” name=”enewsform” action=”http://componentserver/controllername/post” method=”post”>
” />
sign up

// the component Zend controller in question receives the post, does whatever it does, renders its view, and we access the results from the view (don’t forget to pass data to the view with something like this:
$this-> view-> viewresult = $this-> viewData;)

echo $_REQUEST['jsoncallback'] . ‘(‘ . json_encode($this-> viewresult) . ‘)’;
? >

Persistence of GET URL parameters passed to WordPress site with Permalink clean pretty URLs turned on

admin — Fri, 15 Apr 2011 20:16:03 +0000

Here’s the scenario:
We have a store site.
The store site has a link on its homepage that leads to a wordpress site.
When a visitor clicks the link,
we want a url parameter that is passed with the visitor to the wordpress site
to remain in the url
so that when/if they click a link in the wordpress site that leads back to the store,
the parameter comes back with them.

Normally, you’d simply add a $_GET in your theme somewhere,
assign it to a variable,
and then append that onto any links that are headed back to the store site.

The trouble, though, is that when WordPress’
clean and pretty Permalinks URL function is active,
it takes over, and forwards (via htaccess, wordpress base code functions, or otherwise),
at which point in time data passed over is lost.

Solution:
In WordPress’ index.php (the very first root directory index),
include another file.

include(‘passback.php’);

In that file, instantiate SERVER SESSIONS, and save received parameters.
Something like this (of course looping through the REQUEST parameters dynamically would be smarter, but for simplicities sake, let’s just target a particular parameter):

session_start();
if($_GET['persistme'] != ”){ $passit = $_GET['persistme']; }
if(!isset($_SESSION['passback'])){ $_SESSION['passback'] = $passit; }

Now you can include your passback retrieval class in your theme, grab the parameter, and use your JavaScript library of choice to loop through all the links in the page and append it onto them.
Something like this (Prototype, and only appending links that already have a ? and thus other parameters they’re sending back…):

jQuery json crossdomain example

admin — Wed, 23 Mar 2011 00:18:47 +0000

echo $_REQUEST['jsoncallback'] . ‘(‘ . json_encode($this-> viewresult) . ‘)’;

WordPress limit search form to a category

admin — Fri, 10 Dec 2010 00:34:17 +0000

example:

source: http://wpgarage.com/code-snippets/how-to-hack-the-wordpress-search-function-search-categories-and-child-categories/

jQuery check if image with specific source exists on page

admin — Thu, 18 Nov 2010 19:35:42 +0000

$(document).ready(function() {

$(“img”).each(function(){
imgtofind = “http://alexyz.com/images/example.jpg”;
source = $(this).attr(‘src’);
if(source == imgtofind){
alert(source); // or otherwise
}
});

}

jQuery select anchor tags that contain specific text, then change id, onClick (Capitalized!!!!), href, :contains, .attr(), .each()

admin — Wed, 17 Nov 2010 17:32:52 +0000

Easy actually, on load, select an anchor tag (or several, and do the following for .each()), that contains, among other contents, the word ‘Read’,

then set its id attribute, a Mouse event, and alter its href value:

$(document).ready(function(){

$(“a:contains(‘Read’)”).each(function(){

$(this).attr(‘id‘,’newid’);

$(this).attr(‘onClick‘, ‘return false;’); // Capitalize the C!!!!

$(this).attr(‘href‘, ‘http://www.alexyz.com’);

});

// alternatively, line them all up like this:

$(this).attr(‘id‘,’newid’).attr(‘onClick‘,’return false;’).attr(‘href‘,’http://www.alexyz.com’);

// UPDATE: Better method

$(“a[href*='search phrase']“).each(function(){
var postId = $(this).attr(“href”).split(‘?’)[1].split(‘=’)[1].split(‘#’)[0]; // of course this will vary by need
$(this).attr(“href“,”?version=full&source=folder&post=”+postId);
});

Support Prototype script.aculo.us and jQuery, page built with Prototype now being pulled into page that uses jQuery

admin — Tue, 02 Nov 2010 17:15:17 +0000

So I developed a handful of sites several years ago using Prototype and script.aculo.us,

but now they’re being pulled into/included/required by pages, a site, that is strictly jQuery,

so I need to amend the Prototype site’s functions to check which library is loaded and then act accordingly.

It begs the question, if I were doing this completely fresh, which pattern (see Design Pattern posts) would I attempt to employ…? For example, I’d love to have the option right now to simply write an adapter pattern function instead of burying this conditional within each function…

Aside from Namespacing either or both libraries of course…

Example:

memory jogger: Chain of responsibility, Polymorphism, Design Pattern reference, Decorator pattern, Singleton

admin — Sat, 21 Aug 2010 20:52:29 +0000

Good stuff, take a moment to refresh and review:

Chain of responsibility:
http://en.wikipedia.org/wiki/Chain-of-responsibility_pattern
Polymorphism:
http://en.wikipedia.org/wiki/Polymorphism_in_object-oriented_programming
JavaScript really OOP?:
http://articles.techrepublic.com.com/5100-10878_11-1044656.html
http://mckoss.com/jscript/object.htm
JS Prototype object:
http://www.javascriptkit.com/javatutors/proto4.shtml
Design Patterns reference/list:
http://en.wikipedia.org/wiki/Design_pattern_%28computer_science%29
Decorator Pattern:
http://en.wikipedia.org/wiki/Decorator_pattern
Loose Coupling def:
http://en.wikipedia.org/wiki/Loose_coupling
Singleton Pattern:
http://en.wikipedia.org/wiki/Singleton_pattern

I always like to have a nice simple AJAX example on hand, you never know…

admin — Wed, 28 Jul 2010 04:52:02 +0000

reference:

http://w3schools.com/php/php_ajax_php.asp

HTML:

Start typing a name in the input field below:

Suggestions:

Script:

// Fill up array with names
$a[]=”Anna”;
$a[]=”Brittany”;
$a[]=”Cinderella”;
$a[]=”Diana”;
$a[]=”Eva”;
$a[]=”Fiona”;
$a[]=”Gunda”;
$a[]=”Hege”;
$a[]=”Inga”;
$a[]=”Johanna”;
$a[]=”Kitty”;
$a[]=”Linda”;
$a[]=”Nina”;
$a[]=”Ophelia”;
$a[]=”Petunia”;
$a[]=”Amanda”;
$a[]=”Raquel”;
$a[]=”Cindy”;
$a[]=”Doris”;
$a[]=”Eve”;
$a[]=”Evita”;
$a[]=”Sunniva”;
$a[]=”Tove”;
$a[]=”Unni”;
$a[]=”Violet”;
$a[]=”Liza”;
$a[]=”Elizabeth”;
$a[]=”Ellen”;
$a[]=”Wenche”;
$a[]=”Vicky”;

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint=”";
for($i=0; $i {
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint==”")
{
$hint=$a[$i];
}
else
{
$hint=$hint.” , “.$a[$i];
}
}
}
}

// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint == “”)
{
$response=”no suggestion”;
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>

Close Fancybox from within, old (1.2) and new (1.3)

admin — Thu, 01 Jul 2010 17:48:02 +0000

In 1.2 this worked:

onclick=”$(“#fancy_outer”,window.parent.document).hide(); $(“#fancy_overlay”,window.parent.document).hide();”

1.3+ this has changed to:

onclick=”parent.$.fancybox.close();“

jQuery replace all img tags with certain source…

admin — Mon, 07 Jun 2010 22:55:31 +0000

$(‘img’).each(function(){
var t=$(this);
var src1 = t.attr(‘src’);
var newSrc = “images/play2.png”;
if(src1 == “images/play.png”)
{
$(this).attr(‘src’, newSrc);
}
});

JavaScript URL parse to load multiple versions

admin — Mon, 07 Jun 2010 22:54:45 +0000

View Tracks »

quick note: Javascript equivalent to PHP isset variable

admin — Sat, 03 Apr 2010 20:57:40 +0000

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

admin — Tue, 30 Mar 2010 16:31:21 +0000

id=”tpom_download” title=”blah” href=”media/tpom.mp3″ onclick=”return false;”>Download

CSS link rollover class change

admin — Mon, 08 Mar 2010 14:24:40 +0000

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

JavaScript image preloader script

admin — Mon, 08 Mar 2010 14:17:34 +0000

var myimages = new Array();

function preloading(){

for (x=0; 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

admin — Mon, 08 Mar 2010 14:16:38 +0000

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

in html place something like:

in onclick or elsewhere place:

scroll.top();

jQuery document ready

admin — Mon, 08 Mar 2010 14:12:25 +0000

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

admin — Mon, 08 Mar 2010 14:11:16 +0000

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:

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′;

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

admin — Mon, 08 Mar 2010 14:09:53 +0000

JavaScript URL sniffer forward redirect

admin — Mon, 08 Mar 2010 14:07:04 +0000

JavaScript use img onload tag to set variable

admin — Mon, 08 Mar 2010 14:04:18 +0000

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

JavaScript getElementsByTagName anchor tag CSS function

admin — Mon, 08 Mar 2010 13:59:42 +0000

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

admin — Mon, 01 Mar 2010 13:55:34 +0000

Inline Javascript CSS properties

dash replaced by capital

href=”#”
onmouseover=”this.style.textDecoration=’none’”
onmouseout=”this.style.textDecoration=’underline’”
style=”color:#FFFFFF text-decoration:underline;”
>
Details