zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden jQuery & spinner

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.02.2014, 20:18
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard jQuery & spinner

Hi ich möchte eine Box mittels spinner in seiner Größe verändern.

Edit fiddle - JSFiddle
Es sind ein Fehler da.
Die spinner werden doppelt angezeigt.


Was mache ich falsch?

Grüße

Geändert von gabischatz (05.02.2014 um 21:11 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.02.2014, 00:26
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Wo wird da was doppelt angezeigt?
Anbei eine Lösung die da mal besser funktioniert. API durchlesen. Auch wenn die auf Englisch ist.

Edit fiddle - JSFiddle
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.02.2014, 01:51
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von Thielo Beitrag anzeigen
Wo wird da was doppelt angezeigt?
Ich meine in allen Browsern, die type="number" nicht kennen, sieht mann es auch nicht (aktuelle ff und IE).
in Chrome, Safari und Opera sieht mann das Problem.

Guck mal mit ff oder IE hier: HTML5 - Inputs
__________________
MfG
Jens

Geändert von plastiko (06.02.2014 um 01:55 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 06.02.2014, 10:53
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von plastiko Beitrag anzeigen
Ich meine in allen Browsern, die type="number" nicht kennen, sieht mann es auch nicht (aktuelle ff und IE).
in Chrome, Safari und Opera sieht mann das Problem.

Guck mal mit ff oder IE hier: HTML5 - Inputs
Danke dir! Wäre mir so spontan nicht aufgefallen, mir als altem Firefox-Jünger

Aber auch hier hat mein Rat "API lesen" den totalen Sieg errungen

Zitat:
Creating a spinner on an <input type="number"> is not supported due to a UI conflict with the native spinner.
Quelle: Spinner Widget | jQuery UI API Documentation - Bereich "Additional Notes"
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #5 (permalink)  
Alt 06.02.2014, 11:54
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Hi, danke für eure Antwort
Ich habe da noch eine Frage
Wie kann ich denn das ausführen,
HTML-Code:
$(function() {
    function boxsize(){
        $('#div-test').css({
            width: $('#width').val(),
            height: $('#height').val(),
        });
    }
    $('input[type=number]').spinner({
        min : 0,
        max : 1000,
        change: boxsize,
        stop: boxsize,
        spin: boxsize
    });
    $( 'input[type=number]' ).click(function() {
        boxsize();
    });
});
wenn ich gar keinen Type mitgeben kann?
HTML-Code:
<input id="spinner">
Das hisse ja alle für alle Spinner eine Funktion zu schreiben, wenn noch andere input Felder (text) usw. dazukommen.
MfG
Mit Zitat antworten
  #6 (permalink)  
Alt 06.02.2014, 12:08
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

$('input') oder $('#spinner') oder $('input#spinner')

Das wären allein schon drei Möglichkeiten.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #7 (permalink)  
Alt 06.02.2014, 13:56
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Hi Thielo, $('input') geht schon mal gar nicht. Hier mal eine fiktive Form.
HTML-Code:
<form action="input_radio.htm">
  <p>Kreuzen Sie die gew&uuml;nschten Zutaten an:</p>
  <p>
    <input type="checkbox" name="zutat" value="salami"> Salami<br>
    <input type="checkbox" name="zutat" value="pilze"> Pilze<br>
    <input type="checkbox" name="zutat" value="sardellen"> Sardellen
  </p>
  <p>Geben Sie Ihre Zahlungsweise an:</p>
  <p>
    <input type="radio" name="Zahlmethode" value="Mastercard"> Mastercard<br>
    <input type="radio" name="Zahlmethode" value="Visa"> Visa<br>
    <input type="radio" name="Zahlmethode" value="AmericanExpress"> American Express
  </p>
  <p>
    <label for="width">width:</label>
<input name="width" id="width" value="100" style="width: 50px;" />
    <label for="min-width">min-width:</label>
<input name="min-width" id="mmin-in-width" value="100" style="width: 50px;" />
    <label for="max-width">max-width:</label>
<input name="max-width" id="max-width" value="100" style="width: 50px;" />
 </p> <p>
    <label for="height">height:</label>
<input name="height" id="height" value="100" style="width: 50px;" />
    <label for="min-height">min-height:</label>
<input name="min-height" id="min-height" value="100" style="width: 50px;" />
    <label for="max-height">max-height:</label>
<input name="max-height" id="max-height" value="100" style="width: 50px;" /></p>
 <p>
    <input type="hidden" name="UserBrowser" value="">
    Ihr Kommentar:<br>
    <textarea name="UserKommentar" rows="2" cols="20"></textarea><br>
    <input type="submit" value="senden"><br>
  </p>
  <input type="button" />

</form>
und hier das jQueryscript :
HTML-Code:
$(function() {
    function boxsize(){
        $('#div-test').css({
            width: $('#width').val(),
            height: $('#height').val(),
        });
    }
    $('input[type=number]').spinner({
        min : 0,
        max : 1000,
        change: boxsize,
        stop: boxsize,
        spin: boxsize
    });
    $( 'input[type=number]' ).click(function() {
        boxsize();
    });
});
Ein reines $('input') reicht hier nicht aus.

Alternative $('#width,#min-width,#max-width,#height,#min-height,#max-height')

Gibt es keine alternative mit css die Standard Anzeige auszublenden?
Grüße
Mit Zitat antworten
  #8 (permalink)  
Alt 06.02.2014, 18:15
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von gabischatz Beitrag anzeigen
Hi Thielo, $('input') geht schon mal gar nicht. Hier mal eine fiktive Form.
Mit dem von dir gezeigten Markup würde es gehen :P

Zitat:
Zitat von gabischatz Beitrag anzeigen
Gibt es keine alternative mit css die Standard Anzeige auszublenden?
Du könntest all die Spinner Elemente clonen und einen anderen Typ Feld dann beim Clone nutzen.
Das wäre aber erst in Schritt Zwei empfehlenswert. Dafür mangelt es bei dir leider noch zu sehr am Rest.

Bau dein Markup doch einfach mal etwas semantischer auf. Kein inline-CSS, ein <button> sollte nicht leer sein, sondern Inhalt enthalten (sonst kann man auch gleich <input type="submit" /> nehmen.

Du kannst Klassen, IDs und andere Selektoren nehmen die du verwendest. man könnte zum Beispiel die Spinner alle über ein data-Attribut nutzen.

HTML-Code:
<input data-type="spinner" type="text" value="" />
So z.B. Du hast tausende Möglichkeiten. Nutze Sie. Verstehe Sie.


Noch ein "Nachtrag" zu dem Clonen. Du hast scheinbar gemerkt, das es da Probleme gibt und ich habe "gemerkt" das es einige Feld-Typen nicht gibt. Meine Meinung zu sowas: In Fällen, in denen komplette Elemente nicht in einem Browser existieren. Wird dieses Element nicht genutzt oder dementsprechend "ersetzt".
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #9 (permalink)  
Alt 07.02.2014, 12:19
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Danke, dass mit dem $('input[data-type=spinner]') funktioniert prima.
Grüße
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Das jQuery UI Accordion Plugin ohne jquery kenntnisse nutzen? papalapap Javascript & Ajax 8 13.08.2012 23:00
jquery beim klick html seite öffnen?! dimo21 Javascript & Ajax 3 21.09.2011 21:20
jQuery (coda slider) und prototype (Lightbox) konflikt computernerd Javascript & Ajax 3 21.09.2011 20:04
Hover Problem bei JQuery charlie Javascript & Ajax 2 03.01.2009 08:01
JQuery + Wordpress VoinG Javascript & Ajax 0 29.12.2008 17:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:45 Uhr.