Toggle Image in HTML?

3 Antworten

Ich würde hier mit toggleClass arbeiten und die Animation mit CSS realisieren.

http://api.jquery.com/toggleclass/

$( ".toggleElement" ).toggleClass( "hide" )

In CSS würde das ganze so aussehen:

.toggleElement{ display: block; }

.toggleElement.hide{ display: none; }

Habe es jetzt geschafft über jquery 

$(document).ready(function(){
$("#button5").click(function(){
$("#b5").fadeToggle(350);
});
});

0

Kontaktformular mit Erfolgsmeldung? programmieren?

Hallöchen,

ich habe gerade in einem Kontaktformular einen Hone Pot eingebaut. Nun funktioniert es auch einwandfrei, allerdings finde ich die Erfolgsmeldung sehr umhübsch und mit der UTF-8 kodierten php Datei, fährt sich alles fest. Kann mir jemand sagen woran das liegen könnte?

Danke schon mal.

Lg Paddy

<!DOCTYPE html>

<?php
  if($_POST){
    $to = 'info@elbblickwerbung.de';
    $subject = 'Über Elbblick kam eine Mail';
    $from_name = $_POST['name'];
    $from_email = $_POST['email'];
    $from_phone = $_POST['phone'];
    $message = $_POST['message'];
    $robotest = $_POST['robotest'];
    if($robotest)
      $error = "Sorry, wir vermuten das es sich um Spam handelt.";
    else{
      if($from_name && $from_email && $message){
        $header = "From: $from_name <$from_email>";
        if(mail($to, $subject, $fromphone, $message, $header))
          $success = "VIELEN DANK F&Uuml;R IHRE NACHRICHT. WIR MELDEN UNS UMGEHEND BEI IHNEN.";
        else
          $error = "Ups, es gab ein Problem. Bitte versuchen Sie es erneut.";
      }else
        $error = "Bitte alle Felder ausfüllen.";
    }
    if($error)
      echo '<div class="msg error">'.$error.'</div>';
    elseif($success)
      echo '<div class="msg success">'.$success.'</div>';
  }
?>

</html>
...zur Frage

Bild oder Elemente unter Div Bereich anordnen

Hallo, ich möchte ein Bild in einem Div Container immer horizontal und vertikal zentriert haben. Der Div Container hat eine feste Höhe und eine variable Breite (z.B 30%). Somit muss das Bild größer als der Div Container sein. Die Zentreirung funktioniert nur das Problem ist das das Bild nicht an den Kanten des Div´s abgeschnitten wird sondern man das ganze Bild sieht. Meine Frage ist nun wie kann ich größere Bilder oder Elemente nicht außerhalb des div´s anzeigen lassen, wenn ich sie in den div-bereich setzte ?

<div id="kasten">   <- nur sichtbarer Bereich des darunter
                        liegendem divs (z.B. width: 30%;
                        height: 500px; )
<div id="größeresbild">  <- übernimmt die Positionierung des Bildes
<img .... das Bild >
</div>
</div>) 
...zur Frage

Weshalb läuft mein Skript nicht?

Kann mir jemand vielleicht sagen, was ich falsch gemacht habe? Das Ding läuft leider nicht bei mir.

#tabi {
  width: 500px;
  height: 400px;
  background: #f0f0f0;
  padding: 25px;
  position: relative;
}

.tabPagination.rechts {
  position: absolute;
  bottom: 25px;
  right: 25px;
}
      
.tabPagination.links {
  position: absolute;
  bottom: 25px;
  left: 25px;
}

<!--A-->
<div id="tabi">
  <div>Inhalt 1</div>
  <div>Inhalt 2</div>
  <div>Inhalt 3</div>
</div>
<!--E-->
      
<script type="text/javascript">
  $(document).ready(function(){
    $('#tabi div').first().attr('class', 'current');

    $('#tabi div').each(function(i) {
      i = i + 1;
      $(this).attr('id', 'tab-' + i);

      if(i !== $('#tabi div').size()) {
        $(this).append('<button class="tabPagination rechts" rel="tab-' + (i + 1) + '">Next</button>');
      }

      if(i !== 1) {
        $(this).append('<button class="tabPagination links" rel="tab-' + (i - 1) + '">Previous</button>');
      }
    });

    $('#tabi div[class!="current"]').hide();

    $('.tabPagination').live('click', function() {
      $('.current').removeAttr('class');
      $('#tabi div[class!="current"]').hide();
      $('#' + $(this).attr('rel')).show();
    });
  });
</script>
...zur Frage

Jquery onClick div anzeigen - was mache ich falsch?

Hallo Zusammen,

ich habe folgenden Code:

<div class="menupoint"><a id="openlogin">LOGIN</a></div>
            <div class="menupoint"><a id="openregistration">REGISTRIERUNG</a></div>

    
 
    <script>
$(document).ready(function(c) {
    $('.overallclose').on('click', function(c){
        $(this).parent().fadeOut('slow', function(c){
        });
    }); 

    $('#openlogin').on('click', function(c){
        $('#login').fadeIn('slow', function(c){
        });
    }); 
    
    $('#openregistration').on('click', function(c){
        $('#registration').fadeIn('slow', function(c){
        });
    }); 

    
});

</script>

Ich möchte durch einen Click auf den Link "Login" oder "Registration" jeweils ein unterschiedlichen div sichtbar machen. So wie es jetzt ist funktioniert es leider nur für den div #login, beim div #registration funktioniert das komischerweise nicht.

Weiss jemand woran das liegen könnte?

Gruß PG

...zur Frage

raspberry pi jquery

Ich hab auf meinem raspi einen apache server und wollte mal fragen wie ich meinen jQuery script in html ausfüren kann -> es funktioniert nicht

html: Button Magic

Click Me!

css: div { height: 60px; width: 100px; border-radius: 5px; background-color: #69D2E7; text-align: center; color: #FFFFFF; font-family: Verdana, Arial, Sans-Serif; opacity: 0.5; }

jQuery $(document).ready(function() { $('div').click(function() { $('div').hide(1000).slideDown(1000); }); });

Kann mir jemand helfen?

...zur Frage

Javascript Click Event vom Hintergrund?

Hallo Leute, Ich hab ein Problem beim Programmieren mit jQuery. Und zwar hab ich theoretisch folgendes aufgebaut:

jQuery:

$("#hintergrund").click(function(){

//hier passiert irgendwas

});

HTML:

Mein Problem ist nun folgendes: Wenn ich im DIV "vordergrund" ins Textfeld klicke, um es auszufüllen, springt er trotzdem in die Clickfunction vom hintergrund ? Was kann ich tun, damit dies nicht passiert?

Vielen Dank schonmal im Vorraus!

...zur Frage

Was möchtest Du wissen?