Statistiken

Benutzer
2
Beiträge
18
Anzahl Beitragshäufigkeit
37545

Wer ist online

Aktuell sind 10 Gäste und keine Mitglieder online

Eigene Inhalte Logo

Eigene Inhalte Info

Diese Web-Präsentation ist zu Testzwecken mit Joomla! 3.x, Bootstrap 2 und eigenem JavaScript installiert. Sie soll aufzeigen was mit Joomla! 3.x und Bootstrap 2 möglich ist, evtl. Fehler aufzeigen, und helfen dafür Lösungen zu finden. Es ist eine reine Demoseite und dient ausschließlich zur Veranschaulichung.

Top Slider

Der TopSlider wird über Javascript realisiert. Er kann über externe Button auf/zu, oder über ein wechselnden angehängten Button aktiviert werden. Der Top Slider wird auf dieser Seite oben rechts mit dem "more.." Button geöffnet. Der angehängte SlideButton ist auskommentiert und hier nicht sichtbar.

Für den Module-Positions-Aufbau (slide 1 bis 4) siehe logic.php.

HTML

 <?php if ($this->countModules ('slide1 or slide2 or slide3 or slide4')) { ?>
<div class="slideContainer container-fluid">

    <div class="slideContent">
    
        <div class="row-fluid">
            <!-- BUTTON CLOSE SLIDE TOP -->
            <button id="slideCloseBtn" class="btn btn-small btn-info pull-right" style="margin:3px 0;">close <i class="icon-remove"></i></button>
        </div>
            
        <div class="row-fluid">
            <?php if($this->countModules('slide1')) : ?>
            <div class="span<?php echo $count_slideA; ?> well">
                <jdoc:include type="modules" name="slide1" style="xhtml" />
            </div>
            <?php endif; ?>
            <?php if($this->countModules('slide2')) : ?>
            <div class="span<?php echo $count_slideA; ?> well">
                <jdoc:include type="modules" name="slide2" style="xhtml" />
            </div>
            <?php endif; ?>
            <?php if($this->countModules('slide3')) : ?>
            <div class="span<?php echo $count_slideA; ?> well">
                <jdoc:include type="modules" name="slide3" style="xhtml" />
            </div>
            <?php endif; ?>
            <?php if($this->countModules('slide4')) : ?>
            <div class="span<?php echo $count_slideA; ?> well">
                <jdoc:include type="modules" name="slide4" style="xhtml" />
            </div>
            <?php endif; ?>
        </div>

    </div>

<!--
    <div id="slideBtn" class="btn">
        <div class="slideBtn slideOpen">open <i class="icon-chevron-down slideBtn"></i></div>
        <div class="slideBtn slideClose">close <i class="icon-chevron-up slideBtn"></i></div>
    </div>
-->

</div><!-- end .container-fluid -->
<div id="sliderPageBG"></div>
<?php } ?>

CSS

.slideContainer {
	/*position: absolute; = ausgelagert in JS, falls JS mal deaktiviert ist */
	top: 0;
	left: 0;
	right: 0;
	border-bottom: 1px solid #CCC;
	z-index:5000;
	background-color: #fafafa;
	-webkit-box-shadow: 0 1px 20px 0px #999;
	-moz-box-shadow: 0 1px 20px 0px #999;
	box-shadow: 0 1px 20px 0px #999;
	}
.slideContainer.minimized {
	position: absolute;
	top: 0;
	left: 0;
	}
.slideContainer.minimized .slideContent {
	display: none;
	}
.slideContent {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index:5001;
	}
.slideContainer #slideBtn {
	position: absolute;
	right:20px;
	width: 80px;
	padding: 2px 0;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	z-index:100;
	-webkit-box-shadow: 0 1px 3px 0px #999;
	-moz-box-shadow: 0 1px 3px 0px #999;
	box-shadow: 0 1px 3px 0px #999;
	-webkit-border-radius: 0 0 7px 7px;
	-moz-border-radius: 0 0 7px 7px;
	border-radius: 0 0 7px 7px;
	}
.slideContainer #slideBtn .slideClose,
.slideContainer.minimized #slideBtn .slideOpen {
	display: block;
	}
