I want to show the result as below:
<div class="mainmenu">
<h2 class="sidebar1">Main Menu</h2>
<ul>
<li>this is a dummy link 1</li>
<li>this is a dummy link 2</li>
<li>this is a dummy link 3</li>
<li>this is a dummy link 4</li>
<li>this is a dummy link 5</li>
<li>this is a dummy link 6</li>
<li>this is a dummy link 7</li>
<li>this is a dummy link 8</li>
<li>this is a dummy link 9</li>
<li>this is a dummy link 10</li>
</ul>
</div>
However, I see that in D7, some extra divs are added with the result and the UL class is not appeared. Please check the below result that D7 rendered:
<div class="content">
<div class="view view-test1 view-id-test1 view-display-id-block view-dom-id-2e7dd9ae3682d3d6e095a22755b506c0">
<div class="view-header">
<div class="mainmenu">
<h2 class="sidebar1">My Pages</h2> </div>
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
<div class="view-footer">
</div>
</div>
</div>
</div>
Can you please help me to remove the additional divs added by drupal as default?
You can turn off some of the extra markup within the Views settings, but you have to modify the templates used to render the view if that is not sufficient.
Related
I am newbie in AngularJS. I have navbar with nav-items like this:
<div class="header-inner">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="nav-area">
<nav class="mainmenu">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
and section:
<section class="hero-area">
//some text
</section>
how can I show section when I click on Link 1, and hide when click on rest of links. Default active link is "Link1" so I need to show section when page start.
Thanks for help.
You probably want to use ui-router which has a solution for this problem and much more. It will also allow you to restore the active page (and other parameters) from bookmarks.
If you prefer quick&dirty you could try a scope variable:
<a ng-click="active_section='link 2'">Link 2</a>
...
<section ng-show="active_section==='link 2'">
Have you tried using a ng-click + ng-show (or ng-hide)?
<div class="header-inner">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="nav-area">
<nav class="mainmenu">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<section class="hero-area" data-ng-init="showSection = 1" data-ng-show="showSection === 1">
//some text
</section>
I'm trying to include two submenu inside a sidebar. However, I have not been getting consistent result for the dropdown. On my 10 attempts of loading/refreshing, the sub-menu drop down only works 4/10 times. Does anyone have an idea why it is producing such results?
There's no error on console either.
Also, I'm using AngularJS to include this sidebar into my main html code.
Code for Sidebar, sidebar.html
<div class="col-md-2"><!--grid 2 for bootstrap -->
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<!-- Main menu -->
<li class="current"><i class="glyphicon glyphicon-home"></i> Dashboard</li>
<br>
<li><i class="glyphicon glyphicon-calendar"></i> Calendar</li>
<br>
<li><i class="glyphicon glyphicon-stats"></i> Stats</li>
<br>
<li class="submenu">
<a href="">
<i class="glyphicon glyphicon-list"></i> List
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li>Sub Function 1</li>
<li>Sub Function 2</li>
<li>Sub Function 3</li>
<li>Sub Function 4</li>
</ul>
</li>
<br>
<li class="submenu">
<a href="">
<i class="glyphicon glyphicon-list"></i> Function 5
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li>Sub Function 5</li>
<li>Sub Function 6</li>
<li>Sub Function 7</li>
</ul>
</li>
</ul>
</div>
</div>
AngularJS part to incldue sidebar
<!--Include header-->
<div ng-include src="'views/templates/header.html'"></div>
<!--end of header-->
<div class="page-content">
<div class="row">
<!-- Insert Side bar-->
<div ng-include src="'views/templates/sidebar.html'"></div>
<div class="col-md-10"><!--Main content -->
<div class="row">
<!-- to display content here -->
</div>
</div>
</div>
</div>
Not sure what went wrong.
HTML Markup:
<div ng-repeat="item in items">
<div class="dropdown-menu" ng-click=itemsActive()>click me</div>
<ul ng-show="itemVisible">
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
Controller code:
$scope.itemVisible = false;
$scope.itemsActive = function(){
$scope.itemVisible = !$scope.itemVisible;
}
Above, is the markup where on ng-click I am calling a function itemsActive() and in controller I have a scope variable $scope.itemVisible = false. And, items dropdown is initially not shown by assigning ng-show = "itemVisible". So, onclick scope variable is toggled to true/false.
But, since ng-repeat is used all repeated items 'dropdown-menu' divs are also getting toggled. How to achieve for a particular div show/hide ul items.
I edited my code
HTML Markup:
<div ng-repeat="item in items">
<div class="dropdown-menu" ng-click="item.visible=!item.visible>"click me</div>
<ul ng-show="itemVisible">
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
Now, on click, Item is toggled on/off. But, onclick of first item and second item the dropdown is visible. If I click on first item and click on second item then first item should be hidden?
You can first initialize an property for that item and than toggle that sepecific property on click
<div ng-repeat="item in items" ng-init="item.visible=true">
<div class="dropdown-menu" ng-click="item.visible=!item.visible">click me</div>
<ul ng-show="item.visible" >
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
Demo:
angular.module('demo',[])
.controller('demoCtrl',['$scope',function($scope){
$scope.work = 'working';
$scope.items = [{a:'a'},{a:'b'}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
<div ng-repeat="item in items" ng-init="item.visible=true">{{work}}
<div class="dropdown-menu" ng-click="item.visible=!item.visible">click me</div>
<ul ng-show="item.visible" >
<li>{{item.a}}</li>
</ul>
</div>
</div>
You can use ng-if and only show the div if it doesn't match the specific item:
<div ng-repeat="item in items">
<div class="dropdown-menu" ng-if="item != 'specificItem'" ng-click="item.visible=!item.visible>"click me</div>
<ul ng-show="itemVisible">
<li>item 1</li>
<li>item 2</li>
</ul>
If the ng-if condition is met, the html following in that block will show, if the condition is not met, it will not.
I am using ng-show and ng-click to show / hide 2 divs based on the user click of one of the app menu as shown below. The problem I am facing is that on clicking on the link to display the dashboard div nothing is shown, instead the other div (div2) is always shown. Can someone please check my code and let me know what exactly I am doing wrong here? Thanks
index
<div id="header" ng-controller="MenuController">
<ul >
<li>
Main
</li>
<li>
<a href ng-hide="userLogged == 1">Login</a>
<a href ng-click="switchDashboard()" ng-show="userLogged > 1">Dashboard</a>
</li>
</ul>
</div>
<div>
<div ng-controller="MenuController">
<div id="dashboard" ng-show="showUserPanel">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</div>
<div id="div2" ng-hide="showUserPanel">
<ul>
<li>Reg item 1</li>
<li>Reg item 2</li>
</ul>
</div>
<div ng-view></div>
</div>
</div>
MenuController:
$scope.showUserPanel = false;
$scope.switchDashboard = function(){
$scope.showUserPanel = !$scope.showUserPanel;
};
I have also tried changing the index to have only one instance for MenuController, but I still have as shown below the same problem
<div id="header" ng-controller="MenuController">
<ul >
<li>
Main
</li>
<li>
<a href ng-hide="userLogged == 1">Login</a>
<a href ng-click="switchDashboard()" ng-show="userLogged > 1">Dashboard</a>
</li>
</ul>
<div id="dashboard" ng-show="showUserPanel">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</div>
<div id="div2" ng-hide="showUserPanel">
<ul>
<li>Reg item 1</li>
<li>Reg item 2</li>
</ul>
</div>
</div>
<div>
<div ng-controller="MenuController">
<div ng-view></div>
</div>
</div>
You have 2 different instances of your controller and they will function independently of each other, see this fiddle: http://jsfiddle.net/k4YH6/
HTML:
<div ng-app>
<div ng-controller="MyCtrl">
<button type="button" ng-click="increment()">Ctrl instance 1: {{value}}</button>
</div>
<div ng-controller="MyCtrl">
<button type="button" ng-click="increment()">Ctrl instance 2: {{value}}</button>
</div>
</div>
JS:
function MyCtrl($scope) {
$scope.value = 1;
$scope.increment = function () {
$scope.value++;
};
}
More related fiddle: http://jsfiddle.net/jph4n/
You don't need the switchDashoard() function.
ng-click="showUserPanel = !showUserPanel"
ng-show="showUserPanel"
showUserPanel = !showUserPanel Will toggle the values for ng-show/ng-hide.
I would like to have multiple jQuery Mobile listviews on the same page stacked vertically. Because there may be many items in each list, I want to limit the number of visible items in each list, and allow each list to be scrolled independently.
For example, if I have three lists with 50 items each, I want a maximum of 10 items to be visible in each list, and be able to scroll through each.
It may not be ideal, given your use case, but you could try using collapsed listviews.
This way your users can still access all the options, but the display is not as cluttered:
<div data-role="page">
<div data-role="collapsible">
<h3>List 1</h3>
<ul data-role="listview">
<li>option 1</li>
<li>option 2</li>
</ul>
</div>
<div data-role="collapsible">
<h3>List 2</h3>
<ul data-role="listview">
<li>option 1</li>
<li>option 2</li>
</ul>
</div>
<div data-role="collapsible">
<h3>List 3</h3>
<ul data-role="listview">
<li>option 1</li>
<li>option 2</li>
</ul>
</div>
</div>