I am making a slide show. Trying to hide play button when it is visible if user does not click on button.
function hidePlay (){
if($("#playAuto").is(":visible") == true ) {
$('body').not('#playAuto').on('click', function(){
$('#playAuto').fadeOut(2000);
});
}
else {
$('#slideshow').on('click', function() {
$('#playAuto, #largeImg, #actionsCon').fadeIn(5000);
alert('finding #playAuto');
});
}
}
I think you want to hide the button if the user does not click it for an amount of time. Otherwise the page starts, at this moment the user does not click the button and it will be hidden. At this time the user is not able to click the button so it will be hidden forever. You can set a variable if the user clicks the button. Hide the button delayed (setTimeout) and first check if the user clicked the button before hiding it.
Pseudo-code:
$('btn').click(function() {
wasClicked = true;
}
setTimeout(function() {
if(wasClicked == false) {
$('btn').fadeOut(500);
}
}, 500);
Related
I am trying to use alertify confirmation box when someone tries to navigate from the page. But in the willTransition action of the route, alertify is very asynchronous, and ember doesn't wait for the confirmation. No matter what you click, the page is already navigated.
willTransition(transition) {
alertify.confirm('Confirm', 'Are you sure you want to navigate?', function(e) {
if(e) {
return true;
} else {
transition.abort();
}
});
}
Please help me with this!!
You can abort and retry transitions. You have to abort the transition before showing the confirmation dialog. After confirming your dialog you can retry the transition and prevent your code from showing your confirmation dialog again. So the following should work (not tested):
export default Ember.Route.extend({
// ...
showConfirmation: true,
actions: {
willTransition(transition) {
if(!this.get('showConfirmation')) {
this.set('showConfirmation', true);
return true;
}
// Abort the transition for now
transition.abort();
// Now show a confirm box with alertify.
// According to the docs, only the following
// is allowed: http://alertifyjs.com/confirm.html
alertify.confirm('Are you sure you want to navigate?', () => {
// According to the documentation of alertify,
// this code is only run when you confirm your box.
this.set('showConfirmation', false);
transition.retry();
});
}
}
}
I have this code that show the tabBadge number
<ion-tabs selectedIndex="{{activeTab}}">
<ion-tab [root]="tabThongBaoPage" tabIcon="notifications" [tabBadge]="badge.getBadge()" tabBadgeStyle="danger"></ion-tab>
</ion-tabs>
and the service controller the bag number
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/toPromise';
import CONST from '../variable';
#Injectable()
export class BadgeSinhService {
badge: number = 0;
constructor() {
}
getBadge(): number {
return this.badge;
}
setBadge(badge): number {
this.badge = badge;
return this.badge;
}
incrementBadge() {
this.badge++
return
}
decreaseBadge() {
if (this.badge > 0) {
this.badge--
}
return;
}
}
If I click on the button with event like this
<button ion-button (click)="cong()">Cong</button>
<button ion-button (click)="tru()">Tru</button>
cong() {
this.badge.incrementBadge()
}
tru() {
this.badge.decreaseBadge()
}
The tabBadge number updated on the view, as soon as the button is click and the click event is fire
But I also have this code that wait for notification event, that will be fire when the server send a notification to the app, it will increment the tab badge number
push.on('notification', (data) => {
console.log('notifi updatei');
this.badge.incrementBadge();
})
It does increment the tab badge number but the view is not update, only when I tap on the tab then the badge number will update on the view
Why it not update the view like the click event ?
I found the answer,use ngZone to notifi angular2 to update the view
push.on('notification', (data) => {
console.log('notifi updatei');
this.badge.incrementBadge();
})
somehow the code above not create a async task in angular 2 zone, maybe because push.on not belong to angular 2
but the answer is
this.zone.run(() => {
// increment badge
})
Hi I am trying to do things with emberjs and google maps.
The issue with google autocomplete api is if user enters text in location search but does not select any value from dropdown suggestion in textbox the first suggestion is not selected. I found a good solution for it on stack overflow solutiion in jquery only
I am trying to do it in ember.
App.AutocompleteAddressView = Ember.TextField.extend({
tagName: 'input',
autocomplete: null,
didInsertElement: function () {
this._super();
var options = {
componentRestrictions: {
country: "xx"
}
};
this.set('autocomplete', new google.maps.places.Autocomplete(this.$()[0], options));
//var autocomplete = new google.maps.places.Autocomplete(this.$()[0], options);
},
keyDown: function (e) {
var that = this;
var suggestion_selected = $(".pac-item.pac-selected").length > 0;
if (e.keyCode === 13 && !suggestion_selected) {
//key down arrow simulations
var event = Ember.$.Event('keypress', {
keyCode: 40
});
Ember.run(this.$("#searchTextField"), 'trigger', event);
console.log('loggin autocomplete');
console.log(this.get('autocomplete'));
//adding google map event and then triggering it
google.maps.event.addListener(this.get('autocomplete'), 'place_changed', function () {
var place = that.get('autocomplete').getPlace();
that.set('autocomplete_result', place)
console.log('google event was triggered');
console.log(that.get('autocomplete_result'));
});
google.maps.event.trigger(this.get('autocomplete'), 'place_changed');
}
}
});
Now I need to do simulation part. I guess ember testing has somthing that simulates keypress but I cannot used it.
If I use the solution from the link I mentioned things work fine first time but on clicking browser back navigation it does not work.
The solution I tried in code not working
I have a box. when you put your mouse over the box, a button appears on top of the box. the hover function works in such a way that it doesn't recognize that the mouse is still on top of the box. how can I solve it?
//I create the paper
var paper = Raphael(0, 0, 500,500);
//I add the box
var box = paper.add([{
type: "rect",
x: 100,
y: 100,
width: 100,
height: 100,
fill: '#000',
}])
// I declare a varible for the button
var button
//I add hover functions to the box.
//first function: when the mouse is on, create a red circle and add an
//onclick event to the circle
box.hover(function () {
button = paper.circle(150, 150, 25).attr({ 'fill': 'red' })
button.click(function () { alert("You clicked me!")})
},
//second function: when the mouse leaves the box, remove the circle
function () {
button.remove()
})
Here is an example
http://jsfiddle.net/V4E4Q/
You will have to deal with events from different objects one way or another, either I guess with a couple of handlers, or with one that has event propagation and handling possibly, or group with a set. The current event is coming from the button when its displayed, so the event logic doesn't quite make sense as it is. So you could add a handler to the button as well (edit, or use a set for example).
One example would be...
var button = paper.circle(150, 150, 25).attr({ 'fill': 'red' });
button.hide();
button.click( function() { alert("button clicked"); } );
box.mouseout( function() { button.hide() });
button.mouseover( function() { button.show(); });
box.mouseover(function () { button.show(); } );
I'm not sure if this is the most efficient way, but it should work. jsfiddle here http://jsfiddle.net/V4E4Q/1/
Edit: Another possibly cleaner way could be to group the elements into a set and handle the click. Here is a modified example http://jsfiddle.net/V4E4Q/3/
I'm right now creating my app only in C++, i creating the NavigationPane and adding the container with the Views i need. It works fine, but i want to capture a Button clicked to make the NavigationPane pop the current page and push a diferent (made in runtime) Page.
How can it be achieved, i tried working with the signals, but i think i'm not getting how it works the signals and the QT_SLOTS, in the case of the NavigationPane, it doesn't have those methods as QT_SLOT.
Any advice will be appreciated.
You first need to connect the clicked() signal of your Button to the pop() slot of your NavigationPane. It should look like this:
// Connect the button's clicked() signal to the navigation pane's
// pop() slot.
bool connectResult = QObject::connect(myButton,
SIGNAL(clicked()),
myPane,
SLOT(pop()));
// Use the Q_ASSERT() function to test the return value and
// generate a warning message if the signal slot connection
// wasn’t successful.
Q_ASSERT(connectResult);
// Indicate that the variable connectResult isn't used in the
// rest of the app to prevent a compiler warning.
Q_UNUSED(connectResult);
This page about buttons might help you understand how to handle this. To better understand how to connect objects together, you might also want to have a look at a the signals and slots documentation.
You then have to create and push your new page after the pop. To do that, you simply have to connect the popTransitionEnded (bb::cascades::Page *page) slot of your NavigationPane to your custom function that will do the job.
bool connectResult = QObject::connect(myPane,
SIGNAL(popTransitionEnded(bb::cascades::Page*)),
this,
SLOT(createNewPageAndPushIt(bb::cascades::Page*)));
Q_ASSERT(connectResult);
Q_UNUSED(connectResult);
See this page for more details about the usage of NavigationPane to stack pages.
---------------------TRY THIS-------------
Get sample app from my github samples for your query....
https://github.com/svmrajesh/BB-10-Cascades/tree/master/MY%20APPS/stackNavigation
main.qml: (first page)
import bb.cascades 1.0
NavigationPane {
id: navigationPane
backButtonsVisible: false
peekEnabled: false
Page
{
id: rootPage
Container {
background: Color.LightGray
layout: DockLayout {
}
Label {
text: "First page"
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
}
}
actions: [
ActionItem {
title: "Next page"
ActionBar.placement: ActionBarPlacement.OnBar
onTriggered: {
var page = pageDefinition.createObject();
navigationPane.push(page);
}
attachedObjects: ComponentDefinition {
id: pageDefinition
source: "PageTwo.qml"
}
}
]
}
onPopTransitionEnded: {
page.destroy();
}
}
2.second page
import bb.cascades 1.0
Page {
id: pageTwo
Container {
background: Color.Gray
layout: DockLayout {
}
Label {
text: "Second page"
horizontalAlignment: HorizontalAlignment.Center
}
Container {
layout: StackLayout {
}
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
Button {
text: qsTr("Next Page")
imageSource: "asset:///images/picture1thumb.png"
onClicked: {
// show detail page when the button is clicked
var page = getSecondPage();
console.debug("pushing detail " + page)
navigationPane.push(page);
}
property Page secondPage
function getSecondPage() {
if (! secondPage) {
secondPage = secondPageDefinition.createObject();
}
return secondPage;
}
attachedObjects: [
ComponentDefinition {
id: secondPageDefinition
source: "PageTwoOne.qml"
}
]
}
Button {
text: "Previous Page"
onClicked: {
navigationPane.pop();
}
}
}
}
/* ------------- Use this Code If back button visibility is "True"-----------------
paneProperties: NavigationPaneProperties {
backButton: ActionItem {
title: "Back"
// imageSource: "asset:///back.png"
onTriggered: {
navigationPane.pop();
}
}
} */
}
3.last page
import bb.cascades 1.0
Page {
id: pageTwoone
Container {
background: Color.DarkGray
layout: DockLayout {}
Label {
horizontalAlignment: HorizontalAlignment.Center
text: "Last Page"
}
Container {
layout: StackLayout {}
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
Button {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
text: qsTr("Goto Home Page")
onClicked: {
// show detail page when the button is clicked
navigationPane.navigateTo(rootPage);
}
}
Button {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
text: qsTr("Goto Back")
onClicked: {
// show detail page when the button is clicked
navigationPane.pop();
}
}
}
}
}
------------ ADD More pages to navigate using this code----------------------------
-------------copy this code and run.. get sample app from above link if needed ------
Have you checked this?
https://developer.blackberry.com/native/reference/cascades/bb__cascades__navigationpane.html
NavigationPane* navigationPane; // Global var to change current Page with push/pop
void initializeNavigationPane()
{
ActionItem* nextAction = ActionItem::create()
.title("Next page")
.onTriggered(this, SLOT(pushPage()));
navigationPane = NavigationPane::create();
QObject::connect(navigationPane, SIGNAL(popTransitionEnded(bb::cascades::Page*)),
this, SLOT(popFinished(bb::cascades::Page*)));
// Put a new page
navigationPane->push(Page::create()
.content(Label::create("First page"))
.addAction(nextAction, ActionBarPlacement::OnBar));
Application::instance()->setScene(navigationPane);
}
void popFinished(bb::cascades::Page* page){
delete page;
}
//You have to connect this method when you want a new Page pushed.
Q_SLOT void pushPage(){
ActionItem* backAction = ActionItem::create()
.title("Previous page")
.imageSource(QUrl("asset:///back.png"))
.onTriggered(navigationPane, SLOT(pop()));
navigationPane->push(Page::create()
.content(Label::create("Second page"))
.paneProperties(NavigationPaneProperties::create()
.backButton(backAction)));
}
Explication:
An instance of the object NavigationPane allows change the current page to others with the push/pop effect (see image):
developer.blackberry.com/native/files/reference/cascades/images/navigation_pane_push_pop.png
You have to inicialice with:
navigationPane = NavigationPane::create();
And tell to the Application you will use this instance to change page:
Application::instance()->setScene(navigationPane);
Now you app got a NavigationPane, but nothing is inside, if you run it, you will get a black screen, to add a page (the principal page - page0) use push:
navigationPane->push(Page::create()
.content(Label::create("First page")));
To add a new Page that It can go back to the page0 we just push use Push again, Remeber include the back button to go back:
navigationPane->push(Page::create()
.content(Label::create("Second page"))
.paneProperties(NavigationPaneProperties::create()
.backButton(ActionItem::create()
.title("Previous page")
.imageSource(QUrl("asset:///back.png")) //You should add manually this image.
.onTriggered(navigationPane, SLOT(pop()))));
Q_INVOKABLE void insert (intindex, bb::cascades::Page *page )
https://developer.blackberry.com/native/reference/cascades/bb__cascades__NavigationPane.html#function-insert-index-page
Inserts a page at a specified index in the NavigationPane.
The page that is passed must not be 0 or it will be ignored. If the
page is already present in the navigation stack, the operation will
fail. This operation will not trigger a transition effect, even if the
page is added to the top of the stack. If a transition effect is
desired, use push() instead. The topChanged() signal will be emitted
if the operation affects the top node.
Parameters
1- index
The index where the page will be placed. If the index < 0 the the page is inserted in the bottom. If the index > the number of pages in the navigation stack, it is added on top of the stack.
2- page
The page to be inserted, must not be 0.
Since: BlackBerry 10.0.0
An idea is
You could use:
navigationPane.count() To get the current pages in the nagationPane stack, and use:
navigationPane.insert(navigationPane.count()-1, myPageToBeBack); To push a page between the current page and
the previous one