So, my question deals with why my drop down is not working for my navigation bar. It works when all the HTML is in one document but not when I'm using ng-include. I'm not using Bootstrap but MetroUI-CSS.
index.html
<div id="container">
<div id="header" ng-include="'app/templates/header.html'"></div><!-- End header container -->
</div>
partial/header.html
<div id="site_nav_bar">
<nav class="navigation-bar dark fixed-top shadow">
<nav class="navigation-bar-content">
<item class="element"><i class="icon-keyboard" style="padding-right: 1em"></i> Home</item>
<item class="element-divider"></item>
<item class="element">About</item>
<item class="element">Contact</item>
<ul class="element-menu">
<li>
<a class="dropdown-toggle" href="#">Blogs</a>
<ul class="dropdown-menu" data-role="dropdown">
<li>
Programming Blogs
...
</li>
So basically, when I click on Blogs it does not drop down the menu.
Bootstrap evaluates the DOM only when it's ready (ready event), therefore if your dropdown exists at this point, it would work, otherwise if it will be added to the DOM later on (using ng-include for instance) it won't.
Behind the scenes ng-include manipulates the DOM for you and performs an AJAX request to retrieve the HTML you want to include. bootstrap is not aware of that and won't wait for the DOM to be updated.
to avoid that use bootstrap-ui
Related
I am relatively new to Accessibility standards in my Front End code.
The question I have:
For accessibility, is it better to load all HTML content initially and show/hide it, via a "hidden" attribute?
Or can I dynamically load the content and fill it with the appropriate attributes?
And if so, what attributes do you recommend I add to the content to notify the user that the content has been updated and/or changed?
For example:
I have a navbar with some buttons/tabs that load the appropriate content. I can load all content and then show/hide is, similar to below:
<nav>
<div class="tabs" role="tablist">
<button
id="tab-1"
role="tab"
aria-controls="tab-content-1"
aria-selected="true"
<!-- onClick={show/hide associated content} -->
>
Tab-1
</button>
<button
id="tab-2"
role="tab"
aria-controls="tab-content-2"
aria-selected="false"
<!-- onClick={show/hide associated content} -->
>
Tab-2
</button>
</nav>
<div>
<!-- Content for Tab/Button #1, preloaded and hidden/shown from button click -->
<section
id="tab-content-1"
role="tab-content"
aria-labelledby="tab-1"
hidden
>
Tab Content-1
</section>
<!-- Content for Tab/Button #2, preloaded and hidden/shown from button click -->
<section
id="tab-content-2"
role="tab-content"
aria-labelledby="tab-2"
hidden
>
Tab Content-2
</section>
</div>
Or I can dynamically load the content via the tab/button click
<nav>
<div class="tabs" role="tablist">
<button
id="tab-1"
role="tab"
aria-controls="tab-content-1"
aria-selected="true"
<!-- onClick={load appropriate content and HTML } -->
>
Tab-1
</button>
<button
id="tab-2"
role="tab"
aria-controls="tab-content-2"
aria-selected="false"
<!-- onClick={load appropriate content and HTML } -->
>
Tab-2
</button>
</nav>
<div>
<!-- Dynamically load the associated Tab Content via Javascript Here
<section
id="" => dynamically set 'id'
role="" => dynamically set 'role'
aria-labelledby="=" => dynamically set 'arria-labelledby'
>
// Dynamically set Content
</section>
-->
</div>
First of all, you should use CSS display:none rather than aria-hidden to hide contents. The attribute aria-hidden should only be used in very specific situations.
I suggest to make a search on when you should and shouldn't use aria-hidden, and why it is so. Many questions already cover the topic well.
Back to your initial question, in terms of accessibility only, it doesn't change much if the content is just made visible or if it is loaded.
Use an aria-live region to tell that the content is loading, in case it may take a while to load.
However, don't use aria-live for the updated/new content itself, especially if it is long and/or contains focusable elements.
Deciding whether you should show/hide or dynamically load is mostly not a question of accessibility. It depends much more on initial and subsequent load times, as well as the level of responsiveness you expect at which moment.
So i'm building a small website on gh-pages and i'm using a gh-pages markdown theme.
To implement a navigation bar i've slightly modified the "default.html" file to also feature a bar inside the header.
Now i'd like to link or navigate between pages while still keeping the theme, header and such. But when using
Another Page
it reloads an entire new blank page.
But when first visiting https://myPersonalPage.github.io/ it loads up just fine and it does load index.md properly.
So in short, I'd like to change the content of a gh-page without changing the header and I don't know how.
In the default.html file my links look like this:
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<h1 id="project_title">MyProjects</h1>
<div id="navbar">
<ul>
<li>HOME</li>
<li>PROJECTS</li>
<li>ABOUT ME</li>
</ul>
</div>
</header>
</div>
And in the default.html file the content-load looks like this:
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
{{ content }}
</section>
</div>
Alright, i figured it out. Instead of projects.md, i had to link on projects.html and everything works out fine.
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
I'm facing an issue with Kendo UI:
When trying to generate a list dynamically (I want it to be a listView), with the onShow method. It doesn't seems to attach any of KendoUI functionnalities nor styling. like if the kendo "Widget generator" has already done its job and don't touch the newly added content.
In my case:
Here is the HTML:
<div data-role="view" id="profile" data-title="Profile" data-layout="overview-layout" data-show="initProfile">
<div id="profileContent"></div>
She/He Might Like:
<div data-role="scrollview" data-page="0">
<div class="login-scrollV" id="page1" data-role="page">
</div><div class="login-scrollV" id="page2" data-role="page">
</div><div class="login-scrollV" id="page3" data-role="page">
</div>
</div>
</div>
and with Mustache JS, I generate this content dynamically and append it to #profileContent
<script id="profileTemplate" type="text/x-handlebars-template">
<ul id="profileList" data-role="listview" data-style="inset" data-id="{{id}}" data-type="group">
<li>Profile
<ul>
<li><h2>{{firstname}} <span>{{lastname}}</span></h2><img src="{{picture}}" /></li>
<li>Gender <span class="sales-up">{{genre}}</span></li>
<li>Notation <span class="sales-up">Not Yet Ready</span></li>
</ul>
</li>
<li>Center Of Interests
<ul>
<li>Rock</li>
<li>Opera</li>
<li>Exhibitions</li>
</ul>
</li>
</ul>
</script>
In the end, the content is generated the way I told Mustache to do it but Kendo doesn't applu any of its functioannlity to this listView nor any style.
I understand why (I assume the html should be there from the beginning), so my question is:
How Can I find a workaround to created a list View Dynamically with the onShow method with Mustache handlebars (ideally) that Kendo UI would recognize and then apply to it the list Views functionalities?
Many Thanks
You probably need to run kendo.bind or kendo.init on the profileContent div, after you populate it.
I normally use Ruby on rails to develop my work with sublime text as my text editor, but today I am using just using notepad and creating a site locally. Now normally all my js and css is rendered perfectly via the asset pipeline in rails but I am having trouble getting the js to work, in particular the dropdown button in the navbar.
i am calling Jquery within the header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
And I am calling my bootstrap.js file
<script src="js/bootstrap.js" type="text/javascript"></script>
The css for the navbar is as follows
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Am i missing something blindly obvious because the button is not responding?
Any help appreciated
Have you included the required bootstrap.css stylesheet?
<link href="css/bootstrap.min.css" rel="stylesheet">
Edit 1:
Here's a jsBin with your HTML/bootstrap. If you aren't seeing the same output then something is indeed wrong. If you're expecting some behavior when one of the navbar buttons gets clicked, then it isn't actually an error: there is no js behavior attached to the click of the navbar.
Bootstrap will provide you with a "prettified" navbar, it changes the aesthetics but not the behavior, you still need to connect to the individual clicks and define your own behavior for them.
Edit 2:
To connect to the clicks you have to get your menu items and use jQuery to define onclick behaviors. An example would be to define unique ids for each navbar item
<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About Us</a></li>
And then retrieve them with jQuery's selectors and attach click handlers:
$("#home").click(function() {
alert('home clicked');
});
$("#about").click(function() {
alert('about clicked');
});
I've edited the jsbin to add this example.
The CDN wasnt pulling the jquery so i have hosted the file locally now and it works fine