I try to make semantic site based on that concept:
I have normal nav:
<nav>
<ul>
<li><a/></li>
...
<li><a/></li>
</nav>
And content in tabs which work together as same as in liteaccordion.
How it works in litecordion(#2):
Content have to be inside <li> but it's not valid. So the pure HTML, before js start has normal:
<div class="content"/>
...
<div class="content"/>
<nav/>
structure. On load, JS move every content to the right li tab:
<nav>
<ul>
<li class="foo content">
<a/>
<div class="foo content"/>
</li>
...
<li class="bar content">
<a/>
<div class="bar content"/>
</li>
</nav>
And then litecordion starts...
But I made some piece of job (#1 on image) to make it 100% semantic even after JS manipulation. Navigation in there is just on another layer than content div. It detects actual position of tab and set position of appropriate content. But there's a lot of events to calculate.
Live example, It's complicated and slow and buggy.
So I'm asking is it worth time to create semantic separate navigation and content for users with JS? Do I need to detect some search bots etc. ? The example will use ajax, but for persons/bots without js it will be full semantic.
Related
So to begin with here is the issue:
The red line should be on topicTimer0 not offset above it. The menu is setup at the top of the body with the following code (notably this is not what the original html looks like but rather after elements have been added with jquery):
<div class="col s2 z-depth-2">
<h3>timer</h3>
<hr>
<ul class="section table-of-contents">
<li><h5>topicTimer0</h5>
<ul></ul>
</li>
<li><h5>topicTimer1</h5>
<ul></ul>
</li>
<li><h5>topicTimer2</h5>
<ul></ul>
</li>
</ul>
</div>
Here is what the original html looks like:
<div class="col s2 z-depth-2">
<h3>timer</h3>
<hr>
<ul class="section table-of-contents">
</ul>
</div>
Here is a JSFiddle of it in this state:(https://jsfiddle.net/u1owwv9p/) now it should be noted on JSFIddle it adds some extra issues like adding a new topicTimer to the list and adding another topic header at the bottom, but these issues do not appear in the actual program, the only one that does is the one I have illustrated.
In case it's desired here is a link to the documentation for what I'm doing here:(http://materializecss.com/scrollspy.html).
This is a strictly css question. In order for these two elements to be centered in relation to each other they need to have the same height:
Setting the height of the <a> element to match that of the <h5> element is one solution [materialize.min.css:13]:
.table-of-contents a {
height: 110%
}
I would suggest manipulating the height, line-height and font-size values of both the <a> and <h5> elements to better understand their dependencies and hopefully find the setting that best fits your needs.
I've created a webpage that has the following structure:
Main html that uses a side menu;
Secondary html that has the information that I want to show in the main html.
I want to achieve the following. Let's say that the secondary html has a section named intro. I want to link that section to a menu item. So when I press the corresponding button, I want to show in my main html the secondary html starting at the #intro section.
This is my sidebar nav in the main html
<div id="main">
<div class="wrapper">
<!-- LEFT SIDEBAR NAV-->
<aside id="left-sidebar-nav">
<ul id="slide-out" class="side-nav leftside-navigation">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-blue active"><i class="mdi-action-view-carousel"></i> Field</a>
<div class="collapsible-body">
<ul>
<li class="active">Intro
</li>
</ul>
</div>
</li>
</ul>
</li>
</aside>
</div>
This is the section in the 2nd html.
<div class="divider"></div>
<div class="section" id="intro">
<li style="list-style: disc">
some text.
</li>
</div>
</div>
When I press the Intro button in the left side nav, I want to open in my main html the 2nd one at the Intro section.
The reason I want to load the 2nd html in my main one is that It uses different css styles and It ruins my formatting if I merge them.
Any solution?
Thank you!
It can be easily achieved with jQuery:
Here's my suggestion:
Step 1
First of all, make sure you have those sections in your secondary.html file:
<div id="intro">Intro section</div>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
An, in main.html, make sure you have an element with id=content. This will be your placeholder. Like this:
<div id="content"></div>
Step 2
Modify your anchors:
point href to a dummy url (#).
add a class so we can catch this with jQuery. I named here btn-load-section.
add data- attributes so we can add some useful data to each anchor, to grab it later. I added here data-url and data-section.
Like this:
<li>Intro
<li>Section 1
<li>Section 2
<li>Section 3
Step 3
At the end of our <body> section (in main.html), you can add this code:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
/*
Executes the script inside the anonymous function
only when the page is loaded
*/
$(document).ready(function() {
/*
select all anchors with 'btn-load-section' class (class = dot before)
and bind a click event
*/
$("a.btn-load-section").on("click", function(e) {
e.preventDefault(); //this cancel the original event: the browser stops here
var url = $(this).data('url'); //get the data-url attribute from the anchor
var section = $(this).data('section'); //get the data-section attribute from the anchor
var contentDiv = $("#content"); //select the div with the ID=content (id = hash before). This will be our target div.
/*
executes the jQuery .load function
It will load the url and search for the correspondent section (load page fragment)
e.g. will call load with "secondary.html #intro" (#intro is our fragment on the secondary.html page).
*/
contentDiv.load(url + " #" + section);
});
});
</script>
As I don't know how familiar you're with jQuery, I added some comments.
The first script tag loads jQuery from a CDN.
You can read more about the jQuery's .load function here. But basically it allows to load page fragments:
The .load() method, unlike $.get(), allows us to specify a portion of
the remote document to be inserted. This is achieved with a special
syntax for the url parameter. If one or more space characters are
included in the string, the portion of the string following the first
space is assumed to be a jQuery selector that determines the content
to be loaded.
This is just a possible approach. Hope it helps!
I want to implement carousel on my web page.I have created a plunker page for the same.
In that link, i have used CSS3 transformations to create circle effects.
In the above link i have removed the code which i had for carousel implementation because it was not working.Actually what happens is that most of the jquery caosuel available like(elastslide,liquidcarosel,flexslider) etc work only if the img(which needs to be slided) is directly under "li" tag.But in my case, i can't keep img directly under "li" because of the css3 transformations i need.(See index.html page)
http://plnkr.co/edit/PxTtJ2expidIamWUqXLj?p=preview&s=carousel
for eg
<li>
<div class="ch-item">
<div class="ch-info ch-info1" >
</div>
<div class="ch-thumb ch-img-1">
<p class="text"> Java7</p>
</div>
</div>
</li>
Could anyone please suggest how can i implement it.
I have divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?
The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>
This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/
I have a nav menu bar based on twitter bootstrap that uses scrollspy to for hightlighting.
this works by matching the value after the # in a link (e.g. <a href="#foo"> when <div id="foo"> scrolls into view). pretty basic, here's the doco: http://twitter.github.com/bootstrap/javascript.html#scrollspy
my problem comes when I introduce a link to a bootstrap modal dialogue box within an element that is being spied on. imagine I have:
<ul class="nav">
<li>a link</li>
<li>modal</li>
<li>a different link</li>
</ul>
<p> .. my page .. </p>
<div id="info"><a name="info"></a>info on my product</div>
<div id="products"><a name="products"></a>a list of my products</div>
<div class="modal hide fade" id="demo" tabindex="-1" role="dialog">
<div class="modal-header">my header</div>
<div class="modal-body">some content</div>
<div class="modal-footer"><button>close</button></div>
</div>
<p> .. more page </p>
the div that represents my modal overlay also uses the #id-of-target format for its href, but since it's included inside the nav (of course) then scrollspy ALSO highlights when the (hidden) div is in view. Depending on where the modal code in on the page, this confuses the menu system's highlighting.
I can see that scrollspy should be modified to only link to items that are visible (and therefore not activate when "demo" scrolls into view) but can't work out how to modify the plugin to only fire if the element is visible, or override the event some other way.
can anyone give me some pointers?
funny how typing out a question sometimes makes you think in the right way to solve it, where just thinking about it does not.
to make this work, I modified the scrollspy component of bootstrap so that it tests the target is hidden and bails out of the activate routine (also doesn't raise the activated event, since it's not active)
here it is: around line 1432 for me (+if ..
, activate: function (target) {
var active
, selector
if (target.is(":hidden")) return
this.activeTarget = target