I am sure there is a proper term for it but don't know it. How can I make a small note pop up when a user is on each field? Like let's say they go to name field; then as soon as they click on the name field on the right side, I want a small note to show up giving them a message like "make sure you use full name". I want to do this for a couple of fields I have. How can I do this?
Are you looking for ToolTips? Checkout these collection from smashing magazine.
I use this plugin for what you are asking. JQuery tooltip
FlowPlayer.org has a good jQuery tooltip plugin that you can use.
Check this for a demo of using it on a form(it suits your requirement)
Here is a simple example: http://jsbin.com/iruyo3
Code pasted here for reference too.
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { font:normal 62.5% tahoma; margin:20px }
#myForm .note { display:none; }
#myForm fieldset { border:0 }
#myForm label { width:100px; float:left; height:25px; line-height:25px; text-align:right; padding-right:10px }
</style>
</head>
<body>
<form id="myForm">
<fieldset>
<label>Name</label>
<input type="text" name="fullname">
<span class="note">Enter your full name.</span>
</fieldset>
<fieldset>
<label>Company</label>
<input type="text" name="fullname">
<span class="note">Enter your work place.</span>
</fieldset>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('#myForm input:text').focus(function(){
$('.note').hide();
$(this).next().fadeIn();
});
});
</script>
</body>
</html>
Related
it is showing the checkboxes, but by default i want it to hide but after click show
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#ElectronicsChk").toggle(1000);
$("#SoftwareChk").toggle(1000);
$("#Dontknow").toggle(1000);
$("p").toggle(1000);
});
});
</script>
<style>
div.electro{
background-color: red;
}
</style>
</head>
<body>
<button id="btn1">Electronics</button>
<button id="btn2">Homeapplainces</button>
<button id="btn3">Downloadable</button>
<div class="electro">
<input type="checkbox" id="ElectronicsChk">
<p>Hardware Problems</p></input>
<input type="checkbox" id="SoftwareChk">
<p>Software Problems</p></input>
<input type="checkbox" id="Dontknow">
<p>I dont Know</p></input>
</div>
</body>
</html>
plz help i am a newbie so plz do explain after submitting your code,... Sorry and i'll be very thankfull for the help... waiting for an early response thank you...
To hide the checkboxes and p initially, you can simply use CSS:
div.electro > * {
display:none;
}
That said, it seems you could simplify your code by hiding and showing the div container instead of each individual child element:
CSS:
div.electro {
display:none;
}
JavaScript:
$(document).ready(function(){
$("#btn1").click(function(){
$(".electro").toggle(1000);
});
});
This is much better because it follows the DRY principle and is more flexible, for example if you adding some new elements to the container like some helper text, you don't need to update the JavaScript logic.
I was searching for answer on the internet and on stack's other questions, but none of the solutions are working for me. I'm trying this for days. My timepicker JQuery plugin appears behind the triggered modal window. I don't have much time left before the science fair and I'm really in trouble. I would be really, really greatful if someone knows how to help me. Cheers guys and thanks in advance. Here's the code and picture:
Form section
<div class='form-group'>
<label for='start' class='col-xs-4 control-label'>Starting time</label>
<div class='col-xs-5'>
<?php include('test.php'); ?>
</div>
</div>
Test.php
<html>
<head>
<style type="text/css" media="all">#import "timePicker.css";</style>
<style type="text/css">
input {
margin:0;
padding:0;
}
pre {
background:#fff;
border:1px solid #ddd;
padding:4px;
}
.ui-timePicker {
position: relative;
z-index: 10000 !important;
}
</style>
<meta charset='utf-8'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="jquery.timePicker.js"></script>
</head>
<body>
<p><input id="time1" type="text" class="time form-control" /></p>
<script>
$("#time1").timePicker();
</script>
</body>
</html>
Have you tried just changing the z index of your time picker?
<style>
#time1{
z-index:1151 !important;
}
</style>
I have form fields such as <input type="text" placeholder="Name*"> . Then I have CSS applied to the placeholder, so it's grey. However, I want to change the asterisk(*) to be red. How would I target just that one character inside the attribute with jQuery or Javascript?
Here you go works for me
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
input::-webkit-input-placeholder:after {
content: '*'; color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="Name"></input>
<script>
</script>
</body>
</html>
So CSS only has ::first-letter and not ::last-letter styling... To make ::first-letter apply to the last letter, you do a trick by changing the direction of the text like so:
::-webkit-input-placeholder {
unicode-bidi: bidi-override;
direction: rtl;
text-align: left;
}
::-webkit-input-placeholder::first-letter { /* WebKit browsers */
color: red;
}
The issue with this is that you'll need to reverse your placeholder attribute and you can't use an asterisk because that's considered punctionation. But you can use unicode characters :)...
<input type="text" placeholder="★ emaN">
Here's the JSFiddle: http://jsfiddle.net/988aejrg/1/
Here is my code,
<html>
<head>
<style>
.containerTitle {
background-color:silver;
text-align:center;
font-family:'Segoe UI';
font-size:18px;
font-weight:bold;
height:30px;
}
</style>
</head>
<body>
<div id="a"/>
</body>
</html>
how to change the background-color in containerTitle style using jquery..
there you go: $(".containerTitle").css("background-color","red");
usage example:
// wait until the DOM tree is loaded
$(document).ready(function(){
// click event handler on <a> tags
$("a").click(function() {
// change the color on click
$(".containerTitle").css("background-color","red");
});
});
.containerTitle {
background: black;
height:100px;
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerTitle"></div>
<a href="javascript:;" >change color</a>
try this
$(".containerTitle").css(
"background","#dedede"
);
Add this code to change the style attribute dynamically.
$('.containerTitle').css({'background':'red'})
Like this,
<script>
$(document).ready(function() {
$(".containerTitle ").css("background-color","silver");
});
</script>
and also you should js library in your head section of your code:
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
and this <div id="a"/> should be like this, <div id="a" ></div>
I am using jquery hovercard plugin. I created a hiddendiv which contains a form. So it returns the form on hovering.
Later I noticed that the form's submit,reset,clear options were not working. Let me know where I'm doing wrong. I think this plugin doesn't handle the <form>. I might be wrong.
Below is what I've tried.
<script type="text/javascript" src="http://dl.dropbox.com/u/40036711/jquery.hovercard.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#demo-basic').hovercard({detailsHTML:$('#hiddenDiv').html(),
width: 210
});
});
</script>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:12px;
padding:15px;
line-height:1.5em;
}
#hiddenDiv
{
display:none;
}
strong
{
font-weight:bold;
}
</style>
</head>
--------------
--------------
<body>
<p><label id="demo-basic">Filter</label></p>
<div id="hiddenDiv">
<form name='testform' action='$action'>
some <input> and <option> tags...
<a href='javascript:document.testform.reset()'><img src='$path/resetimage.png'></a>
<a href='javascript:document.testform.clear()'><img src='$path/clearimage.png'></a>
<a href='javascript:document.testform.submit()'><img src='$path/submitimage.png'></a>
</form>
-----
-----
Got it, it's not due to the plugin, the reason of the error was that I tried to use <form> inside another <form> which was stupid. Actually the html file was too big that I didn't come to know that.