1. Zuhause
  2. Frage und Antwort
  3. Code funktioniert gut in Chrom, Firefox, mircrosoft Rand, aber nicht in Safari arbeiten

Code funktioniert gut in Chrom, Firefox, mircrosoft Rand, aber nicht in Safari arbeiten

2016-10-17 7 views
0

Ich erstelle eine Website für meinen Kunden. Die Website funktioniert hervorragend in Chrome, Firefox, Microsoft Edge und Even Internet Explorer: P. Aber ich weiß nicht, warum diese Seite in Safari nicht funktioniert. Dies ist mein Code: - HTMLCode funktioniert gut in Chrom, Firefox, mircrosoft Rand, aber nicht in Safari arbeiten

<html> 
<head> 
    <title>Welcome to Siyaram Developers</title> 
</head> 
<body> 
<div id="overlay"></div> 
<div id="background"></div> 
<div id="mainContainer"> 
    <div id="logo"><img src="#" width="150px" height="50px" alt="siyaram developers"/></div> 
    <div id="navlinks"> 
     <div id="menuContainer"> 
      <a href="#" onclick="showContent('home')">Home</a> 
      <a href="#" onclick="showContent('about-us')">About-Us</a> 
      <a href="#;" onclick="showContent('projects')">Our Projects</a> 
      <a href="#" onclick="showContent('vision')">Vision</a> 
      <a href="#contactForm" onclick="showContent('contactForm')">Contact-Us</a> 
      <a href="#login" onclick="showContent('login')">Members</a> 
     </div> 
    </div> 
    <div id="middle"> 
     <div id="home"> 
      Welcome to the Siyaram Developers. 
     </div> 
     <div id="about-us"> 
      <h3>About Us</h3> 
<p style="float: left;"> 
    <img src="img/a.jpg" width="250px" height="250px" alt="Sunny Bhadana" title="Sunny Bhadana"/> 
</p> 
<p> 
    <script> 
     for(i=0; i<10; i++){ 
      document.write("This is Some Dummy Text. This text is just for testing this site. And it's working Great."); 
     } 
    </script> 
</p>  </div> 
     <div id="vision"> 
      <img src="img/vision.jpg" width="100%" height="auto" alt="Vision" title="Vision"> 
<h3>Vision</h3> 
<p>Our vision is to deliver positive, engaging and memorable experiences to our patrons and partners and 
    continuously strive for innovation in product design and processes with integrity and transparency.</p>  </div> 
     <div id="projects"> 
      <img src="img/company.jpg" width="100%" height="auto" alt="Project" title="Project"> 
<h3>Our Projects</h3> 
<p>Our Project list here;---</p>  </div> 
     <div id="contactForm"> 
     <img src="img/contact.jpg" width="100%" alt="Contact-Us"> 
<h3>Contact-Us</h3> 
<br /> 
<b>Notice</b>: Undefined variable: status in <b>C:\xampp\htdocs\siyaramdevelopers\includes\contact.php</b> on line <b>3</b><br /> 
<form name="contact-form" action="index.php" method="post" onsubmit="validate()"> 
    <input type="text" name="name" placeholder="Your Name"/><br/> 
    <input type="number" name="number" placeholder="Your Mobile Number"/><br/> 
    <input type="email" name="email" placeholder="Your E-mail Address"/><br/> 
    <textarea name="message" placeholder="Your Suggestion/Questions" cols="10" rows="5"></textarea><br/> 
    <input type="submit" value="Submit"> 
</form>  </div> 
     <div id="login"> 

