 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
vayu
Threadersteller
Dabei seit: 09.05.2009
Ort: Berlin
Alter: 46
Geschlecht: 
|
Verfasst So 02.05.2010 05:12
Titel mehre div layer einblenen und ausblenden |
  |
|
ch bin nicht so gut in javascript und hab versucht für eine Seite mit 2 scripten zu experimentieren.
Über einen Button faden 2 Div Layer ein. In dem oberen Div Layer sind wiederum vier button.
durch klicken faded jeweils ein div layer ein aber der offne layer ohne button fadet aus.
Nun zu meinem Problem: der Inhalt ohne Style wird wird von den 4 Layern schon vorher angezeigt. Nachdem aber die beiden ersten Layer einfaden rücken diese Sichtbar nach unten und die beiden Layer faden gewünscht ein.
Die vier Button funktionieren nur teilweise und übernehmen den style nicht.
Hat jemand eine Idee was ich im CSS, Javascript falsch gemacht habe?
CSS:
| Code: | #subcontent {
position: relative;
float: left;
width: 636px;
border-top: 1px dashed #695d54;
padding: 0px;
height: auto;
margin-top: 18px;
margin-bottom: 100px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
background: #EEE;
display:none;
}
#1 {
position: relative;
float: left;
width: 636px;
border-top: 1px dashed #695d54;
padding: 0px;
height: auto;
margin-top: 18px;
margin-bottom: 100px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
background: #EEE;
background-color: #A00;
display:none;
}
#2 {
position: relative;
float: left;
width: 636px;
border-top: 1px dashed #695d54;
padding: 0px;
height: auto;
margin-top: 18px;
margin-bottom: 100px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
background: #EEE;
background: #3C0;
display:none;
}
#3 {
position: relative;
float: left;
width: 636px;
border-top: 1px dashed #695d54;
padding: 0px;
height: auto;
margin-top: 18px;
margin-bottom: 100px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
background: #EEE;
display:none;
}
#4 {
position: relative;
float: left;
width: 636px;
border-top: 1px dashed #695d54;
padding: 0px;
height: auto;
margin-top: 18px;
margin-bottom: 100px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
background: #EEE;
display:none;
}
|
Javascript:
| Code: |
<script type="text/javascript">
var angeschaltet = 0;
function anzeigen(das){
if(angeschaltet != 0)
document.getElementById(angeschaltet).style.display='none';
if(document.getElementById(das).style.display=='none')
document.getElementById(das).style.display='block';
else
document.getElementById(das).style.display='none';
angeschaltet= das;
}
</script>
$(function(){
$("a#fadeout").click(function(){
$("#contentohne").fadeOut(1000);
});
$("a#fadein").click(function(){
$("#contentohne").fadeIn(1000);
});
$("a#fadeout").click(function(){
$("#content").fadeOut(1000);
});
$("a#fadein").click(function(){
$("#content").fadeIn(1000);
});
$("a#fadeout").click(function(){
$("#bcontent").fadeOut(1000);
});
$("a#fadein").click(function(){
$("#bcontent").fadeIn(1000);
});
$("a#fadeout").click(function(){
$("#ccontent").fadeOut(1000);
});
$("a#fadein").click(function(){
$("#ccontent").fadeIn(1000);
});
$("a#fadeout").click(function(){
$("#dcontent").fadeOut(1000);
});
$("a#fadein").click(function(){
$("#dcontent").fadeIn(1000);
});
$("a#fadeout").click(function(){
$("#econtent").fadeOut(1000);
});
$("a#fadein").click(function(){
$("#econtent").fadeIn(1000);
});
$("a#fadeout").click(function(){
$("#subcontent").fadeOut(5000);
});
$("a#fadein").click(function(){
$("#subcontent").fadeIn(5000);
});
$("a#fadeout").click(function(){
$("#contentkontakt").fadeOut(5000);
});
$("a#fadein").click(function(){
$("#contentkontakt").fadeIn(5000);
});
});
|
HTML (+Loop von Wordpress)
| Code: |
<div class="inhaltsbox">
<div id="content">
<div class="spalterechts">
<a href="#" onclick="anzeigen('1')">
<?php if (have_posts()) : ?>
<?php $do_not_duplicate = array(); ?>
<?php
while ( have_posts() ) : the_post();
$do_not_duplicate[] = get_the_ID();
?>
<?php the_content(''); ?>
<?php endwhile; ?>
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '98'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<div class="fuerhead"><strong><?php the_title(); ?></strong></div>
<?php the_content(''); ?>
<?php endwhile; ?>
</a><!-- ende a tag 1 -->
</div><!-- ende spalterechts 1 -->
<div class="spalterechts">
<a href="#" onclick="anzeigen('2')">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '99'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<div class="fuerhead"><strong><?php the_title(); ?></strong></div>
<?php the_content(''); ?>
<?php endwhile; ?>
</a><!-- ende a tag 2 -->
</div><!-- ende spalterechts 2 -->
<div class="spalterechts">
<a href="#" onclick="anzeigen('3')">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '100'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<div class="fuerhead"><strong><?php the_title(); ?></strong></div>
<?php the_content(''); ?>
<?php endwhile; ?>
</a><!-- ende a tag 3 -->
</div><!-- ende spalterechts 3 -->
<div class="spaltelinks">
<a href="#" onclick="anzeigen('4')">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '101'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<div class="fuerhead"><strong><?php the_title(); ?></strong></div>
<?php the_content(''); ?>
<?php endwhile; ?>
</a><!-- ende a tag 4 -->
</div><!-- ende spaltelinks 4 -->
</div><!-- ende content rechts -->
<div id="subcontent">
<div id="1">
<div class="sub_texte">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '87'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(''); ?>
<?php endwhile; ?>
</div><!-- ende sub_texte -->
<div class="pdfbreich">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '91'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<?php the_content(''); ?>
<?php endwhile; ?>
</div><!-- ende pdfbereich -->
</div><!-- ende subcontent -->
</div><!-- ende 1 -->
<div id="subcontent">
<div id="2">
<div class="sub_texte">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '88'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(''); ?>
<?php endwhile; ?>
</div><!-- ende sub_texte -->
<div class="pdfbreich">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '92'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<?php the_content(''); ?>
<?php endwhile; ?>
</div><!-- ende pdfbereich -->
</div><!-- ende subcontent -->
</div><!-- ende 2 -->
<div id="3">
<div class="sub_texte">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '89'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(''); ?>
<?php endwhile; ?>
</div><!-- ende sub_texte -->
<div class="pdfbreich">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '93'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<?php the_content(''); ?>
<?php endwhile; ?>
</div><!-- ende pdfbereich -->
</div><!-- ende 3 -->
<div id="4">
<div class="sub_texte">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '90'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(''); ?>
<?php endwhile; ?>
</div><!-- ende sub_texte -->
<div class="pdfbreich">
<?php
$random_query = new WP_Query(array(
'post__not_in' => $do_not_duplicate,
'showposts' => 10,
'orderby' => 'rand',
'cat' => '94'
));
while ($random_query->have_posts()) : $random_query->the_post(); ?>
<?php the_content(''); ?>
<?php endwhile; ?><?php endif; ?>
</div><!-- ende pdfbereich -->
</div><!-- ende 4 -->
|
[/quote]
|
|
| |
  |
 |
vayu
Threadersteller
Dabei seit: 09.05.2009
Ort: Berlin
Alter: 46
Geschlecht:
|
Verfasst So 02.05.2010 17:48
Titel
|
|
|
Ich habe das Problem gelöst.
Ich habe das CSS geändert. jedes div concept1,concept2...... und dann eine classe die Container heißt und alle styling infos beinhaltet.
Das Javascript habe ich wie folgt geändert
| Code: |
<script type="text/javascript">
var angeschaltet = "alex";
function anzeigen(concept_div){ $(".container").css('display', 'none'); $('#concept' + concept_div).css('display', 'block'); angezeigt = concept_div;}
</script>
|
Leider weiss ich nicht, wie ich das ein und ausfaden hinbekomme
Ich hätte diese Funktion, die alleine auch läuft aber weiss nicht wie ich diese integrieren kann.
hat jm ne idee?
| Code: | $("a#fadeout").click(function(){
$("#concept1").fadeOut(5000);
});
$("a#fadein").click(function(){
$("#concept1").fadeIn(5000); |
|
|
| |
|
|
|
Anzeige
|
|
|
| |
|
|
| Ähnliche Themen |
"1 Layer einblenden / 4 Layer ausblenden"-Problem
Layer ausblenden?
Layer ein- und ausblenden
[JS/CSS] Layer ein- und ausblenden?
Div,Layer mit JS ein- oder ausblenden
1 klick = 1 frame öffnen + layer ein-/ausblenden?
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
