We Keep Coding

Colorbox positioning on top of another element

I've got quite an issue with positioning of colorbox. The methods described on official website http://www.jacklmoore.com/colorbox/ are not quite enough for my purpose. The thing is that I have button opening the colorbox and I need to position it "over the button" (button is 50px height, colorbox is something about 700px height so I need to center it over the button (something like 300px top of the button).
I have tried basic repositioning with jquery in onOpen and onLoad function in colorbox like:
onOpen:function() {
$('#colorbox').removeAttr('top');
$('#colorbox').css('top','200px');
},
It works but colorbox settings automatically overwrite those settings right after onOpen or onLoad and colorbox is positioned in center of the viewport again.
So I am basically calling for help, colorbox positioning settings like top, left etc. are simply not enough for positioning on top of the button element.
Thanks in advance!
Edit: full code below
$(".reserve_").live('click',function() {
var loadUrl = $(this).attr("href");
$.colorbox({
innerWidth:660,
innerHeight:720,
returnFocus: true,
overlayClose: true,
fixed: false,
iframe: true,
href: loadUrl,
opacity: 0.6,
reposition: true,
onOpen:function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onLoad: function() {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top','200px');//test
},
onClosed:function() {
}
});
return false;
});
EDIT 2: link on jsfiddle: http://jsfiddle.net/zS8J8/8/ (sorry about the messy code in CSS and HTML)

The jsfiddle was helpful, I was able to use the same code as you and get it working.
This was tested in firefox 20, chrome 26, IE 9 on Win 7. The "Open Colorbox" link isn't visible in IE using your HTML, but if you move your mouse in that area, you'll see the cursor change and if you click, Colorbox will open in the correct location.
Here's the HTML, I changed class="rezervuj" to id="rezervuj" because we're keying on a single element rather than a bunch of images:
<h3 style="margin-bottom: 300px;">TOP OF THE PAGE</h3>
<div class="unitKontejner">
<div style="float:right;">
<a id="rezervuj" href="http://www.imgur.com">
<div class="reserveIt">
<div class="reserveIt-content">
open colorbox »
</div>
</div>
</a>
</div>
</div>
Here's the script that you can put in the head:
<script>
$(document).ready(function(){
// I removed the options that were set to the default.
// The top and left can be left out or set to a default,
// I used them as a test to see the difference when the event hook is used.
$("#rezervuj").colorbox({
iframe:true,
innerWidth:660,
innerHeight:720,
opacity: 0.6,
top: 0,
left: 0
});
// Use the "cbox_complete" event hook.
// It allows the colorbox div to be positioned after it opens,
// but before the content is loaded.
$(document).bind('cbox_complete', function(){
// Grab the position of the button,
// colorbox can be positioned relative to it.
var pos = $(rezervuj).position();
//console.log(pos);
// Set the position of the colorbox div
// You can add to or subtract from the pos values
// Example: top: (pos.top + 20) + "px"
$("#colorbox").css({
position: "absolute",
top: pos.top + "px",
left: pos.left + "px"
}).show();
});
});
</script>

you can also try this.
$.colorbox({
width: "600px", height: "500px", inline: false, overlayClose: false, escKey: true, iframe: true,
onComplete: function () {
$('#colorbox').removeAttr('top');//test
$('#colorbox').css('top', '100px');//test
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'block');//test
},
onLoad: function () {
$('#colorbox').removeAttr('display');//test
$('#colorbox').css('display', 'none');//test
},
});

Jquery - How to disable the entire page

I have this ajax event
function save_response_with_ajax(t){
var form = $('#edit_'+t);
var div = $('#loading_'+t);
$.ajax({
url: form.attr("action"),
type: "POST",
data: form.serialize(),
cache: false,
beforeSend: function(){
form.hide();
div.show();
},
complete: function(){
div.hide();
form.show();
},
success: function (result) {
}
});
}
And everything works fine, but I want to add (if it's possible) the hability of turning the entire page (the content/body) into gray while before/complete ajax events, like if it were a modal (like this http://jqueryui.com/demos/dialog/#modal but without the dialog)
Is there a way of doing this?
Thanks in advance
Javier Q.

A way of doing this is having an overlay element which fills the entire page. If the overlay element has a semi-transparent background color, it grays out the page completely: http://jsfiddle.net/SQdP8/1/.
Give it a high z-index so that it's on top of all other elements. That way, it renders correctly, and it catches all events (and won't pass them through).
#overlay {
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}​

you can try
$("body").append('<div id="overlay" style="background-color:grey;position:absolute;top:0;left:0;height:100%;width:100%;z-index:999"></div>');
then just use
$("#overlay").remove();
to get rid of it.
quick & dirty.