<table width="100%"> 
    <tr> 
     <td width="32%"><input type="button" id="log_in" onclick="show('log_in')" value="Log-In"/></td> 
     <td width="32%"><input type="button" onclick="show('sign_up')" id="sign_up" value="Sign-Up"/></td> 
     <td width="32%"><input type="button" onclick="show('admin_login')" id="admin_login" value="Admin Login"/></td> 
    </tr> 
    <tr> 
     <td valign="top" align="center"> 
      <form name="loginForm" onsubmit="return false;"> 
       <input type="email" id="login_username" placeholder="Email Address"><br/> 
       <input type="password" id="login_password" placeholder="Password"><br/> 
       <input type="button" onclick="validateData()" value="Login"><br/> 
       <a href="#">Forgot Password?</a> 
       <br/> 
      </form> 
     </td> 
     <td valign="top" align="center"> 
      <form name="signupForm" onsubmit="return false"> 
       <input type="text" id="sign_name" placeholder="Your Name"/><br/> 
       <input type="email" id="sign_email" placeholder="Your Email"/><br/> 
       <input type="password" id="sign_password" placeholder="Password"/><br/> 
       <input type="number" id="sign_mobile" placeholder="Mobile Number"/><br/> 
       <input type="button" onclick="userSignUp()" value="Sign-Up" /><br/> 
      </form> 
     </td> 
     <td valign="top" align="center"> 
      <form name="admin_login" onsubmit="return false"> 
       <input type="email" id="admin_username" placeholder="Email Address"><br/> 
       <input type="password" id="admin_password" placeholder="Password"><br/> 
       <input type="button" onclick="login_admin()" value="Login"><br/> 
       <br/> 
      </form> 
     </td> 
    </tr> 
</table> 



     </div> 
    </div> 
</div> 
</body> 
</html>

Java Script-Code

