CODEWITHSUNDEEP
javascripthtmlcsssafaricross-browser
Adorn
Adorn

Reputation: 1421

buttons dont work in safari on iphone

I recently designed a webpage, I am not a web developer, so I collected pieces and bits from various locations and kinda stitched them up.

Now, the page is fully designed and works in firefox, chrome and IE.

But it does not work on Safari.

Here is the code:

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

<head>
<meta name="referrer" content="origin">
<script>
    var counter = 0;
    var limit = 50;

    function addInput(divName, arrName){
         if (counter == limit)  {
              alert("You have reached the limit of adding " + counter + " inputs");
         }
         else {
              var newdiv = document.createElement('div');
              newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' required>";
              document.getElementById(divName).appendChild(newdiv);
              counter++;
         }
    }

</script>

<style>
    html *
    {
        color: #000 !important;
        font-family: Arial !important;
    }

 .wrapper
    {
      height: 100%;
      width: 100%;
      display: flex;
      overflow:auto;

    }

    .window
    {
      width: 100%;
      min-height: 200px;
      display: flex;
      flex-direction: column-reverse;
      float: none;
      align-items: center;
      justify-content: center;

    }

    .windowContent
    {

    }   

input[type=text], select {
    width: 150%;
    padding: 6px 10px;
    margin: 4px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 80%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=button]{
    width: 50%;
    background-color: #9CAFFF;
    color: white;
    padding: 6px 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 0px;
    float: left;
    width: 75%;
    margin: 5px;
    margin-left: 0.5cm;
}

.floating-box {
    float: left;
    width: 100%;
    margin: 5px;
    margin-left: 0.5cm;
    border: 3px solid #73AD21;  
}


</style>
</head>

<body onload="GenerateEmotion()">
<div class="wrapper">
    <div class="window">
        <div class="windowContent">
            <form method="POST" action="http://formspree.io/[email protected]" align="center">
                 <div id = "dynamicInputHolder">
                     <div id="dynamicInput_1">
                        Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
                            <div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
                     </div>
                     <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
                 </div>

                 <div id = "dynamicInputHolder">
                     <div id="dynamicInput_2">
                            <div class="floating-box">Sally heard a knock on the door.</div>
                     </div>
                     <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_2', 'myInputs_2');">
                 </div>

                 <div id = "dynamicInputHolder">
                     <div id="dynamicInput_3">
                            <div class="floating-box">Her heartbeat fast, Sally began to walk down the aisle.</div>
                     </div>
                     <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_3', 'myInputs_3');">
                 </div>

                 <br>
                 <input type="submit" value="I have completed a story">
            </form>
            <script>
                function GenerateEmotion(){
                    var emotion = "";
                    var raw = Math.random();
                    var final = Math.ceil(raw * 4);
                    if (final == 1)
                        document.getElementById("emotion").value = "Happy";
                    else if (final == 2)
                        document.getElementById("emotion").value = "Sad";
                    else if (final == 3)
                        document.getElementById("emotion").value = "Angry";
                    else if (final == 4)
                        document.getElementById("emotion").value = "Surprise";
                }
            </script>

        </div>
    </div>

    <div class="window">
        <div class="windowContent">
            <p><font size="6"><b>Emotionalize it!</b></font></p>
            <p><font size="3">We are trying to develop computer programs that can understand common emotions, so they can communicate better with human users.</font></p>
            <p><font size="5"><b> Rules of the game </b></font></p>


            <font size="3">
            <p>Imagine you are a narrator. Today, you are narrating a story of John and Sally's wedding.</p>
            <p>Your goal is to make your audience experience the emotion written on the left top. </p> 
            <p>We are helping you to maintain the flow, you just need to connect the dots!</p>
            <p>As your story will be fed to a giant computer program, so can you:</p>
            <ul>
              <li>Please use simple language. Do NOT use compound, complex, or conditional sentences</li>
              <li>Please do not use pronouns. Use the name - John instead of 'him'</li>
              <li>Please use the past tense and active voice.</li>
              <li>Please make sure to include events from the beginning to the end.</li>
              <li>You want more characters? If yes, Please use David(male) and Amy(female)</li>
              <li>You can use the also include character based actions, e.g. 'A waiter ...'</li>
              <li>Your audiance should experience the said emotion</li>
            </ul>
            </font>
        </div>
    </div>
</div>

</body>

</html>

Specifically, what does not work:

  1. button click to 'add new sentences'
  2. submit

Is there any error: No, nothing happens after touch-clicking the button

What I am looking out for:

  1. If you web developer guys can figure out why it does not work on Safari, it would be great help.
  2. How to change that part, so functionality remains the same, but it works on safari
  3. As I am already asking this question, another side question would help. can I know how to fix the scrollbar at the bottom?

PS_1: If you don't feel like copy pasting this code, it is in working condition here

PS_2: WHen I say safari, I mean the one on the iPhone

Upvotes: 0

Views: 315

Answers (2)

C Yates
C Yates

Reputation: 36

Try moving the "Emotion" input text box outside of the "dynamicInput_1" div. So, instead of: 

        <form method="POST" action="http://formspree.io/[email protected]" align="center">
             <div id = "dynamicInputHolder">
                 <div id="dynamicInput_1">
                    Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
                        <div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
                 </div>
                 <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
             </div>

Try:

        <form method="POST" action="http://formspree.io/[email protected]" align="center">
             <div id = "dynamicInputHolder">
            Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
                 <div id="dynamicInput_1">
                        <div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
                 </div>
                 <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
             </div>

Also, take a look at this explanation of the use of id and class: div class vs id You've got several divs using the same id. ids should be unique.

I'm not sure what you mean about fixing the scrollbar at the bottom, so I haven't addressed that question.

Upvotes: 1

Harley
Harley

Reputation: 395

Do you have the javascript turned on in Safari?

Desktop: https://support.ezimerchant.com/hc/en-us/articles/200836150-How-do-I-enable-cookies-and-JavaScript-in-Safari-Mac-

Mobile: https://www.whatismybrowser.com/guides/how-to-enable-javascript/safari-iphone-ipod

Upvotes: 0

Related Questions