`Can you provide some tips on keeping the MetroCSS label continuously visible?`

Within the input-control, there is a label:

<div class="input-control modern text" data-role="input">
    <input name="salle_lib" id="salle_lib" type="text" maxlength="70" placeholder="libell&eacute;" data-validate-func="required" data-validate-hint="Ce champ est obligatoire"/>
    <button class="button helper-button clear"><span class="mif-cross"></span></button>
    <span class="label">libell&eacute;</span> // this is the label
</div>

The typical behavior in MetroCSS is that the label only appears when the input-control is clicked:

.input-control.text > .label {
  position: absolute;
  left: 0;
  top: -1rem;
  font-size: .875rem;
}
.input-control.modern input:focus ~ .label {
  opacity: 1;
  -webkit-transform: translateY(-18px);
          transform: translateY(-18px);
  transition: all 0.3s linear;
}

I would like the label to be visible at all times, not just when the input-control is clicked. I attempted to use 

$(".input-control.text").click();
, but it did not work! Any suggestions on how to achieve this?

Check out the code snippet on jsfiddle.

jquerycssmetro-ui-css

Answer №1

To implement this effect on your website, make sure to include the following CSS code:

.input-control.modern input ~ .label {
    opacity: 1;
    transform: translateY(-18px);
    transition: all 0.3s linear 0s;
}

Answer №2

The trick is to utilize the focus function. How do I do it? Well, you need to take a look at the CSS selector, for instance: 

.input-control.modern input:focus ~ .label

