Use of jquery in Xara Web

**cuzimjoesmith** · 27 March 2011, 08:32 PM

Ive seen many tuts on the web etc. for trying to get the use of jquery to show and work in xara web, i may self cant see to figure it out. I did at one point have a program that made a jquery slide show and it showed how to use it in web design software, but it only seem to work with that particular jquery setup.

what im asking is how would one get this ( http://landofcoder.com/our-porfolios...ws-plugin.html ) to work in jquery, ive downloaded the files, i just dont know how to direct xara web to make t show on the site, and where ot place the files too, so xara can read them. also with the place holder what code would i use to direct xara to read those files?

i know this has to be possible cuz within the files when i upload my website it has jquery script files in it, cuz xara uses some jquery features.

**cuzimjoesmith** · 28 March 2011, 10:58 PM

Well i looked into more forums and came across this - <iframe name=myframe src= [target] width=100% height=100% scrolling=no frameborder=0></iframe>

with the folders being js-which has the jquery scripts, a folder images-which has the images in it, and folder CSS which has Css code in it.

i dont know which one to direct the src= to for it to show up in xara web

**cuzimjoesmith** · 30 March 2011, 08:46 PM

bump

**Soquili** · 30 March 2011, 09:23 PM

Joe I'm not sure what you are wanting.

JQuery is a scripting library which is a very advanced subject unto itself with a steep learning curve. http://en.wikipedia.org/wiki/JQuery

Xara Web Designer is a WYSIWYG (web pages that look exactly as you design them, no dynamic movement or alignment) web page creation toolset.

If you have a question about a specific JQuery plugin may I suggest you contact the developer of the plugin about how to configure it for use.

**cuzimjoesmith** · 30 March 2011, 09:45 PM

thanks for a reply, simply what i want is to have any jquery application to show up in xara web, i know jquery has files and folders, so you cant just drop them on and it work.

lets take a php file for EX: if you want it to show up in xara web, you have the php file on FTP, then you have a code such as this :

the src you point to the php file and that script will show up in xara web.

so how do i get jquery to show up in xara web. for example one from this website :
http://www.ourtuts.com/jquery-slider-plugins/

currently this is my website, program used is xara web.
http://www.hype-clan.com/index.htm

**zaphodeist** · 30 March 2011, 10:10 PM

Perhaps this will help - it's the same process for any jquery effects afaik

**cuzimjoesmith** · 30 March 2011, 10:18 PM

Originally Posted by neodeist

Perhaps this will help - it's the same process for any jquery effects afaik

thank you ill give this a try, ( alot of steps but if it works it will be worth it), hopefully it will work with the jquery that i want. ( smart cat )

**Soquili** · 30 March 2011, 10:44 PM

You would download the plug-in you want to use.

I chose the Nivo Slider

In Web Designer create a basic web project and save your .web file and export website to create the files and folders for the site.

From the .zip file containing the Nivo Slider files you will need the .js, .css, and the .png & .gif images.

Put the files from the .zip into the index_htm_files folder.

In the usage example for the Nivo Slider they are hotlinking to the Google JQuery host.
http://nivo.dev7studios.com/#usage

In Web Designer 6 create a placeholder and assign the name <head>, in the Replace with Html option for the placeholder enter the following code:

Code:

<!-- Usually in the <head> section -->
<link rel="stylesheet" href="index_htm_files/nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="index_htm_files/jquery.nivo.slider.pack.js" type="text/javascript"></script>

In Web Designer 6 create another placeholder in the area of the web page you want the slider to appear and put the following code into the Replace with HTML option:

Code:

<!-- Then somewhere in the <body> section -->
<div id="slider">
    <img src="index_htm_files/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="index_htm_files/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="index_htm_files/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="index_htm_files/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

Compare the code in the Nivo Slider page with the code in this post to see how the code was changed for use with Web Designer.

**cuzimjoesmith** · 30 March 2011, 10:51 PM

Originally Posted by Soquili

You would download the plug-in you want to use.

I chose the Nivo Slider

In Web Designer create a basic web project and save your .web file and export website to create the files and folders for the site.

From the .zip file containing the Nivo Slider files you will need the .js, .css, and the .png & .gif images.

Put the files from the .zip into the index_htm_files folder.

In the usage example for the Nivo Slider they are hotlinking to the Google JQuery host.
http://nivo.dev7studios.com/#usage

In Web Designer 6 create a placeholder and assign the name <head>, in the Replace with Html option for the placeholder enter the following code:

Code:

<!-- Usually in the <head> section -->
<link rel="stylesheet" href="index_htm_files/nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="index_htm_files/jquery.nivo.slider.pack.js" type="text/javascript"></script>

In Web Designer 6 create another placeholder in the area of the web page you want the slider to appear and put the following code into the Replace with HTML option:

Code:

<!-- Then somewhere in the <body> section -->
<div id="slider">
    <img src="index_htm_files/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="index_htm_files/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="index_htm_files/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="index_htm_files/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

Compare the code in the Nivo Slider page with the code in this post to see how the code was changed for use with Web Designer.

Wow thanks, this actually seems more understandable than the other one above. Ill try this one first, i completely understand all of what you said. i actually did the first step i just didnt know which codes to add in the place holder. thanks man ill let yall know how it goes.

**Soquili** · 31 March 2011, 12:04 AM

Joe I noticed the example on the web page for the Nivo slider and the example in the .zip did not use the same file names.

The attached .zip contains a working example with the .web file used to create it. Preview within Web Designer does not show the slideshow, you will need to export website then open the htm file with a browser other than IE.