Hi all
I have some images, when they are clicked on a loading animation appears briefly and then the window with the next step which must be completed before moving to the next page. I have seen on other sites (like amazon) where people just click on a help button and a little new window appeared. Can I do this in pure js? Does this work cross browser?Thanks
Thanks for the reply that is what I’m already using, it seems like overkill a bit? Does it work cross browser? Thanks
Surely there must be an easier way to do this? This is the offending code as far as the ifelse part…
<script language=‘javascript’>
google.load(‘jquery’, ‘1.4.2’);
google.load(‘jqueryui’, ‘1.8.5’);
</script>
<script language=‘javascript’>
$(document).ready(function(){
$(‘#debug’).ajaxStart(function() {
if( $(‘#div_fond’).length > 0) $(‘#div_fond’).remove();
var new_div = $(‘<div></div>’).attr({ id:‘div_fond’, name:‘div_fond’ }).appendTo(‘BODY’);
var v_w = $(document).width();
var v_h = $(document).height();
new_div.css({‘opacity’:‘.5’,‘filter’:‘alpha(opacity=50)’,‘z-index’:‘999999’,‘position’:‘absolute’,‘top’:‘0’,‘left’:‘0’,‘background’:‘#f5f5f5’,‘width’:v_w+‘px’,‘height’:v_h+‘px’}).addClass(‘div_fondo’).show();
var t_w = ($(document).width()/2)-($('#debug').width()/2);
var t_h = ($(window).height()/2)-($('#debug').height()/2);
$('#debug').css({'position':'absolute','top':0,'left':t_w,'z-index':'1000000'}).show();
});
$(‘#debug’).ajaxComplete(function() {
$(‘#div_fond’).hide().remove();
$(‘#debug’).hide();
});
});
function fn_open_window(act){
$.post(‘proced.php’,{‘proceso’:‘create’,‘action’:act},function(r){
if( $.trim(r) != ‘’){
$(‘#window_tar’).html(r).dialog({
title:‘Info’,
modal:true,
width:450,
close:function(){
$(this).dialog(‘destroy’);
},
buttons:{
‘Close’:function(){
$(this).dialog(‘destroy’);
},
‘Send’:function(){
var valido=false;
var service=‘’;
if( act == 10 || act == 7 || act == 12 || act == 11 || act == 13)
service=2;
else
service=1;
</script>
Yes it is, if it’s the only part of the library that’s being used.
They take great pride in the amount of cross-browser support that is provided. All the way back to IE6 and Firefox 2, for example.
Browser Compatibility - jQuery JavaScript Library
You can simplify your code to the following:
$(function () {
$('#debug').ajaxStart(showFond);
$('#debug').ajaxComplete(hideFond);
});
function fn_open_window(act) {
$.post('proced.php', {
'proceso': 'create',
'action': act
}, success);
}
Whereupon you create the functions for showFond(), hideFond() and success(data)
jQuery already helps to hide vast amounts of complexity away from you.
One of the ways to make code simpler and easier to follow is to break it down in to smaller functions. Other ways are by using well known variable names, such as using data instead of r, in the success function.
Thanks for the great answer. So if it is overkill I should seriously think about doing this in pure js and get rid of the jquery on this page?
Two problems come in when writing your own code.
- Achieving cross-browser compatibility is incredibly hard.
- You end up writing ten times more code than you do when using a code library.
If you do want to go that route, testing and unit suites can help to handle some of the complexity for you.
Alternatively, you can reduce the amount of library code by repackaging it so only the parts that you use are there in the first place. See the jQuery UI build a custom download by way of example.
Thanks again I am already using the min version so I’ll check it out and configure my download as/if required. 
Just in case this needs clarifying, the min version is not where they’ve taken any sections out of the code. Instead, the min version is where the full amount of code has had its variables reduced to single letters, and spaces removed, so that the same full code can now be achieved with a minimum number of characters.
Cheers for the clarification Paul. Therefore I assume that the custom jQuery UI build download is NOT “minified” so I would do that myself. I think that the min FULL version is only about 56k with the whole shebang so maybe I should just stick with that? (to save 20k maybe the cost benefit is not there? I am downloading it from google anyway)
It’s the other way around actually. Perform a download yourself of a custom build and you will find that the custom build is fully minified.
Great thanks!
How does that look, good -or am I missing the point?! Thanks
<script type=“text/javascript” src=“/js/jquery.min.js”></script>
<script type=“text/javascript” src=“/themes/development-bundle/ui/jquery.ui.core.js”></script>
<script type=“text/javascript” src=“/themes/development-bundle/ui/jquery.ui.position.js”></script>
<script type=“text/javascript” src=“/themes/development-bundle/ui/jquery.ui.widget.js”></script>
<script type=“text/javascript” src=“/themes/development-bundle/ui/jquery.ui.dialog.js”></script>
<script type=“text/javascript” charset=“ISO-8859-1” src=“/js/fns_index.js”></script>
<script language=‘javascript’>
$(document).ready(function(){
$(‘#debug’).ajaxStart(start_window);
$(‘#debug’).ajaxComplete(stop_window);
});
</script>
I think I can get rid of this line:
<script type=“text/javascript” src=“/js/jquery.min.js”></script>
How can I merge the development-bundle files? Thanks
You can paste the contents of the script file you want to compress in to Minify Javascript Online / Online JavaScript Packer and then save the results back in to that file.
You can also copy the scripts one after another, so one file might contain multiple scripts within it.
When you do minify the contents of a script file, it helps to express that in the file name itself too. So, you might end up with a file called jquery.ui.core+position+widget+dialog.min.js
Surely this file has all the other files in the bundle in it? And the bonus is it is just one http request versus all the four requests in the development bundle?
<script type=“text/javascript” src=“/js/jquery.min.js”></script>