Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: changing heading text on Flexislide

  1. #1
    Join Date
    Jan 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default changing heading text on Flexislide

    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!

  2. #2
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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:

    Code:
    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?

  3. #3
    Join Date
    Jan 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #4
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

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

  5. #5
    Join Date
    Jan 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yes, my home page
    www.quidnuncs.net

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

    Thank you,
    kwg

  6. #6
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

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

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

  7. #7
    Join Date
    Jan 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Jan 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  9. #9
    Join Date
    Jan 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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/ ?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •