We Keep Coding

Applying changes in HTML for all elements at once

I have an html which contains many (80) small boxes with some info. All these boxes are displayed in grid.
All these boxes and tags are identical just Text is different inside each block. Each box has lets say 3 values: name, email and mobile number.
I want to swap the position of email and mobile number. It will take so much time to do manually. Is there any way or automatic process or tool by which I can just change one block and it will be applied to all others?
Code of boxes:
<div class="row gutters-40">
<div class="col-12 col-md-4 col-sm-4">
<div class="thumbnail">
<h4 class="service__title">Private limited Registration</h4>
<h2 style="font-weight: bold; color: purple; font-family: sans-serif;"><i class="fa fa-rupee"></i> 7500 Rs</h2>
<h5 class="doctype">Documents Required</h5>
<div class="docs">
<ul>
<li>Aadhar card & Pancard of Directors</li>
<li>Photo of Directors</li>
<li>Address Proof of Directors</li>
<li>Address Proof of Company address</li>
<li>Qualification & occupation of directors</li>
<li>Bank statement of Directors</li>
</ul>
</div><!--docs ends here-->
<div class="price_time">
<p class="service__paragraph" align="left" id="price"><i class="fa fa-info-circle"></i> Know More</p>
</div>
</div><!--Thumbnail ends here-->
</div>
<div class="col-12 col-md-4 col-sm-4">
<div class="thumbnail">
<h4 class="service__title">limited Liability partnership</h4>
<h5 class="doctype">Documents Required</h5>
<div class="docs">
<ul>
<li>Aadhar card of Directors</li>
<li>PAN Card of Directors</li>
<li>Passport size photo of Directors</li>
<li>Residential address proof of Director</li>
<li>Registered Office address proof</li>
<li>Appointment of auditor (ADT-1)</li>
</ul>
</div>
<div class="price_time">
<p class="service__paragraph" align="left" id="price"><i class="fa fa-rupee"></i> 7199</p>
<p class="service__paragraph" align="right" id="days"> <i class="fa fa-clock-o"></i> 10-15 days</p>
</div>
</div><!--Thumbnail ends -->
</div><!--box ends-->
</div> <!--row ends-->
As you can see my price is in last div inside p tag. I want it above h5 tag.
I have almost 80 such boxes. With multicursor and moving line up it will still take time.
I thought find and replace with regex can work but I can't evaluate how to do that. There is div class = docs is between these two elements which I want to swap, so I haven't figured out should such regex look like.

Well, I guess this is somewhat too custom task to find an out-of-box tool, so I'd suggest to write simple one of your own. Here's an outline:
open you page in browser
open dev tools Console, run a script to modify html
open dev tools Elements, copy the modified html bit
substitute the boxes part of html in your page with the modified one
if your html is modified also by some other JS, in step 1. use instead a dedicated html containing just the piece that's of interest.
Now, the script should do the following:
find all the boxes (document.querySelectorAll)
for each of them, do the necessary operations with elements, like
​ const elementToMove = ...
​ const destinationElement = ...
​ destinationElement.appendChild(elementToMove)
​ const elementToRemove = ...
​ elementToRemove.remove()

How to display hidden divs always 1st, above other divs when clicked to show

