CODEWITHSUNDEEP
jquerycss
Saif AL-Qiari
Saif AL-Qiari

Reputation: 469

images not hidden in load time

When page is loading an image suppose to hide until the url parameter verified and based on the parameter value the right image will display. The issue here is that image is not hide at all specially in the snapped code, but when the same code uses in different projects it works. what is magic here!

Script

     $(function () {
         $('#graphic img').hide();
         $.ajax({
             url: 'ServerData.aspx',
             dataType: 'text',
             type: "GET",
             success: function (data) {
                 var result = $.trim(data);
                 if (result == 2) {
                     $("#gate2").show();

                 } else if (result == 3) {
                     $("#gate2").show();

                 } else if (result == 4) {
                     $("#gate3").show();
                 } else {

                 }
             }
         });
     });

Div

<div class="portlet light bg-inverse">
    <div class="portlet-title">
        <div class="caption font-green-haze bold uppercase">Data</div>
    </div>
    <div class="portlet-body" style="overflow: auto;">
        <div id="divGraphic" style="text-align: center; margin: auto; width: 960px; height: 520px; overflow: hidden; position: relative;">
            <img src="Img/wg-platform.png" style="margin: auto; height: 691px;" />
            <%--<img src="img/wg-platform.png" style="margin: auto; margin-top: -210px;" />--%>
            <div id="river">
                <div id="divRiver4">
                    <img class="wg-river ease" src="img/wg-river.png" style="left: 264px; top: 330px; height: 143px; width: 359px;" />
                    <img class="wg-river" style="left: 314px; top: 305px; right: 285px; height: 143px;" src="img/wg-river.png" />
                    <img class="wg-river" style="left: 288px; top: 318px; right: 311px; height: 143px;" src="img/wg-river.png" />
                </div>
            </div>
            <div id="gate">
                <div id="divGate1">
                    &nbsp;&nbsp;&nbsp;
                    <label class="lblGate">1</label>
                </div>
                <div id="graphic">
                    <img  id="gate1" src="img/Fully Close Red.png" style="left: 321px; top: 294px; z-index: 35; width: 154px; height: 92px; "  />
                    <img  id="gate2" src="img/Fully Open Green.png" style="left: 333px; top: 300px; z-index: 35; width: 154px; height: 92px; " />
                    <img  id="gate3" src="img/Half Open Green.png" style="left: 316px; top: 299px; z-index: 35; width: 154px; height: 92px; " />
                    <img  id="gate4" src="img/Half Open Red.png" style="left: 317px; top: 296px; z-index: 35; width: 154px; height: 92px; " />
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 50

Answers (1)

Michael
Michael

Reputation: 688

remove this

$('#graphic img').hide();

change these to

<img  id="gate1" src="img/Fully Close Red.png" style="display:none; left: 321px; top: 294px; z-index: 35; width: 154px; height: 92px; "  />
<img  id="gate2" src="img/Fully Open Green.png" style="display:none; left: 333px; top: 300px; z-index: 35; width: 154px; height: 92px; " />    
<img  id="gate3" src="img/Half Open Green.png" style="display:none; left: 316px; top: 299px; z-index: 35; width: 154px; height: 92px; " />
<img  id="gate4" src="img/Half Open Red.png" style="display:none; left: 317px; top: 296px; z-index: 35; width: 154px; height: 92px; " />

ensures images are hidden when they are rendered

Upvotes: 2

Related Questions