overlay div pop up not working in google chrome

Okay, here is the issue and solution

Problem: i found a java script across internet for div pop up using overlay, working fine with all browsers except chrome. In chrome it would execute to create a popup but its position was top left of the screen and was viewable less than 50%.

Solutions: here is the solution.

if (!window.ie6) {
this.overlay.setStyles({
position: ‘fixed’,
top: 0,
left: 0
});
this.window.setStyles({
position: ‘fixed’,
top: ‘50%’,
left: ‘50%’
});
} else if (navigator.userAgent.indexOf(‘Chrome’) !=1) {

this.overlay.setStyles({
position: ‘absolute’,
top: ‘0%’,
left: ‘0%’
//,marginTop: “expression(document.documentElement.scrollTop + ‘px’)”
});

this.window.setStyles({
position: ‘absolute’,
top: ‘50%’,
left: ‘50%’
//,marginTop: “(expression(0 – parseInt(this.offsetHeight / 2) + document.documentElement.scrollTop + ‘px’)”
});

}else {
this.overlay.style.setExpression(‘marginTop’, ‘document.documentElement.scrollTop + “px”‘);
this.window.style.setExpression(‘marginTop’, ‘0 – parseInt(this.offsetHeight / 2) + document.documentElement.scrollTop + “px”‘);

this.overlay.setStyles({
position: ‘absolute’,
top: ‘0%’,
left: ‘0%’
//,marginTop: “expression(document.documentElement.scrollTop + ‘px’)”
});

this.window.setStyles({
position: ‘absolute’,
top: ‘0%’,
left: ‘0%’
//,marginTop: “(expression(0 – parseInt(this.offsetHeight / 2) + document.documentElement.scrollTop + ‘px’)”
});
}

Advertisements

modalbox javascript onclose event

Today after along period writing a post. I tried a new javascript library called modalbox js. Was working very good, but i had to run other javascript when the box was closed. Found some help at http://code.google.com/p/modalbox/wiki/MethodsReference but didn’t found the exact syntax.

After some trial and error finally succeeded, so thought to post on to the blog. Here is the syntax for javascript as well as for symfony (in case you are working with symfony)

Syntax for symfony:

<?php echo m_link_to(‘link_name’,
‘url’,
array(‘title’ => ‘title’),
array(‘width’ => 630, ‘height’ => 180, ‘afterHide’ => ‘afterhidealert‘)); ?>

here afterhidealert is the javascript function that will be called on the closing of the modalbox popup.

Syntax for javascript:

<a href=”url” onclick=”Modalbox.show(this.href, {afterHide:afterhidealert, height:180, title:this.title, width:630}); return false;” title=”title”>link_name</a>

here afterhidealert is the javascript function that will be called on the closing of the modalbox popup.

Thanks,

samsami2u

http://www.avidindiainc.com

Ajax.InPlaceEditor

The in-place “text edit” testing allows for “on-the-fly” textfields. See the documentation on Ajax.InPlaceEditor and Ajax.InPlaceCollectionEditor

Syntax

new Ajax.InPlaceEditor( element, url, {options});

Options

