I have some href's in my navbar which point to different subsections on a page.
The problem is that if a user clicks the href, the browser points to a wrong position on the page (presumably the location before the ng-repeat has been rendered.)
Here is part of my navbar:
<ul class="nav navbar-nav">
<!--Classes-->
<li class="dropdown">
Classes
<ul class="dropdown-menu" role="menu">
<li>
Class Types
</li>
<li>
Timetables
</li>
<li>
Class Descriptions
</li>
<li>
Instructors
</li>
<li>
Testimonials
</li>
</ul>
</li>
</ul>
And my Classes page:
<h2 class="mai-header-red" id="faq">FAQ</h2>
<h4 class="mai-header-white mai-contact-desc">Some description stuff here
</h4>
<div class="container ng-cloak" ng-controller="faqController">
<div class="panel-group" id="accordion">
<div class="panel panel-default" ng-repeat="faq in questions">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index}}">
<h4 class="panel-title">
{{$index + 1}}. {{faq.question}}
</h4>
</div>
</div>
<div id="collapse{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<p>{{faq.answer}}</p>
</div>
</div>
</div>
</div>
</div>
<h2 class="mai-header-red" id="testimonials">Testimonials</h2>
Any help would be appreciated.
I don't think you are having issue with ng-repeat but with angular routing system.
Angular routing break default anchor since it use hash to display your path.
Class Types
There is two times hash in your link and I assume your browser just consider the all string as an anchor (or angular route just catch it and prevent anchor effect).
To reproduce the anchor effect, you need to use $location.hash and $anchorScroll
In your app define :
app.run(function($rootScope, $location, $anchorScroll) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
if($location.hash()) $anchorScroll();
});
});
Then you can use links like
Test/Foo
Related
I have a demo application here and in the upper left corners of the "tweets" there are dots and I have no idea where they come from. The code is written in Ember and the template looks like this
<h2>Ember.js DEMO Tweet list</h2>
<div class="tweets-list">
<h2>Tweets</h2>
<button {{action 'changeAllTweets'}}>Change All Tweets</button>
<button {{action 'changeOneTweet'}}>Change One Tweet</button>
<div class="row input-wrap">
</div>
{{#each this.model.topTweets as |model|}}
<li class="media">
<div {{action 'bindNewModel' this}} class="row">
<a class="pull-left" href="#"><img class="media-object" width="75" height="75" src={{model.avatar}}/></a>
<div class="media-body">
<h4 class="media-heading">{{model.favorites}}</h4>
<p>{{model.text}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
Expand
</div>
<div class="col-xs-8">
<ul class="list-inline text-right">
<li href="#">Reply</li>
<li href="#">Retweet</li>
<li href="#">Favorite</li>
<li href="#">More</li>
</ul>
</div>
</div>
</li>
{{/each}}
</div>
P.S. The SHOW LIST button must be pressed for the list to show
It's because you're using list items, i.e. <li> tags. They're shown with bullet points by default.
First of all, you should only use <li> tags inside an ordered or unordered list (<ol> / <ul>). You should consider if list items are appropriate here. Maybe <div>s are more suitable?
If you want to use list items you should wrap them in a <ul> list and then get rid of the bullet points by applying the styling: list-style-type: none.
Changing the display style of the list item will also get rid of the bullet point.
These are the list item markers. Add list-style:none; to the ul, and they will disappear.
Edit: I see that you are also missing the ul itself. The wrapping ul does not exist. These are just list items. Add the opening ul before the each statement and closing after it. And in case the list style none rule.
I'm on mobile and can't edit the fiddle.
There is HTML structural error.
Wrap the <li class="media"> with an <ul> tag. I can assume you are using Bootstrap. If yes then wrap the <li> tag with <ul class="list-group"> and add list-group-item class to the <li> tag like this: <li class="media list-group-item">
I have been trying for days.
What i want to do is use the options in the navigation menu that i have to trigger onload event in java script/jquery. However, the events just doesnt fire up. I have tried using onselect and onclick as well but with no avail.
The event should bring data into my template.
Maybe im making a mistake that i just cant see. or is there another better way to do this?
This is my Navigation bar. You can see the onselect functions that i was trying to use.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MEK Steel</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li class="dropdown" >
About <b class="caret"></b>
<ul class="dropdown-menu">
<li>
About Us
</li>
<li>
History
</li>
<li>
<a href="about.html#privacyPolicy" >Privacy Policy</a>
</li>
<li>
Terms and Conditions
</li>
<li>
Disclaimer
</li>
</ul>
</li>
<li class="dropdown" class="active">
Manufactured Products <b class="caret"></b>
<ul class="dropdown-menu">
<li onselect = "steelProducts()">
Steel Products
</li>
<li onselect = "steelDoors()">
Steel Doors
</li>
<li onselect="digitalSafes()">
Digital Safes
</li >
<li onselect="securityEq()">
Security Equipment
</li>
<li onselect="storageSol()">
Storage Solutions
</li>
<li onselect="steelFur()">
Steel Furniture
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
This is my javascript. i have only written one for testing purposes
function showTemplate(template, data){
var html = template(data);
console.log(html);
$('#content').html(html);
}
function securityEq(){
source = $("#productsTemplate").html();
secEqTemp = Handlebars.compile(source);
showTemplate(secEqTemp, data);
}
$(document).ready(function () {
$('a').on('click', function (){
alert($(this).html());
});
});
You need to reference the anchor and not the list tag.
Fiddle
After you explained what you were trying to do
#Chax im trying for the onselect to work before the a tag does. like i want to load data and put it in my template and then show the page.
I came up with this code
$(document).ready(function(){
$('a').click(function(){ // Bind a click event to my <a> tag
var linkValue = $(this).attr('data-link'); // Retreive the value of data-link aka where we want to go
// Do something, your logic
window.location.href = linkValue; // Load the new page
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-link="http://www.google.com">I'm a link</a>
<!-- Notice that the tag below doesn't have a href attribute but does have a data-link attribute-->
What this code does is simple. We bind a click event onto every <a> tag in the DOM. When one of our tag is clicked, we execute the function. Note that you can differenciate button using a switch. Then we call the window object and make it call the call the page we want.
check this jsfiddle When i place the js code inside the html using <script> it works and events are fired
The Problem: Im currently building a process simulation. I ve 2 bootstrap taps, one contains an editor(which works fine), the otherone is used to display the content during simulation. JsPlumb is used in order to display different simulation objects. The Problem is that the connections between these objects arent correctly displayed if the tap is switched from the editor to the simulation. They "snap" into the right position after an element is dragged, but I want them to render correctly on the tap switch.
Here is a fiddle: Problem fiddle
Code:
html:
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="active">
<a href="#editor" data-target="#editor" data-toggle="tab">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Editor
</a>
</li>
<li>
<a href="#display" data-target="#display" data-toggle="tab" id="testlink">
<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span> Simulation
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="editor"> </div>
<div class="tab-pane fade" id="display">
<div class="container center-block content">
<div id="test1" class="window">
a
</div>
<div id="test2" class="window">
b
</div>
</div>
</div>
Javascript:
jsPlumb.ready(function() {
jsPlumb.Defaults.Container = $('#display');
jsPlumb.connect({
source: $('#test1'),
target: $('#test2'),
anchor: "Continuous",
endpoint: "Blank",
detachable: false
});
jsPlumb.draggable($(".window"));
});
What I know: The problem is directly related to the fact that the tab content is not displayed on load, since placing the test divs into the editor tap (which is the active one on load) resolves the problem. fiddle: placing divs in aktive tab
Not an optimal solution but this works:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
if (event.target.id == 'display-tab') {
jsPlumb.detachEveryConnection();
redrawEveryConnection();
}
});
This code removes every connection on a tab switch to the simulation and calls the redraw function, which has to be implemented depending on the situation (the start and endpoints ve to be saved somewehere e.g. server).
I am using angular UI-Router and bootstrap collapse panels to build a sidebar for a style guide. My sidebar as is "works" but I'm getting a
Error: Cannot transition to abstract state 'parent'
when clicking the child states. In my real solution there are many parents with child groupings and the parents truly are abstract (i.e. they don't represent a physical page or state). I know I can't link directly to the parent states, and I don't believe I am, I just need to set their ui-sref in the parent panel so that I can get the parent to stay open by setting the ui-sref-active attribute.
I have an example running on plunker: http://plnkr.co/edit/bnvGcaOvzW4que8g3vh7?p=preview
code for reference:
angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: "/",
templateUrl: "layout.html"
})
.state('parent', {
abstract: true,
url: '/parent',
templateUrl: "layout.html"
})
.state('parent.child', {
url: "/child",
templateUrl: "child.html"
})
});
layout.html
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<a ui-sref="home">Home</a>
<div class="panel-group" id="sidebar">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#sidebar" data-target="#parent"
class="collapsed">Parent</a>
</h4>
</div>
<div id="parent" ui-sref="parent" class="panel-collapse collapse" ui-sref-active="in">
<div class="list-group">
<a ui-sref="parent.child" ui-sref-active="active" class="list-group-item">Child</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-9">
<div ui-view></div>
</div>
</div>
</div>
Short Answer:
Just remove ui-sref="parent" from your code. This particular ui-sref attribute is not required in order for ui-sref-active to work as you expect.
Long Answer:
ui-sref-active works by finding all child elements with a ui-sref and adding these elements to a states array attached to the element. On $stateChangeSuccess, each element loops through this array and if a state is found that matches the array, then the class is applied.
As an example:
<ul>
<li ui-sref-active="open">
<a ui-sref="app.home">Link</a>
<ul>
<li>
<a ui-sref="app.home.this"></a>
</li>
<li>
<a ui-sref="app.home.that"></a>
</li>
<li>
<a ui-sref="app.home.whatever"></a>
</li>
<li>
<a ui-sref="temp"></a>
</li>
</ul>
</li>
</ul>
In the above example, assume app is an abstract. All 4 of those links will trigger the open class on the parent element, as they are contained within. It doesn't matter that they are not all part of the app.home structure.
I have a single accordion item that I am using for a read more / less link on a page.
The purpose of this is to click it to read more, and a few paragraphs will follow.
I have this working, but I need it to stay closed when the page loads, at the moment the page loads with the item open.
What can I add to fix this?
<div class="accordionMod panel-group">
<div class="accordion-item">
<h4 class="accordion-toggle">Read More / Less</h4>
<section class="accordion-inner panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</section>
</div>
</div>
I think this will work
<div class="accordion" id="myAccordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo">
Title
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
</div>
if you add the class in to accordion-body collapse it will be open by default.
Sounds like you don't need an accordion, which has multiple panels, only one of which can open at a time. Instead, just use collapse which allows you to toggle the visibility of a section of the page.
Panel Visibility
From the collapse docs:
The collapse plugin utilizes a few classes to handle the heavy lifting:
.collapse hides the content
.collapse.in shows the content
.collapsing is added when the transition starts, and removed when it finishes
Thus, to start off collapsed, just make sure your extra content has the class collapse and not in
Simple HTML
To use collapse, you really just need to specify a data-toggle="collapse" and then point the collapse to the css selector of the section you would like to toggle using data-target.
Here's a bare bones example that just exposes the collapsing functionality:
<a data-toggle="collapse" data-target="#ReadMoreInfo" href="#">
Read More / Less
</a>
<div id="ReadMoreInfo" class="collapse">
<p> More Info Here </p>
</div>
HTML with Bootstrap classes
All the other bootstrap classes are just to help make the collapsible panel look like a collapsible panel. I would recommend formatting them like this or doing a lot of custom CSS work. Even if you wanted to do the CSS yourself, starting off with this template and then overriding the styles would be best.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse"
data-target="#ReadMoreInfo"
href="#ReadMoreInfo">
Read More / Less
</a>
</h4>
</div>
<div id="ReadMoreInfo" class="panel-collapse collapse">
<div class="panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</div>
</div>
</div>
Working Demo in jsFiddle
Screenshot:
Removing the in class did not work for me in my case(though normally it should). I was just looking for the answer to this question yesterday. I used this to make the accordion default to close:
$( document ).ready(function() {
$('.collapse').collapse({
toggle: false
});
});
See also this question on:
Jquery accordion not collapse by default
if accordion is with icon, add collapsed class name to :
<a class="accordion-toggle accordion-toggle-styled collapsed" >
and add collapse class name to:
<div id="collapse0" class="panel-collaps collapse">
complete code is:
<div class="panel-group accordion" id="accordion0">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle accordion-toggle-styled collapsed" data-toggle="collapse" data-parent="#accordion0" href="#collapse0">
Collapsible Header Text
</a>
</h4>
</div>
<div id="collapse_3_1" class="panel-collaps collapse">
<div class="panel-body">
<p> body text
</p>
</div>
</div>
</div>
</div>
It's easy. In Bootstrap 5, edit your HTML to remove the "show" class from your first accordion item. See Make accordion closed by default in Bootstrap, the answer that starts "Was recently working with Bootstrap".