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 pdf embedded in a div

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.

link href with image onclick jquery

I have an <a> and div control for pop up window function. The popup is working correctly. I want to set an image click to open the alert pop up, i.e. on image click I want to redirect to href action. My code is the following:
<div id="openModal" class="modalDialog">
<div> X
<h2>Timesheet Comments</h2>
<input type="text" class="TxtNotess" onchange="GetChange" />
<input type="button" class="BtnComment" value="Save" />
</div>
</div>
I have some CSS code to handle the popup, and now I want to use an image and try to call the href action on click event of image
<img src="~/Images/comment.png" class="testmy" />
<a href="#openModal">
</a>
$('.testmy').click(function() {
alert('hi');
$('#openModal').click();
});

Put the and around the image
<a href="#openModal">
<img src="~/Images/comment.png" class="testmy" />
</a>
And remove the javascript code afterwards, that is not needed

Loading Placeholder tag in FORM when variables are set

I have a simple user settings form written in HTML5 which commits user defined settings to local storage.
I want it so that if someone access the settings page again, and the user settings are defined the placeholders and/or values prefill the form with those settings.
I have tried using window.load, document.ready at the end and the beginning, but I can only get the form to load thre values if I click reload. I need these value to prefil if the page is visited.
Here is my version of the form which loads the values if you RELOAD the page
Script first
function loadUserSettings() {
$("#full_name").attr("placeholder", db_user.full_name);
$("#mobile_number").attr("placeholder", db_user.mobile_number);
$("#email_address").attr("placeholder", db_user.email_address);
$("#full_name").attr("value", db_user.full_name);
$("#mobile_number").attr("value", db_user.mobile_number);
$("#email_address").attr("value", db_user.email_address);
}
and now the form
<body>
<div data-role="page" data-control-title="Settings" data-theme="b" id="settings" class="global_page">
<div data-theme="b" data-role="header" data-position="fixed" class="global_topbar">
<a data-role="button" data-transition="flip" href="index.html" data-icon="back" data-iconpos="left" class="ui-btn-left global_button">
Back
</a>
<a data-role="button" data-transition="flip" href="help_settings.html" data-icon="info" data-iconpos="left" class="ui-btn-right global_button">
Help
</a>
<h3 class="global_header">
Settings
</h3>
</div>
<div data-role="content" style="padding: 1%">
<form id="postSettings" action="" class="global_form">
<div data-role="fieldcontain" data-controltype="textinput" class="full_name">
<label for="full_name">
Name
</label>
<input name="full_name" id="full_name" type="text" data-mini="true"/>
</div>
<div data-role="fieldcontain" data-controltype="textinput" class="email_address">
<label for="email_address">
Email Address
</label>
<input name="email_address" id="email_address" type="email" data-mini="true"/>
</div>
<div data-role="fieldcontain" data-controltype="textinput" class="global_text_input">
<label for="mobile_number">
Mobile Number
</label>
<input name="mobile_number" id="mobile_number" type="tel" data-mini="true"/>
</div>
<input id="store_posting" type="submit" data-icon="plus" data-iconpos="left" value="Store Information" class="global_button" onclick="dbGoUser()"/>
</form>
</div>
</div>
</body>
<script language="JavaScript">
document.ready = loadUserSettings();
</script>
I have managed a workaround using a function that I attach to my settings buttons which basically
function loadSettingsPage() {
window.location.href = "settings.html";
}
and this works everytime prefilling the placeholders / values no problem, however I am using a datatransition link of 'FLIP' which is lost using the above function.
SO ideally I want to either fix injection of the placeholders when I click a normal link (which I suspect is just a page refresh type option that does not loop) or make my loadSettingsPage use the JQuery flip transition.
Thanks in advance for any assistance.

OK, I was able to get around the issue with some custom functions. I had to lose the flip effect, and move to a simple fade but I ended up using
function fadeIn() {
$("body").hide();
$("body").fadeIn(500);
}
function loadPageSettings(urlvar) {
$("body").fadeOut(500, function(){ window.location.href = urlvar; });
}
for the custom functions
All hyperlinks used something like this
<a id="home_new_journey" data-role="button" onclick="loadPageSettings('journey_info.html')" data-icon="plus" data-iconpos="left" class="global_button">New Journey</a>
and at the footer of every page I just had
<script language="javascript">
window.onload = fadeIn();
</script>
So now I have pages loading properly with all dynamic content an a consistent fading effect.

When using jQuery plugin collagePlus img-tag is appended with entire body content

I´m having a serious problem on my Joomla site.
Joomla 2.5 latest version.
On all pages there are no jQuery conflicts or errors in developers panel (Chrome)
But when I use the plugin collagePlus something very weird happens..
Here is the base HTML layout for collagePlus image gallery:
<section class="Collage effect-parent">
<div class="Image_Wrapper" data-caption="test....">
<a title="test" class="fancybox" rel="group" href="/images/demo/placeholder-large.jpg">
<img class="collageimgs" src="/images/demo/placeholder-large.jpg" alt="test">
</a>
</div>
<div class="Image_Wrapper" data-caption="test....">
<a title="test" class="fancybox" rel="group" href="/images/demo/placeholder-large.jpg">
<img class="collageimgs" src="/images/demo/placeholder-large.jpg" alt="test">
</a>
</div>
</section>
And the jQuery:
jQuery(window).load(function () {
jQuery('.Collage').collagePlus();
});
Whenever the page loads the entire body content of the page is appended into each img container inside the Wrapper divs.
This is very strange indeed.
Has anyone experienced something like this before?