<![CDATA[tutorials.de - Javascript & Ajax]]> http://www.tutorials.de/ de Wed, 08 Sep 2010 23:23:25 GMT vBulletin 30 http://style.tutorials.de/v10/images/misc/rss.png <![CDATA[tutorials.de - Javascript & Ajax]]> http://www.tutorials.de/ Linkrahmen bei Bannerrotation http://www.tutorials.de/javascript-ajax/366059-linkrahmen-bei-bannerrotation.html Wed, 08 Sep 2010 22:00:49 GMT /** * @banner [array] Bannersammlung */]]> Hallo!

ich würde gerne folgenden script für eine Bannerrotation nutzen und schaffe es nicht den Linkrahmen um die Bilder zu entfernen.



<script type="text/javascript">
/**
* @banner [array] Bannersammlung
*/
var banner = new Array();
banner[0] = {
href: 'http://www.whatever.com',
src: 'banner0.gif',
alt: 'alttext 0'
}
banner[1] = {
href: 'http://www.whatever.com',
src: 'banner1.gif',
alt: 'alttext 1'
}
banner[2] = {
href: 'http://www.whatever.com',
src: 'banner2.gif',
alt: 'alttext 2'
}
banner[3] = {
href: 'http://www.whatever.com',
src: 'banner3.gif',
alt: 'alttext 3'
}
banner[4] = {
href: 'http://www.whatever.com',
src: 'banner4.gif',
alt: 'alttext 4'
}
banner[5] = {
href: 'http://www.whatever.com',
src: 'banner5.gif',
alt: 'alttext 5'
}
/**
* @bannerChange Gibt zufälligen Banner zurück [html]
* @param [string] id des banner-containers
* [array] die Bannersammlung
* [number] refresh in ms (optional)
*/
var bannerChange = {
init: function(zone,store,time){
this.name = 'bannerChange';
this.zone = document.getElementById(zone);
this.store = store;
this.count = store.length-1;
this.time = (time) ? time : false;
this.lastNr = null;

this.preloadImages();
this.randomShow();
if (this.time) this.interval = window.setInterval(this.name+".randomShow()", time);
},
preloadImages: function(){
for (var i=0;i<=this.count;i++) {
var img = new Image();
img.src = this.store[i].src;
}
},
getRandomNr: function(){
var nextNr;
do {
nextNr = Math.round(this.count * Math.random());
} while(nextNr == this.lastNr);
this.lastNr = nextNr;
return nextNr;
},
randomShow: function(){
var whichOne = this.getRandomNr();
var html = '<a href="'+this.store[whichOne].href+'" >';
html += '<img src="'+this.store[whichOne].src+'" ';
html += ' alt="'+this.store[whichOne].alt+'">';
html += '</a>';
this.zone.innerHTML = html;
}
}
window.onload = function(){
bannerChange.init('dropzone',banner,1000);
}
</script>

-------------------------------------

<div id="dropzone">
<!-- banner goes here -->
<a href="http://www.whatever.com">
<img src="banner0.gif" alt="banner für user ohne javascript" />
</a>
</div> ]]> willswing http://www.tutorials.de/javascript-ajax/366059-linkrahmen-bei-bannerrotation.html jQuery FadeIn / FadeOut http://www.tutorials.de/javascript-ajax/366037-jquery-fadein-fadeout.html Wed, 08 Sep 2010 12:51:41 GMT Hi, ich habe eine Seite gebaut in HTML und CSS. Die Grundstruktur auf jeder Seite ist mehr oder weniger gleich, lediglich der Inhalt ändert sich. Auf jeden Fall möchte ich ausprobieren, einen Seitenwechsel ein wenig zu animieren. Mit animieren meine ich lediglich (alles innerhalb 1 Sekunde... Hi,
ich habe eine Seite gebaut in HTML und CSS. Die Grundstruktur auf jeder Seite ist mehr oder weniger gleich, lediglich der Inhalt ändert sich. Auf jeden Fall möchte ich ausprobieren, einen Seitenwechsel ein wenig zu animieren. Mit animieren meine ich lediglich (alles innerhalb 1 Sekunde ungefähr) die jetzige Seite kurz ausblenden und eine andere dann einblenden. Insgesamt habe ich nur 4 Seiten, so dass dies wahrtscheinlich nicht zu nervig wird. Es soll eben auch kaum auffallen, aber man soll merken, dass es ein wenig animiert ist.

Nun ja, ich habe gesucht und ein wenig rumprobiert. Die neue Seite laden habe ich hinbekommen mit jQuery:
Code :
1
2
3

$(function(){
    $('#container').hide().fadeIn();
})
Dies funktioniert auch. Das Ausfaden der anderen Seite bei Klick auf einen der 4 Navigationspunkte ( ul li a), schaffe ich leider nicht. Die jQuery Funktion dafür sollte sein
Code :
1

$('#container').fadeOut();