<script> 
     function validateData() { 
      var username = document.getElementById("login_username").value; 
      var password = document.getElementById("login_password").value; 
      var ajax = new XMLHttpRequest(); 
      ajax.open("POST", "login_test.php", true); 
      ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
      ajax.onreadystatechange = function() { 
       if (ajax.readyState == 4 && ajax.status == 200) { 
        if(ajax.responseText == "login_undone"){ 
         alert("Login Failed"); 
        }else { 
         window.location.assign("user.php?username="+ajax.responseText); 
        } 
       } 
      } 
     ajax.send("username="+username+"&password="+password); 
     } 

     function login_admin() { 
      var admin_username = document.getElementById("admin_username").value; 
      var admin_password = document.getElementById("admin_password").value; 
      var ajax = new XMLHttpRequest(); 
      ajax.open("POST", "login_test.php", true); 
      ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
      ajax.onreadystatechange = function() { 
       if (ajax.readyState == 4 && ajax.status == 200) { 
        if(ajax.responseText == "login_done") { 
         window.location.assign('admin/index.php'); 
        }else { 
         alert('Sorry! Wrong Creditionals'); 
        } 
       } 
      } 
      ajax.send("admin_username="+admin_username+"&admin_password="+admin_password); 
     } 
     function userSignUp() { 
      var username = document.getElementById("sign_name").value; 
      var password = document.getElementById("sign_password").value; 
      var ajax = new XMLHttpRequest(); 
      ajax.open("POST", "login_test.php", true); 
      ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
      ajax.onreadystatechange = function() { 
       if (ajax.readyState == 4 && ajax.status == 200) { 
        alert(ajax.responseText); 
       } 
      } 
      ajax.send("signup_username="+username+"&signup_password="+password); 
     } 

     function showContent(conId){ 
      var current = document.getElementById(conId); 
      if(current == document.getElementById("about-us")) { 
       //hide if any links are opened 
       document.getElementById("vision").style.position = "fixed"; 
       document.getElementById("projects").style.position = "fixed"; 
       document.getElementById("contactForm").style.position = "fixed"; 
       document.getElementById("login").style.position = "fixed"; 
       document.getElementById("home").style.position = "fixed"; 
       document.getElementById("home").style.left = "100%"; 
       document.getElementById("login").style.left = "100%"; 
       document.getElementById("contactForm").style.left = "100%"; 
       document.getElementById("vision").style.left = "100%"; 
       document.getElementById("projects").style.left = "100%"; 
       document.getElementById("projects").style.transition = "0.5s"; 
       document.getElementById("vision").style.transition = "0.5s"; 
       document.getElementById("contactForm").style.transition = "0.5s"; 
       document.getElementById("login").style.transition = "0.5s"; 
       document.getElementById("home").style.transition = "0.5s"; 

       //show the current link which user clicks 
       current.style.position = "absolute"; 
       current.style.left = "0"; 
       current.style.transition = "left 1s"; 
//    current.style.right = "50px"; 


      }else if(current == document.getElementById("vision")){ 
       //change absolute to fixed position 
       document.getElementById("about-us").style.position = "fixed"; 
       document.getElementById("projects").style.position = "fixed"; 
       document.getElementById("contactForm").style.position = "fixed"; 
       document.getElementById("login").style.position = "fixed"; 
       document.getElementById("home").style.position = "fixed"; 
       document.getElementById("home").style.left = "100%"; 
       //make left align 100% 
       document.getElementById("contactForm").style.left = "100%"; 
       document.getElementById("login").style.left = "100%"; 
       document.getElementById("about-us").style.left = "100%"; 
       document.getElementById("projects").style.left = "100%"; 
       //transition 0.5s 
       document.getElementById("about-us").style.transition = "0.5s"; 
       document.getElementById("projects").style.transition = "0.5s"; 
       document.getElementById("contactForm").style.transition = "0.5s"; 
       document.getElementById("login").style.transition = "0.5s"; 
       document.getElementById("home").style.transition = "0.5s"; 

       current.style.position = "absolute"; 
       current.style.left = "0"; 
       current.style.transition = "left 1s"; 
//    current.style.left = "50px"; 
      }else if(current == document.getElementById("projects")){ 
       document.getElementById("about-us").style.position = "fixed"; 
       document.getElementById("about-us").style.position = "fixed"; 
       document.getElementById("contactForm").style.position = "fixed"; 
       document.getElementById("login").style.position = "fixed"; 
       document.getElementById("home").style.position = "fixed"; 
       document.getElementById("home").style.left = "100%"; 
       document.getElementById("login").style.left = "100%"; 
       document.getElementById("contactForm").style.left = "100%"; 
       document.getElementById("about-us").style.left = "100%"; 
       document.getElementById("vision").style.position = "fixed"; 
       document.getElementById("vision").style.left = "100%"; 
       document.getElementById("vision").style.transition = "0.5s"; 
       document.getElementById("about-us").style.transition = "0.5s"; 
       document.getElementById("contactForm").style.transition = "0.5s"; 
       document.getElementById("login").style.transition = "0.5s"; 
       document.getElementById("home").style.transition = "0.5s"; 

       //show contents 
       current.style.position = "absolute"; 
       current.style.left = "50"; 
       current.style.transition = "left 1s"; 
      }else if(current == document.getElementById("contactForm")){ 
       document.getElementById("vision").style.position = "fixed"; 
       document.getElementById("projects").style.position = "fixed"; 
       document.getElementById("about-us").style.position = "fixed"; 
       document.getElementById("login").style.position = "fixed"; 
       document.getElementById("home").style.position = "fixed"; 
       document.getElementById("home").style.left = "100%"; 
       document.getElementById("login").style.left = "100%"; 
       document.getElementById("about-us").style.left = "100%"; 
       document.getElementById("vision").style.left = "100%"; 
       document.getElementById("projects").style.left = "100%"; 
       document.getElementById("projects").style.transition = "0.5s"; 
       document.getElementById("about-us").style.transition = "0.5s"; 
       document.getElementById("vision").style.transition = "0.5s"; 
       document.getElementById("login").style.transition = "0.5s"; 
       document.getElementById("home").style.transition = "0.5s"; 

       current.style.position = "absolute"; 
       current.style.left = "0"; 
       current.style.transition = "left 1s"; 
      }else if(current == document.getElementById("login")){ 
       document.getElementById("vision").style.position = "fixed"; 
       document.getElementById("projects").style.position = "fixed"; 
       document.getElementById("about-us").style.position = "fixed"; 
       document.getElementById("contactForm").style.position = "fixed"; 
       document.getElementById("home").style.position = "fixed"; 
       document.getElementById("home").style.left = "100%"; 
       document.getElementById("about-us").style.left = "100%"; 
       document.getElementById("vision").style.left = "100%"; 
       document.getElementById("projects").style.left = "100%"; 
       document.getElementById("contactForm").style.left = "100%"; 
       document.getElementById("projects").style.transition = "0.5s"; 
       document.getElementById("about-us").style.transition = "0.5s"; 
       document.getElementById("vision").style.transition = "0.5s"; 
       document.getElementById("contactForm").style.transition = "0.5s"; 
       document.getElementById("home").style.transition = "0.5s"; 

       current.style.position = "absolute"; 
       current.style.left = "0"; 
       current.style.transition = "left 1s"; 
      }else if(current == document.getElementById("home")){ 
       document.getElementById("vision").style.position = "fixed"; 
       document.getElementById("projects").style.position = "fixed"; 
       document.getElementById("about-us").style.position = "fixed"; 
       document.getElementById("contactForm").style.position = "fixed"; 
       document.getElementById("login").style.position = "fixed"; 
       document.getElementById("login").style.left = "100%"; 
       document.getElementById("about-us").style.left = "100%"; 
       document.getElementById("vision").style.left = "100%"; 
       document.getElementById("projects").style.left = "100%"; 
       document.getElementById("contactForm").style.left = "100%"; 
       document.getElementById("projects").style.transition = "0.5s"; 
       document.getElementById("about-us").style.transition = "0.5s"; 
       document.getElementById("vision").style.transition = "0.5s"; 
       document.getElementById("contactForm").style.transition = "0.5s"; 
       document.getElementById("login").style.transition = "0.5s"; 


       current.style.position = "absolute"; 
       current.style.left = "0"; 
       current.style.transition = "left 1s"; 
      } 
     } 
     function show(item) { 
      if(item == 'admin_login'){ 
       alert('admin'); 
      } 
      if(item == 'sign_up'){ 
       alert('sign_up'); 
      } 
      if(item == 'log_in'){ 
       alert('member'); 
      } 
     } 
    </script>

