I have an iframe that re-sizes its own content. The First time the iframe loades, the content re-sizes fine, but content not changing on subsequent resizing or page scrolling.
I have tried onresize,onmove...
<script type="text/javascript">
function autoIframe(frameId) {
try {
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
if (innerDoc == null) {
// Google Chrome
frame.height = document.all[frameId].clientHeight + document.all[frameId].offsetHeight + document.all[frameId].offsetTop;
}
else {
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = (innerDoc.body.scrollHeight +200) + 'px';
//document.getElementById("autosizeframe").style.height=(innerDoc.body.scrollHeight+18)+'px';
//alert(frame.style.height+'-'+innerDoc.body.scrollHeight)
}
}
catch (err) {
document.getElementById("autosizeframe").style.height = '1600px';
document.getElementById("autosizeframe").style.width = '1000px';
//alert('Err: ' + err.message);
window.status = err.message;
}
}
I have made an iframe auto resizer script too, years ago. Maybe it is helpful for you:
http://www.professorweb.de/javascript-ajax/iframe-hohe-an-dessen-inhalt-automatisch-anpassen-v2.html
Related
I'm upgrading an application from Here Maps Javascript API v2 to v3.
In v2, the infobubbles re-position in the viewport so they stay on the screen (e.g. if it's on the left of the viewport, then the infobubble re-positions to the right so it doesn't appear off screen)
This behaviour no longer exists in v3 of the Here Maps JS API. The infobubble stays put all the time. I can't find any settings for this - is it possible to get this old behaviour back?
Cheers
I couldn't find any solution to this so rolled my own code to make it happen.
Here it is in case it helps anyone out ...
$(document).ready(function () {
setInterval(function () {
if ($('.H_ib_body').is(':visible')) {
var top = parseInt($('.H_ib_top').css('transform').split(',')[5]);
var left = parseInt($('.H_ib_top').css('transform').split(',')[4]);
var height = $('.H_ib_body').height();
if ($('.H_ib_body').attr('data-isBottom') != '1') { // on top
if (height - top > 0) {
{
$('.H_ib_body').css('bottom', 'auto').css('top', '0em').attr('data-isBottom', '1');
$('.H_ib_tail').css('transform', 'rotate(180deg)');
}
}
} else { // on bottom
var totalHeight = $('#map canvas').height();
if ((top + height) > totalHeight) {
$('.H_ib_body').css('bottom', '.5em').css('top', 'auto').attr('data-isBottom', '0');
$('.H_ib_tail').css('transform', '');
}
}
if ($('.H_ib_body').attr('data-isRight') != '1') { // on left
if (left - $('.H_ib_body').width() < -30) {
$('.H_ib_body').css('right', 'auto').css('left', '-20px').attr('data-isRight', '1');
}
} else { // on right
var totalWidth = $('#map canvas').width();
if (left + $('.H_ib_body').width() > totalWidth) {
$('.H_ib_body').css('right', '0px').css('left', 'auto').attr('data-isRight', '0');
}
}
}
}, 20);
});
I have jqgrid on asp .NET web page.
When page is loaded and grid loads its data, after it receives json, before data is shown on grid, I get error message from IE:
Internet Explorer 11.0.9600.17728
It wants me to add about:blank to Trusted Sites.
When i click "close" rows appear.
Row`s html is as follows:
<a onclick="
OpenWindow('/13_1/Workflow.TasksWebPresUnit/TaskDetails/Index/?
taskDn=WFL///70000/.321360&isModal=True&
returnUrl=/13_1/Workflow.TasksWebPresUnit&
userId=5&
componentsToSet=test*testc', 'Details', '90%', '0', false, 'ยก',true);"
href="#">P01.07 Verification
</a>
No matter what I put in onclick, can be "blahblah", same with href, can be "foobar",
<a onclick="
abcd"
href="xyz">P01.07 Verification
</a>
i get that error window.
But, when I construct row's html that it not contain "onclick=sth", then i do not get this error.
Is there any way to stop IE from warning user or maybe I`m doing somethiong wrong?
Any help / clarification appreciated.
p.s. If i add about:blank to trusted sites, the problem is gone, but i don`t understand fully if this is secure solution.
Update 1: script
function OpenWindow(url, title, width, height, checkValue, multiSepar, showCloseButton) {
var progressIndImg = GLOBAL_CSS_PATH + '/Technology/modal/images/waiting.gif';
if (checkValue) {
var queryVals = parseQueryString(url);
var relatedComp = queryVals['componentToFill'];
var relatedVal = document.getElementById(relatedComp);
if (relatedVal.value != null && relatedVal.value != '') {
var win = dhtmlmodal.open('ModalBox', 'iframe', url, title, 'width=' + width + ', height=' + height + ',center=1,resize=1,scrolling=1', '', progressIndImg, showCloseButton);
win.onclose = function () {
return true;
}
}
} else {
var win = dhtmlmodal.open('ModalBox', 'iframe', url, title, 'width=' + width + ', height=' + height + ',center=1,resize=1,scrolling=1', '', progressIndImg, showCloseButton);
win.onclose = function () {
return true;
}
}
// } else {
// setInterval(checkForMessages, 200);
// }
// var ie7 = (navigator.appVersion.indexOf('MSIE 7.') == -1) ? false : true;
// if (ie7 != true) {
var onmessage = function (e) {
try {
var objects = JSON.parse(e.data);
if (window.addEventListener) {
window.removeEventListener('message', onmessage, false);
}
else if (window.attachEvent) {
window.detachEvent('onmessage', onmessage);
}
if (objects['methodName'] != null)
window[objects['methodName']](objects);
else
FillData(objects, true, multiSepar);
var close = objects['close'];
if (close == 'true') {
win.hide();
win.close();
}
}
catch (err) {
if (console)
console.error(err);
}
};
if (window.addEventListener) {
window.addEventListener('message', onmessage, false);
} else if (window.attachEvent) {
window.attachEvent('onmessage', onmessage);
}
I would like to switch to an iframe using pure phantom.js code
Here is my first attempt
var page = new WebPage();
var url = 'http://www.theurltofectch'
page.open(url, function (status) {
if ('success' !== status) {
console.log("Error");
} else {
page.switchToFrame("thenameoftheiframe");
console.log(page.content);
phantom.exit();
}
});
It produces only the source code of the main page. Any idea ?
Notice that the iframe domain is different from the main page domain.
Please give this a try I believe it may be an async issues meaning the iframe is not present when trying to access it. I received the below snippet from another post.
var page = require('webpage').create(),
testindex = 0,
loadInProgress = false;
page.onConsoleMessage = function(msg) {
console.log(msg);
};
page.onLoadStarted = function() {
loadInProgress = true;
console.log("load started");
};
page.onLoadFinished = function() {
loadInProgress = false;
console.log("load finished");
};
/*
page.onNavigationRequested = function(url, type, willNavigate, main) {
console.log('Trying to navigate to: ' + url);
console.log('Caused by: ' + type);
console.log('Will actually navigate: ' + willNavigate);
console.log('Sent from the page\'s main frame: ' + main);
};
*/
/*
The steps array represents a finite set of steps in order to perform the unit test
*/
var steps = [
function() {
//Load Login Page
page.open("https://www.yourpage.com");
},
function() {
//access your iframe here
page.evaluate(function() {
});
},
function() {
//any other step you want
page.evaluate(function() {
});
},
function() {
// Output content of page to stdout after form has been submitted
page.evaluate(function() {
//console.log(document.querySelectorAll('html')[0].outerHTML);
});
//render a test image to see if login passed
page.render('test.png');
}
];
interval = setInterval(function() {
if (!loadInProgress && typeof steps[testindex] === "function") {
console.log("step " + (testindex + 1));
steps[testindex]();
testindex++;
}
if (typeof steps[testindex] !== "function") {
console.log("test complete!");
phantom.exit();
}
}, 50);
replace
console.log(page.content);
with
console.log(page.frameContent);
Should return the contents of the frame phantomjs switched to.
If the iframe is from another domain you may need to add the --web-security=no option like this:
phantomjs --web-security=no myscript.js
As an additional information, what xMythicx said could be true. Some iframes are rendered via Javascript after page finishes loading. If the iframe contents are empty, then you will need to wait for all resources to finish loading, before you start grabbing stuff from the page. But this is another issue, if you need an answer on this, I suggest you ask a new question about it, and I will answer there.
Had the same problem for iframes and
phantomjs --web-security=no
helped in my case :]
I notice this problem in Google Chrome 27
The style:
.hide-submit-text
{
background: url("/sites/default/files/images/throbber2.gif") no-repeat scroll right center transparent;
height: 25px;
line-height: 25px;
width: 98px;
}
JS Code (from Hide Submit module to Drupal 7 - https://drupal.org/project/hide_submit)
// Bind to form submit.
$('form', context).submit(function (e) {
if (! $form.hasClass('hideSubmitButton-processed')) {
return;
}
var settings = Drupal.settings.hide_submit;
var $inp;
if (!e.isPropagationStopped()) {
if (settings.hide_submit_method == 'disable') {
$('input.form-submit', $form).attr('disabled', 'disabled').each(function (i) {
var $button = $(this);
if (settings.hide_submit_css) {
$button.addClass(settings.hide_submit_css);
}
if (settings.hide_submit_abtext) {
$button.val($button.val() + ' ' + settings.hide_submit_abtext);
}
$inp = $button;
});
if ($inp && settings.hide_submit_atext) {
$inp.after('<span class="hide-submit-text">' + Drupal.checkPlain(settings.hide_submit_atext) + '</span>');
}
}
else {
var pdiv = '<div class="hide-submit-text' + (settings.hide_submit_hide_css ? ' ' + Drupal.checkPlain(settings.hide_submit_hide_css) + '"' : '') + '>' + Drupal.checkPlain(settings.hide_submit_hide_text) + '</div>';
if (settings.hide_submit_hide_fx) {
$('input.form-submit', $form).addClass(settings.hide_submit_css).fadeOut(100).eq(0).after(pdiv);
$('input.form-submit', $form).next().fadeIn(100);
}
else {
$('input.form-submit', $form).addClass(settings.hide_submit_css).hide().eq(0).after(pdiv);
}
}
// Add a timeout to rerset the buttons (if needed).
if (settings.hide_submit_reset_time) {
timeoutId = window.setTimeout(function() {
hideSubmitResetButtons(null, $form);
}, settings.hide_submit_reset_time);
}
}
return true;
});
});
Background appears only after I changed any value chrome css editor, e.g height. When I come back to previous value, background still appears, but never works without live changes.
.hide-submit-text element is showed after JS event (click)
Background is animated gif.
I'm building a responsive site that uses javascript to create a select nav for the primary navigation menu when the viewport is less than 800px wide. This select nav works as planned.
Now, I'm trying to add a SECOND responsive select nav to a couple of pages (pages that obviously include the primary navigation menu). I've duplicated the script (the script used to enable the primary navigation menu to become a select nav), and tried renaming a couple variables to get the secondary navigation menu to act responsively (similar to the primary navigation menu). The responsive select nav appears for the secondary navigation menu when the viewport goes down below 800px, however, when you select a secondary page from this menu, nothing happens. The user isn't taken to a new secondary page.
Can you help me troubleshoot this?
I tried to set up a jfiddle http://jsfiddle.net/R3AD3/
Here is the script for the primary navigation menu:
function selectnav() {
var select = document.createElement('select');
var first = document.createElement('option');
first.innerHTML = 'Main Navigation';
first.setAttribute('selected', 'selected');
select.setAttribute('id', 'mobile');
select.appendChild(first);
var nav = document.getElementById('nav');
var loadLinks = function(element, hyphen, level) {
var e = element;
var children = e.children;
for(var i = 0; i < e.children.length; ++i) {
var currentLink = children[i];
switch(currentLink.nodeName) {
case 'A':
var option = document.createElement('option');
option.innerHTML = (level++ < 1 ? '' : hyphen) + currentLink.innerHTML;
option.value = currentLink.href;
select.appendChild(option);
break;
default:
if(currentLink.nodeName === 'UL') {
(level < 2) || (hyphen += hyphen);
}
loadLinks(currentLink, hyphen, level);
break;
}
}
}
loadLinks(nav, '- ', 0);
nav.appendChild(select);
var mobile = document.getElementById('mobile');
if(mobile.addEventListener) {
mobile.addEventListener('change', function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
});
} else if(mobile.attachEvent) {
mobile.attachEvent('onchange', function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
});
} else {
mobile.onchange = function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
}
}
}
Here is the script that I duplicated... I then renamed a couple variables:
function selectnav_EP() {
var select = document.createElement('select');
var first = document.createElement('option');
first.innerHTML = 'Electric Playground Nav';
first.setAttribute('selected', 'selected');
select.setAttribute('id', 'mobile');
select.appendChild(first);
var nav = document.getElementById('nav_EP');
var loadLinks = function(element, hyphen, level) {
var e = element;
var children = e.children;
for(var i = 0; i < e.children.length; ++i) {
var currentLink = children[i];
switch(currentLink.nodeName) {
case 'A':
var option = document.createElement('option');
option.innerHTML = (level++ < 1 ? '' : hyphen) + currentLink.innerHTML;
option.value = currentLink.href;
select.appendChild(option);
break;
default:
if(currentLink.nodeName === 'UL') {
(level < 2) || (hyphen += hyphen);
}
loadLinks(currentLink, hyphen, level);
break;
}
}
}
loadLinks(nav, '- ', 0);
nav.appendChild(select);
var mobile = document.getElementById('mobile');
if(mobile.addEventListener) {
mobile.addEventListener('change', function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
});
} else if(mobile.attachEvent) {
mobile.attachEvent('onchange', function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
});
} else {
mobile.onchange = function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
}
}
}
In the footer, I call upon both of these scripts.
Here is the exact page to my website
http://brianlueck.com/wordpress/electric-playground/
Narrow your browser window below 800px to see the responsive select navs appear... you'll notice that the primary navigation menu works fine, however, the secondary navigation menu doesn't function properly because it doesn't link off to the pages it should link to.
Can anyone help?