Try appending an overlay during the "beforeSend" function:
$("body").prepend("<div class=\"overlay\"></div>");
$(".overlay").css({
"position": "absolute",
"width": $(document).width(),
"height": $(document).height(),
"z-index": 99999,
}).fadeTo(0, 0.8);

This is the complete solution which I am using:
Following are the sections:
CSS for overlay. "fixed" is used to cover whole page content, not just screen height and widths. You can use background color or gif
Attaches to "beforeSend" event of jQuery Ajax call. Creates the overlay on demand and shows it.
Upon completion of request, it removes the overlay from DOM
CSS:
.request-overlay {
z-index: 9999;
position: fixed; /*Important to cover the screen in case of scolling content*/
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
text-align: center;
background: rgba(200,200,200,0.5) url('../../Images/submit-ajax-loader.gif') no-repeat center; /*.gif file or just div with message etc. however you like*/
}
JavaScript:
$.ajax({
url: '/*your url*/',
beforeSend: function () {
$('body').append('<div id="requestOverlay" class="request-overlay"></div>'); /*Create overlay on demand*/
$("#requestOverlay").show();/*Show overlay*/
},
success: function (data) {
/*actions on success*/
},
error: function (jqXhr, textStatus, errorThrown) {
/*actions on error*/
complete: function () {
$("#requestOverlay").remove();/*Remove overlay*/
}
});

Use jQuery ajaxStart() to append a Div to your document. Set it to the size of your document with some form of semi-transparent document. Then remove it on ajaxStop().

var modal = $('<div>')
.dialog({ modal: true });
modal.dialog('widget').hide();
setTimeout(function() { modal.dialog('close'); }, 2000); // to close it
here is a demo: http://jsbin.com/avoyut/3/edit#javascript,html,live
don't forget to call modal.dialog('close'); to end it all!
this way you get the benefits of the actual dialog modal code, resizing, disabling, etc..
hope this helps -ck

You may want to give the user some indication that something is happening, too, not just a blank/gray screen. I would suggest some sort of loading gif, see this, for example.

Today I was looking for a solution which would work for all browsers of IE. I took the code of #pimvdb and #Ash Clarke along with his comment where he mentioned background-color: black; opacity: 0.8; may also work. For IE it will just be completely black. and came to a solution below:
$("#first-div").prepend("<div class=\"overlay-example\"></div>");
var height1 = $("#first-div").height();
var width1 = $("#first-div").width();
$(".overlay-example").css({
"background-color": "black",
"z-index": "9999999",
"position": "absolute",
"width": width1,
"height": height1,
"display": "none"
}).fadeTo(0, 0.0001);
Tested in IE8, IE9 above. Could not check for IE7. Will be glad to update my soulution in case you find it wrong. (it would help me also to update my solution :))
Thank you #pimvdb and #Ash Clarke
Demo

Jqueryui dialog "resizeable: false" not working?

Below is my code. When it opens the modal, it IS resizeable even though it's set to false. This is not expected. All other parameters work as expected (height, width, position, draggable, modal).
//MODAL IFRAME POPUP FOR EDITS/adds
$("#modalDiv").dialog({
modal: true,
autoOpen: false,
height: '400',
width: '400',
position: ['150','200'],
draggable: true,
resizeable: false,
title: ''
});
//catch a click on an item with the class "add" open modal div.
$('.add').live('click', function () {
var thing = $(this).attr('add')
url = 'add/' + thing + '.aspx?appid=' + $('.lblAppID').html();
$('#modalIFrame').attr('src', url);
$('#modalDiv').dialog('open');
return false;
});
However, if I call the following code from within the modal iframe, it makes it unresizeable (as expected).
window.parent.$("#modalDiv").dialog("option", "resizable", false);
This works, but preferably I'd like to know what I'm missing... I'm sure it's something stupid. Help?

It's resizable, not resizeable.

You're spelling the word two different ways :-)

nyroModal - how to configure the width and height of the modal box

I am trying to controll the width and height of the modal window, but I have no idea how to override the default settings.
I've been looking at the nmObject (http://nyromodal.nyrodev.com/), but my javascript knowledge is not that great and I have no idea what the correct way to implement this is.
Here is my attempt, but with a syntax error:
$.nmObj( sizes: { initW: 300, initH: 300 });
What am I doing wrong? :\
EDIT:
$(function() {
$('.nyroModal').nyroModal();
$.nmObj({sizes: { initW: 300, initH: 300 }});
});
No syntax errors atleast, but I don't think im using the function correctly

