1. Accueil
  2. Question et réponse
  3. comment déterminer l'ID d'élément de div qui est positionné x pixels à droite de l'écran visible?

comment déterminer l'ID d'élément de div qui est positionné x pixels à droite de l'écran visible?

2010-11-25 31 views
0

Frapper un mur avec celui-ci, espérons que quelqu'un peut donner un coup de main. J'ai un div wrapper contenant beaucoup de div "content" de largeur fixe. C'est comme une table, sauf que le nombre d'éléments "par ligne" n'est pas fixe, de sorte que chaque fois que la taille de l'écran est large, plus d'éléments peuvent tenir sur l'écran. Assez basique. De plus, chacune de ces divs "content" a une div adjacente "details" qui est cachée par défaut ("style = display: none"), et une div adjacente "separator" qui est vide, contenant seulement le style "clarifier les deux;".comment déterminer l'ID d'élément de div qui est positionné x pixels à droite de l'écran visible?

Chaque contenu/détails/séparateur div a un numéro unique dans son numéro d'identification, de sorte que je peux dire qu'ils sont liés (par exemple, content123, details1234, separator1234)

Maintenant, lorsque l'un de ces divs contenu est cliquée , Je veux révéler ses "détails" div ci-dessous. Cette partie, j'ai travaille en partie, en enveloppant une balise d'ancrage autour de la div de contenu, ce qui déclenche un événement javascript onClick, qui à son tour exécute une instruction jQuery pour rendre visible les détails et le séparateur divs jQuery(".details1234").css("display","block");"

Mais vous pouvez imagine mon problème. Une fois que ce séparateur est divin, il repousse tous les divs "content" qui apparaissent à sa droite, moche. Ma pensée, avec laquelle je me bats depuis des heures, est de révéler le div "diviseur" du contenu div, c'est le dernier qui apparaît dans la "rangée" sur laquelle on a cliqué. De cette façon, une nouvelle "rangée" sera ouverte par le séparateur, de sorte que lorsque la div "content" est révélée, elle apparaît sous l'élément cliqué dans la nouvelle ligne. Pour ce faire, j'ai besoin de comprendre l'élémentID de la dernière div contenu dans la "ligne", et je pensais à utiliser l'Y-coord de l'événement clic de souris, plus le X-coord = au bord le plus à droite de l'emballage div moins la moitié de la largeur de la div divisible largeur fixe. Quelque chose comme ca. Mais je suis écrasé dans un mur et ne peux pas le comprendre.

Quelqu'un peut-il m'aider à faire cela? Ou offrir une solution différente? Si un exemple de code m'aiderait à me le faire savoir, je pourrais donner un exemple, mais cela pourrait prendre un peu d'espace à l'écran.

Merci à tous ... d'être fou de rien.

EDIT: l'exemple de code ci-dessous est basé sur mon site. Quand une cellule est cliquée, vous pouvez voir ses divs "details" apparaître en dessous, mais malheureusement les autres divs dans la "rangée" sont repoussés. c'est l'effet que j'essaie d'éviter. Quand une cellule est cliquée, je veux que les "détails" apparaissent en dessous, mais aussi les autres divs pour rester dans leurs positions au-dessus des détails de l'autre cellule, fondamentalement je veux garder la "rangée" intacte. Dans le code, vous pouvez voir mes expériences infructueuses en utilisant une div "séparateur", parce que mon hypothèse est que si je peux insérer cela après la dernière div dans la rangée, alors la div "details" deviendra la rangée suivante, suivie par la prochaine rangée de cellules. J'espère que je l'ai expliqué OK. fête de Thanksgiving causant le sang à détourner du cerveau;)

<html> 
    <head> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

    <style type="text/css"> 

    #overallwrapper{ 
    background: #CCCCCC; 
    padding-top: 4px; 
    padding-left: 4px; 
    padding-right: 4px; 
    padding-bottom: 4px; 
    margin-top: 5px; 
    } 


.contentcell{ 
    border: 2px solid blue; 
    padding: 4px; 
    float: left; 
    width: 200px; 
    } 

    .separator{ 
    clear:both; 
    display: none; 
    } 


    .details{ 
    background:lightgreen; 
    border: 2px solid green; 
    width:450px; 
    display:none; 
    float:left; 
    clear:both; 
    } 
</style> 

