Produkt-PopIn / - PopOut

Button eingefügt, der die Produktnavigation ein und ausblendet.

by rob_st

HTML

<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"><head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<!-- 
    This website is powered by TYPO3 - inspiring people to share!
    TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
    TYPO3 is copyright 1998-2012 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
    Information and contribution at http://typo3.org/
-->

<base href="http://www.rauchmoebel.de/">


<meta content="TYPO3 4.6 CMS" name="generator">
<meta content="Schlafräume, Einzelschränke, Schranksysteme, Beimöbel und Betten, Studio- und Apartmentmöbel, Jugendmöbel" name="keywords">
<meta content="Die Rauch Möbelwerke produzieren Möbel für Schlafräume, Jugendzimmer und Apartments. Alle Produktlinien finden Sie auf unserer Internetseite." name="description">
<meta content="INDEX,FOLLOW,ARCHIVE" name="robots">

<link media="all" href="http://www.rauchmoebel.de/typo3temp/stylesheet_1d666a3d27.css" type="text/css" rel="stylesheet">
<link media="all" href="http://www.rauchmoebel.de/fileadmin/templates/css/styles.css?1347524664" type="text/css" rel="stylesheet">
<link media="all" href="http://www.rauchmoebel.de/fileadmin/templates/css/user.css??1347528180" type="text/css" rel="stylesheet">


<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" src="http://www.rauchmoebel.de/uploads/tx_t3jquery/jquery-1.7.x-1.8.x-1.2.x.js"></script>
<script type="text/javascript" src="http://www.rauchmoebel.de/typo3temp/javascript_147ff7e23e.js"></script>


<title>Benita Rauch Möbelwerke GmbH</title> <!--[if IE 6]><style type="text/css">@import url(http://www.rauchmoebel.de/fileadmin/templates/css/ie6.css);</style><![endif]--><!--[if IE 7]><style type="text/css">@import url(http://www.rauchmoebel.de/fileadmin/templates/css/ie7.css);</style><![endif]--><script...

JavaScript

var poppedIn = false;
var menuWidth;
var contentPaddingR;
var contentPaddingL;
var contentWidth;

jQuery(document).ready(function() {
    contentWidth = jQuery('#content').css('width');
    cPR = jQuery('#content').css('padding-right').match(/(\d+)/);
    contentPaddingR = parseInt(cPR[0], 10);
    cPL = jQuery('#content').css('padding-left').match(/(\d+)/);
    contentPaddingL = parseInt(cPL[0], 10);
    mW = jQuery('#menu').css('width').match(/(\d+)/);
    menuWidth = parseInt(mW[0], 10);
    // alert('contentWidth: ' + contentWidth + ' || contentPaddingR: ' + contentPaddingR + ' || contentPaddingL: ' + contentPaddingL + ' || menuWidth: ' + menuWidth);
});
    
                                                                              

jQuery("#product-pop").click(function() {

    if(!poppedIn) {
    jQuery('#main').animate({
        "margin-left": "-" + menuWidth + "px"
    }, 400);
    jQuery('#content').delay(200).animate({
        "padding-right": contentPaddingL + "px",
        "width": "+=" + (menuWidth + (contentPaddingR - contentPaddingL))
    }, 400); 
    jQuery('#bottomnavigation, #footer').animate({
        "margin-left": "-" + menuWidth,
        "width": "+=" + (menuWidth + (contentPaddingR - contentPaddingL))
    }, 400);
    jQuery(".popped-out").fadeOut(25, function () {
        jQuery(this).addClass("popped-in").fadeIn(25, function () {
            jQuery(this).removeClass("popped-out");
        });
    });
    
    // alert("function executed");
    
    poppedIn = true;
    
} else {
                             
    // alert("executing");
    jQuery('#content').animate({
        "width": contentWidth,
        "padding-right": contentPaddingR
    }, 400);
    jQuery('#main').delay(200).animate({
        "margin-left": "0"
    }, 400);
    jQuery('#bottomnavigation, #footer').animate({
        "margin-left": "0",
        "width": contentWidth
    }, 400);
    jQuery(".popped-in").fadeOut(25, function () {
       ...