I'm currently working on a little html/js site and my current goal is to load a .txt file into a page (accomplished this with iFrame src), then transfer the text from the iFrame to a textArea.
The latter I cannot do for some reason. I have tried to get various scripts to help me but none of them seem to work.
Currently lets imagine i have only this in the html:
<iframe name=my_frame id=my_frame src=textfile.txt height=100% width=100% frameborder=0 scrolling=auto marginheight=5 marginwidth=5></iframe>
The java code i am using to validate whether I am getting the inner text of the iFrame is a simple alert:
<script>
alert($('my_frame').*[attribute]*);
</script>
The ''attribute'' part is a dummy in this case. I've used things like HTML, innerHTML, innerTEXT, text, value, body, instead - but none of them work....
Perhaps someone here could assist with a little script to accomplish moving plain text from iFRAME to textArea, or even suggest a better way of approaching this?
I would be extremely grateful for any and all assistance.
Cpt.Mgn.
I think you must change your code:
<script>
alert($('#my_frame').html());
</script>
# Is a selector for id.
html() return all the html inside the element.
I hope this helps :)
EDIT:
<iframe name=my_frame id=my_frame src=textfile.txt height=100% width=100% frameborder=0 scrolling=auto marginheight=5 marginwidth=5>Hello </iframe>
And alert said: Hello
Link to code: http://jsfiddle.net/rEM6H/
if your file is hosted and the textfile is public-ally accessible, then you can try this
$.get("http://yourdomain.com/a.txt", null, function(response){
$("#theTextArea").val(response); // where theTextArea is the ID of the textarea you want to put the data into.
});
Related
I'm having a difficulty on applying a css style for this one.
I already tried using this code that I read from similar post regarding the style inside iframe.
<script>
$(document).ready(function(){
$('#iframePPT').ready(function(){
$('#iframePPT').contents().find('body').css('display','none');
});
});
</script>
I want to apply a display:none to some part of the iframe.
<iframe id="iframePPT" width="560" height="459" src="https://view.officeapps.live.com/op/embed.aspx?src=https%3A%2F%2Fstorage.knowledgelink.training%2Fslideshowstorage%2F34_Compliance+%26+Other+Training_ba5726636d2f4412b264e3c47a2833de.pps" frameborder="0"></iframe>
But that script won't work. Are there any ways to apply a style in an iframe with an external link?
Here's a sample screenshot
I have to remove the toolbar with the redbox.
Are there any ways to remove this?
Thank you for the help in advance.
I'd like to allow the user to customize their user name using HTML tags, without restrictions.
The only problem I've found is they not closing tags...
Ex: (a user name with not closed tag: my<b>nick)
mynick: comment textinnocent user: comment text
I searched for a tag like <sandbox> my <b>nick </sandbox> or any way to force closing every open tag, but I have not been lucky.
Desired result:
mynick: comment textinnocent user: comment text
Is there any smart way to achieve this? (Only using HTML or JS/JQuery)
If you have any incomplete tags, the browser automatically tries to close it(doesn't seem to happen if you have an HTML code following).
If you look at this fiddle https://jsfiddle.net/hwpLyow0/1/
I have the HTML inside the DIV asHello <b><i>World!
But when I alert the HTML from the DIV I get
Hello <b><i>World!</i></b>
I would suggest using jQuery's .html() function or JavaScript's .innerHTML to get the HTML with tags closed.
EDIT:
If users are typing it in textbox, creating a new element(not appending it to document) will do the work for you.
var fix = document.createElement("div");
fix.innerHTML=document.getElementById("test").value;
Fiddle: https://jsfiddle.net/hwpLyow0/3/
OK, I'm going to get a bad rep here for asking too many questions. I have some javascript that dynamically changes content on my page. This works just fine. My issue is that I need to be able to tag all text with 'class="CushyCms"' in order to allow access to the site owner for easy content changes. Here is the basic code for the script, there is more than just the one set but this will give you an idea of what I'm doing. I tried adding the class tag inside the innerHTML, but Cushy couldn't see it.
<script language="javascript" type="text/javascript">
function changeText(idElement) {
if(idElement==0){
document.getElementById('tagmain').innerHTML ='<class="cushycms">Default text to display on page load.';
document.getElementById('tagtext').innerHTML ='<class="cushycms">More default body text on page load.';
}
</script>
I am looking for a way to put these text fields in a hidden div and pull the textContent from there. This is an example of a section that works with Cushy
<h2 class="cushycms">Preventative Maintanence</h2>
I'm beginning to get the hang of javascript, though Java is my primary language. I want to be more rounded i my langauge skills so I am trying to leanr as much as I can. Thanks in advance for the help.
Cushy CMS requires an actual HTML in order to edit. You could use the following:
HTML
<p id="tagmain-replace" class="cushycms" style="display:none;"></p>
<p id="tagmain">Default Text</p>
JS
var newText = document.getElementById('tagmain-replace').innerText;
if( newText != ''){
document.getElementById('tagmain').innerText = newText;
}
I would suggest changing the IDs to better work with your project.
all, I`ve a question about get iframe's element by attribute using javascript.
1.html
<iframe id="if" src="2.html">
<div attr="test">
2.html
<div attr="test">
I`ve already known that if parent page want to get the its element by attribute, we can use jQuery like
$("div[attr='test']")
But how can parent get it's iframe's element by attribute?
Please write some simple code for explain, great thanks!
Jarod
I`ve found out a solution and test fine:
$("iframe[data-label='if']").contents().find("div[attr='test']");
If I'm not totally off:
$("iframe div[attr='test']")...
Or with id:
$("#if div[attr='test']")...
Did you tried?
window.frameElement.getAttribute("data-media");
I recently setup custom rotational banners on my blogger using this code I come across but I can't seem to figure out how to make the images clickable to link to the homepage.
Any help would be much appreciated.
Heres the code:
<script type='text/javascript'>
var HeaderImage= new Array()
HeaderImage[0]="http://Example1.png"
HeaderImage[1]="http://Example2.png"
HeaderImage[2]="http://Example3.png"
HeaderImage[3]="http://Example4.png"
HeaderImage[4]="http://Example5.gif"
HeaderImage[5]="http://Example6.png"
HeaderImage[6]="http://Example7.png"
var random=Math.round(6*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
Its working now guys.
I just wasn't sure exactly where to put the tags everyone was teling me.
Thanks very much for all your help.
This code has issues with " instead of ". But aside from that, what this code is doing is setting the background image for an object with id="header". To make that object clickable, you can surround the header object with an <a> tag. For example, if the header object was a div, then you would use something like this:
<div id="header"></a>
If there's some reason why you don't want to use a link to make the area clickable (which is the simplest way to do it), then you could also use javascript like this:
document.getElementById("header").onclick = function() {
window.location = "http://my.example.com";
}
This would either be placed after the page HTML (so the object in question is already loaded when this code runs).
If you show us the actual HTML that includes the header object, we could be more specific about how to make it clickable.
From reviewing your HTML, if you want to make it clickable with just your HTML, you can change this part of your HTML:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/>
</b:section>
to this (which just surrounds it with an <a> tag:
<a href="http://my.example.com">
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/>
</b:section>
</a>
Well, you don't actually have any image elements, so that's your first problem.
The simplest solution (to make images clickable) is to wrap images in anchor tags with the href attribute set to your index. What it seems like you're actually doing is dynamically writing some css for an element with id #header and setting its background to the image. When you do this, there are no actual img elements, so there's nothing for a user to click on other than the element itself.
Without seeing any more of your markup, I'd suggest just wrapping your #header element in an anchor like this <a href='/'><some_element id='header'></some_element></a>
Idk how Blogger works, so I'll just tell you the quick and dirty way to get it working with javascript.
Put this after the code you showed us, even after the closing script tag
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$('#header').click(function() {
window.location = '/';
});
});
</script>