It's been a while since I last did coding, I was just wondering how simple I could make this little idea of mine.
Simply put, I'd like to have 4 input text fields on one page, an example of the label and text field is: http://www.url.com/[ASpecificLink] where the [] denotes Text Fields. Upon filling all the text fields and clicking 'Okay', the next page will list iFrames of the link specified, making it a total of 4 iFrames on one page.
My first question is : How simple could I make this idea? off the bat I thought of using PHP, ideally i'd like to access this on an iPad.
My second question is : Would it be possible, for example, to list specific content in the iFrames. For example, in the link I enter, the only content I would like to show is what is contained within the Table elements of the whole page (this would mean the top banner, navbar and other elements would be excluded)
Thank you very much, and looking forward to some other perspectives on this idea. My approach might not be the most efficient way to go about this, and therefore I'd appreciate some out-of-the-box opinions.
Thank you very much
As for the first question : it is very simple to do, but you should'nt use PHP. This can be done very easily with Javascript :
Create a new IFrame element
Set the "src" property to the content of the text inputs
Append it to the page
The browser will load the pages in the iframes by itself.
As for the second question :
Load the page using AJAX (Javascript)
Get the elements you want from the page with Javascript
Append them to an IFrame's ContentWindow property
No code here, since you seem to be only expecting ideas of implementation options :-)
Related
I'm writing a chrome extension which helps the user type things on twitter. When writing a tweet on twitter, twitter opens an editable div container. When the user types into it, twitter (which is using some web-framework presumably) generates sub-divs and spans with the text the user types and places them within the content-editable div.
The thing is when one manually changes the span value (for instance, through inspect elements), and then types something again, the value in the span will just revert back to what it previously was (before the inspect elements edit). This is probably because the actually typed string is stored somewhere in javascript, and everything gets overwritten again when the user types into the div.
I've been trying to find a way around this using JQuery but with no success. I don't really know how to start. If it were just a regular input tag, you could call something like $("input").val("new value"), easy-peasy... but I don't know how one could go about doing that for an editable div that gets updated by javascript running somewhere on the page.
For a while, I just thought it would be impossible...
BUT NOW I do know it is possible. If you download the Grammarly extension and use the Grammarly popup-editor (which opens a new window to edit text), then submit that, the twitter editable-content div updates appropriately and everything works like magic.
Sorry if this isn't a standard programming question, but I couldn't find anything on the web that comes close to what I'm trying to do. Maybe I'm just not experienced enough and am missing something really obvious. I tried looking at the twitter and Grammarly source code but it's all minified garbled javascript that I can't read...
Thanks for any help and insight!
EDIT: the twitter url in question is: https://twitter.com/compose/tweet The div in question is the one with contenteditable="true" attribute (you can search it in the inspector)
I have designed a page to be used as a tool. I am getting some challenges here since my experience is very little in the field and im only new.
- my goal is to change values of an element on a page that is not open yet.
- is there a function i can make on current page to change the values of the element on the next page to preset it to some static numbers or some of them are dynamic
I dont know how to manipulate something that is not open yet, i dont even know if that's something possible. I was able to change elements on my open current page, but dont know how to change something on the next page if i click on one of the links
Park Property Management
Millgate Manor
Weston Towers
Kingston
Region Of Peel
so i expect to click on one of the links and when the link opens some elements in the links i need them to be filled with some values that are static always
You can't directly influence the content of another page with JavaScript in the current page. That would have very big security concerns.
However, you could indirectly influence the content if you have access to the source for both pages, and can add JavaScript to both of them. Then, as some comments suggested, you can for example use search paramaters in the link url to pass along information.
(Search parameters are the stuff that comes at the end of a url sometimes and looks something like ?name=john&id=555)
You can read more about about working with search parameters in JavaScript here:
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
Don't get discouraged! You're capabilities will grow as you try to make things work. (That's almost the only time they will grow.)
A word of caution!
Please be very careful when using search parameters to modify or display content on a page as there are some real security concerns involved. Never display anything from the search parameters directly on the page without validating the input first. A good way to handle dynamic content based on search parameters, at least if you know the possible options available, is to have some if .. else statements or maybe a switch block that you try to match the search parameters against, and simply not display anything at all if the content of the parameter does not match any input that you're expecting.
I've list of slides, and in one of the slide, I have a text box with name attribute as "deals". In the next page I have a button. On clicking of that button, I want to capture the deals which were placed in the previous html. How can I capture it?
Using
document.getElementsByName("deals")[0].value
will not work, because we dont have a tag with the above name. How can I fetch it?
Any ideas would be greatly appreciated.
P.S : I don't have access to other JS of the project.
Though I may not have understood the question correctly (for example, I don't know how much JavaScript you may change), here are some thoughts:
Solve the problem of "don't have a tag with that name": If the slides are on the same page, then instead of removing a DOM element,
a hide() may be useful (as an implementation of changing slides).
The slides are on different page of the same window: Try utilising Cookie or LocalStorage, if you can't change the way how the slides work.
Bad Hack but should work: Setting window.name. This special "variable" will persist as long as you are in the same window (even after page changes, as long as the page doesn't re-write it). This is some kind of a hacky way to get values across different domains (avoiding Cross Site issues...). This should help if your slides are being imported into some other presentation sites with an <iframe>.
Hope the above helps!
i have a query
thr is one web page
and i am using two iframe in that
like equal partision of a page
and there are some contents , words , text which are same in both parts
and if i am selecting any one word or sentence which are also in second part will be highlight
I don't think there is a way to select web page content via JS. You might be able to do this if it were just text in a textbox or something similar.
UPDATE
As is usually the case, I was proven wrong :) Check out Marcel's posted function. This function appears to select content between two object. You'll just need to do this twice (one for each frame object), rather than once using the document object
selecting text by ignoring inner Elements of div tag javascript
I know it is possible to add/remove HTML elements dynamically to a web page using Javascript. I was wondering is the following possible-
My coldfusion web page has a two column table and the last row of the table has a link in the first column and the second column is blank. When user hits that link, a textarea shows up in the second column which was blank so far.
Is it possible to do this using Javascript? I went through a few links on the web and a few pointers like http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/ did help but it seems they don't help me on my scenario.
Thanks for the help in advance.
For your scenario, it may not be necessary to add the element. You could instead have the element already loaded in the dom (but hidden), then fire some code to show it when the link is clicked. The javascript for that is quite simple.
function ShowTextArea()
{
var ta = document.getElementById("textareaId");
ta.style = "display:inline";
}
Certainly you could do this. I think the best way to accomplish it, however, is to create the item normally as part of the page and just hide it using a css style until you want to show it via javascript, rather than creating it from scratch dynamically. This should make it easier to integrate with your server-side code.