Featherlight.js - how to update properties on already open featherlight iframe - javascript

I am opening a new featherlight iframe like this:
$.featherlight({
iframe:href,
iframeWidth:$(window).width(),
iframeHeight:$(window).height(),
openSpeed:0,
beforeClose:myBeforeCloseCallback
});
How can I later update the properties of the open featherlight window (such as beforeClose) and load a new URL? I'm guessing I start with $.featherlight.current();, but what next?

That would be a good feature to add. There's no such feature right now though.
You could do $.featherlight.current().setContent($('<b>example</b>')), for example.
Here's how we do it in the gallery
Simplest code that would work would look like: (not tested)
var fl = $.featherlight.current();
fl.iframe = "new url";
var $newContent = ;
$.when(fl.getContent(), function($content) {
fl.setContent($content)
});
Feel free to open an issue, or even better a PR...

Related

Make an html/java code on wix dissapear once clicked

I'm running into an issue, and I hope you can help me. ^^
First hello everyone! It's my first post so I'll try to make it as clean as possible^^.
I want to make an html/java code window to disappear once it's clicked , so the content behind it becomes accessible while the person still gets redirected to where they're suppose to (on a second page).
If that's not possible or too complicated, the other solution would be to open another window simultaneously, either replacing the original one, or opening a new page (a duplicate of the first page without html code).
Any idea how I could manage that? Knowing that I have no knowledge in code whatsoever. _' Also i should add that this is dedicated to mobile only, not that it would change a lot of things.
I have to add that my website is build on wix.
If anyone has an idea, or need more info, let me know.
here is part of the code:
<div id="app"> </div>
<script type="text/javascript">
(function(){
var App = {
android_id: '',
ios_id: '',
cat: '',
pbk: '',
cnt:'5',
mute: '',
creative:'managed',
subid:'',
pview:'',
display_mode:'min',
video_length:'',
parent_url:window.location.origin.toString()
};
var block = document.querySelector('#app')
var iframe = document.createElement('iframe');
iframe.style.width='100%';
iframe.style.border=0;
var src = 'https://example.net/widget/Index.html?v=2';
for (var param in App) src+='&'+param+'='+App[param];
iframe.src=src;
block.appendChild(iframe);
window.addEventListener("message", function(event){
var origin = event.origin || event.originalEvent.origin;
if (origin!=="https://example.net")return;
iframe.style.height=event.data+'px';
if(event.data=='noAds')block.removeChild(iframe);
}, false);
})();
</script>
By the way, this html/java wix code window covers a contact box.
Hope you can help me.
Best,
Lily
You could do something like this:
document.getElementById("app").addEventListener('click', false, function(){
this.hidden=true;
})
You can insert that into the javascript and it will make the app div disappear when you click on it. The other things you suggested aren't hard, if you make a more firm decision it would be easy to do what you're looking for.

Using TargetLink to open new tab

// ==/UserScript==
//--- Note that the contains() text is case-sensitive.
var TargetLink = $("a:contains('We love potatoes')")
if (TargetLink && TargetLink.length)
window.location.href = TargetLink[0].href
I want to have the links it finds open in a new tab in chrome.
This may be obvious to some but I can't figure it for the life of me, can someone assist me?
Instead of changing the location of the current window, you could use something like window.open() to open a new window instead:
window.open(TargetLink[0].href, "myWindow");
Notice that popup-blockers etc. may prevent the window from being opened.
Side note:
MDN offer a quite extensive read on the use of this, and the general opinion is to avoid resorting to window.open(), for the purpose of usability. Most modern browsers use tabbed browsing, and opening up pages in new windows takes a step away from that.
Use the following code:
var TargetLink = $("a:contains('We love potatoes')"); // this will select your node
if (TargetLink && TargetLink.length) { //checks it node was there
alert("Going to redirect"); //Just to make sure that we did correct!
TargetLink.attr('taget', '_blank'); //add target="_blank"
//TargetLink.click(); // This is not working, because of a security issue.
}
And also notice about ;.
You don't need if checks, just use attr method:
$("a:contains('We love potatoes')").attr('target', '_blank');
So target="_blank" will be added to We love potatoes-links.
Demo: http://jsfiddle.net/qtsWs/

using onmouseover to change text hyperlink into an image hyperlink?

Please bear with me I am brand new to learning javascript (self taught)! I am usually one to find answers on my own from just web browsing but so far I haven't found any resources explaining how to accomplish the following:
So, basically all I want to do is change this (HTML):
SPEAKERS
to an image by using javascript.
The image is kept in the same folder as the html and the js.
Here is as far as I know to go with the javascript:
function showImage()
{
picture = new Image(100,100);
picture.src = "icon2.png";
document.getElementById("speakers").innerHTML = picture.src;
}
function goBack()
{
document.getElementById("speakers").innerHTML="SPEAKERS";
}
For clarity, all I would like to do is change the text ("SPEAKERS") to an image using 'onmouseover' while using the same hyperlink in the process.
It seems like a very simple problem but I don't know enough to determine if what I want to do is even possible. If it's not possible that's fine, I would just like to know either way ;P. Thanks ahead of time!
If you're ok with using jquery, you could use .html() and .hover()
http://jsfiddle.net/u8fsU/
Try something like this to get you started (not a complete nor tested solution):
var showImage = function(){
var picture = document.createElement("img");
picture.src = "icon2.png";
picture.href = "link.html";
var speakers = document.getElementById("speakers");
speakers.parentNode.replaceChild(speakers, picture);
}
Please see https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference for a good reference to some of the available DOM properties and methods.

