HTML / CSS : Wie bei einem iFrame den YouTube-Balken unten weg bekommen?

Hier ist mein iFrame code ohne, dass der YouTuber Scroll Balken unten verschwindet.

<div class="iframe-container">

 <iframe width="560" height="315" src="https://www.youtube.com/embed/b8UY9_h8Cm0"frameborder="0" class="embed-responsive-item"></iframe>

</div>

Welchen Code muss ich hinzufügen, dass dieserverschwindet und man nicht vor- oder zurückspulen kann?

Computer, Technik, HTML, CSS, HTML5, iframe
Vorschaubild für Link bei WhatsApp?

Welche Angaben muss ich im HTML-Head setzen, damit ich ein Vorschaubild beim senden eines Links erhalte?

Mein HTML-Head:

<head>
    <title>Webseitentitel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Webseiten Beschreibung" />
    <meta name="author" content="Max Mustermann" />
    <meta name="keywords" content="Schlüsselwort, noch ein Schlüsselwort, ..." />
    <meta property="og:title" content="Webseitentitel" />
    <meta property="og:description" content="Webseiten Beschreibung">
    <meta property="og:url" content="https://www.domain.de/" />
    <meta property="og:image" content="http://domain.de/images/logo.png" />
    <meta property="og:image:secure_url" content="https://domain.de/images/logo.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="325" />
    <meta property="og:image:height" content="325" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="de_DE" />
    <link rel="icon" href="images/logo.png" type="image/png">
    <link rel="shortcut icon" href="images/logo.png" type="image/png">
    <link rel="icon" href="images/logo.png" sizes="32x32" />
    <link rel="icon" href="images/logo.png" sizes="192x192" />
    <link rel="apple-touch-icon-precomposed" href="images/logo.png" />
    <meta name="msapplication-TileImage" content="images/logo.png" />
    <link rel="apple-touch-icon" href="images/logo.png">
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    <link rel='shortlink' href='https://domain.de/' />
    <link rel="canonical" href="https://domain.de/" />
    <script src="https://kit.fontawesome.com/secret_key.js"></script>
</head>

Laut diesem Post bin ich vorgegangen...

https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing

...ich habe mir auch die Infos von https://ogp.me/ angeschaut.

Ich komme einfach nicht weiter :(

HILFEEEEEEEEE....

HTML, Webseite, programmieren, Webdesign, Webentwicklung, preview, Vorschaubild
HTML Text verschiebt sich?

Hallo... Ich programmiere gerade eine Seite und möchte ein Bild rechts oben einfügen. Dazu benutze ich diesen Script: <img src="https://steamuserimages-a.akamaihd.net/ugc/109607797360622796/082FD74234D265BD8E8F60B2F75F94288E506F54/" img align="right">

Mein Problem ist dass sich der Text der links davon centriert in der Mitte ist weiter nach Links verschiebt obwohl das Bild den Text nicht berührt. Wenn ich das Bild in hintergrund setze um dieses Problem zu vermeiden wird das Bild unsichtbar. Und die größe des Bildes möchte ich auch nicht ändern. Kann mir wer sagen wie ich das Bild so hinbekomme das es den Text nicht verschiebt?

Computer, Bilder, Technik, HTML, Technologie
CSS/Javascript: mit :hover ein anderes Element sichtbar machen?

Hallo ihr lieben,

ich hänge gerade an einem Programmierproblem. Ich möchte versuchen Banner Mapping zu programmieren und finde meinen (vermutlich dummen kleinen)Fehler nicht.

Hier der "bisherige" Code:

<html>

<head><title> Test :)</title>

<script type="text/javascript>

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

<script>

jQuery('#hoverdiv').hoverdiv( 

  function() {$('#Kindelement').show();},

  function() {$('#Kindelement').hide();}

);

</script>

<style>

.hover

{

  background-color: red;

  z-index: 1;

}

.Kindelement

{

  position: absolute;

  top:0;

  background-color: blue;

  -moz-transition: all 0.5s ease 0s;

  -webkit-transition: all 0.5s ease 0s;

  transition: all 0.5s ease 0s;

  opacity: 0;

  z-index: 2;

   

}

.hoverdiv

{

  position: relative;

}

.hoverdiv:hover + .Kindelement

{

  opacity: 1;

}​

</style>

</head>

<body>

<div id="hoverdiv" style="background: grey; 

color: white; 

border-radius: 50px !important; 

font-family: &quot;Helvetica Neue&quot;, 

Arial, sans-serif !important; 

float: none !important;" ;>

<a>+</a>

<div id="Kindelement" 

style="color: white; 

background: grey; 

position: absolute;

top: 770px !important; 

 opacity: 0;">

<a href="link" style="color: white; background: grey">Name</a>

</div>

 </div>

 

 

</body>

</html>

Habe sehr viel probiert, aber finde keine Lösung in Google :( bei <a> ist der link natprlich ein richtiger link - nur aus Datenschutz zensiert :)

Es soll auf das hoverdiv gehovert werden und dadurch das Kindelement angezeigt werden - wenn man wieder mit der Maus davon runter geht soll es wieder verschwinden..

Dankeschön schonmal!

Computer, HTML, programmieren, CSS, JavaScript
PHP auf xampp funktioniert die Webseite auf 1und1 (ionos.de) funktioniert die Webseite nicht mehr?

Hallo, ich habe eine .php Webseite erstellt. Die Funktion habe ich immer mit Xampp überprüft. Soweit war diese dann auch fertig und vollkommen funktionsfähig. Jetzt habe ich diese auf 1und1 (ionos.de) in meinen Webspace geladen. Dort nutze ich die selbe php version welche ich bei xampp genutzt habe.
Beim ersten Test der Seite soweit auch gut. Alles wurde richtig angeziegt und schien zu funktionieren.

Beim weiteren Test aber musste ich feststellen, dass ich keine cookies setzen kann. Ich bekomme keine zurückgegeben. Offline hat das aber immer funktioniert.

So:

setcookie ("username", $auth->account['username'], time()+28800); 

Jetzt bekomme ich immer folgenden Fehler:

Warning: Cannot modify header information - headers already sent by (output started at /homepages/2/d785807995/htdocs/page/login.php:1) in /homepages/2/d785807995/htdocs/page/login.php on line 101

Auch wenn ich versuche den gesetzten Cookie auszulesen... Ohne Erfolg. Offline in Xampp kein Problem.

auch

header('Location: /page/suche.php');

funktioniert nicht mehr. Hier bekomme ich dann:

Warning: Cannot modify header information - headers already sent by (output started at /homepages/2/d785807995/htdocs/page/login.php:1) in /homepages/2/d785807995/htdocs/page/login.php on line 105

Warum kann ich das nicht so lassen wie ich es bisher hatte? Warum hat das mit Xampp auf dem rechner funktioniert aber auf dem Server nicht mehr? Hat jemand bitte einen Rat für mich?

Keine Hilfe war für mich:

  • https://stackoverflow.com/questions/8028957/how-to-fix-headers-already-sent-error-in-php/8028987

Beste Grüße aus Karlsruhe

Computer, Technik, HTML, 1und1, PHP, Technologie, xampp, ionos
Woocommerce "Select options" Text im Add to cart Button ändern?

Moin!

Langsam bin ich wirklich mit meinem Talent am Ende. Ich bin kein Profi Programmierer, aber so grundlegende Dinge kann ich schon. Allerdings bekomme ich eine Sache nicht hin: In meinem Shop (https://breswim.de) bekomme ich es einfach nicht hin auf der Startseite in dem Produkt Grid auf dem Add to cart Button aus "Select options" "Ausführung wählen" oder irgendwas Deutsches zu machen.

Die Seite ist mit WordPress aufgesetzt. Als Shop Plugin nutze ich Woocommerce. Das Produkt Grid was dort zu sehen ist, ist mit dem Essential Add Ons for Elementor Plugin eingebaut.

Ich habe schon die language files von meinem Theme (Savoy) und Woocommerce durchsucht, bin aber einfach nicht fündig geworden. Auch im Internet habe ich natürlich nach Lösungen gesucht und bin hierauf gestoßen: https://www.templatemonster.com/help/de/woocommerce-how-to-change-select-options-text.html Hab ich versucht.. Problem: Mein Theme hat keine custom-functions.php. Habe ich versucht eine neue custom-functions.php anzulegen mit dem dort angegeben Code, hat auch nicht funktioniert.

Kann mir bitte jemand helfen? Ich wäre euch sehr dankbar. :)

Wenn ihr noch weitere Angaben zu meinem Shop benötigt, dann schreibt kurz was ihr braucht und ich werde schnellstmöglich antworten.

Vielen Dank im Voraus!

Computer, Technik, HTML, WordPress, Java, Anwendungsentwicklung, CMS, development, PHP, Technologie, Developing, Woocommerce, Spiele und Gaming
CSS / JavaScript: Hilfe bei Leaflet-Integration?

Hallo Leute,

ich brauche Hilfe bei dieser Arbeit.

1. Es sollen zwei Karten nebeneinander sein. Jedoch soll die rechte Karte eine Here-Map sein. Wie baue ich das in den Code ein (siehe unten)?

Sie müssen http://ivansanchez.gitlab.io/Leaflet.TileLayer.HERE/leaflet-tilelayer-here.js in einem <script>-Tag laden. Danach müsste es mit sowas hier gehen:
L.tileLayer.here({
  appId: 'ViVS62MmsdTJSzwXMlHb',
  appCode: 'bsODmSCzkVqEMR8TnGPHdw'
}).addTo(map);
Statt addTo(map) kommt natürlich der Name Ihrer rechten Karte hin.
appId und appCode sind hier aus dem Beispiel von Ivan Sanchez http://ivansanchez.gitlab.io/Leaflet.TileLayer.HERE/demo.html

________________

2. Außerdem soll die zweite Karte sozusagen synchron/parallel mit der linken Karte verlaufen:

Sie müssen, wenn der Benutzer in der linken Karte zoomt oder sie verschiebt, die rechte Karte aktualisieren. Dazu müssen Sie eine Funktion schreiben, die aufgerufen wird, wenn auf der linken Karte das "zoomend" oder "moveend"-Ereignis auftritt.
Also etwa
map1.on("zoomend", meine_funktion);
und dann in der meine_funktion können Sie auf der rechten Karte "setBounds" aufrufen, um die rechte Karte zu verschieben/zu zoomen. Das "setBounds" muss dabei den aktuellen Ausschnitt der linken Karte übergeben bekommen (getBounds).

_________________________________________________

<html>
  <head>
    <link rel="stylesheet" href="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.css"></link>
    <script src="https: //unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="http: //unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <script>
      function initMaps() {
        map = new L.map('meine_map');
        L.tileLayer('https: //{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
        let karlsruhe = new L.LatLng(49, 8.4);
        map.setView(karlsruhe, 12);
        map1 = new L.map('meine_map1');
        L.tileLayer('http: //{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo(map1);
        map1.setView(karlsruhe, 12);

        document.getElementById("suchen").addEventListener("click", suchen);
      }

      async function suchen() {
        let url = new URL('https: //nominatim.openstreetmap.org/search');
        url.searchParams.append('format', 'json');
        url.searchParams.append('q', document.getElementById("ort").value);

        let response = await fetch(url);
        let json = await response.json();
        let box = json[0].boundingbox;

        map.fitBounds([ [ box[0],box[2] ], [ box[1],box[3] ] ]);
        map1.fitBounds([ [ box[0],box[2] ], [ box[1],box[3] ] ]);
      }
    </script>
  </head>
  <body onLoad="initMaps()">
    <div id="meine_map" style="height: 360px; width: 360px;"></div>
    <div id="meine_map1" style="position: absolute; top: 9px; left: 375px; height: 360px; width: 360px;"></div>
    <input type="text" id="ort">
    <button id="suchen">Suchen</button>
  </body>

Anmerkung: Damit der GF-Editor die URLs nicht verfälscht, wurde im Protokoll stets ein Leerzeichen hinzugefügt.

Ich danke euch für die Hilfe im Voraus!

LG

HTML, programmieren, CSS, Java, JavaScript, Informatik, Informatiker
Taschenrechnr mit Typescript erstellen?

Hallo, wir sollten für unseren Kurs einen Taschenrechner auf unserer Webseite erstellen. Diese sollte erst + - * und / errechnen können. Dies habe ich so gemacht:

<form name="Rechner">
 <table border="10" cellpadding="10" bgcolor="#E0E0E0">
   <tr>
     <td bgcolor="#C0C0C0"><input name="Display" size="30" maxlength="30"></td>
   </tr>
   <tr>
     <td>
  <table>
       <tr>
         <td width="50"><input type="button" value="  7  " onclick="Hinzufuegen('7')"></td>
         <td width="50"><input type="button" value="  8  " onclick="Hinzufuegen('8')"></td>
         <td width="70"><input type="button" value="  9  " onclick="Hinzufuegen('9')"></td>
         <td width="50"><input type="button" value="  +   " onclick="Hinzufuegen('+')"></td>
       </tr>
       <tr>
         <td width="50"><input type="button" value="  4  " onclick="Hinzufuegen('4')"></td>
         <td width="50"><input type="button" value="  5  " onclick="Hinzufuegen('5')"></td>
         <td width="70"><input type="button" value="  6  " onclick="Hinzufuegen('6')"></td>
         <td width="50"><input type="button" value="   -   " onclick="Hinzufuegen('-')"></td>
       </tr>
       <tr>
         <td width="50"><input type="button" value="  1  " onclick="Hinzufuegen('1')"></td>
         <td width="50"><input type="button" value="  2  " onclick="Hinzufuegen('2')"></td>
         <td width="70"><input type="button" value="  3  " onclick="Hinzufuegen('3')"></td>
         <td width="50"><input type="button" value="      " onclick="Hinzufuegen('')"></td>
       </tr>
       <tr>
         <td width="50"><input type="button" value="   =   " onclick="Ergebnis()"></td>
         <td width="50"><input type="button" value="  0  " onclick="Hinzufuegen('0')"></td>
         <td width="70"><input type="button" value="  .   " onclick="Hinzufuegen('.')"></td>
         <td width="50"><input type="button" value="   /   " onclick="Hinzufuegen('/')"></td>
       </tr>
       <tr>
         <td width="50"><input type="button" value="Wurzel " onclick="Sonderfunktion('sqrt')"></td>
         <td width="50"><input type="button" value=" pow " onclick="Sonderfunktion('pow')"></td>
         <td width="70"><input type="button" value=" log " onclick="Sonderfunktion('log')"></td>
         <td width="50"><input type="reset" value="  C  "></td>
       </tr>
       <tr>
     </table>
     </td>
   </tr>
 </table>
</form>

Jetzt sollen wir den Taschenrechner erweitern und Flächeninhalt; Umfang(Rechteck),Potenzieren,Fakultät, Modulo und Dezimal Dual hinzufügen.

Die Buttons kann ich erstellen, aber wie erstelle ich die dazugehörige scripts? Ich hoffe jemand kann mir helfen. :(

HTML, IT, Webseite, programmieren, JavaScript, Taschenrechner, TypeScript
Node.js/Express - req.body funktioniert nicht?

Ich möchte in meiner app.js-Datei Werte aus meiner HTML-Datei benutzen. In meiner HTML-Datei ist ein TextFeld namens "search". Dazu will ich in app.js

var searchText = req.body.search

verwenden, um den Wert des Feldes zu bekommen. Das klappt aber nicht!

Hier mein app.js-Code:

var express = require("express");
var pg = require("pg");
var bodyParser = require("body-parser");
var CON_STRING = process.env.DB_CON_STRING;

if (CON_STRING == undefined) {
  console.log("Error: Environment variable DB_CON_STRING not set!");
  process.exit(1);
}

pg.defaults.ssl = true;
var dbClient = new pg.Client(CON_STRING);
dbClient.connect();

var urlencodedParser = bodyParser.urlencoded({ extended: false });
const PORT = 80;

var app = express();
app.set("views", "views");
app.set("view engine", "pug");
app.get("/search", urlencodedParser, function (req, res) {
  var searchText = req.body.source;
  console.log(searchText); //HIER IST DER FEHLER: Es spuckt "undefined" aus!

  dbClient.query("SELECT * FROM book LIMIT 50 ", function (dbError, dbItemsResponse) {
    res.render("index", {
      BookList: dbItemsResponse.rows
    });
  });
});
app.listen(PORT, function () {
  console.log(App listening on Port ${PORT});
});

Das

console.log(searchText)

gibt mir immer undefined zurück. Wenn ich in der HTML-Datei über ein Script den Wert vom Textfeld ausgebe, dann ist der das, was da drinnen steht. Nur mit req.body scheine ich nicht darauf zugreifen zu können. Ich bekomme immer undefined.

Was mache ich falsch? Wie kann ich es beheben? Hat jemand eine Idee?

Computer, Technik, Programm, HTML, JavaScript, Express, Technologie, node.js, Spiele und Gaming
HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<body onload="startTime()"> <div id="overlay">

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<!-- --> <div id="ajaxdiv"> </div> <!-- -->

<br><br>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}
#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

Computer, HTML, programmieren, CSS, JavaScript, Webentwicklung

Meistgelesene Beiträge zum Thema HTML