We Keep Coding

Create link in iFrame

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>

Open Links Inside of an iframe Outside of the iframe

I've used an iframe code similar to:
<iframe src="/comment_contents.php?profile_id=2850" height="100%" width="100%" style="border: none;">
</iframe>
inside a Bootstrap Modal in an another page (/profile_comments.php?profile_id=2850).
HTML contents inside the iframe page (/comment_contents.php?profile_id=2850) are something like this:
<form method="post" action="/comment_contents.php?profile_id=2850" class="form-comment">
<div class="form-comment-contents">
<input type="text" name="comment" value="" class="comment-text">
<input type="submit" value="Comment" class="comment-submit">
<br><br>
<a href="/view_profile.php?id=2851">
<img src="img/profile2851.jpg" class="circle-comments" alt="Emma Watson">
</a>
<div class="comment-text lead">You are just awesome!</div>
<br>
<a href="/view_profile.php?id=2852">
<img src="img/profile2852.jpg" class="circle-comments" alt="Bill Gates">
</a>
<div class="comment-text lead">You are Cool!</div>
</div>
</form>.
You may have noticed there is a code:
...
So, when a person clicks on it, a Profile View page opens inside the iframe. But I want link to be opened not in the iframe, but in the outside. I mean, in the URL bar.
Is there any javaScript or something else to open the link URL (inside the iframe) in the URL Bar?

Just add target="_top" to that link
<img src="img/profile2851.jpg" class="circle-comments" alt="Emma Watson">

Are you preferring to open the link in a new tab and not in the same tab?
You could try this..
a href="/view_profile.php?id=2852" target="_blank">...
I used target="_blank" that allows you to open the link in a new tab. This Link might be of help, https://www.w3schools.com/tags/att_a_target.asp .

dynamically change the container in different pages which open the same external view by in Dojo mobile ViewController.openExternalView

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.

How can I link to a specific tab?

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.

opening an image inside an modal window

Here is my JsFiddle
I am trying to create an image gallery. I want my each image to open up inside a modal window when someone click on any image. I have designed my modal window. i just don't know how to connect my modal window to my images in the image gallery. I want the clicked-in image to appear inside the img tag of my modal window.
This is my first time i am trying to do something with modal window. i have no idea how to write that click event handler for my case. I searched in net. I did not find any matching solution. All were suggesting to use their own plugins. I don't want to use others plugins for this. A little help would be appreciated.
Here's is my image gallery
<div class="gallery">
<div class="row">
<img class="normalimage" src="">
<img class="wideimage" src="">
<!--more images-->
</div>
<div class="row">
<img class="normalimage" src="">
<img class="normalimage" src="">
<!--more images-->
</div>
</div>
Here is my modal window
<div class="gallery-overlay" style="display: none;">
<div class="gallery-imagebox">
<img class="gallery-image" src="#">
</div>
<div class="gallery-captionbox">
<div class="gallery-control gallery-control-previous">
<
</div>
<div class="gallery-control gallery-control-next">
>
</div>
</div>
</div>

Using jQuery you could start with this:
$(function(){
$('.gallery').on('click','a',function(){
$('.gallery-overlay').show()
.find('.gallery-image').attr('src',$(this).find('img').attr('src'));
return false;
});
});
Have a look at this this fiddle