Nur leider weiß ich nicht, wie ich diese Funktion genau dann ausführe, wenn man auf einem Link klickt (muss ich dem a tag eine id geben?). Außerdem muss nachdem die Seite ausgefadet ist, erst dann der Seitenwechsel erfolgen. Dies geht wahrscheinlich mit der load Eigenschaft
Code :
1

.load('neueSeite.html');

Allerdings bekomme ich dies nicht zusammengestückelt, weil ich nicht weiß, wie man herausfindet ob geklickt wurde und wo (4 Links führen zu unterschiedlichen inhalten).

Zusammengefasst will ich zurst die aktuelle Seite ausfaden, neue Seite aufrufen, neue Seite einfaden. Einfaden klappt mehr oder weniger, beim Rest weiß mich grad nicht weiter. So habe ich es auch schon versucht...

Code :
1
2
3

$('#container').fadeOut(1000, function() {
     $this.load('tactics.html');
});
]]> LeMarkus http://www.tutorials.de/javascript-ajax/366037-jquery-fadein-fadeout.html Merkwürdiges Problem mit einer Slideshow http://www.tutorials.de/javascript-ajax/366017-merkwuerdiges-problem-mit-einer-slideshow.html Tue, 07 Sep 2010 20:06:54 GMT Hi zusammen, und wieder einmal benötige ich die Hilfe von JS-Experten bei der Lösung eines merkwürdigen Phänomens. Bislang hat meine Slideshow problemlos funktioniert. Nun wollte ich aber die entsprechenden Namen unter den Bildern mit anzeigen lassen. Deshalb habe ich mein Script... Hi zusammen,

und wieder einmal benötige ich die Hilfe von JS-Experten bei der Lösung
eines merkwürdigen Phänomens.

Bislang hat meine Slideshow problemlos funktioniert. Nun wollte ich aber die
entsprechenden Namen unter den Bildern mit anzeigen lassen.
Deshalb habe ich mein Script entsprechend erweitert.
Jetzt werden zwar die Namen angezeigt, jedoch gibt es bei einigen FF-Browsern
ein bislang mir unbekanntes Problem, für das ich keine Erklärung finden kann.

Während bei allen IE-Versionen (inkl. IE6.0) alles funktioniert, treten
z.B. beim FF2.0 und FF3.0 einige Merkwürdigkeiten auf.
Es kommt u.a. zu einer Beeinflussung des Eingabe-Fensters innerhalb
des IFames, wo bei jedem Bild-Wechsel die bisherige Eingabe unsichtbar
wird, aber immer noch im Hintergrund vorhanden ist.
Eine genaue Beschreibung des Phänomens ist nur schwer möglich, wenn
man es nicht selbst gesehen hat.
Deshalb hier mal der Link dazu :
http://www.radio-adventure.de/radio.php

Und hier das verwendete Script (Auszug) :
PHP-Code:
<?php
$sql_bild = "SELECT * FROM $tabelle ORDER BY id";
$erg_bild = mysql_query($sql_bild, $dbconn) or die(mysql_error());
$anz_bild = mysql_num_rows($erg_bild);
?>

...
<head>
  ...
  <script language="JavaScript" type="text/JavaScript">
  var image = new Array();
  var username = new Array();
  <?php
  $zaehler = 0;
  while ($datensatz = mysql_fetch_array($erg_bild)) 
    { 
    echo 'image['.$zaehler.'] = "galerie/'.strtolower($datensatz["name"]).'.jpg";';
    echo 'username['.$zaehler.'] = "'.$datensatz["name"].'";';
    $zaehler++;
    }
  echo 'var anzahl_bilder = '.$anz_bild.';';
  ?>
  var picIndex;

  function slide(picIndex)
    {
    document.images["slide"].src = image[picIndex];
    document.getElementById("name").innerHTML = username[picIndex];
    picIndex++;
    if(picIndex==anzahl_bilder)
      {
      picIndex=0;
      }
    eval('window.setTimeout("slide('+picIndex+')", 3000);')
    }
  </script>
  ...
</head>

<body onload="slide(1)">

<div id="show">
  <i>Galerie</i>
  <img name="slide" id="slide" alt="Bild-Name">
  <p id="name" />
</div>
Wodurch kann diese Beeinflussung hervorgerufen worden sein ?
Würde mich freuen, wenn jemand dazu eine kleine Idee hätte.
Danke schon mal im voraus.

Gruß, Mike ]]> sheeba1507 http://www.tutorials.de/javascript-ajax/366017-merkwuerdiges-problem-mit-einer-slideshow.html onclick in DOM eintragen http://www.tutorials.de/javascript-ajax/366010-onclick-dom-eintragen.html Tue, 07 Sep 2010 16:44:38 GMT Hallo zusammen.

Ich stehe mal wieder auf dem Schlauch. Ich möchte per JS einen EventHandler an ein DOM-Element anhängen. Das habe ich nun so gelöst:

