Ergebnis 1 bis 5 von 5

Thema: Google Chrome Problem mit Slideshow

  1. #1
    HTML Newbie
    Registriert seit
    25.02.2014
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Google Chrome Problem mit Slideshow

    Hallo Community,

    ich habe ein Problem mit einer Slideshow. Und zwar wird sie im Internet Explorer und Firefox richtig angezeigt, jedoch in Google Chrome nicht ganz richtig.
    Die Slideshow umfasst 4 Schritte welche mittels JavaScript nach einer gewissen Zeit wechseln, der Wechsel umfasst jeweils ein Bild, Container und der darin liegenden Text. Das Problem ist nun, dass bei Schritt 3 und 4 die Containerposition nach unten verschoben wird. Dies passiert jedoch nur bei Google Chrome. Hat vielleicht jemand ein Tipp? Ich habe schon alles probiert was mir möglich war, jedoch erfolglos.

    Code:
    
    <div id="slideshow" class="clearfix no-print">
    <div id="slideshow-inner">
    <div class="caption promoSlideshow left">
    <div class="head"><div class="contentConstrain"><div class="breadcrumb" style="display:none"></div></div></div>
    <div class="body">
    <ul class="list" id="promotions_slideshow_grid" jsid="promotions_slideshow_grid" style="height:560px">
    
    
    <li class="item first" tabindex="0" onfocus="javascript:popInlineEdit('Toolbar_25cc613b-ca49-471c-a1e9-926c29324cbb',true)">
    <div class="contentConstrain" style='z-index: 2;'><div class="XslideCaption"><div class="clearfix" id="teaser">
    <div class="claim clearfix">
    <h1>Überschrift*</h1>
    <h2>2. Überschrift</h2></div>
    <div class="subelement clearfix">
    <div class="teaser-slide clearfix">
    <h3 id="slide-text" style=" display: block;">Text</h3></div>
    <div class="teaser-subline">
    <h3>Text</h3></div>
    <a href="link" ><button class="arr">Link</button></a><a href="Link" title="Link"  class="textlink-arr">Link</a></div></div>
    <p>*</p></div></div>
    <div style="overflow:hidden; height:560px">
    <img src="Bild" border="0"  /></div>
    </li>
    
    
    
    
    
    <li class="item first" tabindex="0" onfocus="javascript:popInlineEdit('Toolbar_7fa1d475-a8c9-45b2-bca0-c5995b46b2de',true)">
    <div class="contentConstrain" style='z-index: 2;'><div class="XslideCaption"><div class="clearfix" id="teaser">
    <div class="claim clearfix">
    <h1>Überschrift*</h1>
    <h2>2. Überschrift</h2></div>
    <div class="subelement clearfix">
    <div class="teaser-slide clearfix">
    <h3 id="slide-text" style=" display: block;">Text</h3></div>
    <div class="teaser-subline">
    <h3>Text</h3></div>
    <a href="link" ><button class="arr">Link</button></a><a href="Link" title="Link"  class="textlink-arr">Link</a></div></div>
    <p>*</p></div></div>
    <div style="overflow:hidden; height:560px">
    <img src="Bild" border="0"  /></div>
    </li>
    
    
    
    
    
    <li class="item" title="Vernetzt Mit der Zukunft 4" tabindex="0" onfocus="javascript:popInlineEdit('Toolbar_36a18383-fb74-4713-8a3d-8dd83d9f9bdd',true)">
    <div class="contentConstrain" style='z-index: 2;'><div class="XslideCaption"><div class="clearfix" id="teaser">
    <div class="claim clearfix">
    <h1>Überschrift*</h1>
    <h2>2. Überschrift</h2></div>
    <div class="subelement clearfix">
    <div class="teaser-slide clearfix">
    <h3 id="slide-text" style=" display: block;">Text</h3></div>
    <div class="teaser-subline">
    <h3>Text</h3></div>
    <a href="link" ><button class="arr">Link</button></a><a href="Link" title="Link"  class="textlink-arr">Link</a></div></div>
    <p>*</p></div></div>
    <div style="overflow:hidden; height:560px">
    <img src="Bild" border="0"  /></div>
    </li>
    
    
    
    <li class="item last" title="Vernetzt Mit der Zukunft 2" tabindex="0" onfocus="javascript:popInlineEdit('Toolbar_09153c29-25db-4d10-b859-edebbbb67124',true)">
    <div class="contentConstrain" style='z-index: 2;'><div class="XslideCaption"><div class="clearfix" id="teaser">
    <div class="claim clearfix">
    <h1>Überschrift*</h1>
    <h2>2. Überschrift</h2></div>
    <div class="subelement clearfix">
    <div class="teaser-slide clearfix">
    <h3 id="slide-text" style=" display: block;">Text</h3></div>
    <div class="teaser-subline">
    <h3>Text</h3></div>
    <a href="link" ><button class="arr">Link</button></a><a href="Link" title="Link"  class="textlink-arr">Link</a></div></div>
    <p>*</p></div></div>
    <div style="overflow:hidden; height:560px">
    <img src="Bild" border="0"  /></div>
    </li>
    
    </ul>
    
    
    </div>
    <div class="foot">
    
    
    <script type="text/javascript">
    require({
        packages : [ { name : 'ctc', location : '/ctc_theme/js/portal_dojo_17/ctc/' } ]
      }, ["ctc/component_layer"], function() {
      require(["ctc/component"], function(component) {
    component.parseSlideshow('promotions_slideshow_grid', 
                   'Crossfade', 
                   'Automatic Forward',
                   4000,
                   'Hover');
    
    component.parseSlideshowControl('promotions_slideshow_grid', 
                          'promotions_slideshow_grid_Controls', 
                          'Titles',
                          '');
    
    component.setupSlideshowCaption('promotions_slideshow_grid', 'promotions_slideshow_grid_Caption');
    });
    });
    </script>
    
    </div></div></div></div>

    Code:
     /***************************************************************
     HOME SLIDESHOW SCREEN
     ***************************************************************/ 
     
     #primaryContainer #slideshow {
      float: none;
      height: 560px;
      clear: none;
      width: 100%;
      min-height: 0;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      min-width: 0;
      z-index: 0;
      overflow:hidden;
     
      }
     #primaryContainer #slideshow #slideshow-inner{
      position:relative;
      height: 100%;
      width:1280px;
      margin:auto;
      overflow:hidden;
     }
     #primaryContainer #slideshow #slideshow-inner img{
      position:absolute;
      z-index:1 ;
      top: 0px;
      }
     #primaryContainer #slideshow #slideshow-inner img.active{
      z-index:3;
      }
    Gruß
    Hugo
    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
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Google Chrome Problem mit Slideshow

    Geht nicht.

    ...

    Dein Snippet ist standalone nicht lauffähig, da haufenweise Javascript fehlt. Wie wärs mit einem Link?

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    25.02.2014
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Google Chrome Problem mit Slideshow

    sorry, hier das Script.

    Code:
    /*! slidewhow.js 1.0
     *
     * sr
     */
    function ImageSlider(){
        var $active = $('#slideshow-inner .active');
        var $next = ($active.next().length > 0) ? $active.next() : $('#slideshow-inner img:first');
        $next.css('z-index',2);
             
             
             
         $('#slide-text').fadeOut(500,function(){
        $('#slide-text').html($next.attr('alt'));
        $('#slide-text').fadeIn(500);
          });
          $active.fadeOut(1000,function(){
        $active.css('z-index',1).show().removeClass('active');
             $next.css('z-index',3).addClass('active');
          });
    }

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Google Chrome Problem mit Slideshow

    Packe doch mal bitte alles auf eine Seite und lade den Kram auf einen Server hoch. Kein Mensch hat Lust sich das alles zusammen zu basteln, zumal man dann immer noch nicht deine Originalseite hat, da Doctype, Zeichensatz, Bilder und jQuery-Version fehlen.

  5. #5
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Google Chrome Problem mit Slideshow

    Mit "haufenweise" meine ich tatsächlich was ich schreibe, nicht nur eine Funktion...
    Z.B. seh ich das da require.js verwendet wird, ist aber bei deinem schnipsel nicht referenziert.

    Beim drüberschauen schon mal ein paar Fehler:
    - h3#slide-text gibt es 4 mal, eine ID darf aber nur 1x verwendet werden.
    - jQuery.next geht nur auf das nächste Element (du kannst damit auch erst recht nicht aus dem Parent springen!)
    > $active.parents('darfst-selbst-schauen-wenn-du-nicht-einrückst').next().find('img')

    Für mehr würde ich das dann aber ebenfalls auf einem Server sehen wollen oder eben eine Standalone Version des Sliders.

Ähnliche Themen

  1. Text in td in IE & Google Chrome?
    Von Gast54 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 14.07.2012, 22:37
  2. Frames ohne Rand in Google Chrome?
    Von Karl-Heinz im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 08.08.2011, 18:02
  3. Google Chrome aussperren
    Von Unregistriert im Forum Script-Archiv
    Antworten: 5
    Letzter Beitrag: 24.11.2008, 19:59
  4. Google Chrome JS Debug
    Von GreenRover im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 21.09.2008, 13:03
  5. Google Chrome
    Von minder im Forum Off Topic und Quasselbox
    Antworten: 49
    Letzter Beitrag: 20.09.2008, 00:20

Stichworte

Berechtigungen

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