I am novice to jQuery Mobile and now i am working with form element, I have write following code:
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<input type="text" placeholder="Enter some text"/>
<input type="password" placeholder="Enter Password"/>
<input type="button" value="Login" />
</div>
</div>
but design not properly rendered in above two input type.i don't know what is issue .
below Picture shows ouput of above code ,in picture it is clearly displayed rendered view.
#Dima Kuzmich I got my answer.
Actually I was using old version of jquery mobile css 1.2.0 of version, that's why it will render above image design.
but when i used latest version of jquery mobile css 1.3.1 then my issue is solved perfectly fine.
Thank you #Dima Kulmich.
Related
So I am creating a simple login page and I am trying to style it using Googles Material Design, I came across MUI which a CSS3 framework that does just what I want except one simple thing, when I type in the username the floating label does float up and looks cool, but as soon as I move away from that input field the floating label sinks back down which looks incredibly ugly and obviously is not what I want.
I have created a jsfiddle to replicate the problem here.
<form class="" action="php/process_login.php" method="post">
<legend>Login</legend>
<div class="mui-textfield mui-textfield--float-label">
<input type="text" name="username" id="username" class="">
<label>Username</label>
</div>
<div class="mui-textfield mui-textfield--float-label">
<input type="password" name="password" id="password" class="">
<label>Password</label>
</div>
<div class="form-group">
<input type="submit" class="mui-btn mui-btn--raised" value="Login">
</div>
</form>
I have followed a simple guide that demonstrates how this should work here (Floating Labels) and it works well.
Could anyone suggest how I can fix this please?
You have to load also MUI javascript with
<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>
Working Demo.
You haven't embed the Javascript file, paste this in of your top of you page in the head section:
<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>
I created a website called diditdrop.com. Within the website there is a form where the user enters a number and then submits the number. On the desktop version of the site, the form works great. On the mobile version, the form is not responsive (i.e. i tap on the screen and nothing focuses or pops up. Additionally, the button underneath it doesn't work either).
I'm not sure what to do. I've been stuck on it for a few hours now. I've pasted a snippet of my code below, however, it doesn't look too strange. If someone could take a look at my site, and then recommend a better way of implementing, I would sincerely appreciate it.
<form class = "form-inline" action="https://formspree.io/x#gmail.com" method="POST">
<div class= "form-group">
<span>
<input type="tel" id = "form1" placeholder="digits here" tabindex="1" class="boxed form-control" name="number"/><br>
</span>
<span>
<input type="submit" id = "buttonmove" class="btn boxed" value="get dat new new"name="number" />
</span>
</div>
</form>
Add the following code it will work:
add the style="float:left" to the image like below
<div id="pictureface" class="col-lg-6">
<img style="float:left" class="img-responsive" src="http://static.stereogum.com/uploads/2016/09/CtUYD4uWYAIB1MH-1475280486.jpg">
</div>
I have a submit form in my website which works well with Firefox but does not work on Chrome and Safari. The input textbox is the only element giving trouble, all the other elements work fine with every browser. Do someone have a solution for this?
Here is the code of the textbox:
<div class="form-input-half-left form-input-border">
<div class="form-input-background opacity_2"></div>
<input id="name" type="text" name="x_first_name" value="name *" onclick="this.value = '';"/>
<span class="error"> <?php echo $x_first_nameErr;?></span>
</div>
i tried your code here in jsfiddle and works fine in both chrome and firefox.i couldn't replicate the error, but i think you can use placeholder for your purpose and it works much more better than onclick
<input id="name" type="text" name="x_first_name" placeholder="name *"/>
may i know the problem is on which version of chrome and what is the problem exactly? it doesn't clear the text box or something else?
An image can best show the problem:
Of course I dont want my textarea to have a bunch of html tags as a default value, thats why I set the defaultvalue to 'Hi', which it aparently isnt showing right now, but which it should.
I already tried a few things to find/solve the problem. What I found out is that if I remove the other form on the page (a login form not visible on the image) this form works and properly shows 'Hi' as a value. So the problem seems to be that there are multiple forms on this page. Problem has only shown with the use of text-area's, input fields, on this page or any other, work fine. I also tried moving the textarea outside of the form tags, that does remove the html tags, but the 'hi' still isnt visible (plus I want the textarea inside my form, as it should be part of it).
Edit, after a few struggles finally managed to post the code as code instead of a document. Code for the first, properly working, form:
<div id="userbox">
<form id="form1" action="auth/login" method="post">
<div id="username-container">
<input class="transparent-input" name="username" type="text" value="Gebruikersnaam">
</div>
<div id="password-container">
<input class="transparent-input" name="password" type="password" value="Wachtwoord">
</div>
<div id="lostpass-container">
wachtwoord<br />vergeten?
</div>
<div id="login-container">
<input class="transparent-input" type="submit" value="Aanmelden">
</div>
</form>
</div>
Code for the second, faulty, form:
<div id="content">
<h3>Contact</h3>
<form id="form2">
<input type="text" value="Pietje Puk" /><br />
<input type="email" value="mijn#email.nl" /><br />
<textarea rows="10" cols="50">Hi</textarea>
</form>
</div>
edit: I did do a markup validation, nothing there that solved the problem
It turned out to be a markup problem after all. After trying some more I did find that moving a div closing tag to a different location in the document did solve the problem. Before I had opened a div before both forms and closed it in between them, closing it after both of them instead solved the problem.
Tnx Lars Beck for pointing me in the right direction :)
I already posted a similar question and got a jQuery solution that works. Now I want to do it with only CSS/HTML. I saved twitter's homepage locally and deleted all the js scripts and noticed that the effect I'm trying to achieve is with CSS/HTML (when you click on the username/pass the values "Username"/"Password" stay there until you enter text).
I'm a newbie at these kind of new CSS/HTML effects and have spent the last couple of hours trying to replicate it with no success.
Here's the html of twitter's login form:
<form action="#" class="signin" method="post">
<fieldset class="textbox">
<div class="holding username">
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on">
<span class="holder">Username</span>
</div>
<div class="holding password">
<input type="password" id="password" value="" name="session[password]" title="Password">
<span class="holder">Password</span>
</div>
</fieldset>
<fieldset class="subchck">
<label class="remember">
<input type="checkbox" value="1" name="remember_me">
<span>Remember me</span>
</label>
<button type="submit" class="submit button">Sign in</button>
</fieldset>
I've looked over the site's CSS but it's 10,000 lines and very complicated. How should the CSS look like? Or could you point me out to a tutorial on how to achieve the same effect as this is driving me nuts?
Thank you very much,
Cris
Set the HTML autofocus attribute:
<input type="text" placeholder="Type here ..." autofocus="autofocus" />
You can target elements that are focused or blured like so:
input:focus {color:red;}
You now need to nest the CSS to hide the span called holder inside the input.
span.holder input:focus {visibility:hidden;}
I have not tried this, but it would be something like this.
To clarify, I have just pulled the JavaScript twitter use and the source for their home page and I can confirm that they are using the following JavaScript function for focus on the field
inp.focus()
The JavaScript is quite lengthy but it looks like after a quick read that they are using jQuery that is setting focus based on the class being username.
I just looked at the autofocus property suggested by another poster and this method has worked for me in my web app currently under development.
The code for this is
<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on" autofocus>
Note, per the documentation at the W3C website, the autofocus property can only be used once on the page. I have put it into a form that is hidden and shown in an inline element using Fancybox.
The grayed out text in the input field can be done with the place-holder element, something I'm already using, add the following into your input element
placeholder="Username"
NOTE: Both placeholder and autofocus are HTML5 properties and may not be supported by all major browsers yet, this is why JavaScript is still being used by sites like twitter.
The styling is done based on CSS/CSS3 greatly, an excellent resource is W3Schools. I would recommend for what you're wanting to achieve start at the CSS3 section looking at borders.
Another resource that is excellent but hasn't been updated for about a month and a half sadly is doctype.tv. Nick has some fantastic advise regarding styling your website along with some great insight into design.
Judging by the bolded text in your question (when you click on the username/pass the values "Username"/"Password" stay there until you enter text), I'm guessing what you want is the placeholder attribute, which #phihag has in his example.
<input type="text" placeholder="This text will disappear" />
The placeholder attribute works without Javascript in browsers that support it. For older browsers, you'll need some Javascript, and this is probably what Twitter is doing in their code.
See the Wufoo page on the Placeholder Attribute for more details, including how to do a javascript fallback and what browsers it is currently supported in.
See also this demo which shows how to style the ":placeholder" and ":active" states (at least for webkit and mozilla).