CSS-Code

<style> 
    @font-face { 
     font-family: myFont; 
     src: url("http://localhost/siyaramdevelopers/fonts/lucida-sans-unicode.woff"); 
    } 
    body { 
     font-family: myFont; 
     background-color: black; 
     overflow-x: hidden; 
    } 
    #background { 
     position: fixed; 
     left:0; 
     top:0; 
     background: url("http://localhost/siyaramdevelopers/img/background.jpg"); 
     width: 100vw; 
     height: 100vh; 
     z-index: 10; 
    } 
    #overlay { 
     position: fixed; 
     left:0; 
     top:0; 
     width: 100vw; 
     background-color: black; 
     height: 100vh; 
     z-index: 20; 
     opacity: 0.6; 
     filter:alpha(opacity=60); 
    } 
    #mainContainer { 
     position: absolute; 
     /*border:1px solid yellow;*/ 
     z-index: 30; 
     width: 80%; 
     margin-left: 10%; 
     margin-right: 10%; 
    } 
    #navlinks { 
     position: fixed; 
     height: 120px; 
     width:100vw; 
     top: 0; 
     left: 0; 
     z-index: 40; 
     background-color: rgba(12, 12, 12, 0.77); 
    } 
    #mainContainer > #navlinks > #menuContainer { 
     width:600px; 
     /*min-width: 600px;*/ 
     margin-top: 80px; 
     position: absolute; 
     right:10px; 
     /*border:1px solid red;*/ 
     /*left: 50px;*/ 
    } 
    @media screen and (max-width: 635px) { 
     body { 
      overflow-x: auto; 
     } 
     #navlinks { 
      position: absolute; 
      width: 700px; 
     } 
     #mainContainer > #navlinks > #menuContainer { 
      left:10px; 
     } 
     #mainContainer > #navlinks > #menuContainer > a { 
      margin-bottom: 10px; 
     } 

    } 
    #mainContainer > #navlinks > #menuContainer > a { 
     text-decoration: none; 
     border: 2px solid white; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px;; 
     /*float: right;*/ 
     margin: 5px; 
     padding: 5px; 
     color: #fff; 
     margin-top: 70px; 
     outline: none; 
    } 
    #mainContainer > #navlinks > #menuContainer > a:hover { 
     /*border: 2px solid white;*/ 
     background-color: rgba(28, 77, 233, 0.77); 
     -webkit-transition: 0.5s; 
     -moz-transition: 0.5s ; 
     -ms-transition: 0.5s ; 
     -o-transition: 0.5s ; 
     transition: 0.5s ; 
    } 
    #logo { 
     position: fixed; 
     margin-left: 50px; 
     width: 150px; 
     /*border:2px solid blue;*/ 
    } 
    #middle { 
     margin-top: 150px; 
     color: #fff; 
    } 
    #about-us, #vision, #projects, #contactForm, #login { 
     position: fixed; 
     width: 90%; 
     /*top: 150px;*/ 
     /*right:100px;*/ 
     left:100%; 
    } 
    #middle > #about-us > p > img { 
     margin-right: 20px; 
    } 
    #vision > img, #about-us > img, #contactForm > img, #projects > img { 
     display: none; 
    } 
    /*Contact-us page style*/ 
    h3 { 
     text-align: center; 
    } 
    #admin_login, #sign_up, #log_in { 
     width:100%; 
     height:40px; 
     background: transparent; 
     border: 2px solid white; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     color: #fff; 
     outline:none; 
     font-size: medium; 
    } 
    form[name=contact-form], form[name=loginForm], form[name=signupForm], form[name=admin_login]{ 
     /*border: 1px solid red;*/ 
     text-align: center; 
    } 
    form[name=contact-form] > input[type=text], 
    form[name=contact-form] > input[type=number], 
    form[name=contact-form] > input[type=email], 
    form[name=loginForm] > input[type=email], 
    form[name=loginForm] > input[type=password], 
    form[name=loginForm] > input[type=button], 
    form[name=signupForm] > input[type=text], 
    form[name=signupForm] > input[type=email], 
    form[name=signupForm] > input[type=password], 
    form[name=signupForm] > input[type=number], 
    form[name=signupForm] > input[type=button], 
    form[name=admin_login] > input[type=email], 
    form[name=admin_login] > input[type=password], 
    form[name=admin_login] > input[type=button] 
    { 
     height: 40px; 
     width:250px; 
     margin: 10px; 
     background: transparent; 
     border: 2px solid white; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     color: #fff; 
     outline:none; 
     font-size: medium; 
    } 
    form[name=contact-form] > textarea { 
     width:250px; 
     background: transparent; 
     border:2px solid white; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     color: #fff; 
     font-size: medium; 
     outline:none; 
     margin-bottom: 20px; 
     resize: none; 
    } 
    form[name=contact-form] > input[type=submit] { 
     width:250px; 
     height: 40px; 
     border:2px solid white; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     font-size: medium; 
     background: transparent; 
     color: #fff; 
     outline:none; 
    } 
    form[name=loginForm] > a { 
     text-decoration: none; 
     color: #fff; 
    } 
    #admin_login, #sign_up, #logForm { 
     border: 2px solid white; 
     background-color: transparent; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     font-size: medium; 
     margin-top: 0; 
     padding: 5px; 
     color: #fff; 
     outline: none; 
    } 
    form[name=admin_login], form[name=loginForm], form[name=signupForm] { 
     display: inline; 
    } 
    form[name=admin_login] > #username, form[name=loginForm] > #username, form[name=signupForm] > #name { 
     margin-top: 30px; 

    } 
