In creating a page with blog-style content in the middle section, it would be good to use embed/iframe to load content from a separate (html) document into this section. Such a solution would make it more straightforward to update the blog. However, the question is if it's possible to do this without PHP and MySQL (both of which are beyond the scope of this coder).
The code as it stands goes something like this:
<section id="bio">
<p>Name</p>
<ul><li>Some data</li></ul>
</section>
<section id="blog">
<iframe src="blog.html" style="width:100%;height:100%;border:none;"></iframe>
</section>
<section id="links">
<ul><li>Links listed here</li></ul>
</section>
Now, with a blog of some length scrollbars pop up around the blog section. Would it be somehow possible for the iframe content to be considered an intergral part of the page so that the entire content of the iframed file appears prior to the last section, and so that the scrollbars include the entire page content (rather than only the iframe content)?
Iframes can't do that by definition.
However, there are some libraries to help you resize the iframe according to it's content.
Check this: https://github.com/davidjbradshaw/iframe-resizer
You'll need to place a script inside your blog.html and other one in your host page HTML.
Related
switching a content pipeline away from wordpress.
everything is going well but there is a tiny difference that has to be simple but throwing everyone for a loop.
on this production page, when you scroll the main page... you only see the 'main' content when it's visible:
https://pracplay.com/partners
(same as: https://pracplay.com/index.php/partners/ )
on the staging page, [if the window is resized, or you're on mobile] you can usually see the non-visible content from 'main' in the footer (see attached pic, or live at: https://stage.pracplay.com/partners )
what we've tried:
running diffs of production html (very little js used)
fixed everything obviously off
it appears to be something related to z-index of the footer div, or the transparency of the footer div.
also tried:
force zindex of footer absurdly high it has no effect
changing the opacity or playing with background color alpha channel of footer doesn't reproduce it.
Our issue should be even simpler than this since we're just reproducing an existing site, with all same css. So it should be a class name issue on a div or something even simpler... but the diff isn't pointing out anything so modifying raw html to identify the problem is where we're at in this post.
this has to be so simple to fix i figured i'd try to post my understanding here and see if it generated any suggestions or ideas.
attaching a screenshot for experts who don't want to look at site but know problem from observation/experience.
(we primarily develop non-web applications but it's been exciting to get away from wordpress and have web use same processes that our other apps use.)
any help appreciated!
Ok asked someone with fresh eyes take a look.
It was pretty simple and had nothing to do with fixed/relative, z-order nor transparency (at least not directly).
They ran staging-v-prod diffs again on the actual page mentioned here.
It was pretty clearly missing one div wrapper, with class id of 'page-content'
This page-content class was applying an explicit white background to the main/central content of pages. So when it was missing, these divs were transparent and were bleeding into the footers.
So while it appeared like a footer issue, it was actually a page content issue.
Now staging matches production in this respect.
A particularly helpful tool was textcompare's html comparator view:
https://www.textcompare.org/html/
Which was a little easier to spot the html differences than a regular diff.
Your Layout Structure is a bit weird but you can fix it by putting the footer container inside #page or inside of #main. The page is overlapping the footer because of the fixed positioning. I recommend using a common clean layout structure and avoid unnecessary usage of containers.
You could simply do something like this:
<body>
<div class="page-wrapper">
<header>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
</header>
<main>
<section>
<div class="grid">
....
</div>
</section>
</main>
<footer>
....
</footer>
</div>
</body>
Previously I'd lay out a main container on an HTML page to wrap most of my body content in. for example, an 'about' page:
<header>
<!--header markup -->
</header>
<div id="container">
<!--articles, images, etc for the about section -->
</div>
<footer>
<!--footer markup -->
</footer>
would HTML5's <main> tag be ideal to take the place of my 'div id="container"' in this case?
In a word yes.
The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
w3c specs
See here for more info
You should use it for content that is unique to the page. So yes, headers and footers are naturally left out. From there on, it depends what else you have there. If there's a sidebar, for example, with template-loaded content that is common across many pages, you should consider leaving that out as well.
Just replace the tag of most important part of your website with <main>. Mostly <main> will replace <section>(In your case, <div>, and originally it should be <section>). Notice that I put emphasis on the word part because <main> is not for sectioning your document, its purpose is just: point out what's the most important part of your website/application.
I have a Jekyll site with a main column and a sidebar. The main template looks a bit like this:
<div class="main-column">
{{ content }}
</div>
<div class="sidebar">
<!-- this is the issue -->
</div>
Now, getting post content into the main column is easy. But what can I do to move some part of a post into the sidebar? An example of a post:
# This is a Markdown post
Some regular content.
This should be in sidebar.
I have tried the capture command to save a part of the post into a variable and insert it into the sidebar div later. That doesn’t work, since the variables set in the page don’t make it back to the template (related Stack Overflow question).
I considered putting the sidebar contents into the YAML front matter, but that’s an ugly hack. (The content can be quite long, if not anything else.)
Also, I want to keep the sidebar content in the same file as the main post.
What are my options?
The best option is to put your sidebar markup into your post content, not the main template. If it is content related to that specific post then that is also the logical place for it to live; with the rest of the post content.
Alternatively you could simply manipulate a section of content by adding a class to a paragraph of your markdown, e.g.
My lorum ipsum sidebar content.
{: class="sidebar" }
I am using jsPDF to generate PDF's out of dynamic HTML content of my web-application.
Right now I am trying to give those PDF's a unique layout. I want to add a "header" & "footer" for each page of my PDF. jsPDF generates page breaks automaticly and there is no command to act on those.
Is there any known work-a-round to implement a fixed header/footer for each page without depending on doc.addPage();
Looking forward for any help or ideas.
See https://github.com/MrRio/jsPDF/pull/260
You can use HTML's elements <header> and <footer> for that purpose, for example:
<footer>
<div style='text-align:center;'>Page <span class="pageCounter"></span>/<span class="totalPages"></span></div>
</footer>
Please take a look at this example -
I know I'm using the footer/nav correctly but the <side> and <section> is kinda confusing.
The <figure> will be just one huge logo. Beside that will be the main content. Would <aside> be proper use? Its not side content like a sidebar so thats why i'm asking.
Also the <section> would be columns for the content, would that be right?
HTML first of all gives meaning to content. The <aside> element is for "sort of but not really related content." You shouldn't put your main content in it. A <div> or <article> element should do fine. Position it on the side using CSS.
<aside> - content that is considered separate from the main content of the page
You could put the main content inside an <article> element.
<figure> - for diagrams, illustrations, photos, and code examples
Since a logo is not a stand-alone unit, I wouldn't use the FIGURE element. Consider just setting that image as a page background or something - it's just one image, so there is no need for much markup here.
<article> - could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content
Source: http://html5doctor.com/the-article-element/