• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 Scripte auf einer Page?

D

duti

Mitglied
Hallo Leute.

Ich hab ein kleines Problem und zwar, hab ich einen Pic-Slider von jquery in meine Seite eingebuden und möchte zugleich aber auch die Seite dynamisch laden.

Das problem ist, dass wenn ich nur den Slider aktiviert lasse erscheint auch der Slider, wenn ich jetzt aber auch das dynamische laden aktiviere, verschwindet der Pic-Slider.

Könnt ihr mir da helfen?

Code index.php:

PHP: 
<!DOCTYPE html>
<html>
<head>
        <title>Page</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <link href="lightbox.css" rel="/test/stylesheet" />
        <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="js/bjqs-1.3.min.js"></script>
        <script src="js/general.js"></script>
        <script src="js/lightbox.js"></script>
        <link rel="stylesheet" href="bjqs.css">

</head>
<body>
<div id="head">
    <div id="header">
        <ul id="butt">
                <li><a href="kontakt"><strong>Kontakt</strong></a></li>       
                <li><a href="produkte"><strong>Produkte</strong></a></li>
                <li><a href="home"><strong>Home</strong></a></li>               
        </ul>
    </div>
</div>


<div id="container">
 
      <div id="banner-slide">

        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li><a href="http://google.ch"><img src="img/banner01.jpg" title=""></a></li>
          <li><img src="img/banner02.jpg" title=""></li>
          <li><img src="img/banner03.jpg" title=""></li>
        </ul>
        <!-- end Basic jQuery Slider -->

      </div>
      <script class="secret-source">
        jQuery(document).ready(function($) {
         
          $('#banner-slide').bjqs({
            animtype      : 'slide',
            height        : 320,
            width         : 820,
            responsive    : false,
            randomstart   : false
          });
         
        });
      </script>
    </div>
    <div id="main">
        <div id="cmain"></div>       
        <div id="footer">   
            <p>Page</p>   
        </div>
    </div>
</div>
</body>
</html>

Dynamik script:
Code: 
$(document).ready(function() {
    $('#mainpage').load('mainpage/home.php');
   
    $('ul#nav li a').click(function() {
        var page = $(this).attr('href');
        $('#cmain').load('branchen/' + page + '.php');
        return false;
    });
        $('ul#butt li a').click(function() {
        var page = $(this).attr('href');
        $('#cmain').load('mainpage/' + page + '.php');
        return false;
    });
        $('ul#aus1 li a').click(function() {
        var foo = ('mainpage/' + page + '.php');
        alert(foo);
        var page = $(this).attr('href');
        $('#cmain').load('mainpage/' + page + '.php');

        return false;
    });
        $('ul#werben1 li a').click(function() {
        var foo = ('mainpage/basic.php');
        alert(foo);
        var page = $(this).attr('href');
        $('#cmain').load('mainpage/basic.php');

        return false;
    });
   
    $(function(){
    $('ul#butt li a.extern').click(function(){
    window.open(this.href);
    return false;
    });
    });
   
    $("ul#butt li a").live('click', function() {
  $("ul#butt li a").removeClass("selected");
  $(this).addClass("selected");
  return false;
});
});


Bitte um Hilfe

Mfg Duti
 
Werbung:
Danke.
Ich habs auch gleich versucht und auch mit Hilfe von Youtube-Clips bring ich es nicht hin.

