So i've managed to figure out how to get scrollspy working, however I'm not realizing that my table of contents is too long for the navigation. I'm wondering how I can add an accordion type functionality so that my navbar table of contents will collapse after it has scrolled passed an associated anchor. I'm essentially looking for the same type of functionality that the bootstrap website has for it's affixed sidebar. I have looked at this: Using bootstrap scrollspy for a div with collapse, to an affixed sidebar
but I'm not sure if thats the same thing I'm looking for. I've also considered using the TOCIFY plugin written by Greg Franko, but i'm not sure how to implement it. I've been reading the TOCIFY documentation but i'm not really sure what it is I have to change.
Currently my scrollspy functionality is working with this setup:
<body data-spy="scroll" data-offset="0" data-target="#navbar" style="">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" id="navbar">
<ul class="nav nav-tabs nav-stacked affix">
<li class="active h2-link">Executive Summary</li>
<ul>
<li class="h3-link">Defining Mental Health</li>
<li class="h3-link">Review Process</li>
<li class="h3-link">Findings and Recommendations</li>
<li class="h3-link">Acknowledgement</li>
</ul>
<li class="h2-link">Preamble</li>
<li class="h2-link">Section One: Our Context</li>
<ul>
<li class="h3-link">Mount Royal University: A World of Difference</li>
<ul>
<li class="h4-link">Mount Royal's Vision</li>
<li class="h4-link">Mount Royal's Mission</li>
<li class="h4-link">Mount Royal's Guiding Principles</li>
</ul>
<li class="h3-link">Health and Safety at Mount Royal University</li>
<li class="h3-link">Student Services Plan</li>
<li class="h3-link">Rationale for a Student Mental Health Strategy</li>
</ul>
</ul>
</div>
<div class="span9">
<h2 id="executive-summary">Executive Summary</h2>
</a>
<h3 id="two">Introduction & Background</h3>
<p class="ParagraphText">Mount Royal University (MRU) has a long-standing history
of student-centered leadership and learning. We are known to be an institution
that cares about the success and the health of our students, and we have strong
services that support mental health promotion and respond well to mental health
issues and concerns. In addition to excellent service providers, MRU has many
positive practices and policies in place to support students. Recent trends
suggest that the prevalence of mental health issues is on the rise among young
adults. More students are entering into university with pre-existing mental health
conditions, more are seeking help, and often issues are complex and
multifaceted. Given that rates of mental illness are on the rise, and given
that our student population has reported stress levels higher than other students
at post-secondary institutions in North American, a review of our student mental
health practices and procedures was warranted.</p>
You can see it working here: https://googledrive.com/host/0BwvPQbnPrz_LTlBjelIwemxaZzg/index.html
I'd be grateful for any help or suggestions. I apologize if my research was not extensive enough and this has already been answered.
Related
How to make a pop-up information box when you click an element.
Example like this image :
Like this image, you click "View all study equipment" an element and then get that pop-up for more information.
This is my code :
<>
<div className="description-container">
<div className="nav-tab">
<ul className="description-tab">
<li>
<a href="/" className="active">
Class Description
</a>
</li>
<li>
Testimony
</li>
<li>
FAQ
</li>
</ul>
</div>
</div>
<div className="description-info">
<div className="desc-list">
<h2>Description</h2>
<p>
Websites in today's era have become a major need that cannot be
ignored. All business or education sectors can use the website as a
tool for promotion, exchange of information, and others. Based on data
from the World Wide Web Technology Surveys, of all active websites,
88.2% use HTML, 95.6% use CSS and 95% use JavaScript. This class
thoroughly discusses the basics of HTML, CSS and JavaScript as the
three foundations of website creation.
</p>
<ul>
<li>
<p>The web is a platform that can be accessed through many kinds of devices. This is an advantage if you develop Web-based applications.</p>
</li>
<li>
<p>Web development does not require a computer/laptop that has high specifications, so it is not an obstacle for those of you who do not have a capable device.</p>
</li>
<li>
<p>The website is a platform that is reached by search engines such as Google Search, so the website is suitable as a medium for promoting business or content.</p>
</li>
<li>
<p>Developing a website includes development that is easy to maintain and easy to publish.</p>
</li>
</ul>
</div>
<div className="specs-description-info">
<h4>Learning Equipment</h4>
<h5><i class="fas fa-microchip"></i>Processor</h5>
<span>Intel Celeron (Core i3 and above Recommended)</span>
<h4>Tools yang dibutuhkan untuk belajar:</h4>
<span><i class="fad fa-window"></i>Web Browser (Google Chrome atau Mozilla Firefox)</span>
<br />
<br />
<a className="equip_info" href="/">View all study equipment</a>
</div>
</div>
<div className="sub-border-description-info">
<h3>Student Targets and Goals :</h3>
<ul>
<li>
<p>This class is intended for beginners who want to start their career in the field of web development (web creation) and need a strong foundation or foundation before studying deeper in the web field, with reference to international standards owned by Google Developers.</p>
</li>
<li>
<p>Classes can be attended by students who are IT literate so it is mandatory to have and be able to operate a computer well.</p>
</li>
<li>
<p>This class is designed for beginners so there are no prerequisites in prior understanding of programming.</p>
</li>
<li>
<p>Students must be able to learn independently, be committed, really have curiosity, and be interested in the subject matter, because no matter how good this class material is, it will not be useful without students' seriousness to learn, practice, and try.</p>
</li>
</ul>
</div>
<div className="subdescription-info">
<h3>General and Specific Objectives of the Training :</h3>
<ul>
<li>
<p>At the end of the training, participants can create a simple website using programming code that complies with global standards.</p>
</li>
<li>
<p>Build a website using simple HTML, CSS, and JavaScript code.</p>
</li>
<li>
<p>Implement a good website structure using standard semantic HTML.</p>
</li>
<li>
<p>Demonstrating the preparation of website layouts using float or flexbox techniques.</p>
</li>
</ul>
</div>
</>
Maybe you can share how to make it with React Javascript and CSS too.
This is using newest react.
Thank You
So, what you can do is use the useState hook. Let me explain:
first, import the usestate hook, check the react docs on how to do that, but if youre using vs code it will probably do that for you if you type the next part -->
this will create a state oject (popup) with the default value of false, that can be altered by the togglepopup function:
const [popup, togglepopup] = useState(false);
Then in your button/element you want to use to toggle the popup write:
onClick={togglepopup(!popup)}
this will change the current popup value to the oposite value, e.x. false => true, true => false.
then just create a piece of javascript that looks like this:
{popup && <div className={'popup-bg'}>
<div className={'popup'}></div></div>}
now just set the popup-bg in your stylesheet to position: fixed, width: 100vw, height: 100vw, display: flex, align-items: center, justify-content: center, backdropfilter: blur(10px);
and now it will center your popup div.
I'm having some issues with keeping the accordion open whilst clicking links within that accordion dropdown. It's a careers page and when I open the individual jobs, I want users to be able to open the application in a new tab. Any ideas?
https://www.trinovainc.com/careers.html
<div class="accordion">
<div class="accordion-panel careers" data-id="panel-1">
<div class="accordion">
<h4><a class="accordion-title">Application Engineer - Mobile, AL<span class="ion-chevron-down"></span></a></h4>
</div>
<div class="accordion-panel-content panel-1">
<p>TriNova is looking for an energetic and personable candidate who is a self-motivated and well-organized professional to join our team as an Application Engineer.</p>
<h4>Summary</h4>
<ul>
<ul>
<li>Provides in-depth product and application knowledge for TriNova and customers; specifically providing inside sales support for account managers. Duties to include reviewing of specifications, verifying model codes, quoting, ordering, expediting and communicating with the customer and sales force.</li>
</ul>
</ul>
<h4>PRIME RESPONSIBILITIES</h4>
<ul>
<ul>
<ul>
<li>Review all types of applications that consist of but not limited to: sizing valves, choosing instruments, sizing gamma, sizing flowmeters and creating electrical & PID drawings for various types of field instrument panels.</li>
<li>Review specifications and provide model codes for products.</li>
<li>Perform CAD drawings of best practice installation and wiring</li>
<li>Communicate with the customer, outside salespeople, manufacturers and the Area Vice President.</li>
<li>Understand commercial issues and terms.</li>
<li>Field visits with account managers for relationship development, training and as required to optimize the order process and achieve customer satisfaction</li>
<li>Improve product and technical knowledge.</li>
<li>Troubleshooting of basic device issues.</li>
</ul>
</ul>
</ul>
<h4>MINIMUM EDUCATION</h4>
<ul>
<ul>
<ul>
<li>Bachelor’s Degree in Engineering.</li>
<li>Minor in Sales Engineering is a plus</li>
</ul>
</ul>
</ul>
<h4>TRAVEL</h4>
<ul>
<ul>
<ul>
<li>Occasional travel required.</li>
</ul>
</ul>
</ul>
<h4>PREVIOUS JOB EXPERIENCE</h4>
<h4>Desired:</h4>
<ul>
<ul>
<ul>
<li>Previous related experience of at least 2 years</li>
</ul>
</ul>
</ul>
<h4>Required:</h4>
<ul>
<ul>
<li>None</li>
<ul></ul>
</ul>
</ul>
<a class="button orange apply" href="https://www.trinovainc.com/job-application.html" target="_blank">Apply Now</a>
</div>
</div>
</div>
Use event.stopPropagation():
In Javascript you have event bubbling, which means that whenever an event is fired for an element. That event bubbles up to all the parent elements. This means if you have an onlick for the accordion to close it and you click a button (or anything else) inside of it, it will close. You can prevent this by using event.stopPropagation(). This will stop the event from propagating up the DOM structure.
Example:
function prop(e){
console.log(e.currentTarget);
}
function notProp(e){
console.log(e.currentTarget);
e.stopPropagation();
}
<div id="propagated" onclick="alert('Bubbled')"><button onclick="prop(event)">Click</button></div>
<div id="notpropagated" onclick="alert('OH NO')"><button onclick="notProp(event)">Click</button></div>
In the past week I am trying to learn Angular JS. I mostly used jQuery on my projects so I am having hard time trying to get its concept. I decided to make a simple admin panel using angularjs for myself to use it on my projects. With this, I can learn angular while trying to to things. But I couldn't find a correct way to do it Since its completely new concept then jQuery.
Here is what I try to do:
I have a header bar on my page. In this header page there is some links (with dropdowns) like notification panel, user profile links, search panel. I called each of them widgets.
Here is my header bar html code:
<header class="bg-dark dk header navbar navbar-fixed-top-xs">
<div class="navbar-header aside-md">
<img src="images/logo.png" class="m-r-sm">Notebook
</div>
<ul class="nav navbar-nav hidden-xs">
<li dropdown>
<a href="" class="dropdown-toggle" dropdown-toggle>Activities</a>
<section class="dropdown-menu">
<p>Some activities</p>
</section>
</li>
</ul>
<ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user">
<li class="hidden-xs" dropdown>
<a href="" class="dropdown-toggle" dropdown-toggle>
<i class="fa fa-bell"></i>
<span class="badge badge-sm up bg-danger m-l-n-sm count">2</span>
</a>
<section class="dropdown-menu aside-xl">
<p>some notifications</p>
</section>
</li>
</ul>
</header>
As you can see. there is two ul.navbar-nav one is left widget area, other is right widget area. What I want to accomplish is make these areas modular.
when I create a new directive for header-bar, I want it to automaticly update the header-nav. I mean each <li/> will be a directive and will have its on purposes. (eg. activity widget, notifications widget, user widget, search widget etc.)
What I think about this patern:
A controller that holds in its scope the widget lists
2 Directives for left widget area and right widget area that watches changes on the controller scope's widget list and adds to its area.
A service for widget directives that helps them to add themselves to controller scope's widget list.
I thinked that there should be a priority option that lets widgets to order accordingly.
I don't know if this design pattern is right. Also I am not exactly know how to do them. Could you please tell me if this pattern is right. Also could you write a mini angular code that accomplish what I trying to do. I am sure alot of people will use that code when they try to learn AngularJS.
I am trying to create a multi level drodown menu with the following code:
<nav role="navigation" class="navigation">
<ul>
<li>Home
</li>
<li>About
<ul>
<li>Company
<ul>
<li>Brands</li>
<li>Stuff</li>
<li>More Stuff</li>
</ul>
</li>
<li>Team
</li>
<li>Goals
</li>
<li>Photos
</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Chairs
</li>
<li>Beds
</li>
<li>Fireplace
</li>
<li>Onother
</li>
</ul>
</li>
<li>Portfolio
</li>
</ul>
</nav>
With some jQuery I have hidden all the second/third level items and added a class that will show a "+" in the right side via CSS.
Demo: http://jsfiddle.net/ZJug9/1/
This works fine for most users, but when I try to use this with VoiceOver on Mac I just can't simply find a way to navigate. Maybe because I don't know all the things about VoiceOver or I am doing something wrong with HTML and JS
Is there something missing from my code that could improve accessibility for blind people using screen readers. What should I do more and why for this particular example.
Any up to date tools or documentation that will put me up to speed about accessibility. I think that the W3C accessibility website is too cluttered and confusing. I read some things about Aria too, but the documentation is really complicated and some people say that using proper markup is good enough.
Please try to answer for this example
UPDATE
I added visibility hidden to the hidden ul's as the screen reader does not speak invisible elements and I will still be able to use CSS3 for the height transition
Demo 2: http://jsfiddle.net/ZJug9/3/
Does anyone know how I could modify the following code to make a sliding multi-level menu and breadcrumbs in Angular, like this facebook help page?
My basic html code is like this:
<ul>
<li>
Electronics
<ul>
<li>back</li>
<li>Phones</li>
</ul>
</li>
<li>
Furniture
<ul>
<li>back</li>
<li>
Living Room
<ul>
<li>back</li>
<li>Bookshelves</li>
</ul>
</li>
<li>Patio</li>
</ul>
</li>
</ul>
In regards to the sliding menu, there are a ton of solutions out there. Here are some links:
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
http://blogs.sitepointstatic.com/examples/tech/css3-sliding-menu/index.html
To stay in the angular world you can switch out partials in different states or use something like ng-switch. There are really so many options it is difficult to give you a single answer.
In regards to the breadcrumbs, here are a few nice pre-built options:
jsc-breadcrumbs - a blog post with instructions
angular-breadcrumbs