We Keep Coding

JavaScript class removing doesn't apply transition

Hey I have this problem that when I'm removing class dynamically it doesn't apply transition. Don't worry problem isn't with class itself, because when I try to delete manually trough dev tools it applies transition.
Here is the situation. I have big popup but lets just write it like this.
<div class="popup hidden">
<div class="popup__content hidden">
Bunch of stuff here that doesn't really matter
</div>
</div>
I am generating this markup into its container with insertAdjacentHTML. I have removeHidden method that looks like this
removeHidden(arr) {
[...arr].forEach(el => el.classList.remove('hidden'));
}
And I'm calling this method with passing a html collection as an argument, in this case those are both of the divs that have a hidden class.
removeHidden(document.getElementsByClassName('hidden'));
Now everything works fine, I mean classes are removed, my popup is shown, except that I don't get that nice transition I built into these classes, which works fine when deleting automatically which I already said just to note You that that is not a problem.
Thanking you all in advance for solving this problem! ;)

Problem solved. I just added timer where after 0.2 seconds those classes are removed.

JavaScript DIV Editing Destroys Functionality of Other Elements

So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?

The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).

Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');

Selenium : I have a webpage where two elements have same Xpath, even index doesn't separate them apart

They both get identified when the index is [1], and for index [2] nothing gets identified. The only thing which separates them is that the first popup has display:none, and the other popup has display:block, but they do not get a play in deciding this particular fields because Xpath, because these fields are fetched from some different source.
Alas, these divs even though they have same elements, they have a document attribute so, the Xpath for these don't start with this div, but after the part of the document. I have racked my brain all I could, I could give you a vague idea of how the code looks like below.
The code looks like:
<div name='some-name' style="display:none;">
...
<!document>
<div id='some-id'>
....
<button name='some-name-2'>some-button-name</button>
....
</div>
...
</div>
<div name='some-name' style="display:block;">
...
<!document>
<div is='some-id'>
....
<button name='some-name-2'>some-button-name</button>
....
</div>
...
</div>
So both of their Xpath looks something like:
[id='some-id']/...../button
Giving ([id='some-id']/...../button)[1] fetches both the elements.
Giving ([id='some-id']/...../button)[2] fetches none of them.
Update
I had two iframes in this case, and since I had to switch between them, it was not getting detected. Thanks, I fixed this.

The way your Xpath reads is to find the element with id='some-id' and then find the first or second button within that. If you change it so that the [1] and [2] are placed after the [id='some-id'] rather than at the end of the path you can choose to find the first or second [id='some-id'], and then the button within that element.

Unless the two elements are actually one element, then there will always be XPath expressions that select one and not the other. In fact, there are an infinite number of such expressions. The trick is in finding a good XPath expression, and that depends on how much of the page content is fixed, and how much is variable (if the data is completely fixed, then you don't even need to read it, because you already know everything about it).
I think your inference that the subscripts [1] and [2] don't work is incorrect. It would be useful to know what expressions you actually used, because what you have written in your post:
([id='some-id']/...../button)[1]
is not a valid XPath expression at all.

Prototype toggle - two instances getting muddled

I have two instances that use the toggle(). So in the code there is this link:
Completely independent link
Followed by a more complex show hide toggle area:
Show All
And then the reverse of that:
Show Less
The problem I have is when I toggle the "Show all" link - it renders the "Completely Independent link" unusable. Sometimes it even opens shows/hides #div1?!?
Not really sure what is going on but the two instances are definitely getting muddled up.

I think what is happening is your click event is bubbling up the DOM and it hits other elements - but I can't be sure without seeing more of your HTML structure.
That being said - I would suggest putting everything in separate click observers, it removes the javascript from the HTML, and makes it easier to handle.
For example your 3 links
Completely independent link
Show All
Show Less
would change to
Completely independent link
Show All
Show Less
and add this in your head or js file or somewhere on your page
<script>
document.observe('dom:loaded', function()
$('link1').observe('click',function(){
$('div1').toggle();
});
$('showall').observe('click',function(){
$('showLessInfo').toggle();
$('showAllInfo').toggle();
$('showAllInfoLink').toggle();
});
$('showless').observe('click',function(){
$('showLessInfo').toggle();
$('showAllInfo').toggle();
$('showAllInfoLink').toggle();
});
});
</script>
Now for extra bonus, I changed the href="#" to href="javascript:void(0);" to avoid the need to stop the event.

Dude, your selectors are all messed up.
You can't just use $('div1'), because that won't return anything. If it's a class use $('.div1') and if it's an id use use $('#div1').
Also maybe avoid writing your handlers inline, it's much harder to read and notice possible errors. Just put all of that in a seperate javascript file.

Weird margin when using .prependTo()

I've got some trouble in understanding the following behavior. I'm having a container <div> which contains a few inline-block <div> nodes. Example view:
Now my requirement is, to prepend new foobar inline-block <div> elements. No Problem, using jQuery -> .prependTo() to the rescue(applied on the parent container). Now comes the issue, the first time using .prependTo() "something, somewhere" creates an untrackable margin on the right side from the newly inserted element (it lookes like this to me). Example:
As you can see, only the very first element has this margin (again, I cannot track the space using Firebug/DevTools, it seems like its not there). All further insertions are just fine. Using .insertBefore() on the very first element also works fine and looks great. Unfortunatly I cannot use .insertBefore() in my particular usecase, that is why I'm asking for some heads-up here.
What do I miss ? Where comes this strange margin/spacing from ?
How to avoid it ?
Here is the jsfiddle playground where the above images come from:
http://jsfiddle.net/r7d6s/
I only tested on Firefox 4/5/6 so far.

It's the whitespace inside your parent div (i.e. line break). It gets sanitized to an ordinary space by HTML renderer. Remove it:
<div id="area"></div>