I am using jQuery Roundabout (http://fredhq.com/projects/roundabout/) to rotate through 3 images. I am not aware of how I can add "Next" and "Prev" buttons to help the user rotate through the images. Currently I have it set to auto rotate or slide to next image if the user clicks on the image itself. However, I would like to also add the ability of these buttons as a secondary means of navigation. Is there something in the existing code that needs to be changed in order to make this work or does it require separate code?
get a button, give it a class of next then in your roundabout, set to option to the next button.
<script>
$(document).ready(function() {
$('ul').roundabout({
btnNext: ".next"
});
});
</script>
same for btnPrev
http://fredhq.com/projects/roundabout/#/api
Related
My problem is not a double click on same button but on 2 buttons.
User make a double click on a button.
The first click is detected by a first button
the controller do the action
the UI is refreshed, another button is display at same position
the second click is catched by the second button
=> user don't want click on the second button
How can I avoid this ?
I have tested :
To disable all UI buttons during action
but if action is really quick, buttons are enable before the second click
To not put 2 buttons on same place in the UI
not always possible and with responsive UI it's not possible to manage all cases
To add a global timestamp on click, and test during the second click if we have 500ms
_click: function(args)
{
// to avoid double click user need wait 500ms between each click
if(window.paperbutton_timestamp)
{
var diff = new Date() - window.paperbutton_timestamp;
if(diff < 500)
{
window.paperbutton_timestamp = new Date();
return;
}
}
window.paperbutton_timestamp = new Date();
if(scope.click)
{
scope.click(args);
}
},
Ok it does the job.
Now my problem is I have many protractor end to end tests, with more 2000 clicks.
Some protractor click are done in less 500ms.
Which solution can I have ?
1. Add a wait after each click
(more 2000 wait to add manually)
2. Set the 500ms in a global variable and override this value to 0ms
how to override on each test and each page refresh ?
3. Override protractor click ?
Seam is the better solution but I don't know how to do this.
Do you have another better idea :) ?
This is usually solved using good old human-computer interaction. Try using a style of button that visually reacts to hover, mousedown and mouseup events. This is usually enough to the user understand that a double click is not necessary. Stackoverflow itself has an awesome example:
Iddle button:
Hover button:
Mousedown button:
Mouseup button:
But if you really wish to prevent undesired clicks, maybe the best approach would be to disable buttons during actions and when you are about to re-enable then, put this action in a timeout, so the disabled buttons will last a little longer.
Another suggestion
You could implement a global function to spawn an invisible div covering the whole screen when required. This would prevent everything onscreen from working.
<div style="position:fixed; top:0; left:0; width:100vw; height:100vh; z-index: 10000"></div>
Put it in your layout file, usually app.component.html, and implement a *ngIf for it show up only when necessary. Also, its z-index should be greater than the z-index of any other element in your whole app.
have you consider Using *NgIf for both the buttons
**
<button *NgIf="oneActive" (click)="oneActive=false;callfunction()">one</button>
<button *NgIf="!oneActive" (click)="oneActive=true;callfunction2()">two</button>
**
It would be better if you write a custom function for protractor click:
protractor.ElementFinder.prototype.waitClick = function(wait){
browser.sleep(wait);
this.click();
};
describe('Tests', function() {
element.all(by.css('#testElements')).get(0).waitClick(1000)
});
Since, overriding the default click function is not recommended.
So I want to set the background color to white on a button called (.start_timer) when i click on another button called (.stop_timer). But when I click it, all my .start_timer buttons get triggered of course. But I need that one specified button. Can I make an ID on my buttons or what can i do?
I hope you understand what my problem is :)
$(this).css("background","red").delay(1000).queue(function() {
$(this).css("background", "white").dequeue();
$(".start_timer").click(function() {
$(this).css("background","white");
});
});
If you want to change the color of the "start" button while clicking on "stop" then you must write the code in on click for the stop timer and use the class of stop button while using background css
I have a page that "fakes" going to another page by means of conditionally showing/hiding certain elements. When either of the two images that are shown by default are clicked, they are both hidden and, based on which one was clicked, other elements are displayed.
Among the elements then displayed is a "go back" button. When that button is clicked, it hides what is currently being displayed (including itself), and shows the original two images.
It works, except the page, after a brief delay, "blinks" (is refreshed). Why, and how can I avoid this refresh?
Here's the jQuery behind the button click:
$('#backToMain').on( "click", function() {
$('#preTravelImages').addClass('finaff-form-help-hide');
$('#postTravelImages').addClass('finaff-form-help-hide');
$('#preTravel').removeClass('finaff-form-help-hide');
$('#postTravel').removeClass('finaff-form-help-hide');
$('#backToMain').addClass('finaff-form-help-hide');
});
Note: "preTravelImages" is a div that contains several images; the same goes for "postTravelImages". "preTravel" and "postTravel" both contain one image only (clicking the preTravel image makes the images in preTravelImages visible, and likewise clicking the postTravelImage makes the images in postTravelImages visible).
The "hide" class is:
.finaff-form-help-hide {
visibility: hidden;
display: none;
}
Here is the button that is clicked:
<button class="finaff-form-help-hide" id="backToMain" name="backToMain">Back to Form Help</button>
Does the order of these add/remove Class calls matter? Or what do I need to do?
Add a return false to prevent default link action:
$('#backToMain').on("click", function() {
$('#preTravelImages').addClass('finaff-form-help-hide');
$('#postTravelImages').addClass('finaff-form-help-hide');
$('#preTravel').removeClass('finaff-form-help-hide');
$('#postTravel').removeClass('finaff-form-help-hide');
$('#backToMain').addClass('finaff-form-help-hide');
return false;
});
I am using a jquery plugin called mmenu to load a side menu when a button has been clicked.
That works fine, but Im also trying to get a hamburger style image going at the same time. I start off with the three lines and then when the menu button pressed it changes into a cross, this seems to work.
my issue comes when trying to close the menu, I want it to return back to a cross. The mmenu allows you to click anywhere to close the menu but I cant get the jquery right to change it back.
I added a class when the button (.menuvate) is clicked, called "active" which displays the cross but no matter how I try I cant get it to check that the class is active when anywhere on the page is clicked after the menu has been opened.
This is my code so far
$('.menuvate').click(function(){
$("#my-menu").trigger("open.mm");
$("#mm-0").addClass("menu-opened");
$("#nav-toggle").addClass("active");
});
$(document).click(function() {
alert("me");
});
I just put an alert in to tell me when this is being fired which of course it does everytime the page is clicked.
How do I get it to check for the active class after the menu has been opened when the page is clicked again so I can remove the class and change it back?
Thank you.
You will want to listen on the custom events to know if the menu is closing or closed.
Basically, what you want is:
$("#my-menu")
.on( "closing.mm", function() {
alert( "The menu has started closing." );
})
.on( "closed.mm", function() {
alert( "The menu has been closed." );
});
Read more on the ones fired by mmenu at http://mmenu.frebsite.nl/documentation/custom-events.html
You can use the jQuery hasClass attribute.
$("#mm-0").hasClass("menu-opened");
This SAPUI5 application that I am developing uses a Panel control that has some buttons on it. Now I have to hide those buttons whenever a user collapses the panel and show them back upon expanding. I tried using the getCollapsed() method but to no effect. What I am basically looking for is a collapse event for the panel which is not available by default.
Any helping hand out there?
Thanks.
Hmmm, seems like there are no event handlers for the Panel control indeed...
As a workaround, you could add your own expand/collapse toggle button in the panel tray, and upon clicking that button you could grab the getCollapsed() state and show/hide your other buttons accordingly
You could use the sap.m.Panel https://openui5.hana.ondemand.com/docs/api/symbols/sap.m.Panel.html#event:expand
which has an expanded property and you can just use
setExpanded(true) ;
to expand the panel and let the control retain its state without you having to track it.
I am sure this has all changed since you asked the question and this answer is related to 1.24.2
Perhaps the only solution here is to replace the default collapse icon with a button of your own and attach the press event to it. Like:
1. Declare a `Panel` with `showCollapseIcon` set to false.
var oPanel = new sap.ui.commons.Panel({
showCollapseIcon: false
});
2. Add your own button. I prefer a `lite` button.
var oCollapseButton = new sap.ui.commons.Button({
icon: '<your icon>',
lite: true,
press: function (e) {
if (!oPanel.getCollapsed()) {
//If not collapsed
oPanel.setCollapsed(true);
//Code to hide panel buttons
//(and toggle collapse button image if needed) after this
} else {
//If already collapsed
oPanel.setCollapsed(false);
//Code to show panel buttons
//(and toggle collapse button image if needed) after this
}
}
});
oPanel.addButton(oCollapseButton);
P.S: You might also want to add some styling and alignment to your custom collapse button. For that, you can add a CSS3 class to your button before adding it to the panel like:
oCollapseButton.addStyleClass('<your class>');