I have created a simple ng-click function that hides and shows a DIV.
However, rather and simply appearing and disappearing, does angular have the ability to give a sliding effect?
Here's a plunkr: http://plnkr.co/edit/jbHidL3oOQvi4RBCkJIF?p=preview
HTML:
<div class="grid-wrap">
<div class="grid-col one-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Show the slidy section
</div>
<div class="grid-col two-thirds" ng-show="showMe">
My hidden section that i want to slide out
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis irure dolor in repr</p>
</div>
</div>
You should have a good read about ng-animate (it have to be injected into your app - something a lot of ppl forget) then you can take a look here
http://www.nganimate.org/angularjs/ng-switch/slider-css3-transition-animation
a well designed examples of what ng-animate can do
Google CDN angularjs-animate.min.js
Related
I am using React Hooks and have a dummy content array of comments which I am mapping through to display it. Now, I am directly mapping through that array, but I would like filter => map before returning the output.
The hook from main file:
const [articleComments, setArticleComments] = useState([
{
name: "John Doe",
publishedAt: "22.03.2022",
image: "https://i.pravatar.cc/300",
post: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
},
{
name: "Jane Doe",
publishedAt: "03.01.2022",
image: "https://i.pravatar.cc/301",
post: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
},
{
name: "Jack Doe",
publishedAt: "17.03.2022",
image: "https://i.pravatar.cc/302",
post: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
},
]);
Comments.tsx:
const Comments = () => (
<div className="w-full px-4 pb-16 pr-4 mx-auto mt-5 md:pt-2 md:max-w-4xl">
<div className="flex flex-col gap-8 leading-relaxed text-md text-navyBlue">
{articleComments.length > 0 &&
articleComments.map(({ image, name, publishedAt, post }: any) => (
<div key={name} className="grid grid-cols-12 gap-4">
<div className="col-span-2 md:col-span-1 avatar">
<div className="w-12 h-12 rounded-full ring ring-[#65c3c8] ring-offset-2">
<img src={image} alt="" />
</div>
</div>
<div className="relative md:-mt-2 col-span-full md:col-span-11">
<h4 className="font-bold">{name}</h4>
<time>{publishedAt}</time>
<p className="mt-2">{post}</p>
</div>
</div>
))}
</div>
</div>
);
export default Comments;
I am having a bit of an impasse here about my small project.
I am working on an easy application where people can click on topic titles and read instructions on different topics. I have a long text file that goes like this:
How deep is the ocean
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Facts about dinasours
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
What is the best way to store this data and retrieve in my screen? Should I keep them in seperate txt files, save in database, or define in a file as a const and call with a function? Which one would work faster, properly, and securely?
Thank you for any answer in advance.
I've install Ratchet package from Atpmosphere.
CSS work fine, but some script not. For example, Modal. I try to invoke it simply by adding the example code from Ratchet website to test:
Open modal
<div id="myModalexample" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" href="#myModalexample"></a>
<h1 class="title">Modal</h1>
</header>
<div class="content">
<p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</div>
</div>
but nothing appear. No errors appear in the JS console.
How can I use Ratchet Modal in Meteor? Which kind of Meteor mobile UI framework you suggest me to prevent this error (if Ratchet is bad to use)?
Thanks!
I have a set of headings (<h3>) that when clicked, they hide/show their corresponding sections.
I have achieved this by using ng-show/ng-hide and then calling a $scope variable isInactive/isActive.
What i would like to know, is if the same result can be achieved, without the need for using JS within $scope.isInactive and $scope.isActive and logic be placed in the HTML markup? Possibly with the us of ng-class?
HTML:
<div ng-app="">
<div ng-controller="EventController">
<div class="tabs">
<h3 class="" id="tab-{{$index}}-0"><a id="1" data="{{$index}}" ng-click="switch($event)">1 - 5 Years</a></h3>
<h3 class="inactive" id="tab-{{$index}}-1"><a id="2" data="{{$index}}" ng-click="switch($event)">6 - 10 Years</a></h3>
<h3 class="inactive" id="tab-{{$index}}-2"><a id="3" data="{{$index}}" ng-click="switch($event)">11 - 15 Years</a></h3>
<h3 class="inactive" id="tab-{{$index}}-3"><a id="4" data="{{$index}}" ng-click="switch($event)">16 - 20 Years</a></h3>
<div class="clear" data="{{$index}}" ng-hide="isInactive('#tab-'+{{$index}} + '-0')">1 - 5 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-1')">6 - 10 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-2')">11 - 15 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div class="clear" ng-show="isActive('#tab-'+{{$index}} + '-3')">16 - 20 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
</div>
</div>
</div>
JS:
function EventController($scope) {
$scope.
switch = function (e) {
var target = e.target || e.srcElement;
var elem = angular.element(target);
var parent = elem.parent();
var allHeadings = parent.parent().find("h3");
angular.forEach(allHeadings, function (aHeading) {
var child = angular.element(aHeading);
child.addClass("inactive");
});
parent.removeClass("inactive");
}
$scope.isInactive = function (e) {
var elem = angular.element(document.querySelector(e));
if (elem.hasClass("inactive")) {
return true;
} else {
return false;
}
};
$scope.isActive = function (e) {
var elem = angular.element(document.querySelector(e));
if (elem.hasClass("inactive")) {
return false;
} else {
return true;
}
};
}
My jsFiddle: http://jsfiddle.net/oampz/Wr79J/2/
Yes, you have correctly identified this the apt place for using ng-class.
It is possible to do only using HTML and a minimalistic controller: http://jsfiddle.net/Wr79J/4/
JS
function EventController($scope) {
$scope._activeTab = 1;
}
HTML
<div ng-app="">
<div ng-controller="EventController">
<div class="tabs">
<h3 ng-class="{ 'inactive': _activeTab !== 1, 'active': _activeTab == 1 }">
<a id="1" ng-click="_activeTab=1">1 - 5 Years</a></h3>
<!-- .... -->
<div class="clear" ng-show="_activeTab == 1">
1 - 5 Years Text - Lorem ipsum ...
</div>
</div>
Note: I think you were using {{$index}} from a scope this part of the template had inherited. I have left that untouched in the example.
Though this works, this code is not very maintainable. You may want to use more descriptive names for the tabs instead of 1, 2, 3, and 4.
You can get rid of the controller completely using an ng-init="_activeTabe = 1" on the container div, but it is not the correct use of ng-init.
Also, it is not considered good practise to manipulate the DOM in any way from the controller (I am looking at the addClass/removeClass in the code). If it is necessary, then one should use directives (e.g. ng-class) for the manipulation.
You can just set a variable to set the active tab.
<div class="tabs">
<h3 ng-click="range=1">1-5</h3>
<h3 ng-click="range=2">6-10</h3>
<div class="clear" ng-show="range==1">1 - 5 Years Text</div>
<div class="clear" ng-show="range==2">6 - 10 Years Text</div>
</div>
Here is an example - http://plnkr.co/edit/NTVPbOC5k7HKo88qp6vN?p=preview with no javascript code for the above logic.
<div>
<div>
<div class="tabs">
<h3 ng-init="active=1" ng-click="active=1" ng-class="{true:'active', false:'inactive'}[active==1]"><a >1 - 5 Years</a></h3>
<h3 ng-click="active=2" ng-class="{true:'active', false:'inactive'}[active==2]"><a >6 - 10 Years</a></h3>
<h3 ng-click="active=3" ng-class="{true:'active', false:'inactive'}[active==3]"><a >11 - 15 Years</a></h3>
<h3 ng-click="active=4" ng-class="{true:'active', false:'inactive'}[active==4]"><a >16 - 20 Years</a></h3>
<div ng-show="active==1">1 - 5 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div ng-show="active==2">6 - 10 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div ng-show="active==3">11 - 15 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
<br>
<div ng-show="active==4">16 - 20 Years Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</div>
</div>
</div>
</div>
I have an accordion like the following. The issue I am having is if I click on "Section One", the accordion appears to expand, but in fact it refreshes the page and I cant collapse it. How to allow the accordion to open, but not cause a page refresh? (I would like the accordion to be able to open multiple sections at the same time)
<div class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle-small" data-toggle="collapse" data-parent="#accordianParent" href="#sectionOne" style="border-left: 3px solid red;padding-left:10px;">
Section One
</a>
</div>
<div id="sectionOne" class="accordion-body collapse">
<div class="accordion-inner-small">
Here is all the wonderful stuff in section ONE.<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle-small" data-toggle="collapse" data-parent="#accordianParent" href="#sectionTwo">
Section Two
</a>
</div>
<div id="sectionTwo" class="accordion-body collapse">
<div class="accordion-inner-small">
Here is all the wonderful stuff in section TWO.<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
You are using the Bootstrap accordion and the href link that is in the accordion is not being intercepted by Angular and hence the full page load.
I suggest you look at UI Bootstrap or Angularstrap for accordion. Or else look at bootstrap docs to find if the behaviour can be supported without href.