1. Zuhause
  2. Frage und Antwort
  3. Warum funktioniert mein Bootstrap-Karussell oder jQuery-Code nicht in Safari?

Warum funktioniert mein Bootstrap-Karussell oder jQuery-Code nicht in Safari?

2016-07-27 2 views
0

Ich habe seit einem Monat für so eine Entschuldigung, wenn dies eine einfache Antwort hat, aber ich habe seit Tagen ohne Ergebnis gesucht.Warum funktioniert mein Bootstrap-Karussell oder jQuery-Code nicht in Safari?

Ich habe eine einfache Übung Webseite mit einem Bootstrap-Karussell als Hintergrund der Seite und jQuery erstellt, um divs (wo Seiteninhalt wird schließlich gehen) erscheinen. Wenn ich die HTML-Datei in Chrome, Firefox und Opera öffne, funktioniert die Seite gut, aber wenn die Datei in Safari auf einem iPhone oder iPad geöffnet wird, funktionieren die Links zu den divs nicht (wenn angeklickt, nichts erscheint) und das Karussell funktioniert nicht, sondern erscheint als vier separate Bilder auf der Seite mit einfachen "vorherigen" und "nächsten" Links am unteren Rand der Seite angezeigt. Leider habe ich keine Möglichkeit, die Seite auf einer Desktop-Version von Safari zu testen. Ich habe das Gefühl, dass es etwas Einfaches gibt, das ich vermisse, aber ich kann es nicht herausfinden. Danke im Voraus. Im Folgenden ist der gesamte Code für meine Website (CSS, HTML und jQuery), und hier ist ein jsFiddle der Seite: https://jsfiddle.net/fh8pxqqt/

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 



<link rel="icon" type="image/png" href="http://res.cloudinary.com/jamesddavies/image/upload/v1469359895/strohl_logo_bod9yw.png"/> 


<title>Alex Strohl</title> 

<style> 

#bg-wrapper { 
    position: relative; 
} 

/*Carousel Background*/ 

#carousel-bg { 
    width: 100%; 
    height: 100%; 
} 

.carousel-inner > .item > img, .carousel-inner > .item > a > img { 
    width: 100%; 
    height: 100vh; 
    overflow: hidden; 
    object-fit: cover; 
    -webkit-object-fit: cover; 
    -o-object-fit: cover; 
    -moz-object-fit: cover; 
} 

/*Nav*/ 

nav { 

} 

ul { 
    height: 75px; 
    line-height: 50px; 
    background: rgba(255,255,255,0.4); 
    text-align: left; 
    padding: 10px; 
    z-index: 1; 
    position: absolute; 
    width: 100%; 
} 

ul:hover { 
    background: rgba(255,255,255,1); 
    transition: 500ms; 
    -webkit-transition: 500ms; 
    -o-transition: 500ms; 
    -moz-transition: 500ms; 
} 

ul:not(:hover) { 
    background: rgba(255,255,255,0.4); 
    transition: 500ms; 
    -webkit-transition: 500ms; 
    -o-transition: 500ms; 
    -moz-transition: 500ms; 
} 

ul img { 
    padding-right: 30px; 
    padding-left: 30px; 

} 

ul img:hover { 
    opacity: 0.5; 
    filter:Alpha(opacity=50); 
    transition: 300ms; 
    -webkit-transition: 300ms; 
    -o-transition: 300ms; 
    -moz-transition: 300ms; 
} 

ul img:not(:hover) { 
    opacity: 1; 
    filter:Alpha(opacity=50); 
    transition: 300ms; 
    -webkit-transition: 300ms; 
    -o-transition: 300ms; 
    -moz-transition: 300ms; 
} 

li { 
    color: rgba(0,0,0,1); 
    text-decoration: none; 
} 

.link:focus { 
    color: rgba(0,0,0,0.5); 
    text-decoration: none; 
} 

.link:hover { 
    text-decoration: none; 
    color: rgba(0,0,0,0.5); 
    transition: 300ms; 
    -webkit-transition: 300ms; 
    -o-transition: 300ms; 
    -moz-transition: 300ms; 
    cursor: pointer; 
} 

.link:not(:hover) { 
    color: rgba(0,0,0,1); 
    transition: 300ms; 
    -webkit-transition: 300ms; 
    -o-transition: 300ms; 
    -moz-transition: 300ms; 
} 

.link:click { 
    color: rgba(0,0,0,0.5); 
} 

li { 
    display: inline; 
    vertical-align: middle; 
    line-height: normal; 
    padding: 10px; 
    z-index: 1; 
} 

li img { 
    height: 50px; 
    width: auto; 
} 



/*adventures*/ 

#adventures-wrapper { 
    text-align: center; 
} 

.adventures { 
    width: 80%; 
    height: 70%; 
    background-color: rgba(255,255,255,0.9); 
    color: rgba(0,0,0,1); 
    position: absolute; 
    top: 120px; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    z-index: 1; 
    display: none; 
} 

/*commissions*/ 

#commissions-wrapper { 
    text-align: center; 
} 

.commissions { 
    width: 80%; 
    height: 70%; 
    background-color: rgba(255,255,255,0.9); 
    color: rgba(0,0,0,1); 
    position: absolute; 
    top: 120px; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    z-index: 1; 
    display: none; 
} 

/*book*/ 

#book-wrapper { 
    text-align: center; 
} 

.book { 
    width: 80%; 
    height: 70%; 
    background-color: rgba(255,255,255,0.9); 
    color: rgba(0,0,0,1); 
    position: absolute; 
    top: 120px; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    z-index: 1; 
    display: none; 
} 

/*alex*/ 

#alex-wrapper { 
    text-align: center; 
} 

.alex { 
    width: 80%; 
    height: 70%; 
    background-color: rgba(255,255,255,0.9); 
    color: rgba(0,0,0,1); 
    position: absolute; 
    top: 120px; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    z-index: 1; 
    display: none; 
} 

/*contact*/ 

#contact-wrapper { 
    text-align: center; 
} 

.contact { 
    width: 80%; 
    height: 70%; 
    background-color: rgba(255,255,255,0.9); 
    color: rgba(0,0,0,1); 
    position: absolute; 
    top: 120px; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    z-index: 1; 
    display: none; 
} 

/*responsive design*/ 

@media (max-width: 1000px){ 

    ul { 
     text-align: center; 
    } 

} 


</style> 

</head> 

<body> 


<div id="bg-wrapper"> 

    <!--Navbar--> 

    <div class="nav"> 
     <ul> 
      <li><img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469359895/strohl_logo_bod9yw.png"></li> 
      <li class="link adventures-link">Adventures</li> 
      <li class="link commissions-link">Commissions</li> 
      <li class="link book-link">Book</li> 
      <li class="link alex-link">Alex</li> 
      <li class="link contact-link">Contact</li> 
     </ul> 
    </div> 

    <!--Adventures--> 

    <div id="adventures-wrapper"> 
    <div class="adventures"> 
      <h1>Adventures</h1> 
    </div> 
    </div> 

    <!--Commissions--> 

    <div id="commissions-wrapper"> 
    <div class="commissions"> 
      <h1>Commissions</h1> 
    </div> 
    </div> 

    <!--Book--> 

    <div id="book-wrapper"> 
    <div class="book"> 
      <h1>Book</h1> 
    </div> 
    </div> 

    <!--Alex--> 

    <div id="alex-wrapper"> 
    <div class="alex"> 
      <h1>Alex</h1> 
    </div> 
    </div> 

    <!--Contact--> 

    <div id="contact-wrapper"> 
    <div class="contact"> 
      <h1>Contact</h1> 
    </div> 
    </div> 

<!--Carousel background--> 

