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";
}
}
};
Related
I am new to programming. I wanted to create a smooth scrolling effect when I click on an href on my page, to do so I have used the scroll behavior:smooth in css. I've applied the rule like this
html {
scroll-behavior: smooth;
}
Otherwise it works great, but there's a consequence that I do not wish is there, on page load it automatically smooth scrolls to the identifier that's applied onto the href. I want to avoid this, how can I do that?
Thank you.
try this:
<script>
window.onload = function() {
var node = document.createElement('style');
node.innerHTML = "html {scroll-behavior: smooth;}";
document.body.appendChild(node);
};
</script>
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);
*/
OK, so my problem is that I have a parallax website for a client and they would like a product description to fade-in when they scroll-down the parallax site. The problem I think I have is because the site is effectively one long page, the scripting is getting confused and fading the div in from "opacity:0" when the page is loaded. I have put a long fade-in on the div to understand what is happening and I have also made a rubbish box without proper formatting to test it. I have uploaded a temporary copy of the site (i'm working offline) to show what is happening.
http://ethicalincubator.com/parallax/parallax30.07/index_kmd.php#!images
Thank you for your help everyone!!! :-)
CSS
/* Hide any element */
.hideme {
Opacity:0;
}
HTML
<div
class="hideme fadein-on-view"
style="opacity:0;width:200px;height:80px;background-color:white;">Fade
In</div>
SCRIPT
<script>
// Scroller script for Fade-In when "div" is on screen
$(document).ready(function()
{
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.fadein-on-view').each( function(i){
var
bottom_of_object = $(this).position().top + $(this).outerHeight();
var
bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if(
bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},5000);
}
});
});
})
</script>
To check the bottom of the window, instead of using .scrollTop, try window.pageYOffset.
Plus I think you're making the JS work too hard - I would try to calculate the bottom_of_object outside the .scroll() function so that it's not calculating the position every time the user is scrolling.
And for simple fade in/out, I would just do a display:none, .fadeIn().
How do i load the original image so that when the user brings the cursor onto top of the image, it should change automatically without showing white background then loading the original pic? Is there any code that loads the original image wheh my webpage loads? Please let me know. my code is :
#middlefoto{
background-image:url(../images/middleblack.jpg);
margin-left:1px;
height:158px;
width:333px;
}
#middlefoto:hover{
background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat;
}
Use sprites with positioning.
Find more information at W3 Schools
The reason you are seeing the blank background for an instant is because the hover image has not yet been loaded from the server. To avoid this, preload the images. There are several ways to do this but the concept is the same: force the browser to load the image before it is actually needed. Here's a simple way to do this using JavaScript:
function preloadImages(sources)
{
var img = new Image();
for (var i = 0; i < sources.length; i++) {
img.src = sources[i];
}
}
preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);
Include the image in an off-screen element (push it off screen with CSS). This will cause the browser to download the image so it should be ready for the rollover. You could clean up the offscreen images after page load.
<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />
(don't really use inline styles)
Then, if you're using jquery
$(document).ready(function(){ $('.preloader').remove(); });
to clean up.
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.