I am trying to grey out the Finish button in jquery steps (like the Previous button in the image below, for steps 1 and steps 2 in my wizard. The third and final step will enable the Finish button.
I thought the best approach is to set
enableFinishButton: true
so it is available for manipulation.
I inspected the grayed out 'Previous' button in chrome editor and I saw this:
It seems to me that I want the id="finish_button" to appear in the
<li class = "disabled" aria-disabled="true">
along with the Previous button in Step 1, and remain there in Step 2, then move to
<li class = "aria-hidden ="false"" aria-disabled="false">
in Step 3. It would also be nice to move the Next button to
<li class = "disabled" aria-disabled="true">
in that third and final step.
I have no idea how to move an element by id around these different classes based on user clicks.
Thanks for any help anyone can provide.
Tom
I have some examples of what I think you are looking for:
// move an element to another element
$("#finish_button").appendTo("li.disabled");
// or leave element where it is and change attributes and classes
$("li[aria-hidden='false']").attr("aria-disabled","true");
$("li[aria-hidden='false']").addClass("disabled");
// set up onclick events for the buttons to make these types of changes
$("#next_button").click(function() {
// code to run when next is clicked
// like enable finish button, disable next button.
$("li.disabled").removeClass("disabled");
});
These may not be the exact selectors you will need to use, depending on if there could be other li elements on the page with similar attributes.
The onclick and href can work together as long as the click function does not return false, or run preventDefault() on the click event.
I hope it helps.
Related
I'm working with Selenium / Java and having an interesting issue with a DropDown Box that fires an event... I can't use Select because the dropdown is using an organized list, not select and option (when the box is closed):
<section id="..." class="ember-view">
<ol id="...">
<li id="...">
I successfully click on the dropdown box: element.click();
and the dropdown box opens! But then it closes right back up again when the next line executes (which is just a System.out.println("...");).
I'm baffled. I've tried
JavascriptExecutor jse = (JavascriptExecutor)driver
jse.executeScript("$(arguments[0]).change()", element);
and
jse.executeScript("$(arguments[0]).focus()", element);
and even
jse.executeScript("$(arguments[0]).blur()", element);
both before and after I click on the dropdown box, but that little sucker just won't stay open! When I print the value of arguments to the console System.out.println(jse.executeScript("$(arguments[0]));, arguments is null... I'm not sure what that means.
If you're not changing the classes when you click the dropdown then you're going to click it and it's going to just disappear after you click it pretty much. Try making it so the dropdown always shows and add a class that disappears on click called "hide" or "removeDisplay" like so
hide { display:none }
and then put it in the html element.
<htmlElement class="alwaysShowThis hide"></htmlElement>
make sure that on clicking it you remove the hide class, then you can just put a timer on it or just detect for when you are hovered over it.
the javascript might look like this:
display(event) {
if(/*checkfor hide class existing*/){
//remove hide class
}
}
hide() {
if(alwaysShowThis or its id is not being hovered over){
//add hide class to its classes
}
}
I mean these are just some 5 min suggestions, obviously there is a way to write these better but I don't have them off the top of my head, but you can find how to do all of these things quite easily.
I do appreciate everyone for contributing, but I never actually found the reason this was happening. So, I tried a cheat instead...
I put it all in a try / catch block, and that seems to slow it down enough to process the event. Of course, the catch is useless because it will never be reached but it works.
It's a total hack, I know. I'd still be interested in finding a reason for this behavior, but until then, we carry on!
Had similar problem and solved it with moving the cursor to the dropdown.
public void hover(WebElement element) {
Actions builder = new Actions(driver());
builder.moveToElement(element).perform();
}
After that it stayed open and I could click my selection.
I am working with the skrollr plugin.
I have a set of arrows. One points down and the other up. When you click the down arrow it takes you to the next section/chapter of the animation. Right now it works great. But my issues is lets say the user does the following:
He/she scrolls half way through the page(lets say section 5). They then decided to see how much of the animation is left. So they click the next section arrow.
This user will be put to section 2 even though they are at section 5 because I have no way to detect when the user hits each section so I can update the arrow #hrefAnchor.
What I was thinking is adding an interval/ event listener that would detect when the section is visible on the DOM and update the arrows to take you to the previous and next sections.
Does anyone know how I can approach this idea?... and will work in ie >= 9
If you're willing to modify the Skrollr library, something I had done was add:
else if(prop === 'javascript') {
eval(val);
}
as an option in skrollr.setStyle which allows then for you to add a hook for arbitrary JavaScript code on elements like each section here using data-XXX="javascript:myFunction();" and I believe Skrollr will even still interpolate numbers in your arguments for you.
If you have control of what gets executed when "next" is clicked, can you check the scroll value at that time to determine which section it is between and switch on that to send them to the appropriate section? Essentially, rather than trying to keep the target current at all times which is wasteful/difficult/error prone, just calculate it when it matters - when the click occurs.
If you give your element a class like "visible", you could select all the visible elements by using jQuery:
$(".element.visible:last-of-type").on("click", function() {
});
I managed to get some js to work to my surprise, now I want to make it a little more complex which is way out of my expertise.
I have a button when clicked will reload a iframe that is on my page. I have multiple iframes all but 1 are hidden. Then I use jquery to display a different iframe and hidden the previous depending on the nav button clicked. e.g. "1-btn" (nav btn) tied to "1-win" (iframe), "2-btn" (nav btn) tied to "2-win" (iframe) etc. So when you click "2-btn", "1-win" iframe hides and "2-win" iframe is displayed. Now I want to change my code so this ties into my reload javasrcipt. Currently, my js only reloads 1 iframe via the iframe id. I want to change this id every time to a different iframe. This will allow my Reload btn to only reload the current iframe displayed and not any of the other that are hidden.
Here is my Reload js
function Reload () {
var f = document.getElementById('1-win');
f.src = f.src;
}
As you can see this reload script only works for iframe "1-win". When i click "2-btn" nav to display "2-win" iframe (and hides "1-win") the reload button still only works for "1-win". Therefore, I want it to also change. For e.g. when I click "2-btn" (nav) to display "2-win" iframe I want to change the Reload id to "2-win" also.
I was thinking of using onClick within my nav buttons which passed through the id of the iframe which that nav btn is tied to. However, I have no idea how to do this.
For full code see:
https://github.com/tmacka88/Service-Manager
Sorry if this doesn't make any sense, I cant think of an easier way to explain it.
Thanks
EDIT
This below answer may or may not still apply now that the problem has been better defined.
One approach you could try is having a hidden field on the page which contains a semi-colon separated list of the Id's of the iframes. E.g.
<input type="hidden" name="iframeids" value="1;2;3;4;5">
On the click event of your button, call some JavaScript which gets the value of the hidden field, takes the first token before the semicolon, and then reorganise the string. An example:
// Next value is 1
// Use 1 in your JS
// Put 1 to the end, next is now 2
<input type="hidden" name="iframeids" value="2;3;4;5;1">
You would contain the logic of re-arranging etc. in the JS function.
Now that the problem is better defined, we can work out a proper solution.
Here are some design considerations:
Ideally you do not want to manually add a new button for every iframe that you put on the page. Main reason being code maintenance. If you were to add a new iframe, or remove one, your code would not function correctly. Also the amount of mark-up required will be unnecessarily high
jQuery will make your life easier, although it's not required, it will cut out a lot of code. I can't stress enough the importance of knowing JavaScript basics first, but this is your responsibility to learn
For point 1, what we would like is a generic solution so that if you add more iframes, the buttons are added automatically. JavaScript is the way to do this (I'm assuming this is just HTML, not ASP.net or php or some other server side
Point 2 - jQuery will help with point 1.
Now we have this understanding, let's look at an outline of what we need to do:
In JavaScript, loop through the iframe tags on the page
For each iframe, generate a button using jquery, using the values like src and id in the iframe as attributes on the button
Add some click-event code to the button do define what it needs to do when clicked
Again using jQuery, add the newly created buttons to the DOM
This did the trick:
function Reload()
{
$("iframe").each(function()
{
if($(this).is(':visible'))
$(this).attr('src', $(this).attr('src'));
});
}
I am very very new to Javascript so i do apologise if its simple.
On my site I have lots of pages with lots of information on them, the info is split into sections in an accordion format.
I want to be able to track if someone engages with the expandable sections but I only need to know one click/Event per user at this moment in time.
I just need to know where i would put my code and what javascript i would need to write in order to track if someone clicks on a section then stops tracking once they have clicked.
In my head I am thinking of having script per expandable section but if someone clicks on one, how will the other sections know not to track any more.
An example is http://www.disabledgo.com/access-guide/tower-hamlets-council/tower-of-london
I hope someone is able to help.
Thanks
If you want to only track on thing you can add a Boolean value to a variable inside an if statement and test that for each event.
So in basic language
lets say you have a button.
<button id='b1'>my button<button>
if you want to only track one of the button clicks you can do something like this. Note: I used jQuery so you need to link to the api in your head tags.
var boolval = true;
$('#b1').click(function () {
if (boolval) {
//alert('worked!'); for debugging
_gaq.push(['category', 'action','lable','opt_interaction','value'])
boolval = false;
}
});
I added an if statement based on the variable boolval that I set to false after the first click. Then when you click again it checks it and comes up false and does not fire the function.
Here is a working jsfiddle http://jsfiddle.net/nicomiceli/L2Efh/
You can do this for your accordion menu. Set the event listener to your class and after the first click make something false so if they try it again it won't fire.
Let me know if you have any questions.
I'm using Javascript/Jquery to have a button toggle which div is displayed in the user's window. I have my initial background div #container which gets toggled with a different div if the user clicks on a certain location. A back button is toggled on once the new div is displayed. I want the back button to switch the div back to the initial #container if it is pressed. The back button's display should be toggled off again if this happens.
Since I have different divs that the back button shows up in, I need to determine which background div the user is viewing in order to toggle that specific div off and the #container back on. The container will not display again if I do not toggle the current div off.
Here's my code for an example of one instance:
JS:
$(document).ready(function()
{
$("#backButton").click(function(e)
{
if(THE CURRENT DIV IS REGION 1)
{
$("#container").toggle(); //toggle the container on
$("#region1").toggle(); //toggle region 1 off
$("#backButton").toggle(); //toggle the back button off
}
});
});
Obviously, I do not know what code to use to determine which div the user is looking at. I tried if(document.getElementById('region1');) but it didn't work; I didn't think it would, but that's the direction I'm going as to how to determine the current div.
Any help would be greatly appreciated!
if($('#region1').is(":visible")){ etc... }
If you are talking about a back button located in the DOM inside the div region1, you could use:
if($(this).parents("#region1").length > 0)
Which says "if the number of parents of this button containing ID region 1 are non-zero". For more information see parents. In general the traversing functions in jQuery will be helpful to you.
This might be what you're looking for:
http://api.jquery.com/parent-selector/
If all you're doing is switching two DIVs back and forth, you don't even have to check which DIV is currently displayed, because the .toggle() function should do that for you out-of-the-box.
Consider you have two DIVs, make sure one is hidden and one is shown, like so:
<div id="region1">foo</div>
<div id="region2" style="display:none;">bar</div>
Now, when you click on the button, you just have to call .toggle() on both of them.
$('#backButton').click(function(){
$('#region1, #region2').toggle();
});
You can even get by with using only one button to do that, and just switch the text inside the button if you'd like.
// inside the click handler
$(this).val( $(this).val() == 'Next' ? 'Back' : 'Next' );
Full code example here: jsFiddle example