<div id="carousel-bg" class="carousel slide" data-ride="carousel" data-pause="false"> 

    <!--Indicators--> 
    <ol class="carousel-indicators hidden"> 
     <li data-target="#carousel-bg" data-slide-to="0" class="active"> </li> 
     <li data-target="#carousel-bg" data-slide-to="1"></li> 
     <li data-target="#carousel-bg" data-slide-to="2"></li> 
     <li data-target="#carousel-bg" data-slide-to="3"></li> 
    </ol> 

    <!--Wrapper for slides--> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264082/STROHL__MG_1150-Edit_wdcn2g.jpg"> 
     </div> 

     <div class="item"> 
      <img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264097/_ST_3667_ob8jtb.jpg"> 
     </div> 

     <div class="item"> 
      <img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264105/_ST_4081_yb2vdd.jpg"> 
     </div> 

     <div class="item"> 
      <img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264128/_ST_9411_h9ftou.jpg"> 
     </div> 

    </div> 

    <!--Left and Right controls--> 
    <a class="left carousel-control hidden" href="#carousel-bg" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 

    <a class="right carousel-control hidden" href="#carousel-bg" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span> 
     <span class="sr-only">Next</span> 
    </a> 


</div>  



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 


<script> 

/*Link functionality*/ 

    $(document).ready(function(){ 
     $("#carousel-bg").click(function(){ 
      $(".adventures, .commissions, .book, .alex, .contact").hide(500); 
     }); 
    }); 

    $(document).ready(function(){ 
    $(".adventures-link").click(function(){ 
      $(".adventures").toggle(500); 
      $(".commissions, .book, .alex, .contact").hide(500); 
     }); 
    }); 

    $(document).ready(function(){ 
    $(".commissions-link").click(function(){ 
      $(".commissions").toggle(500); 
      $(".adventures, .book, .alex, .contact").hide(500); 
     }); 
    }); 

    $(document).ready(function(){ 
    $(".book-link").click(function(){ 
      $(".book").toggle(500); 
      $(".adventures, .commissions, .alex, .contact").hide(500); 
     }); 
    }); 

    $(document).ready(function(){ 
    $(".alex-link").click(function(){ 
      $(".alex").toggle(500); 
      $(".adventures, .commissions, .book, .contact").hide(500); 
     }); 
    }); 

    $(document).ready(function(){ 
    $(".contact-link").click(function(){ 
      $(".contact").toggle(500); 
      $(".adventures, .commissions, .book, .alex").hide(500); 
     }); 
    }); 

</script> 

</body>

Quelle

2016-07-27 JamesDDavies

+0

Können Sie bitte eine [jsFiddle] (https://jsfiddle.net/) erstellen? –

+0

Hallo - hier ist die jsFiddle. Ich werde es auch zum Hauptpost hinzufügen. - https://jsfiddle.net/fh8pxqqt/ – JamesDDavies

+0

Es ist nicht genau klar, um welche Probleme du ehrlich sein musst, vielleicht würde ein Bild helfen. Ihre vorherigen und nächsten Pfeile sind nicht sichtbar, weil Sie ihnen "verborgen" zugewiesen haben. Siehe responsive [Hilfsprogramme] (https://getbootstrap.com/css/#responsive-utilities-classes) und hier sind zwei Screenshots von einem [iPhone] (https://imgur.com/a/6Rh3q). Überprüfen Sie außerdem Ihre Konsole auf Fehler. – vanburen

Antwort

0

Haben Sie versucht, Ihre Website in iphone Chrome-Browser zu öffnen? Ich denke, dass Sie Ihre Javascript-Dateien nicht laden, wenn Sie die HTML-Datei in Mobile öffnen. Ihr Code arbeitet in Safari. Ich habe es getestet.

Öffnen Sie den folgenden Link in Ihrem mobilen Browser. Schau, ob es funktioniert oder nicht.

https://output.jsbin.com/cugawimabo

Quelle

2016-07-27 17:12:25

+0

Vielen Dank - sieht so aus, als würden die JS-Dateien beim Öffnen der HTML-Datei nicht geladen werden, wie Sie gesagt haben. Anfängerfehler. Sehr geschätzt – JamesDDavies

Verwandte Themen

 Verwandte Themen