I have a main page. This page has an iframe. The iframe has a page loaded in it that has a table and an iframe.
1) I want to display the main page iframe (which I am able to do by detecting the pressing of the 'Enter' key which executes a function that grabs the main page's iframe element and generates a full screen view of it -- however the background color is black and I can't read text. I've tried every CSS solution to change the background color. I tried everything I could find on here regarding that problem. Please help me find a solution that will work on all browsers.
2) Aside from that, I want to generate a full screen view of the main page's iframe document's table and generate a full screen view of the main page's iframe document's iframe. I am unable to generate a full screen view of the main page's iframe document's table. I am unable to generate a full screen view of the main page's iframe document's iframe. Please let me know how this can be done. I can successfully store the main page's iframe document in a variable using the contentWindow lingo -- but then using the variable to access its contents using the get Element by id nomenclature does not work. Please help me find a way to generate a full screen view of the main page's iframe document elements.
Please help with the two issues above.
My main page iframe id is "hello". The main page's iframe's document's table id is "jukebox". The main page's iframe's document's iframe id is "albumcover".
Not that this is of any actual debugging use other than letting you know that all elements discussed have id's and the get Element by id code still did not work or was able to be displayed by the function displaying a full screen view of elements...except when using the get Element by id code with the function displaying a full screen view of elements together when trying to generate a full screen display of the main page's iframe...it just helps someone who may help with creating a meaningful example. It'll help others finding this web page follow the issue's solution and if they have a similar problem then that information may allow them to follow the solution better and solve their own problem.
Thanks guys!
Main page:
function toggleFullScreen(x, y) {
var videoElement;
var q;
var w;
if (x == 1)
{
if (y == 0)
{
q = document.getElementById("hello");
w = q.contentWindow.document;
alert("videoElement = documenttable;");
}
else if (y == 1)
{
alert("videoElement = documentalbumiframe;");
}
else if (y == 2)
{
alert("videoElement = queuetextarea;");
}
else if (y == 3)
{
alert("videoElement = songlisttextarea;");
}
}
else
{
if (y == 0)
{
videoElement = document.getElementById("hello");
}
}
if ( (x == 1) || ( (x == 0) && (y == 0) ) )
{
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
}
<iframe src="menu.html" height=549 width=100% frameborder=0 name = "hello" id = "hello" style ="overflow-x:scroll"></iframe>
iFrame's document page:
<table id="jukebox" border = "0">
...
<iframe id="albumcover" height=432 width=450 frameborder=0 name = "cake" style =""></></iframe>
SO36580875
Problems generating a full screen view of HTML elements
This demo uses the Full Screen API:
The external script file fullview.js is responsible for toggle button state (full screen mode/normal view mode), and determining what state the viewport should be changing to.
Blue Button: Full Screen Toggle for index.html targets <body>
Yellow Button: Full Screen Toggle for jukebox.html targets the iframe#jBox
Fuschia Button: Full Screen Toggle for cover.html targets the iframe#cBox
In order to test the full screen feature, you must test it out of the IDE (please see illustration. )
README.md
PLUNKER
fullView.js
// fullView.js
function fullView(event) {
var btn = this;
var ele = this.id;
var tgt = document.querySelector('.tgt' + ele);
var state = btn.classList;
if (state == 'off') {
enterFS(tgt);
btn.classList.remove('off');
btn.classList.add('on');
} else {
exitFS();
btn.classList.remove('on');
btn.classList.add('off');
}
}
function enterFS(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFS() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// Usage
/*
Requirements:
A trigger element
ex. <button>, <a>, etc.
A target element
ex. <body>, <section>, <div>, etc.
Assign an id to the trigger.
ex. <button id='btn1'></button>
Assign a specific class to the target.
There is a naming pattern:
'.tgt'+{{id of trigger}}
ex. .tgtbtn1
<body class='tgtbtn1'>
Add an eventListener() to trigger.
var btn1 = document.getElementById('btn1');
Use fullView as the eventHandler
btn1.addEventListener('click', fullView, false);
*/
Related
i want to do visual testing with cypress-image-diff. So far, so good. I can take and compare screenshots of the complete page, but never of the element itself, as they are in an iFrame. With help of cypress-iframe I can check e.g. name, stype etc of the element. But screenshots are always taken from another area. Pls help
verifyLogoShown() {
cy.log("Verify if diconium logo is visible");
cy.frameLoaded(this.IFRAME)
// after the frame has loaded, we can use "cy.iframe()"
// to retrieve it
cy.iframe().find(this.TEST_OBJECT).should('have.text', 'Styled Button - primary') // works. I can test all kinds of CSS or other values from the button TEST_OBJECT
cy.wait(1000);
cy.getIframeBody(this.IFRAME).find(this.TEST_OBJECT).should('have.text', "Styled Button - primary")
cy.getIframeBody(this.IFRAME).type("a")
cy.compareSnapshot('button (replaceable)');
//doesn't take screenshot of that part I expect (e.g. iFrame box or button itself, instead of the menu part on the left)
}
My commands.js
Cypress.Commands.add('getIframeDocument', (iFrameSelector) => {
return cy
.get(iFrameSelector)
.its('0.contentDocument');
})
Cypress.Commands.add('getIframeBodyOtherWay', (iFrameSelector) => {
return cy
.getIframeDocument(iFrameSelector).should('exist').its('body').should('not.be.undefined')
.then(cy.wrap);
})
Cypress.Commands.add("getIframeBody", (framename) => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get(framename)
.its('0.contentDocument.body').should('not.be.empty')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap);
});
I'm trying to make a fullpage component in Angular :
I want each sections take a 100% height of my screen, and when I scroll in a section (up or down) it goes to the next / previous section. I declared this function to do that, and it works :
#HostListener('wheel', ['$event'])
onScroll(event: WheelEvent) {
if (event.deltaY < 0) {
this.slidePrev();
} else {
this.slideNext();
}
}
Now, I want to update a little to slide to the previous slide only if the scrollbar is on the top, or slide to the next only if the scrollbar is to the bottom. I Used JQuery to do that, this way :
#HostListener('mousewheel', ['$event'])
onScroll(event: WheelEvent) {
if (this.isSliding) {
event.preventDefault();
return;
}
let $section = $(event.target).closest(".section");
//$section.css("opacity", "0.99");
//setTimeout(() => {
// $section.css("opacity", "1");
//}, 100);
if (event.deltaY < 0) {
if ($section.scrollTop() == 0) this.slidePrev();
} else {
if ($section.scrollTop() == $section.prop("scrollHeight") - $section.height()) this.slideNext();
}
}
It works the first time, but if I slide down to the next slide, when I want to sroll to move my scrollbar, it doesn't move.
I noticed that after the website trigger an update (example : css :hover event that update style) the scrollbar move again. So, if I uncomment my 4 commented lines, it works again because the style is updated.
Can someone tell me why ? And is there a better way to fix that issue ?
EDIT :
in slideNext() and slidePrev() I'm using $().animate("scrollTop", ...) function, and it's the function that breaks my scroll
I'm working on my WordPress website with Visual Composer.
I need to include a pageable container but it would be great if it can be like a slideshow.
This is my pageable container
Thanks in advance,
Regards :)
Based upon the current version of WP Bakery Page Builder the below works for me:
To build it I created a row with 3 columns, with the pageable container in the middle column and the left and right arrow images in the columns on either side.
Both arrow images and the pageable container were given IDs. In my example the IDs of the arrows were #arrow_prev and #arrow_next respectively. You can give your pageable container any unique ID.
(function ($) {
$(document).ready(function(){
$( '#arrow_prev' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'prev');
});
$( '#arrow_next' ).click( function( e ) {
var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
move_pageable_container(pageable_container,'next');
});
function move_pageable_container(pageable_container,direction){
// Make a list of the panel IDs
var panel_ids = $(pageable_container.find(".vc_tta-panel"))
.map(function() { return this.id; }) // convert to set of IDs
.get();
// Find position of the active panel in list
var current_active_pos = panel_ids.indexOf($(pageable_container).find(".vc_tta-panel.vc_active").attr('id'));
var new_pos = 0;
switch(direction) {
case 'prev':
if (current_active_pos > 0){
new_pos = current_active_pos-1;
}else{
new_pos = panel_ids.length-1;
}
break;
case 'next':
if (current_active_pos < panel_ids.length-1){
new_pos = current_active_pos+1;
}else{
new_pos = 0;
}
break;
}
// Clear active panels
$(pageable_container.find(".vc_tta-panel")).each(function(i,a) {
$(this).removeClass("vc_active");
});
var new_active_panel = $(pageable_container).find('#'+ panel_ids[new_pos]);
$(new_active_panel).addClass("vc_animating");
$(new_active_panel).addClass("vc_active");
setTimeout(
function(){
$(new_active_panel).removeClass("vc_animating");
}, 350);
}
}
);
})(jQuery);
If you want a pseudo fading-in effect then you can use this additional CSS in your style sheet:
#id_of_pageable_container .vc_tta-panel.vc_animating {
opacity: 0!important;
}
Where #id_of_pageable_container is the ID that you gave your pageable container
A simpler solution with vanilla js only:
The idea is to find the target page button and press it programmatically, so that there is no need to mimic the plugin's animations as in Chaz's solution.
Add js (via Raw JS widget / other means):
function prevSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i - 1 < 0) return;
slides[i - 1].firstChild.click();
return;
}
}
}
function nextSlide () {
const slides = document.getElementsByClassName('vc_pagination-item');
for (let i = 0; i < slides.length; i++) {
if (slides[i].className.includes('vc_active')) {
if (i + 1 >= slides.length) return;
slides[i + 1].firstChild.click();
return;
}
}
}
Add button widgets and set href to call js:
For left arrow button,
javascript:prevSlide();
For right arrow button,
javascript:nextSlide();
Hope this helps.
I prefer to use the Post Grid widget for that. Keep in mind that the pageable container is not totally responsive, it doesn't react to swipe touching, but the Post Grid does.
Post Grid is really powerful, although it also has its caveouts. You can create your content with posts and pages, or a custom post type and then filter what you want to show in your slider from the widget options.
In "advanced mode" you can use the Grid Builder to create your own template and control the output.
The only problems that I've found with this method is to set a variable height in sliders and that sometimes it is slow loading content and is not possible to do a lazyload.
I'm trying to generate large png screenshots of web pages using PhantomJS, which is built on webkit. I have the application generating screenshots just fine (using their raster.js example.) But, I want the text to be larger (rather than 12-16px) - I don't care about the images becoming grainy. I thought that I could simply scale/zoom the webpage doing something like:
document.documentElement.style.webkitTransform = "scale(2.0)";
But that causes the content of the page to escape the viewport. You can see this if you evaluate that line of code in Chrome. Is it possible to scale a whole web page (duplicating "Ctrl +" functionality of the browser) in JavaScript/Phantom.js?
My current phantom.js script looks like:
var page = new WebPage(),
address, output, size;
if (phantom.args.length < 2 || phantom.args.length > 3) {
console.log('Usage: rasterize.js URL filename');
phantom.exit();
} else {
address = phantom.args[0];
output = phantom.args[1];
page.viewportSize = { width: 1280, height: 1024 };
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
page.evaluate(function () {
document.body.style.webkitTransform = "scale(2.0)";
});
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
}
});
}
Try
page.zoomFactor=2.0;
The webkitTransform CSS property is not going to do what you want, with or without setting the origin. For one thing, it does not change the dimensions of elements (ie, no relayout occurs, the element(s) are zoomed within their current bounding boxes).
Update
You forgot to set the CSS transform-origin property, so your content expands half up and half down (the default is 50% 50%) and the upper part escapes.
So set it to 0% 0% to get the transform happen only down and right:
document.body.style.webkitTransformOrigin = "0% 0%";
You will also have to set the body width to 50% to avoid it ending twice as large as your viewport:
document.body.style.width = "50%";
Old answer - disregard
This resolves only vertical alignment
Ok, the scaling goes up and down, but the viewport extends only down. The fix fortunately is easy: move your content down of half its height.
Use this as your doubling function and you'll be fine:
page.evaluate(function() {
var h = $('body').height();
$('body').css('position', 'relative');
$('body').css('top', h/2 + 'px');
$('body').css('-webkit-transform', 'scale(2.0)');
});
Be aware anyway that getBoundingClientRect() and page.clipRect behaves weirdly when dealing with this transform.
I have few pages that I show from my main page inside iframe.
I got a background image in the main page, when I click the button to change the page inside the frame the frame background color is becoming white somtimes until the page is visible.
I added background-color:transpert to the pages themselves and to the main page CSS.
I checked the site with FireFox and IE and it look fine (the background of the frame doesn't change) but with Chrome it somtimes rendering fine like I wanted it to be and other times the iframe background goes White.
Can i do anything that will fix that?
As this is browser behavior I doubt it can be really "fixed".
One workaround is to hide the frame while it's loading (only for Chrome) - here is the code:
var isChrome = (navigator.userAgent.indexOf("Chrome") >= 0);
function LoadFrame(url) {
var oFrame = document.getElementById("myframe");
if (isChrome) {
oFrame.style.visibility = "hidden";
oFrame.onload = function() {
oFrame.style.visibility = "visible";
};
}
oFrame.src = url;
}
Live test case. (Reloading same frame there but the concept is the same)
I used very similar attitude. This approach works only in case the page inside your iFrame is under your controll.
The change is that the page inside iframe finds the iframe in parent window and makes it visible again:
<iframe style="visibility: hidden;" id="iframe_id" src="my_page.html" />
// inside my_page.html:
window.onload = function() {
// make sure the parent iframe is visible
if (window.parent)
{
var nodeIframe = window.parent.document.getElementById(window.name);
if (nodeIframe)
{
nodeIframe.style.visibility = "visible";
}
}
};