try:
$.nmObj({sizes: { initW: 300, initH: 300 }});
Hope it helps.

Looks like you're using nyroModal v2. For an iframe, you need to set the initial size in the CSS:
.nyroModalCont iframe {
width: 300px;
height: 300px;
}
There's a github issue for this, which is closed, so I think that's how it will work in this version.
Ivailo's answer applies to nyroModal v1, I believe.

Another way of doing it.
<script type="text/javascript">
$(document).ready(function() {
$.nyroModalSettings({
type: 'iframe',
height: 500,
width: 700,
resizable: true,
autoSizable: true,
titleFromIframe: true,
// modal: true,
// selIndicator: '#loading',
contentLoading: "" // use our own
});
$('a.nyroModalPhotos').nyroModal();
});
</script>

For this filter
.* Iframe filter
.* Before: filters.formFile
Locate in min.js the file is part of a string
load: function (nm) { nm.store.iframe = $('<iframe />').attr({ src: 'javascript:\'\';', id: 'nyromodal-iframe-' + (new Date().getTime()), frameborder: '0' })
and add
.css({ height: nm.sizes.h })
the result should be
load: function (nm) { nm.store.iframe = $('<iframe />').attr({ src: 'javascript:\'\';', id: 'nyromodal-iframe-' + (new Date().getTime()), frameborder: '0' }).css({ height: nm.sizes.h })

Galleria + Colorbox working in IE, not in others

I thought I had this worked out, but unfortunately it does not work in FF or Chrome. I have a list of images that I would like displayed as a slideshow with carousel on my page. When the user clicks on the larger image I would like it to open a full size image in a lightbox. Here is the code that works in IE:
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/galleria.js" type="text/javascript"></script>
<script src="Scripts/galleria.classic.js" type="text/javascript"></script>
<script src="Scripts/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[rel=test]').colorbox();
$('#exteriorSlideShow_gallery').galleria({
max_scale_ratio: 1,
image_crop: false,
height: 210,
transition: 'fade',
extend: function() {
this.bind(Galleria.LOADFINISH, function(e) {
$(e.imageTarget).click(this.proxy(function(e) {
e.preventDefault();
$('a[rel=test]').eq(this.active).click();
}));
});
}
});
});
</script>
In the above, "this.active" represents the index of the image in which the carousel is currently on. Since it is in the same order the links below are displayed in, it corresponds to the correct link I would like to have clicked.
<div id="exteriorSlideShow_gallery">
<img src='/Images/THUMB1.gif' />
<img src='/Images/THUMB2.gif' />
<img src='/Images/THUMB3.gif' />
</div>
Anyone know why this wouldn't work in anything but IE?
EDIT
For the time being I have put in a work around. If the browser is IE I call the code as above else I use $.colorbox({ 'href': urloflargeimage }). This doesn't allow grouping of the images for anything but IE, but at least I have a lightbox up.

Galleria strips most of your container content after grabbing necessary data, but it leaves it hidden in IE because of a loading bug. That is why your hack works in IE but not elsewhere.
I'm not sure how colorbox works, but it looks like it cannot take a normal array of URLs and assign it as a group of images and then call each box manually onclick. But you might be able to do something like this (hack):
var box = $('a[rel=test]').clone().colorbox(); // save the colorbox array
$('#exteriorSlideShow_gallery').galleria({
extend: function() {
this.bind(Galleria.LOADFINISH, function(e) {
var index = this.active;
$(e.imageTarget).bind('click', { active: this.active }, function(ev) {
box.eq(ev.data.active).click();
});
});
}
});

I have solved this. You have to put the links outside the galleria container, separate from the images, then click them when an image is clicked. Like so:
$(document).ready(function(){
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$('a[rel="lightbox"]').colorbox();
var targ;
$("#gallery").galleria({
autoplay: 6000,
transitionSpeed: 1000,
transitionInitial: 'fade',
width: 958,
height: 443,
imageCrop: 'width',
minScaleRatio: 1,
extend: function() {
this.bind(Galleria.IMAGE, function(e) {
$(e.imageTarget).css('cursor','pointer');
$(e.imageTarget).click(this.proxy(function() {
targ = $(e.imageTarget).attr('src');
$('a[href="'+targ+'"]').click();
}));
});
}
});
});
and the HTML looks like:
<div id="gallery">
<img src="images/jqIm4.jpg" />
<img src="images/jqIm5.jpg" />
</div>
<div id="source">
</div>

The script tag is missing a quote character. Is it like that in your actual source? If so, that could seriously upset Firefox.
Specifically
<script type="text/javascript>
should be
<script type="text/javascript">