Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Calque et formulaire ?

leondumoulin

Par leondumoulin
dans Internet & Réseaux

 Partager

Messages recommandés

leondumoulin Power Member

leondumoulin

Posté(e)
  • Auteur
Posté(e)

Le "jump menu" - qui est à l'arrière plan - traverse le calque situé au premier plan :

 

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">

<!--

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

// -->

 

function MM_jumpMenu(targ,selObj,restore){ //v3.0

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

if (restore) selObj.selectedIndex=0;

}

//-->

</script>

</head>

 

<body bgcolor="#666666" text="#000000">

<p> </p>

<p> </p>

<div id="Layer1" style="position:absolute; left:209px; top:41px; width:70px; height:182px; z-index:1; background-color: #CC9966; layer-background-color: #CC9966; border: 1px none #000000; overflow: auto">Ceci

est le calque</div>

<form name="form1" method="post" action="">

Ceci est le "jump menu" -->

<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">

<option selected>unnamed1</option>

</select>

</form>

</body>

</html>

 

Merci,

 

LeonD

D'Artagnan Godlike Member

D'Artagnan

Posté(e)
Posté(e)

j'ai regardé ton truc effectivement tu as le calque au beau milieu de ton formulaire .Tu beux le bouger soit avec la souris en cliquant en gaut a gauche du dit calque(ou a droite delon l'editeur), soit le bouger avec les fleches directionnelles a coté des chiffres

vinch Full Patch Member

vinch

Posté(e)
Posté(e)

Je ne sais pas si j'ai compris la question....

 

Tu peux le déplacer comme la suggérer d'artagnan.

 

Je crois que tu devrais travailler le positionnement du calque en %

Normalement quelque soit la taille et la résolution de l'écran ça devrais être bon.

 

 

 

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">

<!--

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

// -->

 

function MM_jumpMenu(targ,selObj,restore){ //v3.0

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

if (restore) selObj.selectedIndex=0;

}

//-->

</script>

</head>

 

<body bgcolor="#666666" text="#000000">

<p> </p>

<p> </p>

<div id="Layer1" style="position:absolute; left:1%; top:11%; width:70px; height:182px; z-index:1; background-color: #CC9966; layer-background-color: #CC9966; border: 1px none #000000; overflow: auto">Ceci

est le calque</div>

<form name="form1" method="post" action="">

Ceci est le "jump menu" -->

<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">

<option selected>unnamed1</option>

</select>

</form>

</body>

</html>

 

Tu peux voir ici.

@+

leondumoulin Power Member

leondumoulin

Posté(e)
  • Auteur
Posté(e)

Bonjour,

 

Merci de vos conseils. Dans le cas présent je souhaite que le calque recouvre le jump menu . Le calque ( gris ) coulisse au survol de la souris -->

 

<html>

<head>

<!--

This file retrieved from the JS-Examples archives

http://www.js-examples.com

100s of free ready to use scripts, tutorials, forums.

Author: Thomas Brattli - http://www.bratta.com

-->

 

<style>

TD{font-family:arial,helvetica; font-size:10pt}

A{color:Navy; text-decoration:none}

A:hover{color:red}