</style>

und dies ist Screen-Shot von Chrome enter image description here

Dies ist in Safari enter image description here

Quelle

2016-10-17 Sunny

+0

also, es ist nur die Bilder/Styling, die nicht funktioniert? Wenn Sie alle Javascript (das scheint irrelevant) loswerden und ein minimales vollständiges und überprüfbares Beispiel für html + css, das dieses Problem demonstriert - alternativ überprüfen Sie die Konsole und Netzwerk-Registerkarten in den Entwicklertools (Safari hat Entwickler-Tools nehme ich an) sehen, ob da etwas grell offensichtlich passiert (404 Fehler und so) –

+0

Ich habe überprüft, aber es gibt keine Fehler wie folgt :( – Sunny

+0

Ich habe auch Hintergrundbild zu überprüfen, aber es funktioniert noch nicht. – Sunny

Antwort

0

Endlich habe ich es :). Es dauert einige Zeit, aber jetzt weiß ich, warum mein Code in Safari nicht korrekt ausgeführt wird.

Ich muss meinen CSS-Code eins nach dem anderen testen, indem ich ihn kommentiere. Offf.! Aber wenn ich

width:100vw; 
height:100vh;

Kommentar bekam ich einige Ergebnis. Dann änderte ich es zu

width:100%; 
height:100%;

Und es funktioniert! Nun, ich weiß nicht, ob vh oder vw in Safari unterstützt wird oder nicht, denn wenn ich% anstelle von vh und vw benutzt habe, läuft mein Code korrekt.

Quelle

2016-10-17 04:18:26 Sunny

+0

Ich habe ehrlich gesagt vw/vh vermutet - aber es ist gut, dass du es selbst herausgefunden hast (welche Version von Safari übrigens) –

+0

Ich benutzte Safari für Windows, die jetzt veraltet ist !. Ich habe einfach zu viel Zeit verschwendet, um das zu beheben ... LOL – Sunny

Verwandte Themen

 Verwandte Themen