We Keep Coding

How to open another <div> when an item in list clicked?

I'm creating a SPA application. I have to different div for pageView and pageDetail. I will retrieve data from SQlite database and display in listview under pageView. If an item from the list is clicked, then it should load pageDetail and do some function there. Currently, I can retrieve data from SQlite and display in listview. I also able to click the item, I tested using alert. I tried using pagecontainer load but it did not work. How can I load pageDetail when the item is clicked and how can I run a function when the pageDetail is loaded?
HTML div- #pageView and #pageDetail
<div data-role="page" id="pageView">
<div data-role="header">
<h2>View</h2>
<button type="button" id="buttonView">View</button>
</div>
<!-- main -->
<div data-role="main" class="ui-content">
<ul id="listData" data-role="listview">
</ul>
</div>
<!-- footer -->
<div data-role="footer">
<h2>myproject</h2>
</div>
</div>
<div data-role="page" id="pageDetail">
<div data-role="header">
Back
<h2>Details</h2>
</div>
<!-- main -->
<div data-role="main" class="ui-content">
</div>
<!-- footer -->
<div data-role="footer">
<h2>myproject</h2>
</div>
</div>
Javascript
$('#pageView').on('click', '#listData li', function(){
var myeve = $(this).find('#selectedEve').text();
$( ":mobile-pagecontainer" ).pagecontainer( "load", $('#pageDetail'), {
showLoadMsg: false } );
});
('#pageDetail').on("pageshow", function() {
//do some function here
});

if you just need a redirect.
window.location.href = "http://YourSite.com/#PageDetail";
Else you could try to not display the PageDetail on loading with display:none and do a display:block onClick?
If you want to get the pageDetail loaded after you clicked the item, i suggest u make an ajax-call for it that returns the requested html and then output it in your container
I'm not sure yet what you are trying to get done, so this is just a wild goose..

Materilize side-nav always open, won't load collapsed

My side-nav should be loading collapsed and also showing a modal as in this fiddle:
Relevant code:
HTML:
<header class="text-center">
</header>
<div class="main_container">
<nav class="indigo darken-4">
<div class="nav-wrapper">
<h1>code.partners near you</h1>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Login with Github</li>
<li class="bold">Create a New Marker</li>
<li class="bold">Logout</li>
<i class="mdi-navigation-menu"></i>
</ul>
</div>
</nav>
<main>
{{!-- <div class="container text-center"> --}}
<div id="map_container">
<div id="map"></div>
<div id="message_box">
<ul id="messages"></ul>
<div id="messageInputBox">
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</div>
</div>
{{!-- </div> --}}
</main>
and my Javascript:
$(document).ready(function(){
console.log("interactive is linked and ready");
// Initialize collapse button
$(".button-collapse").sideNav({
menuWidth: 240, // Default is 240
edge: 'left', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
//$('.collapsible').collapsible();
});//end document.ready
my Heroku page:
http://coding-partners.herokuapp.com/home
My fiddle: https://jsfiddle.net/clwarnock/h7md1q3u/8/
I'm trying to get my side-nav to act more as in the fiddle:
Start collapsed
Display a modal when open
Editing for Danny Buonocore
When the viewport is adjusted to a small device size, there's no hamburger menu to open it back up again. I think there's a conflict somewhere that I'm not seeing.

The sidebar is designed to automatically be expanded when the window is large enough. This is known as responsive web design. If you make your browser smaller, you will see that it won't be expanded on load.

AngularJS toggling header works only if changed in directive

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?!

jQuery .next() Is Going Onto Incorect Div(S)

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");
}
});

Scroll top function doesn't perform as expected

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.