Currently when I attempt to use data-role=collapsible there is nothing left (no button, link or content). According to the documentations it uses a h1-h6 tag but mine is inside a html5 header block.
Should I forget about the html5 semantics since this is a mobile site? Or should I attempt to make it work somehow, if so any ideas?
Link to docs: http://jquerymobile.com/demos/1.0a3/#docs/content/content-collapsible.html
Example of my current setup:
<article data-role="collapsible" data-collapsed="true">
<header>
<h2>Title</h2>
</header>
<div class="content">
<!-- some data -->
</div>
<footer>
<!-- some data -->
</footer>
</article>
jQuery Mobile is built with progressive enhancement in mind, so it assumes you want your app to work in any device possible ("work" meaning just support basic features)
Try replacing your nicely named tags with DIVs and remove wrapper around H2. Should help.
Related
Total Validator doesn't find this link and write this warning to me:
Add a skip navigation link as the first link on the page.
How can I write this link in a better way?
<html>
<body>
Skip to Content
navbar with menu
<div id="skip">
</div>
</body>
</html>
From what I have tested, they do require the text link to contain the word "skip", and the href attribute to start with a #, no matter if this element exists.
With the code you have submitted, it works with my own installation of TotalValidator (I am not saying that I would use this tool).
For information, TotalValidator web site uses the following code
<div id="skip">Skip navigation</div>
[...]
<a id="content"></a>
In spite of what the first comment says, the ID value "skip" is technically fine; it does not need to be changed to "skiptocontent". The reason why TotalValidator does not detect the skip link is probably something else. The link goes to somewhere in the page, and that "somewhere" is not explicitly marked as the main content. You can do this using WAI-ARIA landmarks.
With markup such as the following, it should be obvious for a validator that your first link is a skip link to the main content:
<body>
Skip to Content
<!-- navigation menu goes here -->
<div role="main" id="skip">
<p>...</p>
</div>
</body>
You can also use "semantic" elements, e.g.
<body>
Skip to Content
<header><h1>...</h1></header>
<nav><!-- navigation menu goes here --></nav>
<main id="skip"><!--role="main" is redundant on the main element-->
<p>...</p>
</main>
<footer>
</footer>
</body>
See the WAI-ARIA specification for documentation on main (role) and the HTML5.2 spec for the main element.
I have recently started writing some server side code for our new bootstrap themed administrative site.
In the markup I can not find where/how/why bootstrap is adding random anchor tags to some of the HTML divisions.
Example from chrome developer tools below... these exist nowhere in the markup.
Is there a way to disable this?
How does it silently create these anchor tags?
What is the reason behind this?
Here is the html , it adds a partial view with Razor to render the body, but before that you can see where the anchor from the image above is not written.
<div class="page-content-wrapper">
<div class="page-content" style="overflow:auto;">
#RenderBody()
</div>
</div>
<!-- END CONTENT -->
Can someone please help me with something. Im building a website and it includes html5. The thing that i dont understand is using the <section> function.
Preview
<section id="1">
click her to go to section 2
</section>
this is the section 2
<section id="2">
<!-- html source where <p> and etc will go -->
</section> Closed Section
The section above is what i only want to be seen in the webpage instead of showing section 2. Its pretty much like having many pages in 1 just without reloading or scrolling down.
In my css i have scroll bar locked, and ive tried many things to make that section to only be show on the webpage. Im kindof learning new html5 functions and im experiencing the things now
http://jsfiddle.net/K2w49/
I think you're a bit confused about what a function is. <section> is an HTML5 element. No function involved.
If you're talking about having a seamless fullscreen interface (i.e. they never scroll, new stuff just loads in similar to Flash applications), then it doesn't really matter what html container you use (i.e. div, section, aside)
For example..
<div class="wrapper">
<section id="slide-1" class="slide">
<!-- content -->
</section>
<section id="slide-2" class="slide">
<!-- content -->
</section>
</div>
Then max the wrapper and attach an absolute or fixed value to it...
Here's what you asked for: http://jsfiddle.net/K2w49/7/
If you're going to have a lot of content, you should use AJAX to load as needed and change the script around a little.
I have the following HTML Code, If I have a lot of text inside my div called content, the footer div doesn't move downward and the texts go over my footer div.
To see the problem, please check this link http://jsfiddle.net/LhzrQ/
Could You please tell me how to solve the problem?
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;width:400px;float:left;">
HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser.
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content. The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com
</div>
</div>
</body>
You can delete the height element of the content div.
See: http://jsfiddle.net/LhzrQ/1/
Working fiddle
remove the fixed height to the content div. it will work .
I'm doing mobile web application with HTML5 and jQuery mobile.
HTML5 Mobile Boilerplate suggests this:
<body>
<div id="container">
<header>
</header>
<div id="main" role="main">
</div>
<footer>
</footer>
</div> <!--! end of #container -->
</body>
On jQuery mobile (Section "Putting it together: Basic single page template") it is suggested
<body>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
</body>
Which way is more preferable?
What is the difference between <header> and data-role="header"?
I did try googling for that, but no answer so far.
The data-* attributes are for providing information for scripts on your website. They have no wider semantic purpose outside of providing that data to your scripts, it only means something in your page on your site.
The <header> element is an HTML5 element which is defined to mean 'a group of introductory or navigational aids' in the HTML5 specification. It means the same thing in all HTML documents everywhere.
You should use header, providing your target audience has HTML5 capable browsers and what you are marking up is a header. You could additionally use data-* attributes like this:
<header data-role="header"></header>
It shouldn't really make any difference to jQuery mobile what elements are used.
A data-* attribute contains no semantic value; it only allows scripts to access data from the markup. Therefore, the data-role attribute (not to be confused with the role attribute) is only relevant for jQuery Mobile.
The header element has semantic meaning, but if you are to use it in a jQuery Mobile application, you will need to also use data-role="header".