toggling between visiblity hidden and visible doesnt work - javascript

The code only seems to hide it when I click on the element but when I click the element again, it does not reappear.
HTML (AngularJS)
<div ng-click="showIt();">Click Me!</div>
<div style="visible:{{tog}};">Hide Me...Then Show Me Again</div>
Controller:
$scope.showIt=function(){
if($scope.tog="visible"){
$scope.tog="hidden";
}
else{
$scope.tog="visible";
}
}
$scope.tog="visible";
Thanks in advance:)

What about ng-show directive?
<div ng-click="tog = !tog">Click Me!</div>
<div ng-show="tog">Hide Me...Then Show Me Again</div>

The style is called visibility also in the if condition you need to use == not =.
But a better solution will be to use the ng-style directive or use a class based solution
var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
$scope.showIt = function() {
if ($scope.tog.visibility == "visible") {
$scope.tog.visibility = "hidden";
} else {
$scope.tog.visibility = "visible";
}
}
$scope.showIt2 = function() {
$scope.hidden = !$scope.hidden;
}
$scope.tog = {
visibility: "visible"
};
$scope.hidden = false;
})
.hidden {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
<div ng-controller="AppController">
<div ng-click="showIt()">Click Me!</div>
<div ng-style="tog">Hide Me...Then Show Me Again</div>
<hr />
<div ng-click="showIt2()">Click Me!</div>
<div ng-class="{hidden: hidden}">Hide Me...Then Show Me Again</div>
</div>
</div>

Working Plnkr
You cal also do it with ng-if directive:
<div ng-click="showIt();">Click Me!</div>
<div ng-if="tog">Hide Me...Then Show Me Again</div>
JavaScript:
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.tog = true;
$scope.showIt=function(){
$scope.tog=!$scope.tog
}
});

Related

i have problem with jquery slide up and down

