• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 653
  • Last Modified:

div layer properties

Hi, I have 2 questions here.

1) I have a div layer. It has a sliding effect whenever I click on a link. Basically, it slides out when I click on the link and slides back when I click on the same link. However, I intend to add another effect to it. That is to fade-in and slide up at the same time, and the other way when I click again.

This is the following code for the sliding-up/down effect:
(if you have better way of doing, pls feel free to comment)

var newTop = null
var currTop = null
var direction = null

function slide() {
     document.getElementById('copy').style.visibility='visible';
     currTop = parseInt(document.getElementById('copy').style.top)

     if (document.all) {
          newTop = document.body.scrollTop
     } else {
          newTop = window.pageYOffset
     }
      
       if (parseInt(document.getElementById('copy').style.top) == newTop) {
     direction = '+';
       }
       else
       direction ='-';
     slideNow()
}
function slideNow() {

      if (direction == "-") //sliding up
      {
     if (parseInt(document.getElementById('copy').style.top) != newTop) {
          document.getElementById('copy').style.top = eval ("parseInt(document.getElementById('copy').style.top) " + direction + " 1")
          setTimeout("slideNow()", 10)
     }
      }
      else{ //sliding down
     if (parseInt(document.getElementById('copy').style.top) != 660) {
          document.getElementById('copy').style.top = eval ("parseInt(document.getElementById('copy').style.top) " + direction + " 1")
          setTimeout("slideNow()", 10)
     }
      }
      
     
}

2) How can I placed my layer within a table without affecting its position? I have tried writing the codes within the <table> tag, however, the table was 'pushed' down according to the height of the layer.

Position:Absolute (it is positioned according to the body dimension)
Position:Relative (My intention is to position the layer in the centre of the table)

The codes:

  <table width="730" height="560" cellpadding="0" cellspacing="0">
<div id="copy" style="left:190px; top:460px; width:625px; height:110px;">
  <p>i am testing</p>
</div>       
    <tr>
      <td width="5" height="1</td>
      <td width="720" height="1" colspan="3"></td>
      <td width="5" height="1"><</td>
    </tr>
    <tr>
      <td width="5" height="8</td>
      <td colspan="3" rowspan="2"</td>
      <td width="5" height="8</td>
    </tr>
    <tr>
      <td width="5" height="542"></td>
      <td width="5" height="542"></td>
    </tr>
    <tr>
      <td width="5" height="9></td>
      <td width="3" height="9"></td>
      <td width="714" height="9"></td>
      <td width="3" height="9"></td>
      <td width="5" height="9"><</td>
    </tr>
  </table>
0
bobubi
Asked:
bobubi
  • 8
  • 6
  • 3
1 Solution
 
bobubiAuthor Commented:
Just to add on to my previous post.

Scenario:
The layer will slide-up(with the fade effect at the same time) and stop at the centre within the table, when I click on a link. And when click again on the same link, the layer will slide-down(with the fade-out effect) and disappear.

I won't hestitate to increase the points if this can be done smoothly. thanks in advance!

Bob
0
 
YZlatCommented:
why don't you put table inside a layer. Then two layers will be one on the top of another and table will not be pushed down
0
 
YZlatCommented:
<html>
<head>
<script language="javascript">
<!--//
var d1,d2,divOpacity,steps,wAmount,hAmount,lAmount,tAmount,oAmount

var newTop = null
var currTop = null
var direction = null

function slide() {
     document.getElementById('copy').style.visibility='visible';
     currTop = parseInt(document.getElementById('copy').style.top)

     if (document.all) {
          newTop = document.body.scrollTop
     } else {
          newTop = window.pageYOffset
     }
     
      if (parseInt(document.getElementById('copy').style.top) == newTop) {
           direction = '+';
      }else{
            direction ='-';
       }
     slideNow()
}
function slideNow() {

     if (direction == "-") //sliding up
     {
           if (parseInt(document.getElementById('copy').style.top) != newTop) {
                      document.getElementById('copy').style.top = eval ("parseInt(document.getElementById('copy').style.top) " + direction + " 1")
                      setTimeout("slideNow()", 10)
      }           
       }else{ //sliding down
           if (parseInt(document.getElementById('copy').style.top) != 85) {
                 document.getElementById('copy').style.top = eval ("parseInt(document.getElementById('copy').style.top) " + direction + " 1")
                      setTimeout("slideNow()", 10)
           }
        }
}

