Tag Archives: javascript

Quickly Hide Trending Tags and Topics from Facebook

Here is a bookmarklet you can use to quickly hide the “Trending” [Tags and Topics] panel from your Facebook wall…

javascript:document.getElementById('pagelet_trending_tags_and_topics').style.display='none';void(0);

That should work in nearly all modern browsers since it uses basic JavaScript that has worked for quite some time to apply element styles.

You may also be able to right-click the following link and save it as a bookmark 😉

FB: Hide Trending Tags/Topics

Auto-claim Zynga Rewards (Everybody & Friends)

Here’s a little bookmarklet I wrote that you can add use automatically collect Zynga rewards while you’re playing games over at Zynga.com. It seems to work for all rewards regardless of which game you’re playing (though I primarily use it for CastleVille).

javascript:var classesPublic='zui_list_itemsContainer zui_zdc_gameboard_rts_rtsList_itemsContainer zui_zdc_gameboard_rts_rtsPublicList_itemsContainer';var classesNeighbors='zui_list_itemsContainer zui_zdc_gameboard_rts_rtsList_itemsContainer zui_zdc_gameboard_rts_rtsNeighborList_itemsContainer';var classesButtons='zui zui_button zui_enabled zui_button_enabled zui_zdc zui_button_zdc zui_zdc_enabled zui_button_zdc_enabled zui_button_tiny zui_button_white';var unclaimedRewardsNeighbors,unclaimedRewardsPublic;var unclaimedNeighborsInit=unclaimedPublicInit=true;function collectRewardsNeighbors(){for(unclaimedIndex=0;unclaimedIndex=1){if(unclaimedNeighborsInit){unclaimedNeighborsInit=false;collectRewardsNeighbors();}else{setTimeout('collectRewardsNeighbors()',1000);}}},false);var parentUnclaimedPublic=document.getElementsByClassName(classesPublic)[0];parentUnclaimedPublic.addEventListener('DOMSubtreeModified',function(){unclaimedRewardsPublic=parentUnclaimedPublic.getElementsByClassName(classesButtons);if(unclaimedRewardsPublic.length>=1){if(unclaimedPublicInit){unclaimedPublicInit=false;collectRewardsPublic();}else{setTimeout('collectRewardsPublic()',1000);}}},false);

What you need to do, is copy the code above and paste it into a new bookmark within your browser. Couldn’t be easier 🙂

Note: This script requires a browser that supports the DOMSubtreeModified – DOM Level 2 Mutation Event (eg: IE9, FF, Safari and Chrome)

jQuery UI replacement for javascript:confirm() links

Here is a nice confirmation handler to replace javascript:confim() links using jQuery UI…

$(function() {
    $('.ui-icon-trash').click(function(event){
        event.preventDefault();
        var targetUrl = $(this).attr('href');
        $('<div title="Confirmation Required"><p>Delete this record?</p></div>').dialog({
            autoOpen: true,
            modal: true,
            resizable: false,
            buttons: {
                Yes: function() {
                    window.location.href = targetUrl;
                },
                No: function() {
                    $(this).remove();
                }
            }
        });
    });
});

I use it for “delete” links (should be obvious) but it can be easily adjusted for any other type of confirmation.

Cheers!

Horizontal icon (footer) layout for Facebook chat contacts window… kind of like the Mac OSX app bar

If you came here looking for the code, that will be a bit further down the road. Here is the plan…

Take this…

Note: The above screen has my hide offline users mod applied 😉

And make it look more like this…

This is a “for fun” project and will be completed as time permits. So check back soon for progress updates.

 

Calculate the total height of child elements of a clipped (overflow: hidden) parent tag

Ever have an element with clipped content and wanted to know the total height of the elements contained therein? I have a client who wants the height of the main content to be clipped to a preset height (don’t ask me why). Which means I need to dynamically add a “read more” link to expand the container and show all the content.

Well, here’s how you calculate the combined height of the children with jQuery… Continue reading Calculate the total height of child elements of a clipped (overflow: hidden) parent tag

Bookmarklet: Submit a login form using javascript within a bookmark

If you’re like me, you have many bookmarks to administration areas that require authentication. For you, this script is a priceless time-saver.

