Posts Tagged ‘jquery’

jQuery Degradable Popups

Monday, January 28th, 2008
Posted in Web Development · Tags: ,

Do you want to have image preview popups, but want the links to still work if JavaScript is disabled? The following just changes the href value of the link by inserting the URL it was pointing to into a JavaScript function call.

function pu_preview(url)
{
var width = 760;
var height = 360;
var win_left = (screen.width-width)/2;
var win_top = (screen.height-height)/2;
new_window = window.open(url,'video_player_popup','width='+width+',height='+height+',top='+win_top+',left='+win_left+',toolbar=no,directories=no,status=no,scrollbars=yes,resizable=yes');
if (window.focus)
{
new_window.focus()
}
}
$(document).ready(function(){
$("#gallery a").attr("href", function() { return "javascript:pu_preview('"+this.href+"');" });
});

Here is what your HTML might look like

<a href="http://example.com/images/image.jpg"><img src="http://example.com/images/image_thumb.jpg" alt="" /></a>

Handling Checkboxes, Radio Buttons and Select Options in jQuery

Wednesday, May 30th, 2007
Posted in Web Development · Tags:

I figured I’d share how I’ve dealt with some form elements in jQuery. Sometimes you have to look at the docs a few times before you get what you can do, so I think these examples might help someone out there.

Here is how you can handle a change in a dropdown (SELECT tag with an ID that is “layer_image”):

$("#layer_image").change(function()
{
switch ($(this).val())
{
case '0':
$("#radar_image").hide();
break;
default:
$("#radar_image").show();
}
});

Granted I could of used toggle() to do the same thing I figured it was better to show an example using the switch statement.

Here is an example of handling a checkbox (INPUT tag with an name attribute of “option_linkwindow”):

$("input[@name='option_linkwindow']").click(
function()
{
if ($("input[@name='option_linkwindow']").is(":checked"))
$(".feed/ul>li/a").attr("target","_blank");
else
$(".feed/ul>li/a").attr("target","_self");
$(this).blur();
}
);

Here is another example of handling a checkbox (INPUT tag with a name attribute of “option_summary”):

$("#option_summary").change(
function()
{
$("//li/p").toggle();
$("li[p:hidden]").removeClass("expanded");
$("li[p:visible]").addClass("expanded");
$(this).blur();
}
);

And now an example of handling the following radio buttons:

<input type="radio" name="option_layout" value="0" checked="checked" />
<input type="radio" name="option_layout" value="1" />

And now the jQuery code for handling them:

$("input[@name='option_layout']").change(
function()
{
if ($("input[@name='option_layout']:checked").val())
$(".group").toggleClass("group_vert");
else
$(".group").toggleClass("group_vert");
$(this).blur();
}
);