changing heading text on Flexislide

[goose87109]

1) Script Title: Flexislide

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...flexislide.htm

3) Describe problem:
I would like the caption text (or "text description") to be <h3> ...currently, it does not support this. When I insert the <h3> "text" </h3> tags inside the variable, the entire slideshow disappears. Is there a way I can increase the size of the text (possibly by creating an additional variable?) so that it is bigger than just the smaller body-text?

Many thanks,
Goose!

[ddadmin]

The script actually just accepts raw, arbitrary HTML for the description portion, so as long as it's valid and escaped properly (ie: apostrophes need to be backslashed for JavaScript
's sake (ie: "I\'m fine"), it should be fine. So for example:

variableslide[1]=['spaceship.gif', 'http://www.space.com', '<h3>Breaking News</h3>Has aliens landed on earth? You decide.']

Does this not work for you?

[goose87109]

Hi DDadmin,
You were right. Apparently, I had used quotes "around my text" instead of an apostrophe. Making this change allowed me to use <h3>

However - now, the text wraps around, even though it is not nearly as long as the picture. Like so:

"Aliens has
Landed"

instead of

"Aliens has Landed"

Any suggestions?
Thanks,
Goose!

[ddadmin]

Hmm sounds like just a HTML formatting issue. Do you have a link to an example page?

[goose87109]

yes, my home page
www.quidnuncs.net

You'll see the slideshow and text at the bottom.

Thank you,
kwg

[ddadmin]

Try adjusting the width of the slideshow so it can accommodate the widest slide. Right now, it's too small:

var slidewidth='130px' //set to width of LARGEST image in your slideshow

[goose87109]

Hello, thanks again for your help.

I'm wanting my slideshow to appear inside a table, to keep the rest of my text alligned. Previously, I just pasted the code at the bottom of the page, outside of any tables and it was good. Now, when I try to move the JS inside a table, I get an "error on page" and what appears to be extra cells in my table and no slideshow at all.

This image will show you how it should appear (imagine slideshow inside table, below "What do you wanna do?")

The problem is when I add different code (AdSense, etc) to the cell/table under "membership login" it distorts the remainder of the page. I'm hoping to control this by more active use of tables and cells.

[goose87109]

Here's my code:

<p>
<table cellspacing="1" cellpadding="1" width="680" border="0">
<tbody>
<tr>
<td>
<table cellspacing="1" cellpadding="1" width="480" border="0">
<tbody>
<tr>
<td>
<h2>Welcome to</h2>
</td>
</tr>
<tr>
<td>
<h1>Quidnuncs.net!</h1>
</td>
</tr>
<tr>
<td>
<p><font size="2">Here you'll find a <a href="http://www.quidnuncs.net/clubportal/clubstatic.cfm?clubID=1436&amp;pubmenuoptID=15787">growing list</a> of everything happening in Albuquerque, and meet a few cool people along the way.&nbsp;&nbsp;Whether you're&nbsp;wanting to learn a new skill, meet new people, or explore all the things the city and state&nbsp;have to offer - we're sure you'll find&nbsp;it all&nbsp;right here on Quidnuncs.net.&nbsp;&nbsp;</font></p>
<p><font size="4">Membership is free, so&nbsp;</font><a href="http://www.quidnuncs.net/clubportal/MemLogin.cfm?clubID=1436"><strong><font size="4">sign in</font></strong></a><font size="4"> and get started today!</font></p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td>
<h3>What do you wanna do?</h3>
</td>
</tr>
</tbody>
</table>
<table cellspacing="1" cellpadding="1" width="480" border="0">
<tbody>
<tr>
<td><!-- Start of Slideshow --><script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['http://www.impelnetwork.com/kelly.gossett/Optimized/Yoga_iStock_000003737291XSmall_0.jpg', "", '<h3>Get in shape!</h3>']
variableslide[1]=['http://www.impelnetwork.com/kelly.gossett/Optimized/SCUBA_iStock_000004592922XSmall_0.jpg', "", '<h3>Learn a new skill!</h3>']
variableslide[2]=['http://www.impelnetwork.com/kelly.gossett/Optimized/Tango_iStock_000002873446XSmall_0.jpg', "", '<h3>Meet new people!</h3>']
variableslide[3]=['http://www.impelnetwork.com/kelly.gossett/Optimized/Father_son_skiing_iStock_000004241276XSmall_0.jpg', "", '<h3>Spend time with family!</h3>']
variableslide[4]=['http://www.impelnetwork.com/kelly.gossett/Optimized/Classroom_iStock_000000854756XSmall_0.jpg', "", '<h3>Develop your career!</h3>']
variableslide[5]=
['http://www.impelnetwork.com/kelly.gossett/Optimized/Hot%2520Air%2520Balloons_iStock_000004618243XSmall_0.jpg', "", '<h3>Get out and play!</h3>']
variableslide[6]=['http://www.impelnetwork.com/kelly.gossett/Optimized/Snowboard_iStock_000002248147XSmall_0.jpg', "", '<h3>Live life!</h3>']
variableslide[7]=['http://www.impelnetwork.com/kelly.gossett/Optimized/Cruise_iStock_000002875579XSmall_0.jpg', "", '<h3>Take a trip!</h3>']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='200px' //set to width of LARGEST image in your slideshow
var slideheight='130px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#F3F3F3'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
<td valign="top" align="center" width="200">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
<!-- Start of Member login area -->
<td valign="top" align="center" width="200">
<table class="table_top_left_right_bottom" cellspacing="0" cellpadding="0" align="center" border="2">
<form action="http://www.quidnuncs.net/clubportal/memLoginExe.cfm" method="post" enctype="multipart/form-data" onsubmit="return _CF_checklogin(this)" name="login">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="2" width="175" bgcolor="#e8e8e8" border="0">
<tbody>
<tr bgcolor="#3c4048">
<td colspan="2">
<div align="center"><span class="FormTextBoldWhite"><font color="#ffffff">Member Login</font></span></div>
</td>
</tr>
<tr bgcolor="#e8e8e8">
<td width="75"><span class="FormText">Login Name</span></td>
<td width="100"><input id="username" size="12" name="username" type="text" /></td>
</tr>
<tr bgcolor="#e8e8e8">
<td width="75"><span class="FormText">Password</span></td>
<td width="100"><input id="password" type="password" size="12" name="password" /></td>
</tr>
<tr bgcolor="#e8e8e8">
<td width="75">&nbsp;</td>
<td width="100"><input type="submit" name="Submit" value="Login" /> <input type="reset" value="Reset" /></td>
</tr>
<tr bgcolor="#e8e8e8">
<td valign="middle" nowrap="nowrap" align="left" width="75" colspan="2">
<table cellspacing="1" cellpadding="1" width="175" border="0">
<tbody>
<tr>
<td>
<p align="center">Not a Member? <a href="https://www.memberize.net/clubportal/MemberJoin.cfm?clubID=1436">Join Us</a> today!</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</form>
</table>
<!-- End of membership login area -->&nbsp;
<table cellspacing="1" cellpadding="1" width="200" border="1">
<tbody>
<tr>
<td><script language="javascript" src="https://tm.perfb.com/eventengine/eventunitjs.php?HANDLE=Quidnuncs&LAYOUTID=3&&STATE=NM&CITY=Albuquerque&FROMDATE=2008-01-24&POSTURL=www.quidnuncs.net&TARGET=new&DISPLAYMAX=5"></script></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</p>

[goose87109]

knock, knock? I'm just wondering if anyone can help with the question above. When I insert the script in a table, it seems to distort the table and the rest of the page. I'd appreciate any help.

[ddadmin]

Sorry for the delay in response, I think I'm just getting confused on what you're trying to do.

Now, when I try to move the JS inside a table, I get an "error on page" and what appears to be extra cells in my table and no slideshow at all.

Copying the code you provided in your very last post above onto a blank page, the slideshow seems to run fine for me, with no JavaScript errors. Is the problem you're describing as seen on http://www.quidnuncs.net/ ?