Ich hab auch bei jeden js jQuery(document).ready(function($) eingefügt statt nur (document).ready(function($).

Jetzt läd der Slider überhaupt nicht mehr.

Aktuelle anfangs Codes:

index.php:
Code: 
<!DOCTYPE html>
<html>
<head>
        <title>Page</title>
                  
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <link href="lightbox.css" rel="/test/stylesheet" />
        <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="bjqs.css">      
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>              
        <script src="js/bjqs-1.3.min.js"></script>
        <script src="js/general.js"></script>
</head>
<body>
<div id="head">
    <div id="header">
        <ul id="butt">
                <li><a href="kontakt"><strong>Kontakt</strong></a></li>      
                <li><a href="produkte"><strong>Produkte</strong></a></li>
                <li><a href="home"><strong>Home</strong></a></li>              
        </ul>
    </div>
</div>


    <div id="container">

      <div id="banner-slide">

        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li><a href="http://google.ch"><img src="img/banner01.jpg" title=""></a></li>
          <li><img src="img/banner02.jpg" title=""></li>
          <li><img src="img/banner03.jpg" title=""></li>
        </ul>
        <!-- end Basic jQuery Slider -->

      </div>
      <script class="secret-source">
      var $ = jQuery.noConflict();
        jQuery(document).ready(function($) {
        
          $('#banner-slide').bjqs({
            animtype      : 'slide',
            height        : 320,
            width         : 820,
            responsive    : false,
            randomstart   : false
          });

        });        
      </script>
    </div>
    <div id="main">
        <div id="cmain"></div>      
        <div id="footer">  
            <p>Page</p>  
        </div>
    </div>
</div>
</body>
</html>

Dynamisches laden js
Code: 
var $= jQuery.noConflict();
jQuery(document).ready(function($) {
   //$('#mainpage').load('mainpage/home.php');
   
   $('ul#nav li a').click(function() {
     var page = $(this).attr('href');
     $('#cmain').load('branchen/' + page + '.php');
     return false;
   });
     $('ul#butt li a').click(function() {
     var page = $(this).attr('href');
     $('#cmain').load('mainpage/' + page + '.php');
     return false;
   });
     $('ul#aus1 li a').click(function() {
     var foo = ('mainpage/' + page + '.php');
     alert(foo);
     var page = $(this).attr('href');
     $('#cmain').load('mainpage/' + page + '.php');

     return false;
   });
     $('ul#werben1 li a').click(function() {
     var foo = ('mainpage/basic.php');
     alert(foo);
     var page = $(this).attr('href');
     $('#cmain').load('mainpage/basic.php');

     return false;
   });
   
  $(function(){
  $('ul#butt li a.extern').click(function(){
  window.open(this.href);
  return false;
  });
  });
   
   $("ul#butt li a").live('click', function() {
  $("ul#butt li a").removeClass("selected");
  $(this).addClass("selected");
  return false;
 



});
});


Slider js
Code: 
var $ = jQuery.noConflict();
jQuery(document).ready(function($) {

  "use strict";

  $.fn.bjqs = function(o) {
  
  // slider default settings
  var defaults  = {

  // w + h to enforce consistency
  width  : 700,
  height  : 300,


  }

  // update the dimensions to the slider to accomodate all the slides side by side
  $slider.css({
  'width'  : responsive.width * (state.slidecount + 2),
  'left'  : -responsive.width * state.currentslide
  });

  }
  else {

  $canvas.css({
  'width'  : settings.width,
  'height'  : settings.height,
  'overflow'  : 'hidden',
  'position'  : 'relative'
  });

  // update the dimensions to the slider to accomodate all the slides side by side
  $slider.css({
  'width'  : settings.width * (state.slidecount + 2),
  'left'  : -settings.width * state.currentslide
  });

  }

  // add some inline styles which will align our slides for left-right sliding
  $slides.css({
  'float'  : 'left',
  'position'  : 'relative',
  'display'  : 'list-item'
  });

  // 'everything.. in it's right place'
  $canvas.prependTo($wrapper);
  $slider.appendTo($canvas);

  };

  var conf_controls = function() {

  // create the elements for the controls
  $c_wrapper  = $('<ul class="bjqs-controls"></ul>');
  $c_fwd  = $('<li class="bjqs-next"><a href="#" data-direction="'+ vars.fwd +'">' + settings.nexttext + '</a></li>');
  $c_prev  = $('<li class="bjqs-prev"><a href="#" data-direction="'+ vars.prev +'">' + settings.prevtext + '</a></li>');

  // bind click events
  $c_wrapper.on('click','a',function(e){

  e.preventDefault();
  var direction = $(this).attr('data-direction');

  if(!state.animating){

  if(direction === vars.fwd){
  go(vars.fwd,false);
  }

  if(direction === vars.prev){
  go(vars.prev,false);
  }

  }

  });

  // put 'em all together
  $c_prev.appendTo($c_wrapper);
  $c_fwd.appendTo($c_wrapper);
  $c_wrapper.appendTo($wrapper);

  // vertically center the controls
  if (settings.centercontrols) {

  $c_wrapper.addClass('v-centered');

  // calculate offset % for vertical positioning
  var offset_px  = ($wrapper.height() - $c_fwd.children('a').outerHeight()) / 2,
  ratio  = (offset_px / settings.height) * 100,
  offset  = ratio + '%';

  $c_fwd.find('a').css('top', offset);
  $c_prev.find('a').css('top', offset);

  }

  };

  var conf_markers = function() {

  // create a wrapper for our markers
  $m_wrapper = $('<ol class="bjqs-markers"></ol>');

  // for every slide, create a marker
  $.each($slides, function(key, slide){

  var slidenum  = key + 1,
  gotoslide  = key + 1;
  
  if(settings.animtype === 'slide'){
  // + 2 to account for clones
  gotoslide = key + 2;
  }

  var marker = $('<li><a href="#">'+ slidenum +'</a></li>');

  // set the first marker to be active
  if(slidenum === state.currentslide){ marker.addClass('active-marker'); }

  // bind the click event
  marker.on('click','a',function(e){
  e.preventDefault();
  if(!state.animating && state.currentslide !== gotoslide){
  go(false,gotoslide);
  }
  });

  // add the marker to the wrapper
  marker.appendTo($m_wrapper);

  });

  $m_wrapper.appendTo($wrapper);
  $m_markers = $m_wrapper.find('li');

  

  });

  }

  // slide animation
  if(settings.animtype === 'slide'){

  if(settings.showmarkers){
  
  var markerindex = state.nextindex-1;

  if(markerindex === state.slidecount-2){
  markerindex = 0;
  }
  else if(markerindex === -1){
  markerindex = state.slidecount-3;
  }

  $m_markers.removeClass('active-marker');
  $m_markers.eq(markerindex).addClass('active-marker');
  }

  // if the slider is responsive && the calculated width is less than the max width
  if(settings.responsive && ( responsive.width < settings.width ) ){
  state.slidewidth = responsive.width;
  }
  else{
  state.slidewidth = settings.width;
  }

  $slider.animate({'left': -state.nextindex * state.slidewidth }, settings.animduration, function(){

  state.currentslide = state.nextslide;
  state.currentindex = state.nextindex;

  // is the current slide a clone?
  if($slides.eq(state.currentindex).attr('data-clone') === 'last'){

  // affirmative, at the last slide (clone of first)
  $slider.css({'left': -state.slidewidth });
  state.currentslide = 2;
  state.currentindex = 1;

  }
  else if($slides.eq(state.currentindex).attr('data-clone') === 'first'){

  // affirmative, at the fist slide (clone of last)
  $slider.css({'left': -state.slidewidth *(state.slidecount - 2)});
  state.currentslide = state.slidecount - 1;
  state.currentindex = state.slidecount - 2;

  }

  state.animating = false;

  });

  }

  }

  };

  // lets get the party started :)
  init();

  };

})(jQuery);

