Everything works perfectly. The appbar is displayed only in the home, but if I exit the App without closing and again opening it, it disappears the appbar
In home.js
WinJS.UI.Pages.define("/pages/home.html", {
ready: function (element, options) {
appBar = document.getElementById("createAppBar").winControl;
appBar.getCommandById("cmdSettings").addEventListener("click", doClickSettings, false);
appBar.getCommandById("cmdCalibrate").addEventListener("click", doClickCalibrate, false);
appBar.getCommandById("cmdShare").addEventListener("click", doClickShare, false);
appBar.getCommandById("cmdEdit").addEventListener("click", doClickCamera, false);
getLoc();
}});
...
In home.html
<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{closedDisplayMode:'minimal'}">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSettings',label:'Ajustes',icon:'settings',tooltip:'Ajustes'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCalibrate',label:'Calibrar',icon:'fourbars',tooltip:'Calibrar'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdShare',label:'Compartir',icon:'like',tooltip:'Corre la voz'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'about',icon:'like',tooltip:'Corre la voz'}"></button>
<!--<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}"></button>-->
Can someone help me?
Tnx in adv!
Looks like it is a bug in WinJS.
https://github.com/winjs/winjs/issues/140
Related
I have a DOM like this:
<form id="frmResendPassword" role="form" method="post">
<div class="form-group">...</div>
<span class="pull-right">
<button type="submit" class="btn btn-sm btn-default">
Resend Password</button>
</span>
</form>
I want to tap the "Resend Password" button.
I have tried many different selectors such as:
elementByClassName("btn-default")
elementById("frmResendPassword")
elementByName("Resend Password")
elementByCss(thecsspath)
ect.... none of them perform the tap()...
however they do not throw a element not found error....
so im confused. can some one please help
update:
Here is the basic automation code... its very basic
it("should send text to phone", function(){
sleep.sleep(5)
return browser
.elementByName("mobileNo")
.sendKeys(usrnme)
.elementByCss("#frmResendPassword button[type=submit]")
.tap()
})
It types the mobile number in fine, however it seems to just ignore pressing the button.
My guess is that the selector is the problem. Try this:
elementByCss("button[type=submit]")
or if that doesn't uniquely identify it, maybe this:
elementByCss("#frmResendPassword button[type=submit]")
In English that means a button with type value of submit that has an ancestor of a form where the id(#) is frmResendPassword
This is how I solved it, thanks to mrfreester
it("should send text to phone", function(){
sleep.sleep(5)
return browser
.elementByName("mobileNo")
.sendKeys(usrnme)
.elementByCss("#frmResendPassword button[type=submit]")
.click()
})
First of all, I have no Idea what I'm doing exactly, secondly I hope my english is quite good enough.
My favourite website recently changed its look and feel, therefor I try to reanimate the "old" style via Greasemonkey. So far everything works but I have an issue opening a window for a comment. This comment(field) is now part of the site itself and no loger a free floating window.
What i did is adding this to the script:
var newWin = open('','write a comment','height=300,width=600');
newWin.document.write('<html><head><title>Write a comment</title></head></head><body bgcolor="#555555" text="#000000" topmargin="0" leftmargin="0" style="overflow:hidden;"><form id="commentForm" name="photoComment" action="http://[...]/add_photo_comment/38060403" method="post"reloadUrl="[...]/photo-comments/38060403/de/page/1"data-ua-submit="Fotodetailseite;Kommentar verfassen;Foto;38060403"><div class="media-left"><div class="media-body"><div class="form_row"><textarea id="photoComment_comment" name="photoComment[comment]" required="required" rows="5" class="form-control write-comment" placeholder="Anmerkung"></textarea></div><div class="row fcx-space-tiny"><div class="col-lg-12 text-right"><button type="submit" class="btn btn-primary btn-sm submit-comment"><i class="icon icon-comment"></i>send</button></div></div></div></html>');
Sofar this works for me when inserting the code directly into the script (window opens on entering the site directly)
As far as I wrap it in a function, the new window will be opened but without contetnt:
var input=document.createElement("input");
input.type="button";
input.value="Anmerkung";
input.onclick = createComment;
input.setAttribute("style", "font-size:18px;position:absolute;top:80px;left:40px;");
document.body.appendChild(input);
function createComment()
{
[exactly the same script as above]
};
What am I doing wrong?
Thanks for help
I want videos playing in the reveal modal window to stop playing when the modal window closes (who doesn't?). This is easily done with jQuery by setting the iframe source to empty.
But I can't figure out how to make it work in a callback. The modal window itself functions as expected. And this works:
$('.close-button', '#video-reveal').on('click', function() {
$('#video-player').attr("src", "");
console.log("button event fired");
});
However, neither of the following has any effect:
// from documentation
$(document).on('close.fndtn.reveal', '[data-reveal]', function() {
var modal = $(this);
console.log("closing reveal event fired");
});
// my attempt to do it programmatically
$('[data-reveal]').on ('opened.fndtn.reveal', function() {
var modal = jQuery(this);
console.log("opened reveal");
});
So it feels like the event is not firing. I'm sure it is, but how to capture it?
The magic of Foundation 6 is not all obvious without some digging. Working with version 6.2.3
$(document).on(
'open.zf.reveal', '[data-reveal]', function () {
console.log("'open.zf.Reveal' fired.");
}
);
It appears as though you are using Foundation 5's callbacks, rather than Foundation 6...
For your callbacks, I'd suggest using 'closed.zf.reveal', 'open.zf.reveal' or 'closeme.zf.reveal' as mentioned here:
http://foundation.zurb.com/sites/docs/reveal.html
In HTML
<!--the button -->
<a class="button" data-open="videoModal" href="#">Example Video Modal</a>
<!--Modal Video -->
<div class="row" id="theVideo">
<div id="videoModal" class="reveal" data-reveal data-close-on-click="true">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe id="youtubePlayer" width="854" height="480" src="https://www.youtube.com/embed/4z6aSO05YHg" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button" onClick="destroyVideo()">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<!--in apps.js-->
function destroyVideo(){
var url = $('#youtubePlayer').attr('src');
$('#youtubePlayer').attr('src', '');
$('#youtubePlayer').attr('src', url);
}
I try to make the menu button not to show when the back button is showing. is there a way to let Ionic take care of that? or it's up to me?
for example if i use ui-sref to go from app.users to app.users.add or app.users.details i expect the menu button to be hidden and the back button to show, but they're both showing when i go to nested views. example:
<button class="button button-positive" ui-sref="app.users.details({id:user.id})"> User details </button>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html'
//controller: 'AppCtrl'
})
.state('app.users', {
url: '/users',
views: {
'menuContent#app' : {
controller: 'UsersCtrl',
templateUrl: 'templates/users.html'
}
}
})
.state('app.users.add', {
url: '/addUsers',
views: {
'menuContent#app' : {
controller: 'AddUserCtrl',
templateUrl: 'templates/add_user.html'
}
}
})
.state('app.users.details', {
url: '/userDetails/:id',
views: {
'menuContent#app' : {
controller: 'UserDetailsCtrl',
templateUrl: 'templates/details_user.html'
}
}
})
}
menu.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear">
<i class="icon ion-ios7-arrow-forward"></i> back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view>
</ion-pane>
<ion-side-menu side="right">
<header class="bar bar-header bar-stable">
<h1 class="title">Title</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.users">
Users
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.users.add">
New user
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My views structure is as such:
<ion-view title="Title">
<ion-nav-buttons side="right">
<button menu-toggle="right"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
...
View Content
...
</ion-content>
</ion-view>
This is done by ionic by default now in beta 14. You can also toggle this by this attribute.
<ion-side-menus enable-menu-with-back-views="false">
Relative Codepen
Sidemenu Starter Project
Sidemenu Docs
Is also possible to override that from a child page just adding the ion-side-menus directive inside the child template:
<ion-side-menus enable-menu-with-back-views="true"></ion-side-menus>
<ion-view view-title="My Child page">
<ion-content>
<h1>HEY</h1>
</ion-content>
</ion-view>
This will add the complete navigation bar (ion-nav-bar) inside your child page that was added into menu.html template (according with the example above)
Place the navbar with menu button on the html page on which you need menu button and place navbar with back button on the page where you need back button.
Like this I need Menu On home page so place your navbar on homepage with menu button
<ion-view title="home">
<ion-nav-bar class="bar-stable main-header-nav home-page">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu- toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content></ion-content>
</ion-view>
And I need back button on Inbox page so use navbar with backbutton on inbox page
<ion-view title="">
<ion-nav-bar class="bar-stable main-header-nav home-page">
<ion-nav-back-button class="button-clear go-back">
</ion-nav-back-button>
</ion-nav-bar>
<ion-content></ion-content>
</ion-view>
I solved in 2019 adding the property "menuToggle" to the Button. That tells Ionic/Angular that the function of that button is to be the "Hamburguer Button" so, Angular understand and hide it when the "Back Arrow Button" is shown.
<button menuToggle ion-button icon-only (click)="btnHamburger()">
<ion-icon name="menu"></ion-icon>
</button>
I have a textbox in my site that can't seem to get focus. I tried adding focus on click with jQuery but that seems to have no effect. Can anyone help me out?
App link: http://test-app-andrew.herokuapp.com/
Jade:
div(id="templates",class="sideBarContent")
div(id="addPageBox")
input(type="text",id="addPage")
HTML(output from above):
<div id="templates" class="sideBarContent">
<div id="addPageBox">
<input type="text" id="addPage">
</div>
</div>
Coffeescript:
$ ->
$('input#addPage').click ->
$('input#addPage').focus()
Javascript (output from above):
// Generated by CoffeeScript 1.8.0
(function() {
$(function() {
return $('input#addPage').click(function() {
return $('input#addPage').focus();
});
});
}).call(this);
Any help would be great, thanks!