I am working on a bootstrap page (3.0). I have several small panels across the top of the page that are visible. Below these panels I have larger panels that contain much more detail of the small panels across the top that are hidden by default. When a user clicks on one of the small panels across the top, it hides the small panel and displays hidden larger stacked vertical panels below it with the additional info.
I need to make it so that whichever hidden panel is selected to open, that it will always show 1st (above all other visible divs). The problem I am having is they are showing in the order the divs are hard coded in the HTML, however users will not see the new div load unless they scroll down to see it visible on the page. I need all newly clicked panels to load 1st, so users will always see it load above all other now visible divs.
I am still learning jQuery/js.
So, for my top (small) panels, I have a link in the panel-footer that opens the associated larger panels when clicked. It hides the small panel when clicked, then shows the hidden panel (adds a zommIn animation as well). Then when a user closes the larger panel, it hides it again, then adds the small panel back to the top panels.
It is all working great, I just need to prepend the hidden divs to ALWAYS display as 1st (above the other visible divs).
Here is an example of the jQuery I am using to show the larger panels and hide the associated small top panels...
//Device Panel
$("#openDashDevices").click(function(){
$("#dashDevice").addClass("show zoomIn");
window.setTimeout( function(){
$("#dashDevice").removeClass("zoomIn");
}, 1000);
$("#dashDevice").removeClass("hide");
$("#topPanelDevice").addClass("hide");
$("#topPanelDevice").removeClass("show-inline zoomIn");
});
And here is the jQuery I am using that closes/hides the larger panels and re-shows the hidden small panel across the top...
//Device Panel
$("#closeDevicePanel").click(function(){
$("#dashDevice").addClass("hide");
$("#dashDevice").removeClass("show zoomIn");
$("#topPanelDevice").addClass("show-inline zoomIn");
window.setTimeout( function(){
$("#topPanelDevice").removeClass("zoomIn");
}, 1000);
$("#topPanelDevice").removeClass("hide");
});
HTML of ONE of the top panels:
<!--Dashboard Top Panels-->
<div class="dashboardPanelsGroup fivecolumns sortable">
<div id="topPanelDevice" class="dashboardDevices dashboardPanels show-inline animated">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
<div class="row">
<div class="col-xs-3 dashIcon">
<i class="icon-device"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">1344</div>
<div class="dashSubText">Computers</div>
</div>
</div>
</div>
<a id="openDashDevices" class="dashPanelFooter" href="javascript:void(0);">
<div class="panel-footer">
<span class="pull-left">View Devices</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
And here is the html of ONE of the larger panels (hidden by default)...
<!--Opened Dashboard Panels-->
<div class="openedDashboardPanelsGroup sortable">
<div id="dashDevice" class="dashboardDevices dashboardPanelsOpen col-sm-12 animated hide">
<div id="panelDevices" class="panel panel-primary">
<div class="panel-heading">
<div class="dragPanelBottom"><i class="fa fa-arrows"></i></div>
<div class="pull-right"><button id="closeDevicePanel" type="button" class="close" title="" rel="tooltip" data-original-title="Close Panel">×</button></div>
<div class="row">
<div class="openDashTitle">
<div class=""><i class="dashIcon fa fa-bar-chart"></i>Devices</div>
</div>
</div>
</div>
<div class="panelDashboardContent">
<div id="maintStatsContent" class="maintenanceStats" type="maintenanceStats">
Maint Stats goes here
</div>
</div>
</div>
</div>
</div>
Here is a screenshot showing my top panels and a couple of the larger panels opened...

