I am trying angular + scrollbar [https://github.com/iominh/ng-scrollbars], however not able to make it work.
It just gives module error and show text.
in codepen it doesn't even show text.
any help Plunker and codepan
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.min.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://raw.githubusercontent.com/iominh/ng-scrollbars/master/src/scrollbars.js"></script>
<script>
var app = angular.module('app', ['ngScrollbars']);
app.config(function(ScrollBarsProvider) {
// scrollbar defaults
ScrollBarsProvider.defaults = {
autoHideScrollbar: false,
setHeight: 100,
scrollInertia: 0,
axis: 'yx',
advanced: {
updateOnContentResize: true
},
scrollButtons: {
scrollAmount: 'auto', // scroll amount when button pressed
enable: true // enable scrolling buttons by default
}
};
});
function MainController($scope) {
// example of overriding defaults per scrollbar
$scope.scrollbarConfig = {
theme: 'dark',
scrollInertia: 500
}
}
app.controller('mainCtrl', MainController);
</script>
</head>
<body ng-app="app" ng-controller="mainCtrl">
<div style="width: 200px;" ng-scrollbars ng-scrollbars-config="scrollbarConfig">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare magna ultrices tincidunt tincidunt. Donec sagittis lorem placerat iaculis vehicula. Nunc bibendum quam vel rutrum rutrum. Duis nunc dolor, vehicula vitae pulvinar eu, semper vitae eros.
Proin auctor, felis placerat posuere dictum, massa ipsum fermentum ipsum, sit amet tincidunt metus justo ut dui. Curabitur aliquet tempor dolor eget volutpat. Proin consequat metus id justo interdum, id porta justo venenatis. Nullam vel tristique
neque, at luctus velit. Nulla sit amet convallis felis.
</div>
</body>
</html>
Updated your codepen with 3 changes: codepen
Updated link to ngscrollbars file: github doesn't allow the files to be used as script directly, change host to rawgit.com will do
https://rawgit.com/iominh/ng-scrollbars/master/src/scrollbars.js
You misspelled the directive: ng-scrollbars (note the last 's')
The height CSS needs to be in the same level with the directive.
<ul ng-scrollbars style = "height: 100px;">
Related
I recently had to pick up ReactJS in the last few days to work on a project. While I have most of the basics down, I'm coming across issues with the syntax of ES5 and ES6. I can't quite grasp the differences and how to convert code from one to the other. I've been using a lot of copy and paste of ES6, so it's been fairly easy for me to pick up. But when I come across ES5, I struggle.
I'm trying to create a modal from pre-existing code, but I don't quite know what it's supposed to look like in the end. Here is what I'm trying to convert:
import React from 'react';
import ReactDOM from 'react-dom';
const Example = React.createClass({
getInitialState() {
return { showModal: false };
},
close() {
this.setState({ showModal: false });
},
open() {
this.setState({ showModal: true });
},
render() {
const popover = (
<Popover id="modal-popover" title="popover">
very popover. such engagement
</Popover>
);
const tooltip = (
<Tooltip id="modal-tooltip">
wow.
</Tooltip>
);
return (
<div>
<p>Click to get the full Modal experience!</p>
<Button
bsStyle="primary"
bsSize="large"
onClick={this.open}
>
Launch demo modal
</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>there is a <OverlayTrigger overlay={popover}>popover</OverlayTrigger> here</p>
<h4>Tooltips in a modal</h4>
<p>there is a <OverlayTrigger overlay={tooltip}>tooltip</OverlayTrigger> here</p>
<hr />
<h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
});
ReactDOM.render(<Example />, mountNode);
Any tips/tricks/help would be truly appreciated!
If you're building your js bundle using something like webpack, you can pick and choose what features of es6 you want to use. it isn't "all or nothing." For example, in the above you're using the ES6 import syntax.
also, an important distinction is the difference between es6 features and React.createClass() and React's extends Component structure. You can read about the here https://facebook.github.io/react/docs/components-and-props.html
I'm just learning angular and have a problem i just can't figure out how to solve it.
I'm trying to achieve the following.
Tab A / Tab B / Tab C
.................................
Content in a fixed height Container
When i click a tab, some content is loaded via json and displayed in the container. Since its a lot of content i get a scrollbar.
What i want to do now is: Store the scrollTop Position for each Tab, so you can continue reading where you left when you switch tabs.
At the moment i have a directive on the content div, that triggers whenever the div gets scrolled, and stores the scrollTop Position in an array, related to the tab that is currently active.
app.directive("scrollPosition", function(){
return{
restrict: 'A',
link: function(scope , element){
element.bind("scroll", function(){
scope.scrollPosition[scope.tab.categoryIndex]=element.scrollTop();
});
}
}
})
This works so far.
But i have no clue how to use this stored ScrollTop Value to set the div to that position when i click of one of the tabs.
Whats the proper angular way?
Using an ng-click on the tabs and then scroll the div?
Using something like a $watch inside the directive to see which tab is clicked?
Help would be much appreciated, since i could only find examples where the whole document was scrolled, which is easy to address. But i just don't know how to get this relationship between the tab buttons and the div.
Thanks
Markus
Look into $anchorScroll. You can set a yOffset on it before call the function.
$anchorScroll.yOffset = 122;
$anchorScroll();
https://docs.angularjs.org/api/ng/service/$anchorScroll
Update:
So I solved this. My first answer was too hasty.
Here is a link to plnkr(also embedded into post though): http://embed.plnkr.co/kwPkFDfyJctfPRFPPLyk
Scroll the first tab, click on the second tab, then back in the first.
I added a pos variable to the isolate scope of the directive and passed in scope variables from the main controller. This way the directive can set the scroll position on a two-way bound variable. The next time the tab is clicked on, the directive sets its the scroll position on its element to the last scrolled to position via its scope.pos variable. Hope this helps!
(function() {
'use strict';
var app = angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function($scope) {
$scope.tabs = [{
"title": 'One',
"url": 'one.tpl.html',
"pos": 0
}, {
"title": 'Two',
"url": 'two.tpl.html',
"pos": 0
}, {
"title": 'Three',
"url": 'three.tpl.html',
"pos": 0
}];
$scope.$watch('tabs', function(val) {
console.log("Yay!!! It's working! Val=" + val[0].pos);
}, true);
$scope.currentTab = $scope.tabs[0];
$scope.onClickTab = function(tab) {
$scope.currentTab = tab;
};
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab.url;
};
}]);
app.directive("scrollPosition", function() {
return {
restrict: 'A',
scope: {
pos: "="
},
transclude: false,
link: function(scope, element) {
element[0].onscroll = function() {
scope.pos = element[0].scrollTop;
console.log(scope.pos);
scope.$apply();
};
element[0].scrollTop = scope.pos;
}
};
});
})();
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
border: 1px solid #000;
border-bottom-width: 0;
margin: 3px 3px 0px 3px;
padding: 5px 5px 0px 5px;
background-color: #CCC;
color: #696969;
}
#mainView {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
#viewOne, #viewTwo, #viewThree {
overflow: scroll;
height: 200px;
}
.active {
background-color: #FFF;
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-app="TabsApp">
<div id="tabs" ng-controller="TabsCtrl">
<ul>
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab.url"></div>
{{currentTab.pos}}
</div>
<script type="text/ng-template" id="one.tpl.html">
<div id="viewOne" scroll-position pos="currentTab.pos">
<h1>View One</h1>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
<p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div id="viewTwo" scroll-position pos="currentTab.pos">
<h1>View Two</h1>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu.</p>
</div>
</script>
<script type="text/ng-template" id="three.tpl.html">
<div id="viewThree" scroll-position pos="currentTab.pos">
<h1>View Three</h1>
<p>In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet
arcu. Class aptent taciti sociosqu.</p>
</div>
</script>
</div>
</div>
</body>
</html>
I would like to Make <md-tab>s as Wizard by adding Next Button.
i added My code and created a Plunker with next Buttons Could guys take a look please add your code to make it wizard
Plunker Added :-
http://plnkr.co/edit/p9mMyaqqHWtVyAEeisd1?p=preview
<md-content class="md-padding">
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="one">
<md-content class="md-padding">
<h1 class="md-display-2">Tab One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
<md-button class="md-raised md-primary">Next</md-button>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
<p>Lorem risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
<md-button class="md-raised md-primary">Next</md-button>
</md-content>
</md-tab>
<md-tab label="three">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Three</h1>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
<md-button class="md-raised md-primary">Finish</md-button>
</md-content>
</md-tab>
</md-tabs>
you have add an attribute to your md-tabs tag md-selected attribute to set the selected tab index ..
so first you have to add ng-controller
<md-content class="md-padding" ng-controller="tabCtrl">
after bind you have bind the value of selectedIndex
<md-tabs md-dynamic-height="" md-border-bottom="" md-selected="selectedIndex">
after you have to add ng-click to your button to call nextTab()
<md-button class="md-raised md-primary" ng-click="nextTab()">Next</md-button>
end of it ... here is the controller you need
// Code goes here
var moduler = angular.module('MyApp', ['ngMaterial']);
moduler.controller("tabCtrl", ['$scope', function($scope) {
$scope.max = 2;
$scope.selectedIndex = 0;
$scope.nextTab = function() {
var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
$scope.selectedIndex = index;
};
}]);
i hope this example helps you...
here is the example at plunker as you wish
http://plnkr.co/edit/iNEXWXUBDvsrKgUSelkW?p=preview
you could use the Wizard also which serves your cause
github Link :-
https://github.com/Matesign/material-wizard
sample code follows
<mt-wizard btn-progress-color="#D8D8D8" btn-bg-color="#FAFAFA" active-btn-bg-color="#E9E9E9" chevrons-always-visible="true" on-finish="submit()">
<mt-wz-step title="Step 1" step-img="step1.svg" on-exit="onExitStep1()">
</mt-wz-step>
</mt-wizard>
http://plnkr.co/edit/rp5qJykW2DD1A7EvaVZP?p=preview
I need some help. I'm designing a website. In home page, there are several links. With the help of jquery, I want to hide and show content (on the same page) depending on the links which the user clicks.
I have achieved it, but I feel; its not the right approach. Is there anyway to achieve this with minimal code? may be using arrays or loops? Please have a look at the example that I have created.
Thanks in advance.
$('.para2').hide();
$('.para3').hide();
<!--One-->
$('.one').click(function(){
$('.para1').show();
$('.para2').hide();
$('.para3').hide();
})
<!--Two-->
$('.two').click(function(){
$('.para2').show();
$('.para1').hide();
$('.para3').hide();
})
<!--three-->
$('.three').click(function(){
$('.para3').show();
$('.para1').hide();
$('.para2').hide();
})
<ul>
<li><a href="#" class="one" >Para -1</a></li>
<li><a href="#" class="two" >Para -2</a></li>
<li><a href="#" class="three" >Para -3</a></li>
</ul>
<div class="para1" style="width:500px; padding:10px; border:1px solid red; background:#009966">
<h1>Para -1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
<div class="para2" style="width:500px; padding:10px; border:1px solid red; background:#333333">
<h1>Para -2</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
<div class="para3" style="width:500px; padding:10px; border:1px solid red;">
<h1>Para -3</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
You may change like below:
Html:
<ul>
<li><a href="#" class="paraLink" data-para="one" >Para -1</a></li>
<li><a href="#" class="paraLink" data-para="two" >Para -2</a></li>
<li><a href="#" class="paraLink" data-para="three" >Para -3</a></li>
</ul>
<div class="para one" ...
<div class="para two" ...
<div class="para three" ...
JS:
$(function() {
$('.paraLink').click(function(e) {
e.preventDefault();
$('.para').hide();
$('.'+$(this).data('para')).show();
});
});
THE WORKING DEMO.
The JQuery UI Accordion widget doesn't work with longer scrollable content in IE7 when any parent container div has overflow:auto; set on it. I tried setting the innermost child div of the Accordion to overflow:visible !important; but it didn't work. Works fine in IE8, IE9, IE9 compatibility mode, Chrome, FF, Opera, and Safari.
Test this fiddle in IE7. Be sure to explicity set IE to use "Browser mode: IE7" and "Document Mode: IE7 standards".
How to fix?
<div style="overflow:auto;">
<div id="accordion" style="overflow:visible;float:right;height:400px;width:500px;border:2px solid red;float:right;">
<h3>Section 1</h3>
<div>
<script type="text/javascript">
for (var i=0; i<10; i++)
{
document.write("<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>");
document.write("<ul>");
document.write("<li>List item one</li>");
document.write("<li>List item two</li>");
document.write("<li>List item three</li>");
document.write("</ul>");
}
</script>
</div>
<h3>Section 2</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
</div>
</div>
So it turns out it's a bug in the current version of jqueryui accordion.
See the jqueryui bug report here.