malina malina - 28 days ago 8
Javascript Question

Appending a link through database with javascript

have a script which makes divs in a fore-loop and appends a sentence from a database to it. Now I want to make a link out of the sentence, I do get the styling of a link (blue underlined) but on click nothing happens.
here is my part of my code:
E D I T E D

<html>
<style>
html,body {
width:100%;
height:100%;
margin:0;
font-family: "Nitti Grotesk",Helvetica,Arial,sans-serif;
}
.random {
position:absolute;
padding:10px;
font-size:10pt;
display:inline-block;
}


p{display: inline;}

</style>


<body>
<div class="allescheissehierrein">
</div>

</body>

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<script>
$(document).ready(function(){

//einfach loop mit bis 100 oder was auch immer
for(i=1; i<=10; i++){
console.log('test');
//einen div in eine variable speichern
//es wird für die datenbank "data-hover" auf den i wert gesetzt welcher ja stetig hochzählt darum alle verschieden
if (i<24){
var div = '<div data-hover="'+i+'" class="random">#</div>';
} else if ((i>23) && (i<47)){
var div = '<div data-hover="'+i+'" class="random">**</div>';
} else if ((i>46) && (i<97)){
var div = '<div data-hover="'+i+'" class="random">-</div>';
} else if ((i>96) && (i<114)){
var div = '<div data-hover="'+i+'" class="random">1.</div>';
} else if (i>113){
var div = '<div data-hover="'+i+'" class="random">~~</div>';
}

//diesen die dem allescheissehierrein-div appendieren (100 mal)
$('.allescheissehierrein').append(div);
}

//diese platzier dings funktionion erst nach der platzierung aller divs (diese 100) machen weil sie ja vorher gar nicht existieren
platzierRandom();

//richtig mit jquery UND datenbank
$('.random').mouseover(function(){
var hoverdata = $(this).data('hover');
var satzvondatenbank = datenbank[hoverdata];

console.log('hoverdata', hoverdata);
console.log('satzvondatenbank', satzvondatenbank);

$( this ).append( $( "<span>"+satzvondatenbank+"</span>" ).show('slow'));
}).mouseout(function(){
$( this ).find( "span:last" ).remove();
});
});


var datenbank = {
1: '<a href="www.google.com">So,</a>',
2: 'so',
3: 'you',
4: 'think',
5: 'you',
6: 'can',
8: 'tell',
9: 'Heaven',
10: 'from',
11: 'Hell',
12: 'blue',
13: 'Skies',
14: 'from',
15: 'Pain',
16: 'Can,',
17: 'you',
18: 'tell',
19: 'a green',
20: 'field',
21: 'from',
22: 'a',
23: 'cold',
24: 'steel',
25: 'rail?',
26: 'A',
27: 'Smile',
28: 'from',
29: 'a',
30: 'veil?',
31: 'Do',
32: 'you',
33: 'think',
34: 'you',
35: 'can',
36: 'tell?',
37: 'And',
38: 'did',
39: 'they',
40: 'get',
41: 'you',
42: 'trade',
43: 'your',
44: 'heroes,',
45: 'for',
46: 'ghosts?',
47: 'Hot',
48: 'ashes',
49: 'for',
50: 'trees?',
51: 'Hot',
52: 'air',
53: 'for',
54: 'a',
55: 'cool',
56: 'breeze?',
57: 'Cold',
58: 'comfort',
59: 'for',
60: 'change?',
61: 'And',
62: 'did',
63: 'you',
64: 'exchange',
65: 'A',
66: 'walk',
67: 'on',
68: 'part',
69: 'in',
70: 'the',
71: 'war',
72: 'for',
73: 'a',
74: 'leading',
75: 'role',
76: 'in',
77: 'a',
78: 'cage?',
79: 'How',
80: 'I',
81: 'wish',
82: 'how',
83: 'I',
84: 'wish',
85: 'you',
86: 'were',
87: 'here',
88: 'We re ',
89: 'just',
90: 'two',
91: 'lost',
92: 'souls',
93: 'swimming',
94: 'in',
95: 'a',
96: 'fish',
97: 'bowl',
98: 'Year',
99: 'after',
100: 'Year',
101: 'Running',
102: 'over',
103: 'the',
104: 'same',
105: 'old',
106: 'ground',
107: 'What',
108: 'have',
109: 'we',
110: 'found?',
111: 'the',
112: 'same',
113: 'old',
114: 'fears',
115: 'Wish',
116: 'you',
117: 'were',
118: 'here'

};
function platzierRandom(){

w=document.body.offsetWidth;
h=document.body.offsetHeight;
rd=document.getElementsByTagName('div');

for(c=0;c<rd.length;c++) {
if(rd[c].className=='random') {
xCoord=Math.floor(Math.random()*w);
yCoord=Math.floor(Math.random()*h);

if(xCoord>=w-rd[c].offsetWidth-10){
xCoord=w-rd[c].offsetWidth-10;
}
if(xCoord<=10){
xCoord=10;
}

if(yCoord>=h-rd[c].offsetHeight-10){
yCoord=h-rd[c].offsetHeight-10;
}
if(yCoord<=10){
yCoord=10;
}

rd[c].style.left=xCoord+'px';
rd[c].style.top=yCoord+'px';
}
}
}
</script>

</html>

Answer

Instead of using events mouseover() and mouseout() you can use the jQuery#hover(over, out) method that simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.

