Code functioning flawlessly on JSFiddle, but encountering errors on Chrome and IE

Question

Code functioning flawlessly on JSFiddle, but encountering errors on Chrome and IE

I recently implemented some JavaScript code to add a sliding animation effect to the login form that appears with an accompanying picture.

After testing the code on JS Fiddle, everything worked perfectly. However, upon copying and pasting the same code into Chrome or Internet Explorer, nothing seems to be happening.

Both browsers have JavaScript enabled, so I'm not sure why it's not functioning correctly.

Below is the HTML snippet:

<body>
<header>
    <div class="Header">
        <nav id="navi">
            <img src="http://www.bilder-upload.eu/upload/79a9ee-1471738072.png" class="logo"/>
            <img src="C:\Users\Hasaan\Desktop\HasaanNEW\Hasaan\Media\Images\menu-icon.png" class="menu-icon"/>

            <ul>        
            <li> <a class="navlinks" href="#">Home</a> </li>
            <li> <a class="navlinks" href="#">About us</a> </li>
            <li> <a class="navlinks" href="#">Our Services</a> </li>
            <li class="last" id="login"> <a href="#">Login</a>
                <div class="dummy">
                <ul>
                <li  class="loginform"> <form method="post" action="">
                  <p><input type="text" name="login" value="" placeholder="Username or Email"></p>
                  <p><input type="password" name="password" value="" placeholder="Password"></p>
                  <p class="remember_me">
                     <label>
                      <label>
                   <input type="checkbox" name="remember_me" id="remember_me">
                           Remember me on this computer
                      </label>
                      </label>
                     </p>
                      <p class="submit"><input type="submit" name="commit" value="Login"></p>
                    </form>
                    </li>
                </ul>
                </div>
            </li>


            </ul>           
            </li>

        </nav>  
    </div>
</header>
</body>
</html>

CSS:

@import 'https://fonts.googleapis.com/css?family=Montserrat';
@import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

body {
    margin: 0;
    background: #808080 ;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    color: #fff; 
}

.show {
    display: none;
}
...
... (Remaining CSS code)
...

And finally, the JavaScript function:

