• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zufällige positionierung durch Javascript. Verbindung zu Body ist vergeblich.

Status
Für weitere Antworten geschlossen.
C

Cola

Neues Mitglied
Hallo Zusammen,

ich versuche vergeblich in der folgenden html Datei die Position left und top durch zufällige Zahlen, via Javascript zu manipulieren.
Leider kenne ich mich auch nicht so besonders mit dem programmieren aus. Nach zwei Wochen suchen habe ich die Hoffnung aufgegeben es in Google zu finden.


  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://vuejs.org/js/vue.js"></script>

  5. <head lang="en">
  6. <meta charset="UTF-8">
  7. <title>Redeem Overlay</title>
  8. <script src="../API_Key.js"></script>
  9. <style>
  10. html,
  11. body {
  12. height: 100%;
  13. }

  15. html {
  16. display: table;
  17. }

  19. body#body {
  20. display: table-cell;
  21. position: fixed;
  22. left: 150px; <- diese Position und top darunter sollen zufällige Zahlen bekommen
  23. top: 200px;
  24. }

  26. h2 {
  27. color: white;
  28. text-shadow: -1px -1px 0 #000,
  29. 1px -1px 0 #000,
  30. -1px 1px 0 #000,
  31. 1px 1px 0 #000;
  32. }

  34. .fade-enter-active,
  35. .fade-leave-active {
  36. transition: opacity .5s;
  37. }

  39. .fade-enter,
  40. .fade-leave-to
  41. /* .fade-leave-active below version 2.1.8 */
  42. {
  43. opacity: 0;
  44. }
  45. </style>
  46. </head>

  48. <body id="body">

  50. <div class="item" id="app">
  51. <client-component inline-template>
  52. <div>
  53. <link v-bind:href="fontfamilyurl" rel="stylesheet" type="text/css">
  54. <transition name="fade">
  55. <div v-if="fade">
  56. <img v-bind:src="imageurl">
  57. <h2 v-bind:style="{ color: fontcolor, fontSize: fontsize + 'px', fontFamily: fontfamily, width: width + 'px', 'word-wrap': wordwrap, 'margin-top': margintop + 'px', 'margin-left': marginleft + 'px', 'line-height': lineheight}"
  58. v-html="text">
  59. </h2>
  60. </div>
  61. </transition>
  62. </div>
  63. </client-component>
  64. </div>

  66. </body>
  67. <script src="async.js"></script>
  68. <script src="newclient.js"></script>

  70. <script>
  71. new Vue({
  72. el: '#app',
  73. });
  74. </script>

  76. <script> <- dieses Script soll die Zufälligen Zahlen ausgeben.
  77. $(document).ready(function() {
  78. var bodyWidth = document.body.clientWidth
  79. var bodyHeight = document.body.clientHeight;

  81. $('#body').each(function(idx, img) { <- mit #body wollte ich auf die Zeile 19. zugreifen
    ?(
  82. var randPosX = Math.floor((Math.random() * 1700));
  83. var randPosY = Math.floor((Math.random() * 800));
  84. console.log(randPosY);
  85. $(img).css('left', randPosX);
  86. $(img).css('top', randPosY);
  87. posLog.innerHTML = posXY
  88. });
  89. });
  90. </script>

  92. </html>
Würde mich freuen, wenn mir jemand helfen kann
^^
 
Es war ein Versuch mit jquery (script 76.), leider habe ich es nicht hinbekommen. Die Lösung kann auch anders aussehen. Wichtig ist nur für mich, dass zufällige Zahlen da stehen wenn die Seite aufgebaut wird :smile:
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben