We Keep Coding

hide div blocks and show expansion button on menu using cookie

I need some help implementing jQuery cookies.
I made a masonry grid in codepen where you can minimize and maximize the div blocks.
<div class="container">
<br>
<div class="row">
<div id="panel1" class="col-xs-6 col-lg-4">
<div id="title"><b>Block 1</b>
<div class="button" onclick="Close1()">-</div>
</div>
1</div>
<div id="panel2" class="col-xs-6 col-lg-4 tall">
<div id="title"><b>Block 2</b>
<div class="button" onclick="Close2()">-</div>
</div>
2</div>
<div class="col-xs-6 col-lg-4">3</div>
<div class="col-xs-6 col-lg-4 tall">4</div>
<div class="col-xs-6 col-lg-4 taller">5</div>
<div class="col-xs-6 col-lg-4">6</div>
<div class="col-xs-6 col-lg-4 tall">7</div>
<div class="col-xs-6 col-lg-4">8</div>
<div class="col-xs-6 col-lg-4">9</div>
<div class="col-xs-6 col-lg-4 taller">10</div>
</div>
</div>
<div id="footer">
<div id="icon1" class="icon" onclick="Open1()">Open 1</div>
<div id="icon2" class="icon" onclick="Open2()">Open 2</div>
</div
$('.row').masonry({
itemSelector : '.col-xs-6'
});
"use strict";
// End of what's configurable.
var clicked = null;
var pane = document.getElementById('panel1');
function Close1() {
document.getElementById("panel1").style.opacity = "0";
document.getElementById("panel1").style.display = "none";
document.getElementById("icon1").style.display = "inline-block";
}
function Open1() {
document.getElementById("panel1").style.opacity = "1";
document.getElementById("panel1").style.display = "block";
document.getElementById("icon1").style.display = "none";
}
function Close2() {
document.getElementById("panel2").style.opacity = "0";
document.getElementById("panel2").style.display = "none";
document.getElementById("icon2").style.display = "inline-block";
}
function Open2() {
document.getElementById("panel2").style.opacity = "1";
document.getElementById("panel2").style.display = "block";
document.getElementById("icon2").style.display = "none";
}
https://codepen.io/ariellbell/pen/bQMyOX
I want to be able to store these settings using jquery cookies (and/or html web storage) and after the user clicks on the button maybe add an (ajax) refresh setting to reorganize the div blocks in the masonray.
I am new to using jquery (and also cookie settings).
So i have difficulty implementing this in the code.
Any help is appreciated!
Thanks
So i made a new pen with cleaned up jquery functions and added the cookies. However the cookies work partly. I have trouble setting it for multiple divs.
What goes wrong?
if(Cookies.get("cohide")=="Enabled"){
$(".block1").addClass('minimalize');
$(".icon").addClass('inline');
}
if(Cookies.get("coshow")=="Enabled"){
$(".block1").removeClass('minimalize');
$(".icon").removeClass('inline');
}
"use strict";
// End of what's configurable.
//var clicked = null;
$('.block1').click(function(){
// remove set darkmode cookie, add lightmode cookie
Cookies.remove('coshow');
Cookies.set('cohide', 'Enabled');
$(this).addClass('minimalize');
var id1 = $(this).data().value;
//var y = document.getElementById(id1);
document.getElementById(id1).classList.add("inline");
console.log("Setted Cookie cohide");
});
$('.icon').click(function(){
Cookies.remove('cohide');
Cookies.set('coshow', 'Enabled');
$(this).removeClass('inline');
var id2 = $(this).data().value;
document.getElementById(id2).classList.remove("minimalize");
// document.getElementById(id1).style.display = "inline";
console.log("Setted Cookie coshow");
});
https://codepen.io/ariellbell/pen/jQKYaz

angular.js , templatedata in angular

var imageData = region[0].images;
alert(imageData.length);
templeteData = '<div class="col-sm-12 bootstrap-no-padding" >\
<div class="col-xs-4 col-sm-4 col-md-4 bootstrap-no-padding" style="height:250px">\
<div class="borderAll black-carousel black-carousel-fixHW" uib-carousel no-pause="true" active="active" interval="5000" ng-if="imageData.length > 0" no-wrap="noWrapSlides">\
<div uib-slide ng-repeat="image in imageData" index="image.id" class="col-md-12">\
<div class="image-thumbnail-content GridPositionRelative cursor-pointer">\
<image style="height:100%;top: 0px; width:100%" class="image fallback-image GridPositionRelative" ng-src="{{image.imageBase64StringFormat}}"/>\
</div>\
</div>\
</div>\
</div>\
<div class="col-xs-8 col-sm-8 col-md-8 bootstrap-no-padding" >' + regionDescription + '</div>\
</div>'
in imageData is an array containing images as [0],[1].. etc
my problem is that the images are not getting displayed... I don't know if ng- does not work here.. can anyone help me

imageData must be a scope variable of angular to bind to the template.
So instead of declaring as variable using var you should declare it like
$scope.imageData = region[0].images
And make sure you have injected $scope if you are using controller

Appending ng-repeat into HTML element dynamically

I trying to append ng-repeat into my HTML div on load.
It recognizes the ng-repeat, however the index value isn't displaying as it should
HTML
<div id="myInnerCarousel"></div>
controller:
var myCarousel = document.getElementById('myInnerCarousel');
var newItem = document.createElement("div");
newItem.setAttribute("class","item");
var newData = document.createElement("div");
newData.setAttribute("class", "col-xs-6 col-sm-6 col-md-3 col-lg-3");
newData.setAttribute("ng-repeat", "mat in " + arr);
//Create individual values seperately
var newMaterialName = document.createElement("h4");
var nameNode = document.createTextNode("{{mat.Name}}");
newMaterialName.appendChild(nameNode);
//Append everything together
newData.appendChild(newMaterialName);
newItem.appendChild(newData);
myCarousel.appendChild(newItem);
However the result is this:
https://gyazo.com/00b76c6b910d4c6701059d404783f720
It got the right idea of displaying my array, however angular isn't displaying h4 right.
EDIT: imtrying to achieve this in my html:
<div ng-controller="myController">
<div class="item">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array1">
<h4>{{mat.Name}}</h4>
</div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array2">
<h4>{{mat.Name}}</h4>
</div>
</div>

Lets simply state that this is not the way to do it.
A better and more angular way would be (assuming your apps name is app).
HTML
<div ng-controller="myController">
<div class="item">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array">
<h4>{{mat.Name}}</h4>
</div>
</div>
</div>
Angular Controller
angular.module('app').controller('myController', function($scope) {
$scope.array = [{Name: 'abc'}, {Name: 'def'}]; // or whatever your data looks like.
});

Dynamically added component should be compiled using angular. you can use $compile function of angular. Below is working code.
Jsfiddle
function TodoCtrl($scope, $compile) {
$scope.arr = [{Name: "Dynamically Added cowermponent"}];
var myCarousel = document.getElementById('myInnerCarousel');
var newItem = document.createElement("div");
newItem.setAttribute("class","item");
var newData = document.createElement("div");
newData.setAttribute("class", "col-xs-6 col-sm-6 col-md-3 col-lg-3");
newData.setAttribute("ng-repeat", "mat in arr");
//Create individual values seperately
var newMaterialName = document.createElement("h4");
var nameNode = document.createTextNode("{{mat.Name}}");
newMaterialName.appendChild(nameNode);
//Append everything together
newData.appendChild(newMaterialName);
newItem.appendChild(newData);
myCarousel.appendChild(newItem);
$compile(newItem)($scope);
}

angularJS can't add html dynamically

i got an issue that I'm trying to solve but it seems I can't find a proper solution to achieve what I'm trying to do.
I'l try to explain my problem as best as I can: I need to create some tabs heading dynamically depending on the result of an AJAX call, so I don't know in advance how many tabs there will be, I'll post my HTML markup, my controller and what is the result I have in the DOM. I hope I'll be able to explain myself clear enough.
PART OF THE HTML MARKUP
<div id="tabPlacer">
</div>
PART OF ANGULARJS CONTROLLER
$http({method: 'GET', url: 'getNews.json'}).
success(function(data, status, headers, config) {
$scope.news = data;
createBase();
var contFirst=0;
var contSecond=0;
for (i=0; i< $scope.news.news[0].allNews.length; i++){
$scope.bodynews[i] = $scope.news.news[0].allNews[i].bodyNews;
if(i%2==0)
{
$scope.bodynewsR[contFirst] = $scope.news.news[0].allNews[i].bodyNews;
contFirst++;
}
else{
$scope.bodynewsL[contSecond] = $scope.news.news[0].allNews[i].bodyNews;
contSecond++;
}
}
$scope.noOfPages =Math.floor($scope.news.news[0].allNews.length / ($scope.itemsPerCol*2));
$scope.$watch('currentPage', function() {
begin = (($scope.currentPage - 1) * $scope.itemsPerCol);
end = begin + $scope.itemsPerCol;
$scope.pagedL = {
bodynewsL: $scope.bodynewsL.slice(begin, end)
}
$scope.pagedR = {
bodynewsR: $scope.bodynewsR.slice(begin, end)
}
});
}).
error(function(data, status, headers, config) {
});
function createBase() {
for (var i = 0; i < $scope.news.news[0].posizioni.length; i++) {
// $scope.tabsName[i] = $scope.news.news[0].posizioni[i][i];
$scope.baseString += "<tab heading='" + $scope.news.news[0].posizioni[i][i] + "' ng-controller='MainController'><div class='col-xs-12 col-sm-6 col-md-6' id='colonaDx"+ $scope.news.news[0].posizioni[i][i] +"'></div><div class='col-xs-12 col-sm-6 col-md-6' id='colonaDx"+ $scope.news.news[0].posizioni[i][i] +"'></div><div id='paginaz"+ $scope.news.news[0].posizioni[i][i] +"'></div></tab>";
}
$scope.baseString += "</tabset>";
$("#tabPlacer").html($scope.baseString);
}
});
HTML CREATED IN DOM
<div id="tabPlacer">
<tabset panel-tabs="true" panel-class="panel-grape" data-heading="OTHER NEWS">
<tab heading="allNews" ng-controller="MainController">
<div class="col-xs-12 col-sm-6 col-md-6" id="colonaDxallNews">
</div>
<div class="col-xs-12 col-sm-6 col-md-6" id="colonaDxallNews">
</div>
<div id="paginazallNews">
</div>
</tab>
<tab heading="SecondTab" ng-controller="MainController">
<div class="col-xs-12 col-sm-6 col-md-6" id="colonaDxSecondTab">
</div><div class="col-xs-12 col-sm-6 col-md-6" id="colonaDxSecondTab">
</div>
<div id="paginazSecondTab">
</div>
</tab>
</tabset>
</div>
So far the problem is that nothing is visualized on the page but if I manually define in the html markup the tabset structure I can see them..any ideas? Thanks very very much in advance.

As Cetia said, you don't want to "insert" html into your template in angular. Instead, your situation probably needs ng-repeat, which is one of the very basic angular directives you should learn to use.
Basically, you'll want to store the fetched data in a $scope variable, and then use that variable with ng-repeat to display things based on your data. A basic example here:
Controller:
$scope.things = [
{
name: "Thing1",
description: "I'm the first thing!"
},
{
name: "Thing2",
description: "I'm the second thing!"
}
]
HTML:
<div ng-repeat="thing in things">
<tr>
<td>{{thing.name}}:</td>
<td>{{thing.description}}</td>
</tr>
</div>
See fiddle here: http://jsfiddle.net/m8qLdhth/1/

Wrap divs according to the bootstrap row conditions

I have following condition in which what i want is when my child div's first class col-md-4 and beneath div class's numeric digits 4+4+4 >= 12 then wrap those in div having class row.Fidle of my problem Fiddle
<div class="row questionsRows">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
now i want to wrap divs in a row when my count of inner div's class is 12.
like this
<div class="row questionsRows">
<div class="row">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
<div class="row">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
</div>
Code i have tried :
function WrapRows() {
var RowComplete = 0;
var divs;
$('.questionsRows').children('.coulmnQuestions').each(function () {
debugger;
var classes = $(this).attr("class").split(" ");
var getFirstClass = classes[0];
var value = getFirstClass.slice(7);
RowComplete = RowComplete + value;
divs = $(this).add($(this).next());
if (RowComplete >= 12)
{
divs.wrapAll('<div class="row"></div>');
RowComplete = 0;
}
});
and its not giving desired result , its not adding first row .
<div class="row questionsRows">
<div class="col-md-4 coulmnQuestions"></div>
<div class="row">
<div class="col-md-4 coulmnQuestions"></div>
<div class="col-md-4 coulmnQuestions"></div>
</div>
</div>

I got it:
var RowComplete = 0;
var divs;
$('.questionsRows').children('.coulmnQuestions').each(function () {
var classes = $(this).attr("class").split(" ");
var getFirstClass = classes[0];
var value = parseInt(getFirstClass.slice(7));
if(RowComplete==0) {
divs = $(this);
} else {
divs = divs.add($(this))
}
RowComplete = RowComplete + value;
console.log(RowComplete)
if (RowComplete >= 12)
{
console.log(divs)
divs.wrapAll('<div class="wrapper"></div>');
RowComplete = 0;
}
});

My guess is that in this line:
divs = $(this).add($(this).next());
you are catching the next tag of <div class="col-md-4 coulmnQuestions"></div>, and you should get the same tag, I mean <div class="col-md-4 coulmnQuestions"></div> tag. So I'd do:
divs = $(this).add($(this));
Anyway, if you add the code at http://jsfiddle.net it would be easier to see for us.