We Keep Coding

Hide particular div if all elements have the same class

I have a bunch of same elements on the page. All those elements have this particular structure:
<div id="9p" class="col s12 m6 l2 cardmaion globalcardclass">
<div class="card 9p">
<div class="card-content ">
<div class="row card-row">
<!-- a bunch of divs -->
<!-- a line of a card -->
<a data-category="here" class="hidden">
<div style="border-top:2px dotted gray;font-size:18px;background:ivory;margin-top:1px;"
id="belanimation" class="card-line waves-effect waves-green">
Some random text goes here <span class="card-line-q"> x 1</span><span
class="modspan "></span></div>
</a>
<!-- a line of a card -->
<a data-category="here" class="hidden">
<div style="border-top:2px dotted gray;font-size:18px;background:ivory;margin-top:1px;"
id="belanimation" class="card-line waves-effect waves-green">
Some random text goes here <span class="card-line-q"> x 2</span><span
class="modspan "></span></div>
</a>
<!-- a line of a card -->
<a data-category="here" class="hidden">
<div style="border-top:2px dotted gray;font-size:18px;background:ivory;margin-top:1px;"
id="belanimation" class="card-line waves-effect waves-green">
Some random text goes here <span class="card-line-q"> x 2</span><span
class="modspan "></span></div>
</a>
</div>
</div>
</div>
</div>
All the cards (example above) have common class = globalcardclass (it's only way to track that 'card elements')
All lines in a card could be (or not!) contains class = hidden
So I want a script to hide the whole card if all <a> elements (lines) have the class = hidden
If one or two elements (lines) do not have class hidden -- the card is shown.
I need to add another hide class to a particular card if all its children elements have class hidden.
Here I try something but It doesn't work at all. The hard part is... when the card element gets elements (lines) with class hidden that card must show up again...
Please, help.
<script>
$(document).ready(function () {
function FilterHere() {
var emptyCounter = 0
jQuery(".globalcardclass a").each(function () {
if ($(this).is('.hidden')) {
emptyCounter++
}
emptyCounter--
});
if (emptyCounter === 0) {
$(".globalcardclass").hide();
}
}
setTimeout(FilterHere, 2000);
});
</script>
UPD!
Here is new way to solve my problem:
jsfiddle.net/q6cekb18
But it also doesn't work...
UPD 2 (!)
Finally! I've got some progress!
$(".globalcardclass").filter(function(){
return $(this).find(".smoothmaion:visible").length == 0;
}).hide();
That code is working... All the card are hiding... But...
A card (.globalcardclass) is not showing up if 'line' element (.smoothmaion) becomes visible again... How to make it some sort of a... toggle?
Yeah... I can:
<script>
function Filtering()
{
$(".globalcardclass").filter(function(){
return $(this).find(".smoothmaion:visible").length == 0;
}).toggleClass( "hide_hide" )
};
</script>
But... When I use another button to filter different type of elements... That 'toggle' thing brings back that hidden element 'cause it has not change so ... toggle..
What can I do?

Append element from another page?

Given this HTML:
index.html:
<div class="tile" data-tilename="test">
<div class="tileHeader">Tile Name</div>
</div>
tile-content.html:
<div id="test-tile" class="tileContent">
<!-- lots of stuff here. -->
</div>
How can I arrive at the following?
<div class="tile">
<div class="tileHeader">Tile Name</div>
<div class="tileContent">
//lots of stuff here.
</div>
</div>
Currently all these are created dynamically, so here is my current code:
let $elTile = $('<div/>', {
class: 'tile'
}).appendTo($elContainer);
let $elTileHeader = $('<div/>', {
class: 'tileHeader',
html: tile.header
}).appendTo($elTile);
let $elTileContent = $('<div>').load('tile-content.html #' + tile.name + '-tile');
$elTile.append($elTileContent);
The last two lines above were inspired by this solution. Unfortunately it adds an extra <div> which I would like to avoid:
<div class="tile">
<div class="tileHeader">Tile Name</div>
<div> <!-- I don't want this -->
<div class="tileContent">
<!-- lots of stuff here. -->
</div>
<div>
</div>
How can I arrive at the desired solution?
There are a couple similar questions, but none that I found have solutions and my situation is slightly different (dynamically created elements).

It's because you are creating that extra div by yourself here:
let $elTileContent = $('<div>').load(...)
You should load the content, then prepend the header:
//create the tile and add it to the container
let $elTile = $('<div/>', {
class: 'tile'
}).appendTo($elContainer);
//create the header but do not add it yet
let $elTileHeader = $('<div/>', {
class: 'tileHeader',
html: tile.header
})
//load the content into the tile
$elTile.load('tile-content.html #' + tile.name + '-tile', function(){
//on the "complete" callback, prepend the header
$elTile.prepend($elTileHeader);
});
Happy Coding :)

You are telling it to give that extra div on this line:
let $elTileContent = $('<div>).load('tile-content.html #' + tile.name + '-tile')
You would need to do the load on the element with the tile class first and then duse the .prepend instead of append for the header div element so it stacks above the loaded content div.

How to place div items into jQuery Slider showing a minimum of 5 elements with Left-Right slider to view more elements?

I have div elements on a page with col-sm-3 classes. So far, I have 6 of these elements and so, 4 elements are on 1 row and 2 are on the next row which fill half this row. I am using Bootstrap.
I want to make all these elements be contained on 1 row in a slider using JQuery with a minimum of 5 elements showing and be able to click on left-right arrow buttons to view all elements.
I found this example JQuery called lightSlider: http://sachinchoolur.github.io/lightslider/ There are 2 examples on this website and I would like to make mine similar to the second red example.
I have tried to use the lightSlider class on my elements, but no change is seen.
Here is my HTML:
<div class="row whiteBG" id="lightSlider">
#foreach (var item in Model)
{
<div class="col-sm-3 align-centre">
<img src="#item.OutputImage" alt="#item.Image" />
<a href="#Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<div class="blend-box-top category-head" style="background: #0197BA url(#item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</div>
}
</div>
I have a row which added multiple amounts of col-sm-3 div elements.
I also placed this below my HTML before the ending body tag:
<script type="text/javascript">
$(document).ready(function() {
$("#lightSlider").lightSlider();
});
</script>
I am using Visual Studio and JQuery is loaded in by default at the bottom of the _Layout.cshtml file:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>

<div class="col-sm-2 align-centre">
Change your class from 3 > 2 so that 5 will fit.

It was the first time using JQuery for me and the problem was that I was including all the classes in my HTML that I saw in the Chrome Developer Tool HTML for the second example slider here: http://sachinchoolur.github.io/lightslider/index.html This was not necessary and caused errors since I was only meant to use 1 class which then automatically added new classes to my HTML.
Firstly, I used the lightslider.js, lightslider.css and controls.png files into my project available here: https://github.com/sachinchoolur/lightslider/tree/master/src
I then placed the folling script into my HTML page before the ending body tag:
$(document).ready(function () {
window.prettyPrint && prettyPrint()
$('#content-slider').lightSlider({
keyPress: false,
item: 5,
loop: true,
onSliderLoad: function () {
$('#content-slider').removeClass('cS-hidden');
}
});
});
</script>
This is available on the GitHub repository link above - I changed it a bit to make the item attribute display 5 elements initally.
It is crucial that you place this script after the script that calls the JQuery. It took me a day to find out this was the problem.
In lightslider.css you need to change the filePath to include the image used for the left-right arrows correctly. the class is .lSAction > a. I just placed mine in the Images folder and this is the attribute that I changed: background-image: url('Images/controls.png');
This is my HTML:
What you need to know is that I only include 1 class in my HTML list: ul<id="content-slider"> which will add the other necessary lightSlider to create the second example slider displayed here: http://sachinchoolur.github.io/lightslider/index.html
<div class="row whiteBG">
<ul id="content-slider" >
#foreach (var item in Model)
{
<li class="col-sm-4 align-centre">
<a href="#Url.Action("Products", "Home", new { id = item.Id, categoryName = item.Name })">
<img src="#item.OutputImage" alt="#item.Image" />
<div class="blend-box-top category-head" style="background: #0197BA url(#item.OutputImage) no-repeat 50% 0%;">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</a>
</li>
}
</ul>
</div>
I hope this can help someone else going through a similar problem. :)

Hide and Show WinJS.UI.PivotItem

I need to hide a WinJS.UI.PivotItem for a Windows Phone 8.1 app and then show it again once certain criteria have been met.
I thought it would be as simple as using CSS to show and hide the WinJS.UI.PivotItem, but it hides the .win-pivot-item element but not the .win-pivot-header?
How can I programmatically show and hide a WinJS.UI.PivotItem in a WinJS.UI.Pivot control?
<div id="divContent" data-win-control="WinJS.UI.Pivot" data-win-options="{title: 'Details', selectedIndex: 0}">
<div id="divSelected" style="display: none;" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Currently Selected'}">
<!-- Content - Hide this until we need it -->
</div>
<div id="divSelections" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Selections'}">
<!-- Content -->
</div>
<div id="divInformation" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Other Information'}">
<!-- Content -->
</div>
<div id="divHistory" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'History'}">
<!-- Content -->
</div>
<div id="divDetails" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Details'}">
<!-- Content -->
</div>
</div>

There currently isn't a direct API to show/hide WinJS.UI.PivotItems on the WinJS.UI.Pivot control.
Depending on your desired UX and criteria for show/hiding, you can programmatically add/remove a PivotItem from the list of PivotItems returned by the Pivot.items property on the WinJS.UI.Pivotcontrol.
For example:
function createPivotElement() {
// Use document.createElement("div") to build up the DOM for the Pivot Item
// Or you could render a page using the WinJS.UI.Pages API
// Return a DOM element
return document.createElement('div');
}
// When criteria is met...
// Find the pivot in the DOM
var p = document.querySelector(".myPivot");
var pivot = p.winControl;
var element = createPivotElement();
var pivotItem = new WinJS.UI.PivotItem(element, { header: 'New PivotItem' });
// Add new PivotItem
// You could use other things like splice to add it to a specific index etc.
pivot.items.push(pivotItem);
You can also look at the Pivot Sample or on http://try.buildwinjs.com/#pivot for more usage examples

Pulling Instagram feed into a nested Div using ID

I have a div that's nested in two other divs but isn't pulling in the Instagram feed via the ID, although when I take the div out and have it on it's own it displays.
How can I change the code either in the js file or the HTML for get it to display when its nested
Here's the related part of the JS file...
$(function() {
var cmdURL, embedImage, onPhotoLoaded, param, tag_name, userid,
param = {
access_token: '******************', // feel free to change it with your own access token
count: 10 // the total number of images
},
tag = 'Gezza', // your user id. you can find this one out by looking into one of your pictures uri
tag_name = '#photowall',
cmdURL = 'https://api.instagram.com/v1/tags/' + tag + '/media/recent?callback=?';
And here's the HTML
<div class="col-md-4 col-sm-4 home3block">
<div class="block">
<img src="assets/images/instagram-logo.gif">
<!-- START PHOTOWALL -->
<div id="photowall">
</div>
<!-- CLOSE PHOTOWALL -->
</div>
</div>
I need the #photowall to be inside both col-md-6 and block divs