[FRAGE] kennt einer von euch so ein script

[jhaustein]

hallo gemeinschaft

kennt einer von euch vielleicht so ein script, dass dieses kann mit dem einschieben von rechts von neuen seiten

test

 

[kkapsner]

Schau' dir auf der Seite doch einfach im Quelltext an, wie das gemacht wurde...

 

[jhaustein]

bekomme ich nicht hin - ist irgendwie komisch gemacht

 

[mikdoe]

Wenn du versuchst zu beschreiben, warum du es nicht hinbekommst könnte man dir helfen. Allerdings ist mir der URL nicht geheuer, werde ihn nicht anklicken.

 

[jhaustein]

hi

ich möchte folgendes erreichen, dass ich in einer horizontalen menüleiste navieinträge habe und wenn man auf eines klick, dann kommt das entsprechende fenster von der rechten seite eingeflogen und bleibt dann mittig stehen - beim naechsten klick auf ein anderen navipunkt verschwindet das aktuelle fenster nach links und das neue kommt von der rechten seite nach

die gesamtgrösse des background ist grösser als das einfliegende fenster

 

[mikdoe]

Könnte mir vorstellen, dass man das mit https://api.jquery.com/animate ganz gut machen kann. Aber ich kann dir keine Details dazu geben, ich arbeite sonst nicht mit Animationen.

 

[Sempervivum]

Wenn Du etwas vorgefertigtes suchst, kann ich dir jQuery Mobile empfehlen. Das ist allerdings nicht genau so wie dein Beispiel weil es eine ganze Seite einfliegen lässt, so dass die Navigation nicht fixiert ist. Ich verwende es selbst, hier kannst Du es in Aktion sehen:
Phalaenopsis Memoria Liu Jin-Chyuan 'KF #3'
Du kannst ja mal im Forum fragen, ob man dabei auch die Navigation fixieren kann:
https://forum.jquery.com/jquery-mobile
Ich glaube nämlich, mich zu erinnern, dass man gezielt ein bestimmtes div bewegen kann.
Edit: Schau dir mal hier
http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/
den Punkt 1 an, da ist eine Struktur mit Header, Content und Footer angegeben. Möglicher Weise bleibt dabei der Header fixiert.

 

[jhaustein]

könnt ihr mir vielleicht beschreiben, wie ich die seite kopieren kann - mit httrack funzt es nicht

 

[Sempervivum]

Meinst Du deine Beispielseite? Nur dafür brauchst Du kein HTTrack. Einfach mit "Datei" - "Seite speichern unter" abspeichern (im FF, in anderen Browsern sicher so ähnlich).
Ich habe übrigens recherchiert, wie man den Header mit jQuery Mobile fixieren kann:
Multipage example

 

[jhaustein]

waere toll, wenn ihr da mal schauen könntet

Wie ihr oben seht, habe ich oben die navigation

Jetzt möchte ich, dass unabhängig von der auflösung des bildschirmes es nur ein eintrag angezeigt wird

Also nur hallo welt
Oder hallo welt 1 usw

Bekomme das nicht hin, weil in der css unter slides steht
/* jQuery changes the width later on to the sum of the widths of all the slides. */

waere steinstark, dass jedes fenster einen hintergrund haette, der schwarz ist und eine breite von 600px hat - dachte immer, dass ich das in der css machen könnte



Lieben gruss
joerg

 

[Sempervivum]

Hast Du das selbst geschrieben oder irgendwo aus dem Internet?
IMO müsstest Du die Breite des slide-divs auf 100% setzen.
Edit: nein, damit funktioniert es nicht. Aber so, indem man mit jQuery die Breite der slide-divs auf die Fensterbreite setzt:

$(document).ready(function () {
    /* This code is executed after the DOM has been completely loaded */

    var totWidth = 0;
    var positions = new Array
    $(".slide").width($(window).width()); // Neu

waere steinstark, dass jedes fenster einen hintergrund haette, der schwarz ist und eine breite von 600px hat - dachte immer, dass ich das in der css machen könnte

Warum denn 600 Pixel? Dann bleibt doch bei größeren Bildschirmen ein weißer Rand. Geht aber mit Background-Image für das slide-div:
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm

 

[jhaustein]

600 Px weil ich noch ein hintergrundbild einbauen will vor dem dann die Bilder rein u rausfahren

 

[jhaustein]

könnt ihr bitte nochmal schauen - habe nun es halbwegs so, wie ich es haben wollte - mit einem kleinen kinken

wenn die startseite kommt, dann soll im mittleren anzeigeblock kein hintergrund sein im slider - wenn ich in der css es so einstelle, dann fliegt mir die ganze seite um die ohren

.slide{
	float:left;

	height:400px;
	background:url(../../Users/haui/Documents/Unbenannte%20Site%204/container.jpg);
	background-position:center;
	background-repeat:no-repeat;
	margin-top:10px;

width:10px;
}
.slide_ohne{
	float:left;
	margin-top:20px;
	height:400px;
	background:url(../../Users/haui/Documents/Unbenannte%20Site%204/container.jpg);
	background-position:center;
	background-repeat:no-repeat;
	

width:10px;
}

<div id="slides">

    <div class="slide_ohne" ><span class="rosa" >Willkommen</span></div>
    <div class="slide">Hallo Welt1</div>
    <div class="slide">Hallo Welt2</div>
    <div class="slide">Hallo Welt3</div>

    </div>

 

[Sempervivum]

dann fliegt mir die ganze seite um die ohren

Was meinst Du damit?
Warum setzt Du bei .slide_ohne width:10px;? Diese Breite wird nicht vom Skript überschrieben, da dieses nur auf .slide wirkt. Besser auf .slide_ohne verzichten und noch eine zusätzliche Klasse bei den Containern mit Hintergrundbild.

 

[jhaustein]

wie meinst du das? slide_ohne ist doch ne neue klasse

 

[jhaustein]

habe es nun so gemacht - keine änderung

.rosa {color:#FFF;
	margin-top:20px;
	height:400px;
	background:url(../../Users/haui/Documents/Unbenannte%20Site%204/container.jpg);
	background-position:center;
	background-repeat:no-repeat;
	width:600px;
	/** Alle anderen Browser **/
min-width:600px;
width:auto !important;
/** Internet Explorer **/
width:600px;}

    <div class="slide" ><span class="rosa"  style="width:600px; height:500px">Willkommen</span></div>

 

[Sempervivum]

Beschreib doch mal genau was Du willst. Ich habe dich so verstanden: Auf allen Seiten außer Home soll die Hintergrundgrafik zu sehen sein. Was willst Du jetzt mit der Klasse rosa bezwecken?

 

[jhaustein]

jetzt hab ich es so langsam - nun noch eine letzte frage hierzu
hinter den menüeinträgen ist ein senkrechter balken - finde ihn nicht in der css - den möchte ich gerne weghaben

 

[Sempervivum]

Ich finde, die senkrechten Linien sehen gar nicht schlecht aus. Ich würde sie lassen!
Die ganz links wird durch dieses erzeugt:
HTML:

        <li class="fbar"> </li>

CSS:

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	background:url(img/divider.png) no-repeat right;
}

und die anderen durch dieses CSS:

li a{
	display:block;
	background:url(img/divider.png) no-repeat right;
	height:35px;
	padding-top:10px;
}

d. h. es handelt sich jeweils um die Grafik divider.png

 

[mikdoe]

Sempervivum, woher wußtest du, welchen Strich er meint?