domeintrag.setAttribute("onclick", "herstellerauswaehlen('" + result[f].categories_id + "', '" + result[f].categories_name + "')");

das würde auch ganz gut funktionieren, ABER natürlich nicht in Müll-IE 6.

Wie kann ich das sonst schreiben, das das auch wirklich jeder Browser versteht?

Danke euch.


CU SAM
gebrauchte Autoteile.
Tuning Teile Online ]]> SAMariter http://www.tutorials.de/javascript-ajax/366010-onclick-dom-eintragen.html Web Service aufruf mittels Ajax http://www.tutorials.de/javascript-ajax/366009-web-service-aufruf-mittels-ajax.html Tue, 07 Sep 2010 16:10:50 GMT Hallo, ich hab hier ein kleines Problem, mit dem ich absolut nicht weiter komme. Ich hab einen Web Service auf einem Tomcat 6 laufen. Diesen möchte/darf ich nur mittels Javascript aufrufen. So weit so gut. Ruf ich nun diesen Dienst über mein JavaScript auf, bekomme ich nur ein leeres... Hallo,

ich hab hier ein kleines Problem, mit dem ich absolut nicht weiter komme.
Ich hab einen Web Service auf einem Tomcat 6 laufen.
Diesen möchte/darf ich nur mittels Javascript aufrufen. So weit so gut.

Ruf ich nun diesen Dienst über mein JavaScript auf, bekomme ich nur ein leeres Object zurück.
Aufrufe per Java Client bzw. über den Browser funktionieren alle.
Vielleicht hat ja jemand ne Idee. Danke im Voraus!



Hier der Teil des Scriptes, der den Aufruf tätigt :
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    
    var endpoint = "http://localhost:8080/TestService/services/TestService";
    var soapaction = "http://localhost:8080/TestService/services/TestService/GetMsg";
 
    
    xmlHttp = getXMLHttp();
    xmlHttp.open('POST', endpoint, true);
    xmlHttp.setRequestHeader('Content-Type', 'text/xml;charset=utf-8');
    xmlHttp.setRequestHeader('SOAPAction', soapaction);
 
    xmlHttp.onreadystatechange = function() {
 
        if (xmlHttp.readyState == 4)
        
              
             //responseXML ist hier immer null
 
         alert(xmlHttp.responseXML);
 
    }
 
    xmlHttp.send(request);


Der Anfrage Header sieht nun wie folgt aus:

Host localhost:8080
User-Agent Mozilla/5.0 (X11; U; Linux i686; de; rv:1.9.2.8) Gecko/20100723 Ubuntu/10.04 (lucid) Firefox/3.6.8
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding gzip,deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 115
Connection keep-alive
Origin http://localhost
Access-Control-Request-Method POST
Access-Control-Request-Headers cache-control,soapaction


Und der Antwort Header

Server Apache-Coyote/1.1
Allow GET, HEAD, POST, TRACE, OPTIONS
Content-Length 0
Date Tue, 07 Sep 2010 18:02:17 GMT ]]> janiwani http://www.tutorials.de/javascript-ajax/366009-web-service-aufruf-mittels-ajax.html Alle InputFelder (Type=text) durchlaufen und explizit abfragen http://www.tutorials.de/javascript-ajax/366003-alle-inputfelder-type-text-durchlaufen-und-explizit-abfragen.html Tue, 07 Sep 2010 14:50:24 GMT Hallo zusammen, ich habe ein Blackout gerade und komme nicht weiter ;-( Folgendes: ich abe ein Formular mit ca. 24 TextFledern und möchte alle Abfragen angefangen mit dem Namen und soweiter. Das mit dem Namen hat schon geklappt, aber dann wenn ich diese abfrage, ob die leer sind oder... Hallo zusammen,

