Beiträge von TRF

Hallo in die Runde,

kurze Frage: Gibt es eine Möglichkeit einen Anker auf den Inhalt eines Details-Tags zu setzen? Sprich wenn ich ein Akkordeon bestehend aus z.B. 5 Datails Tags habe, soll die Seite bei einem normalen Aufruf alle 5 Tags geschlossen haben und den Inhalt erst beim Klick darauf zeigen. Kann ich nun aber einen Anker so setzen, dass beim Aufruf z.B. der Inhalt des dritten Tags direkt aufgeklappt gezeigt wird?

Vielen Dank schon einmal

Hallo zusammen,

Ich möchte gern die Klasse eines Divs abhängig von einem per URL übergebenen Parameter anpassen.

Also z.B. wenn die Seite aufgerufen wird mit "www.meineurl.de/index.html?var=x" soll das div mit der ID #div die Klasse "x" erhalten, wird die Seite mit "www.meineurl.de/index.html?var=y" aufgerufen, soll das div mit der ID #div die Klasse "y" erhalten, wird die Seite ohne Parameter aufgerufen, soll das div keine neue Klasse erhalten.

Probiert habe ich es folgendermaßen:

<script>

        if (window.location.search != '')

         var url = window.location.search;

         var variable = url.replace('?var=', '');

         if (variable=='x') {

           $("#div").addClass("x");

         } else

         if (variable=='y') {

           $("#div").addClass("y");

         }

</script>

per alert habe ich bereits geprüft, ob er die Parameter korrekt ausliest, die variable hat auf jeden Fall den richtigen Wert. Ebenfalls springt er auch korrekt in die Überprüfung. Jedoch wird der addClass() Befehl komplett ignoriert, das Div bekommt also keine neue Klasse.

Wo liegt mein Denkfehler?

Vielen Dank im Voraus...

Perfekt, vielen Dank.

Servus,

ich beles mich jetzt schon seit ungefähr ner Stunde, komm aber nicht wirklich voran.

Ich habe eine externe SVG Datei, mit verschiedenen Pfaden drin. Diese ist per object in eine html Datei eingefügt. Nun möchte ich einzelne Elemente davon per Javascript ansprechen und mit Bewegungsanimationen versehen (einfliegen bzw einblenden, bis die gesamte Grafik entstanden ist).

Leider hab ich aktuell keine Ahnung, wie ich jetzt die einzelnen IDs aus der SVG ansprechen kann. Vielleicht hat ja jemand ein Beispielcode für mich, anhand dessen ich die ganze Sache nachvollziehen kann.

Danke schon mal im Voraus.

Hallöchen,

es ist ja möglich, über Javascript recht einfach einen Upload von z.B. Fotos auf den eigenen Webserver zu ermöglichen.

Dazu 2 konkrete Fragen:

Wie sieht es mit der Sicherheit aus (so dass keiner z.B. Viren hochladen kann)?

Ist es prinzipiell möglich, eine freigegebene Cloud als Speicherort zu hinterlegen?

Ich hoffe ihr könnt mir da helfen, Google spuckt diesbezüglich wenig hilfreiches aus...

Problem grad selbst Gelöst. Es lag am fixierten background-attachment, damit kann das Iphone nicht umgehen. Einfach auf scroll zurückgesetzt für mobile Geräte, schon macht auch das iphone das, was das android bereits selbstständig erledigt hatte. Womit sich mir wieder zeigt, welche Plattform alltagstauglicher ist...

Ich habe hier eine Seite, welche auf einem Iphone leider fehlerhaft dargestellt wird.

Es ist eine Seite im One-Page Design, in der es ein paar Bilder mit Parallax Effekt gibt.

Nun stimmt allerdings die Skalierung auf einem Iphone nicht. Die Bilder sind extrem groß und somit nicht wirklich sichtbar bzw wirken extrem herangezoomt. Auf Andoid-Geräten funktioniert alles wie es soll.

hier mal kurz der Code:

HTML

<div class="parallax1">
    <div class="par1">
        <p class="h2">Text im Vordergrund</p>
    </div>
</div>

CSS