$('input').trigger('focus');
/* To prevent animation at the beginning

.modern.text * {
  transition:none !important;  
}

*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://metroui.org.ua/js/metro.js"></script>
<link href="http://metroui.org.ua/css/metro.css" rel="stylesheet">

<div class="input-control modern text " data-role="input">
    <input type="text" style="padding-right: 5px;">
    <span class="label">You login</span>
    <span class="informer">Please enter you login or email</span>
    <span class="placeholder" style="display: block;">Input login</span>
</div>

Update: Check out the demo here: jsbin

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Upload Request Failure Due to Drag and Drop Functionality in HTML5

Recently, I implemented a drag and drop upload form on a webpage. The 'normal' file input functioned perfectly as expected when prompting for a file to be selected. However, I encountered an issue where the POST request was missing the file infor ...

javascriptjqueryhtmldrag-and-drop

Is it possible to relocate a function that relies on the success callback of Ajax outside of the callback?

According to JSHint.com: Avoid placing function declarations inside blocks. Opt for a function expression or move the statement to the outer function's top. JSHint advises against keeping this function within the success callback. function matchC ...

javascriptjqueryajax

Using jQuery to select a nested element in HTML

After choosing $("a.tp[programm='" + programm + "']"); I am looking to target the nested element span.thump and update its text content. How can I achieve this? <h4><a programm="74" class="tp" href="#"><img src="/images/tuo.png ...

javascriptjqueryjquery-selectors

Dealing with jQuery Validation is driving me crazy!

Hey there, I've been struggling with JQuery validation problems lately and nothing seems to be working. I've tried starting from scratch multiple times but still can't figure it out. The latest attempt can be found using the reference link b ...

jqueryasp.netvalidationjquery-pluginsjquery-validate

Retrieving values from an array object using Jquery Select

What is the most efficient way to iterate over and add elements to a JavaScript array object using jQuery, while also being able to submit new items to the array object? Here is what I have attempted: var view = [{id:123, name:john, type:5},{id:234, nam ...

javascriptjqueryarrayshtml-select

submit data using ajax

Hey everyone, I've been working on sending a post value through ajax and here's my setup: I created a page called modal_image.php with the following code: var image; function addImage() { $.ajax({ url:'registration.php', ...

phpjqueryajaxhttp-post

Wrapping up CSS code within a JavaScript plugin

I am in the process of developing a JavaScript plugin that will be integrated into various websites with different styles. Some use Bootstrap, others Bulma, and some have custom styling. My plugin creates DOM elements such as divs, inputs, selects. I pref ...

css

Opening a dialogue box upon clicking a table row

I have a table in HTML where I want a dialog box to appear when a row is clicked. To update my database, I am using an AJAX call like this: $(document).ready(function() { $('.myrow').click(function () { $("#dialog").dialog({ ...

javascriptjqueryhtmlcssajax

Transmitting a collection of information to the server using jQuery

When sending a CSV list of songid's to the server within the url, I encountered a situation where I also needed to include another variable along with each songid. var $array = []; oTable.find('td').each(function(){ $songdata = $(this ...

phpjqueryarrays

What causes the less-than-perfect smoothness in my CSS3/jQuery transitions and how can I improve their fluidity?

After tirelessly searching for answers all over the web, I've hit a dead end and now I turn to you for assistance. My current dilemma revolves around the lack of smoothness in my animations, whether it be through jQuery .animate or CSS3 transitions. ...

javascriptjquerycsstransition

Use CSS to position three buttons in the center of a row by aligning them horizontally

I need help aligning three buttons in the same row and centered vertically. I want them to be aligned in the same way as the text "Select your attack:" Please advise on how to achieve this alignment. .prompt_user_to_choose { margin: 0; display: flex; ...

csscenter

Using AngularJS to execute jQuery code after the page has finished loading

I have a carousel of images on my website: Here is the code I am using: <div id="carousel"> <ul class="bjqs"> <li ng-repeat="image in dealer.images"><img src="{{image}}" alt="{{image}}" /></li> </ul& ...

jquerysliderangularjs

An Ajax request to a Struts2 action is causing an error with javax.xml.transform.TransformerException

As I attempt to create a concise example of invoking a Struts2 action from Ajax and retrieving data with XML, I encounter a javax.xml.transform.TransformerException (revealed below). My end goal is to extract the name property from the XML data returned by ...

xmlajaxjquerystruts2

Form submission is not functioning as expected

I am having trouble with my form submission. When I try to submit the form, nothing happens. I have tried various solutions but have not been able to resolve the issue. I have reviewed all available resources but still cannot figure out why my code is not ...

javascriptphpjqueryajaxforms

Effective Ways to Add Space Between Label and Textfield in React Using MaterialUI

Recently delving into the realm of React/MUI, I am faced with the challenge of crafting a login form that showcases a table-like structure where labels and TextFields align on the same row. A key requirement is to ensure equal spacing in the label column t ...

cssreactjsmaterial-ui

Preventing jQuery parser from turning arrays into objects

My JavaScript data file has the following structure: data = { items : [ {name: 'ABC'}, {name: 'CDF'} ] } After passing this data to $.ajax(type: 'POST', data: data), the converted data appears like this: it ...

javascriptjqueryarraysajaxhttp-post

Enigmatic void appears above row upon removal of content from a single item

When I click on an item in my grid, the content of that item is moved to a modal. The modal functions properly, but I noticed that when the content is removed from the item, a space appears above it. I have found that using flexbox could solve this issue, ...

javascriptjqueryhtmlcssflexbox

Having trouble getting my AngularJS animations to work, hitting a roadblock

Here is the code I've put together for you to review, with no official purpose in mind. I just saved this code to use at a later time. <script> var apps = angular.module('myApp', ['ngAnimate']); //header apps.cont ...

angularjscssangularjs-animation

Issues with monitoring multi-touch gesture events using Hammer JS

Can anyone figure out why this code, which utilizes hammer.js for multi-touch gesture events, is not functioning as expected? This code closely resembles one of the examples on Hammer's documentation. Despite setting up swipe events on specific elem ...

javascriptjquerymulti-touchhammer.js

Is the AJAX $.ajax() function and setInterval() method activated only when a user is actively viewing the page?

The following code was created by me in order to refresh or reload the content within the div id='bitcoin_blocks_table', which only occurs when a user is actively on the website. I noticed that if no one is on the site and I return after 2 hours ...

javascriptphpjqueryajax