I am displaying a popup (child windows) with some choices. Once user submits them in child windows, i am passing those values to parent window and submitting the form. the values are getting submitted to backend without any issues. however the parent window is not getting refreshed upon submitting the form.
function commonPopup(popup, width, height, e, top, left) {
myWindow=window.open('about:blank', popup, 'directories=0,scrollbars=yes, resizable=yes, location=0, menubar=0, status=0, toolbar=0, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);
myWindow.document.write('<HEAD>');
myWindow.document.write(' <TITLE>Waiting for results</TITLE>');
myWindow.document.write('</HEAD>');
}
function post_lock_unlock_value(reason,comment) {
document.getElementById('lockReason').value = reason;
document.getElementById('lockComment').value = comment;
document.getElementById('triggerActionId').value='';
document.getElementById('admRepairLock').submit();
}
<s:form name="lock" id="lock" action="my.action">
<s:submit value="Lock Repair Profile" id="lockIndicator" name="lockIndicator"
onclick="commonPopup('lockProfile',450, 200, event,'lockRepairProfile');" cssStyle="width:200px" theme="simple"/>
</s:form>
in child page
function postback() {
window.opener.post_lock_unlock_value("data","data");
self.close();
}
Before closing child window refresh parent like this (add this before your self.close()):
if ( window.opener && !window.opener.closed ) {
window.opener.location.reload();
window.opener.focus();
}
try this:
var newPartyId = $("#desc_textarea").val();
window.opener.$("#desc_textarea").val(newPartyId);
Related
In Android layout it has a RelativeLayout which contains a LinearLayout (ignored some other views in the layout).
< ...> //other layout
<NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
android:fillViewport="false">
<RelativeLayout
android:id="#+id/view_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="0dp">
<LinearLayout
android:id="#+id/list_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
/>
</RelativeLayout>
</NestedScrollView>
<...>//other layout
the list_container could have a few views, one is webView.
What want to do is in the html loaded in the webview, there is a div element, so the android side could locate this div and float a view on top of that div element (the <div> is treat as a location marker).
making it simpler, assuming there is only one webview in the list_container, so the origin of the webview view is same as the relativeLayout's left/top.
and there is some floating View that is child of the RelativeLayout (sibling of the list_container), so the idea is set the floatingView's left/top margin to place the floatingView over of the <div> element in the html.
here use the webview.evaluateJavascript to run a javascript, and get the element's location back through the callback(got from js's document.getElementById(elm.id).getBoundingClientRect(),
after that, just apply the left/top to the floating view's margin.
val strJs = "(function() {\n" +
"var elementId = 'element_div_id';\n" +
"try {\n" +
" var elm = document.getElementById(elementId);\n" +
" var rect = document.getElementById(elm.id).getBoundingClientRect();\n" +
" return {\n" +
" 'elementId': elm.id,\n" +
" 'left': Math.floor(rect.left),\n" +
" 'top': Math.floor(rect.top)\n" +
" };\n" +
"} catch (e) {}\n" +
"return '';})();"
webview.evaluateJavascript(strJs) { data ->
if (!data.isNullOrBlank() && data.isNotEmpty()) {
try {
val obj: JSONObject = JSONObject(data)
val floatViewId = obj.optString("elementId")
val left = obj.optInt("left")
val top = obj.optInt("top")
val theFloatingView = lookupFloatingViewById(floatViewId)
var lp = (theFloatingView.layoutParams)
if (lp != null) {
if (lp.leftMargin != left || lp.topMargin != top) {
lp.setMargins(left, top, 0, 0)
theFloatingView.layoutParams = lp
}
}
} catch (ex: Throwable) {
}
}
}
But the result is that the floating view is not placed at the returned html <div> element's left/top, it is off (on different device the off could be bigger or small) over different part of the html content.
Isn't it the webview and the html hosted in the webview both should have same origin (which actually same as the relativeLayout's lefty/top)? Why can't we use the left/top got from html dom's getBoundingClientRect() directly for the view's margin (for positioning the view)?
found a answer which solved similar problem.
seems the Android view are on different coordinate than the html window. (could someone confirm or anyone has different opinion?)
the location return from getBoundingClientRect() needs to remapped to android's coordinate.
final int px = (int) (x * ctx.getResources().getDisplayMetrics().density);
final int py = (int) (y * ctx.getResources().getDisplayMetrics().density);
I have issue with rendering inside component. I would like to emit data from another component and send to another component, data was emitted, but the problem is when I create the element with Renderer2, sometimes it's working, but sometimes not. Probably it's a problem with rendering style element in a component?
toolbar.state.service.ts
My service method for emitting data
private globalStyles = new BehaviorSubject<string>('');
formDesign(data: any) {
this.globalStyles.next(data);
}
aside.component.ts
Here I emit data from Reactive Form control and send to another component.
// Height
this.formGlobal.controls['height'].valueChanges
.pipe(debounceTime(500))
.pipe(distinctUntilChanged())
.pipe(takeUntil(this.destroy$))
.subscribe(height => {
this.formGlobal.controls['height'].setValue(height);
this.formGlobal.updateValueAndValidity();
this.showDataCriteria = {
width: this.formGlobal.controls['width'].value + 'px',
height: height + 'px'
};
this.toolbarStatus.formDesign(this.showDataCriteria);
});
builder.component.ts
Here I'm getting data from aside.component.ts and it received!
/**
* Generate CSS
*/
generateCss() {
let basicStyles = ' ';
let newStyle: HTMLElement;
let style: HTMLElement = this.document.getElementById('custom-class');
style
? (newStyle = style)
: (newStyle = this.renderer.createElement('style'));
this.renderer.setAttribute(newStyle, 'id', 'custom-class');
let completeStyleFields = '';
this.customStyle.global
? (basicStyles += `#${this.projectInfo.id} {${this.customStyle.global}}`)
: (basicStyles += '');
console.log(basicStyles);
this.customStyle.sections.forEach(element => {
completeStyleFields += `#${element.id} {${element.textProps}}`;
});
basicStyles += completeStyleFields;
const text = (this.document.textContent = basicStyles);
newStyle.innerText = text;
this.renderer.appendChild(this.dndComponent.nativeElement, newStyle);
}
The Main problem is after style element was created, and I'm seeing the element in the DOM, styles not accepting! Sometimes accepting, and sometimes not. What should I do? How manipulate reload page probably to inject component and styles element?
Short UPD:
After all, I'm seeing #4152ae54-8a9d-49d5-a33d-62dfbbd35890 {height:600px; width:812px; }
But styles not accepted to the elements!
CSS can't render if the first numeric letter (#4152ae54-8a9d-49d5-a33d-62dfbbd35890). That’s because even though HTML5 is quite happy for an ID to start with a number, CSS is not. CSS simply doesn’t allow selectors to begin with a number. The relevant part of the specification states.
I want to Scroll down in my Ui5 List automaticly when new Items are added to my JSON-Model.In my List growing and growingScrollToLoad are set "true".
To scroll down automatically I implemented something like this:
setTimeout(function() {
var Scrolldown = sap.ui.getCore().byId("MasterItem");
var ul = Scrolldown.$().find('ul');
var ul_id = ul.attr('id');
ul.find('li:nth-child(' + (rowCount - 1) + ')').focus();
ul.find('li:nth-child(' + (rowCount - 1) + ')').blur();
});
But since I've activated growing this doesn't work anymore.
Do you have any suggestions ?
I've written a shortcode and its functioning like it should. Now the hard part:
I would like to show the user a preview already in the tinyMCE editor. Loading CSS in the editor is not a problem for me, but i would love to know if it is possible to already process the shortcode within TinyMCE.
Thanks!
Let the code talk:
I'll put a code to add a visual icon for highlight content word(s) shortcode, and you can then implement any other shortcode you want with the same logic,
class spot_shortcodes {
function spot_shortcodes()
{
add_action('init', array(&$this, 'init'));
}
function init(){
// Enable shortcodes in text widgets
add_filter( 'widget_text', 'do_shortcode' );
// Fix for large posts, http://core.trac.wordpress.org/ticket/8553
#ini_set( 'pcre.backtrack_limit', 500000 );
// init process for button control
add_filter( 'tiny_mce_version', 'my_refresh_mce');
// Add only in Rich Editor mode
if ( get_user_option('rich_editing') == 'true') {
add_filter('mce_buttons_3', array(&$this, 'register_highlight_button'));
}
}
// Add your button plugin js code to tinyMCE
// codex: wp_register_script( $handle, $src, $deps, $ver, $in_footer );
wp_register_script( 'effects-highlight', SPOT_SHORTCODES_URL . '/js/jquery.effects.highlight.js', false ,SPOT_SHORTCODES_URL, true );
function add_youtube_button() {
// Don't bother doing this stuff if the current user lacks permissions
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return;
// Add only in Rich Editor mode
if ( get_user_option('rich_editing') == 'true') {
add_filter("mce_external_plugins", array(&$this, "add_youtube_tinymce_plugin"));
add_filter('mce_buttons', array(&$this, 'register_highlight_button'));
}
}
// function to register you button to tinyMCE dashboard
function register_highlight_button($buttons) {
array_push($buttons, "|", 'highlight_button');
return $buttons;
}
function add_youtube_tinymce_plugin($plugin_array) {
// your icon image(highlight.png) which will be displayed in the tinyMCE dashboard
$plugin_array['highlight'] = SPOT_TINYMCE_URL . '/icons-lib-custom.js';
return $plugin_array;
}
} // class end
// Finally make an object from your button
$spot_shortcodes = new spot_shortcodes();
Our js code for the highlight button option
make an dot js file put the followin code in it and put it in the tinyMCE plugin directory
// dont forget to change the paths
tinymce.create('tinymce.plugins.highlight', {
// creates control instances based on the control's id.
// our button's id is "highlight_button"
createControl : function(id, controlManageradel) {
if (id == 'highlight_button') {
// creates the button
var button = controlManageradel.createButton('highlight', {
title : 'Add a Hightlight Text', // title of the button
image :spotShortcodes.plugin_folder +"/tinymce/images/highlight.png", // path to the button's image
onclick : function() {
// triggers the thickhighlight
var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
W = W - 80;
H = H - 84;
tb_show( 'Insert text box shortcode', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=highlight-form' );
}
});
return button;
}
return null;
}
});
// registers the plugin. DON'T MISS THIS STEP!!!
tinymce.PluginManager.add('highlight', tinymce.plugins.highlight);
// executes this when the DOM is ready
jQuery(function(){
// creates a form to be displayed everytime the button is clicked
// you should achieve this using AJAX instead of direct html code like this
var form = jQuery('<div id="highlight-form"><table id="highlight-table" class="form-table" style="text-align: left">\
\
\
<tr>\
<th><label class="title" for="highlight-bg">Highlight color</label></th>\
<td><select name="bg" id="highlight-bg">\
<option value="#f02d33">Red</option>\
<option value="#b6bbbd">Grey</option>\
<option value="#3e3c3c">Darkgrey</option>\
<option value="#99cc33">Lightgreen</option>\
<option value="#6c8c2d">Darkgreen</option>\
<option value="#0f5ac6">Blue</option>\
<option value="#3cbcf7">Cyan</option>\
<option value="#9219f8">Purple</option>\
<option value="#fcc016">Yellow</option>\
<option value="#f65e0e">Orange</option>\
</select><br />\
<div class="info"><small>Select box type.</small></div></td>\
</tr>\
<tr>\
<th><label class="title" for="highlight-contet">Conent</label></th>\
<td><textarea rows="7"\ cols="45"name="content" id="highlight-content">hightlight text</textarea>\
<br />\
<div><small>this text displayed in box.</small></div></td>\
</tr>\
</table>\
<p class="submit">\
<input type="button" id="highlight-submit" class="button-primary" value="Insert shortcode" name="submit" style=" margin: 10px 150px 50px; float:left;"/>\
</p>\
</div>');
var table = form.find('table');
form.appendTo('body').hide();
// handles the click event of the submit button
form.find('#highlight-submit').click(function(){
// defines the options and their default values
// again, this is not the most elegant way to do this
// but well, this gets the job done nonetheless
var options = {
'bg' : '#f02d33',
'content' : 'hightlight text',
};
var shortcode = '[highlight ';
for( var index in options) {
var value = table.find('#highlight-' + index).val();
// attaches the attribute to the shortcode only if it's different from the default value
if ( value !== options[index] & index !== 'content')
shortcode += ' ' + index + '="' + value + '"';
}
shortcode += ']'+ value + '[/highlight]'
// inserts the shortcode into the active editor
tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
// closes Thickhighlight
tb_remove();
});
});
I hope this help, give me you feedback if you want any more explanation, thanks.
OK so I have a iframe canvas app with its height set to "Settable" with the facebook javascrip sdk calls to FB.Canvas.setSize(); and FB.Canvas.setAutoGrow();. These are working perfectly, as the iframe gets set to a certain pixel height based on its content.
The problem is that when I make a call to Fancybox, it positions itself based on this height. I know that's exactly what its supposed to do as the fancybox jQuery returns the viewport by:
(line 673 of latest version of jquery.fancybox-1.3.4.js):
_get_viewport = function() {
return [
$(window).width() - (currentOpts.margin * 2),
$(window).height() - (currentOpts.margin * 2),
$(document).scrollTop() + currentOpts.margin
];
},
But the problem is the iframe will, for a lot of viewers, be longer than their browser window. So the Fancybox centers itself in the iframe and ends up only partly visible to the majority of viewers. (i.e. iframe height is 1058px and users browser is say only 650px).
Is there a way to have fancybox just calculate the physical browser height? Or do I need to change some settings in my Facebook canvas app to make it work?
I like how the only scrollbar is the one on Facebook (the parent, if you will).
All suggestions GREATLY appreciated!
For fancybox 2 try:
find:
_start: function(index) {
and replace with:
_start: function(index) {
if ((window.parent != window) && FB && FB.Canvas) {
FB.Canvas.getPageInfo(
function(info) {
window.canvasInfo = info;
F._start_orig(index);
}
);
} else {
F._start_orig(index);
}
},
_start_orig: function (index) {
Then in function getViewport replace return rez; with:
if (window.canvasInfo) {
rez.h = window.canvasInfo.clientHeight;
rez.x = window.canvasInfo.scrollLeft;
rez.y = window.canvasInfo.scrollTop - window.canvasInfo.offsetTop;
}
return rez;
and finally in _getPosition function replace line:
} else if (!current.locked) {
with:
} else if (!current.locked || window.canvasInfo) {
As facebook js api provides page info, then we could use it, so
find
_start = function() {
replace with
_start = function() {
if ((window.parent != window) && FB && FB.Canvas) {
FB.Canvas.getPageInfo(
function(info) {
window.canvasInfo = info;
_start_orig();
}
);
} else {
_start_orig();
}
},
_start_orig = function() {
and also modify _get_viewport function
_get_viewport = function() {
if (window.canvasInfo) {
console.log(window.canvasInfo);
return [
$(window).width() - (currentOpts.margin * 2),
window.canvasInfo.clientHeight - (currentOpts.margin * 2),
$(document).scrollLeft() + currentOpts.margin,
window.canvasInfo.scrollTop - window.canvasInfo.offsetTop + currentOpts.margin
];
} else {
return [
$(window).width() - (currentOpts.margin * 2),
$(window).height() - (currentOpts.margin * 2),
$(document).scrollLeft() + currentOpts.margin,
$(document).scrollTop() + currentOpts.margin
];
}
},
I had the same problem, i used 'centerOnScroll' :true, and now it works fine...
Had the same problem. Thankfully fancybox is accessable through CSS. My solution was to overwrite fancybox's positioning in my CSS file:
#fancybox-wrap {
top: 20px !important;
}
This code places the fancybox always 20px from top of the iframe. Use a different size if you like. The !important sets this positioning even though fancybox sets the position dynamically at runtime.
Here's one way to do it by positioning the Fancybox relative to the position of another element, in my case an Uploadify queue complete div that displays a view link after the user uploads an image.
Have a style block with a set ID like so:
<style id="style-block">
body { background-color: #e7ebf2; overflow: hidden; }
</style>
Then the link to open the Fancybox calls a function with the image name, width, and height to set the content and sizes. The important part is the positioning. By getting the position of the queue complete div, generating a new class declaration (fancy-position), appending it to the style block BEFORE the fancybox loads (!important in class will override positioning from fancybox), then adding the new class using the wrapCSS parameter in the fancybox options, it positions the fancybox exactly where I want it.
function viewImage(image, width, height) {
var complete_pos = $('#image_queue_complete').position();
var css_code = '.fancy-position { top: ' + complete_pos.top.toString() + 'px !important; }';
$('#style-block').append(css_code);
var img_src = '<img src="images/' + image + '" width="' + width.toString() + '" height="' + height.toString() + '" />';
$.fancybox({
content: img_src,
type: 'inline',
autoCenter: false,
wrapCSS: 'fancy-position'
});
}