Implementation of split panes is not a big deal. You just need to know how to
properly wrap your div elements and you need to write a javascript function
that need to be bound with onmousemove event of the split pane div. You also
need to check in function that the mouse button is clicked.
Basically you need 1 parentDiv to contain 3 divs "leftDiv, splitDiv and
rightDiv" or "topDiv, splitDiv and bottomDiv". The width of the all the divs
will be 100% except the splitDiv. You can set it to 3px so at least the
splitDiv is visible enough to drag. Then the javascript function will be
something similar to following:
function moveSplitPane(e) {
// You need to read the event properties and adjust the width of the
left/right pane or top/bottom pane accordingly. Your left/right top/bottom div
controls should have overflow: auto css style property so the automatically
show scrollbars if contents with div overflow.
}
Refer to the following link to know the event properties.
http://www.quirksmode.org/js/events_properties.html
Good Luck!
Farrukh
On 2010-08-05, at 3:45 AM, David BON wrote:
> After reading that page, I remember to have seen it before but it lack of the
> Horizontal split capability...
>
> So, back to jQuery...
>
> Regards.
>
> David B.
>
> Le 5 août 10 à 00:30, David BON a écrit :
>
>> You're right, all that is to achieve my goal to include splitpanes in a
>> webObjects app.
>>
>> What you say with a prototype solution sounds perfect! I'll try that.
>>
>> I suppose I will have another opportunity later to enter into this jQuery
>> thing...
>>
>> Thanks a lot.
>>
>> David B.
>>
>> Le 4 août 10 à 23:01, Farrukh Ijaz a écrit :
>>
>>> David, I guess you're struggling with the issue of implementing split panes.
>>>
>>> Check the following site:
>>>
>>> http://www.jools.net/projects/javascript/splitpanes/ (right-click and view
>>> source to see which *.js are included)
>>>
>>> It shows split panes demo but does not use jQuery. It's based on prototype
>>> extensions. You may need to use this.
>>>
>>> Farrukh
>>>
>>> On 2010-08-05, at 2:44 AM, David BON wrote:
>>>
>>>> Thanks again, and it is what I was "affraid" of (and what confuses me)
>>>> :-(...
>>>>
>>>> I really dislike such local modification of external library as any
>>>> forthcoming update could leave this copy changed aside (or erase the
>>>> changes)...
>>>>
>>>> We miss a mecanism that could allow to change automatically all '$' of an
>>>> included resources in a wod file at the moment where we include it (like a
>>>> replace attribute with a regex in the include instruction <script>)...
>>>> No idea how to do that for now (and no time to think more to it).
>>>>
>>>> Thanks again,
>>>>
>>>> Regards.
>>>> David B.
>>>>
>>>> Le 4 août 10 à 22:35, Farrukh Ijaz a écrit :
>>>>
>>>>> This is not so straight as splitter.js is using jQuery. So even if you
>>>>> use jQuery.noConflict(), it won't work as splitter.js will be using $
>>>>> sign assuming it's using jQuery but in fact the $ sign is occupied by
>>>>> prototype library.
>>>>>
>>>>> A simple solution to this is copy the splitter.js to
>>>>> splitter-jquery-noconflict.js
>>>>>
>>>>> Use any good text editor and find all the instances of $( and $.( in the
>>>>> splitter-jquery-noconflict.js and replace it with jQuery( and jQuery.(
>>>>> respectively. Make sure you don't replace the string literal $ sign with
>>>>> jQuery :)
>>>>> The instead of using splitter.js in your component, use
>>>>> splitter-jquery-noconflict.js after the <script
>>>>> type="text/javascript">jQuery.noConflict()</script>
>>>>>
>>>>> So it will be something as follows:
>>>>>
>>>>> <script type="text/javascript" src="/path/to/jquery.js"></script>
>>>>> <script type="text/javascript">
>>>>> jQuery.noConflict();
>>>>> </script>
>>>>> <script type="text/javascript"
>>>>> src="/path/to/splitter-jquery-noconflict.js"></script>
>>>>>
>>>>> Farrukh
>>>>>
>>>>> On 2010-08-05, at 2:26 AM, David BON wrote:
>>>>>
>>>>>> Thanks. Seems really straightforward.
>>>>>>
>>>>>> Last doubt: shall I put this onConflict call before the inclusion of the
>>>>>> splitter.js (as it could use the '$')?
>>>>>>
>>>>>> Regards.
>>>>>> David B.
>>>>>>
>>>>>> Le 4 août 10 à 22:19, Farrukh Ijaz a écrit :
>>>>>>
>>>>>>> Hi David,
>>>>>>>
>>>>>>> You simply need to add following two lines in the head section:
>>>>>>>
>>>>>>> <script type="text/javascript" src="/path/to/jquery.js"></script>
>>>>>>> <script type="text/javascript">
>>>>>>> jQuery.noConflict();
>>>>>>> </script>
>>>>>>>
>>>>>>> From there onwards you need to use jQuery instead of $ sign.
>>>>>>> Alternatively you can use a short name such as:
>>>>>>>
>>>>>>> <script type="text/javascript">
>>>>>>> var j = jQuery.noConflict();
>>>>>>> </script>
>>>>>>>
>>>>>>> And instead of using $ sign or jQuery, you can use 'j' to invoke jQuery
>>>>>>> methods.
>>>>>>>
>>>>>>> Hope this would help.
>>>>>>>
>>>>>>> Farrukh
>>>>>>>
>>>>>>> On 2010-08-05, at 2:10 AM, David BON wrote:
>>>>>>>
>>>>>>>> Hi List,
>>>>>>>>
>>>>>>>>
>>>>>>>> I try for the first time to use JQuery in a WO/Wonder/Ajax App (WO
>>>>>>>> 5.3.3).
>>>>>>>>
>>>>>>>> I'm aware of the conflict with WonderAjax library and I know that I
>>>>>>>> have to use jQuery.noConflict(). Problem is I just don't get how to
>>>>>>>> use that :-( !
>>>>>>>>
>>>>>>>> What I want is to use the splitter.js component based on jQuery (to
>>>>>>>> actually get those splitpanes on my pages).
>>>>>>>>
>>>>>>>> Therefore I included in my pageWrapper.wo :
>>>>>>>> <head>
>>>>>>>> /.../
>>>>>>>> <script type="text/javascript"
>>>>>>>> src="JavaScript/jQuery/jquery.js"></script">
>>>>>>>> <script type="text/javascript"
>>>>>>>> src="JavaScript/jQuery/splitter.js"></script>
>>>>>>>> </head>
>>>>>>>>
>>>>>>>> I read on this link: Using jQuery with Other Libraries that I have to
>>>>>>>> insert in the <head> section the noConflict() function:
>>>>>>>> <script type="text/javascript"
>>>>>>>> src="JavaScript/jquery.js"></script">
>>>>>>>> jQuery.noConflict();
>>>>>>>> // Use jQuery via jQuery(...)
>>>>>>>> jQuery(document).ready(function(){
>>>>>>>> jQuery("div").hide();
>>>>>>>> });
>>>>>>>> // Use Prototype with $(...), etc.
>>>>>>>> $('someid').hide();
>>>>>>>> </script>
>>>>>>>>
>>>>>>>> I see with firebug that some Ajax javascript are included in the
>>>>>>>> <head> after those lines and now I'm confused on how to manage that
>>>>>>>> (if it's possible), where exactly shall I put those line, what shall I
>>>>>>>> use in place of the 'someid' in last sentence above?
>>>>>>>>
>>>>>>>> Any hints?
>>>>>>>>
>>>>>>>> Thanks in advance.
>>>>>>>>
>>>>>>>> David B.
>>>>>>>>
>>>>>>>> _______________________________________________
>>>>>>>> Do not post admin requests to the list. They will be ignored.
>>>>>>>> Webobjects-dev mailing list ([email protected])
>>>>>>>> Help/Unsubscribe/Update your Subscription:
>>>>>>>> http://lists.apple.com/mailman/options/webobjects-dev/farrukh.ijaz%40fuegodigitalmedia.com
>>>>>>>>
>>>>>>>> This email sent to [email protected]
>>>>>>>
>>>>>>
>>>>>> _______________________________________________
>>>>>> Do not post admin requests to the list. They will be ignored.
>>>>>> Webobjects-dev mailing list ([email protected])
>>>>>> Help/Unsubscribe/Update your Subscription:
>>>>>> http://lists.apple.com/mailman/options/webobjects-dev/farrukh.ijaz%40fuegodigitalmedia.com
>>>>>>
>>>>>> This email sent to [email protected]
>>>>>
>>>>
>>>
>>
>> _______________________________________________
>> Do not post admin requests to the list. They will be ignored.
>> Webobjects-dev mailing list ([email protected])
>> Help/Unsubscribe/Update your Subscription:
>> http://lists.apple.com/mailman/options/webobjects-dev/bon_d%40mac.com
>>
>> This email sent to [email protected]
>
> _______________________________________________
> Do not post admin requests to the list. They will be ignored.
> Webobjects-dev mailing list ([email protected])
> Help/Unsubscribe/Update your Subscription:
> http://lists.apple.com/mailman/options/webobjects-dev/farrukh.ijaz%40fuegodigitalmedia.com
>
> This email sent to [email protected]
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list ([email protected])
Help/Unsubscribe/Update your Subscription:
http://lists.apple.com/mailman/options/webobjects-dev/archive%40mail-archive.com
This email sent to [email protected]
