Recuperer position scroll bar

zarati -

Bonjour,

j'ai créé une div avec un scroll bar , et au milieu de cette div j'ai un bouton noir ,et lorsque je clique sur le bouton noir ma fenetre javascript s'affiche correctement mais le scroll bar revient a sa position iniatiale ,moi je veux qu'il reste en face du bouton noir après le clique sur le bouton noir , j'ai fais plusieurs tentative avec scrolltop et plusieurs fonctions javascript mais ça marche pas ,voilà mon dernier code que j'ai fais :

<HTML>
<HEAD>
<title>WebForm2</title>
<script type="text/javascript">
		
		
		
		function DisplayBox(type, position_left, position_top, size)

    {

     

        if(type == 'display')

        {

			document.getElementById('AlertBox_text').innerHTML = document.getElementById('AlertBox_content1').innerHTML ;

            document.getElementById('AlertBox').style.left = position_left;

            document.getElementById('AlertBox').style.top = position_top;

            document.getElementById('AlertBox').style.width = size;

            document.getElementById('AlertBox').style.display = 'block';

        }
		
        else if(type == 'hide')

        {

            document.getElementById('AlertBox_text').innerHTML = '&nbsp;';

            document.getElementById('AlertBox').style.display = 'none';

        }

     

    }

function setScrollValue(){
  var divObj = $get('divTest');
  var obj = $get('<%= HiddenField1.ClientID %>');
  if (obj) obj.value = divObj.scrollTop;
}

function pageLoad(){
var divObj = $get('divTest');
var obj = $get('<%= HiddenField1.ClientID %>');
if (divObj) divObj.scrollTop=obj.value;
}
</script>
<style type="text/css">
.alertBox {

        
		
		min-height: 10px;

        position: fixed;

        text-align: left;

        background-color: #4A93F9;

        border-top: 1px solid #4A93F9;

       -moz-border-radius: 10px;

        -webkit-border-radius: 10px;

        border-radius: 10px;

    	z-index: 2;
		
		display: none;

    }

     <!--
  
 

    .alertBox .close_button {

    	width: 100%;

    	margin-top: 20px;

    	padding-top: 10px;
		
        padding-bottom: 5px;

    	

    	text-align: right;

    } -->

     

    #AlertBox_text {

    	font-family: calibri;

        font-size: 15px;

        color: #333333;

    }

#AlertBox_content1 {

    	display: none;
		

    }

.form1 {
	
	background:url(Capture3.png) left no-repeat;
	width:120px;
	height: 26px;
	padding: 0 0 0 0px;
	margin-left: 8px;
	cursor: pointer;
	border:0;
}
</style>
</HEAD>
<body>
<div id="AlertBox" class="alertBox">
 <div id="AlertBox_text">&nbsp;</div>
  <!--
   <div class="close_button"><input style="padding-right: 2px; padding-left: 2px" type="button" name="name_of_button" value="Fermer" onclick="DisplayBox('hide', '', '', '');"></div>
  -->
  </div>

<form  method="post" >
    <div id="divTest" style="position:fixed; left:0; width:500px; height:100px; top:0; border:solid 1px; overflow:scroll;"><ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li><input onclick="setScrollValue(this);" class="form1" name="round" type="submit" value="" /></li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li></li>
</ul>
</div>
<INPUT type="hidden" id="HiddenField1" >
</form>

<?
if(isset($_POST['round'])){

?>
<BODY onLoad="DisplayBox('display', '851px', '301px', '0px'); document.forms['pormas'].elements['writer'].focus()">
<?
                      }
?>


<div id="AlertBox_content1">
<form method="post" action="" >
<FIELDSET class="aze4" STYLE="border-radius:9px; background: grey;width:112px;height:150px">
<LEGEND  align="right" ><INPUT onclick="DisplayBox('hide', '', '', '');" class="bouton"  STYLE="  font-size:64%; padding-top:0px; padding-bottom:65px; padding-left:0px; padding-right:13px; max-width:5px; max-height:18px;" TYPE=SUBMIT VALUE="X"></LEGEND>
<TABLE align="left"  CELLSPACING="1" CELLPADDING="1" WIDTH="100%">
<br />
<tr>
  
  <TD >
<center><TEXTAREA NAME="reason" COLS=40 ROWS=4 WRAP=PHYSICAL></TEXTAREA></center>
</td></tr>

</table>
</form>
</div>
</body>

</HTML>

SVP aidez moi et merci à tous .
Bonne journée

Afficher la suite

2 réponses

Réponse 1 / 2
zarati Auteur
personne ne sait comment on peut integrer ça dans une boucle .svp aidez moi ...

0

Réagir

zarati Auteur