<script type="text/javascript"> 
function showDetails(contentid){ 

    //first, reset all highlights and close any open content divs 
    $("#overallwrapper .contentcell").css("border","2px solid blue"); 
    $(".details").css("display","none"); 
    $(".separator").css("display","none"); 

    //now highlight the clicked div and reveal its content div 
    var contentHI = "#content"+contentid; 
    var detailsON = "#details"+contentid; 
    var separatorON = "#separator"+contentid; 
    $(contentHI).css("border","2px solid green"); 
    //$(separatorON).css("display","block"); 
    $(detailsON).css("display","block"); 
} 
</script> 
</head> 

<body> 
    <div id="overallwrapper"> 
     <div id="contentwrapper01"> 
     <div id="content01" class="contentcell"><a href="javascript:showDetails('01');">cell01</a></div> 
     <div id="details01" class="details">here are details about cell01</div> 
     <div id="separator01" class="separator">&nbsp;</div> 
     </div> 
     <div id="contentwrapper02"> 
    <div id="content02" class="contentcell"><a href="javascript:showDetails('02');">cell02</a></div> 
     <div id="details02" class="details">here are details about cell02</div> 
     <div id="separator02" class="separator"></div> 
     </div> 
     <div id="contentwrapper03"> 
     <div id="content03" class="contentcell"><a href="javascript:showDetails('03');">cell03</a></div> 
     <div id="details03" class="details">here are details about cell03</div> 
     <div id="separator03" class="separator"></div> 
     </div> 
     <div id="contentwrapper04"> 
     <div id="content04" class="contentcell"><a href="javascript:showDetails('04');">cell04</a></div> 
     <div id="details04" class="details">here are details about cell04</div> 
     <div id="separator04" class="separator"></div> 
     </div> 
     <div id="contentwrapper05"> 
     <div id="content05" class="contentcell"><a href="javascript:showDetails('05');">cell05</a></div> 
     <div id="details05" class="details">here are details about cell05</div> 
     <div id="separator05" class="separator"></div> 
     </div> 
     <div id="contentwrapper06"> 
     <div id="content06" class="contentcell"><a href="javascript:showDetails('06');">cell06</a></div> 
     <div id="details06" class="details">here are details about cell06</div> 
     <div id="separator06" class="separator"></div> 
     </div> 
     <div style="clear:both;"></div><!-- to prevent parent collapse --> 
</div> 
</body> 
</html>

Source

2010-11-25 jhalsey

+0

Je ne peux pas visualiser ce que vous voyez ou faites, pouvez-vous poster ceci sur un site quelque part que nous pouvons jeter un oeil? – Lazarus

+0

@user avez-vous essayé la réponse que j'ai suggérée – kobe

+0

ajouté l'exemple de code à l'article original, et mis à jour mon profil, mon nom d'affichage est maintenant "jhalsey" – jhalsey

Répondre

0

utilisateur,

si vous donnez comme la position régulière soit par défaut, il pousse les autres contenus definetly vers le bas comme ils viennent en squence.

Changez la position div divisée en absolue afin qu'elle ne soit plus dans la séquence et vous pouvez la positionner n'importe où sur la page par les propriétés haut et gauche.

obtenir le décalage de la div que vous voulez à côté de ...

http://api.jquery.com/offset/

il aura le dessus et la propriété à gauche, la position d'utilisation et de les biens à côté d'eux.

laissez-moi savoir si vous avez besoin d'autre chose.

donne un plus grand z-index pour les divs cachés.

Source

2010-11-25 20:08:50 kobe

0

Qu'en est-il de montrer les détails div avec position: absolute, en plus de tout le reste? (Voir here, le code est un peu brouillon mais vous avez l'idée).

Source

2010-11-26 02:28:25 cambraca

+0

hmmmm. C'est intéressant, comme une info-bulle. en dernier recours qui pourrait fonctionner pour moi. J'espérais cependant, pousser la rangée suivante, de sorte que le div de «détails» ne superpose pas la prochaine rangée de divs. aussi bizarre est, cela fonctionne dans jsfiddle, mais quand je copie le code dans un fichier html et fonctionne sur mon PC, les détails div recouvre toujours cell01 dans le coin supérieur gauche, il n'apparaît pas sous la cellule sélectionnée comme une info-bulle. bizarre. – jhalsey

