We Keep Coding

adding elements to the button when the div.el-pagination

I am using the code the JavaScript code which is what i am trying to add the aria-label but somewhat it is missing somewhere
document.querySelectorAll('.el-pagination').forEach(button => button.setAttribute('aria-label',(button.getElementsByClassName('el-icon-arrow-left').length == 1) ? 'Previous' : 'Next'));
This is my code for the html
<div class="el-pagination" aria-label="Previous">
<span class="el-pagination__sizes">
<div class="el-select el-select--mini">
<!---->
<div class="el-input el-input--mini el-input--suffix">
<!---->
<input type="text" readonly="readonly" autocomplete="off" placeholder="Select" class="el-input__inner">
<!---->
<span class="el-input__suffix">
<span class="el-input__suffix-inner">
<i class="el-select__caret el-input__icon el-icon-arrow-up"></i>
<!---->
<!---->
<!---->
<!---->
<!---->
</span>
<!---->
</span>
<!---->
<!---->
</div>
<div class="el-select-dropdown el-popper pagination-popper" style="display: none; min-width: 175px;">
<div class="el-scrollbar" style="">
<div class="el-select-dropdown__wrap el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
<ul class="el-scrollbar__view el-select-dropdown__list">
<!---->
<li class="el-select-dropdown__item selected">
<span>50 items per page</span>
</li>
<li class="el-select-dropdown__item">
<span>100 items per page</span>
</li>
<li class="el-select-dropdown__item">
<span>150 items per page</span>
</li>
<li class="el-select-dropdown__item">
<span>300 items per page</span>
</li>
</ul>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
</div>
</div>
<!---->
</div>
</div>
</span>
<button type="button" disabled="disabled" class="btn-prev">
<i class="el-icon el-icon-arrow-left"></i>
</button>
<ul class="el-pager">
<li class="number active">1</li>
<!---->
<li class="number">2</li>
<li class="number">3</li>
<li class="number">4</li>
<!---->
<li class="number">5</li>
</ul>
<button type="button" class="btn-next">
<i class="el-icon el-icon-arrow-right"></i>
</button>
</div>
so something in my JavaScript is going wrong which i can't figure what is

You can add aria-label to the elements in html without using any js here
But if you want you can also do it using js like this:
document.querySelectorAll('.btn-prev').forEach(button => button.setAttribute('aria-label', 'Previous'))
document.querySelectorAll('.btn-next').forEach(button => button.setAttribute('aria-label', 'Next'))

MyBB Logo position does not change

So It's a theme without a responsive logo and
I've been messing around trying to fix it but with any position it doesn't change /:
I wasted days trying to fix this but still it would not work
Does anyone have any suggestions or solutions how to fix this?
Html Code :
<a name="top" id="top"></a> <br /> <br />
<div id="mainwidth">
<div id="container">
<div id="content">
<div class="menu">
<ul>
<li id="nav-portal"><i style="font-size: 12px;" class="fa fa-home fa-fw"></i> Home</li>
<li id="nav-forums"> <i style="font-size: 12px;" class="fa fa-comments fa-fw"></i> Forums</li>
<li id="nav-search"> <i style="font-size: 12px;" class="fa fa-search fa-fw"></i> {$lang->toplinks_search}</li>
<li id="nav-member"> <i style="font-size: 12px;" class="fa fa-users fa-fw"></i> Members</li>
<li id="nav-instructions"><img src="img/new-icon.jpg" style="width: 20px;position:center;cursor:pointer;"> <i style="font-size: 12px;" class="fa fa-question-circle fa-fw"></i> Forum Instructions</li>
<li id="nav-calendar"> <i style="font-size: 12px;" class="fa fa-calendar fa-fw"></i> {$lang->toplinks_calendar}</li>
<li id="nav-help"> <i style="font-size: 12px;" class="fa fa-info fa-fw"></i> {$lang->toplinks_help}</li>
<li><i style="font-size: 14px;" class="fa fa-angle-down fa-fw"></i>More</li>
<ul>
</div>
<div id="extraslink_popup" class="popup_menu" style="display: none;">
<div class="popup_item_container">
Logout
</div>
<div class="popup_item_container">
Show team
</div>
<div class="popup_item_container">
{$lang->welcome_newposts}
</div>
<div class="popup_item_container">
{$lang->welcome_todaysposts}
</div>
<div class="popup_item_container">
Link five here
</div>
</div>
<div class="topbar">
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
<tr>
<td valign="top">
<!--- LOGOO CODE STARTS HERE -->
<div class="logo-b">
<img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" />
</div>
<!--- LOGOO CODE ENDS HERE -->
</td>
<td> </td>
<td valign="bottom">
<div style="margin-top: 120px;"><div class="userbg">{$welcomeblock}</div></div>
</td>
</tr>
</table>
</div>
<br />
<div class="wrapper">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
{$awaitingusers}
<navigation>
<br />
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
$("#extraslink").popupMenu();
}
// -->
</script>
And the CSS code :
#logo {
padding: 10px 0;
margin-top: 40px;
text-align: center;
max-width: 150px;
}
I've messed around alot with the CSS code but heres the original one