Parameters description:

  • over − The callback function to fire when the mouse is moved over a matched element.
  • out − The callback function to fire when the mouse is moved off of a matched element.

Also notice that I have made some code refactor to your code and added https to the element 1: '<a href="www.google.com">So,</a>' of the datenbank Object.

See questions and asnwers for: Why does an anchor tag's href values need http:// preprended to the URL?

Code example:

var $allescheissehierrein = $('.allescheissehierrein'),
    datenbank = {1: '<a href="https://www.google.com">So,</a>', 2: 'so', 3: 'you', 4: 'think', 5: 'you', 6: 'can', 7: 'seven', 8: 'tell', 9: 'Heaven', 10: 'from', 11: 'Hell', 12: 'blue', 13: 'Skies', 14: 'from', 15: 'Pain', 16: 'Can,', 17: 'you', 18: 'tell', 19: 'a green', 20: 'field', 21: 'from', 22: 'a', 23: 'cold', 24: 'steel', 25: 'rail?', 26: 'A', 27: 'Smile', 28: 'from', 29: 'a', 30: 'veil?', 31: 'Do', 32: 'you', 33: 'think', 34: 'you', 35: 'can', 36: 'tell?', 37: 'And', 38: 'did', 39: 'they', 40: 'get', 41: 'you', 42: 'trade', 43: 'your', 44: 'heroes,', 45: 'for', 46: 'ghosts?', 47: 'Hot', 48: 'ashes', 49: 'for', 50: 'trees?', 51: 'Hot', 52: 'air', 53: 'for', 54: 'a', 55: 'cool', 56: 'breeze?', 57: 'Cold', 58: 'comfort', 59: 'for', 60: 'change?', 61: 'And', 62: 'did', 63: 'you', 64: 'exchange', 65: 'A', 66: 'walk', 67: 'on', 68: 'part', 69: 'in', 70: 'the', 71: 'war', 72: 'for', 73: 'a', 74: 'leading', 75: 'role', 76: 'in', 77: 'a', 78: 'cage?', 79: 'How', 80: 'I', 81: 'wish', 82: 'how', 83: 'I', 84: 'wish', 85: 'you', 86: 'were', 87: 'here', 88: 'We re ', 89: 'just', 90: 'two', 91: 'lost', 92: 'souls', 93: 'swimming', 94: 'in', 95: 'a', 96: 'fish', 97: 'bowl', 98: 'Year', 99: 'after', 100: 'Year', 101: 'Running', 102: 'over', 103: 'the', 104: 'same', 105: 'old', 106: 'ground', 107: 'What', 108: 'have', 109: 'we', 110: 'found?', 111: 'the', 112: 'same', 113: 'old', 114: 'fears', 115: 'Wish', 116: 'you', 117: 'were', 118: 'here'},
    simbol = '',
    platzierRandom = function () {
      var w = document.body.offsetWidth,
          h = document.body.offsetHeight,
          rd = document.getElementsByTagName('div');

      for (var c = 0, l = rd.length; c < l; c++) {
        if (rd[c].className !== 'random') {
          continue;
        }

        var xCoord = Math.floor(Math.random() * w),
            yCoord = Math.floor(Math.random() * h);

        switch (true) {
          case (xCoord >= w - rd[c].offsetWidth - 10):
            xCoord = w - rd[c].offsetWidth - 10;
            break;
          case (xCoord <= 10):
            xCoord = 10;
            break;
          case (yCoord >= h - rd[c].offsetHeight - 10):
            yCoord = h - rd[c].offsetHeight - 10;
            break;
          case (yCoord <= 10):
            yCoord = 10;
            break;
        }

        rd[c].style.left = xCoord + 'px';
        rd[c].style.top = yCoord + 'px';
      }
    };

//einfach loop mit bis 100 oder was auch immer
for (var i = 1; i <= 10; i++) {

  //einen div in eine variable speichern
  //es wird für die datenbank "data-hover" auf den i wert gesetzt welcher ja stetig hochzählt darum alle verschieden
  switch (true) {
    case (i < 24):
      simbol = '#';
      break;
    case ((i > 23) && (i < 47)):
      simbol = '**';
      break;
    case ((i > 46) && (i < 97)):
      simbol = '-';
      break;
    case ((i > 96) && (i < 114)):
      simbol = '1.';
      break;
    case (i > 113):
      simbol = '~~';
      break;
  }

  //diesen die dem allescheissehierrein-div appendieren (100 mal)
  $allescheissehierrein.append('<div data-hover="' + i + '" class="random"><p>' + simbol + '</p></div>');
}

//diese platzier dings funktionion erst nach der platzierung aller divs (diese 100) machen weil sie ja vorher gar nicht existieren
platzierRandom();

//richtig mit jquery UND datenbank
$('.random')
  .hover(function () {
    var hoverdata = $(this).data('hover'),
        satzvondatenbank = datenbank[hoverdata];
    $(this).append($('<span>' + satzvondatenbank + '</span>').show('slow'));
  }, function () {
    $(this).find('span:last').remove();
  });
html,body {
  width:100%;
  height:100%;
  margin:0;
  font-family: "Nitti Grotesk",Helvetica,Arial,sans-serif;
}
.random {
  position:absolute;
  padding:30px;
  font-size:10pt;
  display:inline-block;
}
p {display: inline;}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<body>
  <div class="allescheissehierrein"></div>
</body>

Comments