We Keep Coding

How to click on pseudo-element when testing?

I have a switch / toggle element coming from bootstrap. It works perfectly as expected but I'm having trouble when testing the feature because I don't know how I can click on it:
the toggle is handled by the pseudo-elements :before & :after. I tried many pieces of code to simulate the click on it with capybara but I didn't find a way to achieve it...
Here the snippet: https://jsfiddle.net/ynuf96qe/
Anyone has an idea? Thank you!
Sorry for this element, I didn't find a way to bypass the link error from stackoverflow...
<div></div>

I finally found a way out even if I don't like it...
I changed the way the toggle is displayed in test environment: it is a simple checkbox that allows me to click on it through Capybara.
It now works fine but I'm aware that is a hack.

ng-show does not work correctly with ng-animate

When animate module is loaded then ng-show does not work. Default value for ng-show expression is false, but element is still shown and class ng-hide is missing. If i unload animate module, then it works fine.
<script>
var app=angular.module('app', ['ngRoute','ngCookies','infinite-scroll','ui.mask','ngAnimate']);
</script>

I have the same problem, it's probably a timing issue, but there is a workaround.
in short, there is some collision between a class defined in the "class" attribute with interpolation, and other directives on the same element trying to add another class. removing the class="{{::item.customClass}}" gets ng-class and ng-show directives to work fine.
I couldn't reproduce it on a plunker, probably because of the large amount of components involved. we use $templateCache service, ngAnimate module, and a directive that uses ng-repeat with dynamic class and ng-show (and more, which did not seem to affect the problem). Removing any of those mentioned had solved the issue.
there is one thing I didn't try and that's trying to detach the code from the ui-view hierarchy, perhaps the ui-router is a part of the problem.
Debugging showed that after the ng-class/ng-show's watch executes, the right class was added and it looked like this: class="{{::item.customClass}} ng-hide", but at the end of the digest cycle it looked like this: class="myCustomClass". I guess that is what happens in your code as well.
The way I handled this situation is by moving item.customClass to the ng-class like so: ng-class=[{ ... other classes}, item.customClass]
it's a workaround and not a real solution because:
it's probably a real issue inside Angular's code.
I don't know how to use bind once here, and it's important of course.

Take a look at animate.css. It works with Angular and you can trigger it by class='ng-show'.
Like this:
<div class="animated fadeInRight" data-ng-class="loginShow">
If you set $scope.loginShow to 'ng-show' in your controller it will trigger the animate effect automatically.
If you want to trigger the animate effect on 'ng-hide' you have to write it in your controller like this:
$scope.loginShow = 'ng-hide-add animated fadeOutRight';
Hope this helps!

Triggering click event on an element not working in IE8

I am making an angular app but I have found an instance where I need to use jQuery. I need to click a button which raises a click event on another hidden button. I know this seems odd but I need this functionality because an angular module I am using, ng-file-upload, will not work on styled icons.
My solution was to create two buttons, one hidden, one transparent. I then put the styled icon on the transparent button and made the other button hidden. I then used jQuery to cause the second button to be clicked when the first is clicked. This works fine in modern firefox/chrome but not at all in IE8.
<button id="firstClick" class="fa fa-camera-retro"></button>
<button ng-hide="true" id="secondClick" ng-file-select ng-model="files">Upload</button>
$(document).on('click', '#firstClick', function() {
$('#secondClick').trigger('click');
});
I am currently using jQuery version 1.10.2. Any help with this or alternative ways to achieve this would be greatly appreciated. Thanks in advance!
UPDATE:
I think the problem may have to do with angular-file-select as the secondClick is now firing. However angular-file-select is not. Also I set secondClick to visible and when I click it directly it fires ng-file-select.

As you have not mentioned the angular version of your app is using. But if you are using angular 1.3.x then you have to know that it does not support IE8 browser anymore.
docs for IE guide.
There is a note:
Note: AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.
As per your comment:
every other part of the site is 100% percent angular, and works perfectly. It is just this one situation where I could not think of an angular solution.
Then i want to suggest you that angular does have a lite version of jQuery in it, called jqLite. You can make use of it, like:
angular.element('#firstClick').on('click', function() {
angular.element('#secondClick').trigger('click');
});
Docs for angular.element

Change the jquery version to lower. By seeing this thread i think version 1.10.2 is not support for ie8. i also tried in jsfiddle and test in ie8 there isissues. when i change to change the version it's working Fiddle
$('#secondClick').click();

Edit: You can forward mouse events through elements with good browser support using: http://www.vinylfox.com/forwarding-mouse-events-through-layers/
If you're fortunate enough to not have to work with older browsers then you can get away the pointer-events CSS property.
#firstClick {
pointer-events: none;
}

jQuery hide/show method behaviour in IE7

I'm having a problem with the jQuery hide() and show() methods. Below is a snippet from a project I'm currently working on. This code comes from a multi-page form which is loaded in it's entirety, then jQuery is used to show and hide the various pages. I should metion that this technique works in every broswer except IE7.
//Hide all pages of the form
$("#client_form div[id*='client']").hide();
//Show just the first page
$("#client_form div#client1").show();
The issue is not that the hide() fails but that the subsequent show() doesn't bring the desired page back. I've tried using different methods like slideUp() and slideDown(), I've tried doing css("display","none"), various other ways to perform the hide/show.
I've also tried chaining methods, doing callbacks from hide to then show. Nothing seems to work properly in IE7.
Any thoughts oh mighty Stack Overflow hive mind?
Many thanks,
Neil

Have you tried just using the id(s) of the DIVs? Since they are unique to the page, you shouldn't need to make them relative to the form.
$("div[id*='client']").hide().filter('#client1').show();
Note the chaining so it doesn't need to retraverse the DOM, but simply filters the elements that it has already found.

What about just:
$("#client1").show();
Not sure that's it, but give it a shot? IDs should be unique so no need for the hierarchical selectors.

have you tried adding a class to all the divs you are trying to hide, and hiding that class.
Also change your show selector to use $("#client1") instead of that huge selector.

Have you done a simple test to make sure that your second jQuery is returning the correct object(s), if it's returning anything at all? eg:
alert($("#client_form div#client1").length);
or
alert($("#client_form div#client1").get(0).innerHTML);
or
alert($("#client_form div#client1").eq(0).text());
etc?
This would be the first place I would start - you'd then know whether you had a problem with the show() method, or the behaviour of the jQuery selector.

You might also try running your final HTML markup through a validator to see if there are any errors. IE7 is more strict than most other browsers.

Div not properly hiding in IE

I've got few divs on my website - on the load I want some of them to be hidden, some shown. I am hiding the ones I don't want like this:
$(".divToHide").hide();
It works well in Chrome, Firefox, IE8 an Opera... It doesn't in IE6 (I haven't tested on previous version yet...) - when I load the page all the divs are hidden properly. When I click a link that makes one of them visible it appears correctly. The problems shows when I click on a different link that's supposed to hide the first div and show another. The text of the first div is hidden, but the image stays and obstructs the newly shown div. I'm pretty sure it's a bug - when I zoom in or out of the page the divs that were supposed to be hidden disappear suddenly - they're only visible when I load the page.
Is there a way around it?
EDIT: I'm using jQuery v1.3.2
EDIT: Unfortunately the solution of using addClass to add css class that states display: none doesn't really work - it seemed like it did at first, but the problem is still there.
UPDATE: The js file I wrote can be found here, while the html here. The problem I have is that when you go from one portfolio to the other, the image of the first one stays there obstructing the next, even though it should be hidden (text underneath changes correctly). Wrong disappears when you try to zoom in/out of the page.
I used to hide all portfolios using $("#divId").hide(), but as was pointed out below, I now use $(".classToHide").hide().
UPDATE: The problem is solved on IE8 - I forgot to include the standards mode declaration... However, on IE6 it's still the problem.

You're hiding multiple div's by using an ID selector?
Try giving those div's a class "divToHide" and then use:
$(".divToHide").hide();
Maybe IE8 handles duplicate id's in another way than those other browsers..

Just a thought: you're not using an old (pre-IE8) version of jQuery, are you?
Edit: No, grycz is using the current version.

Edit: simplified to use toggleClass()
You could try doing it manually, like toggling a css class called "hidden." It might look something like this:
function myToggle(element_id)
{
mydiv = $('#' + element_id);
mydiv.toggleClass("hidden");;
}
And your css file would have:
.hidden
{
display:none;
}
I haven't tested this, but this is the kind of workaround I imagine you'd want to think about if this is, indeed, a bug in jQuery/IE8.

Are you sure that hide() function call is even getting called on the page load? Try putting an alert('hi') right before that function call, and see if that happens in IE8.

try
$("#divToHide").css('display:none');