ich habe ein Blackout gerade und komme nicht weiter ;-(

Folgendes: ich abe ein Formular mit ca. 24 TextFledern und möchte alle Abfragen angefangen mit dem Namen und soweiter.

Das mit dem Namen hat schon geklappt, aber dann wenn ich diese abfrage, ob die leer sind oder nicht, dann klappt es nicht.

Ich komme gar nicht rein in die zweite For-Schleife... kann einer bitte helfen?

HTML-Code:
for(i=0; i<document.forms[0].length; i++){
    if(document.forms[0].elements[i].type == 'text'){
        var getName = document.forms[0].elements[i].name;

        var allEmpty = true;

        if(getName.match('FName')){
           
            var getThemAll = document.forms[0].elements[i];
           
            alert(getThemAll.value);

            for(var j=0; j<=getThemAll.length; j++) {
                if(getThemAll.value[j] != ''){
                    alert('j' + getThemAll.value[j]);
                    allEmpty = false;
                }

             
                if (allEmpty){
                    alert('es sind alle leer');
                }else{
                    alert('das passt');
                }
            }
        }
    }
}
HTML-Code:
<form ....>
<input type="text" name="friend_01_FName" value="xxx" class="inputText_01" />
<input type="text" name="friend_01_LName" value="yyy" class="inputText_02" />
<input type="text" name="friend_01_eMail" value="" class="inputText_02" />
<input type="text" name="friend_02_FName" value="" class="inputText_03" />
<input type="text" name="friend_02_LName" value="" class="inputText_04" />
<input type="text" name="friend_02_eMail" value="" class="inputText_04" />
<input type="text" name="friend_03_FName" value="" class="inputText_03" />
<input type="text" name="friend_03_LName" value="" class="inputText_04" />
<input type="text" name="friend_03_eMail" value="" class="inputText_04" />
<input type="text" name="friend_04_FName" value="" class="inputText_03" />
<input type="text" name="friend_04_LName" value="" class="inputText_04" />
<input type="text" name="friend_04_eMail" value="" class="inputText_04" />
</form>
vielen Danke und Gruß
Messmar ]]> messmar http://www.tutorials.de/javascript-ajax/366003-alle-inputfelder-type-text-durchlaufen-und-explizit-abfragen.html jQuery - mehrere Events wahlweise um Funktion auszulösen? http://www.tutorials.de/javascript-ajax/366001-jquery-mehrere-events-wahlweise-um-funktion-auszuloesen.html Tue, 07 Sep 2010 14:20:41 GMT Hallo, ich bin gerade dabei das wunderbar minimale vTip-jQuery-Plugin http://www.vertigo-project.com/projects/vtip etwas für meine Zwecke zu modifizieren. Das Plugin ist darauf ausgerichtet beim hovern zu reagieren. Ich würde jetzt gerne noch zusätzlich das Reagieren auf focus bzw. blur haben,... Hallo,

ich bin gerade dabei das wunderbar minimale vTip-jQuery-Plugin http://www.vertigo-project.com/projects/vtip etwas für meine Zwecke zu modifizieren. Das Plugin ist darauf ausgerichtet beim hovern zu reagieren. Ich würde jetzt gerne noch zusätzlich das Reagieren auf focus bzw. blur haben, so wie es das NiceTitle-Plugin http://www.wordpress.dotflare.com/nicetitle-plugin/ beherrscht.
Ich bin mir bloß nicht so recht im Klaren darüber, wie ich bei Verwendung von jQuery mehrere Events als Auslöser für eine Funktion angeben kann.
Irgendwie brachte mich auch eine entsprechende Suche per Google nicht weiter.
Ist so etwas möglich und wenn ja wie? ]]> shredder01 http://www.tutorials.de/javascript-ajax/366001-jquery-mehrere-events-wahlweise-um-funktion-auszuloesen.html jQuery toggle background IE http://www.tutorials.de/javascript-ajax/365998-jquery-toggle-background-ie.html Tue, 07 Sep 2010 12:56:25 GMT Hallo zusammen,

ich habe eine Togglereihe und versuche gerade, einen "toggle" auf ein Hintergrundbild zu bringen. Im FF und Opera funktioniert das ganze, leider nicht im IE 8. Das Hintergrund wird bei Klick geladen, leider verschwindet das Ursprungsbild aus der CSS, welches aber bei auslösen des Toggles wieder geladen werden soll..

Ich habe von einem Bug gelesen, aber keine Ahnung, wie ich den hier ausbügeln könnte.

Danke

der ber

PHP-Code:
$(document).ready(function() {

            $(".signin").click(function(e) {
                e.preventDefault();
                $("fieldset#signin_menu").toggle(0,
                  function () {
                $("#meindiv").css({"background": "#ffffff url(images/divvy.png) right -5px no-repeat"});
                
              });
                $(".signin").toggleClass("menu-open");
            });

            $("fieldset#signin_menu").mouseup(function() {
                return false
            });
            $(document).mouseup(function(e) {
                if($(e.target).parent("a.signin").length==0) {
                    $(".signin").removeClass("menu-open");
                    $("fieldset#signin_menu").hide();
$("#meindiv").css({"background": ""});
                }
            });            

        }); 
]]> ber http://www.tutorials.de/javascript-ajax/365998-jquery-toggle-background-ie.html Frage zu JQuery $.get http://www.tutorials.de/javascript-ajax/365993-frage-zu-jquery-get.html Tue, 07 Sep 2010 10:56:39 GMT
Code :
Folgenden Code habe ich um eine XML Datei aus zu lesen und ein zufälliges Element im Dokument an zu zeigen, was auch funktioniert.

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(document).ready(function(){
var textarray = new Array();
var zaehler = 0;
var zufall = 0;
    $.get('content/didyouknow.xml',function(d){
        $(d).find('item').each(function(){
            var $duk = $(this);
            var text = $duk.find('text').text();
            text = text.replace("[i]","<i>");
            text = text.replace("[/i]","</i>");
            textarray[zaehler] = text;
            zaehler++;
            });
    var anzahl = parseInt(textarray.length);
    zufall = parseInt(Math.random()*(anzahl));
    $('#binfo_wusstestdu_text').html(textarray[zufall]);
    });
 
});