Slider js.min
Nur anfangs script wegen 10000 Zeichen!
Code: 
var e = jQuery.noConflict();
var t = jQuery.noConflict();
jQuery(function(e){"use strict";e.fn.bjqs=function(t){var n={width:700,height:300,animtype:"fade",animduration:450,animspeed:4e3,automatic:!0,showcontrols:!0,centercontata-clone")==="last"){s.css({left:-v.slidewidth});v.currentslide=2;v.currentindex=1}else if(o.eq(v.currentindex).attr("data-clone")==="first"){s.css({left:-v.slidewidth*(v.slidecount-2)});v.currentslide=v.slidecount-1;v.currentindex=v.slidecount-2}v.animating=!1})}}};y()}})(jQuery);


Ich versteh es einfach nicht. Was mach ich falsch??

mfg Duti & danke für die Antwort
 
Werbung:
Ich versteh es einfach nicht. Was mach ich falsch??
Zum Vergrößern anklicken....

Mehreres.

Erstmal benötigst du hier kein jQuery noConflict(). Das würde lediglich dann Sinn machen, wenn du zusätzlich noch ein anderes JS-Framework verwendest, welches ebenfalls die 'Dollar-Notation' verwendet. Hingegen kannst du innerhalb von jQuery-Funktionen sowohl $(...) als auch jQuery(....) einsetzen. Lösch' das also überall dort, wo du es eingefügt hast, insbesondere aus den Vendor-Dateien des Sliders.

Zweitens:
Code: 
$(document).ready(function() {
    $('#mainpage').load('mainpage/home.php');
})

load() ist eine Ajax-Funktion, die asynchron Inhalte nachlädt. Diese direkt mit dem Laden der Seite aufzurufen, ist konzeptionell sinnlos. Wenn du dabei etwas inkludieren willst, mache das lieber mit PHP.

$('#mainpage').load('mainpage/home.php'); ersetzt den Inhalt des Elements mit der ID #mainpage durch den Inhalt von home.php. Da es in deinem geposteten Code eine solche ID nicht gibt, kann ich dir auch nicht sagen, was genau falsch läuft. Aber falls dort die Bilder für den Slider liegen, mag es mit dem asynchronen Laden zusammenhängen. Das heißt, #banner-slide existiert für den Slider zum Zeitpunkt des Aufrufs nicht.

Nähere Infos liefert dir die Konsole von Firebug.
 
Tronjer danke viel mals für den Plugin Firebug.. Man findet so viel heraus was falsch ist!!
Ich hab jetzt einen komplett anderen Slider genomen den ich teilweise selber bischen geschrieben hab aber kein Copy&paste!

nun funktionierts!

ich hab ein Fehler noch bei Firebug und zwar:

TypeError: $(...).live is not a function
$("ul#butt li a").live('click', function() {

Code: 
    $("ul#butt li a").live('click', function() {
  $("ul#butt li a").removeClass("selected");
  $(this).addClass("selected");
  return false;

ist es weil ich da ' brauche?

mfg Duti VIELEN VIELEN DANK!!
 
Werbung:
Nebenbei bemerkt lässt sich die Funktion noch verbessern, und das return false wird bei jQuery nicht gebraucht.

ungetestet:
Code: 
$(document).on('click', '#butt li a', function(e) {
    e.preventDefault(); // anstatt return false
    $('#butt li a').removeClass('selected');
    $(this).addClass('selected');
});

Der eigentliche Sinn der Verwendung des Eventlisteners on() anstatt des reinen Eventhandlers click() besteht darin, dass sich so auch dynamisch nachgeladene Inhalte ansprechen lassen. Für die Delegation des Events sollte das Element in $() aber innerhalb der DOM-Struktur hierarchisch oberhalb des anzuklickenden Elements liegen. Das muss nicht zwingend $(document), sondern könnte auch $('body') oder das jeweilige Eltern-Div sein.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben