Anyone interested in joining af project: jQuery integration with HTML generated XE

Hi,

I would like to build a javascript library which can be inserted into HTML generated by Xara Extreme. The library will extend the basic javascript library which is generated along with any HTML pages created using Xara Extreme (or web designer I guess).

The goals are to

1. Add options to animate pop-up layers
   For instance so that they fade in, slide out or... I wish to use jQuery library which is cross browser, rock solid and nice library
2. Add standard functionality which can be used in a standard way from Xara
3. Start to explore the HTML generated from Xara TOGETHER with other like minded persons across the web! :)

I wish to use standard web tools. Things like open source and web based code containers...

Please give me feed back!

Hi Sten,
sounds like a very interesting idea. :)
If you need any particular information on the code generated by Xtreme/WD, I'll be glad to help. I can not provide complete documentation as it would be too time consuming to create one. But I can answer any specific questions.

Also keep in mind - following versions of Xtreme/WD may generate significantly different code (both HTML and JS) so that any solutions may become incompatible.
So don't say I didn't warn you. ;)

Good luck!

Great idea!
Count me in

Quote:

---

Originally Posted by ab29

Is not the focus to generate a code which is W3C compliant, which means: moving towards XHTML strict compatibility up to XHTML 5 ?

---

Okay, please hold your horses :) This idea has it focus on being (for starters at least!) a javascript library which will extend the javascript code which is used by any HTML site generated using Xara Extreme and Xara Webdesigner. The HTML generated by XE and XWD is not the focus.

What I see is the option to add visual effects, so that for instance when you see a pop-up layer it will fade in, slide out for instance. Other ideas would be to build a library of elements which could be inserted using the placeholder. You may call them widgets :)

Soon I will return with more information. I expect to work across the net, and would like to use free online services to hold the project. More later...
You can e-mail me if you like at: netsi1964THIS SHOULD BE REMOVED@gmail.com

Indeed.
I suggest moderators can remove the off topic messages from this thread. Alternatively, they could be moved to the new thread.
I hope this thread have interesting and fruitful continuation. :)

OT posts re W3C compliancy query from ab29 have been moved to new thread here

In XHTML strict, for a W3C validation, please put your javascript code between:

PHP Code:

---

<!--  

and

--> 


---

Good idea!!!

Well, considering jquery libraries, one nice implementation is called Qtip. This is a tooltip plugin highly customizable and so which needs a few time for grasping all the possibilities, but one can find some of the main examples on the site of the author.

Quote:

---

Originally Posted by ab29

Well, considering jquery libraries, one nice implementation is called Qtip.

---

I think this particular implementation can be achieved easily with Xara without JQuery. But thanks for the first suggestion.

Quote:

---

Originally Posted by perseus

I think this particular implementation can be achieved easily with Xara without JQuery. But thanks for the first suggestion.

---

Could you share your idea about it ?

Quote:

---

Originally Posted by ab29

Could you share your idea about it ?

---

Sure, here is a sample.

Quote:

---

Originally Posted by perseus

Sure, here is a sample.

---

Ok, that's convincing. Thanks.

Quote:

---

Originally Posted by perseus

Sure, here is a sample.

---

This is actually a good example of what might be accieved using javascript/jQuery.

If you in Xara choose to add a text tooltip to an object that will be implemented automatically by Xara to a SPAN tag with a TITLEattribute. Now excuse me for being a little technical, but using the brilliant selector engine of jQuery you can select all such elements and apply - for instance the mentioned tooltip plugin, and thereby get well, another tooltip type.

Here is the selector (for the technical minded :)):
$('span[title!=""]')
That will return all standard tooltips on the page, and from there it is easy using jQuery plug-ins to apply some behavior to each of the elements.

Don't worrie if you are a graphical nerd - this coding related thread will soon relocate to some other place :) What I however hope to deliver to this forum are some easy-to-use new features for the program which we all love to use!

Quote:

---

Originally Posted by covoxer

...I can not provide complete documentation as it would be too time consuming to create one. But I can answer any specific questions....

---

Thanks! Could you perhaps make a list with a simple description of what the various function does? Or if you have a "less minimized" version of the roe.js, that would be nice! :)

Here is the first code - and at the same time the place to share the code in this project.
It should be saved along with "roe.js" and included (manually/placeholder) into a HTML file generated by Xara. It does nothing much, just locks the calls made from Xara. Oh and I have tried to turn off all the "document.onmousemove" eventhandler... Here goes!
http://gist.github.com/239092

Why have you disabled onmousemove handler?

Quote:

---

Originally Posted by covoxer

Why have you disabled onmousemove handler?

---

Hi John,
For starters - this first upload is done late last night :) and at this state I am only trying to get an overview of what is going on in the Xara javascript library.

I find it bad practice to attach code to global code, unless you cannot do it smarter. Every time the mouse is moved a call is made to the global eventhandler (potentially slowing the page down).

I expect that the elements on the page which needs attention should hook onto events as a situation occures. Like if you move over an element which shows a popup, at that time register a mousemove listener. When the mousemove listener is no longer relevant for that element, remove it again.

Oh and please let me stress that I have not tried to do such collaborative coding before accross the web. I do not expect the discussion on how it should be done/implemented to take place here. Anyone have any experience how to do that?

Quote:

---

Originally Posted by netsi

Anyone have any experience how to do that?

---

Bugzilla is server software designed to help you manage software development.

Could be a useful discussion/collaboration tool ;)

I have decided to try another approach. I have created a Xara document which serves an a test page, project description and version history page.
That also means that for now the github online source library will not be used (for now).

The actual javascript library has a working title "XXExt.js" and resides beside the exported HTML files and is called "XXExt.js". A ZIP file containing everything you need to run it locally can be found here: http://www.netsi.dk/xara/xxext.zip

You can view the alpha version (:)) of the library here:
http://www.netsi.dk/xara/xxext/index.html

If you wish to add some code or have comments you are welcome to send them to me.

Hi

Did this idea die a death? Personally I think it would be fantastic to use jQuery to inject rich content into Xtreme pages.

I used jQuery myself on my first Xara web effort to add a simple screen fade-in when displaying popup layers. This was a straight forward enough once I'd got a basic grasp of the markup structure output by Xara.

If anything can be done to make the next version of Web Designer output HTML even more suited to manipulation / traversal by jQuery then all the better (my technical know how is far too limited to suggest what this would be, maybe the existing markup is quite jQuery 'friendly' enough already!).

Grant

Thinking about this some more, what would probably help to make Xara generated markup easier to use with jQuery would be the ability to control certain tag attributes.

jQuery relies on being able to look through the markup for the bits of the page that you want to manipulate. This would be made easier if Xara was to allow you to put 'markers' in the markup to help identify what your after. By this I would mean the ID, CLASS or even user-defined tag attributes.