.slideContainer #slideBtn .slideOpen,
.slideContainer.minimized #slideBtn .slideClose {
	display: none;
	}

#sliderPageBG {
	background-color: transparent;
	opacity: 1;
	-webkit-transition: all 400ms linear;
	-moz-transition: all 400ms linear;
	-ms-transition: all 400ms linear;
	-o-transition: all 400ms linear;
	transition: all 400ms linear;
	z-index: 0;
	}
#sliderPageBG.sliderPageBG {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4999;
	background-color: rgba(0,0,0,0.8);
	opacity: 0.8;
	-webkit-transition: all 400ms linear;
	-moz-transition: all 400ms linear;
	-ms-transition: all 400ms linear;
	-o-transition: all 400ms linear;
	transition: all 400ms linear;
	}

Javascript

(function($){

    $(document).ready(function() {
    
        var TopSlider = function (jElement , initState) {
            this.element = jElement;
            this.state;
            this.animationDuration = "slow";
            
            // init
            this.setState (initState);
            this.update ();
        };
    
        TopSlider.prototype = {
    
            setState : function (state) {
                this.state = true === state;
                this.feedbackState (this.state);
            } ,
    
            getState : function () {
                return (this.state);
            } ,
    
            toggleState : function (state) {
                if (undefined === state) {
                    state = ! this.state;
                }
                this.state = state;
                this.feedbackState (this.state);
            } ,
    
            update : function () {
                this.element.toggleClass ('minimized' , ! this.state);
            } ,
    
            toggle : function () {
                if (true === this.state) {
                    this.close ();
                } else {
                    this.open ();
                }
            } ,
    
            open : function () {
                $('#sliderPageBG').addClass('sliderPageBG');
                if (false !== this.state) {
                    return false;
                }
    
                var height = this.getHeight ();
                var margin = -1 * height;
                var that   = this;
                this.element.toggleClass ('minimized' , false);
                this.element
                .css ({
                    marginTop: margin
                })
                .animate ({
                    marginTop: 0
                } , {
                    duration : that.animationDuration,
                    complete : function () {
                        that.setState (true);
                        that.update ();
                    }
                });
            } ,
    
            close : function () {
                $('#sliderPageBG').removeClass('sliderPageBG');
                if (true !== this.state) {
                    return false;
                }
        
                var height = this.getHeight ();
                var margin = -1 * height;
                var that   = this;
                this.element
                .css ({
                    marginTop: 0
                })
                .animate ({
                    marginTop: margin
                } , {
                    duration : that.animationDuration,
                    complete : function () {
                        that.setState (false);
                        that.update ();
                        that.element.css ({
                            marginTop: 0
                        });
                    }
                });
            } ,
    
            getHeight : function () {
                // fürs konkrete Objekt setzen
            } ,
            
            feedbackState : function () {
                // fürs konkrete Objekt setzen
            }
        };
    
    /* ========== TOP SLIDE CONTENT ========== */
    
        var slideContainer = $('.slideContainer');
        var slideContent   = slideContainer.find ('.slideContent');
        var slideButton    = slideContainer.find ('.slideBtn');
        
        $(slideContainer).css({'position':'absolute'});
        
        var slider = new TopSlider (slideContainer , false);
        slider.getHeight = function () {
            return (slideContent.height ());
        };
    
        $(document).bind ('click', function (event) {
            var target = $(event.target);
            if (target.is(slideButton)) {
                slider.toggle ();
            } else if (target.is (slideContainer) || target.closest (slideContainer).is (slideContainer)) {
                //
            } else {
                slider.close ();
            }
        });
      
        
        $('#slideOpenBtn').click (function (event) {
            slider.open ();
            event.stopPropagation ();
        });
    
        $('#slideCloseBtn').click (function (event) {
            slider.close ();
            event.stopPropagation ();
        });
    
    
    });

})(jQuery);

Kommentar schreiben

Bitte habt dafür Verständnis, dass erst nach Sichtung der Einträge eure Einträge freigestellt werden, und auch erst dann sichtbar für alle sind.


Sicherheitscode
Aktualisieren