I am trying to load HTML into the fancybox popup. Everything works great in every other browser but IE 8 (I haven't checked other versions of IE). The popup opens but there is nothing in it.
This is my js:
$(".fancyPopup").live('click', function(ev){
ev.preventDefault();
var selectedStrip = '#' + $(this).attr('id');
$(".fancyPopup").live('click', function(ev){
ev.preventDefault();
var selectedStrip = '#' + $(this).attr('id');
$.fancybox(
{
href: '/snapav/mkting/html/rackPowerStripSuggestions.html',
type: 'ajax',
fitToView : false,
afterShow: function(){
hideSeries();
$('.strips:not("' + selectedStrip + '")').hide('slow', function(){
$('ul' + selectedStrip).addClass('flagged');
});
}
});
});
Any help is MUCH appreciated.
This was actually 2 issues.
To get the content to fill the popup in IE, I needed to add a DOCTYPE and all that info that goes into a plain HTML page. Wasn't aware of that.
IE has a difficult time with animate. You have to have the exact property match up in your CSS that you are animating. So if in your CSS you have "padding: 4px 0", you have to break it down to "padding-top: 4px and padding-bottom: 4px" in your css, because you can't animate shorthand CSS in jQuery.
Lots learned here! Hopefully this can help someone else in the future.
Related
In jQuery, is there any way to mask whole page automatically when we execute each Ajax post (to prevent input from user or double submitting...)? I see this plugin: jQuery-blockUI (http://www.malsup.com/jquery/block/) but we still have to mask/unmask manually for each Ajax post.
As I know in ExtJS, we can control this by implementing "beforeAction" function, because this event will be fired right before any action on form, but in jQuery I do not find out anything like that.
Could you please give me a solution for this? Thank you so much.
It wouldn't be too hard to do this yourself.
HTML
<body>
<div id="mask"></div>
<!-- Everything else -->
</body>
CSS
#mask{
position:fixed;
width:100%;
height:100%;
background: /* You can make this slightly transparent black rgba(0,0,0,.3); or transparent */;
top:0;
left:0;
display:none;
}
JAVASCRIPT
var isPageMasked = false,
mask = $('#mask');
var maskPage = function(){
if(isPageMasked){
mask.hide();
} else {
mask.show();
}
isPageMasked = !isPageMasked;
};
Then you would just call maskPage() when you make you want to mask and unmask the page.
You can just use the beforeSend and complete functions
$.ajax({
beforeSend: function() {
//Mask page
},
complete: function(){
//remove Mask
}
}
});
I'm trying to mantain a container div behind my colorbox fixed while the user scrolls inside the colorbox itself.
I Google´d about it and found, quoting Jake Moore:
Example:
$().bind('cbox_open', function(){
$('body').css({overflow:'hidden'}); }).bind('cbox_closed', function(){
$('body').css({overflow:'auto'}); });
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
But the previously aint working for me, the scroll locks in the div behind but also in the colorbox, so the user cant scroll anywhere!
I am guessing the iframe has something to do with it since im calling colorbox this way:
$(document).on("click", ".some-link", function(e){
e.preventDefault();
var url = $(this).attr('href');
$.colorbox({
onComplete: function(){
some other stuff()
$.colorbox.resize();
$('body').css({overflow:'hidden'})
},
onCleanup: function(){
some other stuff()
$('body').css({overflow:'hidden'})
},
href: url,
});
});
Any ideas? Is there any other way to disable the scroll within a div, but allowing it in another one ?
Im using colorbox with something like infinite-scroll so when the user scrolls down more information keeps showing up (div boxes actually). Those boxes are the ones that fire the colorbox, ".some-link" is a link within the box.
Hope my english is tuned. Regards! Agustin
I have several methods in my models, which are called by my controller. On the client, I want to update a progress bar while the model methods are running.
How can I communicate with the controller to get its progress?
True that you need AJAX / long polling to make this work. Here is XMLHttpRequest2. And to me, this has taken the web to next level. Its time for us to use it. I ve used it with jquery. Probably a lot more easy to understand what I ve done. Might need a little tweak to make it work. Here it goes..
$.ajax({
type: 'POST/GET',
url: "link/to/controller/method",
data: {whatever = 'foo'},
beforeSend: function(XMLHttpRequest)
{
//Upload progress
XMLHttpRequest.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$( ".jquery-uploadbar-selector" ).progressbar({ value: percentComplete }); //jquery progress bar for upload
//incase you wanted an upload bar
}
}, false);
//Download progress
XMLHttpRequest.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$( ".jquery-downloadbar-selector" ).progressbar({ value: percentComplete });
//jquery progress bar for download or in other words The real answer for question
}
}, false);
},
success: function(data){
//Here goes the end of what you have done.. I would just type..
console.log('Yay!! I guess, I ve answered my first bounty question and hoping to see it work well.');
}
});
Hope it works.. let me know if I am wrong somewhere.
You can't do this using PHP since PHP is server side and when it has completed its work the result is sent to the browser.
You may use Javascript to make AJAX call (google this, it is a way to make call to the server without reloading the page) and each time a method of the model is completed you may add 'loading' to your progress bar using JS. but really in PHP there isn't a way to know how much of an action has been completed
There are ways to do this with file uploads via Apache and NGINX, however that won't apply to your situation.
One way of doing it would be to use AJAX long polling to monitor a special controller or method of your controller to look for updates and update on the frontend when it changes.
have http connection open with client(user) and when you start the job send data(isWaiting=1) to your client or do ajax polling as Asiq said and fetch isWaiting status.
on html client side page , javascript to load progress bar when isWaiting=1
html page having this inside body tag
<div class="overlay" style="display:none;"></div>
and css
.overlay { width:100%; height:100%; z-index:5000; left:0;/IE/ top:0;
text-align:center; position:fixed;
background: url('https://memberschemes.rics.org/MembersPortal/images/ajax_loader-2.gif') no-repeat fixed center center;
background-color: #EFEFEF;
opacity:0.7;
/*
background: #F4F4F4;
background-repeat: no-repeat;
background-position: center;
*/
}
jQuery.noConflict();
(function($){
$(function(){
$("#jv_amenu_side49").accordion({
initShow : "ul.current",
objClass:".jv_maccordion",
slide:1 });
}); })(jQuery); (function($){
$(function(){
$("#jv_amenu_side49").aMenuLoad({
activeItemId:1,
moduleId:49,
eventType:1
}); }); })(jQuery);
Opera Firefox Chrome - all work is good but
IE 7 and IE 9
have an error Char:4 Error: Object doesnt support this property or method Code:0 at this line: initShow : "ul.current",
i think it is UL tag but dont have an idea how to do it workable
there is a left column menu
Tough to see. You should past the HTML code that is relevant as well.
Anyway, are you sure you don't want initShow to be "li.current" or "ul .current"? Doesn't look right how you have it now, because that implies that the ul has a class of .current.
I am trying to display an ajax spinner when loading AJAX content.
The following code appears to work fine in Firefox but not in IE7. The functions to show and hide the spinner are being called but the browser just does not display it.
Here is the jQuery:
$.ajax({
url: filterorSearch,
data: {filterParams: JSON.stringify(filters), requestTime: new Date().getTime()},
beforeSend: function(){
showLoadingGraphic();
},
complete: function(){
hideLoadingGraphic();
},
success: function(data){
$("#BreakingNews").html(data);
GetRelatedarticles();
}
});
function showLoadingGraphic() {
alert("show");
var showSpinner = $('#page-placeholder-wrapper #main-left').prepend('<div id="ajaxLoader"></div>');
return showSpinner;
}
function hideLoadingGraphic() {
alert("hide");
var hideSpinner = $('#ajaxLoader').remove();
return hideSpinner;
}
And the associated CSS for the spinner:
#page-placeholder-wrapper #main-left
{
position:relative;
}
#ajaxLoader
{
background:rgba(255,255,255,.7) url("../images/icon-ajax-loading.gif") no-repeat center center;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:9999;
}
To get you working try this:
background: url("../images/icon-ajax-loading.gif") no-repeat center center rgba(255,255,255,.7);
I don't know why the rgba has to be last!
[EDIT]
IE does not support rgba, therefore with it starting on background: it errors and the rest of the line isn't executed for the css
See: Browser Support for RGBa
JQuery actually fires events when it's doing ajax.
$(document).ajaxStart(function(){
$('#ajaxIndicator').show();
}).ajaxStop(function(){
$('#ajaxIndicator').hide();
});
This will save you a lot of time over manually doing it for each individual call.
You could have a DIV relative to the top of the document which you can show/hide which overlays everything else on the page. (I forget the exact CSS which makes it always be 200px from the top of the screen, etc) update: I think it's position:fixed, although I'm not sure how well this will work in IE.
<body>
<div id="ajaxIndicator" style="position:fixed; top:200px; text-align:center">
<img src="../indicator.gif" /> Loading ...
</div>
...
Might be problems with Z sorting of your DOM elements;
IE handles Z sorting of objects in a bit different way then other browsers. Try setting z-index on your wrapper element and it should help. Generally it's a best practice if you want to save you troubles with elements positioned with relatie or absolute positioning to always give their parent proper z-index;
Having the actual page to debug would make it easier.
For the sake of my sanity and getting this done today.
I have added the "ajaxLoader" element to the markup, hidden initially with CSS and then show/hide when AJAX starts/stops.
This works fine for all browsers.
Thanks to all for their input.