Name since default Description
okControl V?? “button” What type of ok button to use in edit mode, or none at all (button, link, false)
cancelControl V?? “link” What type of cancel button to use in edit mode, or none at all (button, link, false)
okText V1.5 “ok” The text of the submit button that submits the changed value to the server
cancelText V1.5 “cancel” The text of the link that cancels editing
savingText V1.5 “Saving…” The text shown while the text is sent to the server
clickToEditText V1.6 “Click to edit” The text shown during mouseover the editable text
formId V1.5 id of the element to edit plus ‘InPlaceForm’ The id given to the element
externalControl V1.5 null ID of an element that acts as an external control used to enter edit mode. The external control will be hidden when entering edit mode and shown again when leaving edit mode.
externalControlOnly V1.5 false Whether or not to disable onclick editing so that only an external control can activate editable mode
rows V1.5 1 The row height of the input field (anything greater than 1 uses a multiline textarea for input)
onComplete V1.6 “function(transport, element) {new Effect.Highlight(element, {startcolor: this.options.highlightcolor});}” Code run if update successful with server
onFailure V1.6 “function(transport) {alert(“Error communicating with the server: ” + transport.responseText.stripTags());}” Code run if update failed with server
cols V1.5 none The number of columns the text area should span (works for both single line or multi line)
size V1.5 none Synonym for ‘cols’ when using single-line (rows=1) input
highlightcolor ? Ajax.InPlaceEditor.defaultHighlightColor The highlight color
highlightendcolor ? ”#FFFFFF” The color which the highlight fades to
savingClassName V1.5 “inplaceeditor-saving” CSS class added to the element while displaying “Saving…” (removed when server responds)
formClassName V1.5 “inplaceeditor-form” CSS class used for the in place edit form
hoverClassName ? ? ?
loadTextURL V1.5 null Will cause the text to be loaded from the server (useful if your text is actually textile and formatted on the server)
loadingText V1.5 “Loading…” If the loadText URL option is specified then this text is displayed while the text is being loaded from the server
callback V1.5 function(form) {Form.serialize(form)} A function that will get executed just before the request is sent to the server, should return the parameters to be sent in the URL. Will get two parameters, the entire form and the value of the text control.
submitOnBlur V1.6 “false” This option if true will submit the in_place_edit form when the input tag loses focus.
ajaxOptions V1.5 {} Options specified to all AJAX calls (loading and saving text), these options are passed through to the prototype AJAX classes.

The server side component gets the new value as the parameter ‘value’ (POST method), and should send the new value as the body of the response.


for more information please check this url: http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor

prototype.js / jQuery.js conflict and resolution

when you use jQuery and prototype javascript frameworks togather on the same page, it creates conflicts.

jQuery has provided a resolution to this conflict. The resolution goes as below:

Overriding the $-function:

1) you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();

     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>

 </html>

2) Additionally, there's another option. If you want to make sure that
jQuery won't conflict with another library - but you want the benefit
of a short name, you could do something like this:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     var $j = jQuery.noConflict();

     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

For more information on the above topic please refer to http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Ajax.Updater syntax

new Ajax.Updater(window.opener.document.getElementById(‘facilityBookingFrm’), saveBookingUrl, {asynchronous:true, evalScripts:true, method:’POST’, onComplete:function(request, json){ setCalendar(‘\”+objDateS+\”‘);  setTargetDate(‘event2’, ‘\”+objDateS+\”‘ ); timeSlotsArray = new Array(); timeSlotsConflictArray = new Array();  thirdClick = false; clearBoxes(0); eval(‘\”+evalToScript+\”‘); Calendar.setup({ inputField : ‘start_date’, ifFormat : ‘%b, %d %Y’, button : ‘f_trigger_c’, align : ‘Tl’, position : positionArr,  singleClick : true }); Calendar.setup({ inputField : ‘end_date’, ifFormat : ‘%b, %d %Y’, button : ‘e_trigger_c’, align : ‘Tl’, position : positionEArr,  singleClick : true }); }, onLoading:function(request, json){}, parameters: { startDate: fab_starttime, selectedSlot: selectedSlot, repeatWeekly: fab_repeat_weekly, repeatWeekday: fab_repeat_weekday, repeat: fab_repeat, reminder_tim: fab_sendreminder_type, reminder_mins: fab_sendreminder_beforemins, fac_id: fac_id, endDate: fab_endtime, selectedConflictSlot: selectedConSlot, reConflicts: reConflicts, currdateStr: currdateStr, otherHVar: otherHVar, conflictResol: ‘1’ } });

The syntax goes as follows:

new Ajax.Updater ( ‘elementToBeUpdated’, ‘urlInRequest’, { asynchronous:true, evalScripts:true /* true or false*/, method: ‘POST’ /*’POSTorGET’*/, onComplete:function(request, json){ /*Action after completion of request */ } , onLoading:function(request, json){ /*Action while loading */ }, parameters: { /* post parameters to be passed*/ } } )