Nun ist meine Frage hier zu, wieso ist das textarray nach der Ausführung von $.get wieder leer obwohl ich das Array vor dem auslesen der XML erzeuge?
Und wie kann ich dafür sorgen dass der Inhalt des Arrays auch danach noch vorhanden ist?

Gruß und Dank
RipmaV
]]> RipmaV http://www.tutorials.de/javascript-ajax/365993-frage-zu-jquery-get.html Javascript, Alert, Confirm, Deutsch/Polnisch http://www.tutorials.de/javascript-ajax/365992-javascript-alert-confirm-deutsch-polnisch.html Tue, 07 Sep 2010 10:46:46 GMT Hallo Leute, langer Titel hoffentlich kurze Antwort. Ich programmiere ein mehrsprachige Applikation, die auf einem lokalem Webserver läuft. Einige Abfragen erfolgen über alert oder confirm Boxen. Meine Frage, wie kann ich nun die Texte OK Abrechen Ja Nein Hallo Leute,
langer Titel hoffentlich kurze Antwort.

Ich programmiere ein mehrsprachige Applikation, die auf einem lokalem Webserver läuft.
Einige Abfragen erfolgen über alert oder confirm Boxen.
Meine Frage, wie kann ich nun die Texte
OK
Abrechen
Ja
Nein
usw
in einer anderen Sprache darstellen?

Gruß
Raabun ]]> Raabun http://www.tutorials.de/javascript-ajax/365992-javascript-alert-confirm-deutsch-polnisch.html fancybox iframe: nach öffnen funktioniert das Mausrad nicht mehr?! http://www.tutorials.de/javascript-ajax/365988-fancybox-iframe-nach-oeffnen-funktioniert-das-mausrad-nicht-mehr.html Tue, 07 Sep 2010 09:06:12 GMT Hallo zusammen, einige von euch benutzen ja auch die Fancybox. Da ich auf meiner Site http://www.pixelasm.com einpaar MOVs eingebunden habe musste ich dazu ein iframe verwenden um das einzubinden. Komischerweise ist es aber so das wenn man das iframe wieder schließt das Mausrad nicht mehr... Hallo zusammen,

einige von euch benutzen ja auch die Fancybox. Da ich auf meiner Site http://www.pixelasm.com einpaar MOVs eingebunden habe musste ich dazu ein iframe verwenden um das einzubinden. Komischerweise ist es aber so das wenn man das iframe wieder schließt das Mausrad nicht mehr funktioniert.
Die Mausrad JS Datei hab ich aber eigentlich weggelassen und bei den anderen Fancybox Gallerien die ich auf der Seite verwende klappt alles wunderbar.

Hat vielleicht jemand eine Idee wie ich das Problem lösen kann?

Grüße
Ralf ]]> kharn http://www.tutorials.de/javascript-ajax/365988-fancybox-iframe-nach-oeffnen-funktioniert-das-mausrad-nicht-mehr.html Suchmaske mit X (Close) http://www.tutorials.de/javascript-ajax/365949-suchmaske-mit-x-close.html Mon, 06 Sep 2010 08:50:34 GMT Hallo, ich habe eine Suchefunktion programmiert und würde diese gern etwas auffrischen mit CSS. Habe auf einer Seite gesehen, dass bei Eingabe von Daten am rechten Ende der Suchbox ein kleines X angezeigt wird, mit der man die Suche löschen kann. Wie macht man sowas? hier ist die Seite, wo ich... Hallo, ich habe eine Suchefunktion programmiert und würde diese gern etwas auffrischen mit CSS. Habe auf einer Seite gesehen, dass bei Eingabe von Daten am rechten Ende der Suchbox ein kleines X angezeigt wird, mit der man die Suche löschen kann. Wie macht man sowas?

hier ist die Seite, wo ich dieses Feature gesehen habe: oben rechte Suchfunktion:
http://wiki.flux-cms.org/display/BLOG/LiveSearch ]]> nordi http://www.tutorials.de/javascript-ajax/365949-suchmaske-mit-x-close.html 2 Handle Slider in Scriptaculous http://www.tutorials.de/javascript-ajax/365945-2-handle-slider-scriptaculous.html Mon, 06 Sep 2010 08:06:33 GMT Hi, Ich versuche gerade einen 2 Handle-Slider mit Scriptaculous hinzubekommen. Leider gibt es hierzu im Netz recht wenig bis gar nichts. Ich nutze quasi den Standard-Slider und möchte ihn auf 2 Buttons erweitern um eine art Bandbreite festzlegen. Sowas gibts bei jquery massenweise nur bei... Hi,
Ich versuche gerade einen 2 Handle-Slider mit Scriptaculous hinzubekommen. Leider gibt es hierzu im Netz recht wenig bis gar nichts.

