We Keep Coding

JS closest/parent not working on loaded page

I'm working with a third-party code and I'm quite limited in terms of filtering a list of elements.
Each of these elements has this structure:
<div class="item-preview">
<div class="item-info">
<div class="tag">
<svg class="tag-public"></svg>
</div>
</div>
</div>
The only thing that changes is the svg class, so it's whether tag-public or tag-private. Depending on the user type that's checking the content, I'd like to hide it when it's tag-private. I've tried this:
$('.tag-private').closest('.item-preview').hide();
And this:
$('.tag-private').parents('.item-preview').hide();
But any of them works. The code uses React and the items are brought by JSON/AJAX, so I guess the problem is related to trying to modify the page once is loaded...
Any thoughts on how to make my JS "override" the original code? Thanks a ton.

Angular does not work with custom html attributes

I have an imported css template written on bootstrap, and want to use it inside Angular app.
Seems like exactly custom html attributes don't react a loading from router.
Application characteristics. This is a SPA, and all of pages are loaded inside Navbar Component, with corresponding router-outlet wrapping.
Problem. Any plugin will render included data only after "mechanical" refreshing page with browser "Reload this page" button. But if I change a src for image, from plugin custom attribute, for example
data-background="assets/images/slider_1.jpg"
to
img src="assets/images/slider_1.jpg"
, it will be loaded and shown from the first time.
Example of map plugin. Doesnt show nothing.
<div class="maps-container map-widget m-b-25">
<div class="map" data-addresses="[4.4, -4.4]"
data-icon="assets/images/map-marker.png"
data-zoom="16" data-street-view="1">
</div>
</div>
Example of slider plugin. No background image.
<section class="module-cover parallax text-center"
data-background="assets/images/slider_1.jpg"
data-overlay="0.5">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>This is title</h1>
</div>
</div>
</section>
Example of grid item for blog. Here, it should follow masonry style, but renders like strict grid.
<section class="module-cover parallax text-center"
data-background="assets/images/slider_1.jpg"
data-overlay="0.5">

You better use [attr.data]="name-of-custom-attr"
This way angular manages the use of custom html attributes correctly.

Issue in carousel implementation

I want to implement carousel on my web page.I have created a plunker page for the same.
In that link, i have used CSS3 transformations to create circle effects.
In the above link i have removed the code which i had for carousel implementation because it was not working.Actually what happens is that most of the jquery caosuel available like(elastslide,liquidcarosel,flexslider) etc work only if the img(which needs to be slided) is directly under "li" tag.But in my case, i can't keep img directly under "li" because of the css3 transformations i need.(See index.html page)
http://plnkr.co/edit/PxTtJ2expidIamWUqXLj?p=preview&s=carousel
for eg
<li>
<div class="ch-item">
<div class="ch-info ch-info1" >
</div>
<div class="ch-thumb ch-img-1">
<p class="text"> Java7</p>
</div>
</div>
</li>
Could anyone please suggest how can i implement it.

Implementing tabs - will my approach have problems?

The layout of my page:
<div id="header">This is where you select tabs</div>
<div id="main">
<div id="left">Main Content</div>
<div id="right">Sidebar</div>
</div>
<div id="bottom">
<form>
<input id="msgForm" type="text" name="chat" size="100"/>
<input id="enterB" type="submit" value="enter"/>
</form>
</div>
The left and right needs to change content when you select another tab on the header. I am thinking of putting the innerHTML of each tab into an array, and when I want to switch tabs I just arrayOfContent[currentTabId] = getElementById("left").innerHTML; getElementById("left").innerHTML = arrayOfContent[switchTabId]
And the same for right. This page will use ajax requests to add divs and remove old divs (which for the current tab I can just remove divs with javascript by id, but for tabs not currently active I'll have to split strings as I'll mark a <!-- SPLIT ME --> at the end of every js-created div.)
Will this work? Are there better approaches to this?

according to me,
better approach is to use jquery library and Ui library
http://jqueryui.com/demos/tabs/
see the example of ajax page.

How a Javascript Accordion Works?

I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I'm assuming I would begin by creating div's for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion's section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.
Thanks

I would highly recommend picking up a book such as John Resig's Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.
Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).
I'll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.

The best way to order it would be like this
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
You would want to avoid z-order entirely because it is a compatibility mess. Instead you would have the accordion titles be what you would click to open the accordion. You would want to set all of the accordion section <div>'s to visibility:hidden; by default, and then, when one of them is clicked, change it's visibility, and hide all the others. If you want it to work with any amount of accordion sections, you would have it count each <h3 class="accordion title"> and each <div class="accordion section">, and pair those up into an array. When a title is clicked, show it's corresponding div. Alternatively you could give each one a separate ID, but the first way would be much more useful.
Actually, it might be display:none; instead of visibility:hidden;, I would try both.
In addition it's worth mentioning that the animation is usually handled by changing things like the size of the div, so if you were hiding a section, you would make the height smaller and smaller until it reaches 0 and is hidden.

See this question, you will notice my answer contains a demo with the basic workings that should get you started. It was only asked a few minutes ago!
It uses jQuery.