AIR HTMLLoader window.open is not working

I have a web project developed in Flex which I have to make work standalone using AIR.
I created Air project and loaded the web application using flash.html.HTMLLoader.
The content is loading fine and working.
There are few buttons which open different links using javascript functions window.open.
The links are not opening. The javascript function is getting called using ExternalInterface and I placed alerts in that which is displaying.
The function contains simple window.open
window.open("http://www.google.co.in","Google");
I tried several solutions mentioned but none of them are working.
http://digitaldumptruck.jotabout.com/?p=672
http://soenkerohde.com/2008/09/air-html-with-_blank-links/
http://cookbooks.adobe.com/index.cfm?event=showdetails&postId=9243
I even tried loading a simple page in HTMLLoader component with window.open method still it is not working. On button click only alert is working but window.open is not opening the link.
<html>
<head>
<title>Test</title>
<body scroll="no">
<input type="button" value="Click" onClick="window.open('http://www.google.co.in');">
</body>
</html>
Could some one help me please
This is a radical suggestion that may or may not work, but I think it's worth a try.
Override the window.open method itself
As before, wait until the Event.COMPLETE is fired, then take it from there:
var html:HTMLLoader = new HTMLLoader();
var urlReq:URLRequest = new URLRequest("whatever.html");
var oldWindowOpen:Object; // save it, just in case
html.load(urlReq);
html.addEventListener(Event.COMPLETE,
function (event:Event):void {
oldWindowOpen = html.window.open;
html.window.open = asWindowOpen;
});
function asWindowOpen(href:String, name:String="_blank", specs:Object=null, replace:Object=null):void {
var urlReq = new air.URLRequest(href);
air.navigateToURL(urlReq);
}
You should probably fill out some of the function to handle the other inputs as specified in the W3Schools Reference for Window open() Method. You may have to (or want to) change all the parameter types to Object, just to be safe, since, unlike ExternalInterface interactions, the JavaScript-ActionScript types are not automatically typecast across the AIR-WebKit exchange.
The AIR Webkit environment is quite restrictive in its support for the window.open method. See Adobe documentation on Restrictions on calling the JavaScript window.open() method.
The easiest way to deal with this is just let the system's default browser open the links. Adobe documents this very question, and shows how you can pop open url's from within AIR:
var url = "http://www.adobe.com";
var urlReq = new air.URLRequest(url);
air.navigateToURL(urlReq);
Generalizing this:
function openExternalLink(href:String):void {
var urlReq = new air.URLRequest(href);
air.navigateToURL(urlReq);
}
One option: Assuming you're running jQuery on the page, you could have all the links open externally as so:
var html:HTMLLoader = new HTMLLoader();
var urlReq:URLRequest = new URLRequest("whatever.html");
html.load(urlReq);
html.addEventListener(Event.COMPLETE,
function completeHandler(event:Event):void {
html.window.jQuery('a').click(clickHandler);
});
function clickHandler( e:Object ):void {
if (e.target && e.target.href) {
openExternalLink(e.target.href);
}
e.preventDefault();
}
For more on handling DOM Events in ActionScript, see the relevant Adobe Documentation.
None of that is tested, but hopefully it gives a rough outline.
Otherwise, if you are trying to do something fancy, like pop up AIR windows with HTMLLoader frames in them, I did find one blog post discussing that: Opening links in AIR’s HTML loader

Open a new tab with custom HTML instead of a URL

I'm making a Greasemonkey script and would like to open a new tab which will not display a URL but some HTML that is part of the script. So basically I want to do something like this (which is obviously not working):
window.open('<html><head></head><body></body></html>');
or
GM_openInTab('<html><head></head><body></body></html>');
Any hints are welcome!
You can do this:
var newWindow = window.open();
and then do
newWindow.document.write("ohai");
April 2021 Edit: This answer is obsolete now. Chrome banned loading data URIs into the top window, and the iframe solution doesn't work for me in Firefox.
Original answer: If the other answer gives you Error: Permission denied to access property "document", see this question about how to handle same-origin policy problems, or this one.
Or, quick and dirty, use a data URI:
var html = '<html><head></head><body>ohai</body></html>';
var uri = "data:text/html," + encodeURIComponent(html);
var newWindow = window.open(uri);
I am putting this here just in case anyone will need this. I have made a way to solve this problem, i created a little website (https://tampermonkeykostyl.dacoconutnut.repl.co) that you can give html to in the hash! Example: (you might need to middle click the url for it to actually open in new tab)
// get url
var el = document.getElementById("url");
// make html
var HTML = `
<h1>hi</h1>
if you can see this then cool <br>
<i>this should be italic</i> and <b>this should be bold</b>
`;
// insert html after the link to demonstrate
document.body.insertAdjacentHTML("beforeend", HTML); // https://stackoverflow.com/a/51432177/14227520
// set url href
el.href = "https://tampermonkeykostyl.dacoconutnut.repl.co/#" + encodeURI(HTML);
// make it open in new tab
el.target = "_blank";
<a id="url">Click here to display following HTML in a link (see js):</a>
Let's say you have a .html file locally stored. What you can do is this:
var newWindow = window.open();
newWindow.document.location.href = "/path/to/html/file";

Categories