I'm having lots of trouble doing this. Basically I have a "Contacts" button. The button works perfectly fine, when you click the reveal comes down but fails to show the Tabs section that I want to be shown.
I tested to make sure my Reveal and button were written correctly by doing this: I replaced the sections tabs with simple tags and random words. The random words and paragraphs are shown perfectly when clicking on the button, however the Sections Tabs do not get shown for some reason. Am I missing something? Here's my markup for the Reveal including the sections Tabs:
<div id="second-modal" class="reveal-modal">
<div class="section-container tabs" data-section="tabs">
<section class="active">
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
</div>
I'm using foundation-4 and using their example code. It's a basically a straight copy and paste.
This is straight from the Foundation docs...
Looks like you have to initialize the tabs when the modal is opened.
$('#myModal').on('opened', function () {
$(this).foundation('section', 'reflow');
});
http://foundation.zurb.com/docs/components/section.html
(Scroll to the very bottom)
Related
I understand fullpage.js is solely used to build single page vertical slider orienated sites where the content of the site transitions from slide to slide going up or down respectively.
Having successfully implemented and somewhat customised the vertical slider into new website layout, I am unable to view the others sections of the website that come below it.
The vertical slider it seems prevents the rest of the html section blocks below it to appear. Its as if the vertical slider is saying: 'I AM THE WEBSITE' ( ignores w/e the hell I place beneath it ).
Here is what we have:
<div id="fullpage">
<div class="slide" id="slide_1">
<div class="slide_caption">
<h1>This is slide 1</h1>
<h4>slide 1 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_2">
<div class="slide_caption">
<h1>This is slide 2</h1>
<h4>slide 2 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_3">
<div class="slide_caption">
<h1>This is slide 3</h1>
<h4>slide 3 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_4">
<div class="slide_caption">
<h1>This is slide 4</h1>
<h4>slide 4 description</h4>
Read More
</div>
</div>
</div>
<section class="full_width_container" id="home_container_1">
<!-- extra mark up for other stuff like latest products etc -->
</section>
<section class="full_width_container" id="home_container_2">
<!-- extra mark up for other stuff like news etc -->
</section>
<section class="full_width_container" id="home_container_3">
<!-- extra mark up for other stuff like testimonials etc -->
</section>
<section class="full_width_container" id="home_container_4">
<!-- extra mark up for blog post links -->
</section>
<footer>
<!-- extra mark up for footer items -->
</footer>
My question is - how the hell do I get the other sections below, i.e home_container_1, home_container_2, home_container_3 to show up ?
I tried applying overflow-y:scroll !important; on body whilst applying overflow-y:hidden on fullpage but it didn't quite work.
If somebody could point me in the right direction in terms of whats happening I would appreciate it no end.
SOLUTION: IF Anybody ends up having this problem, the issue is 99.999% related to not including the DOCTYPE html declarative.
grrrrr # this schoolboy error. Why, despite so many years of web dev am I making these kind of idiotic mistakes :| ? Alvaro the author of fullpage.js clearly mentioned this in his docs, 'make sure to include DOCTYPE html declarative else the heights wont work properly..'
So there you have it folks, the issue was the above.
Now the vertical slider stays put, takes up 100vh of the screen and if you use the mouse scroll it scrolls the ENTIRE content in the viewport so you can view whats beneath the slider (the other website sections).
This Question was conceived when studying the answer to StackOverflow question #37370944.
In my database, I have html markup, for which I'd like to give my html-agnostic web-app users to have a tool to edit it in a browser. This is referential materials, mostly notes and source citations. For this purpose I use an html form generated by the server side, and a JavaScript widget, i.e. ContentTools, which, on form submit-button click event, collects a string of resulting html markup from the edited region and sets it as value on the designated form field.
The problem is that, as I discovered, ContentTools doesn't allow editing of the nested markup, e.g. inside html block elements, i.e. <div>, <section>, <article>, <aside>, etc., out of the box or at all (I do not know). To demonstrate this, I modified a forked JSFiddle example provided by the StackOverflow question #37370944 mentioned above. So, please take a look at this fiddle.
There are three link-buttons described in the markup:
The first one is a stand-alone <a> which is as an immediate child of the wrapper div holding the edited region content (<div data-name="main-content" data-editable="">).
The second link-button is placed inside a nested <div> with set attribute data-ce-tag="text" to presumably enable recognition of the content as editable text.
The third link-button is placed inside <p> tag which is as an immediate child of the wrapper div.
All three link-buttons wrapper-elements (<a>, <div> and <p>) have special css class "js-has-anchor" to enable change of the tools on the tool panel via the "focus" event bound to the editor Root.
It turns out, the "focus" event is only triggered for <p> (case 3) elements in the document, not for <div> (case 2) or <a> (case 1). As a result, only for the 3rd link-button a set of panel tools is updated. Moreover, the <div> and <a> elements cannot be edited.
The html markup in my database is mostly a mess, previously edited in CKEditor in some cases, or entered directly by hand. I'd like to make all available content to be readily recognized by ContentTools as editable (not "static") including nested structures similar to the one in the sample below. The main idea of the provided html sample is that it's a nested structure (not just a list of <hN>, <p> and <img> elements as in the edited page__content region from the ContentTools demo), every <section> consists only of <article> elements, and each article consists of a header(<hN>) and either another section, or a wrapping <div> holding all the content of this article.
And I'd like this structure not to be broken if it is already in place, and ideally enforced if it is not there yet.
But all this is a single region which is persisted in one text field of my database (no separate regions are possible).
<h1>Section 1 heading</h1>
<section class="mb-5">
<article>
<h2>Sub-Section 1.1 heading</h2>
<section class="mb-3">
<article>
<h3>Chapter 1.1.1 heading</h3>
<div>
<p>Some text</p>
<figure>
<img src="pic.jpg" alt="Some text" style="width:100%">
<figcaption>Fig.1 - Picture Caption</figcaption>
</figure>
<p>Some other text</p>
</div>
</article>
<article>
<h3>Chapter 1.1.2 heading</h3>
<p>Some text</p>
<figure>
<img src="another_pic.jpg" alt="Some other text" style="width:100%">
<figcaption>Fig.2 - picture caption</figcaption>
</figure>
</article>
</section>
</article>
<article>
<h2>Sub-Section 1.2 heading</h2>
<section class="mb-3">
<article>
<h3>Chapter 1.2.1 heading</h3>
<div>
<p>Some text</p>
<p>Some other text</p>
</div>
</article>
<article>
<h3>Chapter 1.2.2 heading</h3>
<p>Some text</p>
</article>
</section>
</article>
</section>
So, is it at all possible with ContentTools, and I'd appreciate an example with "customized" tool panel content from the JSFiddle to work for all link-buttons (and all of them be editable), not only for the one wrapped in the <p> tag.
I wrote some custom HTML code in my Wikidot article - instead of the "original" Wikidot syntax, I have to use <a href="/page"> for links.
The content of my custom HTML block is like this:
<section class="intro">
<div class="container">
<h1>Headline-line text</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>Time value </time> Text. Link here.
</div>
</li>
</ul>
</section>
The problem is that it loads the entire content of the HTML into that carefully selected small portion of the original site.
I can only assume that it has something to do with <div>s, as I've already seen this issue on other sites. Hence my assumption is that there must be a general source of this issue, and this is why I'm asking.
What's the reason of this problem and how can I avoid it?
I'm working with a codebase where there is a list of articles rendered inside a section element that is wrapped by a link, like this:
<a href="link/to/article">
<section>
<h2>Article title</h2>
<img src="path/to/article/img">
<p>Short description</p>
</section>
</a>
The content inside the section tag is the title, the image and a short description. All the article previews are rendered like this in a tabular/grid-like layout. When a section is clicked, the whole contents of the article are rendered in a new page.
The reason for this is that the whole section area should be clickable. Since this markup doesn't seem too semantic for me, I was wondering if this code is correct, and if it is not, is there a better approach to make a whole section clickable?
What you've done is fine and correct and works well. The W3C even states:
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
They include an example similar to yours.
You can use JQuery as such to achieve that.....No need using the link tag
<section id="clickable_section">
<h2>article title</h2>
<img src="article/img">
<p>Short description</p>
</section>
<script>
$(document).ready(function() {
$("#clickable_section").click(function() {
//Do something....
//Continue doing something,like redirecting the user to the new page
});
});
</script>
Having an anchor work like that is pretty kludgey. Might be better to do something like this:
html:
<section data-link="https://www.google.com">
<h2>article title</h2>
<img src="path/to/article/img">
<p>Short description</p>
</section>
css:
section {
cursor: pointer;
}
javascript (jQuery):
$('section').on('click', function(e){
e.preventDefault();
window.location.href=$(this).data('link');
})
I am learning HTML 5 - going pretty smoothly.
My question is that I have a home page, header, menu and below this 3 content blocks, evenly spaced. They each contain various copy, with header text. For example,
Column 1
About Us
Lore Ipsum...
Our Advantage
Lore Ipsum...
Column 2
Our Products
Lore Ipsum...
Column 3
Contact Form
Twitter Feed
Contact Us
Lore Ipsum...
What is the best markup for this? Normally I would but each column in a div. Would this be best?
<div id="column1">
<section>
<h2>About Us</h2>
<p>Lore Ipsum...</p>
</section>
<section>
<h2>Our Advantage</h2>
<p>Lore Ipsum...</p>
</section>
</div>
<div id="column2">
<section>
<h2>Our Products</h2>
<p>Lore Ipsum..</p>
</section>
</div>
<div id="column3">
<form...
<div id="twitter">
<script...>
</div>
<section>
<h2>Contact Us</h2>
<p>Lore Ipsum...</p>
</section>
</div>
I'd say your posted code is fine, although personally I'd use <header><h1></h1></header>, instead of <h2></h2>, since the headings in this case are section headers (this is optional though).
More information on section headers can be found at:
http://html5doctor.com/the-header-element/
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
Consider using the <article> element instead of the <section> element, at least for "About Us" and "Our Advantage". These are almost certainly going to be syndicatable units of content so <article> is more appropriate. Possibly for the other sections too, but it really depends on what the lorem ipsum text says.
Otherwise, what you've got is good. <h2>s for your headings are fine if that's what you want to use. Neither <h1> nor <header> are giving you anything extra.
I would have done the same as you. As long as the sections in each div aren't strongly related. In that case I would change the divs to sections that contains sub-sections. Divs are still valid in HTML5 but are more of general block level containers.
What is the purpose of the div? It serves no function from what I can tell. All the section elements can be styled as they are except 'column3', perhaps.