M Tschofen's Library tagged effects →  View Popular

Here is a better way of handling the IE placeholder problem…

In the head tag of index.html use the following:

<!–[if IE]>
    <style>
        .widget-placeholder { height: auto !important; min-height: 120px;}
    </style>
<![endif]–>

i have used widget for inettuts-with-cookies in our website, here default widget everything comes with movable and dragable option. but i used add more widget..

code given below:

insertWidget(”#column1″, {

color: “blue”,

title: “Testing”,

content: “Testing content from guna”

});

function insertWidget(where, opt) {

var selectorOld = iNettuts.settings.widgetSelector;

iNettuts.settings.widgetSelector = ‘.new’;

clonewidget = ”+opt.title+”+opt.content+”;

$(where).append(clonewidget);

iNettuts.addWidgetControls();

iNettuts.settings.widgetSelector = selectorOld;

iNettuts.savePreferences();

I encountered some small problem, when you change

the body to an fix width and center it with margin: 0 auto,

the dragging doesn’t behave as is should.

After you clicked the handle the and start moving the mouse

the whole widget jumps X pixel to the right.

where X = (widthHTML - widthBody) / 2

The issue appears at least with the following browsers:

- Firefox 3.0.5 and IE 7

but not in Safari 3.2.1

I modified this script so it can works with php.

Insteed using Javascript to create cookie, I prefer using PHP to do that.

I used Ajax method to heandle this proccess.

I hope this API could make more easy for those who wan to store in DB and any server-side prossess.

You can download the source code here:

http://www.kandar.info/dt/inettuts_with_php.tar.gz

SOLVED: jquery-1.3.2.min.js (uncaught exception: Syntax error, unrecognized expression: ))

JUST CHANGE var notSortable = ”; TO var notSortable = null;

Adding a new widget.

Not sure if this the best way to do this, but it seems to work for me.

1. Make a “hidden” widget by setting the display (inline style attribute or in the css file)to none.

2. On the create new widget event (button, anchor or whatever), clone the hidden widget (do a deep clone by setting the parameter for clone to true)

Here is my code: — assume that there is a “hidden” widget with a unique id

var new_widget = $(’#newwidget’).clone(true); $(’#column2′).append(new_widget); $(’.column’).sortable(’option’,'items’,’.widget’); $(’.column’).sortable(’option’,'connectWith’,’.column’); new_widget.find(’div.widget-content’).html(”Added new Widget “);

new_widget.show(’slow’);

Correction for the IE placeholder issue.

The issue is in IE the placeholder has a default height which does NOT change based on the height of the widget/module you are trying to move around.

I have heavily modified the code so I hope this still matches the demo here. Put this block of code after the start and before the stop events $(settings.columns).sortable({

sort: function(e,ui) {

ui.placeholder

.width(ui.helper.width())

.height(ui.helper.height());

},