First of all, you didn't add an element with logo id, add it in html and change it in css. If the problem is still not resolved, check if you have added your css file to html. If the problem still persists, add display: block property to your logo in css and give margin

Expanding and collapsing in UL tag

I have the follwing HTML, where there is a collapse (collapsebutton1) and expand button (expandbutton1) which will collapse and expand the div networkDevicesCollapsePanel, this is working as expected.
Now i need to bring the collapse and expand in each < UL >. There are three UL here, but there may be more later. How to achieve this?
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;">
<div ng-show="ciAttributesCount>0" id="collapsebutton1" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount>0" id="expandbutton1" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="panel-collapse collapse in" id="networkDevicesCollapsePanel">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />
</li>
</ul>
</div>
</div>
</div>
Button Click code below
$("#expandbutton1").hide();
$("#expandbutton1").click(function () {
$('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
$("#expandbutton1").hide();
$("#collapsebutton1").show();
$('a[data-toggle="collapse"]').each(function (index) {
$(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
});
});
$("#collapsebutton1").click(function () {
$('#networkDevicesLinks div.panel-collapse').removeClass('in');
$("#expandbutton1").show();
$("#collapsebutton1").hide();
$('a[data-toggle="collapse"]').each(function (index) {
$(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
});
});
});

It may provide an idea,Try to use angular $index to toggle arrow and toggle client div.
And in angular we can assign each UL with dynamic classes which is hosted from expand and collapse button
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
<div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount" id="expandbutton1_{{$index}}" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="" >
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />
</li>
</ul>
</div>
</div>
</div>
Revised Code below:
I am able to put collapse button in each repeat, but when i click, it opening a popup , instead of collapsing and expanding. Please see where it is wrong
<div class="">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">
<li>
<div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a>
<span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
<br />
<span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
<br />
<span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
<br />
</li>
</ul>
</div>

Toggle addclass with jquery parent selector

I have some items products in a grid.
I want that when i click on each icon from item, it will toggle a class '.active' and also remove class if others from others items are visible.
This is my script so far, can add the class remove from others items but when i click on the same icon it doesn't toggle it (remove the class).
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$('.items').find('.actions').not($this).removeClass('active');
$that.find('.actions').toggleClass('active');
});
<ul class="products-grid row">
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

