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/
Related
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[]
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'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.
I'm trying to develop a very simple mobile web app to show a list of websites via iFrame.
The app starts always in protrait mode and when it switches to landscape mode, the width of the iFrame is not updated, so the iframes does not fill the device width when rotating in landscape mode. I added the script in HTML to force the app to reload the iframe in case of orientation change, hoping it would have solved the issue, but without success.
This is my HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<script>
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
window.location.reload()
},
}
onload = addNumber;
</script>
<iframe id="wc1" src="http://<url>" seamless></iframe>
<iframe id="wc2" src="http://<url>" seamless></iframe>
<iframe id="wc3" src="http://<url>" seamless></iframe>
<iframe id="wc4" src="http://<url>" seamless></iframe>
</body>
This is my CSS code
html, body {
width:100%;
height:100%;
padding:0;
border:0;
margin:0;
}
iframe {
width:100%;
height:100%;
padding: (0, 0, 0, 0);
}
I'm a mobile web development newbie and I swore that I tried every single solution I found on SO and other sites to make my code working, but without success.
you have set javascript as :
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
window.location.reload()
},/*<= what is this bracket closing, and why extra comma???*/
}
onload = addNumber;
remove evrything and just keep this :
window.addEventListener("orientationchange", function() {
window.location.reload();
}, false);
also, for pure html way to check orient, add this in you head :
<meta http-equiv="refresh" content="1">
check this thread too => Detect change in orientation using javascript
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();
});
});