.parallax1 {
    background-image: url("../img/par1.jpg");
    min-height: 100%;   
    height:auto !important;
    height:100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Originalgröße des Bildes ist 1300x864 px.

Wieso wird es im Iphone völlig überzogen dargestellt, während es auf Android funktioniert? Als Browser wurde in beiden Fällen Chrome genutzt. Hat jemand ne Idee?

Das wäre sehr nett. Aktuell funktioniert die Lösung aber für meine Zwecke fehlerfrei und zu 100%. Allerdings für evtl. spätere Projekte wäre es schon sinnvoll einen sauberen Code zu beherrschen

War etwas zu früh gefreut...jetzt funktioniert nämlich das eigentliche Wischen nicht mehr auf allen Browsern...denk aber das bekomm ich auch noch in den Griff

Bessere Lösung:

var mc = new Hammer.Manager(body, {
                touchAction : 'pan-y'
        });

Das funktioniert jetzt reibungslos...

So, Problem auch gelöst. Folgende Änderung/Ergänzung im JS war nötig:

var mc = new Hammer.Manager(body, {
                touchAction : 'auto'
        });

Jetzt funktioniert alles wie es soll. Vielen Dank nochmal

Beim Script hab ich den responsive-part entfernt und eben das eigentliche Verhalten beim swipen geändert.

Hier mal der rudimentäre aber voll funktionierende Code:

HTML + JS:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav-Test</title>
<link href="style/styletest.css" rel="stylesheet" type="text/css">
<script src="hammer.min.js"></script>
</head>
<body>
<div id="openNav">
    <div class="navMain"> 
             <ul>
            <li><a href="#">Nav Item 1</a><hr /></li>
            <li><a href="#">Nav Item 2</a><hr /></li>
            <li><a href="#">Nav Item 3</a><hr /></li>
            <li><a href="#">Nav Item 4</a><hr /></li>
            <li><a href="#">Nav Item 5</a><hr /></li>
            <li><a href="#">Nav Item 6<hr /></li>
        </ul>
    </div>
      <div id="content">
            <div id="navHead">
                    <a href="#openNav" id="openBtn"><img src="img/navBtn.png" class="bild"></a> 
                    <a href="#closeNav" id="closeBtn"><img src="img/navBtn.png" class="bild"></a>
             </div>
             <div id="mainCont">
                <div id="contentHead">
                <p>Inhalt Header</p>
            </div>
                <div id="contentBody">
                <p>Inhalt Hauptteil</p>
            </div>
                <div id="contentFoot">
                <p>Inhalt Foot</p>
            </div>
            
             </div>
    </div>
</div>

<script>
          var body = document.body;    

          var mc = new Hammer.Manager(body);

          var Swipe = new Hammer.Swipe();

          mc.add(Swipe);

          mc.on('swiperight', function () {
                toggleNav('right');
          });

          mc.on('swipeleft', function () {
                toggleNav('left');
          });

    function toggleNav(swipeDirection) {
          if (window.location.href.indexOf("#closeNav") > -1 && swipeDirection == 'right') {
                window.location = "#openNav";
          } else if (window.location.href.indexOf("#openNav") > -1 && swipeDirection == 'left') {
                window.location = "#closeNav";
          } else if (window.location.href.indexOf("#openNav") == -1 && swipeDirection == 'right') {
                window.location = "#openNav";
        }
    }
</script>
</body>
</html>

und CSS:

@charset "utf-8";

* {
    margin:0;
    padding:0;
}

html, body {
    height:100%;
    overflow-x:hidden;
}

.navMain, #content { 
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navMain {
    width:240px;
    height:100%;
    position:fixed;
    left:-240px;
    background:white;
}

.navMain img {
    margin-right: 40px;
}

.navMain li {
    margin-top: 25px;
    margin-bottom: 20px;
    height: 30px;
}

.navMain a:link {
    color: #333;
    text-decoration: none;
}
.navMain a:visited {
    color: #333;
    text-decoration: none;
}
.navMain a:hover {
    color: #333;
    text-decoration: none;
}
.navMain a:active {
    text-decoration: none;
    color: #333;
}
.navMain hr {
    margin-top: 10px;
    opacity: 0.5;
}

#content {
    max-width: 720px;
}

