Frage Zufallsgenerator

Cyber1805 · 30 Dezember 2017

Hallo zusammen,
ich habe für unsere Schicht auf der Arbeit eine Linkliste gebastelt. Alles soweit gut.
Jetzt habe ich ein Popup erstellt, wo unsere Lieblings-Lieferdienste hinterlegt sind.
Klappt alles und ist so wie ich es mir vorstelle. Jetzt zu meinem Anliegen:
Da wir oft sehrEntscheidungs-Unfreudig sind, wollte ich als Gimmick einen Zufalls Generator einbauen,
der nach Klick auf eine Schaltfläche in einem kleinen neuen Popup, einen Vorschlag macht, wo man bestellen könnte.

Habe mal ein Bild angehängt wie das Popup aussieht.

Hoffe es war soweit verständlich und jemand hat da ne Idee für mich.

Zum Wissensstand meiner Person:
Vor ewigen Zeiten mal html selbst beigebracht und jetzt durch die besagte Linkliste wieder auf den Geschmack gekommen.
Arbeite mich also gerade wieder ins Thema html und css ein. Von Javascript habe ich leider noch keine große Ahnung.

~EDIT~ Fehler mit Java ausgebügelt.

Gelöschtes Mitglied 36401 · 30 Dezember 2017

Cyber1805 schrieb:
Von Java habe ich leider noch keine große Ahnung.

Nicht Java, sondern JavaScript, das ist was völlig anderes. Ansonsten Klick mich

Cyber1805 · 30 Dezember 2017

Danke das Du für mich gegoogelt hast. ;)
Auf die Idee bin ich natürlich auch gekommen, aber habe leider nichts passendes gefunden.
Deswegen habe ich mich hier angemeldet und gefragt.

Sorry für den Fehler mit Java und Javascript.

basti1012 · 30 Dezember 2017

Code:

<a href="javascript:Link();">Link</a>
<script>

Url = new Array();
Url[0] = "http://www.selfhtml.org";
Url[1] = "https://www.html.de";
Url[2] = "https://www.google.de";
Url[3] = "https://www.html-seminar.de/";
function Link() {
 X = Math.round(Math.random()*(Url.length-1));
 window.open(Url[X], 'tab');
 
}
 </script>

Mehr brauch man dafür eigentlich ja gar nicht.
Bei google gefunden

Cyber1805 · 30 Dezember 2017

Ok. Danke. Das habe ich so nicht gefunden. Nur wie schriebe ich das nun um?
Soll ja nur ein kleines Popup aufgehen in dem der Name steht.

Gelöschtes Mitglied 36401 · 30 Dezember 2017

Cyber1805 schrieb:
habe leider nichts passendes gefunden.

Sorry, ist jetzt nicht böse gemeint, aber wenn ich für jede solcher Aussagen 1€ bekommen würde und ich innerhalb von ein paar Sekunden mit google was finde, dann könnte ich mir wohl jedes Jahr ein neues Notebook kaufen.

basti1012 schrieb:
Bei google gefunden

Andere können das auch

Zu deinem Popup: https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

Auch mit google gefunden

Cyber1805 · 30 Dezember 2017

Hallo m.scatello,
wie gesagt bin ich JavaSCRIPT-0, vieleicht liegt es daran das andere was passendes finden und ich nicht.
Werde mich aber einlesen.
Da ich selber Nicht-Googler und driekt-Frager auch nicht mag, habe ich mit verschiedenen Fragen Google gequält.
Habe auch einige Code-Schnipsel gefunden, nur leider weiß ich ja nicht wie man das anpasst.
Deswegen meine Frage hier an die Experten.

basti1012 · 30 Dezember 2017

Ich will ja mal nicht so sein .
Wie soll dein Popup aussehen?
So wie @m.scatello gepostet hat ?
Oder ein einfacherer Alert?
Oder ein neues Fenster?

basti1012 · 30 Dezember 2017

Na ja hier, habe etwas umgebaut, weil mir da einige Sachen persönlich nicht so gefallen haben

*** Link entfernt, weil nicht mehr erreichbar ***

Falls ich irgendwas scheiße, gemacht habe, darf gerne jeder meckern und mich auf meine Fehler hinweisen, den ich lerne auch noch . Vielen Dank

Cyber1805 · 30 Dezember 2017

Hallo,
ein Alert würde wohl reichen. Allerdings brauche ich als Ausgabe nur den Namen des Lieferdienstes, keinen Link.

Cyber1805 · 31 Dezember 2017

Die HTML-Datei ist leider auf der Arbeit aufm Rechner. Komme ich erst morgen dran.

Cyber1805 · 1 Januar 2018

Frohes Neues zusammen,
hier der html-Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<link rel="stylesheet" href="./style3.css">

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<meta http-equiv="refresh" content="5">

<title>Futtern SCHICHT 3</title>


</head>
<body>

<center>
<h1>Futterlisten Schicht 3</h1>
<table style="text-align: center" border="0">

  <tbody>

    <tr>

      <th>Lieferant</th>

      <th>Telefon</th>
</tr>
<tr>
      <td style="height: 15px;"></td>
      <td style="height: 15px;"></td>
</tr>
<tr>
      <td><a href="N:\PCS\PT\UER\MP\Schichten\30-Schicht3\FrühstückTagesgericht07.03.16.xls" class="class1">Frühstücksliste</a></td>
      <td><p></p></td>
</tr>
<tr>
      <td><a href="http://www.grillbazar.de/speisekarte" class="class1" target="_blank">Grill-Bazar</a></td>
      <td><p title="Mo - Sa:
11.00-22.00 Uhr
Sonntag:
12.00 - 22.00 Uhr">02151-153175</p></td>
</tr>
<tr>
      <td><a href="http://www.pizzeriadagiorgio-krefeld.de/" class="class1" target="_blank">Da Gorgio</a></td>
      <td><p title="Mo - Do:
11.00-22.30 Uhr
Freitag:
11.00-23.00 Uhr
Samstag, Sonntag & Feiertage:
13.30 - 23.00 Uhr">02151-542928</p></td>
</tr>
<tr>
      <td><a href="./memo.pdf" class="class1" target="_blank">Memo</a></td>
      <td><p title="Mo - Sa:
12.00-22.00 Uhr
Sonntag & Feiertage:
12.00-22.00 Uhr">02151-652992</p></td>
</tr>
<tr>
      <td><a href="https://www.pizza-taxi.de/speisekarte/pizza-taxi---das-originale-47441-moers-roemerstr-400.pdf" class="class1" target="_blank">Das Orginale</a></td>
      <td><p title="Mo - Do:
11.30-23.45 Uhr
Freitag:
11.30-22.45 Uhr
Samstag:
11.30-23.45 Uhr
Sonntag & Feiertage:
11.30-23.45 Uhr">02841-51239</p></td>
</tr>
<tr>
      <td><a href="http://www.asia-express-rheinhausen.de/speisekarte.html" class="class1" target="_blank">Asia-Express</a></td>
      <td><p title="Täglich:
11.30-22.30
Heiligabend, 1. Weihnachtstag
und Silvester geschlossen">02065-53583</p></td>
</tr>
<tr>
      <td><a href="http://www.arkadas-grill.de/" class="class1" target="_blank">Arkadas-Grill</a></td>
      <td><p title="Mo - Do:
12.00-20.30 Uhr
Sonntag:
12.00 - 20.30 Uhr
Freitag und Samstag Ruhetag">02065-47272</p></td>
</tr>
<tr>
      <td><a href="http://www.nordgrill-uerdingen.de/speisen.htm" class="class1" target="_blank">Nordgrill</a></td>
      <td><p title="Mo - Fr:
11.00-15.00 und 17.00-22.00 Uhr
Sonntag & Feiertage:
17.00 - 22.00 Uhr
Samstag Ruhetag">02151-470765</p></td>
</tr>
<tr>
      <td><a href="http://www.city-grill-rumeln.com/karte.html" class="class1" target="_blank">CityGrill</a></td>
      <td><p title="Montags-Donnerstags:
11.30 Uhr - 23.00 Uhr
Freitags-Samstags:
11:30 Uhr - 23.30 Uhr
Sonntags & Feiertags
12.30 Uhr - 23.00 Uhr">02151-400003<br>02151-6453870</p></td>
</tr>
  </tbody>
</table>
<p >Öffnungszeiten werden beim überfahren der Telefonnummer mit der Maus sichtbar!!</p>
</center>

</body>
</html>

basti1012 · 1 Januar 2018

Du wahrst schneller . meine Lösung sah so aus
*** Link entfernt, weil nicht mehr erreichbar ***
Aber deine Lösung finde ich besser. Frohes neues Jahr erstmal

Cyber1805 · 1 Januar 2018

