Semantic UI dropdown icon only? - javascript

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.

Related

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()

Need a JS to return to h5 value in dropdown menu

I need to return the value for the top level h5 in a large dropdown menu. If someone clicks on Power Tools, I need a function to return System. I have no idea where to start on this and could really use some help. Thanks in advance.
Here is the code of one of the dropdown menus.
<div class="col">
<div class="list-group pl-4">
<h5 class="font-weight-bold mt-4 mb-2 text-ar-form-text">System</h5>
<a class="mt-2 text-ar-form-text" href="/instruments">Instruments</a>
<a class="mt-2 text-ar-form-text" href="/radio">Radio</a>
<a class="mt-2 text-ar-form-text" href="/power-tools">Power Tools</a>
<a class="mt-2 text-ar-form-text" href="/fluid">Fluid</a>
</div>
</div>
You'll have to create an event listener for click on the a element. See: https://api.jquery.com/click/
Then inside the function, you can use this to refer to the element clicked, and use https://api.jquery.com/parent/ and https://api.jquery.com/child-selector/ to find the element you need. Then use text() to access to its text value https://api.jquery.com/text/.

Dynamically created div is draggable but not droppable

on the left sidebar, i have (hard-coded) a "Report Sections" list of dragable objects (li's - div's) and a list of "Widgets" (also li's - div's) that are dynamically generated from some database records
i dynamically create a number of rows (div's) by dragging from the reports section elements and dropping (cloning) them into the container.
the list of the widgets starts with a hard-coded element (called "Alerts") and then continues with the dynamically created ones (DISSATISFACTION DRIVERS*, etc...)
when i drag the first (hard coded) widget, "Alerts," into a Row, the dropping works fine and the result looks like this
when i try to drop any other (dynamically created) widget from the list, the dragging works but the dropping doesn't work. I am at loss! If the dragging works on the widgets, then the problem should be with the droppable container, not accepting the widgets. If it is so, then why would the droppable functionality work in the container for the hard coded "Alerts" widget (same div class, same everything) and not for the dynamically created ones? Inspecting the page elements, specifically the widget list, all the entries look the same (except for the description.)
the code for the hard coded "Alerts:"
<div class="box box-element ui-draggable">
<a class="remove label label-danger" href="#close">
<i class="glyphicon glyphicon-remove"></i> remove</a>
<span class="drag label label-default ui-draggable-handle">
<i class="glyphicon glyphicon-move"></i> drag</span>
<div class="preview">Alerts</div>
<div class="view">
<div contenteditable="true" class="alert alert-success alert-dismissable">
<h4>Alert!</h4>
</div>
</div
</div>
the code for the first dynamically created widget (the rest of the widgets are the same)
<div class="box box-element ui-draggable">
<a class="remove label label-danger" href="#close">
<i class="glyphicon glyphicon-remove"></i> remove</a>
<span class="drag label label-default ui-draggable-handle">
<i class="glyphicon glyphicon-move"></i> drag</span>
<div class="preview">DISSATISFACTION DRIVERS*</div>
<div class="view">
<div contenteditable="true" class="alert alert-success alert-dismissable">
<strong>Widget!</strong> Widget Name.
</div>
</div>
</div>
any ideas?

Semantic UI Dropdown is not showing the drop down but everything else is working

I am using Semantic UI Dropdown in my ASP.NET Web Forms application. Its working fine in this fiddle. But in my application it is not showing the drop down when clicked on the selector div. Also, I can select the elements by searching but in that case too the drop down is not showing. When I inspected using Firefox, I found that display: none property is not changing for .menu class. When I researched on SO, I found these related questions: Semantic-ui dropdown is not working and semantic UI dropdown not working. I tried the solutions but none of them seem to work. I checked other css in my project none of them shows any conflict. Then, what is wrong with it? You can find my dropdown code in the fiddle.
Sometimes you'll have to initialize the JS part of semantic.
Try calling the .dropdown() function in the .onLoad() of the window.
window.onload = function(){
$('.ui.dropdown').dropdown();
};
You cant use multiple menu classes !! .
Just read the doc :
http://semantic-ui.com/modules/dropdown.html .
I edit your fiddle, and it works now:
<div id="itdd" class="ui dropdown search button" style="background:maroon; color:white">
<span class="text">Click to select</span>
<div class="menu">
<div class="item" data-value="1"><i class="fa fa-rupee"></i> Currency</div>
<div class="item" data-value="2"><i class="fa fa-rupee"></i> Currency</div>
<div class="item" data-value="3"><i class="fa fa-rupee"></i> Currency</div>
<div class="item" data-value="1"><i class="fa fa-rupee"></i> Currency</div>
<div class="item" data-value="1"><i class="fa fa-rupee"></i> Currency</div>
<div class="item" data-value="1"><i class="fa fa-rupee"></i> Currency</div>
</div>
Here:
http://jsfiddle.net/ow2by6av/7/
In my case, I had minchars set greater than 1. Clicking on the dropdown does not render the menu in that case.

Mixing in jQuery's UI widget with my topNav kills horizontal alignment

In my web application using jQuery and jQuery UI (1.10.2 and 1.10.4 respectively), I use the CSS in jQuery CSS in /js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css of the zip file from the jQuery site. I had a topNav bar like so before I got the jQuery-based autocomplete function to work:
MyProfile Link1 Link2 | search box | Logout
My search box is 300px and my fonts are 12px, and the width of the div container above is 700px and BEFORE I added jQuery autocomplete support, it was something like this:
<div class="topNav">
<div class="left">
<a href...>MyProfile</a>>&nbsp&nbsp
<a href...>Link1</a>>&nbsp&nbsp
<a href...>Link2</a>>&nbsp&nbsp
</div>
<input id="searchBox" name="searchBox" type="search" >
<div class="right">
<a href...>Logout</a>
</div>
</div>
It was all well aligned then (all of topNav in one line).
Now, after adding jQuery support like so:
<div class="topNav">
<div class="left">
<a href...>MyProfile</a>>&nbsp&nbsp
<a href...>Link1</a>>&nbsp&nbsp
<a href...>Link2</a>>&nbsp&nbsp
</div>
<!-- div-ing the input searchBox was the only change: -->
<div class="ui-widget">
<input id="searchBox" name="searchBox" type="search" >
</div>
<div class="right">
<a href...>Logout</a>
</div>
</div>
And now, the search box has decided it will appear in the next line, and the Logout also appears in the second line, like so:
MyProfile Link1 Link2
| search box | Logout
Any help on how to horizontally align after jQuery autocomplete support is appreciated.
I followed the approach in the accepted answer in this SO post. That seems to have solved my problem. The CSS properties of .ui-widget (the jQuery div element) can be additionally changed (for font size etc.) in your application, that is another way you can remove the issues from including that dependency.

Categories