Let’s say your login page has a form similar to the following…

<form action="/login.php" method="post">
    <label>Username: <input type="text" name="user"></label>
    <label>Password: <input type="password" name="pass"></label>
    <input type="submit" value="Log In">
</form>

Some logins simply cannot be stored in the browser’s password system. So, to save you the extra effort of manually logging in on each visit to such pages, create a bookmark that automatically logs you into the system.

Here’s the code to submit that form using a bookmarklet… Continue reading Bookmarklet: Submit a login form using javascript within a bookmark

jQuery Add Bookmark to Favorites Script

Here is a quick example of how to use jQuery along with traditional browser sniffing techniques to create a dynamic “Bookmark Us” link.

Google CDN (latest 1.x version, theme)…

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/blitzer/jquery-ui.css" />

The javascript… Continue reading jQuery Add Bookmark to Favorites Script

Make the jQuery UI Datepicker use a jQuery Button

It has been bugging me for some time that the datepicker widget uses a normal button unless you tell it to use an image. Seeing that we are using the jQuery-UI framework, it makes sense to me that the button should be styled as such. After playing with the selectors and trying it a few different ways, here is how I made that boring datepicker button become a jQuery-UI button (with calendar icon). Continue reading Make the jQuery UI Datepicker use a jQuery Button

Submit ajax form in jQuery-UI Dialog with Enter Key

This question is posted quite a bit and nobody seems to be able to provide a good solution that won’t behave questionably. So here’s my take on it…

$('<div id="myDialog"></div>').appendTo('body').dialog({
    autoOpen: false,
    modal: true,
    closeOnEscape: true,
    buttons: {
        OK: function() {
            $.ajax({
                type: 'POST',
                url: 'save.php',
                data: $('#myDialog :input').serialize(),
                error: function(xml, status, error) {
                    $('#myDialog').html('<p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p>');
                }
            });
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    open: function() {
        $(this).html('').load('form.php');
    },
    focus: function() {
        $(':input', this).keyup(function(event) {
            if (event.keyCode == 13) {
                $('.ui-dialog-buttonpane button:first').click();
            }
        });
    }
});

Note: You can also trigger the event on any element (not just form fields) by using $(this) as the selector.

That’s it, enjoy 🙂

Reset fields to default values using jQuery

Have you ever wanted to reset only fields in a particular section of the form without resetting all of the fields?

Here is how you can achieve this with jQuery 🙂

$('#reset_address').click(function (event) {
 event.preventDefault();
 $('#address_details :input').each(function() {
  if ($(this).is('select')) {
   $(this).val($(this).find('option[selected]').val());
  } else {
   $(this).val(this.defaultValue);
  }
 });
});

#address_details represents a <fieldset> within my <form>. When the user clicks the #reset_address link I revert the fields within the <fieldset> (not the entire form) back to their original values.

Note: defaultValue is a core JavaScript property. A conditional check for <select> was necessary since defaultValue only applies to <input> and <textarea> fields.

IMPROVED jQuery Image Preloader with Rollover Effect (dynamic extensions supported)

This post expands on my original jQuery Preload and Swap Navigation Images post. The original code required you to enter the file extension (eg: jpg, png, gif). The modifications below make this jQuery hover/rollover/swap code totally dynamic 🙂

$(document).ready(function() {
 //preload images
 var preloadedImages = new Array();
 $('#container img').each(function(i) {
 preloadedImages[i] = new Image();
 var ext = $(this).attr('src').split('.').pop();
 preloadedImages[i].src = $(this).attr('src').split('.' + ext).join('-hover.' + ext);
 });
 //rollover effect
 $('#container a').hover(function() {
 var ext = $(this).find('img').attr('src').split('.').pop();
 $(this).find('img').attr('src', $(this).find('img').attr('src').split('.' + ext).join('-hover.' + ext));
 }, function() {
 var ext = $(this).find('img').attr('src').split('.').pop();
 $(this).find('img').attr('src', $(this).find('img').attr('src').split('-hover.' + ext).join('.' + ext));
 });
});

The only significant change from my original code to grab the file extension (var ext = value) before preloading or swapping the images… Continue reading IMPROVED jQuery Image Preloader with Rollover Effect (dynamic extensions supported)