Javascript work in Chrome, IE, Opera but not in FIREFOX

Scriptcase 8 Discussion
#1

On my application i have put this code on onapplicationinit event:

$im = ‘http://10.10.1.2/img/opbg.jpg’;
$imm= ‘http://10.10.1.2/img/loading.gif’;
$spla=’
<style>
.spinner {
position:absolute;
top:50%;
left:50%;
margin-top:-105px;
margin-left:-250px;
height:210px;
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #FFFFFF;
width: 500;
border-radius: 25px;
font: 25px arial, sans-serif;
}
</style>
<script type=“text/javascript” language=“JavaScript”>
function ShowContent(d) {
document.getElementById(d).style.display = “block”;
}
</script>
<div id=“spinner” class=“spinner” style=“display:none;”>
<img id=“gif-spinner” src="’ . $imm . ‘"/>’;

$spla .= ’ <img id=“img-spinner”’;
$spla .= ‘src="’ .$im . ‘"/>’;
$spla .= ‘</div>
<script type=“text/javascript” language=“JavaScript”>
ShowContent(“spinner”);
</script>’;

[head_loading]=$spla;

In Onvaidatesuccess event i put this code before sc_redir() to another app:

echo [head_loading];

This code works fine in chrome, IE, Opera where a gif and a jpeg images are correctly printed on middle screen.
In FIREFOX ( linux an windows ) images are not displayed but only one blank box appears.

Any solution?

Gian Luca

#2

Hello, your code only needs some reformatting. Try this one:


// images
$im = 'http://10.10.1.2/img/opbg.jpg';
$imm= 'http://10.10.1.2/img/loading.gif';
?>

<!-- Declaring styles -->
<style>
.spinner {
    position:absolute;
    [B]display: block;[/B]
    top:50%;
    left:50%;
    margin-top:-105px;
    margin-left:-250px;
    height:210px;
    border: 2px solid #a1a1a1;
    padding: 10px 40px;
    background: #FFFFFF;
    width: 500;
    border-radius: 25px;
    font: 25px arial, sans-serif;
}
</style>

<!-- Declaring the spinner -->
<div id="spinner" class="spinner">
    <img id="gif-spinner" src="<?php echo $imm ?>"/>
    <img id="img-spinner" src="<?php echo $im?>"/>
</div>

<!--  Go back to php -->
<?php

I delete your JavaScript because it is unnecessary, because you used it just to set the element’s display to block, that is why I put that property directly in the style marked in bold.

#3

Thanks manfred,
your code is definitely more correct, but unfortunately continues to work only with chrome.IE and Opera, while firefox appears only a rectangle centered on the screen. I believe that some HTML tags is not interpreted correctly in firefox

Thanks again

Gian Luca

#4

Hello Gian Luca,
Remove “position: absolute” and see what happens.

#5

Thanks manfred,
if i toggle position: absolute the in firefox the box was draw at left top corner of screen, but wiyhout images

#6

I don’t know, it should works. Could you test your snippet of code in a standalone file? out of ScriptCase

#7

Ok manfred,
i have tried and work fine !!!

Now problem is on scriptcase, but why onli on firefox ?

thank

#8

Could you please share your code of the standalone test? I could take a look and see what is happening.

#9

SOLVED:

i have used jquery DOM event and now work also on firefor:

        &lt;script type="text/javascript" src="../prod/third/jquery/js/jquery.js"&gt;&lt;/script&gt;
        &lt;script&gt;
                $(document).ready(function() {
                        $("spinner").show();
                });
        &lt;/script&gt;

thank’s manfred for you help with css