I use kendo view ,
my html code is :
<div id="permission" data-role="tabstrip" data-animation="false">
<ul class="bd-doc-navigation-tabstrip tabstip-header" data-freezable="false">
<li class="k-state-active">
<p>Rigs</p>
</li>
<li>
<p>Actors</p>
</li>
</ul>
<div id="permission-tabstrip-1"></div>
</div>
but after rendering page instead of "permission-tabstrip-1" I see "permission-1".
I dont know whats going happen . I havent used "permission-tabstrip-1" anywhere else .
I changed :
<div id="permission" data-role="tabstrip" data-animation="false">
to :
<div id="permission-tabstrip" data-role="tabstrip" data-animation="false">
Related
<a class="mobileSortBy-toggle_new"
data-collapsible="mobileSortBy-panel-{{type}}"
data-collapsible-disabled-breakpoint="medium"
data-collapsible-disabled-state="closed"
data-group-collapsible="main">{{lang 'common.sorter.sort_by'}}</a>
<div class="mobileSortBy-panel" id="mobileSortBy-panel-{{type}}" data-mobile-sort-by>
<h4 class="mobile-panel-heading"><span class="mobile-panel-heading-ellipse">{{lang 'common.sorter.sort_by'}}</span></h4>
<a class="mobile-panel-close" href="#" data-collapsible="mobileSortBy-panel-{{type}}" data-group-collapsible="main"><svg><use xlink:href="#icon-close" aria-hidden="true"></use></svg></a>
<div class="mobileSortBy-panel-body" data-lock-body-scroll>
<ul class="navList navList--mobileSelectList">
<li class="navList-item">{{lang 'common.sorter.relevance'}}</li>
<li class="navList-item">{{lang 'common.sorter.newest'}}</li>
<li class="navList-item">{{lang 'common.sorter.price_asc'}}</li>
<li class="navList-item">{{lang 'common.sorter.price_desc'}}</li>
</ul>
</div>
</div>
SORT BY code for the mobile version. When the user is selecting an option, the code shows the "is-active" in the class, and that places a V mark next to it.
The problem is with the first option. It ignores the If statement and doesn't show the mark.
What can be done to fix it?
I need to modify the existing sidebar of this project. I want to hide the sub-menu that I didn't select. I can't figure out how to do this.
below is the HTML file for the side bar:
`
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="sidebar" class="sidebar">
<ul class="list-unstyled">
<li th:each="postDto,iterStat : ${categories}">
<a th:attr="aria-expanded=${#lists.contains(postDto.posturl, url)} ? 'true' : ''"
th:attrappend="href='#submenu'+${iterStat.index}"
data-toggle="collapse" th:text="${postDto.categoryName}">
</a>
<ul th:attr="id='submenu'+${iterStat.index}"
th:classappend="${#lists.contains(postDto.posturl, url)} ? 'show' : ''"
class="list-unstyled collapse" th:each="post : ${postDto.post}">
<li th:classappend="${#strings.contains(url, post.link)} ? 'active' : ''">
<a th:href="${post.link}" th:text="${post.title}"></a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
`
here is the output:
screen shot of the sidebar
I selected Uploading SSS Loan Repayments under the FILE UPLOADS menu. I want to only display the sub-menu under the FILE UPLOADS but the other sub-menu under UPLOAD AND TRANSACTION STATUS , eGOVERNMENT SERVICES is also on display.
I was trying to move a sidebar navigation component to React.js and the javascript inside the onclick is not working anymore. So the sidebar shows but nothing happens when it is clicked.
Edit: This is the code that works fine with HTML:
<div id="sidebar">
<div class="toggle-btn" onclick="document.getElementById('sidebar').classList.toggle('active');">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<a href="index.html" class="animsition-link">
<li>Home</li>
</a>
<a href="about.html" class="animsition-link">
<li>About</li>
</a>
<a href="resume.html" class="animsition-link">
<li>Resume</li>
</a>
<a href="projects.html" class="animsition-link">
<li>Projects</li>
</a>
</ul>
</div>
Edit: React Snippit (part of react code showing render)
import React, { Component } from 'react';
class Header extends Component {
render() {
if(this.props.data){
var name = this.props.data.name;
var occupation= this.props.data.occupation;
var description= this.props.data.description;
var city= this.props.data.address.city;
var networks= this.props.data.social.map(function(network){
return <li key={network.name}><a href={network.url}><i className={network.className}></i></a></li>
})
}
return (
<header id="home">
<nav id="nav-wrap">
<div id="sidebar" ref="sidebar">
<div class="toggle-btn" onChange={this.refs.state.active}>
<span></span>
<span></span>
<span></span>
</div>
<ul>
<a href="index.html" class="animsition-link">
<li>Home</li>
</a>
<a href="about.html" class="animsition-link">
<li>About</li>
</a>
<a href="resume.html" class="animsition-link">
<li>Resume</li>
</a>
<a href="projects.html" class="animsition-link">
<li>Projects</li>
</a>
</ul>
</div>
You're passing a string instead of JavaScript, and using the wrong keywords. Make sure you use the react specific terminology of onClick={} and className="".
Edit: Also it looks like you're trying to use refs incorrectly. You shouldn't need to use a ref here at all as the onChange function would be available in the react class. Hard to tell exactly what you're trying to do without all the code, though.
Second edit:
Okay with your updated code I can see a bit more of what is wrong. There are a few issues you've got here and I'll try to cover them all.
Not using react keywords. Things like onclick and class need to change to the react specific onClick and className to work.
You aren't using refs correctly. Refs, in their most basic sense, are used to modify a react component after it has been mounted. I assume you're trying to call a function here, in which case since I cannot see it defined here I can only assume it was passed in as a prop. If this is true you'll need to call it using this.props.blah.
All your assignments to variables are within the scope of an if statement, so they aren't going to be available outside that scope. If you need to use them in your code you'll have to define the variables before the if block.
It's 3:40AM and I'm going to give up trying for tonight.
The tabs will not update the page outside of the navigation area.
The PanelController looks like this:-
app.controller('PanelController', function($scope) {
$scope.tab = 1;
$scope.selectTab = function(setTab) {
$scope.tab = setTab;
};
$scope.isSelected = function(checkTab) {
return $scope.tab === checkTab;
};
});
and the nav pane looks like this:-
<div class="navbar-collapse collapse" ng-controller="PanelController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active:isSelected(1) }">
<a href ng-click="selectTab(1)">Blog</a>
</li>
<li ng-class="{ active:isSelected(2) }">
<a href ng-click="selectTab(2)">About{{tab}}</a>
</li>
<li ng-class="{ active:isSelected(3) }">
<a href ng-click="selectTab(3)">Contact</a>
</li>
</ul>
</div>
and the placeholder HTML for my two tabs is as follows:-
<div ng-controller="PanelController">
<div ng-show="isSelected(1)">
<p>Hello</p>
</div>
<div ng-show="isSelected(2)">
<p>Please work</p>
</div>
</div>
As you can see, the {{tab}} next to 'About' in my navbar is updating in my view as I click the tabs, as is the active class. When I place a {{tab}} expression outside of the navbar it isn't updating whenever it's clicked. Obviously this is something related to the scope of the variable, but I am using the PanelController on the parent of both the nav and my main area.
I can't see what I'm doing wrong.
I'd appreciate a fresh pair of eyes -- I've already some help with this already and any more will be graciously accepted.
The problem diagnosis is fairly simple, 2 controllers means 2 instances that each have their own scope
You would need to use a service or events to have them communicate together
I did an ng-repeat on a ul.
Obviously, I cant use nth-child(even) to apply it on ul to change the background-color of the even ul
Anyone knows something similar
ngRepeat exposes the boolean $even and $odd properties, which you can combine with ngClass:
<ul>
<li ng-repeat="item in items" ng-class="{'some-class':$odd}">
{{item.someText}
</li>
</ul>
Note: $even and $odd are based on the currnt $index which is zero-based, so you might need to use $odd instead of $even.
Or you can use the ngClassEven / ngClassOdd directives:
<ul>
<li ng-repeat="item in items" ng-class-even="'some-class'">
{{item.someText}
</li>
</ul>
See, also, this short demo.
Try this out
Working Demo
html
<div ng-app="">
<div ng-init="predicate='name'; reverse=false;">Sort: predicat:{{predicate}} reverse:{{reverse}} </div>
<div ng-click="reverse=!reverse">[change reverse]</div>
<div ng-click="predicate='name'; reverse=!reverse;">[set predicate: name + change reverse]</div>
<div ng-click="predicate='id'; reverse=!reverse;">[set predicate: id + change reverse]</div>
<div ng-init="lines=[{'name':'eee', 'id':7}, {'name':'aaa', 'id':9}, {'name':'ccc', 'id':8}, {'name':'bbb', 'id':2}, {'name':'ddd', 'id':3}]">
<ul ng-repeat="line in lines | orderBy:predicate:reverse" ng-class-odd="'odd'" ng-class-even="'even'">
<li >{{ line.name }}</li>
</ul>
</div>
</div>
Output