Ergebnis 1 bis 4 von 4

Thema: page slide umschalten

  1. #1
    Azubi(ne)
    Registriert seit
    20.11.2008
    Beiträge
    68
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard page slide umschalten

    Hallo,

    ich habe folgenden code:
    Code:
    (function($){$.fn.pageSlide=function(options){var settings=$.extend({width:"300px",duration:"normal",direction:"left",modal:false,_identifier:$(this)},options);var pageslide_slide_wrap_css={position:'fixed',width:'0',top:'0',height:'100%',zIndex:'999'};var pageslide_body_wrap_css={position:'relative',zIndex:'0'};var pageslide_blanket_css={position:'absolute',top:'0px',left:'0px',height:'100%',width:'100%',opacity:'0.0',backgroundColor:'black',zIndex:'1',display:'none'};function _initialize(anchor){if($("#pageslide-body-wrap, #pageslide-content, #pageslide-slide-wrap").size()==0){var psBodyWrap=document.createElement("div");$(psBodyWrap).css(pageslide_body_wrap_css);$(psBodyWrap).attr("id","pageslide-body-wrap").width($("body").width());$("body").contents().wrapAll(psBodyWrap);var psSlideContent=document.createElement("div");$(psSlideContent).attr("id","pageslide-content").width(settings.width);var psSlideWrap=document.createElement("div");$(psSlideWrap).css(pageslide_slide_wrap_css);$(psSlideWrap).attr("id","pageslide-slide-wrap").append(psSlideContent);$("body").append(psSlideWrap)}if($("#pageslide-blanket").size()==0&&settings.modal==true){var psSlideBlanket=document.createElement("div");$(psSlideBlanket).css(pageslide_blanket_css);$(psSlideBlanket).attr("id","pageslide-blanket");$("body").append(psSlideBlanket);$("#pageslide-blanket").click(function(){return false})}$(window).resize(function(){$("#pageslide-body-wrap").width($("body").width())});$(anchor).attr("rel","pageslide")};function _openSlide(elm){if($("#pageslide-slide-wrap").width()!=0)return false;_showBlanket();if(settings.direction=="right"){direction={right:"-"+settings.width};$("#pageslide-slide-wrap").css({left:0});_overflowFixAdd()}else{direction={left:"-"+settings.width};$("#pageslide-slide-wrap").css({right:0})}$("#pageslide-slide-wrap").animate({width:settings.width},settings.duration);$("#pageslide-body-wrap").animate(direction,settings.duration,function(){$.ajax({type:"GET",url:$(elm).attr("href"),success:function(data){$("#pageslide-content").css("width",settings.width).html(data).queue(function(){$(this).dequeue();$(this).find('.pageslide-close').unbind('click').click(function(elm){_closeSlide(elm);$(this).find('pageslide-close').unbind('click')})})}})})};function _closeSlide(event){if($(event)[0].button!=2&&$("#pageslide-slide-wrap").css('width')!="0px"){$.fn.pageSlideClose(settings)}};function _showBlanket(){if(settings.modal==true){$("#pageslide-blanket").toggle().animate({opacity:'0.8'},'fast','linear')}};function _overflowFixAdd(){($.browser.msie)?$("body, html").css({overflowX:'hidden'}):$("body").css({overflowX:'hidden'})}_initialize(this);return this.each(function(){$(this).unbind("click").bind("click",function(){_openSlide(this);$("#pageslide-slide-wrap").unbind('click').click(function(e){if(e.target.tagName!="A")return false});if(settings.modal!=true){$(document).unbind('click').click(function(e){if(e.target.tagName!="A"){_closeSlide(e);return false}})}return false})})}})(jQuery);(function($){$.fn.pageSlideClose=function(options){var settings=$.extend({width:"300px",duration:"normal",direction:"left",modal:false,_identifier:$(this)},options);function _hideBlanket(){if(settings.modal==true&&$("#pageslide-blanket").is(":visible")){$("#pageslide-blanket").animate({opacity:'0.0'},'fast','linear',function(){$(this).hide()})}}function _overflowFixRemove(){($.browser.msie)?$("body, html").css({overflowX:''}):$("body").css({overflowX:''})}_hideBlanket();direction=($("#pageslide-slide-wrap").css("left")!="0px")?{left:"0"}:{right:"0"};$("#pageslide-body-wrap").animate(direction,settings.duration);$("#pageslide-slide-wrap").animate({width:"0"},settings.duration,function(){$("#pageslide-content").css("width","0px").empty();$('#pageslide-body-wrap, #pageslide-slide-wrap').css('left','');$('#pageslide-body-wrap, #pageslide-slide-wrap').css('right','');_overflowFixRemove()})}})(jQuery);(function($){$(document).ready(function(){$(document).keyup(function(event){if(!$("#pageslide-blanket").is(":visible")&&event.keyCode==27)$.fn.pageSlideClose()})})})(jQuery);
    (function($){
          $.fn.pageSlide = function(options) {
            
            var settings = $.extend({
        width: "300px", // Accepts fixed widths
        duration: "normal", // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
        direction: "left", // default direction is left.
        modal: true, // if true, the only way to close the pageslide is to define an explicit close class.
        _identifier: $(this)
        }, options);
    
        // these are the minimum css requirements for the pageslide elements introduced in this plugin.
    
        var pageslide_slide_wrap_css = {
        position: 'fixed',
              width: '0',
              top: '0',
              height: '100%',
              zIndex:'999'
        };
    
        var pageslide_body_wrap_css = {
        position: 'relative',
        zIndex: '0'
        };
    
        var pageslide_blanket_css = {
        position: 'absolute',
        top: '0px',
        left: '0px',
        height: '0px',
        width: '0px',
        opacity: '0.0',
        backgroundColor: 'none',
        zIndex: '1',
        display: 'none'
        };
    
        function _initialize(anchor) {
              
              // Create and prepare elements for pageSlide
              if ($("#pageslide-body-wrap, #pageslide-content, #pageslide-slide-wrap").size() == 0) {
                
                var psBodyWrap = document.createElement("div");
                $(psBodyWrap).css(pageslide_body_wrap_css);
                $(psBodyWrap).attr("id","pageslide-body-wrap").width( $("body").width() );
                $("body").contents().wrapAll( psBodyWrap );
          
                var psSlideContent = document.createElement("div");
                $(psSlideContent).attr("id","pageslide-content").width( settings.width );
    
                var psSlideWrap = document.createElement("div");
                $(psSlideWrap).css(pageslide_slide_wrap_css);
                $(psSlideWrap).attr("id","pageslide-slide-wrap").append( psSlideContent );
                $("body").append( psSlideWrap );
          
              }
              
              // introduce the blanket if modal option is set to true.
              if ($("#pageslide-blanket").size() == 0 && settings.modal == true) {
                var psSlideBlanket = document.createElement("div");
                $(psSlideBlanket).css(pageslide_blanket_css);
                $(psSlideBlanket).attr("id","pageslide-blanket");
                $("body").append( psSlideBlanket );
           $("#pageslide-blanket").click(function(){ return false; });
              }
                  
        // Callback events for window resizing
        $(window).resize(function(){
                $("#pageslide-body-wrap").width( $("body").width() );
              });
              
              // mark the anchor!
              $(anchor).attr("rel","pageslide");
              
        };
    
        function _openSlide(elm) {
        if($("#pageslide-slide-wrap").width() != 0) return false;
        _showBlanket();
        // decide on a direction
        if (settings.direction == "right") {
        direction = {right:"-"+settings.width};
        $("#pageslide-slide-wrap").css({left:0});
                _overflowFixAdd();
        }
        else {
        direction = {left:"-"+settings.width};
        $("#pageslide-slide-wrap").css({right:0});
        }
             $("#pageslide-slide-wrap").animate({width: settings.width}, settings.duration);
        $("#pageslide-body-wrap").animate(direction, settings.duration, function() {
        $.ajax({
           type: "GET",
           url: $(elm).attr("href"),
           success: function(data){
           $("#pageslide-content").css("width",settings.width).html(data)
           .queue(function(){
           $(this).dequeue();
          
           // add hook for a close button
           $(this).find('.pageslide-close').unbind('click').click(function(elm){
           _closeSlide(elm);
           $(this).find('pageslide-close').unbind('click');
           });
           });
           }
           });
        });
        };
    
        function _closeSlide(event) {
        if ($(event)[0].button != 2 && $("#pageslide-slide-wrap").css('width') != "0px") { // if not right click.
                $.fn.pageSlideClose(settings);
              }
        };
    
        // this is used to activate the modal blanket, if the modal setting is defined as true.
        function _showBlanket() {
        if(settings.modal == true) {
        $("#pageslide-blanket").toggle().animate({opacity:'0.8'}, 'fast','linear');
        }
        };
    
        // fixes an annoying horizontal scrollbar.
        function _overflowFixAdd(){($.browser.msie) ? $("body, html").css({overflowX:'hidden'}) : $("body").css({overflowX:'hidden'});}
    
            // Initalize pageslide, if it hasn't already been done.
            _initialize(this);
            return this.each(function(){
              $(this).unbind("click").bind("click", function(){
             _openSlide(this);
             $("#pageslide-slide-wrap").unbind('click').click(function(e){ if(e.target.tagName != "A") return false; });
             if (settings.modal != true) {
           $(document).unbind('click').click(function(e) { if(e.target.tagName != "A"){ _closeSlide(e); return false } });
           }
             return false;
             });
            });
            
          };
        })(jQuery);
    
        // pageSlideClose allows the system to automatically close any pageslide that is currently open in the view.
        (function($){
          $.fn.pageSlideClose = function(options) {
            
            var settings = $.extend({
        width: "300px", // Accepts fixed widths
        duration: "normal", // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
        direction: "left", // default direction is left.
        modal: false, // if true, the only way to close the pageslide is to define an explicit close class.
        _identifier: $(this)
        }, options);
    
        function _hideBlanket() { if(settings.modal == true && $("#pageslide-blanket").is(":visible")) {
              $("#pageslide-blanket").animate({opacity:'0.0'}, 'fast','linear',function(){$(this).hide();});
            }}
            
            function _overflowFixRemove(){($.browser.msie) ? $("body, html").css({overflowX:''}) : $("body").css({overflowX:''});}
    
            _hideBlanket();
            direction = ($("#pageslide-slide-wrap").css("left") != "0px") ? {left: "0"} : {right: "0"};
        $("#pageslide-body-wrap").animate(direction, settings.duration);
            $("#pageslide-slide-wrap").animate({width: "0"}, settings.duration, function() {
              // clear bug
              $("#pageslide-content").css("width","0px").empty();
              $('#pageslide-body-wrap, #pageslide-slide-wrap').css('left','');
              $('#pageslide-body-wrap, #pageslide-slide-wrap').css('right','');
              _overflowFixRemove();
            });
            
          }
        })(jQuery);
    
        // this adds the ability to close pageSlide with the 'escape' key, if not modal.
        (function($){
          $(document).ready(function(){
            $(document).keyup(function(event){
              if (!$("#pageslide-blanket").is(":visible") && event.keyCode == 27) $.fn.pageSlideClose();
            });
          });
        })(jQuery);
    und das in der html seite
    Code:
    <ul class="socialNetwork">
              <li><a href="templates/twitter.html" class="twitter"><img onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);" border="none" style="opacity:0.50;" src="img/twitter.png"></a></li>
              <li><a href="templates/facebook.html" class="facebook"><img onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);" border="none" style="opacity:0.50;" src="img/facebook.png"></a></li>
              <li><a href="templates/youtube.html" class="youtube"><img onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);" border="none" style="opacity:0.50;"src="img/youtube.png"></a></li>
              <li style="display:none"><a href="templates/mobile.html" class="mobile"><img onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);" border="none" style="opacity:0.50;"src="img/mobile.png"></a></li>
        </ul>
        <script type="text/javascript">
            $(".twitter").pageSlide({ width: "360px", direction: "left" });
            $(".facebook").pageSlide({ width: "360px", direction: "left" });
            $(".youtube").pageSlide({ width: "360px", direction: "left" });
            $(".mobile").pageSlide({ width: "360px", direction: "left" });
        </script>
    könnt ihr mir sagen wie ich es machen kann das ich zwischen den verschidenen `li` hin und her schalten kann? Danke
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: page slide umschalten

    ja der ganze sourcecode könnte weiterhelfen, deine schnipsel bringen mir ne leere liste und keien sichtbaren effekt....

    mach ma nen link frisch!
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    20.11.2008
    Beiträge
    68
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: page slide umschalten

    das ist der komplette code... fehlt nur das css; bilder und die html seiten die da geladen werden...


    Code:
    /************PAGE SLIDE************/
    #pageslide-content div{
        padding: 35px 30px 30px 30px;    
        overflow:auto;
    }
    #pageslide-content p.last{
        position:absolute;
        border-top:1px solid #A39D87;
        padding: 30px 30px 30px 30px;
        bottom:0px;
        display:block;
        background:white;
        width:300px;
    }
    #pageslide-content h3 i{
        padding-top:0px;    
    }
    #pageslide-slide-wrap {
        background-color: #fff;
        border-left:1px solid #A39D87;
    }
    .pageslide-close {
      font-size: 12px;
      font-weight: bold;
      padding:10px !important;
      position:absolute;
      left:0px;
      top:0px;
    }
    Geändert von guuls (27.05.2010 um 16:50 Uhr)

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: page slide umschalten

    ok, ich sags mal anders..
    mach bitte einen quellcode fertig, den man komplett kopieren kann, der dann auch offline für jeden anderen "nutzbar" ist ich für meinen teil hab keine lust da ewich rumzusuchen und zu basteln, damit ich deine ausgangssituation habe.
    hilfe ist nur dann kompetent möglich, wenn die ausgangssituation entsprechend ist!
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Suche Slide-Menu
    Von Bandit im Forum Script-Archiv
    Antworten: 2
    Letzter Beitrag: 29.10.2008, 22:48
  2. Slide Show Software
    Von Roland Rafael Repczuk im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 07.09.2008, 16:21
  3. "slide menue" slidet zu früh
    Von im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 02.03.2006, 00:06
  4. Kontext/Slide Menü
    Von MightyDuck83 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 30.01.2005, 17:28
  5. slide menu, musik, chec
    Von BuntesAllerlei im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 8
    Letzter Beitrag: 06.06.2004, 11:43

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •