Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hv Menu and slideshow conflict

    Hi There,

    I have read almost all threads with this subject but still am unable to solve this problem.

    When i use the Blending image slideshow my Hv menu disappears. I tried a lot of suggestions that some great people made but still it didn't work. Please can someone help me out

    There is the script

    <html>
    <head>
    <title>
    <style type="text/css">
    <!--
    .style1 {
    font-size: 9px;
    font-family: Arial, Helvetica, sans-serif;
    }
    .style4 {
    color: #FFFFFF;
    font-weight: bold;
    }
    .style5 {
    font-size: 16px;
    font-weight: bold;
    }
    .style6 {
    font-size: 12px;
    font-weight: bold;
    color: #FF0000;
    }
    .style7 {
    color: #006600;
    font-weight: bold;
    }
    .style8 {color: #FF0000}
    .style16 {
    font-size: 14px;
    color: #000000;
    }
    -->

    </style>
    <link rel="shortcut icon" href="/favicon.ico" />
    </head>

    <body bgcolor="#FFFFFF" text="#000000">
    <script type='text/javascript'>

    //HV Menu- by Ger Versluis (http://www.burmees.nl/)
    //Submitted to Dynamic Drive (http://www.dynamicdrive.com)
    //Visit http://www.dynamicdrive.com for this script and more

    function Go(){return}
    </script> <script type='text/javascript' src='exmplmenu_var.js'></script> <script type='text/javascript' src='menu_com.js'></script>
    <noscript>
    Your browser does not support scrip
    </noscript>
    <style type="text/css">
    #imageinfo {
    font-weight: bold;
    }
    </style>
    <script type="text/javascript">

    //***********************************************************
    // Blending Image Slide Show Script-
    // &#169; Dynamic Drive (www.dynamicdrive.com)
    // For full source code, visit http://www.dynamicdrive.com/
    // Modified by Twey for compatibility, standards compliance,
    // buttons, and stuff. That's "Twey." "Twey." With a "W." :-)
    //***********************************************************

    // specify interval between slide (in milliseconds)
    var slidespeed=3000

    // specify images
    var slideimages = new Array("image1.gif","image2.gif","image3.gif");

    // specify corresponding links
    var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","http://www.geocities.com");

    // specify description for the image
    var slidedescs = new Array("A clock", "A bulb", "Some dice");

    var newwindow = 1; // open links in new window? 1=yes, 0=no
    var autostart = 1; // autostart?

    // Amount of blend with each pass, from 0 (invisible) to 1 (opaque). Lower = smoother, higher = faster. Warning: set it to 0 and it'll never get there :-)
    var blendstep = 0.01;

    // Passes per second.
    var blendspeed = 100;

    // Don't edit below here unless you know what you're doing. :-)

    var imageholder = new Array();
    for (i1=0;i1<slideimages.length;i1++) {
    imageholder[i1]=new Image()
    imageholder[i1].src=slideimages[i1]
    }

    function gotoshow() {
    if (newwindow)
    window.open(slidelinks[whichlink]);
    else
    window.location = slidelinks[whichlink];
    }

    </script>
    <table width="760" border="1" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td height="1002">
    <table width="760" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td height="100" background="images/banner.jpg">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#006600" height="20">&nbsp;</td>
    </tr>
    <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td height="443" valign="top"><p align="center" class="style5">&nbsp;</p>
    <table width="100%" border="1" cellspacing="0" cellpadding="5">
    <tr>
    <td valign="top">

    <a href="javascript:gotoshow()"><img src="bs00847a.gif" id="slide" border="0" style="width:97;height:100;" /></a>
    <img src="http://www.dynamicdrive.com/dynamicindex4/hh01478a.gif" id="nextImage" style="position:absolute;visibility:hidden;" />
    <br />
    <input id="prev" type="button" onClick="slideit(true);" value="Previous" />
    <input id="stopstart" type="button" onClick="stopstart();" value="Start" />
    <input id="next" type="button" onClick="slideit(false);" value="Next" /><br />
    <p id="imageinfo"></p>

    <script type="text/javascript">

    blendspeed = 1000 / blendspeed;

    var whichlink=0,
    whichimage=-1,
    playing = false,
    blenddelay = blendspeed * 1 / blendstep,
    desc = document.getElementById("imageinfo"),
    imgnum = 0,
    w3cOpacity = (typeof document.images[0].style.opacity != "undefined"),
    mozOpacity = (typeof document.images[0].style.MozOpacity != "undefined"),
    ieOpacity = (typeof document.images[0].filters != "undefined"),
    slideThread = null, blendThread = null,
    first = true;

    if(w3cOpacity) {
    document.images['slide'].style.opacity = "0.99";
    document.images['nextImage'].style.opacity = "0.0";
    } else if(mozOpacity) {
    document.images['slide'].style.MozOpacity = "0.99";
    document.images['nextImage'].style.MozOpacity = "0.0";
    } else if(ieOpacity) {
    document.images['slide'].style.filter = "progidXImageTransform.Microsoft.Fade(duration=" + blenddelay / 1000 + ")";
    } else {
    blenddelay = 0;
    }

    function midBlend(oldImage, newImage) {
    if((w3cOpacity && parseFloat(newImage.style.opacity) > 0.95) || (mozOpacity && parseFloat(newImage.style.MozOpacity) > 0.95)) {
    oldImage.src = newImage.src;
    if(w3cOpacity) {
    oldImage.style.opacity = "0.99";
    newImage.style.opacity = "0.0";
    } else if(mozOpacity) {
    oldImage.style.MozOpacity = "0.99";
    newImage.style.MozOpacity = "0.0";
    }
    blendThread = null;
    return;
    }

    if(w3cOpacity) newImage.style.opacity = parseFloat(newImage.style.opacity) + blendstep;
    else if(mozOpacity) newImage.style.MozOpacity = parseFloat(newImage.style.MozOpacity) + blendstep;

    if(w3cOpacity) oldImage.style.opacity = parseFloat(oldImage.style.opacity) - blendstep;
    else if(mozOpacity) oldImage.style.MozOpacity = parseFloat(oldImage.style.MozOpacity) - blendstep;

    blendThread = setTimeout("midBlend(document.getElementById('" + oldImage.id + "'), document.getElementById('" + newImage.id + "'))", blendspeed);
    }

    function imageBlend(oldImage, newImage) {
    if(!w3cOpacity && !mozOpacity && !ieOpacity) { oldImage.src = newImage.src; return; }
    if(blendThread != null) return;
    if(ieOpacity) {
    oldImage.filters[0].apply();
    oldImage.src=imageholder[whichimage].src;
    oldImage.filters[0].play();
    return;
    }
    newImage.style.width = oldImage.style.width;
    newImage.style.height = oldImage.style.height;
    newImage.style.top = oldImage.offsetTop + "px";
    newImage.style.left = oldImage.offsetLeft + "px";
    if(w3cOpacity) { newImage.style.opacity = "0.0"; oldImage.style.opacity = "0.99"; }
    else if(mozOpacity) { newImage.style.MozOpacity = "0.0"; oldImage.style.MozOpacity = "0.99"; }
    else if(ieOpacity) { oldImage.filters[0].apply(); oldImage.src = newImage.src; oldImage.filters[0].play(); }
    newImage.style.zIndex = 1;
    oldImage.style.zIndex = 0;
    newImage.style.visibility = "invisible";
    if(!ieOpacity) midBlend(oldImage, newImage);
    }

    desc.innerHTML = "Description: <span id=\"imagedesc\" style=\"font-weight:normal;\">" + slidedescs[0] + "</span><br />Picture <span id=\"imagenumber\">1</span> of " + slidelinks.length;
    desc = document.getElementById("imagedesc");
    imgnum = document.getElementById("imagenumber");

    function slideit(back) {
    if (!document.images || blendThread != null) return;
    clearTimeout(slideThread);

    // Movement
    whichlink = whichimage;
    if(back) whichimage -= 1;
    else whichimage += 1;

    // Error checking and boundaries
    if(!imageholder[whichimage]) {
    if(whichimage < 0) whichimage = slidelinks.length - 1;
    else whichimage = 0;
    }

    // Display
    document.images['nextImage'].src = imageholder[whichimage].src;
    if(!first) imageBlend(document.images['slide'], document.images['nextImage']);
    else document.images['slide'].src = imageholder[whichimage].src;
    desc.innerHTML = slidedescs[whichimage];
    imgnum.innerHTML = whichimage + 1;

    // Animation
    if(!playing) return;
    slideThread = setTimeout("slideit(false)", slidespeed+blenddelay);
    }

    function stopstart() {
    playing = document.getElementById("prev").disabled = document.getElementById("next").disabled = !playing;
    document.getElementById("stopstart").value = (playing ? "Stop" : "Start");
    if(playing) slideit(false);
    else clearTimeout(slideThread);
    }

    function popSel() {
    selectel = document.getElementById("selectimage");
    selectel.onchange = function() {
    if(this.value != "NONE" && this.value != whichimage) {
    if(blendThread != null) {
    selectel.selectedIndex = 0;
    return;
    }
    whichimage = parseInt(this.value) - 1;
    slideit(false);
    }
    }

    for(var fish=0;fish < imageholder.length;fish++) {
    var blah = document.createElement('option');
    blah.value = fish;
    blah.innerHTML = slidedescs[fish];
    selectel.appendChild(blah);
    }
    }

    onload = function() {
    slideit(false);
    first = false;
    if(autostart) document.getElementById("stopstart").click();
    popSel();
    }

    </script>





    &nbsp;</td>
    <td valign="top">&nbsp;</td>
    </tr>
    <tr>
    <td width="50%" valign="top"><div align="center">
    <table width="100%" border="0" cellspacing="0" cellpadding="2">
    <tr>
    <td width="100"><div align="center">
    <p><a href=""></a><a href=""></a></p>
    </div></td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </div></td>
    <td width="50%" valign="top"><div align="center">
    <table width="100%" border="0" cellspacing="0" cellpadding="2">
    <tr>
    <td width="100"><a href=""></a></td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </div>
    <div align="center"></div></td>
    </tr>
    <tr>
    <td width="50%" height="133" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2">
    <tr>
    <td width="100">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table></td>
    <td width="50%" valign="top">&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td valign="top"><table width="100%" border="1" cellspacing="0" cellpadding="5">
    <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td width="100" valign="top">&nbsp;</td>
    <td valign="top">&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td valign="top"><table width="100%" border="1" cellspacing="0" cellpadding="5">
    <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td width="100" valign="top">&nbsp;</td>
    <td valign="top">&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td valign="top"><table width="100%" border="1" cellspacing="0" cellpadding="5">
    <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td width="100" valign="top">&nbsp;</td>
    <td valign="top">&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table></td>
    </tr>
    </table>
    <td width="200" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td height="497"><table width="100%" border="1" cellspacing="0" cellpadding="5">
    <tr>
    <td height="27" bgcolor="#FFFFFF">&nbsp;</td>
    </tr>
    <tr>
    <td height="72">&nbsp;</td>
    </tr> <tr>
    <td height="57">&nbsp;</td>
    </tr> <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td height="62">&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td height="200" valign="top"><a href=""></a></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><div align="center"><a href=""></a> </div></td>
    </tr>
    <tr>
    <td height="66"><table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td valign="top"><a href="catalogue.htm"></a></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td height="25" valign="top"><div align="center"><br>
    </div></td>
    </tr>

    </table> </td>
    </tr>
    </table></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <p>&nbsp;</p>
    <hr width="60%">
    <div align="center"></div>
    <p>&nbsp;</p>
    </body>
    </html>





    Thanks a lot

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    Code:
    newImage.style.visibility = "invisible";

    are you sure you want to be setting the newImage visibility to invisible?
    I dont see where you make it visible again.... which I'm assuming you want.
    if you never change its visibility back, it wont show, even if you change its opacity...

    and instead of visibility, try using style.display= none/block
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    VR2
    VR2 is offline
    New Coder
    Join Date
    Jul 2006
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Besides, isn't it...

    obj.style.visibility = "hidden";
    and
    obj.style.visibility = "visible";

    or is "invisible" also a valid input for that property?

  • #4
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, Brandon

    I'm very new to webdesigning and javascripting, After playing around i found out that if, this is set to visible (newImage.style.visibility = "invisible" Then there is a duplicate image that shows outside my page (in Firefox 2.0 only). it works fine with IE. therefore i set it to invisible. but it works for sure.

    Can someone please figure out why my Hv menu disappears????
    Last edited by bornfree; 11-17-2006 at 04:18 AM.


  •  

    Posting Permissions

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