Moin ihr lieben Helferlein,
@Sempervivum: Bin in einem Chemieunternehmen, vorletztes Jahr trugen wir noch ein Kreuz auf der Brust.

Das sieht schon verdammt gut aus. Jetzt das letzte Anliegen. Wie schreibe ich das um das kein Link dabei raus kommt.
Die Meldung also in etwa so aus sieht: "Wir könnten heute bei XY bestellen."

Habe ein paar Test-Klicks gemacht und konnte es leider nicht herrausfinden, die "Frühstücksliste" sollte nicht auftauchen.

basti1012 · 1 Januar 2018

Meinst du so

*** Link entfernt, weil nicht mehr erreichbar ***
Das Script von Sempervivum muss er mal rein gucken, ich wollte da jetzt nix dran ändern. weil wenn ich das Ändere mache ich es wieder zu umständlich.JQuery ist noch nicht so mein Ding

Cyber1805 · 1 Januar 2018

Genau so. Danke @basti1012 und @Sempervivum. Ihr seid spitze.
Bin echt begeistert.
Die Frühstücksliste kommt auch nicht mehr?
Habe sie jetzt nicht mehr zufällig geklickt.

Cyber1805 · 2 Januar 2018

Irgendwas funzt nicht. Habe die Daten aus fiddle jetzt in eingefügt, aber irgendwie klappts nicht.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<link rel="stylesheet" href="./style4.css">

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<meta http-equiv="refresh" content="5">

<title>Futtern SCHICHT 3</title>



</head>
<body>

<center>
<h1>Futterlisten Schicht 3</h1>
<table style="text-align: center" border="0">

  <tbody>

    <tr>

      <th>Lieferant</th>

      <th>Telefon</th>
</tr>
<tr>
      <td style="height: 15px;"></td>
      <td style="height: 15px;"></td>
</tr>
<tr>
      <td><a href="N:\PCS\PT\UER\MP\Schichten\30-Schicht3\FrühstückTagesgericht07.03.16.xls" class="class1">Frühstücksliste</a></td>
      <td><p></p></td>
</tr>
<tr>
      <td><a href="http://www.grillbazar.de/speisekarte" class="class1" target="_blank">Grill-Bazar</a></td>
      <td><p title="Mo - Sa:
11.00-22.00 Uhr
Sonntag:
12.00 - 22.00 Uhr">02151-153175</p></td>
</tr>
<tr>
      <td><a href="http://www.pizzeriadagiorgio-krefeld.de/" class="class1" target="_blank">Da Gorgio</a></td>
      <td><p title="Mo - Do:
11.00-22.30 Uhr
Freitag:
11.00-23.00 Uhr
Samstag, Sonntag & Feiertage:
13.30 - 23.00 Uhr">02151-542928</p></td>
</tr>
<tr>
      <td><a href="./memo.pdf" class="class1" target="_blank">Memo</a></td>
      <td><p title="Mo - Sa:
12.00-22.00 Uhr
Sonntag & Feiertage:
12.00-22.00 Uhr">02151-652992</p></td>
</tr>
<tr>
      <td><a href="https://www.pizza-taxi.de/speisekarte/pizza-taxi---das-originale-47441-moers-roemerstr-400.pdf" class="class1" target="_blank">Das Orginale</a></td>
      <td><p title="Mo - Do:
11.30-23.45 Uhr
Freitag:
11.30-22.45 Uhr
Samstag:
11.30-23.45 Uhr
Sonntag & Feiertage:
11.30-23.45 Uhr">02841-51239</p></td>
</tr>
<tr>
      <td><a href="http://www.asia-express-rheinhausen.de/speisekarte.html" class="class1" target="_blank">Asia-Express</a></td>
      <td><p title="Täglich:
11.30-22.30
Heiligabend, 1. Weihnachtstag
und Silvester geschlossen">02065-53583</p></td>
</tr>
<tr>
      <td><a href="http://www.arkadas-grill.de/" class="class1" target="_blank">Arkadas-Grill</a></td>
      <td><p title="Mo - Do:
12.00-20.30 Uhr
Sonntag:
12.00 - 20.30 Uhr
Freitag und Samstag Ruhetag">02065-47272</p></td>
</tr>
<tr>
      <td><a href="http://www.nordgrill-uerdingen.de/speisen.htm" class="class1" target="_blank">Nordgrill</a></td>
      <td><p title="Mo - Fr:
11.00-15.00 und 17.00-22.00 Uhr
Sonntag & Feiertage:
17.00 - 22.00 Uhr
Samstag Ruhetag">02151-470765</p></td>
</tr>
<tr>
      <td><a href="http://www.city-grill-rumeln.com/karte.html" class="class1" target="_blank">CityGrill</a></td>
      <td><p title="Montags-Donnerstags:
11.30 Uhr - 23.00 Uhr
Freitags-Samstags:
11:30 Uhr - 23.30 Uhr
Sonntags & Feiertags
12.30 Uhr - 23.00 Uhr">02151-400003<br>02151-6453870</p></td>
</tr>
  </tbody>
</table>
<p>Öffnungszeiten werden beim überfahren der Telefonnummer mit der Maus sichtbar!!</p>

<p>Keine Idee wo bestellt werden soll?</p>

<a  id="openModal1" class="class1" >Klick mich </a>
 <div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <p id="zlink"></p>
 
 
    </div>
</div>

</center>
<script>
$('#openModal1').click(function(){
$('#openModal').css('display','block')


 X = Math.round(Math.random()*(document.querySelectorAll("tr a").length));
console.log(X)
if(X==0){
console.log('nochmal')
return;
}
var g=document.querySelectorAll("tr a")[X].innerHTML;
document.getElementById('zlink').innerHTML='Wir könnten heute bei ""'+g+'"" bestellen.';
 
 
 
 $('#close1,.close').click(function(){
 $('#openModal').css('display','none')
 })
  })
</script>
</body>
</html>

Und der Stylesheet:

Code:

/* Body-Tags */

html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}



/* Tabelleneigenschaften */
th {
    
border: 0px;
    font-weight: bold;
    text-decoration: underline;
    height: 34px;
    width: 180px;
    font-size: 110%;
    text-align: center;
    color: black;

}

td {
    
border: 0px;
    height: 34px;
    width: 180px;
    text-align: center;

}



/* Link-Eigenschaften */
a.class1:link, a.class1:visited {
    background-color: #c2c9d1;
    color: black;
    width: 160px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 9px
}

a.class1:hover, a.class1:active {
    background-color: #DEF2FC;
}

.not-active {
    pointer-events: none;
    cursor: default;
}

#openModal1:hover{
  color:red;
  cursor:pointer;
}

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
 display:none;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}

.modalDialog > div {
    width: 70%;
  top:25%;
    position: relative;
    margin: 0% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }


/* Link-Eigenschaften hidden */
a.class2:link, a.class2:visited {
    text-decoration:none;
    color:Yellow;
}

/* Buttoneigenschaften */
.btn{
    
    background-color: #c2c9d1;
    color: #c2c9d1;
    width: 160px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 9px;
    pointer-events: none;
    
border: 0px;
}

/* Sonstige Eigenschaften */
p {
    
    font-weight: bold;
    color: red;

}

h1 {
    color: Black;

}

Könnt Ihr mal gucken was falsch ist?

Cyber1805 · 2 Januar 2018

Mir ist auch gerade noch ein Fehler im Fiddle aufgefallen.
Siehe Bild.
Nach Klick auf Zufallslink kommt eine Box ohne Inhalt, die man auch nicht mehr schließen kann.

basti1012 · 2 Januar 2018

was funktioniert den nicht genau? weil wenn ich das hier wieder in der fiddle rein kopiere geht alles.
das ist jetzt etwas merkwürdig.
was sagt den die fehlerkonsole?

kommt die lerre box immer oder nur ab und zu?
ich hätte jetzt auf anhieb gesagt lösch mal deine cookies. vieleicht kommt fiddle da irgendwie durcheinander,aber ich wil erstmal kucken ob ich noch ein anderen fehler finde weilich habe bis jetzt kein problem gefunden

Cyber1805 · 2 Januar 2018

Wenn ich auf den Link klicke passiert nichts.
Konsolle:
SCRIPT5009: "$" ist undefiniert
Datei: futtern1.html, Zeile: 124, Spalte: 1

Betreffende Zeile:
$('#openModal1').click(function(){

Edit: @Sempervivum zu spät gesehen. Ich teste.

Frage Zufallsgenerator

Neues Mitglied

Anhänge

Gelöschtes Mitglied 36401

Guest

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Gelöschtes Mitglied 36401

Guest

Neues Mitglied

Senior HTML'ler

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Neues Mitglied

Anhänge

Senior HTML'ler

Neues Mitglied