Ok, guys, I need your help. My English is not so good, so I hope that you'll understand what I want.
I need some very simple modal dialog that will be generated only through JavaScript or Jquery. In that modal I will have some iframe. Modal and iframe in it must be generated via JavaScript or Jquery, because I need just some code in <script> and <a> link in body to call that js or jquery code and generate modal with iframe in it.
If there is need for CSS to create modal and iframe in it, CSS will be created via that code too. Client will put those <script> and <a> tags on his site and then will on click get modal with iframe. In iframe will be content of my own site. I need that for ads, like Google Ads.
P.S. I know how to create iframe through JavaScript, so basically I need that modal dialog to complete code. I can do that without modal dialog, using popups, but I need better solution.
Any suggestions? Thank you.
Use Colorbox. It will allow you to iframe content, and all you use are <a> tags. Super simple, 100% customizable. I use it for a lot of my client work. On the example page you will see an example of iFramed content. If you view the source, you will see the following usage:
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
...
<p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p>
A <script> and <a> tag.
The css is not generated via the code, however, you could easily add a line as part of the script to do this in jQuery which gets called after the modal's load:
$('cboxOverlay').css({ background: '#fff' });
// etc ..
Related
I hope someone can help me with this because I don't know any solution for this... I have a Blog with Google's Blogger plattform, so I only can write my CSS styles inline - no extra files.
My question: Blogger is using an iframe for the comment section and I want to optimize it for mobile devices. Is there ANY way to add some CSS to the iframe content only using the head of the HTML / XML page? Maybe with some Javascript?
Why don't you use <style>?
<style> /* put your code here */ </style>
You will need to put your css code in the page the iframe shows.
Due to security you cant interact with a page inside an iframe by javascript, so you have to have all the code in there. If you cant write code in it than I domt think it is possible, but if you can at least add a script in you can possibly add the element containing the stylesheet.
I'm using Featherlight to open an iframe in a popup modal.
You can see a demo if you click the iframe button on the site.
How can I make Featherlight add allowfullscreen="true" to the generated iframe tag? Videos will not go fullscreen without this parameter.
If you view the source html of the demo you can see that it adds it. But when I download and use featherlight.min.js it does not apply that parameter to the tag by default.
View Source
From the demo:
When used on my site:
The code for opening an iframe:
Open Popup
I looked for a solution here, but I cannot find a section like this in the code.
I found the answer was to use data-featherlight-iframe-allowfullscreen="true" in the <a> tag.
I've got an interesting question. I'm running Squarespace # buscadprimero.caminoglobal.org
and need to target the top-right button on the navigation (Ingresar, which means login) to bring up a Javascript form provided to me via embed code. The code itself works fine when included as a code block in the body of a page, but Squarespace only allows navigation buttons at the top to be hyperlinks. There's nowhere for me to add code to the button itself, being that it is a largely consumer platform and works great for straightforward application until you try to change the way it works.
They make an allowance for custom code via a "code injection" menu that adds whatever code you want to the HTML header of the page, so I've been trying to target this div, which does not have an id but who's class is external, with Javascript to replace its contents with an onclick listener to bring up this form. Tracking?
Here's my embed code, which like I said is fine:
<script>// <![CDATA[
!function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>
I've been trying document.getElementsByClassName("external").innerHTML; but when set to a var that returns undefined. New to Javascript but not afraid to learn. I'd like to figure out how to properly target the div, first of all, and then replace its contents (which currently is a link to my 404 page) with a Javascript function that activates on click. Thanks for the guidance!
I've tested the following on your site in Chrome, and have successfully changed the content. The page contained multiple ".collection" elements, so i select only the last one:
JavaScript / jQuery
$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");
Thanks to the great help of #Arg0n, I've now got a working login form that appears in the top-right-most button of my site. Using:
$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });
as the function to replace the contents of the div in question, I inserted <span id='cc-login'>Ingresar</span> as the call to the provided embed code:
<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>
Turns out that a little jQuery was helpful in accessing the desired div, and setting its html contents was a bit beyond my area of expertise.
Many thanks to the StackOverflow community for helping me learn about targeting page elements with Javascript to procedurally manipulate its contents.
This part of a script works fine on a normal page:
<script>
$(function() {
$(".counter").countimator();
});
</script>
But when that same page is loaded in an iframe on a page on another domain, it doesn't work.
Is there a way to get this selector/code work when the page is loaded within an iframe? I want to give people a iframe code that they can use on their personal websites to get the content of my page on their website.
Edit
I published the basic code on http://joomlaground.com/iframe_test/
The http://joomlaground.com/iframe_test/clock.php runs standalone like it should.
Then I created a very basic iframe page iframe.php which iframe the clock.php. However then the clock.php is not counting any more.
How can I fix this?
If '.counter' element is outside of the iframe you're running the internal iframe script has no access to this element as the current document and iframe are separate documents. If you'll have any questions don't hesitate to ask below.
When you move this script in an iframe then it means you are running your script in a new window.
Now in new window you are trying to access some library function:
$(".counter").countimator();
That can only be done if you have that library included in the source of that iframe.
I am having troubles with changing pages across my website with jquery mobile. Tough i switched back to the standard window.location, i would like to use changePage() og jquery mobile, but im facing some issues.
When i click the link, the page changes, but the js attached doesn't reload, so im stuck with the content of the preveious page(or not event this). Ive tried different approches: pageReload:true (not working), changing the position of the script tag(works, but creates duplicate content). If anyone has some answers for my question, i'd be grateful. I dont think this issue needs snippets, but here they are:
HTML:
<div class='ui-block-b'>
<a href='nota.php' data-role='button' class='buton_no_bg right' style='color:#b21908; font-family:'Segoe WP Semibold''>190 lei</a>
</div>
Thank you.
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
Solutions:
Put all of your javascript into first HTML/PHP file
Put your javascript into BODY, basically into page div
Turn ajax off