#navHead {
    background-image: url("../img/headerBG.png");
    background-size: auto;

    width: 100%;
    max-width: 720px;
    position:fixed;
}

#openBtn, 
#closeBtn {
    margin:0 0 0 0; 
    color:white; 
    padding:10px;
}

#openBtn {
    display: inline-block;
}

#closeBtn {display:none;}


/* if nav open */

#openNav:target .navMain {left:0;}

#openNav:target #content {
    margin-left:240px;
}

#openNav:target #openBtn {display:none;}

#openNav:target #closeBtn {
    display: inline-block;    
}

#mainCont {
    margin: 0;
    padding: 0;
    padding-top: 13%;
}
    


.bild {
    height: 32px;
    width: 32px;
}

#contentHead {
    height: 150px;
}

#contentBody {
    height: 1000px;
}

#contentFoot {
    height: 150px;
}

die Divs im Contentteil sind im Beispiel extra hoch angelegt, scrollen wäre somit zwingend nötig, funktioniert aber auf Handys nicht. Getestet auf mehreren Mobilgeräten und dort in mehreren Browsern.

Jup...ein Problem hab ich jetzt...das normale vertikale Scrollen ist durch das Hammer Script leider wohl deaktiviert worden. Ergibt ja irgendwie auch Sinn, da es ja im Prinzip Gesten der gleichen Klasse sind. Kann ich das irgendwie umgehen? Meinetwegen auch über ne Funktion, die das eigentlich standardmäßige scrollen im Hammer zusätzlich immitiert?

Ich bin dann doch ein wenig am verzweifeln. Die Gestensteuerung kann ich reproduzieren, ich hab zumindest jetzt einmal die CSS Steuerung so angepasst, dass das Menü losgelöst bewegt werden kann (also der Inhalt wie in deinem Beispiel dahinter verschwindet), aber inzwischen hab ich mich beim Denken ein wenig verlaufen. Die Hybridlösung hab ich bis dato noch nicht...da fehlt mir noch der entscheidende Einfall...

Das Problem ist halt, dass bei der JS Variante ja die Klasse des Menüs geändert wird, während ich bei der CSS Variante einfach nur eine Div-ID manipuliere...ich denk ich bin dicht dran, aber mir fällt das denken grad echt schwer

OK, ich vermelde einen Durchbruch. Nachdem ich mir meine letzte Aussage und den JS Code nochmal genau angeschaut hab kam die erleuchtung. Ich immitiere im JS einfach mein CSS Verhalten, schon funktioniert es. Ich denke ich kann es jetzt problemlos adaptieren, erste Tests haben jetzt gut funktioniert. Vielen Dank für das gute Beispiel oben

Stimmt, jetzt funktioniert es bei mir ebenso. Ob ich das allerdings in meine bestehende Seite integrieren kann bin ich aktuell eher unsicher. Der responsiveteil aus deinem Beispiel ist für mich gar nicht nötig, da auch bei höherer Auflösung das off Canvas Menü nutze. Das ganze wird später zu 80% auf Handys und noch 20% auf Tablets genutzt, es wird keine Homepage in dem Sinn. Dies nur mal als Zusatzinfo.

Ich werde jetzt einmal versuchen, das Beispiel welches du gepostet hast für mich zu adaptieren, wichtig ist dabei, dass der Klick auf den Button per CSS realisiert werden muss (per Javascript wäre es ja mit onclick wohl recht einfach), da diese Funktion ja auch bei deaktiviertem Javascript voll funktionieren soll.

Zeitgleich habe ich aber gestern schnell noch den bei mir existierenden Code vereinfacht, so dass nur noch das Menü übrig ist. Nachfolgend der Code:

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav-Test</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="openNav">

    <div id="navMain" class="navMain"> 
             <ul>
            <li><a href="#">Nav Item 1</a><hr /></li>
            <li><a href="#">Nav Item 2</a><hr /></li>
            <li><a href="#">Nav Item 3</a><hr /></li>
            <li><a href="#">Nav Item 4</a><hr /></li>
            <li><a href="#">Nav Item 5</a><hr /></li>
            <li><a href="#">Nav Item 6<hr /></li>
        </ul>
    </div>

      <div id="content">
            <div id="navHead">
                    <a href="#openNav" id="openBtn"><img src="img/navBtn.png" class="bild"></a> 
                    <a href="#closeNav" id="closeBtn"><img src="img/navBtn.png" class="bild"></a>
             </div>
             <div id="mainCont">
                    <p>Platzhaltertext für Inhalt</p>
             </div>
    </div>
