I need to change the text of an element in an iFrame into a link, with a different display text. I do not have access to the HTML.
Below, where it says ThisIsAWebsiteURL.com, I need it to be a link to that website, and change the text to "Click here"
Is this possible?
<div class="classes" data-field="datafieldID">
<div class="c-editor">
<div class="c-content"> **ThisIsAWebsiteURL.com**
</div>
</div>
<div class="c-validation" aria-hidden="true">
</div>
</div>
If you are loading an external url in your iFrame, then it is NOT Possible to manipulate or access the content of that page.
However, If the loaded url is from the same origin/domain name, You can achieve this using the example code that #TheUnKnown has provided.
Browsers restrict access to external url pages because of security reason, Other wise hackers can steal your data or manipulate them.
A possible way would be to store that text and appending <a href> after the iframe has loaded:
$(document).ready(function(){
$('#iframe').ready(function(){
var link = $('.c-content').text();
var url = ''+link+'';
$('div').html(''+"Click Here"+'');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classes" data-field="datafieldID">
<iframe>
<div class="c-editor">
<div class="c-content">**ThisIsAWebsiteURL.com**
</div>
</div>
</iframe>
<div class="c-validation" aria-hidden="true">
</div>
</div>
Related
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
I have a webpage that show me some pdf uploaded previously, but I want that when I click on their link, open it into a named div.
My code:
<div class='row'>
<div class='col'>
<a href='pdf1.pdf'>pdf1</a>
<br/>
<a href='pdf2.pdf'>pdf2</a>
</div>
<div class='col' id='preview'>OPEN PDF PREVIEW</div>
</div>
If I click on "pdf1" or "pdf2" my two files may open into div with id PREVIEW
I've tried with some jquery functions, without luck.
You can do as follow:
<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
you just have to pass your pdf path to url
If you want to open a link in an iframe, try to use target="iframeName", as seen at W3C.
I'm trying to load an external view on different container inside different pages. The container is able to load. But the container does not change. Which means, first I click "Button1", the external view will display inside 'container1'. Then I click "Button2", the external view will display. But if I view source, it is inside 'container1'.
Could anyone please suggest me how to change the container dynamically which display the external view?
I'm doing Hybric Mobile application using
dojo 1.9.3
Following is the snippet that I'm trying.
page1.html
<div id="page1_container" data-dojo-type="dojox.mobile.View>
<button id="btn1" onClick="loadExternalView('container1');" value="Button1"><br>
</div>
<div id="container1" data-dojo-type="dojox.mobile.View">
<!-- An external view is loaded here when clicking the button above -->
</div>
page2.html
<div id="page2_container" data-dojo-type="dojox.mobile.View>
<button id="btn2" onClick="loadExternalView('container2');"><br>
</div>
<div id="container2" data-dojo-type="dojox.mobile.View">
<!-- An external view is loaded here when clicking the button above -->
</div>
externalView.html
<div data-dojo-type="dojox.mobile.View" id="vExternalView">
<div id="c" data-dojo-type="dojox.mobile.Container">
<span>I'm from External View</span>
</div>
</div>
javascript
function loadExternalView(container){
var vc = dojox.mobile.ViewController.getInstance();
vc.openExternalView({
url:"externalView.html",
transition:"slide"
},dijit.registry.byId(container).containerNode);
}
vc.openExternalView() will only load the view if it has not already been loaded, since it was loaded on the first click of "Button1", it will not be reloaded inside container2 when you click "Button 2", which by the way is a good thing, because if it did you would have an error due to duplicate id's.
I am using a theme that has tabs (list items) that are only displayed when the class is "active". By clicking on a tab, it changes the tab's class to 'active' (li class="active"), and only displays the content in the 'active' tab.
If I wanted to link to a specific tab from a different page, how can I create a link (presumably via javascript) that will send you to the page, and change an elements class?
Here's the HTML for reference
<div class="q_tabs horizontal center" style="visibility: visible;">
<ul class="tabs-nav"><li class="active">First Tab</li><li class="">Second tab</li><li class="">Third tab</li></ul>
<div class="tabs-container">
<div id="tab-1428877498-1-88" class="tab-content" style="display: block;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>First tab text</p>
</div>
</div>
</div>
<div id="tab-1428877498-2-39" class="tab-content" style="display: none;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Second tab text</p>
</div>
</div>
</div>
<div id="tab-1428877529303-2-2" class="tab-content" style="display: none;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Third tab text</p>
</div>
</div>
</div> </div>
</div>`
As far as I know, sadly, there is no way with only Javascript to open up a tab in a new page. Fortunately, there are a few way to transfer information within the URL.
1. Using the # symbol
Send info within the URL without reloading the page.
For instance, yoursite.com/yoursecondpage#yourtabselection If you are to add the # plus the tab number, your page would not reload. With javascript, you could find the number using the .hash property. This is the easier way to do it.
2. Using the ? symbol
Send info within the URL with reloading the page.
For instance, yoursite.com/yoursecondpage?tab=2 If you are to add ?tab=tabnum to the end of the URL, your page would reload. With javascript, this method is a little bit harder to find. This is the harder way to do it.
I hope this helps!
how about you create a function that recive a tab id(as an argument) and it will show only that tab (as it also hides the others).
then if you want to link it from another page make sure to pass the id(of the tab) via the url so you'll be able to make a simple JS check if there is any request for a specific tab and then use the function (as I described before).
use jQuery it shouldn't take more then 5min'
good luck.
I am trying to find all the tags in a div and compare the href to the page in the current url. If they are the same I will add css to the parent of the tag. Why wont this work to find the tags? This is being used in SharePoint.
<script>
var jse_vertical_nav = document.getElementById('JSE_vertical_nav');
alert(jse_vertical_nav.getElementsByTagName('a').length);
</script>
<div id="JSE_vertical_nav">
<div class="jse_link_row">
HOME
</div>
<div class="jse_link_row">
ABOUT
</div>
<div class="jse_link_row">
NEWS
</div>
</div>
It does not work, because you need to use JavaScript AFTER you output your HTML!