So,
I have a loop that outputs a bunch of stuff from an SQL database. It also outputs a form with some of those outputs.
that entire loop sequence is displayed through an iframe embedded into one column on my site.
I dont know that this is a proper approach but it seemed to work well.
However, when users click "submit" in the form. The link functions correctly, BUT the page it brings the users to is still displayed within the iframe.
I instead want them to be taken to the new page in full.
Any advice?
I should clarify: the purpose of the iframe was to create a scrollable window/box so that if the outpuot was more lines then my template it wouldnt be an issue. Maybe there is another solution thats simpler.
You don't need an iframe to make a scrollable box. Just specify size for an element and use the overflow style to make it scrollable.
Example:
.formContainer { width: 300px; height: 500px; overflow: auto; }
In the form specify a target attribute so it will load in the full window
<form target="_top">
I'm not really sure I'd use an IFrame for this simply because it acts on it's own. I'd suggest looking into using AJAX. W3schools has a pretty good article on this if you're not sure where to get started.
Related
I am trying to use custom html tags (ideally within the Summernote HTML editor) to display an image. Custom tags are new to me and the examples I have seen don't seem to help me).
Essentially I want the user to add an html marker (within the html editor) which is replaced by an image eg.
'<bell></bell>' would display a custom image of a bell
Am I right in following the concept of custom HTML tags and can anyone help with a basic example?
HTML is pretty forgiving and will let you create your own elements...
However, you will also have to create your own CSS rules to match them as well.
You will also need to build up any and all behaviors you would like for the element to have (in consideration for things like JavaScript, clicks, bubbling, ... ) It looks like the Custom Element site touches on how you can make these connections.
bell{
display: block;
display: inline-block;
background-image: url(https://image.freepik.com/free-vector/golden-bell_1262-6415.jpg);
background-size: contain;
height: 40px;
width: 40px;
}
<bell></bell>
However, I would caution that using a custom element this way, may hurt a site's accessibility (image without alt text).
My takeaway/recommendation is feel free to use this for anything that is non-critical. But if the element is something that will be need to be read/seen or interacted with, its probably best to go with the original elements designed for those purposes.
I want to display a source web page with some information about it above the page in HTML. I initially though of doing this with frames, but as far as I can tell a frame can only display an HTML src, not raw html. To b e clear, if the frame tag was allowed to enclose raw html, I would want to do something like
<frameset rows="200,2*">
<frame name="info>
<h3>Stack Overflow</h3>
<p>A site for programming questions</p>
</frame>
<frame name="site" src="http://stackoverflow.com">
</frameset>
What is the right way to do this?
You can use something like this:
In your HTML page, use:
<iframe src="get.php?url=http://google.com"></iframe>
And then, you create a php (or your server language) page:
<?php
header('Content-Type: text/plain; charset=utf-8');
echo file_get_contents($_GET['url']);
?>
This way you can load any webpage, and you even can change it with javascript without reloading your html page. But be aware that everybody can get any webpage using your get.php page.
There are several ways to do this:
You can put the HTML-source code either inside a <pre> block, which leaves it raw, but it might break if your HTML-source itself contains a <pre> block.
You escape the HTML code up front, e.g. using one of the online tools like http://www.htmlescape.net/htmlescape_tool.html
You can load the HTML code with javascript, for example using jQuery and put it inside a <div> using the jQuery text function
Because this is not 1994 the best way is to not use frames. Joking aside sometimes frames can still be useful, but should be avoided if possible. The reasons for this are
You create a brand new window object. Unless you need a new window object you are wasting memory.
Some search engines used to not follow the URLs in frames. This might not be the case anymore for destinations on the same domain, but can still alter how your pages will be ranked and unless you know what you are doing you shouldn't use frames for sites that you want indexed.
If you must to use frames you will have to use a separate html file for each frame, or you could use an Iframe. But an iframe still comes with the above caveats.
You could also dynamically load a div or a td with JavaScript (jQuery, prototype, mootools, etc.. can help) but from an SEO perspective that's even worse than frames, and should be reserved for apps that require login, even then, they will stop back from working.
The closest thing to a frameset from a positioning point of view is the table. You can leave one column width unspecified and set the table width to 100% and that column will take up the maximum space available like the framesets "*" in the rows attribute. However the height of a table can not be set to 100% of the window without javascript so you can't do the same for height and rows. Here absolute positioning will help more than a table. For example
<div style="position: absolute; top: 0px; bottom: 0px; width: 100%">
<div style="height: 200px; width: 100%; background: red;">Fixed Row</div>
<div style="position: absolute; top: 200px; bottom: 0px; width: 100%; background: blue">Fluid Row</div>
</div>
Will behave like frame rows if they are the root element. To work inside another element that element must have width, height and positioning:relative.
Setting a fixed height and overflow:scroll in the style of any element, like a td or a div, in the earlier examples will give it scroll bars like a frame. Then you can have all the data on one page or include an iframe with 100% width and height for content on a different url, though as I mentioned the same caveats apply as with the frameset.
Here's the way I've set-up my site. I have a page called "news.html". The content of this page is just an iframe with a fixed size. The iframe links to "innernews.html", which is the actual content I'm trying to display. I have it set-up this way to keep every page consistently sized. The iframe prevents the height of the page from expanding due to extra content, and is scrollable.
How would I create a link targeting a specific element/header within my "innernews.html" page? If there isn't a way to achieve this, I'll remove the iframe and just plug content straight into "news.html". But still I wouldn't know how to create a link that targets a specific element/header...
You can link to an element (on another page or on the same page) only if the element has the id attribute or it is an a element with the name attribute. In both cases, put the fragment identifier #foo at the end of the URL in the link, where foo is the value of the attribute.
If the page being linked to does not contain such an attribute, and if it is outside your control, you are out of luck
Basically, you can simply create a link to specific header of a page:
<a name="your_header_name"></a>
<h1>Header Text</h1>
...
Link to the header
I strongly recommend you to remove iframes from the page if there is no reason to keep them. Iframes can complicate your life when you're trying to do something not trivial.
Have you considered using a container such as:
#newsContainer {
overflow: scroll;
height: /*whatever*/
}
For an iPhone ebook application I need to break arbitrarily long HTML documents up into pages which fit exactly on one screen. If I simply use UIWebView for this, the bottom-most lines tend to get displayed only partly: the rest disappears off the edge of the view.
So I assume I would need to know how many complete lines (or characters) would be displayed by the UIWebView, given the source HTML, and then feed it exactly the right amount of data. This probably involves lots of calculation, and the user also needs to be able to change fonts and sizes.
I have no idea if this is even possible, although apps like Stanza take HTML (epub) files and paginate them nicely. It's a long time since I looked at JavaScript, would that be an option worth looking at?
Any suggestions very much appreciated!
update
So I've hit upon a possible solution, using JavaScript to annotate the DOM-tree with sizes and positions of each element. It should then be possible to restructure the tree (using built-in XSLT or JavaScript), cutting it up in pages which fit exactly on the screen.
Remaining problem here is that this always breaks the page on paragraph-boundaries, since there is no access to the text at a lower level than the P-element. Perhaps this can be remedied by parsing the text into words, encapsulating each word in a SPAN-tag, repeating the measurement procedure above, and then only displaying the SPAN elements that fit onto the screen, inserting the remaining ones at the front of the next page.
All this sounds rather complicated. Am I talking any sense? Is there a simpler way?
You should look at the PagedMedia CSS module: http://www.w3.org/TR/css3-page/
CSS3 also support multicolumn layouts (google for "css3-multicol". I don't have enough Karma to include a second link here :-)
About your update: how about doing the layout of one single page, then use a DIV with overflow:hidden for the text part. Next thing would be to overlay a transparent item on top of that, that would programmatically scroll the inner content of the DIV PAGE_HEIGHT pixels up or down according to some navigation controls (or gestures).
The other option is to have a parent <div> with multiple css3 columns: link1, link2.
This works on Android:
<style type='text/css'>
div {
width: 1024px; // calculated
-webkit-column-gap: 0px;
-webkit-column-width: 320px; // calculated
}
p {
text-align: justify;
padding:10px;
}
</style>
The CSS multicol suggestions are very interesting! However, and I hope it's ok to respond with another question: how would you go from splitting one or more long <p> elements into columns to having one particular of these columns being rendered in a WebView? The DOM hasn't changed, so you can't pick out an element and render it. What am I missing?
Every web page load from top to bottom means first my header will be loaded then content and finally footer. How can i make it to load from bottom to up.means first footer then content and then finally header content.
Are you getting what i am trying to say.??
OR
to make it load from right to left OR
left to right..
This is probably one of the more bizarre questions I've seen here...
You cannot change the order in which the browser loads the file, it will always start at the beginning and read to the end. However, if you change the order of the file such that the footer is first and the header is last, the browser will render it in that order. As long as the CSS places each element in the correct place, it should work.
This will probably have some strange side effects since the browser will have to rerender or move elements several times as it moves the footer down the page to make room for the elements above it.
Is there really a need for this? Web pages generally load fast enough that users won't notice what direction they load in, and if your page isn't loading that fast, then I would focus on finding out why instead of trying to render it in a different order.
A web page is HTML + additional files.
The HTML file is loaded and read start-to-finish. When it gets to a point in the file where it requests another file (such as CSS, .JS, an image, etc.) it then sends a request to get that image.
You have control over that in that you can rearrange your HTML any way you want to.
What you don't have control over is how long it takes to request and then retrieve each of the individual files.
If you want full control, then you pretty much need to load everything but keep it hidden, and then reveal the items in the order you want them to appear via javascript and CSS.
All that said, though, the better answer is "No. You can't. That's just how the web works".
If this is for some kind of cool effect on your page, you could check out Page Transitions. These only work in IE though. If that is the case, it looks like you want the Wipe effect.
If you want it to just look like its loading from bottom to top then you could hide everything with css in the header and then have javascript unhide them starting from the bottom of the page - but I really don't know why you'd want to do this. Can you give us some more information on the effect you're trying to create?
Visually, you could get the sort of effect where one would see the content before the header by putting the header after the content in the HTML output then use CSS to make the header appear first visually.
If you want to scroll your content in somehow, I'd check out jquery and animations.
Assumption 1: Load content before styles/javascript.
In this assumption you care about the page loading first THEN the css/javascript executing thus allowing the user to get the content before all scripts/styles load and thus speed up the usability of the page.
To accomplish this put the style/script tags as the last elements in your body.
Assumption 2: Bizarro-world loading.
In this assumption you want the footer loaded/displayed first, then content, then header in that exact order.
1) The html head element will load before the body. No way to change that. Header = page header in my wording.
2) Use the following html pseudocode
<html>
<head></head>
<body>
<div id="footer"></div>
<div id="content"></div>
<div id="header"></div>
</body>
</html>
And in your css float everything to the right having them take up 100% width. This will cause the page to load backwards but when it is displayed it will be displayed appropriately.
#header,#footer,#content { width: 100%; float: right; }