Requirements:
1) Create dynamic iFrame.
2) Hide the main <my-app> element.
3) In the onClose() click event: Show <my-app> element, Remove iFrame.
PROBLEM: I can successfully create a dynamic iFrame in my application and hide the main element.
However, the problem is that within the onClose() click event I cannot get access to those elements on the document.body.
Here's my javascript code:
#1: The html var with head/body, Cancel button, and the onClose() func:
const html = `
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="assets/dependencies/print/print.css" rel="stylesheet"/>
<script>
function showHeader(ele) {
...
}
function showFooter(ele) {
...
}
// *** TRY TO CLOSE IFRAME AND SHOW <APP-ROOT> ELEM. ***
function onClose(ele) {
let frameToRemove = window.document.getElementById("iframe");
console.log(frameToRemove); // returns zero elements of HTMLCollection[]
var harmonyRootTag = window.document.getElementsByTagName('app-root');
harmonyRootTag[0].setAttribute('style', 'display:block;');
document.body.removeChild(iframetest);
}
// *******************
</script>
</head>
<body>
<section id="print-menu" class="no-print">
<div>
<button onclick="window.print()" class="primary-button">Print</button>
<button onclick="onClose()" class="secondary-button">Cancel</button>
</div>
</section>
<section id="articles">
..
</section>
</body>
`;
#2: iFrame creation (working fine, meaning it HIDES app-root and creates iFrame)
// Hide root element
const appRootTag = document.getElementsByTagName('app-root');
if (appRootTag && appRootTag.length > 0) {
appRootTag[0].setAttribute('style', 'display:none;');
}
// Create iFrame, set style, write html markup to it.
const iframetest = document.createElement('iframe');
document.body.appendChild(iframetest);
iframetest.setAttribute('style', 'height:100%;width:100%;');
iframetest.contentWindow.document.open();
iframetest.contentWindow.document.write(html);
iframetest.contentWindow.document.close();
After I load the iFrame, clicking the Cancel buttons triggers onClose() , but it basically does nothing:
window.document.getElementById("iframe"); // RETURN ZERO ELEMEMTS OF HTMLCollection[]
Related
Is there a way to add styles in css or sass based on the post content?
Im using
https://github.com/jessegavin/jQuery-Chord-Transposer
Something is preventing the code I just added from running.
var textProp = 'textContent' in document ? 'textContent' : 'innerText';
// directly converting the found 'a' elements into an Array,
// then iterating over that array with Array.prototype.forEach():
[].slice.call(document.querySelectorAll('span.c'), 0).forEach(function(aEl) {
// if the text of the aEl Node contains the text 'link1':
if (aEl[textProp].indexOf('Am') > -1) {
// we update its style:
aEl.style.fontSize = '2em';
aEl.className = 'c foo';
}
});
I would recommend using a thin layer of JS to add a CSS class to a parent element, which the css can check for.
For example, here is some code that makes the text color red if a post has a .category element with 'memes' in it
e.g.
<!DOCTYPE html>
<html>
<head>
<style>
.post.memes {
color: 'red'
}
</style>
</head>
<body>
<article class="post">
<p class="category">memes</p>
<p class="content">Lorem ipsum</p>
</article>
<script>
const postElement = document.querySelector('.post');
if (postElement) {
const category = postElement.querySelector('.category');
if (category && category.innerHTML == 'memes') {
postElement.classList.add('memes');
}
}
</script>
</body>
</html>
I know this question has already been asked but mostly for Fancybox 2 (and not 3) and the only answer I did found didn't help me though.
My web page has two frames, one hosts the Fancybox Gallery. So far, when I click on images, they only open in the corresponding frame and Id like the images to fill the whole screen. Following the answer here (Open fancybox 3 into iframe parent) I made the following code but I didn't went right.
Did I forgot something ? Should I put some code in the main page of my project, the one that holds the two iframes ? Something else I should do ?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="jquery.fancybox.min.css" rel="stylesheet">
<script src="jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
parent.jQuery.fancybox.getInstance().update();
});
$.fancybox.open([
{
src : 'IMG_3301.JPG',
opts : {
caption : 'First caption',
thumb : 'IMG_3301 - copie.JPG'
}
},
{
src : 'IMG_3302.JPG',
opts : {
caption : 'Second caption',
thumb : 'IMG_3302 - copie.JPG'
}
}
], {
loop : false
});
</script>
</head>
<body>
<a data-fancybox="gallery" href="IMG_3301.JPG">
<img src="IMG_3301 - copie.JPG">
</a>
<a data-fancybox="gallery" href="IMG_3302.JPG">
<img src="IMG_3302 - copie.JPG">
</a>
</body>
</html>
By using parent.jQuery.fancybox you can access fancybox within the parent iframe, and, to start fancybox in parent iframe, simply combine your two snippets, like parent.jQuery.fancybox.open(..)
Example:
var $links = $(".imglist a");
$links.click(function () {
parent.jQuery.fancybox.open($links, {
// Your custom options
}, $links.index(this));
return false;
});
Demo - http://fancyapps.com/tmp/embed/
I'm using the Polymer/web-component-tester to run automated tests of my components.
I've run into an issue where a component test will pass if run in isolation, but fail when run using a file glob - for example:
FAILS: wct components/**/test
SUCCEEDS: wct components/btn-component/test
After a fair bit of digging, I found the reason is the change in browser behaviour: in both cases the launched browser has two iFrames side-by-side, with the right one showing the test progress, and the left showing the component. The globbed test run results in a significantly narrower left (component) iFrame.
When using polymer-gestures to simulate mouse clicks, the narrower iFrame causes issues because it can often render a horizontal scrollbar and change a component's clickability.
The following is an example of a component & test that fails as described. It renders a Cancel button a few hundred pixels to the right.
Component
<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="btn-component" attributes="name">
<template>
<style>
:host {
display: block;
width: 400px;
}
</style>
<div layout horizontal>
<span flex></span>
<div id="cancel_button" on-tap="{{cancel}}">Cancel</div>
</div>
</template>
<script>
Polymer({
ready: function() {
console.log("btn-component component ready!");
},
cancel: function(event, detail, sender) {
console.log("Cancel Btn!", event, detail, sender);
this.fire('cancel_btn', {});
}
});
</script>
</polymer-element>
Test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>btn-component Tests</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<script src="../../../bower_components/polymer-gestures/test/js/fake.js"></script>
<link href="../btn-component.html" rel="import">
</head>
<body>
<btn-component id="component"></btn-component>
<script>
function runAfterEvent(eventName, element, callback) {
var listener = function(event) {
element.removeEventListener(eventName, listener)
callback(event.detail);
};
element.addEventListener(eventName, listener);
}
suite('<btn-component>', function() {
var c = document.getElementById('component');
var fake = new Fake();
test('hitting cancel fires cancel event', function(done) {
runAfterEvent('cancel_btn', c, function(event) {
assert.ok(1, "the cancel_btn event should be fired");
done();
});
var cancelBtn = document.querySelectorAll("btn-component /deep/ #cancel_button")[0];
console.log(cancelBtn);
setTimeout(function() {
fake.downOnNode(cancelBtn);
fake.upOnNode(cancelBtn);
}, 1000);
});
});
</script>
The fail happens trying to click the button.
I guess there's a variety of ways to approach resolving this - including in my own tests (e.g. checking the viewport size vs the element position and scrolling right before trying to simulate a click), but starts to get quite fiddly/fragile. A reasonable option might be to add a config to wct that specifies a minimum viewport size on the component iFrame.
Perhaps I'm missing some available configuration that could help here. Is there a recommended way to handle this scenario?
A simple solution is pretty obvious. I added the following to my test's index.html
<style>
#subsuites {
width: 600px !important;
}
</style>
The css used by the wct tool sets the width at 50% and nests frames when using file globs - resulting in progressive narrowing.
Using TideSDK, how can I have a window with no Windows style border, and keep it draggable ?
I try two things :
First config my tiapp.xml like this
<width>3000</width>
<max-width>3000</max-width>
<min-width>0</min-width>
<height>1280</height>
<max-height>1280</max-height>
<min-height>0</min-height>
<fullscreen>false</fullscreen>
<resizable>true</resizable>
<transparency >1.0</transparency >
<transparent-background>true</transparent-background>
And contains my application in a div like this :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#draggable { width: 150px; height: 150px; left: 10px}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
It's cool cause I have my full css customizable window draggable, BUT if I want it's work in dual screen I have to set the maximum width to ~4000 and it's look limited to 3000 max. (even if I set a greater value inside the tiapp.xml file ). Notice, if I'm not setting a huge widht and height, when my application (div) is near from the limit, a scroll bar appear in my desktop.
I trying a quick other thing to add the tag
<chrome>false</chrome>
It's look a better method but, I loose the draggable control on my windows. And I don't know how can drag the tidesdk windows with javascript. May be there is solution to create my own "chrome" ?
Gold mine for this question are the answers posted on this tidesdk google groups thread: https://groups.google.com/forum/#!topic/tidesdk/jW664E2lPlc
First, you need to provide your own way to let the user move the window around—your own version of something like a Windows 8 Metro style top-is-draggable-where-the-title-bar-used-to-be.
For the sake of example (not worrying about styling), e.g.
<div id="windowTitleBar">
<button id="windowMinimize" class="windowMaxMinButtons">[_]</button>
<button id="windowClose" class="windowMaxMinButtons">[X]</button>
</div>
Second, in your javascript you provide your own drag handling, taking advantage of the Ti.UI API. Here's a sample from a proof of concept I did.
(Note in the following, the minimize function has a little hack (?) to make the window work after being restored. If you find a better way, please add your fix so everyone can benefit!)
$(document).ready(function() {
/*
* WINDOW HIDE
*/
$("#windowMinimize").click(function()
{
event.preventDefault();
// From http://developer.appcelerator.com/question/131596/minimize-unminimize-under-windows-7
// One user found if we follow this magical sequence (max-unmax-min), the
// window will be responsive after restore. Confirmed on my Win 7
Ti.UI.getMainWindow().maximize();
Ti.UI.getMainWindow().unmaximize();
Ti.UI.getMainWindow().minimize();
});
$(".maximize").click(function() {
event.preventDefault();
if(!Ti.UI.getMainWindow().isMaximized())
{
Ti.UI.getMainWindow().maximize();
} else {
Ti.UI.getMainWindow().unmaximize();
}
});
/*
* WINDOW CLOSE
*/
$("#windowClose").click(function()
{
event.preventDefault();
Ti.UI.getMainWindow().close();
//system.window.target.hide();
Ti.App.exit();
});
/*
* WINDOW "Title Bar"
*/
$("#windowTitleBar").mousedown ( function ( event )
{
event.preventDefault();
if(!Ti.UI.getMainWindow().isMaximized())
{
var diffX = event.pageX;
var diffY = event.pageY;
$(document).mousemove ( function ( event )
{
event.preventDefault();
if (event.screenY - diffY < screen.height-100)
Ti.UI.getMainWindow().moveTo(event.screenX - diffX, event.screenY - diffY);
});
}
});
$(document).mouseup ( function ( event )
{
event.preventDefault();
$(document).unbind('mousemove');
});
$("#windowTitleBar").dblclick ( function ( event )
{
event.preventDefault();
if (!Ti.UI.getMainWindow().isMaximized())
Ti.UI.getMainWindow().maximize();
else
Ti.UI.getMainWindow().unmaximize();
});
});
In my application i used repeater control.For that i have loaded item at a time.But my client wants to display first 6 items then if the user come to end of the page it will display a image named loading image and after a short time display another 6 items and again the user came to end of page it will display loading image at the end of screen and load another 6 items like that and so on. ex:Facebook loading
It sounds like you need to use continuous scrolling, to load images as the user scrolls. Here are a couple of articles which demonstrate how to use continuous scrolling:
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=371
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
Here's an example of an image gallery that uses continuous scrolling:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" >
div { border: solid 1px black; height:200px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
var pixelsBetweenImages = 200;
var imagesArray = {}
var imagesArray = new Array(); // regular array (add an optional integer argument to control array's size)
imagesArray[0] = "";
imagesArray[1] = "";
imagesArray[2] = "";
imagesArray[3] = "/images/ImageThree.gif";
imagesArray[4] = "/images/ImageFour.gif";
imagesArray[5] = "/images/ImageFive.gif";
imagesArray[6] = "/images/ImageSix.gif";
imagesArray[7] = "/images/ImageSeven.gif";
imagesArray[8] = "/images/ImageEight.gif";
$(window).scroll(function() {
var scrollpos = $(window).scrollTop() + $(window).height();
var imageIndex = Math.floor(scrollpos / pixelsBetweenImages);
if (imagesArray[imageIndex] != "") {
var div = $("#" + imageIndex);
div.html(imagesArray[imageIndex]);
imagesArray[imageIndex] = "";
}
});
</script>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div id="3">3 </div>
<div id="4">4 </div>
<div id="5">5 </div>
<div id="6">6 </div>
<div id="7">7 </div>
<div id="8">8 </div>
</body>
</html>
Source: Is there ability to load page images partially when scroll down to it or is it just effect?
As for displaying a loading image, just use an animated gif as the default image, and delay loading of the actual image for effect, using setTimeout or something along those lines.