</div>
</body>
</html>

CSS:

@charset "utf-8";

* {
    margin:0;
    padding:0;
}

html, body {
    height:100%;
    overflow-x:hidden;
}

.navMain, #content { 
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navMain {
    width:240px;
    height:100%;
    position:fixed;
    left:-240px;
    background:white;
}

.navMain img {
    margin-right: 40px;
}

.navMain li {
    margin-top: 25px;
    margin-bottom: 20px;
    height: 30px;
}

.navMain a:link {
    color: #333;
    text-decoration: none;
}
.navMain a:visited {
    color: #333;
    text-decoration: none;
}
.navMain a:hover {
    color: #333;
    text-decoration: none;
}
.navMain a:active {
    text-decoration: none;
    color: #333;
}
.navMain hr {
    margin-top: 10px;
    opacity: 0.5;
}

#content {
    max-width: 720px;
}

#navHead {
    background-image: url("../img/headerBG.png");
    background-size: auto;

    width: 100%;
    max-width: 720px;
    position:fixed;
}

#openBtn, 
#closeBtn {
    margin:0 0 0 0; 
    color:white; 
    padding:10px;
}

#openBtn {
    display: inline-block;
}

#closeBtn {display:none;}


/* if nav open */

#openNav:target .navMain {left:0;}

#openNav:target #content {
    margin-left:240px;
}

#openNav:target #openBtn {display:none;}

#openNav:target #closeBtn {
    display: inline-block;    
}

#mainCont {
    margin: 0;
    padding: 0;
    padding-top: 13%;
    margin-left: 5%;
}
    


.bild {
    width: 32px;
    height: 32px;
}

als Bild hab ich ein einfaches png mit Menübutton hinterlegt, dieses häng ich hier einfach mal mit an. Aus dem Quellcode oben und deinem Beispiel brauch ich quasi jetzt einen Hybriden. Ist halt wie gesagt noch Neuland für ich, ich hab grad ein wenig Zeit im Büro, demzufolge versuch ich es jetzt erstmal selbst. Sollte ich es nicht hinbekommen, meld ich mich nochmal.

das Problem bei dem Beispiel ist, das hier auch kein wischen funktioniert. Ich hab mir den Code eben nochmal angeschaut, theoretisch sollte das Wischen ja funktionieren, dies tut es aber nicht. Oder ist die Seite gar nicht zum Testen geeignet und ich muss mir den Beispielcode nochmal selbst kopieren? Sry, ich bin grad etwas müde

Morgen hab ich etwas Ruhe dazu, da schau ich mir das dann nochmal konkret an. Dann kann ich dir auch sagen, ob ich das schon für mein Projekt umsetzen kann.

ich mach dir da mal nen kompletten rudimentären Code fertig. Den gesamten Code bzw die eigentlichen Bilder kann ich dir aus Datenschutzgründen nicht geben, das sollte aber denk ich kein Problem sein.

die Navigation im Beispiel....das ist ja eigentlich ne reine responsive Geschichte, mir ist ja eher wichtig, dass zusätzlich das wischen möglich ist. Allerdings muss ich mir das auch erst nochmal genauer anschauen, habs bisher nur kurz überflogen mangels Zeit im Moment...

Da sich keiner gemeldet hat, kannst du dir das nun einmal anschauen bitte?

Also ich bekomm es aktuell nicht so richtig hin.

Ich hab mir Hammer.js angeschaut, hier bin ich bisher noch gar nicht durchgestiegen. Ich hab zwar schon ein paar kleine Erfahrungen mit Javascript, jedoch ist die gesamte Gestensteuerung komplettes Neuland für mich.

Hier einmal der Code meiner HTML (Links und Inhalt mal ersetzt durch Dummies)