j'ai trouvé une solution qui marche très bien mais ça n'a pas marché lorsque je l'ai integré dans une boucle while .

voiçi la solution :

<html>
 <head>
  <title>Exemple de scrollIntoView()</title>

  <script type="text/javascript">
    function showIt(elID)
    {
      var el = document.getElementById(elID);
      el.scrollIntoView(true);
    }
  </script>

 </head>
 <body>
  <div style="height: 5em; width: 30em; overflow: scroll;
              border: 1px solid blue;">
    <div style="height: 100px"></div>
    <p id="pToShow">Le paragraphe à afficher</p>
    <div style="height: 100px"></div>
  </div>
  <input type="button" value="Afficher le paragraphe" 
   onclick="showIt('pToShow');">

 </body>
</html>

et voiçi mon code :

<html>
 <head>
  <title>ScrollIntoView() example</title>
 
  <script type="text/javascript">
    	function DisplayBox(type, position_left, position_top, size)

    {

     

        if(type == 'display')

        {

			document.getElementById('AlertBox_text').innerHTML = document.getElementById('AlertBox_content1').innerHTML ;

            document.getElementById('AlertBox').style.left = position_left;

            document.getElementById('AlertBox').style.top = position_top;

            document.getElementById('AlertBox').style.width = size;

            document.getElementById('AlertBox').style.display = 'block';

        }
		
        else if(type == 'hide')

        {

            document.getElementById('AlertBox_text').innerHTML = '&nbsp;';

            document.getElementById('AlertBox').style.display = 'none';

        }

     

    }
	
	function showIt(elID)
    {
      var el = document.getElementById(elID);
      el.scrollIntoView(true);
    }
  </script>
  <style type="text/css">
.alertBox {

        
		
		min-height: 10px;

        position: fixed;

        text-align: left;

        background-color: #4A93F9;

        border-top: 1px solid #4A93F9;

       -moz-border-radius: 10px;

        -webkit-border-radius: 10px;

        border-radius: 10px;

    	z-index: 2;
		
		display: none;

    }

     <!--
  
 

    .alertBox .close_button {

    	width: 100%;

    	margin-top: 20px;

    	padding-top: 10px;
		
        padding-bottom: 5px;

    	

    	text-align: right;

    } -->

     

    #AlertBox_text {

    	font-family: calibri;

        font-size: 15px;

        color: #333333;

    }

#AlertBox_content1 {

    	display: none;
		

    }

</style>
 
 </head>
 <body>
  <div id="AlertBox" class="alertBox">
 <div id="AlertBox_text">&nbsp;</div>
  <!--
   <div class="close_button"><input style="padding-right: 2px; padding-left: 2px" type="button" name="name_of_button" value="Fermer" onclick="DisplayBox('hide', '', '', '');"></div>
  -->
  </div>
  
  <div style="height: 16em; width: 30em; overflow: scroll;
              border: 1px solid blue;">
    
      
<ul>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
</ul>
<input id="pToShow2" type="button" value="Show para2"
   onclick="showIt('pToShow2');DisplayBox('display', '251px', '101px', '0px')">
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>



<?





$query = "select * from 'table'";

// On execute la requête
$requeteID = mysql_query($query);    
if(mysql_num_rows($requeteID)>10)?>
<table    width="89%"      >	
<?	

while ( $data = mysql_fetch_array($requeteID) )
  {?>


<form method="post" action=""><input id="pToShow" name="rca" type="submit" value="Show para"></form><br />

<?	
    
	
}?>
</table>
	


<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
<li>test</li><li>test</li><li>test</li><li>test</li>
    
  </div>
  
<?  if(isset($_POST['rca'])){

?>
<BODY onLoad="DisplayBox('display', '851px', '301px', '0px');showIt('pToShow');">
<?
                      }
?>


 <div id="AlertBox_content1">
<form method="post" action="" >
<FIELDSET  STYLE="border-radius:9px; background: grey;width:112px;height:150px">
<LEGEND  align="right" ><INPUT onclick="DisplayBox('hide', '', '', '');" class="bouton"  STYLE="  font-size:64%; padding-top:0px; padding-bottom:65px; padding-left:0px; padding-right:13px; max-width:5px; max-height:18px;" TYPE=SUBMIT VALUE="X"></LEGEND>
<TABLE align="left"  CELLSPACING="1" CELLPADDING="1" WIDTH="100%">
<br />
<tr>
  
  <TD >
<center><TEXTAREA NAME="rea" COLS=40 ROWS=4 WRAP=PHYSICAL></TEXTAREA></center>
</td></tr>

</table>
</form>
</div>
 </body>
</html>

Recuperer position scroll bar

2 réponses

Discussions similaires

Newsletters