Question

So, I have this site here where each “tile” on the page is a bookmark to an external page. However, I had a problem when I used traditional anchor tags and used the jQuery-ui movable and resizable effects on the “tiles”.

The links would remain even after the tiles had been rearranged.

So, I need to try a pure jQuery (or JavaScript if more efficient) solution.

I was thinking of just using window.location and jQuery’s .click() but I need some help inserting this into my preexisting jQuery script.

Here is what I have currently:

$(document).ready(function() {

 // We have a hidden field which knows if the tiles are editable (1) or not (2) now just let's make sure it is initiated with zero value because the startup state of button will be "Edit"
 $("#editable").val('0');

 // Loop through the tiles by class
 $('.tile').each(function(){

  // Get the positions from cookies 
  var toppos = $.cookie('uiposy'+$(this).attr('id'));
  var leftpos = $.cookie('uiposx'+$(this).attr('id'));

  // Apply saved positions
  $(this).css('top',toppos+'px');
  $(this).css('left',leftpos+'px');

  // Get the sizes from cookies 
  var sizew = $.cookie('uisizew'+$(this).attr('id'));
  var sizeh = $.cookie('uisizeh'+$(this).attr('id'));

  // Apply saved sizes
  $(this).css('width',sizew+'px');
  $(this).css('height',sizeh+'px');
 });

 // Set the tiles as draggable
 $('.tile'). 
 draggable({
  containment: '#content',
  scroll: false,
  // Watch out for drag action
  stop: function (event, ui) { 
   // Store x/y positions in a cookie when they're dragged
   $.cookie('uiposx'+$(this).attr('id'), ui.position.left, { path: '/', expires: 7 });
   $.cookie('uiposy'+$(this).attr('id'), ui.position.top, { path: '/', expires: 7 });
  }
 });

 // Set the tiles as resizable
 $('.tile').resizable({
  maxHeight: 200,
  maxWidth: 200,
  minHeight: 100,
  minWidth: 100,
  // Watch out for resize action
  stop: function (event, ui) { 
   // Store width/height values in a cookie when they're resized
   $.cookie('uisizew'+$(this).attr('id'), ui.size.width, { path: '/', expires: 7 });
   $.cookie('uisizeh'+$(this).attr('id'), ui.size.height, { path: '/', expires: 7 });
  }
 }); 

 // Make resiable and draggable disabled on start
 $( ".tile" ).resizable( "option", "disabled", true ).removeClass('ui-state-disabled');
 $( ".tile" ).draggable( "option", "disabled", true ).removeClass('ui-state-disabled');

 // Function to run when the editButton is clicked
 $('#editButton').click(function() {

  // Store our "state" in boolean form. 
  var state = ( $("#editable").val() == 0 ) ? false : true;

  // State is true, this means we will disable the tiles.
  // Make the button text "edit" and change the hidden #editable field value to "0"
  if ( state ) { $("#editable").val('0'); $(this).val('Edit'); $('.tile').css('cursor', 'pointer'); }

  // State is true, this means we will enable the tiles.
  // Make the button text "Done" and change the hidden #editable field value to "1"
  else { $("#editable").val('1'); $(this).val('Done'); $('.tile').css('cursor', 'move'); }

  // Apply the state to tiles. also remove the ui-state-disabled class to make sure they're not faded.
  $( ".tile" ).resizable( "option", "disabled", state ).removeClass('ui-state-disabled');
  $( ".tile" ).draggable( "option", "disabled", state ).removeClass('ui-state-disabled');

 });

});

If anyone has a suggestion on the most efficient way to accomplish this, and where to insert this to code and why, please let me know.

Thanks!

Answer 1

You can bind a click event handler to your tiles anywhere in your setup function like so:

$('.tile').bind('click',function (event) {
 if ( $("#editable").val() == 0 ) window.location.href= <your URL here>;
});

This will only follow the links when your links aren’t editable, otherwise it will be ignored.