You need to remove this row:
$('.items').find('.actions').not($this).removeClass('active');
Because in your function you first remove the class, and then toggle it. In this case, if the element already has active class, it will be removed first, and then toggle will add it again (it looks like the element still has an active class, because operations are very fast). I have removed the row as described above and added some styles to see the difference, so here is the working snippet (click on "Show Actions" to see the difference):
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$that.find('.actions').toggleClass('active');
});
.items #show-actions {
width: 100vw;
background-color: royalblue;
color: white;
}
.active {
background-color: red;
}
img {
width: 50px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

First, you can't have duplicate ID's on any HTML page. I suggest you change #show-actions to a class for the rather than an ID.
Second, you also have some extra quote marks in your img element.
Once you do that it's pretty simple.
$('.show-actions').on('click', function() {
var items = $('.items');
items.removeClass('active');
$(this).parent().parent('.items').addClass('active');
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

How to apply CSS on alternate elements with certain data-value?

I am typing to apply css on alternate elements which have [data-row="row"]
Something like:
[data-row="row"]:nth-of-type(odd) {
background-color: #B7CEEC;
}
<div class="pricingdiv" style="width:100%;min-height: 100px;background-color:white;">
<ol class="pricingList">
<li class="LotLi">
<div class="addedlot" data-row="row" title="Left Click to see Details. Right Click to Add Lineitem." data-lot="txtlottitle~Lot Title^lotstextarea~"asdad"^file_uploadlot~LotFile472cb2d^lottype~value^txtbiddecrement~123^txtfrontbuffer~^txtbackbuffer~">Lot Title-"asdad" <span><input class="chkdeletelot" style="float:left;" value="delete" type="checkbox"> </span> <span class="deletelotli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
</div>
<ol class="lotchildlist">
<li class="LineitemLi" title="Left Click to see more.">
<div class="addedlineitem" data-row="row" data-ceilingprice="123" data-historicprice="123" data-reserveprice="3" data-quantity="2332" data-extendedprice="2" data-saving="23">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">123</span> <span clas="quantity" style="padding-left:130px">2332</span>
<span
class="extendedprice" style="padding-left:130px">'2'</span> <span class="saving" style="padding-left:130px">'23'</span> <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
<div class="lineitemdescription" data-row="row">'ads'</div>
</div>
</li>
<li class="LineitemLi" title="Left Click to see more.">
<div class="addedlineitem" data-row="row" data-ceilingprice="342" data-historicprice="2323" data-reserveprice="432" data-quantity="33" data-extendedprice="434" data-saving="">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">342</span> <span class="quantity" style="padding-left:130px">33</span>
<span
class="extendedprice" style="padding-left:130px">'434'</span> <span class="saving" style="padding-left:130px">''</span> <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
<div class="lineitemdescription" data-row="row">'asdad'</div>
</div>
</li>
</ol>
</li>
<li class="LotLi">
<div class="addedlot" data-row="row" title="Left Click to see Details. Right Click to Add Lineitem." data-lot="txtlottitle~Lot Title2^lotstextarea~"asdad"^file_uploadlot~LotFile6b238d6^lottype~value^txtbiddecrement~23^txtfrontbuffer~^txtbackbuffer~">Lot Title2-"asdad" <span><input class="chkdeletelot" style="float:left;" value="delete" type="checkbox"> </span> <span class="deletelotli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
</div>
<ol class="lotchildlist">
<li class="LineitemLi" title="Left Click to see more.">
<div class="addedlineitem" data-row="row" data-ceilingprice="123" data-historicprice="123" data-reserveprice="23" data-quantity="232" data-extendedprice="23" data-saving="23">LineItem Title <span> <input class="chkdeletelineitem" style="float:left;" value="delete" type="checkbox"> </span><span class="ceilingprice" style="padding-left:130px">123</span> <span class="quantity" style="padding-left:130px">232</span>
<span
class="extendedprice" style="padding-left:130px">'23'</span> <span class="saving" style="padding-left:130px">'23'</span> <span class="deletelineitemli" style="float:right;cursor: pointer;cursor: hand;color:red; ">delete</span>
<div class="lineitemdescription" data-row="row">'asd'</div>
</div>
</li>
</ol>
</li>
</ol>
</div>
I would prefer pure CSS solution to this. Thanks.

DEMO IS HERE
.pricingList > li:nth-of-type(odd)>div[data-row="row"] {
background-color: red;
}
.pricingList > li:nth-of-type(even)>div[data-row="row"]{
background-color: blue;
}
.pricingList > li:nth-of-type(odd) ol li:nth-of-type(odd) [data-row="row"]{
background-color: blue;
}
.pricingList > li:nth-of-type(odd) ol li:nth-of-type(even) [data-row="row"]{
background-color: red;
}
.pricingList > li:nth-of-type(even) ol li:nth-of-type(odd) [data-row="row"]{
background-color: red;
}
.pricingList > li:nth-of-type(even) ol li:nth-of-type(even) [data-row="row"]{
background-color: blue;
}

The alternating rows are the li, in which you have the data-row attribute. So:
li:nth-of-type(odd) [data-row="row"] {
background-color: #B7CEEC;
}