Loading Jquery Function Via Onload

JavaScript
1

Hey,

I have a bunch of jquery code that animates survey results. It starts by clicking on a css designed ‘submit button’ (see below). My question is to get the following, which works once the button is submitted, to activate instantly upon page load…for reference, here is what I am working with currently:

  <div class="upny_rdbttn1 upny_rdbttnw"><div><a href="#" [B]rel="#mies1" [/B]id="upny_sresbtn1" ><span>Submit and Illuminate UrSelf!</span></a></div></div>

Then a css enabled ‘pop up window’ appears due to a CSS effect:

  
<style>

.simple_overlay {    
 display:none; 
  z-index:10000; 
    background-color:#fff;
      width:480px;   min-height:200px;   border:1px solid #ccc;          /* CSS3 styling for latest browsers */     -moz-box-shadow:0 0 90px 5px #000;     -webkit-box-shadow: 0 0 90px #000;     } 


.upny_resultlistcntr { padding:25px 15px;background:#ECECEC url('http://www.urpenny.com/images/1.0/bg_barchart.gif') 50&#37; 15px no-repeat; }
.upny_trtxt { font:normal 11px/14px arial;color:#767676; }

.upny_rlistcbr1 div { padding:4px 0 0 5px;font:bold 11px/14px tahoma,arial; }
.upny_rlistcbr1 { background:#900 url('http://www.urpenny.com/images/1.0/bg_graphbar.gif') 100% 0px no-repeat;height:24px;position:absolute;top:0px;left:0px;overflow:hidden;color:#fff;z-index:100; }
.upny_rlistcbr2 { position:absolute;top:0px;left:0px;z-index:1; }
.upny_rlistcbr2 div { padding:4px 0 0 5px;font:bold 11px/14px tahoma,arial;color:#000; }

</style>

And then the div statements with id ‘mies1’ for class ‘simple_overlay’


<div class="simple_overlay"  id="mies1">  

<div style="padding:15px 15px 0px 15px;">

<div class="upny_resultlistcntr">
<div class="upny_resultlist" id="upny_resqanscntr">
</div>
</div>

</div>

Then, the jquery function that takes json (not showing it for sake of brevity) uses the called css divs to present a graphical display of json results (survey results)

function upny_liRes() {

    var j = 0;
    var a_html = new Array();
    

    for(i = 0;i < upny_iniresults.q_cdata.length;i++) {

        var t_html = '';
    
        t_html += '<div class="upny_rlistttl">';
        t_html += upny_iniresults.q_cdata[i].a_txt;
        t_html += '<br><span id="tr_';
        t_html += upny_iniresults.q_cdata[i].a_id;
        t_html += '" class="upny_trtxt"></span>';
        t_html += '</div><div class="upny_rlistcbr"><div style="position:relative;height:24px;"><div class="upny_rlistcbr1" style="width:1px;" id="a_';
        t_html += upny_iniresults.q_cdata[i].a_id;
        t_html += '"><div id="ap_';
        t_html += upny_iniresults.q_cdata[i].a_id;
        t_html += '">0';
        t_html += '%</div></div><div class="upny_rlistcbr2"><div id="ap2_';
        t_html += upny_iniresults.q_cdata[i].a_id;
        t_html += '">0';
        t_html += '%</div></div></div></div><div class="upny_clear"></div>\
';

        a_html[j] = t_html;
        
        j++;
        
    }

    $('#upny_resqanscntr').html(a_html.join('<div class="upny_dttdline"></div>'));
    
    upny_aniRes(upny_iniresults.q_cdata);
    
}

Then we call the function to activate it:

$("a[rel]").overlay({   top: 150,   expose: {           color: '#000',         loadSpeed: 200,       opacity: 0.5     },       closeOnClick: false,    api: true   });

upny_liRes();

Question is: How do I do this without clicking on a button. Rather, have this work, as it does now, by page onload? It’d save me a ton of time and finally let me wrap up a project where the creator parted ways.

I know one might want to ask "Why does it have to activate on onload? Take my word, having a pop up with querystring makes all the difference for reasons I won’t get into.

Is it possible?

Thanks for your time and happy new year.

2

If the function upny_liRes(); does opening the div (popup) then you can simply do:


window.onload = upny_liRes;

But with jquery itself you can do like this:


$(document).ready(function(){
    upny_liRes();
});

But for sure how your popup is being opened myself, i need to see your jquery script as well as html.

3

Thanks for the reply. I updated the top post for you showing the full style, full divs
and full jquery functions. Everything that works now, with clicking of submit button, is displayed. I hope this helps.

4

Did you try once as i said before to call the function?

If that does not work try as follows too.


$("a[rel]").overlay({   top: 150,   expose: {           color: '#000',         loadSpeed: 200,       opacity: 0.5     },       closeOnClick: false,    api: true   });
upny_liRes();
5

Forgive my jquery ignorance. At the top of all the code you see, I have:

  
  <script>
  
$(document).ready(function(){
$("a[rel]").overlay({   top: 150,   expose: {           color: '#000',         loadSpeed: 200,       opacity: 0.5     },       closeOnClick: false,    api: true   });


upny_liRes();
});
  
  </script>

Nothing happens. I am sure I am doing something incredibly stupid.
(Puts paper bag on head…)

6

I realize, that since the liRes() function requires the overlay to load, and since it works perfectly with a click, maybe just a popup window that clicks that css button is all I need.

How would one do that? I tried a few auto click solutions but it did not work. Will keep researching but I figured I would ask.

Ty for your time, once again.

7

I took a look at the documentation for the overlay plugin, and it looks like load() is what you want.

http://flowplayer.org/tools/overlay.html

8

I will check it out, thanks.

9

That worked. Ty