Results 1 to 3 of 3

Thread: Wrapping Text around a slide show

  1. #1
    Join Date
    Jul 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Wrapping Text around a slide show

    Script Fade in slide show
    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    I was wondering if i could wrap text around a slideshow within a table cell.
    url:
    http://www.docsplacepittsburgh.com/index.html

    related html:

    <td width="380" bgcolor=#990033 valign="top">
    <script language="JavaScript1.2" type="text/javascript">

    /***********************************************
    * Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var slideshow_width='190px' //SET IMAGE WIDTH
    var slideshow_height='145px' //SET IMAGE HEIGHT
    var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

    var fadeimages=new Array()
    //SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
    fadeimages[0]=["button.wbimg/street.JPG", "", ""] //plain image syntax
    fadeimages[1]=["button.wbimg/dsbar.JPG", "http://www.docsplacepittsburgh.com", ""] //image with link syntax
    fadeimages[2]=["button.wbimg/out.JPG","",""] //
    fadeimages[3]=["button.wbimg/out1.JPG", "", ""] //

    ////NO need to edit beyond here/////////////

    var preloadedimages=new Array()
    for (p=0;p<fadeimages.length;p++){
    preloadedimages[p]=new Image()
    preloadedimages[p].src=fadeimages[p][0]
    }

    var ie4=document.all
    var dom=document.getElementById

    if (ie4||dom)
    document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
    else
    document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')

    var curpos=10
    var degree=10
    var curcanvas="canvas0"
    var curimageindex=0
    var nextimageindex=1

    function fadepic(){
    if (curpos<100){
    curpos+=10
    if (tempobj.filters)
    tempobj.filters.alpha.opacity=curpos
    else if (tempobj.style.MozOpacity)
    tempobj.style.MozOpacity=curpos/101
    }
    else{
    clearInterval(dropslide)
    nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj.innerHTML=insertimage(nextimageindex)
    nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
    var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj2.style.visibility="hidden"
    setTimeout("rotateimage()",pause)
    }
    }

    function insertimage(i){
    var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
    tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
    tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
    return tempcontainer
    }

    function rotateimage(){
    if (ie4||dom){
    resetit(curcanvas)
    var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex++
    tempobj.style.visibility="visible"
    var temp='setInterval("fadepic()",50)'
    dropslide=eval(temp)
    curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else
    document.images.defaultslide.src=fadeimages[curimageindex][0]
    curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
    }

    function resetit(what){
    curpos=10
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    if (crossobj.filters)
    crossobj.filters.alpha.opacity=curpos
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=curpos/101
    }

    function startit(){
    var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.innerHTML=insertimage(curimageindex)
    rotateimage()
    }

    if (ie4||dom)
    window.onload=startit
    else
    setInterval("rotateimage()",pause)

    </script>
    <b>
    Now celebrating 20 years in the heart of Shadyside, Doc's Place is known to locals as one of the best singles spots in town. From the upstairs HideAway (non- smoking martini bar), to the heated, outside deck, to the classic, main bar downstairs, Doc's Place offer's something for everyone. Though known for it's atmosphere, Doc's place has great food too. An extensive menu compliments the diversity of people that you might otherwise not expect to see in downtown Shadyside. Oh, and don't forget the game! Doc's place has several TV's and satellite and is sure to be showing the game that you are looking to watch. From a night out with friends to a private, catered event, Doc's Place in Shadyside is simply your best choice. Stop in and see for yourself!

    </td>
    Thanks,
    Hiker

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Most likely this can be accomplished using the 'float' property and possibly the 'clear' property of the style attribute(s) for the text and possibly the script itself. To do that, you will need to wrap the text in a division to give it style:

    <div style="float:left">

    text goes here

    </div>

    Try that, also try float:right. Also try putting this text division before the script in the cell using left then right for float, to see what that gets you. If none of these four 'gets it' then try applying the float to the script as well. Do it the same way, wrap the script in a division and give that division the style as mentioned for the text. You may have to play around a bit, floating one left, the other right, floating one but not the other, putting one first in the cell, then the other etc., checking it in the browser(s) to see what each looks like.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That worked! (wrapping a div around the script and one around the text, floated in different directions) Thank you. For style reasons, i decided not to wrap the text, but certainly will use this in the future.
    Kind Rgds,
    Hiker

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
  •