HTML span in div class?

Sarius87 · 11. Oktober 2017

Hallo, habe hier diese progess bar:

HTML:

<div class="progress-bar photoshop-bg wow Rx-width-25 animated" role="progressbar" data-wow-duration="0.5s" data-wow-delay=".5s" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <span class="yellow-color"><span id="prozent"></span>%</span>
</div>

darunter gebe ich ja als span schon die Prozent an, doch für den balken ist ja ad jetzt die 25 angegeben, und ich kann das ja nicht ersetzen mit der ... doch wie mache ich das, dass sich die zahl meiner span anpasst ?

SaxnPaule · 11. Oktober 2017

What? Bis zu den % konnte ich dir folgen. Danach kommt nur noch Chaos.

Kannst du bitte nochmal versuchen dein Anliegen auszudrücken? Welche Zahl solch sich welchem span anpassen? Und was meinst du in diesem Fall mit "anpassen"?

Sarius87 · 11. Oktober 2017

in zeile 1 wird ja festgelegt wie weit der Balken von der progressbar geht (Rx-width-25). also 25%. dieser wert soll jetzt aber der von meiner span sein: 

wie in Zeile 2, da ist der text unter der progressbar ja 25% in diesem Fall.

doch wie binde ich die in die class-Angabe da ein ? ich müsste das ja quasi nur so machen, aber das geht ja nicht :

Code:

<div class="progress-bar photoshop-bg wow Rx-width-<span id="prozent"></span> animated"

SaxnPaule · 11. Oktober 2017

Wieso ist da eine 25 in dem span? Wo soll die herkommen? Laut HTML ist da nur ein % Zeichen.
Ohne das dazugehörige CSS sind die Klassennamen auch nur Namen. Was dahintersteckt kann keiner von uns riechen.

Sarius87 · 11. Oktober 2017

ja diese progressbar ist von einem website-template. aber ist das nicht eigentlich egal ?

will ja nur wissen wie man den Inhalt einer in die class tut, eigentlich wäre es ja egal was genau das ist. aber hier mal die CSS: https://pastebin.com/7iKvSLg8

SaxnPaule · 11. Oktober 2017

Wenn ich dich richtig verstehe willst du ja die Breite des spans je nach Inhalt verändern.
CSS auf Basis eines variablen Inhaltes wirst du nur per JS oder einer Templatesprache ändern können. Statisch wird das nix.

Sarius87 · 11. Oktober 2017

und wie ginge das mit JS ?

Sithys · 11. Oktober 2017

https://www.w3schools.com/howto/howto_js_progressbar.asp

Sarius87 · 11. Oktober 2017

aber wie füge ich dann da die ein ?
da kann ich ja auch nicht einfach die

Code:

width: 1%;

ersetzen mit

Code:

width: <span id="prozent"></span>%;

cruse · 11. Oktober 2017

1. ich sehe die id Prozent nirgendwo
2. wozu span
3. kopier doch einfach das js script(incl. der css) und passe es an. fertig.

Sarius87 · 11. Oktober 2017

aber durch das einbinden der css davon:

HTML:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

sind alle texte auf meiner Seite größer und haben eine andere font... warum ? ^^

Webentwickler · 11. Oktober 2017

Du solltest dringend Grundlagen und damit die Zusammenhänge zwischen MySQL, PHP, HTML, CSS und JavaScript lernen.

Wenn man ein Stylesheet einbindet, dann stehen dort Selektoren mit Eigenschaften-Werte-Paaren drin, die das Aussehen von HTML-Elementen festlegen, zudem können sie sich gegenseitig oder man kann sie später im Seiten-Header oder durch Inline-Styles überschreiben.

Höchstwahrscheinlich steht in deinem Stylesheet etwas, das sich auf Schriftarten und -größen auswirkt (font-style und font-size).

Ansonsten verstehe ich leider nur Bahnhof

.

Sarius87 · 11. Oktober 2017

das weiß ich, aber ich muss doch diese zeile am anfang der Index einfügen ? ^^ habe die css jetzt einfach angepasst. aber denke ihr versteht nicht was ich eigentlich will...

auch hier bestimmt man die breite der progressbar ja mit einem div-Parameter :

Code:

style="width:25%"

ich habe eine datei in der die prozentangabe alle paar sekunden aktualisiert wird und will diese halt live anzeigen. daher will ich meine span dazu nutzen :

Code:

<span id="prozent"></span>

da ist immer die Zahl hinterlegt, hier die prozenz.php mal gekürzt :

Code:

<?php
echo "47";
?>

mit diesem JS aktualisiere ich die span:

Code:

<script>
$(document).ready(function(){
	$("#prozent").load("assets/prozent.php");
	var refreshId=setInterval(function(){
		$("#prozent").load('assets/prozent.php?');
	}, 10000);});
</script>

doch wie schaffe ich es jetzt die Zahl immer aktuell anzuzeigen ?^^

Teisi · 13. Oktober 2017

du willst also das das div genauso breit ist wie das span innen, aber min. 25%?

z. B.:
css-div: float: left; min-width: 25%; width: auto;
(die Span braucht dann aber einen festen Wert - kein Prozent!)

Immer aktuell ist so eine sache, da es sich um einen Ladebalken handelt und du wohl Serverseitig irgendwas machst, hilft dir nur diverse PHP Librarys - Node.js oder simpel und nicht so super duper - ajax. Wobei hier wohl ajax völlig ausreichend wäre...

Wenn der Wert aus irgendeinem Grund tatsächlich in die class Angabe des Divs muss: dann machst du in deiner ajax succsess function:
var newClass = 'neueClass-'+$("span").text();
$('.divFoo').replaceClass('colored', newClass);

Vorher definierst du halt noch z. B. so ein Plugin:
(function ($) {
$.fn.replaceClass = function (pFromClass, pToClass) {
return this.removeClass(pFromClass).addClass(pToClass);
};
}(jQuery));

Wie meine Vorredner ja schon sagten - so richtig verstehen tu ich es auch nicht, was genau du möchtest - oder welchen Sinn das hätte...

Suche

HTML span in div class?

Sarius87

Banned

SaxnPaule

Admiral

Sarius87

Banned

SaxnPaule

Admiral

Sarius87

Banned

SaxnPaule

Admiral

Sarius87

Banned

Sithys

Captain

Sarius87

Banned

cruse

Fleet Admiral

Sarius87

Banned

Webentwickler

Ensign

Sarius87

Banned

Teisi

Lt. Junior Grade

Ähnliche Themen