I am trying to build my first api in Rails. And for that I want to use angular for front-end and ruby for back-end . I managed to get angular working but for some reason I can't get angular-material to work. I tried using this gem and followed the instructions written there.
The problem I am facing with it that frankly it doesn't work, nor do I get a meaningful error from the web console.
The project I am trying to make can be found here . I know it needs a lot of code refactoring and so on, I am just trying to configure things at the moment.
On the web page this is the only thing that get displayed :
Primary (md-noink)
Disabled
from this command:
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
<md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
<md-button ng-disabled="true" class="md-primary">Disabled</md-button>
<md-button class="md-warn">{{title4}}</md-button>
<div class="label">Flat</div>
</section>
which makes me believe it doesn't work...
also this is a navbar that has to be green but is not:
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
when you make your backend with the rails-api, a view is not created, so you don't have to worry about which angular gem to pick from. You can create another directory (and repository) for the client (your angular frontend) and generate the frontend there. Now all you have to worry about is getting data, whether JSON or XML, traveling between the API and your client.
You can find a step by step tutorial here.
Hope it works out!
Related
I have several icons in the header that is used from a font and wrapped with
<li style="margin-top: 15px">
<span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>
I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.
Should I try using jquery and try to trigger the dropdown to open on click on #messages?
You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :
<ul class="dropdown">
<!-- your markup -->
<li style="margin-top: 15px" data-toggle="dropdown">
<span class="myIcons" id="messages" style="font-size:5px">m</span>
</li>
<!--// your markup -->
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</ul>
demo -> http://jsfiddle.net/7ujpzs58/
I have been re-building a site with Bootstrap, but I know that many of the links will change as I build the site. It seems the best plan to use HTML templating to produce the links in the navbar.
However, I just can't get it to work at all. I am guessing there may be some issue with the collapsable navbar using javascript, and when each function runs. This is just a guess, I am a beginner.
This is the HTML - (the handlebars link is in the header)
<script id="some-template" type="text/x-handlebars-template">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
About<b class="caret"></b>
<ul class="dropdown-menu">
<li>Intention</li>
<li>Membership</li>
<li>Genealogy</li>
<li>Contact</li>
</ul>
</li>
<li class="dropdown">
Writings<b class="caret"></b>
<ul class="dropdown-menu">
<li>Poetry</li>
<li>Articles</li>
<li>Lectures</li>
<li>Qur’anic Study</li>
<li>Sufi Stories</li>
<li>Thoughts</li>
<li>Book Reviews</li>
<li>Library</li>
</ul>
</li>
<li>Sharib Press</li>
<li>99 Names</li>
<li class="dropdown">
Persian Pages<b class="caret"></b>
<ul class="dropdown-menu">
<li>Hafiz Shirazi</li>
<li>First Line index</li>
<li>Glossary</li>
</ul>
</li>
<li>Ajmer</li>
<li>Konya</li>
<li class="dropdown">
Images<b class="caret"></b>
<ul class="dropdown-menu">
<li>Photos</li>
<li>Art Gallery</li>
<li>Sufi Shrines</li>
</ul>
</li>
</ul>
</nav>
</script>
</div>
<script type="text/javascript" src="script.js"></script>
This is the script file -
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = {
home : "/home.html",
etc.
};
$("#content-placeholder").html(template(data));
I copied this from a tutorial mostly, and the parent div has the correct ID.
Is it even possible to use templating in this case?
OK incase anyone stumbles across this having the same issue, there was only a small issue.
The fact that one of the data names in the script began with a number '99' (i didn't show this in my question as I assumend the data was fine). To solve this I simply put it in quotation marks.
I was trying to update my version of bootstrap from 3.1.0 to the currently latests 3.3.0.
But I noticed after upgrading that my dropdown menu's aren't working anymore.
For some reason the javascript doesn't pickup the elements with the .dropdown-toggle css class.
But when I dive into the chrome javascript console and execute the following command:
$('.dropdown-toggle').dropdown()
I notice the dropdown menu's do work. I compared the html of the menu's before and after this command and it remained the same.
I also looked in the release notes from bootstrap and could find any breaking changes regarding dropdown menus. This is a example piece of my code:
<ul>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#">Customers</a>
</li>
</ul>
<ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
<li>
Overview
</li>
<li>
Customer form
</li>
</ul>
Does anybody got a tip?
Worked just fine, only thing you must do is to use Jquery latest
Here is working fiddle
http://jsfiddle.net/2qWy8/22/
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I have this code, I want to make this menu collapse for mobile-devices
<nav class="navigation">
<ul class="nav nav-pills nav-stacked" id="nav-menu">
<li class="active" >Domov</li>
<li>Koncerty</li>
<li>Shop</li>
<li>Download</li>
<li>Kontakty</li>
<li>Troll</li>
</ul>
</nav>
And I want to do this:
I've found a similar question, which seems to have a detailed answer that will be useful for you. It didn't work perfectly for me, but it does seem much closer than I was before.
Check it out: makes nav-pills collapsable just like nav-bar in bootstrap
Try the following code. This should help you. I assume what you need from the reference link you provided. Though that site I guess is not using bootstrap.
<nav class="navbar navbar-default" role="navigation">
<div class="">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
You should get more help from docs
http://getbootstrap.com/components/#navbar
Right now menu uses hover to toggle elements. How can I change hover to mauseclick?
<div id="nav-collapse" class="collapse out">
<ul class="nav">
<li class="logo" style="font-size: 25px;">WEBSITE-NAME</li>
<li>
<span data-toggle="collapse" data-target="#portfolio-collapse"></span>LINK #1
<ul id="portfolio-collapse" class="collapse out">
<li>SUB LINK #1</li>
<li>SUB LINK #2</li>
<li>SYB LINK #3</li>
</ul>
</li>
...
bootstrap.min.js code on my website (http://wklej.to/OrUbj/text).
Your question and issue is not clear. Please edit your question and include more details such as screenshot, fiddle links etc. However, according to Bootstrap Docs, the Navbar dropdown menu works for click event and the markups is as below:
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
If you are trying to get responsive menu, then your code would be similar to below:
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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 collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>