0

J'ai partiellement compris, mais la logique peut être très maladroit. Je marche essentiellement à gauche de 100px de la largeur du conteneur div jusqu'à ce que je trouve un contenu div. De plus, cela ne fonctionne pas dans IE8, car IE n'obtient pas les mêmes résultats de offset() ou position() de jQuery que firefox, il signale toujours "19". Donc, dans IE, je ne peux jamais obtenir une valeur de coordonnée Y. Je suis trop endormi maintenant pour travailler dessus aujourd'hui. Si quelqu'un peut donner un coup de main ou me dire comment améliorer le javascript, ce serait cool.

Voici le code de travail pour Firefox (j'ai changé javascript et css des divs de détail, par rapport à la question d'origine):

<html> 
    <head> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

    <style type="text/css"> 

    #overallwrapper{ 
    background: #CCCCCC; 
    padding-top: 4px; 
    padding-left: 4px; 
    padding-right: 4px; 
    padding-bottom: 4px; 
    margin-top: 5px; 
    } 


.contentcell{ 
    border: 2px solid blue; 
    padding: 4px; 
    float: left; 
    width: 200px; 
    } 

    .separator{ 
    clear:both; 
    display: none; 
    } 


    .details{ 
    background:lightgreen; 
    border: 2px solid green; 
    display:none; 
    clear:both; 
    } 
</style> 

<script type="text/javascript"> 
function showDetails(contentid){ 

    //first, reset all highlights and close any open content divs 
    $("#overallwrapper .contentcell").css("border","2px solid blue"); 
    $(".details").css("display","none"); 
    $(".separator").css("display","none"); 

    //now highlight the clicked div and reveal its content div 
    //first, figure out which separator to display. 
    //1.get the y-pos from the clicked element, this gives y-coord of the row 
    contentClicked = "#content"+contentid; 
    var clickedoffset = $(contentClicked).offset(); 
    var ypos = clickedoffset.top; 
    var wrapperwidth = $("#overallwrapper").width(); 
    for (var xpos=wrapperwidth; xpos>0; xpos-=100){ 
     var elematpos = document.elementFromPoint(xpos, ypos); 
     var elematposid = elematpos.id; 
     if (elematposid.substring(0,7) == "content") { 
     var lastcontentdivID = elematposid.substring(7); 
     break; 
     } 
    } 

    $(contentClicked).css("border","2px solid green"); 
    var detailsON = "#details"+contentid; 
    $(detailsON).css("display","block"); 
    var lastidonscreen = "#content"+lastcontentdivID; 
    $(detailsON).insertAfter(lastidonscreen); 

} 
</script> 
</head> 

<body> 
    <div id="overallwrapper"> 
     <div id="contentwrapper01"> 
     <div id="content01" class="contentcell"><a href="javascript:showDetails('01');">cell01</a></div> 
     <div id="separator01" class="separator">&nbsp;</div> 
     <div id="details01" class="details">here are details about cell01</div> 
     </div> 
     <div id="contentwrapper02"> 
    <div id="content02" class="contentcell"><a href="javascript:showDetails('02');">cell02</a></div> 
     <div id="separator02" class="separator"></div> 
     <div id="details02" class="details">here are details about cell02</div> 
     </div> 
     <div id="contentwrapper03"> 
     <div id="content03" class="contentcell"><a href="javascript:showDetails('03');">cell03</a></div> 
     <div id="separator03" class="separator"></div> 
     <div id="details03" class="details">here are details about cell03</div> 
     </div> 
     <div id="contentwrapper04"> 
     <div id="content04" class="contentcell"><a href="javascript:showDetails('04');">cell04</a></div> 
     <div id="separator04" class="separator"></div> 
     <div id="details04" class="details">here are details about cell04</div> 
     </div> 
     <div id="contentwrapper05"> 
     <div id="content05" class="contentcell"><a href="javascript:showDetails('05');">cell05</a></div> 
     <div id="separator05" class="separator"></div> 
     <div id="details05" class="details">here are details about cell05</div> 
     </div> 
     <div id="contentwrapper06"> 
     <div id="content06" class="contentcell"><a href="javascript:showDetails('06');">cell06</a></div> 
     <div id="separator06" class="separator"></div> 
     <div id="details06" class="details">here are details about cell06</div> 
     </div> 
     <div style="clear:both;"></div><!-- to prevent parent collapse --> 
