Rectangle 27 2

you can also use $.ajax instead of $("").load("url"); as it will only replace the content of the given element in success function means when the AJAX request is successful, so flickering can be prevented.

function autoReload() {
  setTimeout(function() {
   $.ajax({
     url: '/index.html',
     success: function(data) {       
         document.getElementById("employee_table").innerHTML = data;
      }
    });

    autoReload();  // calling again after 5 seconds
 }, 5000);
}

autoReload(); // calling the function for the first time

or you can also use $.get

$.get("index.html", function(data, status){
        if(status == "success"){
          document.getElementById("employee_table").innerHTML = data;
       }
 });

$.ajax() is the most configurable one, where you get fine grained control over HTTP headers and such. You're also able to get direct access to the XHR-object using this method. Slightly more fine-grained error-handling is also provided. Can therefore be more complicated and often unecessary, but sometimes very useful. You have to deal with the returned data yourself with a callback.

$.get() is just a shorthand for $.ajax() but abstracts some of the configurations away, setting reasonable default values for what it hides from you. Returns the data to a callback. It only allows GET-requests so is accompanied by the $.post() function for similar abstraction, only for POST

.load() is similar to $.get() but adds functionality which allows you to define where in the document the returned data is to be inserted. Therefore really only usable when the call only will result in HTML. It is called slightly differently than the other, global, calls, as it is a method tied to a particular jQuery-wrapped DOM element. Therefore, one would do: $('#divWantingContent').load(...)

It should be noted that all $.get(), $.post(), .load() are all just wrappers for $.ajax() as it's called internally.

More details in the Ajax-documentation of jQuery: http://api.jquery.com/category/ajax/ Hope this will help you.

javascript - Reload html page with AJAX - Stack Overflow

javascript jquery html ajax
Rectangle 27 0

Here is an example of dynamically setting pseudo-element styles using jQuery it's a matter of creating a <style> element, setting its text content to the desired style declarations, and appending it to the document.

Here is a simple single-page example:

<!doctype html>                                                                                                                                                                 
<html>
    <head>
        <title>Dynamic Pseudo-element Styles</title>
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <script> 
$(document).ready(function() {                      
    createStyles();
    $('#slider-font-size').on('change', createStyles);

    function createStyles() {
        // remove previous styles
        $('#ph-styles').remove();

        // create a new <style> element, set its ID
        var $style = $('<style>').attr('id', 'ph-styles');

        // get the value of the font-size control
        var fontSize = parseInt($('#slider-font-size').val(), 10);

        // create the style string: it's the text node
        // of our <style> element
        $style.text(
            '::placeholder { ' +
                'font-family: "Times New Roman", serif;' +
                'font-size: ' + fontSize + 'px;' +
            '}');

        // append it to the <head> of our document
        $style.appendTo('head');
    }   
});     
        </script>
    </head>      

    <body>       
        <form>
            <!-- uses the ::placeholder pseudo-element style in modern Chrome/Firefox -->   
            <input type="text" placeholder="Placeholder text..."><br>

            <!-- add a bit of dynamism: set the placeholder font size -->
            <input id="slider-font-size" type="range" min="10" max="24">
        </form>
    </body>      
</html>

input - jQuery change placeholder text color - Stack Overflow

jquery input colors placeholder
Rectangle 27 0

Since you are already using jQuery to handle your scrolling, try adding 100 to your offset when setting your scrollTop property, which should cause your scrolling behavior to go 100px past the location of your target element in your animate() call :

jQuery('html, body').animate({
       scrollTop: jQuery("#"+$id).offset().top + 100 // scroll 100px past the element
}, 1000);
.space { height: 500px; }
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <a href="#anchor" data-id='anchor'>anchor</a>
  <div class='space'></div>
  <div id="anchor" class="container-full"><h1>Hi</h1></div>
  <div class='space'></div>
  <script>
    $(function(){
      $("a").click(function(e) {
        e.preventDefault();
        $id = $(this).attr("data-id");
        $("a.clicked").removeClass("clicked");
        $(this).addClass("clicked");
        $('html, body').animate({
           scrollTop: $("#"+$id).offset().top + 100
        }, 1000);
      });
    });
    
  </script>
</body>
</html>

But I use this jQuery for other elements on the same page is there a way I can apply it only on a specific anchor?

You could just change the jQuery selector to be more specific such as using a selector like #id to only select a specific element by its id attribute. Or if you wanted to only target elements that had the data-id attribute, you could use $('[data-id']).click(...).

jquery - CSS make link to anchor go 100px lower - Stack Overflow

jquery html css