31 users online (0 members and 31 guests)  


  Results 1 to 7 of 7

Related

  1. Replies: 3
  2. How to make text wrap like this?    Forum: HTML Forum
    Replies: 3
  3. how do i make scrolling text boxs?    Forum: HTML Forum
    Replies: 1
  4. How do you make text.....    Forum: HTML Forum
    Replies: 4
  1. #1
    orisma's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2004
    Location
    london, England
    Posts
    34

    links that make text apear

    hi all I'm trying to save space on my web page ( http://www.freewebs.com/urbanskating
    ) Im trying to add a nice effect where a link makes more text appear , possibly useful
    for "we did this read more> " i but I'm not quite sure what its called so i found a
    web page with it on ( its the site manager page of freewebs.com ) and here's the code that iv narrowed to down to

    <div>
    We hit the 250 views mark! <a href="#" onClick="showHide('instr'); return false;"><SPAN onClick="this.innerHTML=(this.innerHTML=='More Info'?'Hide Info':'More Info');" id="moreInfoLink">More
    Info</SPAN></a><BR>
    <DIV id="instr" style="display:none;">
    <p>Click on any of your files
    or .html file by </p>

    </div>

    but when I try and use it a load of scrip failer message messages come up and it just doesn't want to work , i thought at first that the may be as its liking to a .js file but it
    doesn't seem to be , if anyone could correct the script for me and explain the
    finer points of it that would be great , or is anyone happens to no the name of this type of thing that i could google.

    thanks

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    At the beginning (on page load) the text has a style of display: none. The link just changes that to 'block' or 'inline'.

    http://css.somepeople.net/dynamic This tutorial introduces you to using javascript to change style attributes

    Hope that helps.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    orisma's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2004
    Location
    london, England
    Posts
    34

    Unhappy sorry! not quite what im looking for

    thanks for your help but that not what im after , i want a similar affect but only one link that make diffrent text apper below it .

    thanks anywayz

  4. #4
    orisma's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2004
    Location
    london, England
    Posts
    34

    hi i found the code

    hi, i got hold of some script containg what i want , but still cant understand it.
    Code:
    <html><!-- #BeginTemplate "/Templates/AdvancedMembersBlank.dwt" --><!-- DW6 -->
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <head>
    
    <!-- #BeginEditable "doctitle" --> 
    
    
    
    <!--BROWSER CHECKER-->
    
    
    
    
    
    <title>.:: FreeWebs.com ::. FreeWebs Member [urbanskating] Logged 
    
    In </title>
    
    <script language="JavaScript" src="/JS/utils.jsp?token=1be4e31d8a5708b2100c83047b5"></script>
    
    <script>
    
    function delfunc(delstr, delpath) {
    
      if (window.confirm('Do you really want to delete ' + delstr + '?')) {
      delstr=escape(delstr);
      delstr=delstr.replace('+', '%2B');
        document.location = '/Members/Dispatcher.jsp?token=1be4e31d8a5708b2100c83047b5&section=file&action=delete&path=' + escape(delpath) + '&filename=' + delstr + '&next=%2FMembersA%2FsiteManager.jsp%3Ftoken%3D1be4e31d8a5708b2100c83047b5%26path%3D';
    
       }
    
    }
    
    
    function changetr(thistr) {
    
      document.all[thistr].style.backgroundColor = "#FFFFFF";
    
    }
    
    function changetrb(thistr) {
    
      document.all[thistr].style.backgroundColor = "#EEEEEE";
    
    }
    
    
      function openURL(url) {
        window.open(url);
      }
    
      function toggleDisplay(TDID) {
        var onoff;
        if(document.getElementById(TDID).style.display == 'block') {
          onoff =  'none';
        }
        else {
          onoff = 'block';
        }
        return onoff;
      }
    
      function showHide(TDID) {
        var onoff = toggleDisplay(TDID);
        document.getElementById(TDID).style.display = onoff;
        var i = document.getElementById(TDID+'I');
        if (i == null) return;
        if(onoff=='block') {
          i.src = 'http://images.freewebs.com/Images/dropUp.gif';
        }
        else {
          i.src = 'http://images.freewebs.com/Images/dropDown.gif';
        }
      }
    
      function setHighlight(on, row) {
        if (on) row.style.backgroundColor = '#e0e0e0';
        else row.style.backgroundColor = '#eeeeee';
      }
    
      function setPointer(on, row) {
        if (on) row.style.cursor = 'pointer';
        else row.style.cursor = '';
      }
    
      function goParentDir() {
        var path = '';
        if (path == "") return;
        path = path.substring(0, path.length-1);
        path = path.substring(0, path.lastIndexOf('/')+1);
        var url = 'siteManager.jsp?token=1be4e31d8a5708b2100c83047b5' + '&path=' + path;
        window.location = url;
      }
    
      function dirDelete(fn, hasFiles) {
        if (hasFiles) {
          alert("You cannot delete this folder because it contains the following <BR>files:\n\n"+document.getElementById(fn).value);
          return false;
        }
        else
          return confirm('Are you sure you want to permanently delete this folder?');
      }
    
      function fileDelete() {
        return confirm('Are you sure you want to permanently delete this file?');
      }
    
      function isRowChecked(fn) {
        var cbDels = document.frmSM.cbDelete;
        if (cbDels.length == undefined)
          return (cbDels.checked && cbDels.value == fn);
        for (var i = 0; i < cbDels.length; i++) {
          if (cbDels[i].checked && cbDels[i].value == fn) {
            return true;
          }
        }
        return false;
      }
    
      function toggleChecked(ch) {
        var cbDels = document.frmSM.cbDelete;
        if (cbDels== undefined){
          return null;
        }
        if (cbDels.length == undefined){
          cbDels.checked = ch;
        }
        for (var i = 0; i < cbDels.length; i++) {
          cbDels[i].checked = ch;
          setHighlight(ch,cbDels[i].parentNode.parentNode);
        }
      }
    
      function deleteFiles() {
        return confirm('Your checked files will be PERMANENTLY deleted, are you sure you want to continue?');
      }
    
    </script>
    
    <!-- #EndEditable --> 
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <LINK href="/Styles/styles.css" type=text/css rel=stylesheet>
    
    <SCRIPT type="text/javascript" src="/JS/utils.jsp?token=1be4e31d8a5708b2100c83047b5"></SCRIPT>
    
    </head>
    
    <body bgcolor="#DDDDDD" background="http://images.freewebs.com/Images/canvasback.gif" text="#333333" link="#21659C" vlink="#21659C" alink="#808080" leftmargin="0" topmargin="0" bottommargin="0"
      onLoad="toggleChecked(false);">
    <table width="766" border="0" cellspacing="0" cellpadding="2" align="center" bgcolor="#000000">
      <tr> 
        <td background="http://images.freewebs.com/Images/leftshadow.gif">&nbsp; </td>
        <td><table border="1" width="750" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
            <tr valign="bottom"> 
              <td height="98" colspan="3" bordercolor="#FFFFFF"> 
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            </tr>
            <tr> 
              <td valign="top" width="130" bgcolor="#EFEFEF" height="100%"> 
                
    <script language="JavaScript">
    
    <!--
    
    function hiliteOver(tdval)
    {
      tdval.style.backgroundColor = "#EFEFEE";
      tdval.style.border = "1px solid #3399FF";
    }
    
    function hiliteOut(tdval)
    {
      tdval.style.backgroundColor = "#FFFFFF";
      tdval.style.border = "1px solid #FFFFFF";
    }
      /*
      
      */
    //-->
    
    </script>
    
    
                <p><img src="http://images.freewebs.com/Images/trans.gif" width="130" height="1"> 
              </td>
              <td width="620" bgcolor="#FFFFFF" height="100%" background="http://images.freewebs.com/Images/back.gif" valign="top"> 
                <div align="left"></div>
                <table width="620" border="0" cellspacing="6" cellpadding="4">
                  <tr> 
                    <td width="620" valign="top"> <div align="left"><!-- #BeginEditable "Body" --> 
                        <hr noshade width="95%" size="1">
    
    <div align="center" style="width: 95%">
              <SCRIPT type="text/javascript">RoundBox.writeHeader();</SCRIPT>
    
    Welcome to the Site Manager! Here you can manage and edit your FreeWebs pages, 
    images, and other files that you have uploaded to your FreeWebs Account. <a href="#" onClick="showHide('instr'); return false;"><SPAN onClick="this.innerHTML=(this.innerHTML=='More Info'?'Hide Info':'More Info');" id="moreInfoLink">More 
    Info</SPAN><img src="http://images.freewebs.com/Images/dropDown.gif" alt="More" name="instrI" width="16" height="16" border="0" align="absmiddle" id="instrI"></a><BR>
    <DIV id="instr" style="display:none;"> 
      <p>Click on any of your files listed below to view them. You can edit any .htm 
        or .html file by clicking the <img src="http://images.freewebs.com/Images/htmledit.gif" width="20" height="18" align="absmiddle"> 
        Edit icon. Remember, your main FreeWebs address is automatically directed 
        to the file "index.htm". Therefore, after uploading or creating your homepage, 
        be sure to <img src="http://images.freewebs.com/Images/rename.gif" width="20" height="18" align="absmiddle"> 
        Rename the file to index.htm.<br>
        <br>
        <font color="#0033FF" size="4"> Quick Tips:</font><br>
    
        <strong>M</strong><strong>ove a file </strong>to another folder by clicking 
        the <img src="http://images.freewebs.com/Images/rename.gif" width="20" height="18" align="absmiddle"> 
        Rename icon and selecting a different folder.<br>
        <strong>Resize an image </strong>by clicking the <img src="http://images.freewebs.com/MembersB/WEM/resize.gif" width="16" height="16" align="absmiddle"> 
        Resize button next to the image. Shrinking down large images, especially those, 
        for example, taken with a digital camera will make them load faster and save 
        you lots of webspace and bandwidth!<br>
        <strong>Delete multiple files</strong> by clicking the check boxes next to 
        the files you want to delete, and then clicking, &quot;Delete Checked&quot;.</p>
    
    </div>
    <SCRIPT type="text/javascript">RoundBox.writeFooter();</SCRIPT>
    </div>
    
                        <form name="frmSM" target="submitFrame" action="deleteFiles.jsp?token=1be4e31d8a5708b2100c83047b5" method="get">
    
     <a href="siteManager.jsp?token=1be4e31d8a5708b2100c83047b5&path=pics%2F"><input type="hidden" name="pics" id="pics" value="Thumbs.db
    a.JPG
    b.jpg
    c.jpg
    d.jpg
    e.jpg
    f.jpg
    g.jpg
    "></a><a href="siteManager.jsp?token=1be4e31d8a5708b2100c83047b5&path=images%2F"><input type="hidden" name="images" id="images" value=""></a><input type=hidden name="path" value="">
    
                        </FORM>
    
                        <iframe name="submitFrame" id="submitFrame" style="visibility:hidden;height:1;width:1;"></iframe> 
    
    <SCRIPT type="text/javascript">RoundBox.writeHeader();</SCRIPT>
    
                      </div></td>
                  </tr>
                </table></td>
            </tr>
            <tr> 
              <td height="2" valign="middle" colspan="3"><img src="http://images.freewebs.com/Images/trans.gif" width="1" height="1"></td>
    
            </tr>
            <tr> 
              <td bgcolor="#FFFFFF" height="20" valign="middle" colspan="3"> &nbsp; </td>
            </tr>
          </table></td>
        <td width="8" background="http://images.freewebs.com/Images/rightshadow.gif">&nbsp;</td>
      </tr>
    
    </table>
    
    </body>
    
    <!-- #EndTemplate --></html>

    if anyone can explain that will be great. or help , or make a template


    thanks!

    admin edit: Added code tags
    Last edited by QuietDean; 12-14-2004 at 05:50 PM. Reason: Add Code Tags

  5. #5
    sonicemerald's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2005
    Posts
    2

    Re: links that make text appear

    Well I found out how to do it!!!!!! Now I am not a really great HTML person but i figured this one out...

    first I put this in my <head> command:

    Code:
    <SCRIPT language=JavaScript src="/JS/utils.jsp?token=1be4e31d8a5708b2100c83047b5"></SCRIPT>
    
    <SCRIPT>
    
    function delfunc(delstr, delpath) {
    
      if (window.confirm('Do you really want to delete ' + delstr + '?')) {
      delstr=escape(delstr);
      delstr=delstr.replace('+', '%2B');
        document.location = '/Members/Dispatcher.jsp?token=1be4e31d8a5708b2100c83047b5&section=file&action=delete&path=' + escape(delpath) + '&filename=' + delstr + '&next=%2FMembersA%2FsiteManager.jsp%3Ftoken%3D1be4e31d8a5708b2100c83047b5%26path%3D';
    
       }
    
    }
    
    
    function changetr(thistr) {
    
      document.all[thistr].style.backgroundColor = "#FFFFFF";
    
    }
    
    function changetrb(thistr) {
    
      document.all[thistr].style.backgroundColor = "#EEEEEE";
    
    }
    
    
      function openURL(url) {
        window.open(url);
      }
    
      function toggleDisplay(TDID) {
        var onoff;
        if(document.getElementById(TDID).style.display == 'block') {
          onoff =  'none';
        }
        else {
          onoff = 'block';
        }
        return onoff;
      }
    
      function showHide(TDID) {
        var onoff = toggleDisplay(TDID);
        document.getElementById(TDID).style.display = onoff;
        var i = document.getElementById(TDID+'I');
        if (i == null) return;
        if(onoff=='block') {
          i.src = 'http://images.freewebs.com/Images/dropUp.gif';
        }
        else {
          i.src = 'http://images.freewebs.com/Images/dropDown.gif';
        }
      }
    
    </SCRIPT>
    (not the Code things)
    Then right before the place i wanted the drop down thing to appear I put this in there

    Code:
    <A onclick="showHide('instr'); return false;" href="http://members3.freewebs.com/MembersA/WebzEdit/editDesign.jsp?token=862828a9260da1ae10481bb493d&amp;filename=index.html&amp;path=noframes/#"><SPAN id=moreInfoLink onclick="this.innerHTML=(this.innerHTML=='More'?'Hide':'More');">Previous Updates</SPAN><IMG id=instrI height=16 alt=More src="http://images.freewebs.com/Images/dropDown.gif" width=16 align=absMiddle border=0 name=instrI></A>
    
    <DIV id=instr style="DISPLAY: none">
    <P>
    then where that p thing is I put what I wanted to appear and followed that with the end /p

    here's what came out for me www.freewebs.com/aasonic/noframes/

    Hope this helps

  6. #6
    sonicemerald's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2005
    Posts
    2

    Re: links that make text appear

    heres what I did

    put this in my head command


    <SCRIPT language=JavaScript src="/JS/utils.jsp?token=1be4e31d8a5708b2100c83047b5"></SCRIPT>

    <SCRIPT>

    function delfunc(delstr, delpath) {

    if (window.confirm('Do you really want to delete ' + delstr + '?')) {
    delstr=escape(delstr);
    delstr=delstr.replace('+', '%2B');
    document.location = '/Members/Dispatcher.jsp?token=1be4e31d8a5708b2100c83047b5&section=file&action=delete&path=' + escape(delpath) + '&filename=' + delstr + '&next=%2FMembersA%2FsiteManager.jsp%3Ftoken%3D1be4e31d8a5708b2100c83047b5%26path%3D';

    }

    }


    function changetr(thistr) {

    document.all[thistr].style.backgroundColor = "#FFFFFF";

    }

    function changetrb(thistr) {

    document.all[thistr].style.backgroundColor = "#EEEEEE";

    }


    function openURL(url) {
    window.open(url);
    }

    function toggleDisplay(TDID) {
    var onoff;
    if(document.getElementById(TDID).style.display == 'block') {
    onoff = 'none';
    }
    else {
    onoff = 'block';
    }
    return onoff;
    }

    function showHide(TDID) {
    var onoff = toggleDisplay(TDID);
    document.getElementById(TDID).style.display = onoff;
    var i = document.getElementById(TDID+'I');
    if (i == null) return;
    if(onoff=='block') {
    i.src = 'http://images.freewebs.com/Images/dropUp.gif';
    }
    else {
    i.src = 'http://images.freewebs.com/Images/dropDown.gif';
    }
    }

    </SCRIPT>

    then I put this in right before the place I wanted the text to be
    <A onclick="showHide('instr'); return false;" href="http://members3.freewebs.com/MembersA/WebzEdit/editDesign.jsp?token=862828a9260da1ae10481bb493d&amp;filename=index.html&amp;path=noframes/#"><SPAN id=moreInfoLink onclick="this.innerHTML=(this.innerHTML=='More'?'Hide':'More');">Previous Updates</SPAN><IMG id=instrI height=16 alt=More src="http://images.freewebs.com/Images/dropDown.gif" width=16 align=absMiddle border=0 name=instrI></A>

    <DIV id=instr style="DISPLAY: none">
    <P>

    then I ended the with /P

    hope this helps

    look at what turned up at my site www.freewebs.com/aasonic/noframes/

  7. #7
    Doorknob's Avatar
    Super Newbie

    Status
    Offline
    Join Date
    Jun 2002
    Location
    Malaysia
    Posts
    316

    Re: links that make text appear

    Well... i would do it this way.

    <head>
    <script language=Javascript>
    function ShowDiv(msg)
    {
    var displaymsg

    if (msg == "show")
    {
    displaymsg = "<table><tr><td>content to display</td></tr></table>";
    }
    document.getElementById("popup").innerHTML = displaymsg;
    }
    -->
    </script>
    </head>

    <a href=# onMouseOver='ShowDiv("Show")' onMouseOut='ShowDiv("")'>Click for more</a>

    <div id='popup' style='z-index:1; visibility: visible'></div>

    Hope that helps



Tags for this Thread