Ich nutze quasi den Standard-Slider und möchte ihn auf 2 Buttons erweitern um eine art Bandbreite festzlegen. Sowas gibts bei jquery massenweise nur bei Scriptaculous fast gar nichts.

Bsp. wie es ungefähr sein sollte: http://jqueryui.com/demos/slider/range.html

HTML-Code:
<div id="debug1">Keine Auswahl</div><div id="track1" style="width:265px; height:20px;">

            <div id="track1-left"></div>
            <div id="handle1" style="width:18px; height:17px;"><img src="img/slider-images-handle.png" alt="" style="float: left;" /></div>
          </div>
         
          <script type="text/javascript" language="javascript">
                // <![CDATA[
               
                        // horizontal slider control
                        new Control.Slider('handle1', 'track1', {
                                range: $R(00, 10),
                                values: [00,01,02,03,04,05,06,07,08,09,10],
                                onSlide: function(v) { $('debug1').innerHTML = v + ' von 10 Punkten' },
                                onChange: function(v) { $('debug1').innerHTML = v + ' von 10 Punkten' }
                        });

                // ]]>
                </script>
Dazu gehört noch das externe JS:

HTML-Code:
// script.aculo.us slider.js v1.6.5, Wed Nov 08 14:17:49 CET 2006

// Copyright (c) 2005, 2006 Marty Haught, Thomas Fuchs
//
// script.aculo.us is freely distributable under the terms of an MIT-style license.
// For details, see the script.aculo.us web site: http://script.aculo.us/

if(!Control) var Control = {};
Control.Slider = Class.create();

