Hi all,
I have a page showing 100 rows of data and I have a button "Information" in each row showing more details about that record of that row.
It works fine in chrome /safari. But in firefox and IE11 it is very slow to render the page.
My code looks like the below
<link rel="stylesheet" href="demo/jquery.mobile-1.4.2.css">
<script type="text/javascript" src="demo/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="demo/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="demo/jquery.shorten.js"></script>
.................
.............
In each row the below code is there for the "Information" button.
<a href="#popup1" data-rel="popup" data-position-to="window" data-role="button" data-mini=true data-theme="a" data-inline="true" onclick="$('#popup1').popup(); $('#popup1').popup('open');">Information</a>
<div data-role="popup" id="popup1" data-corners="false" data-tolerance="15,15" data-transition="slide">
<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><iframe src="
http://mysite.com/test.php?row=1" width="680" height="320" seamless></iframe>
</div>
.....................
.......................
<a href="#popup2" data-rel="popup" data-position-to="window" data-role="button" data-mini=true data-theme="a" data-inline="true" onclick="$('#popup2').popup(); $('#popup2').popup('open');">Information</a>
<div data-role="popup" id="popup2" data-corners="false" data-tolerance="15,15" data-transition="slide">
<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><iframe src="
http://mysite.com/test.php?row=2" width="680" height="320" seamless></iframe>
</div>
Could you please tell me how we change the above to load faster please?
Thanks
[admin moved to jQuery Mobile]