The below code shows US flag and US is selected when the drop down is loaded.
<div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true"></div>
I want to selecte UK in a form and Iraq in another form but when tried below it does not show flags of the country and the country name.
<div class="bfh-selectbox bfh-countries" data-country="UK" data-flags="true"></div>
<div class="bfh-selectbox bfh-countries" data-country="IRQ" data-flags="true"></div>
The above code selected is blank by default.
How can I show UK and Iraq flag as how US name and flag are selected on <div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true"></div>
To make it work you should add links to CSS and JS files of Bootstrap Form Helpers library which should be previously downloaded on your server
<link href="css/bootstrap-form-helpers.min.css" rel="stylesheet">
<script src="js/bootstrap-formhelpers.min.js"></script>
<div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
</div>
Example for displaying the country name and flag from a country code
<span class="bfh-countries" data-country="US" data-flags="true"></span>
Read more about it
http://www.freenetmall.com/common/jquery/FormHelpers/docs/country.html
I found the answer myself:
for UK, use data-country="GB"
for Iraq, use data-country="IQ"
Related
I have a responsive page built upon bootstrap. For some reason, I cannot get the checkbox to display in an iOS built device. The checkboxes work in every browser imaginable, and even work in the developer module of chrome (emulating iOS devices) and even works in the iOS reader. It just will not display on an iPhone. Is it being hidden behind another element?
Thanks in advance!
http://www.johnstoncc.edu/FA/2/depnbrhhc.html
Changing the column sizes to the following fixes it.
<div>
<div class="col-xs-2 col-sm-2 col-lg-1" style="margin-top:20px;">
<input id="OBKey_Signed_1" type="checkbox" name="OBKey_Signed_1"
value="Y" required="" data-com.agilebits.onepassword.user-edited="yes"
style="-webkit-appearance: radio;">
</div>
<div class="col-xs-10 col-sm-10 col-lg-11">
By checking this box, I ratify the use of my typed name and
Student ID number as an electronic representation of my signature.
</div>
</div>
I am currently adding globalization to an existing web app which uses devextreme to present the page, as below:
<body>
<div id="viewport" class="dx-viewport">
<div class="startPage dx-content-background" data-options="dxContent : { targetPlaceholder: 'content' } ">
<div class="content">
<h1>Registration</h1>
<div class="regForm" id="registrationForm" />
<div class="regButton" id="registrationButton" />
<div class="loadIndicator" id="loadIndicator" />
<div class="registrationSucceeded" id="registrationSucceeded" />
<div class="returnToMainPageButton" id="returnToMainPageButton"/>
</div>
</div>
</div>
The entries are translated as expected but I can't figure out how to translate the heading as DevExtreme doesn't provide a straight 'Text' widget. If I set it to use a TextArea, for example then it does work but then obviously doesn't look like a header.
So, how can I translate the header text (or any other that is held in the HTML page)?
Maybe the official DevExtreme localization topic will be usefull for you.
So, how can I translate the header text (or any other that is held in the HTML page)?
You can use a text binding to provide content based on current locale.
I'm trying to find a link in my navbar, nested like so:
<div class="menu logged-out" id="loggedoutmenu">
<a href="/users/auth/twitter?state=navbar_basic" data-no-instant>
<div class="option"> via Twitter</div>
</a>
</div>
I've tried using the following methods and none of them have worked:
find_link("via Twitter")
find_link("via Twitter", {href: "/users/auth/twitter?state=navbar_basic"})
find('div', {class: 'option'})
Not really sure how to grab that element... The main goal is to test the link via click_link.
Edit:
Here's the full HTML structure:
<body>
<div class="top-bar" id="top-bar">
<nav>
<--- other nav elements not listed --->
<div class="navigation-butt desktop" id="navigation-butt">
<div class="menu logged-out" id="loggedoutmenu">
<a href="/users/auth/twitter?state=navbar_basic" data-no-instant>
<div class="option"> via Twitter</div>
</a>
</div>
</div>
</nav>
</div>
</body>
I'm guessing the menu is collapsed and you haven't done anything to open it, so the link isn't actually visible on the page. Assuming you just need to click on the '#loggedoutmenu' item to open the menu you could do something like
find('#loggedoutmenu').click.click_link('via Twitter')
which will click on 'loggedoutmenu' then look for the link inside it, and click the link when found. If clicking on '#loggedoutmenu' isn't how you open the menu then you'll need to provide more info.
Update: You have now indicated that the menu opens on hover - so assuming the user has to hover over an ancestor of the button you want to click you can do
find('<css selector for the visible element the user needs to hover over>').hover.click_link('via Twitter')
Writing my solution as an extension of Thomas Walpole's, which lead me to getting it. Thanks again, Thomas!
find('#navigation-butt').hover.click_link(href:"/users/auth/twitter?state=navbar_basic")
Edit: Updated my answer since the previous explanation was incorrect.
I know the first part of a URL, but need to define the last part uniquely based on what the client enters in a div. For example:
<!-- specify page name in the div -->
<div id="client-entry">page-name</div>
<div id="load-url">url loads here</div>
<!-- load what is specified at the end of the url -->
<script>
$("#load-url").load("known-folder/"#client-entry.text()".html");
</script>
Any help would be appreciated.
Idea 1:
Give an attribute to div of your choice (Say for example ajaxify)
<div id="client-entry" ajaxify="unique link here">
then using jQuery you can get the value as
$('#client-entry').attr('ajaxify');
and then load the next div with whatever attribute value the client-entry div has has.
Idea 2:
You may use an input in the client-entry div as
then using jQuery get the value of input as
var toLoad = $('client-input').val( );
Use this value in your load code.
$("#load-url").load("known-folder/"+toLoad+".html");
I'm trying to build a dynamic display in a web page. The site is built in ASP.NET MVC 3, but I'm not sure if this matters...
Essentially, I have a base "_Editor.cshtml" page which uses partials to render the specific editor content in my display using query parameters. Consider an editor for a chart (line chart vs. bar chart).
_Editor.cshtml
<div id='tabs'>
<ul>
<li><a href='#queryTab'>Define Query</a></li>
<!-- THIS IS WHERE I NEED TO SHOW ALL OF MY 'CUSTOM' TAB NAMES -->
<!-- ko template: 'tabNames' -->
<!-- /ko -->
<li><a href='#themeTab'>Styles and Themes</a></li>
</ul>
<div id='queryTab'>
<!-- configure db connection, tables, fields, etc... (not important) -->
</div>
<!-- THIS IS WHERE I WANT TO SHOW CONTENT FOR MY CUSTOM TABS -->
<!-- ko template: 'tabContent' -->
<!-- /ko -->
<div id='themeTab'>
<!-- show various style options here (not important) -->
</div>
</div>
<script type="text/javascript">
$(function(){
var vm = { /* define my model here */ };
ko.applyBindings(vm);
$("#tabs").tabs();
});
</script>
#if (Model.EditorType == ChartTypes.Bar) {
#Html.Partial("_BarChartEditor")
} else if (Model.EditorType == ChartTypes.Line) {
#Html.Partial("_LineChartEditor")
}
_BarChartEditor.cshtml
<script id="tabNames" type="text/html">
<li>Bar Chart Tab!</li>
<!-- I could have many more tab names here -->
</script>
<script id="tabContent" type="text/html">
<div id="barChartTab">
<h1>Add controls for bar chart configuration</h1>
</div>
<!-- I would create a div for each tab name above here -->
</script>
_LineChartEditor.cshtml
<script id="tabNames" type="text/html">
<li>Line Chart Tab!</li>
</script>
<script id="tabContent" type="text/html">
<div id="lineChartTab">
<h1>Add controls for line chart configurations</h1>
</div>
</script>
Sorry for the lengthy code drop (it took a long time to write it all here, so have mercy on me). :) I wanted to make sure that my problem was understood because of the way I'm building my editors using custom partials. Perhaps it's cludgy, but it works for the most part...
Really, everything works great except for the tab content. The tab rendering appears to be happening before I'm able to bind my view model to the UI. When the 'ko.applyBindings()' method is called, the tab shows up on different tabs.
Has anybody tried to do this? Has anybody had success? I've created a jsfiddle to show a simple scenario to show exactly what I'm talking about:
http://jsfiddle.net/TrailHacker/j2nhm/
Thanks for any help!
I actually got it working with your example, your content template was just structured incorrectly. It was missing the <div> tags.
If you modify this for your example, just remember that the div id needs to match the link's ref. You can throw both of these values into your viewmodel, to allow for multiple custom tabs.
http://jsfiddle.net/tyrsius/UCGRZ/