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.
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');
}
I have three tabs on the page.
<!-- Tabs -->
<div class="mdl-layout__tab-bar">
Plots
Plots data
Report
</div>
I need to re-draw plots when Plots tab is selected. I've tried to onclick="redraw_plots();" to the Plots tab, but function is called too fast before tab is activated. Any way to get an event when this tab activates?
Thank you.
It's happen because element inline event are the first event to be executed.
To Execute after MDL tab event you can do like this:
With Javascript Vanilla:
First add an id on link
<a id="#plots-tab" href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a>
Second add an event listener
document.getElementById("#plots-tab").addEventListener("click", function(){
redraw();
});
Or with Jquery:
Add on event listener on element
$('a[href="#plots-tab"]').on('click',function(){
redraw();
});
For me it was not enough to hook to the click event.
A timeout of at least 0 milliseconds was necessary otherwise the content display it will still be set to none (tested on Chrome) and any drawing of your own that requires width calculations might fail.
Check the attached snippet and verify that without setTimeout, on the click event the tab content display is set to none and not 'block'. MDL must play an animation for smooth transition that cause absolute position drawing issues.
$('.mdl-layout__tab-bar').children().each(function(){
$(this).on('click', function(){
var timeout = 0;
var targetContent = this.getAttribute('href');
setTimeout(function(){
if($(targetContent).css('display') == "block"){
console.info("tab content is now visible after a timeout of %s millisenconds", timeout);
}
else{
console.warn("increase timeout to make sure that content is visible");
}
}, timeout);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content">
Tab 1
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">
Tab 2
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">
Tab 3
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content">
Tab 4
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content">
Tab 5
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content">
Tab 6
</div>
</section>
</main>
</div>
Another solution without adding anything special to the a tags would be
$("a.mdl-layout__tab").click(event => {
console.log("Tab switched!");
});
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?!
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");
}
});