function setOpacity(objectId,objectOpacity) {
      if (document.all){
            document.all(objectId).filters.alpha.opacity = objectOpacity
      } else if (!document.all && document.getElementById) {            
            document.getElementById(objectId).style.MozOpacity = objectOpacity/100
      }
}

function fadeDiv() {
      divOpacity = divOpacity - oAmount
      if (divOpacity > 0) {
            setOpacity("copy",divOpacity)
            setTimeout("fadeDiv()",1)
      }
}


function test(){
      slide()
      fadeDiv()
}
//-->
</script>
    </head>
<body>
<a href="javascript:test()">click here</a>
<br>
<div id="table1" style="position:relative; top:20; left:20; font-size:50px; z-index:2;">
<table border="1">
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
</div>

<div id="copy" style="position:absolute; top:85; left:55; color:red;filter:alpha(opacity=100); font-size:30px; z-index:4">Test</div>



</body>

</html>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
bobubiAuthor Commented:
at function fadeDiv(), that's no value in the divOpacity. In the first place, there's no value in oAmount. The 'Text' didn't fade in while it slided up.

and i see that's no use of some instances here. can i delete off some of the unused ones?

var d1,d2,divOpacity,steps,wAmount,hAmount,lAmount,tAmount,oAmount



0
 
bobubiAuthor Commented:
the sliding speed for 'Text' was relatively smooth and fast.. However, when I changed the text from 'Text' to something longer(few sentences) the speed was greatly reduced. It was crawling.. Do you know what cause that? thanks.
0
 
Dean OBrienCommented:
Bob, here is the script ammended so that it 'fades out' from the centre of your table, then slides and 'fades in' back to the centre.

<html>
<head>
<script language="javascript">
<!--//
var d1,d2,steps,wAmount,hAmount,lAmount,tAmount,oAmount


var slidein = "1"
var divOpacity = 100
var newTop = null
var currTop = null
var direction = null


function slide() {
     document.getElementById('copy').style.visibility='visible';
     currTop = parseInt(document.getElementById('copy').style.top)

     if (document.all) {
          newTop = document.body.scrollTop
     } else {
          newTop = window.pageYOffset
     }
     
      if (parseInt(document.getElementById('copy').style.top) == newTop) {
          direction = '+';
      }else{
           direction ='-';
       }
     slideNow()
}
function slideNow() {

     if (direction == "-") //sliding up
     {
          if (parseInt(document.getElementById('copy').style.top) != newTop) {
                    document.getElementById('copy').style.top = eval ("parseInt(document.getElementById('copy').style.top) " + direction + " 1")
                    setTimeout("slideNow()", 10)
     }          
       }else{ //sliding down
          if (parseInt(document.getElementById('copy').style.top) != 280) {
               document.getElementById('copy').style.top = eval ("parseInt(document.getElementById('copy').style.top) " + direction + " 1")
                    setTimeout("slideNow()", 10)
          }
        }
}

function setOpacity(objectId,objectOpacity) {
     if (document.all){
          document.all(objectId).filters.alpha.opacity = objectOpacity
     } else if (!document.all && document.getElementById) {          
          document.getElementById(objectId).style.MozOpacity = objectOpacity/100
     }
}

function fadeDiv(oAmount) {
inc=oAmount
     divOpacity = divOpacity - oAmount
     if (divOpacity > 0 && divOpacity < 100) {
          setOpacity("copy",divOpacity)
          setTimeout("fadeDiv(inc)",1)
     }
}

function test(){

     if(slidein == "1")
     {
       slide();
       fadeDiv(0.5);
       slidein = "0";
     }
     else
     {
       slide();
       fadeDiv(-0.5);
       slidein = "1";  
     }
}


//-->
</script>
    </head>
<body>
<a href="javascript:test()">fade in/out</a>
<br>
<div id="table1" style="position:relative; top:20; left:20; font-size:50px; z-index:2;">
<table width="730" height="560" cellpadding="0" cellspacing="0" border=1>
    <tr>
      <td width="5" height="1>&nbsp;</td>
      <td width="720" height="1" colspan="3">&nbsp;</td>
      <td width="5" height="1">&nbsp;</td>
    </tr>
    <tr>
      <td width="5" height="8>&nbsp;</td>
      <td colspan="3" rowspan="2">&nbsp;</td>
      <td width="5" height="8>&nbsp;</td>
    </tr>
    <tr>
      <td width="5" height="542">&nbsp;</td>
      <td width="5" height="542">&nbsp;</td>
    </tr>
    <tr>
      <td width="5" height="9>&nbsp;</td>
      <td width="3" height="9">&nbsp;</td>
      <td width="714" height="9">&nbsp;</td>
      <td width="3" height="9">&nbsp;</td>
      <td width="5" height="9">&nbsp;</td>
    </tr>
  </table>

