CODEWITHSUNDEEP
javascriptjqueryhtmlcssjsp
AKIWEB
AKIWEB

Reputation: 19612

How to use image tag in body of html instead of loading image from css?

I am reloading the div every 10 seconds without reloading the whole page. And also when refresh happens, it greys out my div and show the refresh image and after refresh is done, it loads the data in my div table and it is working fine.

Below is the refresh image I am using -

enter image description here.

Problem Statement:-

Below is my JSP file (dataInfo.jsp) and I am reloading the div container every 10 seconds without reloading the full page.

<body>
    <div id='headerDivDash'>
        <h1 id='topHeaderDash'>
          <!-- some image here -->
        </h1>
    </div>
    <div id="vertical-list" style='display: block; list-style-type: none;'>
        <ul class="resp-tabs-list">
            <a href="_blank"><li>Test 1</li></a>
            <br />
            <a href="_blank"><li>Test 2</li></a>
        </ul>
    </div>

    <!-- just need to reload this div, other div should be intact without getting appended -->
    <div class="container">

    </div>
    <div class="footer">Some Value Here</div>
</body>

Now below is the jquery script I am using to load the div container every 10 seconds and it works fine. I am able to see the refresh image and it also greys out so everything is working good so far.

// Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax({
        url: 'dataInfo.jsp',
        type: 'GET',
        success: function(data){
            // onSuccess take only the container content
            var content =  $($.parseHTML(data)).filter(".container"); 
            //Replace content inside the div
            $('.container').replaceWith(content);
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}

$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 1 * 1000);
});

Now as you see above, I have hardcoded the url for image. If I deploy my code in the production, then it will block this url because of firewall so somehow I need to load this image from my local folder in the project.

My directory structure is like this -

webapp/
|-- resources/
|   +-- img/
|           page-loader.gif
+- WEB-INF/
  +-- views/
        dataInfo.jsp

I tried using the path like this background: 'lightgray url("/testweb/src/main/webapp/resources/img/page-loader.gif") no-repeat center' it doesn't work that way also somehow.

So my question is - Is there any way I can rewrite the overlay div in my above jquery in the body of html somehow? Then I can use image tag which will work for me for sure.

<img src="page-loader.gif" />

Upvotes: 1

Views: 1572

Answers (2)

RMSTOKES
RMSTOKES

Reputation: 81

Are you sure about your directory structure. I am presuming you are working with Java/JSP spring? and not Javascript!

I believe the Resource folder is one up from the web app folder and web app is your root. Have you tried url(/img/page-loader.gif)?

Upvotes: 1

vortexwolf
vortexwolf

Reputation: 14037

As far as I see, the image should be placed in the center of the screen. This could be done by using an outer div for background and center the image inside it.

Add both div and img tag to the end of the body tag so:

    <div class="footer">Some Value Here</div>
    <div id="overlay" style="display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: lightgray; opacity: 0.4; ">
        <img src="page-loader.gif" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;" />
    </div>
</body>

The style attribute can be moved to a separate css file and replaced by the class attribute.

The $(document).ready code can be reduced so:

$(document).ready(function(){
    // Execute refresh with interval:
    setInterval(refresh, 1 * 1000);
});

Upvotes: 2

Related Questions