I am using the following source to create some good looking forms on my site.
If you look at the live demo, and go to the form titled "yoko" you will see that once you fill out the input box, it is supposed to stay open, and you are supposed to be able to see the text you input.
When I use this source, it opens when I click in the text box, but the form collapses even when it has been filled out, which it is not supposed to do.
On the demo when you click in the text box and fill it out, the class name of that span element goes from "input input--minoru" to "input input--minoru input--filled". When I use the css, and javascript files from the source the forms open up correctly when I click and type in them, but they do not stay open, and the class title does not changed to "input input--minoru input--filled".
In my header.php I all the css files in the following order:
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/normalize.css" >
<link type="text/css" rel="stylesheet" href="css/component.css" >
<link type="text/css" rel="stylesheet" href="css/style2.css" >
In my index.php I have the following piece of code:
<section class="test">
<div class="container">
<div class="row">
<span class="input input--minoru">
<input class="input__field input__field--yoko" type="text" id="input-1" />
<label class="input__label input__label--yoko" for="input-1">
<span class="input__label-content input__label-content--yoko">First Name</span>
</label>
</span>
</div>
<div class="row">
<span class="input input--yoko">
<input class="input__field input__field--yoko" type="text" id="input-1" />
<label class="input__label input__label--yoko" for="input-1">
<span class="input__label-content input__label-content--yoko">Last Name</span>
</label>
</span>
</div>
</div>
</section>
and at the very end of index.php I call the javascript files in this order:
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/script.js"></script>
The styles are all applying, so I know the css is at least styling correctly, but it is not doing the correct ::before and ::after functionality correctly.
JSFiddle of what I am talking about
If you type in something into a form, and then leave the input area the box collapses again. When it should stay up.
I did not include the .js files, but classie.js comes with the source, and they are ordered as mentioned above in my index.php
Related
I am trying to change the value of a text area and clicking the button to submit it, but my code doesn't seem to click on the target. What could I be doing wrong? Could it be that the modal is preventing the click?
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>
<form id="form1" name="form1" method="post">
<p>
<input type="button" value="submit" onclick="setValue()" />
</p>
<p>
</p>
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('set').value = "5d10";
document.getElementById("throw").click();
}
</script>
</p>
</div>
</div>
Edit:
omg, I am SO sorry. I did not explain this well. I wrote this almost at 2 am my time. I was tired and frustrated (i spent a few hours trying to find what I was doing wrong) and did not explain myself properly. Let me try again.
What I posted was a snippet of the code where I believe is the problem since the function bit that modifies "set" does work, but the part that is supposed to click on "throw" doesn't. (ignore that empty p).
I am editing the source code of this git: https://github.com/MajorVictory/3DDiceRoller
I have managed to edit a few things like adding buttons and setting a modal from where the button you see in the snippet operates from. Visual reference: enter image description here
Set and Throw
In short, "document.getElementById('set').value = "5d10";" works, but "document.getElementById("throw").click();" doesn't.
There is no element called 'set' in your html code.
The correct code is this:
<!DOCTYPE html>
<html>
<head>
<title>Training File Upload</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p></p>
<form id="form1" name="form1" method="post">
<input type="button" id='set' value="submit" onclick="setValue()" />
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('set').value = "5d10";
}
</script>
</p>
</div>
</div>
</body>
</html>
I have all of these files in my website header:
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="crossorigin="anonymous"></script>
<script src="http://localhost:8080/Javascript/bootstrap.bundle.js" type="javascript/text"></script>
<link rel="stylesheet" href="http://localhost:8080/Css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js" type="javascript/text"></script>
Then I have the following in my body:
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<!-- Form code begins -->
<form method="post">
<div class="form-group"> <!-- Date input -->
<label class="control-label" for="date">Date</label>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Submit button -->
<button class="btn btn-primary " name="submit" type="submit">Submit</button>
</div>
</form>
<!-- Form code ends -->
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#date").datepicker();
});
</script>
I want it to look like this: https://formden.com/blog/date-picker.
But instead it looks like this:
What do I do? I have been trying for hours. I have tried different ordering of the files. When I try to do datetimepicker(). I get an error. I just do not know what to do please help.
It looks like you are Using JqueryUI as well as BootstrapDatepicker. Since bootstrapDatepicker and JqueryUI both has got the same function name for their datepicker to be initialized hence there is an ambiguity.
Now your markup has got jqueryUI js loaded first so it is ideally using the jqueryUI datepicker function and expecting the CSS of jqueryUI which can be found here.
If you want to use the bootstrap datepicker then you might need to remove the jqueryUI.js or generate the jqueryUI js which is excluding the datepicker functionality.
I've imported Material Design library's css and js files but for some reason text field isn't working properly even though the button component below it is displayed correctly.
It looks like JS isn't getting applied at all
Codepen: https://codepen.io/x84733/pen/yEEbjK
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<style>#import url("https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css");</style>
<div class="mdc-text-field">
<input type="text" id="my-text-field" class="mdc-text-field__input">
<label class="mdc-floating-label" for="my-text-field">Hint text</label>
<div class="mdc-line-ripple"></div>
</div>
<button class="foo-button mdc-button">Button</button>
text-field component code was taken from docs:
https://material.io/develop/web/components/input-controls/text-field/
Refer to here for how to import styles and here to learn how to instantiate JavaScript automatically for different components for material.io. For textfield, you have to import following code in your css:
#import "#material/textfield/mdc-text-field";
And following code to your js:
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
Here's the overall demonstration:
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
#import "#material/textfield/mdc-text-field";
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet"/>
<div class="mdc-text-field">
<input type="text" id="my-text-field" class="mdc-text-field__input">
<label class="mdc-floating-label" for="my-text-field">Hint text</label>
<div class="mdc-line-ripple"></div>
</div>
<button class="foo-button mdc-button">Button</button>
And codepen link: https://codepen.io/anon/pen/pKKPBK
I have a Laravel-based web application, and I have a very odd and specific problem appearing on some pages in Firefox only.
If I have a form on the page, and in that form there is a field with autofocus, the HTML loads before the CSS, and for a second or two, the user sees the page as plain text, before the CSS loads and then everything is back to normal.
The correlation sounds far-fetched, but removing the autofocus from the form field resolves the issue in 100% of cases on the website. Is the autofocus somehow requiring the browser to load the HTML before the styling? How do I fix this without removing autofocus from all my forms?
This is an example form field from the site:
<div class="form-group">
<label for="card-number" class="col-md-4 control-label">Card Number</label>
<div class="col-md-6">
<input id="card-number" type="text" class="form-control span4 card-number numbers-only" value="" required autofocus maxlength="16">
#if ($errors->has('card-number'))
<span class="help-block">
<strong>{{ $errors->first('card-number') }}</strong>
</span>
#endif
</div>
</div>
All the CSS files are loaded in the <head> of the page:
<!-- jQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Theme Styles -->
<link href="/assets/css/bootstrap.css" rel="stylesheet">
<link href="/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/assets/css/styles.css" rel="stylesheet">
On my concept design the jQuery controlling things like the calendar to appear when the input(s) at the top right are clicked on work fine, however now I'm trying to integrate this into an existing design, all these Javascript elements are not working, although I am using the same code amongst other things which already existed within old design.
I considered it to be simply a compatibility issue of the sidebar calendar, removed it entirely and still nothing. Within the console it defines "Cannot read property 'datetimepicker' of null" for example.
Live URL of the concept (all working elements): http://bit.ly/1m23oXT
Live URL of the non working site: http://bit.ly/1gxgXfx
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo HTTP_HOST; ?>Styles/jquery.datetimepicker.css" />
<script src="<?php echo HTTP_HOST; ?>Scripts/jquery.idTabs.min.js"></script>
.
<div class="header-reservations">
<div id="usual2" class="usual">
<ul>
<li>ROOM BOOKINGS</li>
<li>SPA BOOKINGS</li>
</ul>
<div id="tabs2">
<form>
<input type="text" class="header-form-input" id="datetimepicker" placeholder="21st January" />
<select class="header-form-dropdown">
<option>1 Night</option>
<option>2 Nights</option>
</select>
<select class="header-form-dropdown">
<option>1 Adult</option>
<option>2 Adults</option>
</select>
<input type="submit" class="header-form-submit blue-btns" value="BOOK" />
</form>
<span class="clearboth"></span>
</div>
<div id="tabs3">
<div class="header-tab-spa">
<h3>To Make A Spa Booking, Contact Us Here</h3>
</div>
<span class="clearboth"></span>
</div>
</div>
</div>
.
<!-- Required JS Files -->
<script type="text/javascript">
$(document).ready(function() {
$("#usual2 ul").idTabs("tabs2");
}
</script>
<script src="<?php echo HTTP_HOST; ?>Scripts/jquery.datetimepicker.js"></script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker();
$('#datetimepicker2').datetimepicker();
</script>
A parenthesis is missing at the end of
$(document).ready(function() {
$("#usual2 ul").idTabs("tabs2");
}
But such a syntax error should be found using the console, not Stack Overflow. Read about the console.