1. If you're receiving a message that you are banned from the Current Events or Politics forums, it's not you specifically: those forums have been hidden for all users. For more info, see here.
    Dismiss Notice

A javascript framework I wrote

Discussion in 'Programming & Software Development' started by yoink, Oct 20, 2008.

  1. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,510
    If you want to modify the templates, ie: the HTML structure of the widget, not the CSS, you can do that by overriding the template functions, so in the date picker we have two functions:

    Code:
    pax.widget.datePick.template
    pax.widget.datePick.templateFooter 
    
    You can simply re-define those after loading the pax javascript library, to render whatever you like - as long as it has the same element ids, everything should work fine.
     
  2. n000b

    n000b Member

    Joined:
    Jul 4, 2002
    Messages:
    2,489
    Location:
    Melbourne
    I think it would make more sense if you do it on your end; it would make integration in to websites a lot easier if your code was as portable as possible, which means you should have class definitions for EVERY HTML element that you use. Sorry, I'm not trying to be lazy and get you to do the work and not me (I will change mine anyway), I just think it makes more sense if the changes are made on your end! :)

    Thanks heaps for the help so far mate, the framework looks brilliant. I'm not a Javascript guru (PHP is my thing) and all of the JS frameworks I've tried to use in the past have been absolute pains in the ass, but yours has been easy to get going (if you ignore my problem with the Scriptaculous code :)).
     
  3. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,510
    Thanks mate :)
    I will definately make the table defintions reset in my CSS, my suggestion was only a temporary fix for you to get going - and I really appreciate you providing me with a real life example, it is a great help :thumbup:

    Please post a link, when your project is ready, (if it is externally viewable), as I'd love to see how people are using it :D
     
  4. n000b

    n000b Member

    Joined:
    Jul 4, 2002
    Messages:
    2,489
    Location:
    Melbourne
    No worries, I'll keep letting you know of any bugs or suggestions as I come across them :)

    Oh one suggestion, do you think it would be possible to specify a time delay on the extended form validation (using the ajaxValidate thing) so that if someone is for example typing a word in to a field that will be sent off to be validated using ajax, the script doesn't send after each letter, rather waiting until the person has finished typing? ie make the script wait 1 second after the last character was typed before sending the request, just so that when typing in "john" it doesn't send off four requests (one per letter), rather it will just send off the one when the person has finished typing.


    Unfortunately I can't as it's a private website, but if I build it in to anything else I'll be sure to let you know :)


    Edit: also, have you ever used iGoogle (Google's personalised home page)? If so, do you know if it would be possible using your framework to build a widget that would allow me to drag/drop <divs> between different columns? I'm not asking you to do it, just want to know if it should be possible before trying myself :)
     
  5. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,510
    Cool, thanks :)
    That is how most of them work - I decided I would do it a bit differently - mine actually cancels the request, before it sends a new one, (I can do that becasue of how I handle ajax requests), so whilst it will appears as though it is sending a whole heap of requests, most of them actually get cancelled before they go anywhere :)
    This gives better performance, especially on a high latency connection. I can easily implement the delay, but the current implementation seems like a better approach in my experience, let me know what you experience, and indeed if it needs to have a delay, and I'll add it.
    No worries, I know what that is like ;)
    yes, you would simply use the effects library, specifically the drag and drop, as seen in the API documentation here. :thumbup:
    I haven't done any demostartion of the fx library, as I'm targeting PAX towards corporate / enterprise users, but the reality is that it can do much more; as you will see on the API page, there are lots of examples.

    I have whipped up a quick demo of drag and drop for you here, it uses Firebug to log events, so you can see how it all hangs together :thumbup:
     
  6. rockuman_ex

    rockuman_ex Member

    Joined:
    Apr 3, 2002
    Messages:
    3,873
    Location:
    Brisbane
    yoink, i fall in love with pax :o:D

    i'll be starting a new project sometime next month, and i'll give your framework a go.

    thanks a lot mate! :thumbup:
     
  7. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,510
    Thanks rockuman_ex, I'll be here, if you need assistance :thumbup:

    @n000b: How did you go with the D'n'd stuff?
     
  8. n000b

    n000b Member

    Joined:
    Jul 4, 2002
    Messages:
    2,489
    Location:
    Melbourne
    Thanks yoink, I didn't realise you had a whole effects library too (I haven't gone through the API documentation yet).

    I should be able to adapt the drag and drop to my needs perfectly, thanks!
     
  9. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,510
    Yeah, there is quite a bit of stuff in there that I haven't really touted on the site :)
    The API documentation is handy, as I've spent quite a bit of time keeping it up to date, so you can find most "hidden" things in here. I especially like the search feature in the top right hand corner: you can quickly find a definition, if you're looking for it - just click on "search", and type in what you want :thumbup:
     
  10. n000b

    n000b Member

    Joined:
    Jul 4, 2002
    Messages:
    2,489
    Location:
    Melbourne
    Is it possible to make your FadeOut function remove an element from the DOM once it has faded out?

    Edit: and I don't think your pax.fx.drag API example works - I'm getting an "obj is null" error on line 312 in pax_dev.js
     
    Last edited: Dec 6, 2008
  11. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,510
    You should write your own function to remove the element on fadeout, it would be quite short - post your html and code, and I can write you one :)
    Also, please post your html and code for the drag & drop, and I'll check it out.
     
  12. oupimiquo

    oupimiquo Member

    Joined:
    Sep 20, 2007
    Messages:
    520
  13. Smokin Whale

    Smokin Whale Member

    Joined:
    Nov 29, 2006
    Messages:
    5,184
    Location:
    Pacific Ocean off SC
    Love how you put in a rickroll for the flash video plugin page :rolleyes:
     
    Last edited: Dec 7, 2008
  14. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,510
    Yes it would - I'm still adding a few features, such as a drop down menu and a tree, plus porting the inputbox widget, (auto completer), to be in line with the widget code spec. Once that is done I will look at browser compatibility; for the moment I have the 2 big ones: IE and FF. I consider Opera / Safari (and Chrome) to be far superior to IE as far as standards go, and it should be much easier to port the code to work with them, rather than IE, so it was more of a strategic decision to not support them before version 1.0 is released.CSS is something I'm actively working, and to be honest, I'm having some issues with IE, specifically for the menu / tree I'm working on at themoment - If you're interested in helping, let me know, that would be great ;)

    Glad you liked it? - Or was that sarcasm? I can't tell anymore... :Paranoid:
     
  15. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,510
    Oh wait, you meant the example? - How did you get it to do that - I can't replicate the problem?
     
  16. Smokin Whale

    Smokin Whale Member

    Joined:
    Nov 29, 2006
    Messages:
    5,184
    Location:
    Pacific Ocean off SC
    The rolleyes smiley is usually a good indication of internet sarcasm :rolleyes:

    Haha I just clicked on it, and I was like damn, I got rickrolled.

    Nice JavaScript stuff you have on there though, nice work. I wish I knew more about it.
     
  17. n000b

    n000b Member

    Joined:
    Jul 4, 2002
    Messages:
    2,489
    Location:
    Melbourne
    My bad, I was putting the Javascript before the element tags and I forgot that I wasn't using the onLoaded function so the Javascript was trying to modify null objects :o

    I do however have another question :)

    For my drag/drop page, I have a number of boxes that I want to be draggable that look like this:

    Code:
    <div id="widget_1" class="widgets">
    				<div class="title">A widget</div>
    				<div class="content">Some random content</div>
    			</div>
    So I've got a few of those on the page (each one will have a different id, ie widget_2 etc). I've assigned each of them to be draggable with this:

    Code:
    pax.fx.drag( $('widget_1') );
    However, when I try to drag each widget, it only moves the div that I click on with my mouse, not the whole thing - ie if I click and drag on the title "A widget", it takes the title div but it leaves the widget_1 div and the content div. Is this expected behaviour or a bug? If it's expected, how do I make it move all 3 divs (widget_1, title and content) when someone clicks and drags somewhere within widget_1?
     
  18. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,510
    What CSS do you have? It probably has to do with position: relative, or position: absolute; please post an example :)
     
  19. n000b

    n000b Member

    Joined:
    Jul 4, 2002
    Messages:
    2,489
    Location:
    Melbourne
    Here's a test page that replicates what I'm talking about:

    Code:
    <html>
    
    <head>
    
    <style type='text/css'>@import url( paxjs/pax/resource/css/pax_consolidated.css );</style>
    
    <style>
    .widgets
    {
    	padding: 0px;
    	margin: 0px auto 25px auto;
    
    	width: 450px;
    }
    
    .widgets .title
    {
    	background-color: #222222;
    	padding: 2px 5px 2px 5px;
    	border-top: 1px solid #885c00;
    	border-bottom: 1px solid #885c00;
    	font-family: Arial, Helvetica, Serif;
    	font-size: 18px;
    	font-weight: bold;
    	font-stretch: condensed;
    	color: #ffaa00;
    
    	cursor: move;
    }
    
    .widgets .content
    {
    	padding: 0px 5px 5px 5px;
    
    	border-bottom: 1px solid #444444;
    }
    
    .widgets .content p
    {
    	font-family: Verdana, Arial, Helvetica, Serif;
    	font-size: 12px;
    	color: #dddddd;
    }
    
    .widgets .content h3
    {
    	font-family: Verdana, Arial Helvetica, Serif;
    	font-size: 18px;
    	color: #ffaa00;
    }
    
    #widgetColumn1
    {
    	float: left;
    
    	width: 47%;
    
    	padding: 0px 10px 0px 10px;
    
    	min-height: 200px;
    }
    
    #widgetColumn2
    {
    	float: right;
    
    	width: 47%;
    
    	padding: 0px 10px 0px 10px;
    
    	min-height: 200px;
    }
    </style>
    
    </head>
    
    <body>
    
    <script src="paxjs/pax/pax_dev.js" type="text/javascript"></script>
    
    <div id="widgetColumn1">
    	<div id="widget_1" class="widgets">
    		<div class="title">Widget 1 Title</div>
    		<div class="content">Widget 1 content</div>
    	</div>
    	<div id="widget_2" class="widgets">
    		<div class="title">Widget 2 Title</div>
    		<div class="content">Widget 2 content</div>
    	</div>
    	<div id="widget_2" class="widgets">
    		<div class="title">Widget 3 Title</div>
    		<div class="content">Widget 3 content</div>
    	</div>
    </div>
    
    <div id="widgetColumn2">
    	<div id="widget_4" class="widgets">
    		<div class="title">Widget 4 Title</div>
    		<div class="content">Widget 4 content</div>
    	</div>
    	<div id="widget_5" class="widgets">
    		<div class="title">Widget 5 Title</div>
    		<div class="content">Widget 5 content</div>
    	</div>
    	<div id="widget_6" class="widgets">
    		<div class="title">Widget 6 Title</div>
    		<div class="content">Widget 6 content</div>
    	</div>
    </div>
    
    <script>
    pax.fx.drag( $('widget_1') );
    pax.fx.drag( $('widget_4') );
    pax.fx.drag( $('widget_5') );
    </script>
    
    </body>
    
    </html>
    If you drag widgets 1, 4 or 5 it only takes the div that has been selected, not the whole thing.
     
  20. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,510
    Ahh, I see what you're doing now :) In order for it to work, you will need to have absolutely positioned containers - if you think about it from a portal point of view, this is a good thing ;) I have put together a demo page for you here. :thumbup:
    Pay special attention to the "handle", plus the "grid" and "snap to line" features, they could come in handy for you. Note: the key here is that everything is absolutely positioned.

    I hope this helps :D

    -- yoink
     

Share This Page

Advertisement: