Hilfe mit Javascript - Content ein und aus blenden

**wuaschtsalod** · 16.06.2012, 17:39

Hallo Com,

ich bin derzeit am basteln einer Homepage und jetzt geht es an den Feinschliff

Ich habe eine News Seite gebaut auf der wie ja der Name schon sagt Neuigkeiten zu sehen sind. Aber wenn der User jetzt auf diese Seite geht, soll er nicht die vollständigen News sehen sondern nur einige Wörter, zum vollständigen lesen soll er auf Pfeile klicken die dann den ganzen content ausklappen. Natürlich sollen sich die News auch wieder einklappen lassen können und was auch sehr schön wäre, wenn man eine News offen hat und eine zweite aufmacht, die erste sich selbst schließt (also nur immer eine Neuigkeit offen sein kann )

Ich bin derzeit auf diesem stand:

HTML-Code:

<html>
	<head>
		<title>Test</title>
		<style>
			#content{
				position: relative;
				width: 370px;
				padding: 5px;	
				border-right: 2px solid #D8D8D8;
				height: 120px;
				overflow: hidden;
			}
			#arrows {
				position: relative;
				width: 11px;
				height: 14px;
				border: 0px;
				background-image: url(up.png);
			}
		</style>
		<script type="text/javascript">
			function Overflow () {
				document.all.content.style.height = "auto";
				document.all.arrows.style.backgroundImage = "url(down.png)";
				document.getElementById("arrowlink").href = "javascript:Underflow()";
			}
			function Underflow () {
				document.all.content.style.height = "120px";
				document.all.arrows.style.backgroundImage = "url(up.png)";
				document.getElementById("arrowlink").href = "javascript:Overflow()";
			}
			
		</script>
	</head>
	<body>	
		<a id="arrowlink"  href="javascript:Overflow()"><img alt="up" id="arrows"></img></a>
		<div id="content">
			<h3>Neuigkeit - New</h3>
			<h5>09.06.2012</h5>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		</div>
	</body>
</html>

aber so richtig gefällt mir die methode auch nicht :/

Vielleicht kann mir ja einer von euch weiterhelfen...
Ich wäre sehr dankbar!

Schonmal jetzt DANKE für eure Hilfe! Ich hoffe ich hab mich klar genug ausgedrückt, falls nicht kann ich auch noch schnell ein paar Screenshoots machen!

Danke,
wuaschtsalod

**PascalKremp** · 16.06.2012, 20:56

Hi wuaschtsalod,

magst du vielleicht genauer beschreiben, wie du es haben möchtest?

So etwas in der Art? http://jsfiddle.net/3RhWq/ (Oben auf Run klicken)

Gruß

**wuaschtsalod** · 16.06.2012, 21:32

Danke schon mal für deine schnelle Antwort!

Ja vom Prinzip stimmt es.

IST - Zustand:
Beitrag lässt sich mit den Pfeilen ausklappen und wieder einklappen.
Leider funktioniert das nur solange wie die ID nur einmal vergeben ist...

SOLL - Zustand:
Jeder Beitrag soll ausgeklappt bzw. wieder eingeklappt werden können, ist aber ein Beitrag aktiv (ausgeklappt) soll dieser erst eingeklappt werden, bevor der zweite Ausgeklappt wird.

Ich hoffe man versteht es jetzt besser, ich werde noch kurz ein Bild machen, damit man es besser erkennen kann wovon ich rede.

Danke und Gruß

Hier noch kurz das Bild:
Name: sollzustand.png
Hits: 87
Größe: 45,8 KB

Name: sollzustand.png
Hits: 87
Größe: 45,8 KB

**PascalKremp** · 21.06.2012, 14:23

Sorry, habe erst jetzt deine Antwort gelesen.
Wenn du noch zu keiner Lösung gekommen bist: eine Lösung http://jsfiddle.net/8jVbJ/

**wuaschtsalod** · 23.06.2012, 21:12

Hallo Pascal,
ein rießiges DANKESCHÖN an dich! Das ist genau das was ich gesucht habe, aber leider bekomme ich es irgendwie nicht so recht hin einzubauen, ich glaube ich mach irgendwas falsch oder steh gerade einfach nur auf dem Schlauch?!

Ich habe mir, da ja jQuery den jQuery 1.7.2 Codepack da runtergeladen und in meine HTML-Datei importiert, dann habe ich noch den Code von dir, heißt CSS + Javascript + HTML integriert. Angezeigt wird zwar dann alles, aber irgendwie kann ich dann nix machen :/

Wäre toll wenn du mir noch ein letztes mal helfen könntest!

Danke schon einmal,
schöne Grüße!

**PascalKremp** · 24.06.2012, 13:37

Gerne helfe ich auch noch drei mal

Hast du darauf geachtet, dass Klassen im JavaScript, CSS und HTML gleich heißen?
Hast du jQuery importiert bevor du mein Script aufrufst?

Zeig mir bitte deinen Quelltext, wenn die 2 Fragen dir noch geholfen haben.

Gruß

**wuaschtsalod** · 25.06.2012, 17:33

Ich habe es dann sogar mit Copy + Paste versucht, was leider auch nicht geklappt hat...

Hier mal mein letzes Ergebnis:

Nicht erschrecken, ich habe den unnötigen Code (wie Header und Menü) mal rausgelassen:

Code:

html{
	font: 14px Arial, sans-serif;
}
h1{
	font: 36px "Trebuchet MS", Georgia, serif;
	font-weight: bold;
	color: #B90000;
	margin: 0px 0px 5px 0px;
	text-align: center;
	border-bottom: 1px solid #D8D8D8;
}
#wrapper{
	position: relative;
	width: 1000px;
	left: 50%;
	margin-top: 30px;
	margin-left: -500px;
	margin-bottom: 25px;
	min-height: 800px;
	padding: 25px;
	border: 2px solid #FFFFFF;
	box-shadow: 0 0 10px #999999;
	background-color: #EFEFEF;
	border-radius: 15px;
}
#headline{
	position: relative;
	width: 770px;
	height: 75px;
	left: 50%;
	margin-left: -385px;
	margin-top: 30px;
}
#content{
	position: relative;
	width: 1000px;
	min-height: 700px;
	overflow:auto;
	left: 50%;
	margin-left: -500px;
}
#content_right{
	position: relative;
	float: left;
	width: 770px;
	margin-left: 20px;
}
#content_left_line {
	position: relative;
	float: left;
	width: 370px;
	padding: 5px;	
	border-right: 2px solid #D8D8D8;
	height: 110px;
	overflow: hidden;
}
#content_right_line {
	position: relative;
	margin-left: 380px;
	border-left: 2px solid #D8D8D8;
	float: left;
	width: 370px;
	padding: 5px;
	text-align: left;
	height: 110px;
	overflow: hidden;
}
/*Javascript (News)*/
article {
    padding:1em;
    margin:1em;
    box-shadow:0px 2px 3px rgba(0,0,0,0.65);
}
.entry-content {
    height:75px;
    overflow:hidden;
    opacity:0.5;
}
.entry-content.full {
    height:auto;
    opacity:1;
}
header {
    border-bottom:1px solid #cccccc;
    margin-bottom:0.25em;
    padding-bottom:0.25em;   
    position:relative;
    cursor:pointer;
}
header a {
    position:absolute;
    top:0;
    right:10px;
    font-weight:bold;
    text-decoration:none;
    color:blue;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}

.less {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);    
}

HTML-Code:

<html>
	<head>
		<link href="inc/style.css" rel="stylesheet" type="text/css">
		<script src="inc/jquery.js"></script>
		<script>
			(function($) {
				allArticlesContent = $('.entry-content');
				arrows = $('article header a');
				$('header').on('click', function(e) {
					self = $(this);
					content = self.parent('article').find('.entry-content');
					arrow = self.find('a');
					contentHeight = content.height();        
					
					if (content.hasClass('full')) {
						content.toggleClass('full');
						arrow.toggleClass('less');        
					} else {
						arrows.removeClass('less');
						allArticlesContent.removeClass('full');            
						content.addClass('full');
						arrow.addClass('less');            
					}
					
					e.preventDefault();
				});
			})(jQuery);
		</script>
	</head>
	
	<body>
		<div id="wrapper">
			<div id="content">
				<div id="content_right">
					<div id="headline">
						<h1>Neuigkeiten</h1>
					</div>	
					<div id="content_left_line">
						<article>
							<header>
								<h1>Heading 2</h1>
								<a href="#" class="more"> >> </a>
							</header>
							<div class="entry-content">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
								tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
								quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
								consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
								cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
								proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
								tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
								quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
								consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
								cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
								proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							</div>
						</article>
					</div>
					<div id="content_right_line">
						<article>
							<header>
								<h1>Heading 2</h1>
								<a href="#" class="more"> >> </a>
							</header>
							<div class="entry-content">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
								tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
								quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
								consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
								cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
								proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
								tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
								quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
								consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
								cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
								proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							</div>
						</article>
					</div>
					<div id="content_left_line">
						<article>
							<header>
								<h1>Heading 2</h1>
								<a href="#" class="more"> >> </a>
							</header>
							<div class="entry-content">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
								tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
								quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
								consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
								cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
								proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
								tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
								quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
								consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
								cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
								proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							</div>
						</article>
					</div>
					<div id="content_right_line">
						<article>
							<header>
								<h1>Heading 2</h1>
								<a href="#" class="more"> >> </a>
							</header>
							<div class="entry-content">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
								tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
								quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
								consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
								cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
								proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
								tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
								quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
								consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
								cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
								proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							</div>
						</article>
					</div>					
				</div>
			</div>
		</div>
	</body>
</html>

Ich hoffe es ist nicht all zu viel Aufwand für dich!
Auf alle Fälle noch einmal Danke für deine Mühen!

Gruß

**PascalKremp** · 26.06.2012, 08:16

Hi,

Lade Javascript vor dem schließenden Body-Tag
Recherchiere, wann man Klassen und wann man IDs benutzt
Deine Elemente mit der ID #content_left_line und #content_right_line haben eine gesetzte Höhe und overflow: hidden; Daraus folgt, wenn Elemente darin größer werden, merkst du davon nichts.

In meinem Blog erkläre ich, wie man heutzutage HTML & CSS lernen sollte. Das solltest du dir mal genau angucken.

**wuaschtsalod** · 01.07.2012, 19:31

Danke für deine zahlreichen Hilfestellungen jetzt funktioniert es

Habe deine Punkte berücksichtigt und werde es dann auch gleich so beibehalten

Bis dann, danke!
Wuaschtsalod

zur Startseite vom TP

Thema: Hilfe mit Javascript - Content ein und aus blenden

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Hilfe mit Javascript - Content ein und aus blenden

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

[jQuery] per Ajax erzeugter Content - dort erneut Javascript ausführen

Hilfe bei Daz3d content installation in Poser7

Hilfe: komische Kästen nach Content-Inhalt

Hilfe! Content Links Typo3 mit Templavoila

Content-Scrolling mit Javascript einbauen

Aktive Benutzer

Aktive Benutzer

Berechtigungen