<body id="openNav">

    <div id="navMain" class="navMain"> 
             <ul>
            <li><a href="Link1.html">Link 1</a><hr /></li>
            <li><a href="Link2.html">Link 2</a><hr /></li>
            <li><a href="Link3.html">Link 3</a><hr /></li>
            <li><a href="Link4.html">Link 4</a><hr /></li>
            <li><a href="Link5.html">Link 5</a><hr /></li>
            <li><a href="Link6.html">Link 6</a><hr /></li>
        </ul>
    </div>

      <div id="content">
            <div id="navHead">
                    <a href="#openNav" id="openBtn"><img src="img/navBtn.png" class="bild"></a> 
                    <a href="#closeNav" id="closeBtn"><img src="img/navBtn.png" class="bild"></a>
             </div>
             <div id="mainCont">
                    Blablabla
            </div>
        </div>
</body>

und der dazugehörige (relevante) css Code:

* {
    margin:0;
    padding:0;
}

html, body {
    height:100%;
    overflow-x:hidden;
}

.navMain, #content { 
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.navMain {
    width:240px;
    height:100%;
    position:fixed;
    left:-240px;
    background:white;
}

.navMain img {
    margin-right: 40px;
}

.navMain li {
    margin-top: 25px;
    margin-bottom: 20px;
    height: 30px;
}

.navMain a:link {
    color: #333;
    text-decoration: none;
}
.navMain a:visited {
    color: #333;
    text-decoration: none;
}
.navMain a:hover {
    color: #333;
    text-decoration: none;
}
.navMain a:active {
    text-decoration: none;
    color: #333;
}
.navMain hr {
    margin-top: 10px;
    opacity: 0.5;
}

#content {
    max-width: 720px;
}

#navHead {
    background-image: url("../img/headerBG.png");
    background-size: auto;

    width: 100%;
    max-width: 720px;
    position:fixed;
}

#openBtn, 
#closeBtn {
    margin:0 0 0 0; 
    color:white; 
    padding:10px;
}

#openBtn {
    display: inline-block;
}

#closeBtn {display:none;}


/* if nav open */

#openNav:target .navMain {left:0;}

#openNav:target #content {
    margin-left:240px;
}

#openNav:target #openBtn {display:none;}

#openNav:target #closeBtn {
    display: inline-block;    
}

#mainCont {
    margin: 0;
    padding: 0;
    padding-top: 13%;
}

Im Fall des Klicks auf den Button wird also das Menü reingeschoben indem die CSS Zuweisung verändert wird.

Dies kann ich momentan aber nicht wirklich per Javascript darstellen. Im Prinzip brauch ich nur eine Funktion, mit der ich beim wischen nach rechts den link-verweis auf #openNav und beim wischen nach rechts den Verweis auf #closeNav setzen kann.

Wie bekomm ich das ggf. mit Hammer.js jetzt hin?

Ich bin dann noch über slideout.js gestolpert...das funktioniert sogar mit der Gestensteuerung, allerdings funktioniert der menübutton dann nicht mehr korrekt...Woran kann das liegen?

Danke, werd ich mir mal anschauen. Bleibt aber die grundsätzliche Frage, ob dies überhaupt per Javascript einfach so nachgerüstet werden kann, dass bei deaktiviertem JS die Funktionalität genau so gegeben ist, wie es jetzt der Fall ist. Kann mir das wer sagen?

Hallo,

ich habe eine kleine für Mobilgeräte optimierte Seite gebaut, diese ist aktuell komplett frei von JS (um volle Funktionalität auch bei deaktiviertem JS zu gewährleisten).

In dieser verwende ich ein Off-Canvas Menü, vollständig realisiert per CSS. Per grafischen Button ergibt sich somit der nette Slide-In Effekt.

Nun würde ich gern on Top per Javascript realisieren, dass besagtes Menü auch per wischen von links nach rechts geöffnet und von rechts nach links geschlossen wird.

Die jetzige Funktionalität soll erhalten bleiben, die Wischfunktion eben nur zusätzlich gegeben sein.

Ist dies grundsätzlich möglich? Wenn ja... wie?

Leider bin ich in Javascript nicht allzu bewandert (Ich kanns gut lesen, selbst die Syntax schreiben ist aber problematisch)

Ich bin für jeden Hilfe dankbar