JavaScript Links funktionieren nur einmal oder gar nicht

Mr. Snoot · 11. April 2010

edit: hab die Links jetzt mal ohne JS gemacht, zwar nicht so schick, aber es läuft.

Hio,

ich habe hier einen Schieberegler (YUI 2: Slider), den man entweder mit der Maus verschieben kann oder man geht (theoretisch) über einen Link am Ende der Seite zur nächsten/vorherigen Seite.

Leider funktionieren die Links nicht so recht. Wenn man die Seite aufruft (65 nm Prozess) dann kann man zu 90 und 45 nm springen, das klappt noch. Man kann dann von dort auch zu den nächsten/vorherigen Seiten springen, aber nicht mehr zu 65 nm zurück. Bzw. kann man auch generell nicht mehr zu einer Seite zurück, auf der man schon mal war.

Hat man außerdem einen Link zu einer Seite angeklickt, auf der man schon einmal war, funktioniert überhaupt kein Link mehr, weder vor noch zurück.

Ich hab schon in der Fehlerkonsole von Opera und in Firebug in Firfox geschaut, aber da sehe ich keine Fehler.

Wie finde ich raus, woran es hakt - oder sieht das jemand?

Der JS-Code ist im Grunde dieser, wobei der für den Link relevante Teil ganz unten steht (// Use setValue to reset the value to white:):

PHP:

<script type="text/javascript">
(function() {
    var Event = YAHOO.util.Event,
        Dom   = YAHOO.util.Dom,
        lang  = YAHOO.lang,
        slider, 
        bg="slider-bg", thumb="slider-thumb", 
        valuearea="slider-value", textfield="slider-converted-value"

    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    Event.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg, 
                         thumb, topConstraint, bottomConstraint, 20);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

            // Display the pixel value of the control
            valnode.innerHTML = offsetFromStart;

            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

            // update the text box with the actual value
            fld.value = actualValue;

            // Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

        });

        slider.subscribe("slideStart", function() {
                YAHOO.log("slideStart fired", "warn");
            });

        slider.subscribe("slideEnd", function() {
                YAHOO.log("slideEnd fired", "warn");
            });

        // Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
        Event.on(textfield, "keydown", function(e) {

            // set the value when the 'return' key is detected
            if (Event.getCharCode(e) === 13) {
                var v = parseFloat(this.value, 10);
                v = (lang.isNumber(v)) ? v : 0;

                // convert the real value into a pixel offset
                slider.setValue(Math.round(v/scaleFactor));
            }
        });


////////////////////////////////////////////////////////////////////////////////////        

        // Use setValue to reset the value to white:
        Event.on("putval", "click", function(e) {
            slider.setValue(100, false); //false here means to animate if possible
        });

////////////////////////////////////////////////////////////////////////////////////

        
        // Use the "get" method to get the current offset from the slider's start
        // position in pixels.  By applying the scale factor, we can translate this
        // into a "real value
        Event.on("getval", "click", function(e) {
            YAHOO.log("Current value: "   + slider.getValue() + "\n" + 
                      "Converted value: " + slider.getRealValue(), "info", "example"); 
        });
    });
})();
</script>

Das Event würde ich dann bspw. so aufrufen: <a href="#" id="putval">Link</a>

In meinem Fall habe ich halt mehrere Events und dementsprechend die Links mit den zugehörigen IDs (10000, 3000, 1500, 1000, ...):

PHP:

Event.on("10000", "click", function(e) { slider.setValue(0, false); });
Event.on("3000", "click", function(e) { slider.setValue(35, false); });
Event.on("1500", "click", function(e) { slider.setValue(70, false); });
Event.on("1000", "click", function(e) { slider.setValue(105, false); });
Event.on("800", "click", function(e) { slider.setValue(140, false); });
Event.on("600", "click", function(e) { slider.setValue(175, false); });
Event.on("350", "click", function(e) { slider.setValue(210, false); });
Event.on("250", "click", function(e) { slider.setValue(245, false); });
Event.on("180", "click", function(e) { slider.setValue(280, false); });
...

FrittenFett · 11. April 2010

Fehlermeldung:
Wenn ich von 65nm auf 90nm gehe, geht er dorthin.
Wenn ich dann auf 45nm klicke, geht er wieder auf 65nm und will dann nichtmehr weitermachen.
Vielleict hilfts...

Mr. Snoot · 11. April 2010

Von 90 auf 45 per Link geht doch gar nicht!?

Aber ich seh gerade, dass man von 90 bzw. 45 doch wieder auf 65 zurück kann. Aber ab dann geht nichts mehr.

edit: hab die Links jetzt mal ohne JS gemacht, zwar nicht so schick, aber es läuft.

Adam Gontier · 17. April 2010

Mr. Snoot, da gibts noch einen kleinen Fehler beim 1µm-Prozess:

Der 1-µm-Prozess bezieht sich auf die Der 1-µm-Prozess bezieht sich auf die Fertigungstechnologie, die ab 1985 bei den führenden Halbleiterherstellern zum Einsatz kam.

Mr. Snoot · 17. April 2010

Danke

Suche

JavaScript Links funktionieren nur einmal oder gar nicht

Mr. Snoot

Gast

FrittenFett

Captain

Mr. Snoot

Gast

Adam Gontier

Gast

Mr. Snoot

Gast

Ähnliche Themen