I am new to bootstrap css.
I have a left div that contains my menu list and I want to open the page in right side div when user clicks on that link. Many links I came across use frames which I am not using/ intend using.
This is my code:
I have this in my left panel
<li>Click me</li>
and I have this <div id="targetPanel" class="col-md-9"></div>
the code of course does not work as expected and opens my page into a new tab. Is there any way that I can open it in right side div?
NOTE: I am not using any frameworks or any other support like PHP, JSP etc. I am supposed to work with pure HTML only.
The only way to do this using pure HTML only is an iframe:
<div class="col-md-9"><iframe src="about:blank" name="targetPanel" style="width:100%;height:500px;"></iframe></div>
The target attribute of the link will refer to the name of the iframe so the link should open inside that iframe. Note: I used a fixed height of 500px for the iframe, you'll need to adjust the height to your needs. You can also find javascript snippets that can resize the iframe according to it's contents (although with some limitations).
AJAX is another option, that would involve setting a click handler on the link which cancels the default behaviour and instead, does an asynchronous GET request on the url, then parses the returned data and injects it into the div. There are many caveats to that method though, you'll have to strip out everything except the contents of the <body> tag before you inject it and the injected "document" will inherit/be affected by any styles present on your page.
Related
I am writing a preview function to let user preview the HTML file they uploaded and do some minor editing. The HTML file will contain no Javascript and no external CSS. All CSS are either inside style tag or inline. Images, on the other hand, will always be external as we don't provide space for storing images.
iFrame is not a good solution, because:
The preview is before actually saving the content, so I cannot provide an URL for iFrame to load the page.
It is difficult to touch the element inside iFrame. As the user will be doing minor update in another text box showing the plain HTML, I will need to update the elements inside frequently.
However, if I just insert content into an <div> the repeated <html>, <head> and <body>tag will crash the page.
So, is there a way I can preview the HTML without iFrame?
if you dont want to have the main app to affect the styling of the preview, you need to use iframe. have you see iframe's content window? https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow. this might be the answer you are looking for. So basically here you try to access the DOM of your iframe. give it a try!
preview = getYourIframeDom();
code = getYourHtmlCodeHere();
preview.contentWindow.document.open("text/html","replace");
preview.contentWindow.document.write(code);
preview.contentWindow.document.close();
For a web site I'm trying to improve, I have an anchor in an IFrame document. One the main page, the anchor tag does not respond. On other pages which also embed this same iframe document, it does respond. By itself, all links in the iframe document work when the page is loaded directly. Also, if I trim significant content from the main page, the anchor links work. I found no errors in the web developer log. I'm using FF 31.0, but IE didn't work any better. Also, the page is HTML 5.
Rather than post the actual HTML, please see page at
dreamfloatmassagespa.com (this is the main page)
and dreamfloatmassagespa.com/FloatingPage.html (this is one of the working pages)
I've tried adding the sandbox attribute, but FF doesn't care in this case. Both the IFrame and the parent frame refer to locations on the same domain. The links in question point to actual web locations and not Javascript functions.
Your div with class .row are above everything in your main content, that's why you cant click in any anchor inside the main content in the mainPage.html. Probably you did some mistake in your css in the MainPage.html.
So if it's possible I'd like to echo (or otherwise copy) some text from inside one iframe on a custom page i'm making into another section/div on the page this iframe is on.
Example:
<div 1>
<iframe>
<div inside frame>
Text i would like to echo/copy
</div>
</iframe>
</div>
<div 2>
(another iframe could go here if needed but i was firstly trying to do it without another one.)
Text from the iframe above
</div>
I may not have that 100% right but i'd like to do that and in the second div i'll have a class that makes the text scroll.
The use for this is a twitch stream project i'm working on. This is taking text that shows 'now playing' from a page and making it transparent via having the background color 'chroma key green' and displaying it on the stream.
The other option is if I could have some sort of script to send the text from this div into a text file as it updates and then i could add the text file to the stream instead.
note: I don't mind using php or java/jquery. I was trying to keep the file simple to use and edit most of all. I just wanted to note i'm not as experienced in java and php. I want to do this the simplest way possible.
Thanks!
(I don't want to include all my code, but it's fairly straight forward, all help is appreciated.)
If the parent page and the page inside the iframe are hosted on the same domain, you can access the contents of the iframe directly with something like this on the parent page:
var iframe = document.getElementById('id-of-iframe');
var element = iframe.documentWindow.getElementById('id-of-element-inside-iframe');
For security reasons, this will fail if the pages are not hosted on the same domain.
If the pages are hosted on different domains, but you have access to both (read: you can change the HTML output from the server on both pages), you have another option called cross-document messaging.
This is a bit more complex, and involves scripts on the parent and child page to communicate with each other and send data back and forth.
On the parent page, you would have something like:
window.attachEventListener('onmessage', function (...) {
// Listen for messages from the child page
}, false);
And then in the child page, you would package up the data and send it to the parent with a call like this:
parent.postMessage(...);
Obviously, there are details I've left out here (...), but this is the general idea.
If you don't have access to both the parent and child page, there is no way to achieve what you're asking. Allowing any page to access any other page inside an iframe would be a major security problem. (Imagine if I placed a full-page iframe on my site, loaded Gmail in it, then setup a script to watch the value of the password field.)
I have been working on a simple web site (one page at the moment) to display some basic information. This site also contains several links that refer the user to downloadable content (2 links to a PDF and one link to a zip file).
These links, like most of my page, are hidden using the display:none CSS attribute if the user cannot run JavaScript, which several features of the site require. A message is then displayed in the <noscript> tag to inform the user of why they aren't seeing the scripted content. This was all working perfectly when I previewed the files on my personal computer without hosting them.
My problem came after hosting on the site on GoDaddy.com. Now, whenever <noscript> is called upon (regardless of browser), every link from my site is pulled out and shoved in the upper-left corner where the user can see it. CSS styling does not appear to affect these links and I cannot figure out how to get rid of them.
How can I solve this? Most importantly, how to make the links go away unless I set them to visible again?
This is my <noscript> tag, at the bottom of the page:
<noscript>
<div class="scriptError">
<h1>Javascript is disabled!</h1>
<div id="noScriptNotice">
<p>This site works best with Javascript enabled. A 'noscript-friendly' version is currently in progress, but for now please enable Javascript to view the contents.</p>
</div>
</div>
</noscript>
Everything else (including links) is inside this div:
<div class="scriptedContent" style="display: none;">
<script>
//If scripting is enabled, display the site.
$(".scriptedContent").css("display", "block");
</script>
If it's working on your own localhost, but not Godaddy.com , you should first and foremost try to submit a support ticket to see if that provides any help.
The links that are re-appearing, see if you can apply this CSS style to the links that you are trying to hide:
font-size: 0;
text-decoration: none;
That should do the trick of hiding the links, that is, if your CSS is affecting them at all.
If not, try to "right click > view source" of the page, and then view and compare the source with your own.
Alternative if that does not work:
Try making your links (in the HTML code) something along the lines of:
Text
and seeing if that stops them from overriding your Styling.
My understanding of the iFrame is that the content inside is exactly what is included in the src. I've seen numerous widgets like Facebook etc that use an iFrame.
When I try using an iFrame, I have an HTML file with only a div and some content inside, no head, body, etc. Just the content in HTML. But the iFrame always loads the entire page and ends up giving me a recursive iFrame within an iFrame.
I don't see how this is since my HTML file that is referenced in the iFrame is just content and nothing else. I'm not including a header, footer but all that gets displayed anyway.
I've seen where people are talking about scrolling the iFrame to a certain section and even using the div's id in the src and setting the scrolling=no. This works, but my iFrame content will reload based on user input and once it reloads it returns to the top-left portion of the page inside the iFrame.
This doesn't make any sense. Maybe this is supposed to be a widget or something?
Edit for SD to show some formatted code:
#Surreal Dreams
That's the strange thing. I'm using web2py so it might be something inherent in the backend that's causing that. The html file literally is a div wrapper with some elements inside. But I think the web2py is adding the header in there even though I'm not extending any kind of layout. I eventually did get it to work correctly by referencing the same html file saved offsite at another url. There it displayed properly without web2py interfering with the html structure.
What was happening before, I had code like this:
{{extend 'layout.html'}}
<div class="wrapper">
<page content>
<aside id="iFrame wrapper">
<iframe src="/rates.html"></iframe>
</aside>
</div>
And that's the basic structure of the web2py page where inside layout you have all your headers, footers, etc. Well what was happening is that it would generate the entire page, and where you get to the iFrame, it generates the page again inside that iFrame, and then on down to the iFrame again, which continues to infinity rendering the page inside each iFrame's page.
An iframe will always load an entire Web page, referenced in your iframe's src attribute. Even if your file only contains a div, I believe the browser considers it a full page and automatically adds a head and body.
"I've seen where people are talking about scrolling the iFrame to a certain section" => right, once the page in the iframe is loaded, you can use JavaScript to access and manipulate its DOM:
var myIframe = parent.document.getElementById("myIframe");
var window = myIframe.contentWindow;