I'm designing an application for mobile phones using cordova. I've made some good progress where I can transition between state to state inside my side menu content while still having drawer working. The way I have the interface designed is to have the side drawer and header bar be loaded once and the side menu content be the area of state transitions. I could not get my content to display below the header bar so I padded it down. However the issue is when I push things down the state transition animation pads also, oddly I tested menu-close directive in the tag, so it seems like the padded area is holding previous state of side menu content. I would prefer not use use menu-close so I don't reset the history stack on my states.
<ion-side-menus animation="no-animation" enable-menu-with-back-views ="true" >
<!--Ion Side Menu Content Houses the content for the main page-->
<ion-side-menu-content style="padding-top:45px">
<div menu-close style="padding-top:59px" >
<ion-nav-view > --Here
</ion-nav-view>
</div>
<ion-header-bar class ="bar-balanced">
<div class ="buttons">
<button class ="button icon button-clear ion-navicon-round" ng-click="openDrawer()"></button>
</div>
<h1 class="title" style="text-align: center">Medroid</h1>
<div class="buttons widget-container content-area horiz-area wrapping-col" >
<button class ="button" ng-click="openPopover($event)" ng-controller = "notificationPopoverCtrl">
<i class ="icon button-dark ion-ios-bell"></i></button>
<button class ="button" ng-click="openPopover($event)" ng-controller ="InboxPopoverCtrl"><i class ="icon button-dark ion-email"></i> </button>
<button class ="button" ng-click="changeStatus()"><i class ="icon ion-ios-circle-filled {{statuscolor}}"></i>{{docstatus}}</button>
</div>
</ion-header-bar>
</ion-side-menu-content>
<!--Ion Side menu drawer content-->
<ion-side-menu side ="left">
<ion-header-bar class ="bar-positive">
<h1 class="title" style="text-align: center" >Menu</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
Here is a link to my plunker where I've implemented this.
Plunker
You're help would be greatly appreciated
Cheers,
Solved the issue by removing the top padding and replace it with margin top.
<ion-nav-view style ="margin-top:43px">
Related
I am using SwiperJS for some galleries in my custom build Wordpress website. I am also using a plugin for lazy loading all my images, so the SwiperJS' own lazy load is disabled. However, now when the images are swiped and loading, there isn't any spinner to indicate that something is happening. Question is, how can I add this spinner with javascript myself.
Lets say now there is this rendered in the DOM:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" role="group" aria-label="3 / 7" style="width: 624px;">
<img src="path/to/src.jog" alt="" class="lazyloaded" data-ll-status="loaded">
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="2" role="group" aria-label="4 / 7" style="width: 624px;">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="//localhost:3000/wp-content/uploads/2021/04/K0924-900x1200.jpg">
</div>
</div>
</div>
Slide, that is currently showing has the class class="swiper-slide-active" and the next one has class="swiper-slide-next"
When I swipe (or press the next arrow), the class class="swiper-slide-next" changes to class="swiper-slide-active" and its child, img tag receives the class class="lazyloading" and data-ll-status="loading"
After the image is loaded it changes to class="lazyloaded" data-ll-status="loaded"
Now, how can I track with javascript the moment, when the img tag inside the div with the class class="swiper-slide-active" receives the class class="lazyloading" or data-ll-status="loading", when that happens render inside <div class="swiper-wrapper"> </div> a spinner and when the class="lazyloading" changes to class="lazyloaded" remove the spinner?
I would greatly appreciate any help! Thank you!
I'm not sure that i understood your problem right :
You need to get a spinner when the image is loading ?
Check on https://swiperjs.com/swiper-api#lazy-loading for the "swiper-lazy-preloader".
It should look like this :
<div class="swiper">
<div class="swiper-wrapper">
<!-- Lazy image -->
<div class="swiper-slide">
<img data-src="path/to/picture-1.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
I am using the angular drag & drop directive on my divs.
I am also using Bootstrap CSS paneling. The panel header is what I am using as the dnd dragHandle.
<div class="panel-heading dragHandle">
<h4>Click & drag here to move</h4>
</div>
I want the entire div to be draggable based on the header, but once inside the div (where text is displayed), I am using the directive dnd-nodrag. This currently works as you are not able to drag the div when the cursor is inside and not on the panel header; however, I would like to be able to copy the text inside the div.
<div dnd-nodrag class="panel-body" draggable="true">
<p> THIS IS THE TEXT I WANT TO COPY </p>
</div>
As it seems to me, the nodrag directive only allows selection/copying of text inside of an input element. I need to be able to copy the plain text from the div.
Both of the above code snippets are nested inside of a div with the class "panel" and the dnd-draggable directive.
Any work arounds? Any directives I am missing? Please help. Thanks ahead!
Also -- I have tried adjusting the user-select styling in the CSS with no luck.
My attempt:
<div class="panel-body" style="-webkit-user-select: all">
<p> THIS IS THE TEXT I WANT TO COPY</p>
</div>
This issue has been reported in the bugzilla,
Issue Link : https://github.com/react-dnd/react-dnd/issues/178
https://bugzilla.mozilla.org/show_bug.cgi?id=195361
https://bugzilla.mozilla.org/show_bug.cgi?id=800050
However I've fixed this issue using a work around,
When you inspect the Div element, you'll see the below code having draggable attribute set to true hence in firefox you cannot select the text using mouse cursor.
<li ng-repeat="item in models.lists.A" dnd-draggable="item" dnd-moved="models.lists.A.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" class="ng-scope" draggable="true">
<div dnd-nodrag="" draggable="true">
<div class="theheader" dnd-handle="" **draggable="true"**>A header</div>
<div class="thebody">
Selecting test works on Chrome/Safari. Doesn't work on Firefox/Edge
<input type="text" ng-model="item.label" class="ng-pristine ng-valid">
</div>
</div>
</li>
Workaround :
in html,
<input type="text" ng-model="item.label" class="ng-pristine ng-valid"
ng-click="vm.disableDrag()" ng-blur="vm.enableDrag()">
in JS file,
/**
*find li and disable the draggable feature, so the input can be edited using mouse in firefox
*/
vm.disableDrag= function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", false)
}
/**
* find li element and Enalbe the draggable feature, on blur of the editable input
*/
vm.enableDrag = function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", true)
}
Ionic Swipe Left does not work with item-icon-right
Plunker showing the behavior
I'm running into some confusing behavior. With an ion-list and ion-items, I'm setting attributes to enable swiping.
<ion-list can-swipe="true">
<ion-item ng-repeat="element in ctrl.data" class="item-remove-animate item-icon-right">
<span>{{ element }}</span>
<span class="item-note">Date</span>
<i class="icon ion-chatbubble-working"></i>
<ion-option-button class="button-assertive icon ion-trash-a" ng-click="ctrl.delete($index) ">
</ion-option-button>
</ion-item>
</ion-list>
However, there's two issues that I'm running into
The remove animation does not ever seem to work
If set "item-icon-right" on the ion-list, then the swipe messes up completely. If I add an "i" tag with the class, swipe works.
Does anyone know why this is happening? I'm new to CSS and ion, so it's a bit difficult for me to know what to look for while debugging.
If you could tell me your thought process or point to related articles for debugging these unexpected behaviors, I'd really appreciate it
For deletion animation, it seems that collection-repeat does not add "ng-leave" class due to a performance hit. (ref)
For the swipe left bug, I had to remove "icon" from the ion-option class.
Here a Sample hope this help you
<ion-list class"animate-ripple" show-delete="false" can-swipe="true" swipe-direction="both">
<ion-item ng-show="orders_list.length==0">
<h2>No orders, Please go to Menu and Select Create a Order</h2>
</ion-item>
<ion-item item="order"
ng-repeat="order in orders_list | custom:filterOrder"
class="item-text-wrap" >
<a class="item item-icon-right" style=" border:none; text-align:left"
ng-click="showOrdersDetail(order.order_id)">
<i class="icon ion-chevron-right"></i>
<h2>Order No. {{order.order_id}}</h2>
<h5>TOTAL:{{order.total_pagar}}</h5>
<h5>ITEMS:{{order.total_items}}</h5>
</a>
<div ng-if="filterOrder.tipo_estado === 'ACT'">
<ion-option-button class="button-assertive" ng-click="del_order(order,{{$index}});">
Del
</ion-option-button>
<ion-option-button class="button-balanced" ng-click="pay_order(order);">
Pay
</ion-option-button>
</div>
<div ng-if="filterOrder.tipo_estado === 'PAG'">
<ion-option-button class="button-balanced" ng-click="showLinceseList(order.order_id);">
Apply a<br> License
</ion-option-button>
</div>
</ion-item>
</ion-list>
I'm using http://angular-ui.github.io/bootstrap/ accordion and popover inside accordion.
But Popover and accordion creates overlay and popover block displays only inside accordion.
Html code:
<accordion>
<accordion-group is-open="element.hide" is-disabled="lock">
<accordion-heading>
<i class="icon-chevron-right" ng-hide="element.hide"></i>
<i class="icon-chevron-down" ng-show="element.hide"></i>
<i ng-show="element.description" popover="{{element.description}}" popover-trigger="mouseenter" class="icon-info-sign"></i>
</accordion-heading>
//inner eccordion HTML
</accordion-group>
</accordion>
It would be better if you can provide a plunkr. But i feel like "popover-append-to-body" might solve your problem.
<i ng-show="element.description" popover="{{element.description}}" popover-trigger="mouseenter" popover-append-to-body="true" class="icon-info-sign"></i>
I am making a website that uses div/slides to hold content. They are positioned inside a container with overflow:hidden. A navigation bar uses document.getElementById('box').style.left='0px' to alter the div positions to bring required div into view. The left CSS property is changed 'onclick' to bring the targeted div into view and push the others out of container viewing area. Transitions animations are handled by CSS.
Here a link to the fiddle example. http://jsfiddle.net/HyHmF/1/ . HTML Code is as follows,
<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='0px';
document.getElementById('box2').style.left='200px';
document.getElementById('box3').style.left='400px';">Box 1</a>
<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-200px';
document.getElementById('box2').style.left='0px';
document.getElementById('box3').style.left='200px'";>Box 2</a>
<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-400px';
document.getElementById('box2').style.left='-200px';
document.getElementById('box3').style.left='0px'">Box 3</a>
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
My issue is this. How can I make the browser back button to change the CSS to bring the previous displayed div into view. That is, without reverting back to the 'home' div.
I am reasonably familiar with javascript and jquery. I know the answer lies in JQuery BBQ pushstates and hashtags. Unfortunately I haven't been able to implement these into my site # http://www.sumoto.com.au. The fiddle is basically this site, scaled down, for ease of explaining my dilemma.
Essentially, how can I save a 'snapshot', of the current css view to a hashtag url, and call this 'save' through the browser back/forward navigation?
I solved my problem!
I removed all the cluttered onclick lines from the a elements. And added id's for each one. The actual hashtag/browser back button functionality is provided by hashchange by Ben Alman, and of course, JQuery.
The revised HTML is:
<a class="boxes" id="link1" href="#box_1">Box 1</a>
<a class="boxes" href="#box_2">Box 2</a>
<a class="boxes" href="#box_3">Box 3</a>
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
The Javascript
$(document).ready(function() {
$(window).hashchange( function(){
var hash = location.hash;
var lc1 = $("#link1")
if (lc1.attr('href') === hash) {document.getElementById('box1').style.left='200px';}
if (lc1.attr('href') !== hash) {document.getElementById('box1').style.left='0px';}
});
$(window).hashchange();
});
The a links are targeted by the script and assigned a var; "lc1". An if statement checks if the hash of lc1 (the link) is equal to the browser url. If it is then the css manipulation is performed and the sliding movement occurs. If it isn't (for example when the user clicks back) the boxes return to their original (or previous) conformation.