</div>

<div id="copy" style="position:absolute; top:280; left:362; color:red;filter:alpha(opacity=100); font-size:30px; z-index:4">Test</div>



</body>

</html>


Hope this helps

Easynow
0
 
Dean OBrienCommented:
Bob,

You can remove

    d1,d2,steps,wAmount,hAmount,lAmount,tAmount,

declarations, these will have most likely been used to position the moveable 'text' div.

    i.e. wAmount = width, hAmount = height, lAmount = top, lAmount = left

but there not essential.

Easynow
0
 
bobubiAuthor Commented:
and back to the answer you provide earlier on regarding the 2 layers. The bottom layer with the table inside. If i place another layer inside the <layer>, it will also push the table down. i think the top layer and the table are both on the layer. hence they share the same level of position.

My codes:
<layer name="test" width="450px" height="500px">
<table width="450" height="500">
<div id="copy" style="position:absolute; top:85; left:55; color:red;filter:alpha(opacity=100); font-size:30px; z-index:4">Test
</div>
</table>
</layer>

the table will be pushed down according to the div layer 'copy' height, which is '60px'.
0
 
YZlatCommented:
what are you trying to accomplish?
and why did you put
<div id="copy" style="position:absolute; top:85; left:55; color:red;filter:alpha(opacity=100); font-size:30px; z-index:4">Test
</div>
inside the table?
0
 
bobubiAuthor Commented:
that's easynow111, your method blended pretty good.. but is there a way to increase the speed? It's crawling! i have tried changing the seeTimeout speed.. but it didn't seem to listen to the code. i want it to slide/fade in smoothly and fast.. it's a comment actually.. any idea?
0
 
bobubiAuthor Commented:
sorry YZlat, i think i have somehow confused you.. this is how it goes.
i have a table and few images inside it. basically, i have a comment which i placed it in the div layer(as it allows me to scroll). my intention is to let the layer slide/fade in when i click on a link. the comment will slide up and stop in the center. and when click on the same link again. the layer(comment) will slide/fade down and disappear. do you see the picture?

and the reason why i want the layer to be within the table is no matter how i change the resolution to a smaller 800 x 600px.. the layer will still remain in the table. but if i choose to put outside(position:absolute) the layer will move according to the browser(depend on the resolution), and hence layer will be not be in the center of the table.
0
 
Dean OBrienCommented:
change the value in the function slideNow() function, to change the speed.

      i.e.   setTimeout("slideNow()", 5)   will make it faster

change the value called in fadeDiv() function, to fade slower/ faster

     i.e. fadeDiv(0.2);           will make it fade slower

Its just a case off getting the mix to your taste.

I notice what you mean about more text taking longer to slide.(decide on the amount of text you want in the div,THEN tweak the values to get your desired effect)

hope this helps

Easynow


     
0
 
bobubiAuthor Commented:
I have changed the setTimeout to even 1! but the speed didn't seem to be affected at all.. any idea?
seems that the more text it appears the slower it becomes..
0
 
Dean OBrienCommented:
If you change the increment in this line it will make it faster

                         document.getElementById('copy').style.top = eval ("parseInt(document.getElementById('copy').style.top) " + direction + " 1")


   i.e. change it to

   ................... top) " + direction + " 10")

This should work

Easynow
0
 
Dean OBrienCommented:
remember the line occurs twice in the slideNow() function, so you'l need to change both (one for IE one for Netscape)

Easynow
0
 
bobubiAuthor Commented:
what do you mean? which line do I need to change for IE and Netscape?
and by the way, i saw this: if(document.all){}
what does that code mean?
0
 
Dean OBrienCommented:
Ammended slidenow function!

function slideNow() {

     if (direction == "-") //sliding up
     {
     if (parseInt(document.getElementById('copy').style.top) != newTop) {
          document.getElementById('copy').style.top = eval ("parseInt(document.getElementById('copy').style.top) " + direction + " 10")    <----******** changed to 10
          setTimeout("slideNow()", 10)
     }
     }
     else{ //sliding down
     if (parseInt(document.getElementById('copy').style.top) != 660) {
          document.getElementById('copy').style.top = eval ("parseInt(document.getElementById('copy').style.top) " + direction + " 10")    <----******** changed to 10
          setTimeout("slideNow()", 10)
     }
     }

The document.all bit of the codechecks whether it is IE , if not ('else') its netscape.

Easynow
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 8
  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now