I have a page in my mobile app where I have a segment control with 6 options. I want the user to be able to click any of those options and see that content. The problem is, I don't want the user to have to click the back button multiple times to go back through the pages. Is there a way to override the location the back button will navigate to? I'm using OnsenUI/
<div class="navigation-bar bar">
<div class="navigation-bar__center">
<div class="button-bar">
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" checked>
<div class="button-bar__button">
<div class="animated fadeIn">1</div>
</div>
</div>
<div class="button-bar__item">
<input type="radio" name="navi-segment-a">
<div class="button-bar__button">
<div class="animated fadeIn">2</div>
</div>
</div>
...
</div>
</div>
</div>
Assuming you are using version 2, the following documents will aid you:
https://onsen.io/v2/docs/js/ons.html#method-setDefaultDeviceBackButtonListener
This is commonly utilized like this:
ons.ready(function () {
ons.disableDeviceBackButtonHandler();
document.addEventListener('backbutton', function () {}, false);
});
Feel free to put in the empty function whatever code you want or a call to your navigation function.
Why don't you use an ons-tab-bar (or create something like it) and change its style to create your 6 segment option?
https://onsen.io/v2/docs/js/ons-tabbar.html
Related
I am new to AngularJS.
I have created <li> to which I used ng-repeat.
<li> contains images and buttons like like, comment and share which is inside <li> and created by ng-repeat.
I have made function which will replace empty like button to filled like button (By changing background image of button).
But problem is this trigger applies to only first like button and other buttons does not change.
How can I fix this?
Code:
HTML:
<html>
<body>
<ul>
<li ng-repeat="media in images"><div class="imgsub">
<label class="usrlabel">Username</label>
<div class="imagedb">
<input type="hidden" value="{{media.id}}">
<img ng-src="{{ media.imgurl }}" alt="Your photos"/>
</div>
<!-- <br><hr width="50%"> -->
<div class="desc">
<p>{{media.alt}}</p>
<input type="button" class="likebutton" id="likeb" ng-click="like(media.id)" ng-dblclick="dislike(media .id)"/>
<input type="button" class="commentbutton"/>
<input type="button" class="sharebutton"/>
</div>
</div> <br>
</li><br><br><br>
</ul>
</body>
</html>
JS:
$scope.like = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-filled.png)";
alert(imgid);
}
$scope.dislike = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-empty.png)";
}
Thanks for help & suggestions :)
The id for each button should be unique but in your case, it's the same for all buttons ('likeb').
You can set the value of the attribute 'id' for each button dynamically by using '$index' and passing '$index' to the functions as follows:
<input type="button" class="likebutton" id="{{$index}}" ng-click="like($index)" ng-dblclick="dislike($index)"/>
Then in your controller, you can use the functions with the passed value.
For example,
$scope.like = function(index)
{
document.
getElementById(index).
style.backgroundImage = "url(src/assets/like-filled.png)";
}
Another good alternative in your case would be to use the directive ngClass.
use 2 css class for styling liked and disliked state, and then put the class conditionally with ng-class instead of DOM handling. and if you really want to perform a DOM operation (I will not recommend) then you can pass $event and style $event.currentTarget in order to perform some operation on that DOM object.
This is what I gotta deal with:
<nf-field>
<div id="nf-field-2-container" class="nf-field-container lastname-container label-above ">
<div class="nf-before-field">
<nf-section></nf-section>
</div>
<div class="nf-field">
<div id="nf-field-2-wrap" class="field-wrap lastname-wrap nf-fail nf-error" data-field-id="2">
<div class="nf-field-label">
<label for="nf-field-2" class="">Last Name <span class="ninja-forms-req-symbol">*</span> </label>
</div>
<div class="nf-field-element">
<input id="nf-field-2" name="nf-field-2" class="ninja-forms-field nf-element" type="text" value="">
</div>
</div>
</div>
<div class="nf-after-field">
<nf-section>
<div class="nf-input-limit"></div>
<div class="nf-error-wrap nf-error">
<div class="nf-error-msg nf-error-required-error">This is a required field.</div>
</div>
</nf-section>
</div>
</div>
</nf-field>
Please notice the <nf-field> tag. It isn't HTML and has nothing I can use to style it with, regarding what type of input it is, ie. text, textarea, etc.
I have no previous experience of backbone.js and all the javascript by Ninja Forms is minified, so I don't know where to even begin with all that. This is what I did come up with:
(function ($) {
$(window).load(function(){
$('.nf-field-container').unwrap('nf-field');
});
})(jQuery);
This javascript is placed and the very bottom of the page, just before </body>. My excitement was short lived when I discovered that for some reason it only works on hard reload (at least when I develop on localhost).
The whole form is wrapped in a div that has the class .nf-form-cont (or just create it if there isn't).
Your JS should look like this:
(function ($) {
$(window).load(function(){
// Remove unnecessary NF mark ups
$('.nf-form-cont').find("nf-field").contents().unwrap();
$('.nf-form-cont').find("nf-fields-wrap").contents().unwrap();
$('.nf-form-cont').find("nf-section").contents().unwrap();
$('.nf-form-cont').find("nf-errors").contents().unwrap();
});
})(jQuery);
I have a very simple thing I am trying to do. The ng-click is not working. Any ideas why? Is there a problem with divs that are embedded in another div or am I just too sleepy? That item affected is not included in the code below, but no event is ever registered with the click.
<div ng-switch-when="3" ng-mouseenter="showIcons=true" ng-mouseleave="showIcons=false">
<div ng-if="editPerm" ng-show="showIcons" class="icon_holder" style="width: {{obj.mainwidth}}px;">
<div class="deletebutton"></div>
<div ng-click="equationShow=!equationShow" class="equationspecs"></div>
</div>
<div class="equationBlock">
<div class="eqshow" id="{{obj.itemid}}" ng-show="!obj.showEdit" ng-dblclick="obj.showEdit=!obj.showEdit">
<span mathjax-bind="obj.data.Format_left"></span>=
<span mathjax-bind="obj.data.Format_showequation"></span>=
<span mathjax-bind="obj.data.Format_showsolution"></span>
</div>
If you were able to click on a div with no content in it (sometimes a hard thing to do!), it would simply invert the value of equationShow on the scope.
But that would produce no visible difference. From what I can see in your example, the value of equationShow isn't being used in any way.
Based on your comment, you've probably got a problem with variable scoping.
If, for instance, you did something like this, it'd be more likely to work:
<div ng-init="myVariable = false">
<div ng-if="!myVariable">
<div ng-click="$parent.myVariable = !$parent.myVariable">Show the other div</div>
</div>
<div ng-if="myVariable">
Showing this div
</div>
</div>
I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....
So first problem is with routing
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information collapse">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
he has supplied some javascript to handle the click on class-overview
$('.class-overview a').on('click',function(e) {
e.preventDefault();
});
$('.class-overview').on('click',function() {
$('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
$(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
});
and i have a line like this in my state provider
// default route
$urlrouterProvider.otherwise("/")
So the problem is that the ui-router handles the click and sends me back to the home page.
The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?
or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...
If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.
That can be done by using a variable in a ng-show like this:
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#" ng-click="display = !display">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information" ng-show="display">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.
I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:
<div class="class-information" ng-class="{collapse: !display}">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
My index.html page is like as follows:
<div id="sidepanel" data-ng-controller="ListCtrl">
<li data-ng-repeat="record in records">
{{record.id}}
<input type="checkbox" data-ng-model="addwidget">
</li>
</div>
<div id="main">
<div data-ng-view></div>
</div>
for this data-ng-view i have another page recordlist.html in that i have following code:
<div data-ng-controller="ListCtrl">
<ul class="design">
<li data-ng-repeat="record in records">
<div data-ng-switch data-on="record.category">
<div data-ng-switch-when="reporting1">
<div id="{{record.id}}" data-ng-show="addwidget">{{record.description}}</div>
</div>
<div data-ng-switch-when="reporting2">
<div id="{{record.id}}" data-ng-hide="addwidget">{{record.description}}</div>
</div>
</li>
</ul>
</div>
My question is i want to show the first div when i check the checkbox & when i uncheck it i want to show the second div.When both of the data-ng-model & data-ng-hide/show are on the same page then it works fine but in my case it present on two different pages.
Is it correct ? How can i implement this. Need Help.Thanks.
The problem is that you are setting addwidget in the first controller, but is trying to use it in the second. Controllers are not singletons.
So, in this situation:
<div id="sidepanel" data-ng-controller="ListCtrl">
...
</div>
<div id="main">
<div data-ng-view>
<div data-ng-controller="ListCtrl">
</div>
</div>
</div>
You got two separated controllers and scopes. And you are setting addwidget in the first trying to read in the second.
You can either bind it to the root scope $root.addwidget or use a service share to the states.
As you have many records, binding directly to root is a problem, as all of them are going to share the same state. So you gonna need an object in the rootScope and bind the option by id $root.addwidget[record.id]. Made a pretty simplified modification here.