I have used the pager of AngularJS with Server Side coding. Basically what happens is when user clicks on NEXT the group of 5 records is displayed.
Now as the application is used in Tablets, i need swipe effect for this.
<section class="recent" style="margin: 20px 0;">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 text-center" data-ng-init="recentUsers(1)">
<button type="button" class="rc-buttons" data-ng-repeat="user in recentusers">
{{user.firstname}}
</button>
<pager style="margin-top: -28px;" total-items="recenttotalItems" page="recentcurrentPage" items-per-page="recentitemsperpage" max-size="maxsize" on-select-page="recentUsers(page)" class="pagination-sm"
previous-text="<<" next-text=">>"></pager>
</div>
</div>
</div>
</section>
How to implement swipe effect in AngularJS?
For handling swipes, you can use the ngTouch module's ngSwipeLeft and ngSwipeRight.
Since it is a separate module, you need to include the script separately:
<script src=".../angular-touch.min.js"></script>
You, also, need to include the module as a dependency to you main module:
angular.module('yourApp', ['ngTouch']);
Then you can use it to like this:
<div ng-swipe-right="doSomething()" ng-swipe-left="doSomethingElse()">
...
</div>
Related
I am trying to get a list of the content on a website (this one if anyone is interested). The layout has changed recently and now they do not load the content all at once, but with magic (js probably). I'm currently using JSoup to analyze the HTML, but im open to suggestions.
This is what i am getting:
<div class="row" data-v-6e4dbe9e>
<div class="col-17 podcasts-group" data-v-6e4dbe9e>
<div class="loading-spinner" data-v-6e4dbe9e> //the devil himself
<div class="spinner" data-v-ac3cb376 data-v-6e4dbe9e>
<div class="rect1" data-v-ac3cb376></div>
<div class="rect2" data-v-ac3cb376></div>
<div class="rect3" data-v-ac3cb376></div>
<div class="rect4" data-v-ac3cb376></div>
<div class="rect5" data-v-ac3cb376></div>
</div>
</div>
<div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
//Here should be stuff!
</div>
</div>
</div>
the code that achieves this:
String selector = "div.podcasts-items";
Elements elem = Jsoup.connect(link).get().select(selector)
System.out.println("html: "+elem.html());
This is what i would like to see (copied from inspect element after the page has loaded all the content):
<div class="row" data-v-6e4dbe9e>
<div class="col-17 podcasts-group" data-v-6e4dbe9e>
<!----> //begone evil!
<div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
</div>
</div>
</div>
Google doesn't help much, because every content related to spinners etc. is about javascript.
solution:
due to the fact that JSoup only loads the HTML and does not execute any javascript the page never had a chance to load the content. You would have to use an actual browser engine or a webdriver like selenium to get the data to load.
For this specific problem I was able to get the content directly via loading the Json data through this webpage's API.
If I understood your question then your best bet is to use Selenium driver. Link to similar question
I've created an angular app the acts as "bounce" page for a social iOS application, that is in public beta.
Users can share their profiles among each other as a link to the site.
If the page is opened on an iOS device, and the app is installed, it opens the app using the app's URL scheme. Otherwise it redirects to the App Store.
For all other devices, android, desktop, etc it just renders a simple information page.
The problem:
On one instance of Safari, two elements of the page are not rendered.
Missing elements:
"Instruments" label below the profile name does not appear.
Copyright, privacy and terms and conditions does not appear.
On all other instances of Safari, also Chrome and Firefox, it appears correctly as follows:
The site is implemented using Angular + Bootstrap.
Page source for the section with the missing instruments label is:
<div ng-show="vm.loaded">
<div class="row">
<div class="col-sm-4 col-sm-offset-4 profile-container">
<div class="row">
<div class="col-xs-12" style="min-width: 300px !important;">
<div class="card hovercard">
<div class="photo-container">
</div>
<div class="useravatar">
<img ng-src="{{vm.profile.coverPhotoURL}}" vpr-load="vm.onImageLoaded()">
</div>
</div>
</div>
<div class="col-xs-12 text-center" style="margin-top: -10px">
<span class="profile-title">{{vm.titleText()}}</span>
</div>
<div class="col-xs-12 text-center" style="margin-top: 8px">
<span class="profile-sub-title">{{vm.instruments()}}</span>
</div>
<div class="col-xs-12 text-center" style="padding-bottom: 20px">
<span class="profile-genres">{{vm.genres()}}</span>
</div>
</div>
</div>
</div>
And the footer is as follows:
<footer class="vFooter hidden-xs">
<div class="container">
<div class="row">
<div class="col col-xs-6 text-center" style="height: 80px">
<div class="vertical-center">
<p class="copyright vertical-center" style="margin-top: 20px; margin-bottom: 20px">
<span class="text-nowrap">© Vampr Pty Ltd 2016 | <vpr-link-bar></vpr-link-bar></span>
</p>
</div>
</div>
(etc, etc)
(some closing <div> tags not shown in source snippet above)
Question:
Without having access to the machine where the problem occurs, how can I debug and correct the issue?
I found a similar problem on another instance of Safari that seemed to be caused by AdBlock - disabling it made the elements appear correctly. However the elements in question were different once - the social media buttons.
The problem appears to have been caused, simply, by an unescaped ampersand '&' character in the HTML source. Fixing this solved the problem. I'm not sure why the issue occurred only on one particular instance of Safari out of many others.
I have an angular app with the content of the body containing a directive called layout as shown below.
<body>
<div layout></div>
</body
The layout directive contains other directives and is shown below
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- begin #page-container -->
<div id="page-container" class="fade in page-sidebar-fixed page-header-fixed">
<div header-directive ng-show="1==0"></div>
<div leftnav-directive ng-show="1==0"></div>
<div data-ng-view="">
</div>
<div footer-directive ng-show="1==0"></div>
</div>
I am writing an interceptor for authentication to secure the app. The following line makes the page not load
angular
.module('myapp')
.config(function ($httpProvider) {
$httpProvider.interceptors.push('authInterceptorService'); // if i comment this line out it works
});
If I move the content of the layout directive into the index.html the page loads fine.
<body>
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- begin #page-container -->
<div id="page-container" class="fade in page-sidebar-fixed page-header-fixed">
<div header-directive ng-show="1==0"></div>
<div leftnav-directive ng-show="1==0"></div>
<div data-ng-view="">
</div>
<div footer-directive ng-show="1==0"></div>
</div>
</body
The reason I am using the directives so I can hide/show the top nav and side nav menus and instead show the login screen (template). SO I can check in the directive code to see if the user is logged in and if they are I would show the other directives.
This is the interceptor that I am using
Any idea if what is going on and how can I resolve it?
Thanks.
EDIT:
I created a plunker but I cannot seem to make it work. It does not recognize the module helo created in app.js. Please check it here
I would put a language picker in this section:
<section id="logo-section" class="text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="logo text-center">
<h1>Batpeppa</h1>
<span>Web Designer Trio</span>
</div>
</div>
</div>
</div>
</section>
I would insert two flag icons under "Web Designer Trio" subtitle.
I would use the class="icon-flag" from Bootstrap 3.
I think I have to use something like this:
<span class="icon-flag">
Well, the native Bootstrap 3.x icons are named glyphicon-<name>. So in your case:
<i class="glyphicon glyphicon-flag"></i>
<i class="glyphicon glyphicon-flag"></i>
Demo. Your code does not work because you are referring to the "old" Twitter Bootstrap 2.x icons, named icon-<name>. If you want to use those, you must download and include the .png and .css from here. Then you should be fine.
I'm using selectize.js 0.10.1 with Bootstrap 3.0.1 in my project. When I have selectize combobox outside the collapsible Bootstrap panel, everything works great as you can see in the picture.
Working code:
<section class="container">
<div class="row" style="margin-bottom: 20px">
<div class="col-lg-4">
<select id="zastoj" placeholder="Razlog zastoja" class="demo-default selectized"></select>
</div>
</div>
</section>
When I have selectize combobox inside the collapsible panel, the combobox can not be opened/expanded on click, it looks like it's read-only.
Non-working code:
<section class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Operacije</h3>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
</div>
</div>
</div>
</section>
I got it to work when I use Bootstrap 2.3.2 and selectize.js 0.9 in this fiddle, but I can't get it to work with Bootstrap 3.1.1 and selectize.js 0.9 in this fiddle. I even tried selectize 0.10.1, but no luck.
Can this be solved or is it some kind of version problem? I need to use Bootstrap 3.0+ in my project.
I know I'm a little late to the party, but I had a similar problem when selectize was initialized with the option:
dropdownParent: "body"
If you have this option in your selectize initialization, remove it.
The panel has the css style
overflow:hidden;
That is what keeps the selectize control from showing. You can either hard code the style or add it to your stylesheet.
<section class="container">
<div class="panel panel-primary" style="overflow:visible;">
<div class="panel-heading">
<h3 class="panel-title">Operacije</h3>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
</div>
</div>
</div>
</section>
or in your stylesheet:
.panel, .panel-default, .panel-primary {
overflow: visible;
}
For those that are using selectize.js along with AngularJS, make sure the <select> is not inside a <div ng-if="..."> ... </div> cause it will not work. Instead, use ng-show and ng-hide instead. This also covers the scenario where a <select> is contained within a modal.
Example:
<!-- This won't work -->
<div ng-if="condition == true">
<select id="my-selectize"></select>
</div>
<!-- This will work -->
<div ng-show="condition == true">
<select id="my-selectize"></select>
</div>