</div> 
</body> 
</html>

EDIT: Blasted IE. Je ne peux tout simplement pas me fier à lui pour déterminer les coordonnées de l'écran. Je l'ai fonctionné cependant, mais seulement pour Firefox. encore IE essaye de me rendre fou en ne manipulant pas insertAfter correctement. Arrgh! voici le code final:

<html> 
    <head> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

    <style type="text/css"> 

    #overallwrapper{ 
    background: #CCCCCC; 
    padding-top: 4px; 
    padding-left: 4px; 
    padding-right: 4px; 
    padding-bottom: 4px; 
    margin-top: 5px; 

    } 

.contentwrapper{ 
    } 

.contentcell{ 
    padding: 4px; 
    float: left; 
    width: 200px; 
    height: 100px; 
    border: 2px solid blue; 
    } 

    .separator{ 
    clear:both; 
    display: none; 
    } 


    .details{ 
    background:lightgreen; 
    border: 2px solid green; 
    display:none; 
    clear:both; 
    } 
</style> 


<script type="text/javascript"> 
function showDetails(contentid){ 

    //first, reset all highlights and close any open content divs 
    $("#overallwrapper .contentcell").css("border","2px solid blue"); 
    $(".details").css("display","none"); 
    $(".separator").css("display","none"); 

    var contentClicked = "#content"+contentid; 
    var thisypos = $(contentClicked).offset().top; 
    var nextdivid = contentClicked; 
    var countid = contentid; 
    do 
    { 
    var prevdivid = nextdivid; 
    var nextcontentid = (countid * 1) + 1; 
    var nextcontentid = '' + nextcontentid; 
    if (nextcontentid.length < 2) 
    { nextcontentid = "0" + nextcontentid; } 
    nextdivid = "#content" + nextcontentid; 
    if ($(nextdivid).length) { 
     var nextypos = $(nextdivid).offset().top; 
     countid++; 
    } else { 
     break; 
    } 
    } 
    while (thisypos == nextypos); 

    $(contentClicked).css("border","2px solid green"); 
    var detailsON = "#details"+contentid; 
    $(detailsON).css("display","block"); 
    $(detailsON).insertAfter(prevdivid); 

} 
</script> 
</head> 

<body> 
    <div id="overallwrapper"> 
     <div id="contentwrapper01" class="contentwrapper"> 
     <div id="content01" class="contentcell"><a href="javascript:showDetails('01');">cell01</a></div> 
     <div id="separator01" class="separator">&nbsp;</div> 
     <div id="details01" class="details">here are details about cell01</div> 
     </div> 
     <div id="contentwrapper02" class="contentwrapper"> 
    <div id="content02" class="contentcell"><a href="javascript:showDetails('02');">cell02</a></div> 
     <div id="separator02" class="separator"></div> 
     <div id="details02" class="details">here are details about cell02</div> 
     </div> 
     <div id="contentwrapper03" class="contentwrapper"> 
     <div id="content03" class="contentcell"><a href="javascript:showDetails('03');">cell03</a></div> 
     <div id="separator03" class="separator"></div> 
     <div id="details03" class="details">here are details about cell03</div> 
     </div> 
     <div id="contentwrapper04" class="contentwrapper"> 
     <div id="content04" class="contentcell"><a href="javascript:showDetails('04');">cell04</a></div> 
     <div id="separator04" class="separator"></div> 
     <div id="details04" class="details">here are details about cell04</div> 
     </div> 
     <div id="contentwrapper05" class="contentwrapper"> 
     <div id="content05" class="contentcell"><a href="javascript:showDetails('05');">cell05</a></div> 
     <div id="separator05" class="separator"></div> 
     <div id="details05" class="details">here are details about cell05</div> 
     </div> 
     <div id="contentwrapper06" class="contentwrapper"> 
     <div id="content06" class="contentcell"><a href="javascript:showDetails('06');">cell06</a></div> 
     <div id="separator06" class="separator"></div> 
     <div id="details06" class="details">here are details about cell06</div> 
     </div> 
     <div style="clear:both;"></div><!-- to prevent parent collapse --> 
</div> 
</body> 
</html>

Source

2010-11-26 07:58:12 jhalsey

 Questions connexes

  • Aucun problème connexe^_^