Solved

div layer properties

Posted on 2003-11-04
17
619 Views
Last Modified: 2012-06-21
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
Comment
Question by:bobubi
  • 8
  • 6
  • 3
17 Comments
 

Author Comment

by:bobubi
ID: 9678753
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
 
LVL 35

Expert Comment

by:YZlat
ID: 9679254
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
 
LVL 35

Expert Comment

by:YZlat
ID: 9680064
<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
 

Author Comment

by:bobubi
ID: 9686783
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
 

Author Comment

by:bobubi
ID: 9686798
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
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 9686814
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
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 9686898
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
 

Author Comment

by:bobubi
ID: 9686919
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 35

Expert Comment

by:YZlat
ID: 9687086
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
 

Author Comment

by:bobubi
ID: 9687088
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
 

Author Comment

by:bobubi
ID: 9687165
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
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 9687199
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
 

Author Comment

by:bobubi
ID: 9687368
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
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 9687704
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
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 9687717
remember the line occurs twice in the slideNow() function, so you'l need to change both (one for IE one for Netscape)

Easynow
0
 

Author Comment

by:bobubi
ID: 9699009
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
 
LVL 12

Accepted Solution

by:
Dean OBrien earned 160 total points
ID: 9699939
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now