Instead of hard coding the html I would create it dynamically with jquery. That way you can just prepend it to the container.
$("#closeDevicePanel").click(function() {
$('.containerclass').prepend('yourhtml');
}

I got it to work. I just needed to use prependTo. For example, to open the Alerts panel...
//Alerts Panel
$("#openDashAlerts").click(function(){
$("#dashAlerts").prependTo(".openedDashboardPanelsGroup");
$("#dashAlerts").addClass("show zoomIn");
window.setTimeout( function(){
$("#dashAlerts").removeClass("zoomIn");
}, 1000);
$("#dashAlerts").removeClass("hide");
$("#topPanelAlerts").addClass("hide");
$("#topPanelAlerts").removeClass("show-inline zoomIn");
});
This now loads with my animation just like I need, and always prepends it as the 1st child of the parent div.

Accessible popovers for additional help information

tl;dr: How would I implement an accessible popover? (I'm using bootstrap at the moment, but open to any ideas)
One of the biggest accessibility problems I face is the use of popovers when providing extra help information.
The way I understand it, popovers (and I guess more broadly, modals) are used for extra information when a tooltip cannot suffice. Popovers require the user to "open/click/activate" a help button for a new DOM element to be appended (or otherwise displayed), with the help information. While tooltips passively shows/speaks information whenever a user focuses the element. The tooltip widget itself is still being considered by WAI-ARIA
Say I have a text-input field with a label. I want to attach supplementary content to that input, in the form of a clickable/actionable button.
Initially I had the popover button in the label, before finding out the hard way that label's can't have block-level child elements.
I'm aware this probably isn't the best way of implementing an accessible popover. Here is my help button:
<div class="facs-ctl-help">
<a role="button" aria-label="Show help for Template Id 2,003" tabindex="0" data-toggle="popover" title="">
<span class="fa fa-info btn-floating waves-effect facs-help-icon"></span>
</a>
</div>
and here is my popover:
<div class="popover tooltip-help" role="tooltip">
<div class="arrow"></div>
<h3 tabindex="-1">
<i class="fa fa-info btn-floating waves-effect facs-help-icon"></i>Help
<span class="offscreen"> for Template Id 2,003</span>
<span class="offscreen"> popup</span>
</h3>
<div class="popover-body"></div>
<input type="button" class="btn pull-right tooltip-hide-btn" value="hide" aria-label="Hide help for Template Id 2,003">
<div style="width: 100%; clear:both;"></div>
</div>
What should I be using/doing? Would this be a good use case for live-regions? If so, any example code?

It doesn't necessarily have to be a live region. It feels more like a modal dialog, especially if you have interactive elements in it, such as the hide button.
There's a working example of an accessible modal dialog on https://github.com/gdkraus/accessible-modal-dialog

Change column class of div in bootstrap

I've found a number of similar questions but cannot seem to get their solutions to work for me so hopefully posting the specific code will help.
I use Caspio datapages deployed on html pages. On an html page I have a full 12 column div that I need to change to a 9 column div when a link is clicked on. This is because I have a collapsed 3 column div that is opened when the link is clicked.
So what i need:
1) upon page load 3 column div collapsed, 12 column div visible.
2)user clicks link and 3 column div is visible and 12 column div changes
to 9 column div so it is moved to the right of the 3 column div
instead of below it.
The Caspio datapages can get messed up if the css is intense (is random when it happens so I can't describe it in detail) so I need to keep it as simple as possible. If I could change div class="col-md-12" to div class="col-md-9" on the link click that would be great. I've seen other posts with changing column classes but I cannot seem to get them to work.
Here's the main code I'm working with:
<div class="col-md-3" style="overflow-x:hidden;overflow=y:hidden;">
<div id="newcomment" class="collapse">
<caspio deploy code for datapage1>
</div>
</div>
<div class="col-md-12">
<div>
<caspio deploy code for datapage2>
</div>
</div>
<a class="btn page-action" href="#newcomment" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Add Comment</a>
So if I can change div class="col-md-12" to div class="col-md-9" upon the #newcomment link click that should probably do it. Many thanks in advance-

There are several ways you can do this. Here is one...
$('#btnSwitch').click(function(){
$('.col-md-3').toggleClass('hide');
$('#right').toggleClass('col-md-12 col-md-9');
})
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
page1
</div>
<div class="col-md-9" id="right">
page2
</div>
</div>
<br>
<button class="btn btn-lg" id="btnSwitch">Switch</button>
</div>
http://www.codeply.com/go/pFNLZqoZUV

Semantic UI dropdown icon only?

Based on http://jsfiddle.net/t9vfxo5t/ I want a Semantic UI dropdown as shown but the final result I only want to be displayed as the flag, not the flag and country name text. I still want the country names to appear on the drop down when clicked though.
I tried removing the text in http://jsfiddle.net/Lhzua273/1/ but it then also removes it from the dropdown list.
<div class="ui fluid search selection dropdown">
<input type="hidden" name="language">
<div class="default text">Select language</div>
<div class="menu">
<div class="item" data-value="gb"><i class="gb flag"></i>English</div>
<div class="item" data-value="es"><i class="es flag"></i></div>
</div>
Can anyone suggest how it could be achieved?
(Ultimately it is so I can have 4 icon dropdowns side by side horizontally in a div row as shown so they fit across a mobile phone in portrait mode. It's so the user can select preferred country 1, 2, 3 and 4. I'm also hoping when each list drops down after clicking, they can still fit inside the portrait screen, so the left margin of the dropdown list would need to go negative if the list was hitting the right edge of the screen.)

You want something like this?
<div class="ui compact selection dropdown">
<i class="dropdown icon"></i>
<div class="text">FLAG</div>
<div class="menu">
<div class="item"><i class="es flag"></i></div>
<div class="item"><i class="jp flag"></i></div>
<div class="item"><i class="ru flag"></i></div>
<div class="item"><i class="cn flag"></i></div>
</div>
</div>
https://jsfiddle.net/busLpjag/
This is bad UX, better to use modal with country selection list.
5 (or more) flags in dropdown = scrollbar inside your dropdown :(

You need to add data-text in each .menu .item element.
Ie:
<div class="item" data-text="Spanish" data-value="es">
<i class="es flag"></i>
</div>
See here: http://jsfiddle.net/9t5qapog/2/
I've also included the flag icon inside the data-text of each option on the JSFiddle. This is not mandatory.