// options:
//  axis: 'vertical', or 'horizontal' (default)
//
// callbacks:
//  onChange(value)
//  onSlide(value)
Control.Slider.prototype = {
  initialize: function(handle, track, options) {
    var slider = this;
   
    if(handle instanceof Array) {
      this.handles = handle.collect( function(e) { return $(e) });
    } else {
      this.handles = [$(handle)];
    }
   
    this.track  = $(track);
    this.options = options || {};

    this.axis      = this.options.axis || 'horizontal';
    this.increment = this.options.increment || 1;
    this.step      = parseInt(this.options.step || '1');
    this.range    = this.options.range || $R(0,10);
   
    this.value    = 0; // assure backwards compat
    this.values    = this.handles.map( function() { return 0 });
    this.spans    = this.options.spans ? this.options.spans.map(function(s){ return $(s) }) : false;
    this.options.startSpan = $(this.options.startSpan || null);
    this.options.endSpan  = $(this.options.endSpan || null);

    this.restricted = this.options.restricted || false;

    this.maximum  = this.options.maximum || this.range.end;
    this.minimum  = this.options.minimum || this.range.start;

    // Will be used to align the handle onto the track, if necessary
    this.alignX = parseInt(this.options.alignX || '0');
    this.alignY = parseInt(this.options.alignY || '0');
   
    this.trackLength = this.maximumOffset() - this.minimumOffset();

    this.handleLength = this.isVertical() ?
      (this.handles[0].offsetHeight != 0 ?
        this.handles[0].offsetHeight : this.handles[0].style.height.replace(/px$/,"")) :
      (this.handles[0].offsetWidth != 0 ? this.handles[0].offsetWidth :
        this.handles[0].style.width.replace(/px$/,""));

    this.active  = false;
    this.dragging = false;
    this.disabled = false;

    if(this.options.disabled) this.setDisabled();

    // Allowed values array
    this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false;
    if(this.allowedValues) {
      this.minimum = this.allowedValues.min();
      this.maximum = this.allowedValues.max();
    }

    this.eventMouseDown = this.startDrag.bindAsEventListener(this);
    this.eventMouseUp  = this.endDrag.bindAsEventListener(this);
    this.eventMouseMove = this.update.bindAsEventListener(this);

    // Initialize handles in reverse (make sure first handle is active)
    this.handles.each( function(h,i) {
      i = slider.handles.length-1-i;
      slider.setValue(parseFloat(
        (slider.options.sliderValue instanceof Array ?
          slider.options.sliderValue[i] : slider.options.sliderValue) ||
        slider.range.start), i);
      Element.makePositioned(h); // fix IE
      Event.observe(h, "mousedown", slider.eventMouseDown);
    });
   
    Event.observe(this.track, "mousedown", this.eventMouseDown);
    Event.observe(document, "mouseup", this.eventMouseUp);
    Event.observe(document, "mousemove", this.eventMouseMove);
   
    this.initialized = true;
  },
  dispose: function() {
    var slider = this;   
    Event.stopObserving(this.track, "mousedown", this.eventMouseDown);
    Event.stopObserving(document, "mouseup", this.eventMouseUp);
    Event.stopObserving(document, "mousemove", this.eventMouseMove);
    this.handles.each( function(h) {
      Event.stopObserving(h, "mousedown", slider.eventMouseDown);
    });
  },
  setDisabled: function(){
    this.disabled = true;
  },
  setEnabled: function(){
    this.disabled = false;
  }, 
  getNearestValue: function(value){
    if(this.allowedValues){
      if(value >= this.allowedValues.max()) return(this.allowedValues.max());
      if(value <= this.allowedValues.min()) return(this.allowedValues.min());
     
      var offset = Math.abs(this.allowedValues[0] - value);
      var newValue = this.allowedValues[0];
      this.allowedValues.each( function(v) {
        var currentOffset = Math.abs(v - value);
        if(currentOffset <= offset){
          newValue = v;
          offset = currentOffset;
        }
      });
      return newValue;
    }
    if(value > this.range.end) return this.range.end;
    if(value < this.range.start) return this.range.start;
    return value;
  },
  setValue: function(sliderValue, handleIdx){
    if(!this.active) {
      this.activeHandleIdx = handleIdx || 0;
      this.activeHandle    = this.handles[this.activeHandleIdx];
      this.updateStyles();
    }
    handleIdx = handleIdx || this.activeHandleIdx || 0;
    if(this.initialized && this.restricted) {
      if((handleIdx>0) && (sliderValue<this.values[handleIdx-1]))
        sliderValue = this.values[handleIdx-1];
      if((handleIdx < (this.handles.length-1)) && (sliderValue>this.values[handleIdx+1]))
        sliderValue = this.values[handleIdx+1];
    }
    sliderValue = this.getNearestValue(sliderValue);
    this.values[handleIdx] = sliderValue;
    this.value = this.values[0]; // assure backwards compat
   
    this.handles[handleIdx].style[this.isVertical() ? 'top' : 'left'] =
      this.translateToPx(sliderValue);
   
    this.drawSpans();
    if(!this.dragging || !this.event) this.updateFinished();
  },
  setValueBy: function(delta, handleIdx) {
    this.setValue(this.values[handleIdx || this.activeHandleIdx || 0] + delta,
      handleIdx || this.activeHandleIdx || 0);
  },
  translateToPx: function(value) {
    return Math.round(
      ((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) *
      (value - this.range.start)) + "px";
  },
  translateToValue: function(offset) {
    return ((offset/(this.trackLength-this.handleLength) *
      (this.range.end-this.range.start)) + this.range.start);
  },
  getRange: function(range) {
    var v = this.values.sortBy(Prototype.K);
    range = range || 0;
    return $R(v[range],v[range+1]);
  },
  minimumOffset: function(){
    return(this.isVertical() ? this.alignY : this.alignX);
  },
  maximumOffset: function(){
    return(this.isVertical() ?
      (this.track.offsetHeight != 0 ? this.track.offsetHeight :
        this.track.style.height.replace(/px$/,"")) - this.alignY :
      (this.track.offsetWidth != 0 ? this.track.offsetWidth :
        this.track.style.width.replace(/px$/,"")) - this.alignY);
  }, 
  isVertical:  function(){
    return (this.axis == 'vertical');
  },
  drawSpans: function() {
    var slider = this;
    if(this.spans)
      $R(0, this.spans.length-1).each(function(r) { slider.setSpan(slider.spans[r], slider.getRange(r)) });
    if(this.options.startSpan)
      this.setSpan(this.options.startSpan,
        $R(0, this.values.length>1 ? this.getRange(0).min() : this.value ));
    if(this.options.endSpan)
      this.setSpan(this.options.endSpan,
        $R(this.values.length>1 ? this.getRange(this.spans.length-1).max() : this.value, this.maximum));
  },
  setSpan: function(span, range) {
    if(this.isVertical()) {
      span.style.top = this.translateToPx(range.start);
      span.style.height = this.translateToPx(range.end - range.start + this.range.start);
    } else {
      span.style.left = this.translateToPx(range.start);
      span.style.width = this.translateToPx(range.end - range.start + this.range.start);
    }
  },
  updateStyles: function() {
    this.handles.each( function(h){ Element.removeClassName(h, 'selected') });
    Element.addClassName(this.activeHandle, 'selected');
  },
  startDrag: function(event) {
    if(Event.isLeftClick(event)) {
      if(!this.disabled){
        this.active = true;
       
        var handle = Event.element(event);
        var pointer  = [Event.pointerX(event), Event.pointerY(event)];
        var track = handle;
        if(track==this.track) {
          var offsets  = Position.cumulativeOffset(this.track);
          this.event = event;
          this.setValue(this.translateToValue(
          (this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)
          ));
          var offsets  = Position.cumulativeOffset(this.activeHandle);
          this.offsetX = (pointer[0] - offsets[0]);
          this.offsetY = (pointer[1] - offsets[1]);
        } else {
          // find the handle (prevents issues with Safari)
          while((this.handles.indexOf(handle) == -1) && handle.parentNode)
            handle = handle.parentNode;
           
          if(this.handles.indexOf(handle)!=-1) {
            this.activeHandle    = handle;
            this.activeHandleIdx = this.handles.indexOf(this.activeHandle);
            this.updateStyles();
           
            var offsets  = Position.cumulativeOffset(this.activeHandle);
            this.offsetX = (pointer[0] - offsets[0]);
            this.offsetY = (pointer[1] - offsets[1]);
          }
        }
      }
      Event.stop(event);
    }
  },
  update: function(event) {
  if(this.active) {
      if(!this.dragging) this.dragging = true;
      this.draw(event);
      // fix AppleWebKit rendering
      if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
      Event.stop(event);
  }
  },
  draw: function(event) {
    var pointer = [Event.pointerX(event), Event.pointerY(event)];
    var offsets = Position.cumulativeOffset(this.track);
    pointer[0] -= this.offsetX + offsets[0];
    pointer[1] -= this.offsetY + offsets[1];
    this.event = event;
    this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));
    if(this.initialized && this.options.onSlide)
      this.options.onSlide(this.values.length>1 ? this.values : this.value, this);
  },
  endDrag: function(event) {
    if(this.active && this.dragging) {
      this.finishDrag(event, true);
      Event.stop(event);
    }
    this.active = false;
    this.dragging = false;
  }, 
  finishDrag: function(event, success) {
    this.active = false;
    this.dragging = false;
    this.updateFinished();
  },
  updateFinished: function() {
    if(this.initialized && this.options.onChange)
      this.options.onChange(this.values.length>1 ? this.values : this.value, this);
    this.event = null;
  }
}
Vielen Dank! :) ]]> uran http://www.tutorials.de/javascript-ajax/365945-2-handle-slider-scriptaculous.html <![CDATA[[Ajax] POST-Variable enthält undefined, Script-Teil enthält richtigen Wert]]> http://www.tutorials.de/javascript-ajax/365935-ajax-post-variable-enthaelt-undefined-script-teil-enthaelt-richtigen-wert.html Sun, 05 Sep 2010 19:36:32 GMT Hallo zusammen,

