How to create a flash tab with links in XXP5

**MarciaB** · 21 November 2009, 09:33 AM

Hi all, I'm working currently on my own website in XXP5: http://www.marciamedia.com
What I want to do is when the visitor clicks on the portfolio tab (bottom left), this tab opens slowly (flash) and reveals my portfolio (obviously). On the opened tab there'll be thumbs which I want to link to a popup window or website. How to do this ???

**Albacore** · 21 November 2009, 09:53 AM

Marcia, I can't get your portfolio tab to work? If you do a search in the web design forum I think it was Steve who had either a small programme to do it in Flash or it was a js. script to run a slide show for a portfolio. Can I make a small comment on the look of your site for as your describing yourself as a Web Designer there is not a great deal of illustration to encourage people to press your portfolio tab. In my opinion you have to grab peoples attention on your index page to make them look further into your site.

**MarciaB** · 21 November 2009, 10:04 AM

No, the tab doesn't work yet, that's why I'm asking your help... I don't know how to make it work... You're right about the illustrations, but the website is still in a very early stage and I'm not sure yet how the finished site will look. Ofcourse, on the tab people'll see a lot of small illustrations (thumbs) and I like a sober look.

**ab29** · 21 November 2009, 10:46 AM

Bonjour Marcia,

you can do it with jquery instead of flash, but the tab would be at the top and not at the bottom of the page.

I will make a demo for it a little later in the day.

**Albacore** · 21 November 2009, 10:53 AM

Sorry didn't know it was in its early stages. Have a look at Egg's tutorial here as it might help you to get an idea to do it in Flash: http://talkgraphics.com/showthread.p...=flash+buttons

If it was me that it was doing it and wanted the page or thumbnails to open slowly then I would use a js. script but if you want it Flash how about this: http://www.flshow.net/carousel/fullpage.html

**MarciaB** · 21 November 2009, 12:01 PM

Thanks Albacore, that's a very smooth and beautiful carousel gallery, but that's not what I'm looking for at the moment.
I can live with that ab29 (the tab at the top)
Waiting for your demo..

**ab29** · 21 November 2009, 05:27 PM

So, here is a kind of tutorial for using the toggle function of jquery, which seems to fit with what you asked here, Marcia. There is the demo file attached. It is the first time i write such thing, so i hope this is somewhat clear.

1) Create a new page and export your website into a chosen directory

You have by example a folder called /website, and a subfolder called /index_htm_files,
plus a page called index.htm:

/website
/website/index_htm_files
/website/index.htm

2) Create a subfolder called /js:
/website/js/

3) Download the jquery-1.3.2.min.js to your js folder:
http://code.google.com/p/jqueryjs/do...js&downloadBtn

so that you have:
/website/js/jquery-1.3.2.min.js

4) In xara, create a placeholder next to your index page that you name: <head>

5) In Web Properties, replace the object by the following HTML code:

Code:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
<!--
$(document).ready(function(){

	//Cette ligne cache le conteneur au chargement de la page
	$(".toggle_container").hide(); 

	//le conteneur va s'ouvrir ou se fermer par un clic 
	$("a.trigger").toggle(function(){
		$(this).addClass("active");
		}, function () {
		$(this).removeClass("active");
	});

	//le conteneur va se dérouler suite au clic
	$("a.trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow");
	});

});
-->
</script>

6) Create a button where it is needed, or import an image

7) Create a placeholder superposed to the button and replace the object with the following HTML code:

HTML Code:

<!--Clickable button-->
<a class="trigger" href="#"><img src="index_htm_files/portfolio.png" alt="tab" /></a>

<!--Container-->
<div class="toggle_container">
	<div class="box">
	<!-- Place here your thumbs -->
	<img src="thumbs/thumbs1.png" alt="website1" />
	<img src="thumbs/thumbs2.png" alt="website1" />
	etc...
	</div>
</div>

Note: one can place thumbs in a new folder called "thumbs":
/website/thumbs/

8) Set the new placeholder to transparent, borders included and make it fit exactly to the same dimension and position than the image button.

9) Save the project and export again the website

10) Open the index_htm_file, find the CSS default file and open it into a blocknote or an HTMl editor then add the following line at the end of it:

For setting the border link to transparent:

Code:

.tab a{color: transparent;}

For setting some features inside the container (examples):

Code:

.box{background-color: #443f56; padding: 3px; z-index:100;}

.box img{margin-top:3px;}

**ab29** · 22 November 2009, 10:28 AM

Well, for more convenience, one can put directly the CSS code in the placeholder <head> through Xara, in adding the code like that after the javascript files:

It allows to avoid to go manually into the external files generated by the software. Also, one can add any CSS style by this way. But the major inconvenient, lack or default of Xara products for a webdesigner, is that it doesn't allow to create CSS identifiants like class or id associated to objects, making difficult to work with CSS, while it could be easily implemented as a name function already exists.

Also, one thing which would make the tutorial more user-friendly would be to not create an external folder called thumbs for images, but to add them directly into the page through Xara. Because while doing that they will be automatically put into the index_htm_files folder.

Now, it is very simple to set these images behind the actual background of the page, so that they are hidden to the user. Thus, one can call these images inside the container and work directly with the imported images.

ps: tab refers to a class present into the Xar file but omitted here into the html description above.

**MarciaB** · 22 November 2009, 11:06 AM

Thank you so much for all the work you did ab29 !
As you can see http://www.marciamedia.com I managed to create the jquery and have added a link to the first website that opens in a new window.
But...although the placeholder and the button have exactly the same position and size and the placeholder is on top of the button I can't make the tab transparent, its clickable area is too small and not centered and the thumbs neither. So, if you can spare me a little more of your time, can you tell me how to solve this ?