Jan
18

jQuery Sortable Placeholder Height Issue

Today I searched jQuery Sortable Placeholder Height Issue because when I dragged my sortable list the placeholder was shrinking to have a 0 height. It was tough tell where exactly I was moving it to. I needed to get this working or it would drive me crazy. So I tried a couple things before I found a solution. I made sure that there was a height on the element and in my jQuery call I used the options placeholder: ‘ui-state-highlight’ and forcePlaceholderSize:true, none of these things worked. Then I found that you could set the height of the placeholder on the start event of your sortable like this. 

$( ".selector" ).sortable({
   placeholder: 'ui-state-highlight',
   start: function(event, ui) { 
        ui.placeholder.height(ui.item.height());
   }
});

Once I added this code and refreshed, it a beautiful site to see a jQuery sortable placeholder work.

May
11

Make AJAX Call To A Different Domain Using PHP & JQuery

Today I Searched how to make an AJAX call to a URL on a different domain. My first attempt failed with a security error. I dug into the problem a bit and found out that PHP can be used as a proxy to fetch the web content.

AJAX Calls PHP Script On Your Domain -> PHP Script Fetches Content From Remote Domain -> PHP Script Returns The Remote Data Back To The AJAX Call

Below is a sample PHP script that I found and tweaked.

// Set your return content type
header('Content-type: text/html');

// Website url to open
$daurl = 'http://www.otherdomain.com/index.php?sku=' . $_GET["sku"];

// Get that website's content
$handle = fopen($daurl, "r");

// If there is something, read and return
if ($handle) {
    while (!feof($handle)) {
        $buffer = fgets($handle, 4096);
        echo $buffer;
    }
    fclose($handle);
}

Below is the AJAX call to load the content into a div using JQuery

$("#loadremotecontent").load('getprice.php?sku=322000');

The script could be further modified to pass in the entire URL as a parameter so it could be more generic. I would love to hear about other cross domain AJAX options if anyone has any other suggestions.

Feb
01

Round IE Corners

Today I searched Round IE Corners and found a solution that works great with jquery UI. CurvyCorners is a free JavaScript Library made to handle rounding on all browsers, even browsers that don’t support it. CurvyCorners will use the native css3 border-radius if available other wise it will add the images nessacary to round your element. All you need to do to implement CurvyCorners is add the JavaScript file and add a rounding css class to your elements that you want to round and Curvy does the rest. Below is an example of the CSS that jQuery uses to round corners that works perfectly with CurvyCorners.

.ui-corner-all {
 -moz-border-radius: 4px/*{cornerRadius}*/;
 -webkit-border-radius: 4px/*{cornerRadius}*/;
}
Go back to top