$(".last").on('click', function() {
  $('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
  e.stopPropagation();
});

For better understanding and testing, please refer to the following link of the working version in JS Fiddle:

https://jsfiddle.net/5vs30x6f/

javascript html css jsfiddle

Answer 1

Answer №1

Don't forget about this

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

$(".last").on('click', function() {
  $('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
  e.stopPropagation();
});

@import 'https://fonts.googleapis.com/css?family=Montserrat';
@import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

body {
    margin: 0;
    background: #808080 ;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    color: #fff; 
}

.show {
    display: none;
}
...
... (CSS code omitted for brevity)
...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="Header">
        <nav id="navi">
            <img src="http://www.bilder-upload.eu/upload/79a9ee-1471738072.png" class="logo"/>
            <img src="C:\Users\Hasaan\Desktop\HasaanNEW\Hasaan\Media\Images\menu-icon.png" class="menu-icon"/>

            <ul>        
            <li> <a class="navlinks" href="#">Home</a> </li>
            <li> <a class="navlinks" href="#">About us</a> </li>
            <li> <a class="navlinks" href="#">Our Services</a> </li>
            <li class="last" id="login"> <a href="#">Login</a>
                <div class="dummy">
                <ul>
                <li  class="loginform"> <form method="post" action="">
                  <p><input type="text" name="login" value="" placeholder="Username or Email"></p>
                  <p><input type="password" name="password" value="" placeholder="Password"></p>
                  <p class="remember_me">
                     <label>
                      <label>
                   <input type="checkbox" name="remember_me" id="remember_me">
                           Remember me on this computer
                      </label>
                      </label>
                     </p>
                      <p class="submit"><input type="submit" name="commit" value="Login"></p>
                    </form>
                    </li>
                </ul>
                </div>
            </li>


            </ul>           
            </li>

        </nav>  
    </div>
</header>

Answer 2

Don't forget about this

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

$(".last").on('click', function() {
  $('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
  e.stopPropagation();
});

@import 'https://fonts.googleapis.com/css?family=Montserrat';
@import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

body {
    margin: 0;
    background: #808080 ;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    color: #fff; 
}

.show {
    display: none;
}
...
... (CSS code omitted for brevity)
...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="Header">
        <nav id="navi">
            <img src="http://www.bilder-upload.eu/upload/79a9ee-1471738072.png" class="logo"/>
            <img src="C:\Users\Hasaan\Desktop\HasaanNEW\Hasaan\Media\Images\menu-icon.png" class="menu-icon"/>

            <ul>        
            <li> <a class="navlinks" href="#">Home</a> </li>
            <li> <a class="navlinks" href="#">About us</a> </li>
            <li> <a class="navlinks" href="#">Our Services</a> </li>
            <li class="last" id="login"> <a href="#">Login</a>
                <div class="dummy">
                <ul>
                <li  class="loginform"> <form method="post" action="">
                  <p><input type="text" name="login" value="" placeholder="Username or Email"></p>
                  <p><input type="password" name="password" value="" placeholder="Password"></p>
                  <p class="remember_me">
                     <label>
                      <label>
                   <input type="checkbox" name="remember_me" id="remember_me">
                           Remember me on this computer
                      </label>
                      </label>
                     </p>
                      <p class="submit"><input type="submit" name="commit" value="Login"></p>
                    </form>
                    </li>
                </ul>
                </div>
            </li>


            </ul>           
            </li>

        </nav>  
    </div>
</header>

Answer 3

Answer №2

Ensure that your jQuery code is properly enclosed in

$( document ).ready(function() {
  // Your custom code should be placed here
});

For more information, you can refer to this link. Typically, the script should only run once the DOM structure has been fully assembled

Here's an example of how your code should look:

$( document ).ready(function() {
  $(".last").on('click', function() {
    $('li div ul').toggle('');
  });
  $('.nav > li div ul li a').click(function(e) {
    e.stopPropagation();
  });
});

Remember to include jQuery in the head section of your webpage

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 4

Ensure that your jQuery code is properly enclosed in

$( document ).ready(function() {
  // Your custom code should be placed here
});

For more information, you can refer to this link. Typically, the script should only run once the DOM structure has been fully assembled

Here's an example of how your code should look:

$( document ).ready(function() {
  $(".last").on('click', function() {
    $('li div ul').toggle('');
  });
  $('.nav > li div ul li a').click(function(e) {
    e.stopPropagation();
  });
});

Remember to include jQuery in the head section of your webpage

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 5

Answer №3

I have a feeling that you may have overlooked adding the window.onload listener, as this is the main distinction between running code on JSFiddle and using pure Javascript. When jQuery is loaded, JSFiddle automatically executes your code. You can rectify this by implementing something like the following:

window.addEventListener('load', function(){
    // Your code here
});

Alternatively, you could opt for using jQuery instead:

$(document).ready(function(){
    // Your code here
});

Answer 6

I have a feeling that you may have overlooked adding the window.onload listener, as this is the main distinction between running code on JSFiddle and using pure Javascript. When jQuery is loaded, JSFiddle automatically executes your code. You can rectify this by implementing something like the following:

window.addEventListener('load', function(){
    // Your code here
});

Alternatively, you could opt for using jQuery instead:

$(document).ready(function(){
    // Your code here
});

Code functioning flawlessly on JSFiddle, but encountering errors on Chrome and IE

Answer №1

Answer №2

Answer №3

Similar questions

Determine if the content has finished loading once it has been added using JavaScript

How can I stack two appbar components from Material Ui on top of each other without the vertical line separating them?

Ensure portrait orientation images have a restricted width to maintain their aspect ratio

JSON does not send information to the specified web address

Troubleshooting: Issues with Custom Image Loader in Next.js Export

Which programming language or technology utilizes the syntax <%VARIABLE%> and in what context is it employed?

Is there a way to emphasize a particular link in a navigation bar without causing changes to the other links?

Create a compressed package of a Vue project that can easily be inserted into a Blogger blog post as a single HTML file

When Select2 doesn't find a suitable option, the text "other" will be displayed

Inform the user that an error has occurred when attempting to perform an invalid

Adding new elements to a div container

jQuery fails to fetch information

What are the steps to develop a progress bar using PHP and JavaScript?

When a URL is triggered via a browser notification in Angular 2, the target component ceases to function properly

The value of the innermost dropdown in the AngularJS Cascading dropdown is not being retrieved when it is selected

Error message: Invalid input for directive, only numeric values are accepted

reducing the size of the text field

Struggling with Bootstrap 4 Navigation - Placement of Icons Challenge

Both Fluid and Fixed layouts offer different advantages and disadvantages for website

There seems to be an issue with the React Hooks edit form where it is not selecting the record to edit. Although the currentId is correct