A:visited:{color:#808080}

DIV{font-family:arial,helvetica; font-size:12pt; font-weight:bold}

</style>

<script>

<!--

/*Browsercheck:*/

ie=document.all?1:0;

n=document.layers?1:0;

 

//These are the variables you have to set:

 

//How much of the layer do you wan't to be visible when it's in the out state?

lshow=25;

 

//How many pixels should it move every step?

var move=10;

 

//At what speed (in milliseconds, lower value is more speed)

menuSpeed=40;

 

//Do you want it to move with the page if the user scroll the page?

var moveOnScroll=true

 

/********************************************************************************

You should't have to change anything below this.

********************************************************************************/

//Defining variables

var tim;

var ltop;

 

//Object constructor

function makeMenu(obj,nest){

if (n) this.css=eval('document.'+obj)

else if (ie) this.css=eval(obj+'.style')

else this.css=eval('document.getElementById(''+obj+'').style')

this.state=1

this.go=0

if (n) this.width=this.css.document.width

else if (ie) this.width=eval(obj+'.offsetWidth')

else this.width=eval('document.getElementById(''+obj+'').offsetWidth')

this.left=b_getleft

}

 

//Get's the top position.

function b_getleft(){

if (n) gleft=eval(this.css.left)

else if (ie) gleft=eval(this.css.pixelLeft)

else gleft=document.getElementById('divMenu').style.left

return gleft;

}

/********************************************************************************

Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)

********************************************************************************/

function moveMenu(){

if(!oMenu.state){

clearTimeout(tim)

mIn()

}else{

clearTimeout(tim)

mOut()

}

}

//Menu in

function mIn(){

if(parseInt(oMenu.left())>-oMenu.width+lshow){

oMenu.go=1

oMenu.css.left=parseInt(oMenu.left())-move

tim=setTimeout("mIn()",menuSpeed)

}else{

oMenu.go=0

oMenu.state=1

}

}

 

//Menu out

function mOut(){

if(parseInt(oMenu.left())<0){

oMenu.go=1

oMenu.css.left=parseInt(oMenu.left())+move

tim=setTimeout("mOut()",menuSpeed)

}else{

oMenu.go=0

oMenu.state=0

}

}

/********************************************************************************

Checking if the page is scrolled, if it is move the menu after

********************************************************************************/

function checkScrolled(){

if(!oMenu.go) oMenu.css.top=eval(scrolled)+parseInt(ltop)

if(!ie) setTimeout('checkScrolled()',30)

}

/********************************************************************************

Inits the page, makes the menu object, moves it to the right place,

show it

********************************************************************************/

function menuInit(){

oMenu=new makeMenu('divMenu')

scrolled=ie?"document.body.scrollTop":"window.pageYOffset"

oMenu.css.left=-oMenu.width+lshow

ltop=(ie)?oMenu.css.pixelTop:parseInt(oMenu.css.top);

oMenu.css.visibility='visible'

if(moveOnScroll) (ie)?window.onscroll=checkScrolled:checkScrolled();

}

 

function P7_JumpMenu(selObj,restore){ //v1.3 by Project Seven

var theFullString = selObj.options[selObj.selectedIndex].value;

if (restore) selObj.selectedIndex=0;

var theLength = theFullString.length;

var endPos = theFullString.lastIndexOf("~");

var theUrl, theTarget, theParent;

if (endPos > 0) {theUrl = theFullString.substring(0,endPos);}

else {theUrl = theFullString;}

endPos++

if (endPos < theLength) {theTarget = theFullString.substring(endPos,theLength)}

else {theTarget = "window:Main";}

if (theTarget == "window:New") {window.open(theUrl);}

else if (theTarget == "window:Main") {eval("parent.location='"+theUrl+"'");}

else {eval("parent.frames['"+theTarget+"'].location='"+theUrl+"'");}

}

//-->

</script>

 

 

</head>

<body onload="javascript:menuInit()">

<div id="divMenu" style="position:absolute; top:0; left:0; height:800; width:280; visibility:hidden; background-color: #7D7F6E; layer-background-color: #7D7F6E">

<div align="right"><a href="#" onmouseover="moveMenu()"><img src="shim.gif" width="20" height="800" border="0"></a></div>

</div>

 

<form name="form1">

 <select name="menu1" onChange="P7_JumpMenu(this,0)">

<option selected>hello</option>

</select>

</form>

</body>

</html>

 

Merci,

 

LéonD

D'Artagnan Godlike Member

D'Artagnan

Posté(e)
Posté(e)

compliqué ton histoire

copies ce qui suit dans le block note et ouvres avec le naviguateur, si c'est ce que tu veux tu te sert de la source pour refaire la meme chose

 

 

<html>

<head>

 

</head>

 

<body bgcolor="#FFFFFF" text="#000000">

<p> </p>

<form name="form1" method="post" action="">

<div align="center">

<select name="select2">

<option>choisissez</option>

</select>

<div id="Layer1" style="position:absolute; width:115px; height:74px; z-index:1; left: 438px; top: 39px; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000"></div>

</div>

</form>

<p align="center">  </p>

</body>

</html>

leondumoulin Power Member

leondumoulin

Posté(e)
  • Auteur
Posté(e)

Bonjour,

 

Le problème est apparemment insoluble. Un "jump menu" tranperce bien un calque...

 

Toujours dans le registre de l'interaction des éléments html entre eux j'ai une seconde question :

 

Soit un tableau et en dessous un formulaire : comment faire en sorte qu'il soient collés ( cf code ci-dessous ) ?

 

<html>

<head>

<title>Question</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

 

<body bgcolor="#FFFFFF" text="#000000" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

<table width="100%" bgcolor="#999966">

<tr>

<td>Une table ici</td>

</tr>

</table>

<form name="form1" method="post" action="">

<input type="text" name="textfield">

un formulaire ici

</form>

 

<br>

Comment faire en sorte que le deux se touchent = pas d'espace ?

</body>

</html>

 

 

Merci de vos conseils,

 

Léon

Rejoindre la conversation

Vous publiez en tant qu’invité. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...