i have a div and inside of div i want to fill it with paragraph that i get from server and it may be 1 or 100 paragraphs.
i want to just show the first one and the rest wont be shown and by click div slide down and show the rest.
<div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
var slideStatus = false;
if (!slideStatus) {
$(".card-text-paragraph").animate({ height: "100%" }, "slow");
console.log(slideStatus);
slideStatus = true;
console.log(slideStatus);
} else {
$(".card-text-paragraph").animate({ height: "90px" }, "slow");
console.log(slideStatus);
slideStatus = false;
console.log(slideStatus);
}
it slides up smoth but wont slide down smoth to 100% if i give it in px it will be ok but i want to go to 100%
any one can help me ?
another option slideToggle
function clickfunc(){
$(".card-text-paragraph").slideToggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="clickfunc()">click</button>
<div class="card-text-paragraph" style="">
<p>.</p>
<p>..</p>
<p>...</p>
<p>....</p>
<p>.....</p>
</div>
In your case, for transition you need to keep unit of height same.
Try this
<div class="content">
<p></p>
<p></p>
....
....
....
<p></p>
</div>
Js Code:
var heightOfContent = $('.content').height(),
expandContentStatus = false;
$('.content').height('90px');
$('.content').on('click', function() {
if(expandContentStatus) {
$(this).height(heightOfContent);
} else {
$(this).height('90px');
}
})
Thing is first you need to store actual height of div.content element.
Use slideUp & slideDown method
var slideStatus = false;
function clickfunc(){
if (!slideStatus) {
$(".card-text-paragraph").slideUp();
slideStatus = true;
} else {
$(".card-text-paragraph").slideDown();
slideStatus = false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="clickfunc()">click</button>
<div class="card-text-paragraph" style="">
<p>.</p>
<p>..</p>
<p>...</p>
<p>....</p>
<p>.....</p>
</div>

Execute ng-include when a button is clicked - Angularjs

I want to execute a ng-include and show the content only after a button is clicked. I tried to use the ng-if directive and show the div when the ng-model is true, but his value is not changed in the myFunctionfunction.
<div ng-controller='myCtrl'>
<div ng-if='include==true' ng-include='"path"'></div>
<input type="button" ng-click='myFuntion()'/>
</div>
.controller('myCtrl', function($scope){
$scope.include = false;
$scope.myFunction = function(){
$scope.include = true;
}
})
There is a typo in your ng-click function. myFuntion should be myFunction. You can also just use ng-if='include' instead of ng-if='include==true'.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.include = false;
$scope.myFunction = function(){
$scope.include = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-if='include'>Clicked</div>
<input type="button" ng-click='myFunction()'/>
</div>
I would simply create a function that change the variable path for a valid one, no need to do a ng-if
$scope.myFunction = function(newPath){
$scope.path = newPath;
}
<div ng-include="path"></div>
<input ng-click="myFunction('path/to/file.html')" type="button />"

AngularJS with jQuery for selecting parent element

I'm posting my html and directive code. I have two spans, which I have attached ng-click to. On ng-click I want to check the classes of their parents parent item (.parent-portlet), but what I have so far is not working correctly as all of the parent portlets get selected instead of only the current one.
<div class="parent-portlet {{portlet.class}} {{portlet.class2}}" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
<div class="portlet-titlebar" ng-click="toggleCollapsed($event)">
<span class="remove" ng-click="removePortlet(portlet)">
Remove
</span>
<span class="add-back" ng-click="addPortlet(portlet)">
Add Back
</span>
</div>
</div>
this is what I have in my directive:
scope.removePortlet = function(portlet) {
var port = $('.remove').parent().parent();
port.addClass('removed');
port.addClass('edit-portlet');
};
scope.addPortlet = function(portlet) {
var port = $('.add-back').parent().parent();
if (portlet.hasClass('removed')) {
port.removeClass('removed');
port.removeClass('edit-portlet');
}
};
The problem with this code is that var portlet catches all of the portlets(parents) and I want to catch only the one related to the click action. How can I achieve that? I tried to pass this to my jquery select like so:
var portlet = $('.add-back', this).parent().parent();
but that didn't work. Any ideas how this can be achieved?
Thanks in advance.
Pass in the $event to the ng-click like this:
<span ng-click="removePortlet($event)"></span>
Then, just modify your code like this:
scope.removePortlet = function(ev) {
var port = $(ev.target).parent().parent();
port.addClass('removed');
port.addClass('edit-portlet');
};
scope.addPortlet = function(ev) {
var port = $(ev.target).parent().parent();
if ($(ev.target).hasClass('removed')) {
port.removeClass('removed');
port.removeClass('edit-portlet');
}
};
Grabbing the "event's target" will ensure that you are only addressing the item that was actually clicked. And note that angular uses $event to pass the event to a function.
I would also clean it up a bit combining the class modification lines and targeting the specific parent (in case you ever modify the DOM) using .closest():
scope.removePortlet = function(ev) {
var port = $(ev.target).closest('.parent-portlet');
port.addClass('removed, edit-portlet');
};
scope.addPortlet = function(ev) {
var port = $(ev.target).closest('.parent-portlet');
if (portlet.hasClass('removed')) {
port.removeClass('removed, edit-portlet');
}
};
You can inject the $element to your controller, then, use it as the context for the $ selector.
angular.module('app', []).controller('ctrl', function($scope, $element) {
$scope.addPortlet = function(portlet) {
console.log($('.add-back', $element));
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="parent-portlet">
<div class="portlet-titlebar" ng-click="toggleCollapsed($event)">
<span class="remove" ng-click="removePortlet(portlet)">
Remove
</span>
<span class="add-back" ng-click="addPortlet(portlet)">
Add Back
</span>
</div>
</div>
</div>
For more info about it
Use ng-class instead. Here's an example of changing background colors with classes:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.portlet = {
classes: {
"parent-portlet": true,
"edit-portlet": false,
"removed": false
}
}
$scope.removePortlet = function(portlet) {
portlet.classes.removed = true;
portlet.classes["edit-portlet"] = true;
};
$scope.addPortlet = function(portlet) {
portlet.classes.removed = false;
portlet.classes["edit-portlet"] = false;
};
});
/* Put your css in here */
.parent-portlet {
background-color: #ccc;
padding: 20px;
}
.parent-portlet.removed {
background-color: #c00;
}
.parent-portlet button {
padding: 10px;
margin: 0 10px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-class="portlet.classes">
<div class="portlet-titlebar">
<button class="remove" ng-click="removePortlet(portlet)">
Remove
</button>
<button class="add-back" ng-click="addPortlet(portlet)">
Add Back
</button>
</div>
</div>
</body>
</html>

Change More options to Less options or vice versa when toggle/untoggle

I would like to know how to make [[More options]] change to [[Less options]] and vs if I click it.
<div class="toggle-this" style="display: none">
<h3 style="border:1px solid;">Job Search</h3></div>
<div class="toggle-this" style="display: none"><div class="form_input"></div></div>
<div class="toggle-trigger" style="text-align:center; cursor: pointer;">[[More options]]</div>
<script language="javascript">
$(".toggle-trigger").click(function() {
$('.toggle-this').toggle();
return false;
});
</script>
$(document).ready(function(){
$(".toggle-trigger").click(function(e) {
var $elem = $('.toggle-this');
$elem.toggle();
$(this).text($elem.is(':hidden') ? '[[More options]]' : '[[Less options]]')
e.preventDefault();
});
})
http://jsfiddle.net/ffEMq/
More elegant:
$(".toggle-trigger").click(function()
{
var map = {"none": "[[More options]]", "block": "[[Less options]]"};
var element = $('.toggle-this').toggle();
$(this).text(map[element.css("display")]);
return false;
});​
Look at this jsFiddle.

Flexscroll not working in show/hide div

<div class="right_tab_content_part1_s">
View Provider
View Message
</div>
<div style="display:block;" id="divtabnewBeforeaward1"></div>
<div style="display:none;" id="divtabnewBeforeaward2"><div id="scroll2_msg" class="flexcroll"></div></div>
<script type="text/javascript">
function showHideDivforTabbingBeforeaward(id)
{
for(j=1;j<3;j++)
{
if(id==j)
{
document.getElementById('divtabnewBeforeaward'+j).style.display = 'block';
document.getElementById('classtabnew'+j).className = 'active';
}
else
{
document.getElementById('divtabnewBeforeaward'+j).style.display = 'none';
document.getElementById('classtabnew'+j).className = '';
}
}
}
</script>
Flexscroll is not working, even when i use the enter fleXenv.initByClass ("a-class-name-of-your-choice"); or fleXenv.fleXcrollMain (yourDivElement);
Use this before closing the body tag:
<div id='flexcroll-init'></div>

Categories

Resources