.trans{
-webkit-transition:background-position 0.2s;
}
I have nav menu items and added the transition above to each of them.
Also JQuery hover functions as:
$(".menuUL li").mouseover(function () {
$(this).css({'background-position':'center top','color':'white'});});
$(".menuUL li").mouseout(function () {
if(this.id == currentTab)
{$(this).css({'background-position':'center top','color':'white'});}
else
{$(this).css({'background-position':'center bottom','color':'#0196e3'});}});
And click function to chance content:
` $(".menuUL li").click(function(){
$(".menuUL li").not(this).css({'background-position':'center bottom','background-color':'#666666','color':'#0196e3'});
$(this).css({'background-position':'center top','background-color':'#CCCCCC','color':'white'});});
`
The problem is when I click on a menu item and suddenly(in <200ms) leave the element(mouseout) before the transition is completed. Reverse transition occurs and the clicked menu element's background position goes back to the initial position.
I need a code like $(this).endtransition()
Could you help pls?
Related
I have a task where home page contains twenty ad titles (elements).
I want to click on an ad tile that opens the detail page which is working.
On detail page I have an element for CHAT button but that is not visible on every detail page. (reason: some user do not enable CHAT option on their ads)
Here's what I want to achieve,
If Chat element is found, then click on Chat element and come out of loop
If chat element is not found, then go back and click on next ad tile and repeat until detail page with chat is opened
Here's what I have tried but it is not working:
it('should send chats', () => {
const adTiles = 20;
cy.loginWithApi() // custom command that logs in user and land hompage
for (let i = 0; i < adTiles; i++) { //loop to iterate between ad tiles
cy.get('._459428ad').eq(i).click(); // click on ad tile on homepage
cy.wait(5000) //custom wait to load detail page properly
if (cy.get('._5fd7b300.f3d05709').should('exist')){
//if chat btn is these then click on chat
cy.get('._5fd7b300.f3d05709').click()
}
else{
cy.go('back') // else go back to home page if chat not enabled
}
}
});
If the element is not found in IF condition it does not go to else part to go back on home page
I want:
If the "IF" part is failing, i.e, if chat element is not found then it should go back and click on next ad tile on home page.
You can try something like this:
it('should send chats', () => {
const adTiles = 20;
cy.loginWithApi() // custom command that logs in user and land hompage
for (let i = 0; i < adTiles; i++) { //loop to iterate between ad tiles
cy.get('._459428ad').eq(i).click(); // click on ad tile on homepage
cy.wait(5000) //custom wait to load detail page properly
if (cy.get('._5fd7b300.f3d05709').should('exist')){
//if chat btn is there then click on chat
cy.get('._5fd7b300.f3d05709').click()
**// add a go back command here if chat is opened, to return to ad detail page**
}
**// go back as a general command without else command**
cy.go('back') // else go back to home page if chat not enabled
}
});
consider your scenario like this:
if there is a chat button then a click should be performed on chat and do the required operation and then return back to detail page
and after that going back to main page should be a general step
TLDR:
I have the ref of my tabs
#ViewChild('tabsPage') tabRef: Tabs;
I need to get the nav stack of the current tab, check if it can go back and do go back if needed.
Full story:
I have a tabs page which I arrive from another page with a custom animation.
The behavior of my tabs when the user presses the hardware back button must be as follow:
If the user is in the tab 0, go back with custom animation;
If the user isn't in the tab 0, go to tab 0;
If the user has navigated in the current tab, go back in the nav stack of that tab.
Trying to achieve that behavior, I used this code in my tab root page, inside of ionViewDidEnter():
if (this.tabRef.getSelected().index == 0) {
this.navCtrl.pop({
animation: 'nav-shrink'
, direction: 'back'
})
} else {
this.tabRef.select(0);
}
The problem is: when I have navigated in another tab, the back button won't go back in the tab (from the detail to the list, for instance), it will go back to the tab 0 at once.
ionViewWillLeave() isn't called when I navigate further in any tab, so i can't deregister the backButtonAction.
The solution would be to check if the current tab can go back, so, instead of going to tab 0 or going back from the tabs page with a custom animation, I would just nav.pop() the current tab.
https://ionicframework.com/docs/v2/api/navigation/NavController/
canGoBack()
Returns true if there’s a valid previous page that we can pop back to. Otherwise returns false.
Apparently, the Tab itself is the NavController. So I solved my problem this way:
if (this.tabRef.getSelected().canGoBack()) {
this.tabRef.getSelected().pop();
} else if (this.tabRef.getSelected().index == 0) {
this.navCtrl.pop({
animation: 'nav-shrink'
, direction: 'back'
})
} else {
this.tabRef.select(0);
}
I am trying to create a List which behaves like, for example, the Finder Menu on my Mac. In other words if I click on a List Item, keep my mouse down and move up and down the List I want the Selected Item to change.
In my Flex application if I click on my List and then, with the mouse still down, move up and down the List the Selected Item remains the same.
Any advice would be gratefully received.
Thanks
In StackOverflow tradition I am posting a solution to my own problem after working at it more:
I had an ItemRenderer on my List. In the ItemRenderer I declared a variable to hold a reference to the owning List.
private var _parentList:List;
In the 'set data' function I set this variable to the owner List.
override public function set data(value:Object):void {
super.data = value;
// Check to see if the data property is null.
if (value == null)
return;
// If the data property is not null.
// Get a reference to the parent list.
_parentList = this.owner as List;
...
I then added an EventListener to listen for MouseDown events.
// Attach an eventListener to the ItemRenderer.
this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
...
My onMouseOver handler looks like this.
private function onMouseOver(event:MouseEvent):void {
//trace(data.LocationName);
if (event.buttonDown == true) {
_parentList.selectedIndex = itemIndex;
}
}
So with this in place I can mouse-down on my List and keeping the mouse button depressed move up and down the List with the List Item beneath the cursor always being selected. The final piece to this is to ensure that the List responds to the selectedIndex being set by the ItemRenderer. When the user changes the selectedIndex property by interacting with the control, the control dispatches the change and changing events. When you change the value of the selectedIndex property programmatically, it dispatches the valueCommit event. To ensure I responded to my programmatic changing of the selected list item I added a handler to the valueCommit event.
<s:List
id="locationsList"
dataProvider="{presenter.locations}"
itemRenderer="itemrenderers.locationListItemRenderer"
useVirtualLayout="false"
width="1869.698" height="1869.698"
y="65.151" x="65.151"
borderVisible="true"
borderColor="{presenter.backgroundColour}"
contentBackgroundAlpha="0"
contentBackgroundColor="0xff336c"
labelField="label"
change="presenter.onLocationListChange(event)"
valueCommit="presenter.onLocationListValueCommit(event)">
<s:layout>
<s:BasicLayout />
</s:layout>
</s:List>
So far it seems to work fine. Hope it helps.
I am writing an app with an appbar and item list. I want to add some buttons to the appbar which should appear only when the list item is selected.
So, how to show an additional button on an appbar when the item of the list is selected?
This is Windows 8 Metro style C#/XAML application.
<AppBar x:Name="bottomAppBar" IsOpen="True" IsSticky="True">
...
private void itemGridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (itemGridView.SelectedItems.Count > 0)
{
nextButton.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
else
{
nextButton.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}
}
Create the additional app bar button and set its Visibility property to Collapsed.
In the SelectionChanged event handler of the list, set the buttons Visibility property to either Visible or Collapsed depending on whether the list item is being selected or deselected.
Set AppBar.IsOpen property instead of Visibility.
I have 3 radio buttons and a spinbox. Each radio button is supposed to chnage the spinboxes value to inches, feet or meters respectively. How would i do that? I would have to know which radio button was active last, right? Could someone give me some example code please?
Radio Button and check boxes hold their state as value, and expose it to your user. You can call isChecked() to know the state of your member variable radio button. Something like
void some_button_hit(bool checked)
{
if (inches.isChecked()) {...}
else if (feet.isChecked()) {...}
else if (meters.isChecked()) {...}
}
and 'wire' the event toggled from any of these. This is usually done in initialization,
using the form editor, or via connect.
Using the form editor, right click on a radio button, and follow goto slot...
The editor build and connect the event handler:
void GroupBox::on_feet_toggled(bool checked)
{
ui->label->setText("feet");
}
void GroupBox::on_inches_toggled(bool checked)
{
ui->label->setText("inches");
}
void GroupBox::on_meters_toggled(bool checked)
{
ui->label->setText("meters");
}