I have the following markup:
<div class="schedule">
<!-- Header info -->
<div class="row">
<!-- Schedule title -->
<div class="title" ng-click="toggleHeader()">
<span ng-hide="isScheduleVisible">{{ schedule.name }} (Open to View)</span>
<input ng-model="schedule.name" class="schedule-name" ng-show="isScheduleVisible"/>
</div>
<!-- Action menu items go here -->
<div class="actions" ng-show="isScheduleVisible"></div>
</div>
<!-- Schedule Info -->
<div class="row" ng-show="isScheduleVisible">
<!-- This is the time on the left of the table -->
<div id="times"></div>
<!-- Conditions for the Schedule -->
<div id="conditions"></div>
<!-- Shifts of the Schedule -->
<div class="shifts"></div>
</div>
</div>
I want to toggle the content by clicking the "title" (see below for the open/close state snapshot). Right now, as you can see, I call a function toggleHeader() in my controller, and all it does is:
$scope.toggleHeader = function()
{
$scope.isScheduleVisible = ! $scope.isScheduleVisible;
}
I want to replace it with ng-click="isScheduleVisible = !isScheduleVisible". However, this does not work. This will only toggle the header (the grey banner) and not the actual content (the schedule).
Why?!
Related
There's a problem I don't know how to solve. I did an animation of buttons appearing with WOW.js, but when I press the button I need the elements to disappear with the same animation. The concept is that when you press the button, the reverse animation starts, and then I hide the object using setInterval and display: 'none'. But I can't start manually so that when I press the button the animation starts againю
HTML
<div class="col-6">
<button class="answer-block wow fadeInLeft" id="firstAnswer">A</button>
</div>
<!-- /.col-6 -->
<div class="col-6">
<button class="answer-block wow fadeInRight" id="secondAnswer">B</button>
</div>
<!-- /.col-6 -->
</div>
<!-- /.row -->
JS
let firstAnswer = document.getElementById('firstAnswer');
let secondAnswer = document.getElementById('secondAnswer');
firstAnswer.onclick = function (){
firstAnswer.classList.remove('fadeInLeft');
secondAnswer.classList.remove('fadeInRight');
firstAnswer.classList.add('fadeOutLeft');
secondAnswer.classList.add('fadeOutRight');
}
So, I was working through a bug concerning the ngOptions directive within an ngInclude. I came across sample code showing the directive working, copy-pasted it in, and saw that both my (non-functioning) old ngOptions was now functioning. I'm curious as to how that worked.
I no longer have access to the old code, but it looked something like this:
HTML:
<div ng-controller="Widget" ng-class="{{widget.properties.styleClass}}" ng-init="optionsShow = false" class="irrelevant" "style = "height:100%;" >
<div>
<!-- ... -->
<!-- my options button-->
<span class="icon" ng-click="showOptions(); adjustHeight()">
options
</span>
</div>
<!-- Options div shows only when button is clicked -->
<!-- Canvas Options -->
<div class="options command-options" ng-show="optionsShow" style="height:50%;">
<!-- ... -->
<span ng-click="addCommand()">Add New Command +</span>
<div class="row">
<div class="col-xs-3">
<label>Command to edit:<br/>
<select ng-model="selected" ng-change="verifySelected()" ng-options="object as object.index for object in widget.objects"></select>
<!-- The select here wouldn't show any options no matter what I did -->
</label>
</div>
</div>
</div>
<!-- ... -->
JS, within the controller:
//...
$scope.widget.objects = [];
//...
$scope.addObject = function(){
$scope.widget.objects.push({index:$scope.widget.objects.length + 1, type:$scope.objectTypes[0]});
}
$scope.addObject();
$scope.verifySelected = function(){
console.log("irrelevant")
}
The working HTML now looks like this:
<div ng-controller="Widget" ng-class="{{widget.properties.styleClass}}" ng-init="optionsShow = false" class="irrelevant" "style = "height:100%;" >
<div>
<!-- ... -->
<!-- The following comments help make thing work in the options div. Don't ask why, I don't know. Just don't remove them
<b>Total Things:</b> {{totalThings}}
<p ng-repeat="oneThing in things">
<input value="{{oneThing.text}}" type="checkbox" ng-model="oneThing.checked" />
{{oneThing.text}}
</p>
<ul class="unstyled">
<li ng-repeat="oneThing in things">
<span>{{oneThing.text}}</span>
</li></ul>-->
<!-- my options button, everything below this point unchanged-->
<span class="icon" ng-click="showOptions(); adjustHeight()">
options
</span>
</div>
<!-- Options div shows only when button is clicked -->
<!-- Canvas Options -->
<div class="options command-options" ng-show="optionsShow" style="height:50%;">
<!-- ... -->
<span ng-click="addCommand()">Add New Command +</span>
<div class="row">
<div class="col-xs-3">
<label>Command to edit:<br/>
<select ng-model="selected" ng-change="verifySelected()" ng-options="object as object.index for object in widget.objects"></select>
<!-- The select here wouldn't show any options no matter what I did -->
</label>
</div>
</div>
</div>
<!-- ... -->
The working JS controller now also has these lines:
$scope.totalThings = 5;
//...
$scope.things = [{text: 'This is needed in order to make things work... for some reason.'}];
What happened to make it work?
ngOptions works as expected with your old code, I have made a plunker with your old code widget plunker$scope.widget = {}; and $scope.objectTypes = ["something"]; are added to make your code working.
In my webpage I have divs with same class name message_box vlistngbox item. I am calling an ajax function in the scroll event of page and I want to append the response after the last div with class message_box vlistngbox item.
I tried with,
$("#masnrycontainer .message_box vlistngbox item:last").after(response);
But it is not getting appended as it failed to choose the last div with class name message_box vlistngbox item. Can anyone help me to select the last div ?
I am sharing the part of my HTML code below:
<div class="main_content_wrapper">
<div class="mainpading">
<div class="mainwraper main_msnry">
<div class="left_wrapper">
<div class="inside_left_wrapper">
<div class="user_accountlinks">
<!-- I have menus in my page here -->
</div>
<div class="useracntmenuresponsive"><i class=" ico_color2 fa fa-list"></i></div>
<!-- for Responsive Menu Ends -->
</div>
</div>
<div class="main_content_wraper">
<div class="inside_mainconatinerwrap">
<div class="msnry" id="masnrycontainer">
<div class="message_box vlistngbox item">
<!-- Content -->
</div>
<div class="message_box vlistngbox item">
<!-- Content -->
</div>
<div class="message_box vlistngbox item">
<!-- Content -->
</div>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
You have multiple classes in same element.selector for last item would be .message_box.vlistngbox.item:last.You need to use:
$("#masnrycontainer .message_box.vlistngbox.item:last").after(response);
You probably missed . before item and vlistngbox for class selector. Also remove remove the space between these classes to select element with all these classes.
$("#masnrycontainer .message_box.vlistngbox.item:last").after(response);
use last
$('.message_box').last().html();
this will select last div html ....you can do any thing with this div now
This basic snippet of code was written to change the classes of indexed divs. Specificaly the div with the class .primaryCategory . Now the function works great, it goes .next() and .prev() when you click on the correct arrow, but when you go next over 3 times (since there are only 3 divs present in this case) it moves on to the arrow divider. (as in .primaryCategory-leftArrow only, once it switches onto the divider (which its not supposed to) the left/previous arrow will not go to the previous anymore.
So basically what I am asking is how can I make it so that the next/right arrow will not go on to .primaryCategory-leftArrow
JavaScript / jQuery Code Snippet
$(".wrapper .primaryCategory-wrapper .primaryCategory-RightArrow").bind(eventtype, function(e) {
if($("div.primaryCategory.primaryCategory-active").is(":last-child")){
// do nothing
}else {
$("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").next().addClass("primaryCategory-active");
}
});
$(".wrapper .primaryCategory-wrapper .primaryCategory-leftArrow").bind(eventtype, function(e) {
if($("div.primaryCategory.primaryCategory-active").is(":first-child")){
// do nothing
}else {
$("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").prev().addClass("primaryCategory-active");
}
});
HTML CODE Snippet
<div class="primaryCategory-wrapper">
<!-- Single Primary Category -->
<div class="primaryCategory">
<!-- Primary Category Icon -->
<img class="primaryCategory-icon" alt="primaryCategory" src="img/placeholder/primaryCategoryIcon-320x320.png">
<!-- Primary Category Heading -->
<h1>Lorium</h1>
</div>
<!-- Single Primary Category -->
<div class="primaryCategory">
<!-- Primary Category Icon -->
<img class="primaryCategory-icon" alt="primaryCategory" src="img/placeholder/primaryCategoryIcon-320x320.png">
<!-- Primary Category Heading -->
<h1>Lorium</h1>
</div>
<!-- Single Primary Category -->
<div class="primaryCategory">
<!-- Primary Category Icon -->
<img class="primaryCategory-icon" alt="primaryCategory" src="img/placeholder/primaryCategoryIcon-320x320.png">
<!-- Primary Category Heading -->
<h1>Lorium</h1>
</div>
<div class="primaryCategory-leftArrow"><!-- Left Primary Arrow (Mobile) --></div>
<div class="primaryCategory-RightArrow"><!-- Right Primary Arrow (Mobile) --></div>
</div>
It's because your .primaryCategory-leftArrow and .primaryCategory-RightArrow is on the same parent element of your .primaryCategory, they are all siblings.
To fix this you can move your .primaryCategory-leftArrow and .primaryCategory-RightArrow from your .primaryCategory-wrapper.
Or you can specify a selector on your .next('selector'), like this:
$("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").next(".primaryCategory").addClass("primaryCategory-active");
This will only retrieve the next sibling with a primaryCategory class.
But clicking the right arrow more than 3 times will lose the active class
You need to add a condition to fix this, here is a better solution:
$(".primaryCategory-wrapper .primaryCategory-RightArrow").bind("click", function(e) {
if(!$("div.primaryCategory.primaryCategory-active").is("div.primaryCategory:last")){
$("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").next().addClass("primaryCategory-active");
}
});
$(".primaryCategory-wrapper .primaryCategory-leftArrow").bind("click", function(e) {
if(!$("div.primaryCategory.primaryCategory-active").is("div.primaryCategory:first")){
$("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").prev().addClass("primaryCategory-active");
}
});
And here is a fiddle
I believe this happens because the leftArrow and RightArrow are wrapped at the same level of the other <div> elements. You could either refine the wrapping around the tags labeled as <!-- Single Primary Category --> or moving the arrow elements one level above:
HTML
<div class="primaryCategory-wrapper">
<div class="primaryCategory-subwrapper">
<!-- Single Primary Category -->
<div class="primaryCategory">
<!-- Primary Category Icon -->
<img class="primaryCategory-icon" alt="primaryCategory" src="img/placeholder/primaryCategoryIcon-320x320.png">
<!-- Primary Category Heading -->
<h1>Lorium</h1>
</div>
<!-- Single Primary Category -->
<div class="primaryCategory">
<!-- Primary Category Icon -->
<img class="primaryCategory-icon" alt="primaryCategory" src="img/placeholder/primaryCategoryIcon-320x320.png">
<!-- Primary Category Heading -->
<h1>Lorium</h1>
</div>
<!-- Single Primary Category -->
<div class="primaryCategory">
<!-- Primary Category Icon -->
<img class="primaryCategory-icon" alt="primaryCategory" src="img/placeholder/primaryCategoryIcon-320x320.png">
<!-- Primary Category Heading -->
<h1>Lorium</h1>
</div>
</div>
<div class="primaryCategory-leftArrow"><!-- Left Primary Arrow (Mobile) --></div>
<div class="primaryCategory-RightArrow"><!-- Right Primary Arrow (Mobile) --></div>
</div>
Also you should reestructure your conditional clauses so you don't get an empty if
JavaScript
$(".wrapper .primaryCategory-wrapper .primaryCategory-RightArrow").bind(eventtype, function(e) {
if(!($("div.primaryCategory.primaryCategory-active").is(":last-child"))) {
$("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").next().addClass("primaryCategory-active");
}
});
$(".wrapper .primaryCategory-wrapper .primaryCategory-leftArrow").bind(eventtype, function(e) {
if(!($("div.primaryCategory.primaryCategory-active").is(":first-child"))) {
$("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").prev().addClass("primaryCategory-active");
}
});
I'm using dragscroller plugin to make a div scrollable with mouse move! There are around 100 sub elements inside the scrollable div. These elements have a click event binded. What I'm trying to do is when a sub element is clicked it should get scrolled to the top of the div. I use the following function to get this but the problem is when I manually scroll to a element in the bottom and click, it get's scrolled to a position that's not expected.
function billScroller(elem){
var parentTopCoordinate = $('#bill-list').offset().top;
var elementCoordinate = $(elem).parent().offset().top;
var scrollPosition = ( elementCoordinate - parentTopCoordinate ) - 2;
$('#bill-list').animate({ scrollTop: scrollPosition },1000);
}
$(document).on('click',".bill-description",function()
{
//close all bills
$(".bill-item-list").not($(this).next(".bill-item-list")).slideUp(600);
billScroller(this);
//open the clicked bills
$(this).next(".bill-item-list")
.slideToggle(600);
});
How can i fix this issue. I tried to create a fiddle but it was too much code and some of the elements are drawn using ajax responses.
Update : This is the element hierarchy.
<div id="bill-list">
<div id="bill-panel">
<!-- Bill -->
<div class="bill">
<!-- Bill description - Holds Bill details -->
<div class="bill-description">
<div class="bill-info bill-number"><span>000A</span></div>
<div class="bill-info table-name"><span>TABLE 78</span></div>
<div class="bill-info room-number"><span>A678</span></div>
<div class="bill-info amount"><span>76.00</span></div>
<div class="bill-remove-icon"></div>
</div>
<!-- Bill Item list -->
<div class="bill-item-list">
<!-- Item : This is a sample element & will be cleared when system loads -->
<div class="bill-item">
<!-- Item image -->
<div class="bill-item-img"></div>
<!-- Item description -->
<div class="bill-item-description">
<div class="bill-item-name">
<!-- Item Name -->
<p class="bill-item-name-left">Normal Cofee</p>
<!-- Item Price -->
<p class="bill-item-name-right">170.00</p>
<div class="clear"></div>
</div>
<!-- Total item price -->
<div class="bill-item-price">
<span>170.00</span>
</div>
<!-- Item Quantity -->
<div class="bill-item-amount">
<span>1</span>
</div>
</div>
<!-- Increas & Decrease item Quantity -->
<div class="bill-amount-selection">
<a class="amount-increase" href="#"></a>
<a class="amount-decrease" href="#"></a>
</div>
</div>
<!-- Remove bill link -->
<div class="item-drop-point"></div>
</div>
</div>
</div>
</div>
Bill Panel is scrollable and Bills are generated using ajax calls. A bill can contain multiple items and toggle slide function is used to open and close item list.