I'm building an app in Angular 1 and have seen that I'm not supposed to interact directly with the DOM, rather I'm supposed to build custom directives to handle that interaction. I'm a bit new to web development in general, so I'm not sure how I would translate the JQuery examples given on the documentation at all of the UI Framework websites I've been looking at. For example, MaterializeCSS uses JQuery to hide and show the side-nav.
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
<script>$(".button-collapse").sideNav();</script>
Another example (what I'm currently stuck on) is their modal dialog.
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
I have tried to see what's involved with calling the .modal() function from wihtin my controller, but it looks like it's a function that is returned from the JQuery selector. For functions that chain off the JQuery selector, is there no other way to invoke them, other than writing a directive and using JQuery in the directive? Or can I replace the JQuery usage with the element.bind and element.$apply stuff, invoking the UI Framework functions with the built in Angular element object? If not, do I have to worry about any life-cycle management since I'm interacting with the DOM through JQuery? I've read a couple of posts, but none seem to answer my question because they don't address 3rd party functions chained off JQuery.
Angular users are quite blessed with a big community, you can pretty much find a ready made Angular wrapper for every popular Jquery plugins.
By typing MaterializeCSS Angular in Google I found this plugin angular-materialize, it should be easier to integrate into your Angular app than the Jquery version.
If you are interested, you can read into his source code to learn how to wrap particular component into Angular directive, such as sidenav
Related
I have a resume displayed on a web page. which contains sections (paragraphs) like education, experience, projects etc, here client wants to move these sections on the page by dragging mouse on the paragraphs(sections) of web page. how can i implement this feature. I am using ruby on rails framework. is there any rails gem or jquery framework for achieving this task?
Yes, jQuery UI Sortable, try it: https://jqueryui.com/sortable/
If you have something like this:
<div id="sections">
<p>...</p>
<p>...</p>
<p>...</p>
</div>
Then all you need to do is to install Sortable and:
$( "#sections" ).sortable();
You can find full API documentation here: http://api.jqueryui.com/sortable/
And here's jQuery UI for rails: https://github.com/jquery-ui-rails/jquery-ui-rails
I am working with a page featuring a Bootstrap accordion. It works correctly, but I was asked to implement a feature whereby a specific collapsible element is "open" when linked from various other pages - so "www.whatever.tld#e2" would take you to the second element already opened. There was no problem getting something to behave like this, it's adequately covered by various other pages on StackOverflow and elsewhere. The implementation I tried was as follows:
$(window.location.hash + '.collapse').collapse('toggle');
This functions as desired, it opens the correct section of the accordion. However, after navigating to the page like this, it "locks" the page in that form - it no-longer responds to any clicks on accordion elements and you cannot close the opened element or open others. Nobody else seems to have been experiencing this problem or did not mention it if they did e.g. here:
Bootstrap Collapse - open the given id fragment
bootstrap-collapse.js hide and show events
I have attempted variations on this code, e.g.
var anchor = window.location.hash;
$(".collapse").collapse('hide');
$(anchor).collapse('show');
This behaves unexpectedly - all elements are forced open, and cannot close. Removing the second line fixes this issue, but then otherwise behaves as the original code I specified does - it opens the targeted element, but freezes the accordion.
The following is an excerpt of the structure of the accordion I am working with. I would prefer not to have to modify this unless I can't avoid it, since I'm trying to stick with organisational style guides and this accordion code is a standard accordion that people use on our CMS:
<div id="accordion-asset-listing" class="accordion" id="accordion" role="tabpanel">
<section class="accordion-group" role="tab" aria-selected="false">
<header class="accordion-heading">
<h3><a aria-controls="pharmacy" href="#pharmacy" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-asset-listing">Pharmacy</a></h3>
</header>
<div id="pharmacy" class="accordion-body collapse" aria-hidden="true" role="tabpanel">
<div class="accordion-inner">
<p><!-- content here --></p>
</div>
</div>
</section>
I am not amazing at JS or its use so any pointers people had to put me on the right track would be greatly appreciated.
Got it sorted in the end although I still don't understand why it originally broke. After jumping into the .js files that the site called upon, I ended up manually reconstructing the couple that I wanted and calling them in code. This is not a good solution but it has worked, at least.
Since the site (a university web-site managed on Squiz Matrix CMS) uses a sort of "customised version" of Bootstrap, Jquery and such that seems to strip out some elements of those things, there may have been some bugs introduced specific to our version of these things.
I've started using BEM methodology to decouple my HTML and CSS ... and it works pretty well most of the time. Even if its only your personal opinion, i would still like to know how others deal with this:
Let's assume we need to build a simple navigation. The HTML looks similar to
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href=""></a>
</li>
<li class="nav__item">
<a class="nav__link" href=""></a>
</li>
</ul>
</nav>
I'm not sure if i need the ".nav_item" and ".nav_link" or if it's better pratice to use this instead
.nav__list > li { CODE }
But my real issue is how to deal with "active" classes (not just for navigations, but in general). Is it better to use specific "active" classes like ".nav_item--active", so you can just use a single class inside your CSS file or if using more general class names like ".is-active" works better? But then you need to specify your classes inside your CSS file like ".nav_item.is-active" or (which looks even worse to me) ".nav__list > .is-active".
Every method has its downsides. To me the second way looks wrong if using BEM, but if you are going for the first way you run into "troubles" with your JS, because you need to "hard-code" the specific class name into your JS
someElement.addClass(".nav__item--active");
That way your JS relies too much on your HTML structure (or doesn't this matter too much?), which might change... And this leads to the second question. I heard that it's good to decouple not only your HTML and CSS but also your HTML and JS. So you could for example use those ".js-" classes to add click events and all that kind of stuff to elements instead of using your "styling" classes to trigger those kind of events. So instead of using
<button class="btn btn--large"></button> // $(".btn--large") in jQuery
you would have
<button class="btn btn--large js-dostuff"></button> // $(".js-dostuff") in jQuery
I think this in combination with HTML5 data-attributes works for pretty much for anything, but i'm asking myself what happens to navigation or accordions or stuff like that. Is it better for maintainability to use those ".js-" classes as well (for every item)
<nav class="nav">
<ul class="nav__list">
<li class="nav__item js-open-subnav">
<a class="nav__link" href=""></a>
<ul class="nav__sub">
<!-- ... -->
</ul>
</li>
</ul>
</nav>
or should i use $(".nav__item")... in my JS in this case? But that way you don't really decouple your HTML and JS (at least as far i understood this topic). It's not just about navigations, but about all those kind of javascript interactions, like accordions, sliders and so on.
I'll hope you guys can share some best practices for those questions and help me out.
Thanks
BEM methodology says you shouldn't use any global selectors such as tag selectors so use nav__item and nav__link.
The same story with active modifier. You shouldn't have any global entities (you can use mixes but that's a bit different thing). So the best way is to go with nav__item--active (or nav__item_state_active in classic BEM notation).
And BEM has sollution for JS, HTML (or templates) and actually any other block's technology.
The main idea is that block knows everything about itself: how it looks (css), how it works (js), what html it should produce (templates), its own tests, documentation, images, etc.
And as css technology of the nav block applies rules in declarative way (you define some selector and all the nodes which match this selector are styled with these rules) the same way you can describe js of the nav block.
Please take a look at http://xslc.org/jquery-bem/ which is jquery plugin which gives you possibility to work with blocks in BEM way easily.
And in case you use some build system you can put all these technologies in the same folder on filesystem:
blocks/
nav/
__list/
nav__list.css
nav__list.js
__item/
nav__item.css
nav.css
nav.js
nav.test.js
nav.png
nav.md
Having such file structure you may go deeper to what BEM actualy is and try i-bem.js: http://bem.info/articles/bem-js-main-terms/
Actually, js in terms of bem often considered as not such good idea.
For instance, bem is great to localize and move relations in css to horizontal scale, but in terms of js it's hard to abstract logic in very complex applications.
In react.js you can use it for class naming, and that's it (we use it this way and it works fine!).
I wrote a library for decoupling problem with naming.
I am trying to use Twitter Bootstrap to create a website detailing the statistics of Minecraft servers, to make it easy for my users to know which server is online. However, when I use the alert component in Twitter Bootstrap, I cannot dismiss the alert. Here is my code:
<!DOCTYPE html>
<title>Dillon's Minecraft Servers</title>
<ul class="nav nav-tabs">
<li>Home</li>
<li class="active">Vanilla</li>
<li>Feed the Beast</li>
<li>Big Dig</li>
</ul>
<div class="hero-unit">
<h2>Vanilla</h2>
<p>The Vanilla server runs just plain Minecraft. It has some advanced features like Mob Arenas, anti-cheat, and MMO-like leveling.</p>
</div>
<div class="alert">
×
<strong>Warning!</strong> This server is currently offline.
</div>
Never mind. I found my problem. I forgot add the jquery script to the header. Sorry about that.
Have you considered using a <button> rather than an <a>. That's what I did on my Bootstrap page as I was having a similar problem. Doesn't fix that problem but it is a valid way round
<button type="button" class="close" data-dismiss="alert">×</button>
Make sure that jquery.min.js is loaded before button.js!
I'm researching HTML5/CSS3/JavaScript libraries/frameworks for a large single page application, and I found Twitter Bootstrap and BoilerplateJS. Both libraries/frameworks look very interesting and we're considering using both of them. However, we would like to use both together. Since we don't have experience with either library/framework, we thought we'd post a question (or two) regarding the combining of the two.
Is it possible to use Twitter Bootstrap with BoilerplateJS? If so, how would one go about using both together?
Thanks.
I have looked at Twitter Bootstrap, HTML5 Boilerplate type of projects when designing BoilerplateJS. I see above framework very much complementing than competing.
BoilerplateJS is proposing an architecture/structure to organize your JS code in the project. Twitter bootstrap helps you on responsiveness, UI Widgets, styling, etc where BoilerplateJS has no specific guilde lines proposed.
I think it is always a smart idea to use BoilerplateJS (very much focused on JS structure) along with Twitter Bootstrap or HTML5 Boilerplate (Widgets, CSS, HTML best practices) I believe.
BoilerplateJS is independent from any UI framework like Twitter Bootstrap, and they can be effectively combined together to create nice single-page apps.
Twitter Bootstrap helps you to build consistent UI, and you can use it to create Views for your components, while BoilerplateJS helps to orchestrate your components.
You may know that it is recommended to use MVVM/MVC framework with BoilerplateJS. If you choose KnockoutJS like i did, you will probably need to use custom bindings for Twitter Bootstrap elements in your views.
E.g. I am using it in my projects to seamlessly bind UI elements like grouped buttons and typeaheads to the viewmodel. You need only to refer to such binding code in your viewmodel to be able to use something like this in your view:
<label class="control-label"><strong>How many rooms:</strong></label>
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-info" data-value="1" data-bind="checkedButtons: RoomNumber">1</button>
<button type="button" class="btn btn-info" data-value="2" data-bind="checkedButtons: RoomNumber">2</button>
<button type="button" class="btn btn-info" data-value="3" data-bind="checkedButtons: RoomNumber">3+</button>
</div>
Note the checkedButtons custom binding here, loaded into the viewmodel with
define(['Boiler', './../../kobuttonbinding' ], function (Boiler, kobuttonbinding) {