meine ersten Anfänge in Ajax, also bidde nicht beschweren. Habe versucht eine AutoSuggest-Box umzufriemeln, um wie z.B. bei Youtube bei klick auf ein Listenelement die URL direkt aufzurufen. Mein Problem ist folgendes: Die Funktion "fill(string)" wird aufgerufen, der erste Befehl "$('#country').val(thisValue);" auch korrekt ausgeführt. Enthaltener Wert (z.B. "Shrek 2") wird auch in die Textbox (id: country) übertragen. Nur bei der Übergabe von thisValue an die redirect.php hapert es ein bisschen. Es wird nur "undefined" übergeben, obwohl thisValue ja eigentlich "Shrek 2" enthält. Wo ist mein Problem?

Danke im Voraus!

Code :
1
2
3
4
5
6
7
8
9
10
11

function fill(thisValue) {
      
        $('#country').val(thisValue);       
        
        $.post("redirect.php", {queryString: ""+thisValue+""}, function(data){
                if(data.length >0) {
                    window.location.href= data;                 
                }
            });
        setTimeout("$('#suggestions').fadeOut();", 300);
    }
]]> WorldRacer http://www.tutorials.de/javascript-ajax/365935-ajax-post-variable-enthaelt-undefined-script-teil-enthaelt-richtigen-wert.html externes CSS via Javascript auswählen http://www.tutorials.de/javascript-ajax/365914-externes-css-via-javascript-auswaehlen.html Sat, 04 Sep 2010 19:59:17 GMT Hallo, ich brauche eure Hilfe, bin leider nicht so sattelfest in JS und probiere schon länger herum... Ich habe eine Seite die auf XHTML basiert und ich möchte dass je nach belieben die Seite grafisch via CSS verändert. Leider? muss ich diesesmal auf Javascript zurück greifen - habe so etwas... Hallo,

ich brauche eure Hilfe, bin leider nicht so sattelfest in JS und probiere schon länger herum...

Ich habe eine Seite die auf XHTML basiert und ich möchte dass je nach belieben die Seite grafisch via CSS verändert. Leider? muss ich diesesmal auf Javascript zurück greifen - habe so etwas immer mit php gelöst...

Kennt jemand von euch ein smartes Script, welches ich für dieses vorhaben verwenden kann?
Ich dachte an so etwas wie hol dir den wert von dem Button und trage diesen in die linkangabe vom CSS ein - nur kann ich das nicht als JS formulieren ;)

Meine idee also:
2 CSS - Dateien
und ein kurzes script das mal auf das eine und mal auf das andere per click schaltet...

ich hoffe ihr könnt mir weiter helfen.

danke und lg ]]> drabbit http://www.tutorials.de/javascript-ajax/365914-externes-css-via-javascript-auswaehlen.html