Attempting to fix a div when scrolling, but encountering difficulties targeting it within ion-content. Traditional jQuery or CSS methods are not effective due to interference from the scroll behavior of ion-content as indicated by sources I've consulted...
In search of solutions to overcome this obstacle. Working with an older version of Ionic and struggling to find viable fixes. Everything attempted so far has been unsuccessful. Grateful for any insights on this matter!
Below is the code snippet for your reference:
Template Section:
<body ng-controller="MyCtrl">
<ion-nav-bar class="bar-stable"></ion-nav-bar>
<div id="subHeader" class="bar bar-subheader" ng-class="{'hide' : data.hideSubHeader}"></div>
<ion-content on-scroll="onScroll()"><!-- id="scrollWatch"-->
<div id="wallBanner" class="wallBanner">
<div id="mainBarContainer" class="mainBar">
<div id="mainBar">
<button class="button left">11</button>
<button class="button">22</button>
<button class="button right">33</button>
</div>
</div>
</div>
<div><div ng-repeat="item in items">item</div></div>
</ion-content>
CSS Section:
.wallBanner {
height: 300px;
width: 100%;
position: relative;
background-color: blue;
}
.mainBar {
border-bottom: 1px solid #cccccc;
text-align: center;
position: fixed;
top: 252px;
height: 48px;
background-color: white;
width: 100%;}
.fixMainBar { position: fixed; top: 50px;}
.left {float: left;}
.right { float: right;}
.hide { display: none;}
Controller Section:
.controller('MyCtrl', function($scope, $ionicScrollDelegate) {
$scope.data = {};
$scope.data.hideSubHeader = true;
var subHeaderEl = angular.element( document.querySelector( '#subHeader' ) );
var mainBarContainerEl = angular.element( document.querySelector( '#mainBarContainer' ) );
var mainBarEl = angular.element( document.querySelector( '#mainBar' ) );
$scope.onScroll = function() {
if($ionicScrollDelegate.getScrollPosition().top >= 222 && $scope.data.hideSubHeader) {
$scope.data.hideSubHeader = false;
subHeaderEl.append(mainBarEl);
$scope.$apply();
}
else if($ionicScrollDelegate.getScrollPosition().top < 222 && !$scope.data.hideSubHeader) {
$scope.data.hideSubHeader = true;
mainBarContainerEl.append(mainBarEl);
$scope.$apply();
}
};
$scope.items = {};
for(var i = 0; i < 200; i++)
$scope.items[i] = i;
})
In case you haven't come across a solution, you can utilize this Ionic element
<ion-header-bar>
</ion-header-bar>
or
<ion-footer-bar>
</ion-footer-bar>
Having trouble with the Update function when trying to implement CRUD on my website. Can anyone assist me? I can successfully Create, Read and Delete, but updating is giving me issues especially for Admin users. Below is the code snippet: <?php // Inc ...
I have a confusion in my package.json file where I am attempting to compile less code using versioning. Here is an example of what I am trying to achieve: "scripts" { ... "build:css": "lessc --source-map css/index.less build/$npm_package_name.$npm_package ...
I'm facing an issue where I need to update a small part of text in a label based on the query string. The code snippet I am currently using is Text = "after 30 June "'<%=Request.QueryString ("Year")%>'" in the comments field" However ...
I'm in need of some assistance, as I am facing an issue that I can't seem to figure out. It's baffling me why my first modal window gets stuck after I close my second modal window. The setup involves a button that opens a "login" modal, whic ...
My PHP page includes two buttons: Save and Submit. The Save button is used for saving form data, while the Submit button is used for submitting the final data. <button id="save" name="save" onclick="saveForm();">Save</button> <button id="s ...
Is there a way to transfer data from Laravel to a JavaScript array? I have extracted the data from my AppServiceProvider and decoded it using json_decode, as shown below: View::composer('*', function($view) { $users = Users::all(); $view-& ...
I'm currently working on a web application using Material-UI. The main page is structured into 3 grids, all with a fixed height of 500px. I have a requirement to include a drawer within the middle grid that contains some action options. However, my cu ...
Is there a way to store duplicate keys in a key value pair in Angular? For example: I need to store - 101 , 999 101 , 989 101 , 987 102 , 888 102 , 887 I attempted the following code: commentMap = new Map<number, number>(); this.commentMa ...
Consider the code snippet below, which is a function that generates a CSS class based on the value of toCheck: const computeSomething = (toCheck: string) => { return clsx('flex', { 'flex-start': toCheck === 'FIRST', ...
Just started experimenting with Angular 2 and encountering an issue when importing zone.js as a global variable: https://i.stack.imgur.com/gUFGn.png List of my packages along with their versions: "dependencies": { "angular2": "2.0.0-beta.3", "es ...
Is there a way to retrieve a document with one-to-many relationships in a query? When I attempt to do so, I receive the object ID as a reference, but I actually want the full document. await Schedule.find({}); This code snippet returns: "schedule": [ ...
I have a standard template in play 2.6, where I need to pass in a variable number of HtmlContents. The template is defined like this (including the implicit parameter): @(foo: String)(content: Html*)(implicit bar: Bar) When working with the template, I c ...
Is there a way to unbind all elements from a parent node using jQuery? How can I effectively select all children, regardless of their nesting level, from a parent node? I attempted the following: $('#google_translate_element *').unbind('c ...
Is there a way to identify the index of the visible list item in jQuery and then save it into a variable? Consider the example slideshow below: Create a variable called currSlides. Save the index of the visible li into currSlides. The value of currSlid ...
Is there a way to properly utilize moment.js for saving a created date into mongoDB through a form? Currently my code looks like this: var blogSchema = new mongoose.Schema({ title: String, image: String, body: String, created: {type: Date, ...
Currently, I am in the process of using webpack to manage all of my project assets. In my app.js file, I am loading and concatenating my assets with the help of ExtractTextPlugin: import 'foundation-sites/scss/normalize.scss'; import 'foun ...
I'm having difficulty adding an event listener to a ListItem in MaterialUI, and it's not responding. Any thoughts on why this might be happening? ...
After exhaustively searching and trying various solutions, I am still facing a persistent 400 error when I deploy my code to a server. Strangely, everything works perfectly fine on xampp locally. My primary objective is to execute the php file using ajax ...
Today's date is: var timeFormat = 'dd MMM, yyyy hh:mm:ss a'; var todayDate = dateFormat(new Date(), timeFormat); Can we convert today's date to milliseconds using AngularJS? Alternatively, how can we use the JavaScript function getT ...
Is there a way to generate a new div by pressing a button, with an option to delete that specific div by clicking on another button within it? I want each new div created by the first button to have its own unique delete button that will only remove its ...