trying to make an input box do the following: normal sate the input box text is x, hover state the input text is y and was you leave the box its z and can stay z through all states again.
-update
have a search box which the background image and text are faded out, once you hover it is is vivid, once you focus it, it is vivid with a 2px border, but once you leave it i loose verything:( so need a trick to get it to stay vivid the background picture (of which there are x and y, one for each state) and the text but loose the 2px border
---UPDATE ---
/* Search box */
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
width:240px;
margin-right:4px;
margin-left:11px;
color:#cccccc;
vertical-align: top;
padding: 4px 2px 4px 79px;
border-color: #4FA4F9;
}
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
color:#888888;
}
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
width:239px;
color:#888888;
padding: 3px 2px 3px 78px;
}
.searchbox.blur {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
width:239px;
color:#000000;
padding: 4px 2px 4px 79px;
}
#-moz-document url-prefix() {
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
}
}
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
input, select, textarea {
margin: 1 0 0;
}
input, textarea, .date {
border: 1px solid #aaa;
border-radius: 3px;
color:#333;
}
input {
font-size: 13px;
padding: 0px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 4px 4px 4px 4px;
}
select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;
}
--- html ---
<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>
---js----
/* Search Box Leave */
$(".searchbox").blur(function(){
$(this).addClass("blur");
});
You could do this using jQuery by setting a class.
$(".searchable").blur(function() {
$(this).addClass("blur");
});
Then in your css you can set the color like this
.searchable.blur
{
color:#000;
}
Here is a jsfiddle example -> http://jsfiddle.net/y46Wk/2/
Just bear in mind that the element won't show its hover color again unless you remove the class.
This isn't really an answer to your question.... but I have a feeling you're doing some validation on a form, so why not look at a jQuery validation plugin like this
http://docs.jquery.com/Plugins/Validation
Here is a list of other form related jQuery stuff
http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/
If none of them help, perhaps you could tell us which one comes close to give us a bit of a clue as to what you want ;-)
Are you trying to do this: http://jsfiddle.net/akhurshid/y46Wk/4/
What you are describing (maintaining a state) is technically possible with just CSS.
Here is an article explaining the process.
In summary you use a transition state, triggered by focus, to keep styles applied to the element. I'm not advocating it as the best method, but it is really quite interesting to see what you can do with CSS3 properties.
More of a curiosity than a straight answer but hopefully its helpful to you / others who hit this question :)
Related
I am creating an application where i am using divs to show information and and using some jQuery to manipulate them.In my application i want to give box shadow to my div and trying to make a professional look.I have created box shadow to my div but it does not look that professional.I am using this link to prepare my application.
Refence UI
Now i want to create my personal information div exactly same as the Summary div in that application. I am also posting my code what i have done so far in a fiddle
#personalInformation{
font-size: 1em;
border-bottom: 3px solid #98AFC7;
border-top: 3px solid #98AFC7;
border-left: 3px solid #98AFC7;
border-right: 3px solid #98AFC7;
box-shadow: 10px 10px 5px;
line-height: 0;
width: 45%;
}
My sample code
Now can anyone help me to make my div exactly same as that application ?? or if not possible then how to make the box shadow in bottom only?? Somebody please help .
I've created exactly same box with background like that application. Hope it may help you.
html {
font-size: 10px;
}
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.42857143;
background-color: #f4f4f4;
color: #404040;
}
.content {
float: left;
width: 870px;
}
.content::after {
content: "";
clear: both;
display: table;
}
.box {
padding: 5px 15px;
background: #fff;
box-shadow: 0 1px 2px #c9c9c9;
-moz-box-shadow: 0 1px 2px #c9c9c9;
-webkit-box-shadow: 0 1px 2px #c9c9c9;
border-radius: 2px;
margin-bottom: 15px;
}
.box:hover {
box-shadow: 0 2px 2px #bababa;
-moz-box-shadow: 0 2px 2px #bababa;
-webkit-box-shadow: 0 2px 2px #bababa;
}
.box h5 {
font-size: 1.4rem;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.1;
}
.box p {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.5;
margin: 0 0 10px;
}
<div class="content">
<div id="your-id" class="box">
<div class="box-content">
<h5>Caption</h5>
<p id="your-id">Not Mentioned</p>
<h5>Skills/Competencies</h5>
<p id="your-id">Layout ,CSS ,JavaScript ,jQuery ,HTML5 ,WordPress ,Web Design ,Web Development ,HTML ,PHP ,AJAX ,Cross-browser Compatibility ,CSS3 ,UI/UX ,Expert Frontend Developer ,Responsive Web Design ,Website Development ,Web 2.0 ,Dreamweaver ,Web Applications ,Image Manipulation ,Drupal ,MySQL ,Web Application Design ,Web Interface Design ,SVG ,Front-end Development </p>
<h5>Resumes</h5>
<p id="your-id">not mentioned</p>
</div>
</div><!-- .box -->
</div>
I have provided an example here using HAML and SCSS. Please hit the compiled button to retrieve the rendered content. Its a very simple illusion. The background shadow is a soft black color. Let me know if you any more questions
HAML:
#my-box Hello World!
SCSS:
$background: #3D6CAD;
$soft-black-shadow: rgba(0,0,0,0.29);
html, body { width: 100%; height: 100%; background: $background; }
#my-box {
float: none;
height: 50px;
width: 300px;
margin: 0 auto;
margin-top: 50px;
padding-top: 20px;
text-align: center;
background: white;
box-shadow: 0 2px 3px 1px $soft-black-shadow;
}
http://codepen.io/Stephn_R/pen/pJwdzB
And the edits applied to your JSFiddle
This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
Closed 7 years ago.
right now I want to implement a border on hover on a button.
That button is in a div together with 3 other buttons. However, as soon as I hover over it, the border is being displayed, but at the same time the button expands the size of the added border as well, which is not what I have in my mind.
I made a fiddle to demonstrate the problem: Click me
I read up about this topic here, and I indeed found a solution, by adding margin-top: 3px;
to the hover classes, however, that "squeezes" the button, which is not what I want.
Instead, I want the button to not look compressed or anything, but rather simply with a 4px border overlaying the top 4 px of the button.
Any advice?
Thanks in advance
You could try using a box shadow instead, as this doesn't actually affect the positioning:
a {
transition: all 0.8s;
margin: 5px;
text-decoration: none;
display: inline-block;
background: lightgray;
height: 50px;
width: 150px;
line-height:50px;
text-align: center;
color:black;
}
a:hover {
box-shadow: 0 -3px red;
}
HOVER MENOTICEHOWIDON'TMOVE?
I created a quick example: http://jsfiddle.net/alexcoady/ogoy21dq/
And one with just top or bottom http://jsfiddle.net/alexcoady/ogoy21dq/2/
Use margin to replace border-width when it's not visible.
button {
margin: 3px;
border: 1px solid red;
}
button:hover {
margin: 0px;
border: 4px solid red;
}
You can:
use the box-shadow fiddle demo
.functionButton:hover{
box-shadow: 0 -4px 0 0 #a3def1;
}
Style your button to have vertical-align to top. Add the following style to the bottom of your CSS:
#functionButtonDiv button{
vertical-align: top;
}
Updated jsFiddle
Read up: vertical-align | MDN
Try to understand what is happening.
You want buttons not be squeezed, but a border on top to be added.
Initially your button height was 25px and border was 1px.
On hover your height remains same however the border increases by 3px, hence making your button to squeeze.
Solution:
Hover: height has to be increased to accomodate increased border( 4px-1px = 3px) (in order not to squeeze the button).
If you do this only you will observe that the button starts shifting down.
To avoid it add margin of 4-1 = 3px to your functionButton class to compensate the increased height.
Similarly add a margin of -3px in hover class as the height is already increased by 3px.
.functionButton{
width:60px;
height:25px;
border: 1px solid #A3DEF1;
border-left: none;
outline:none;
background: #F2F5FD;
margin-top:3px; //added to avoid shifting of buttons down on hover (Here it compensates the increased height while hovering)
}
.functionButton:hover{
border-top: 4px solid #A3DEF1;
height:28px; //increased height to accomodate the increased border
margin-top:-3px; //negative margin to avoid shifting of button down
}
.functionButton{
width:60px;
height:25px;
border: 1px solid #A3DEF1;
border-left: none;
outline:none;
background: #F2F5FD;
margin-top:3px;
}
.functionButton:hover{
width:60px;
height:28px;
border-top: 4px solid #A3DEF1;
margin-top:-3px;
}
<div class="functionButtonDiv" id="functionButtonDiv">
<button type="button" class="functionButton">Dummy2</button>
<button type="button" class="functionButton">Dummy3</button>
<button type="button" class="functionButton">Dummy4</button>
</div>
You probably don't need Javascript for this.
You can use box-sizing to make sure that borders are included in your dimensions and vertical alignment to maintain position.
button {
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button {
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.functionButtonChat {
width: 60px;
height: 25px;
border: 1px solid #A3DEF1;
outline: none;
background: #F2F5FD;
}
.functionButtonChat:hover {
border-left: 4px solid #A3DEF1;
border-top: 4px solid #A3DEF1;
}
.functionButton {
width: 60px;
height: 25px;
border: 1px solid #A3DEF1;
border-left: none;
outline: none;
background: #F2F5FD;
}
.functionButton:hover {
border-top: 4px solid #A3DEF1;
}
<div class="functionButtonDiv" id="functionButtonDiv">
<button type="button" class="functionButtonChat">Dummy1</button>
<button type="button" class="functionButton">Dummy2</button>
<button type="button" class="functionButton">Dummy3</button>
<button type="button" class="functionButton">Dummy4</button>
</div>
use following css i have made some changes in ur css and its working as per ur requirement try the following
.functionButtonChat{
width:80px;
height:25px;
outline:none;
background: #F2F5FD;
}
.functionButtonChat:hover{
border: 4px solid #A3DEF1;
}
.functionButton{
width:80px;
height:25px;
outline:none;
background: #F2F5FD;
}
.functionButton:hover{
border: 4px solid #A3DEF1;
}
I have integrated google search queries with my simple search form. It is showing queries in dropdown as expected but when I click on the query it doesn't search for that query. Here is the code:
http://jsfiddle.net/enetqz54/21/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form method="get" action="search.php" class="searchform cf">
<input id="search" name="q" type="text" placeholder="Start typing a search term">
<button type="submit">Search</button>
</form>
JS:
var suggestCallBack; // global var for autocomplete jsonp
$(document).ready(function() {
$("#search").autocomplete({
source: function(request, response) {
$.getJSON("http://suggestqueries.google.com/complete/search?callback=?", {
"hl": "en", // Language
"jsonp": "suggestCallBack", // jsonp callback function name
"q": request.term, // query term
"client": "youtube" // force youtube style response, i.e. jsonp
});
suggestCallBack = function(data) {
var suggestions = [];
$.each(data[1], function(key, val) {
suggestions.push({
"value": val[0]
});
});
suggestions.length = 5; // prune suggestions list to only 5 items
response(suggestions);
};
},
});
});
CSS
*,*:after,*:before {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
body {
background: #3aaae8;
color: #fff;
font:12px/18px 'HelveticaNeue', Helvetica, Arial, sans-serif;
}
a,a:visited { color:#fff }
/*--------------------------------------------------------------
2.0 - SEARCH FORM
--------------------------------------------------------------*/ .searchform { background:#f4f4f4;
background:rgba(244,244,244,.79); border: 1px solid #d3d3d3;
left: 50%; padding: 2px 5px; position: absolute;
margin: -22px 0 0 -170px;
top: 50%; width:339px; box-shadow:0 4px 9px rgba(0,0,0,.37); -moz-box-shadow:0 4px 9px rgba(0,0,0,.37); -webkit-box-shadow:0 4px 9px rgba(0,0,0,.37); border-radius: 10px; -moz-border-radius:
10px; -webkit-border-radius: 10px }
.searchform input, .searchform button {
float: left } .searchform input {
background:#fefefe;
border: none;
font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
margin-right: 5px;
padding: 10px;
width: 216px;
box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75); border-radius: 9px; -moz-border-radius:
9px; -webkit-border-radius: 9px }
.searchform input:focus {
outline: none;
box-shadow:0 0 4px #0d76be inset;
-moz-box-shadow:0 0 4px #0d76be inset;
-webkit-box-shadow:0 0 4px #0d76be inset;
}
.searchform input::-webkit-input-placeholder {
font-style: italic;
line-height: 15px
}
.searchform input:-moz-placeholder {
font-style: italic;
line-height: 15px
}
.searchform button {
background: rgb(52,173,236);
background: -moz-linear-gradient(top, rgba(52,173,236,1) 0%, rgba(38,145,220,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,173,236,1)),
color-stop(100%,rgba(38,145,220,1)));
background: -webkit-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
background: -o-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
background: -ms-linear-gradient(top, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
background: linear-gradient(to bottom, rgba(52,173,236,1) 0%,rgba(38,145,220,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34adec', endColorstr='#2691dc',GradientType=0 );
border: none;
color:#fff;
cursor: pointer;
font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
padding: 10px;
width:106px;
box-shadow: 0 0 2px #2692dd inset;
-moz-box-shadow: 0 0 2px #2692dd inset;
-webkit-box-shadow: 0 0 2px #2692dd inset; border-radius: 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; }
.searchform button:hover {
opacity:.9;
}
jQuery's autocomplete, which apparently you are using, has a select event.
This event gets triggered when an item get selected. Since the value already gets populated into the input field, the only thing you have to do is submit.
$("#search").autocomplete({
// irrelevant code omitted
select: function(event, ui){
$(this).parent('form').trigger('submit');
}
});
See also this updated jsFiddle
Sorry.... what i was trying to say is that you can create your own autosuggest script.
1: Ist you need to create a dictionary.This would be an array of some kind.
2: Now you need to have two elements for the job a text-input (INP) and a list to show suggestion (LIST).
In HTML it'd be like this:
<input type="text" id="INP"/>
<ul id="LIST">
</ul>
3:Now you need to create certain scripts:
a) To find the value inside input box.
example , in jQuery
$('#INP').val();
-this has to be executed each time the key is pressed you can use $().keyup..
b) Now you have to define a method to find the items inside the array that match with the value.(use indexOf() function in javascript)
JAVASCRIPT
var i =0;
var SUGG="";
while(i<array.length){
if(array[i].indexOf($('#INP').val().toString()!=-1){
SUGG+="<li><a class='sugg'>"+array[i]+"</a></li>"
}
}
$('#LIST').html(SUGG);
b) a method to autofill the input when the suggestion is clicked.
SCRIPT
$('.sugg').click(function(e){
$('#INP').val($(this).text());
$('#LIST').html("");
});
That's all.
I have completed and created a simple autosuggest script...
you can find it on github..
[https://github.com/ArjunAtlast/a2suggest][1]
I would like to extend the border-bottom line longer than ever as the image below:
If this is impossible and you have any suggestion to make a change into my code, that would be great.
HTML:
<table id="showRoom">
<tr class="box_shadow">
<td class="text_plant_address"> <span class="text_plant">Plant 1</span>
<br /> <span class="text_address">Street 2, Dong An Industrial Park</span>
</td>
</tr>
CSS:
body {
background-color: #F6F6F6;
}
#showRoom {
margin-left: 10px;
margin-top: 10px;
width: auto;
border-collapse: collapse;
}
table .box_shadow {
background-color: #FFF;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
display: block;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
table tr .text_plant_address {
background-color: #FFF;
width: 175px;
height: 175px;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
margin: 0;
padding: 0;
}
table tr td span {
height: 87.5px;
width: auto;
}
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
}
table tr td .text_address {
font-size: 10px;
}
Here is my JSFIDDLE: http://jsfiddle.net/QTNr5/
2.Does anyone know the name of the font below?
Just add Padding
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
padding: 0 20px; /* or how longer you want */
}
Fiddle
For the font -
1) If you have a just image file than just keep on trying random fonts the only this is solution i guess.
2) If its on some web page inspect it via firebug or any other code inspection tool.
3) If its psd or vector open it in its respective tool and try editing the font software will tell you the name like Photoshop etc.
4) Try this http://www.myfonts.com/WhatTheFont/ for getting font name from a JPG image.
I hope any of these will help you.
You can move the border bottom from the text_plant and make it a border top on text_address like so: http://jsfiddle.net/QTNr5/2/
table tr td .text_plant {
}
table tr td .text_address {
font-size: 10px;
border-top: 1px solid #D0D0D0;
padding-top: 4px;
}
Or if you want it shorter you can add padding let and right to your text_plant like this: http://jsfiddle.net/QTNr5/4/
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
padding:0 20px;
}
if you want your solution in any how..
then i will recommend this..
Use 3 before plant 1 and 3 after that..
like this
<td class="text_plant_address"> <span class="text_plant"> Plant 1 </span>
i know its not best answer but hope it will help and you can increase according to u
You could change your spans to divs and remove the br. Divs will display as blocks by default, so they take up the full width of the td. I modified your fiddle to show the divs. If you don't want it to touch the edges of the box, add padding to your td.
http://jsfiddle.net/mrNXW/
<td>
<div class="plant">Plant 1</div>
<div class="address">Street 2, Dong An Industrial Park</div>
</td>
The font you're looking for I believe is this:
http://www.dafont.com/ballpark-weiner.font
<edit> question misunderstood, answer gives a bottom border that is red, white and red again :) red on the outer parts .... </edit>
You can use pseudo element to draw the red part :
http://codepen.io/anon/pen/axvgl/
td {
text-align:center;
}
.text_plant {
font-size:2em;
border-bottom:solid white;
box-shadow:
0 1px 0 gray,
inset 0 -1px 0 lightgray;
}
.text_plant:before,
.text_plant:after {
content:'';
display:inline-block;
width:1.25em;
box-shadow:inherit;
border-bottom:solid red;
margin-bottom:-3px;/* size of border*/
vertical-align:bottom;
}
Or use gradient http://codepen.io/anon/pen/ftmDn/
td {
text-align:center;
}
.text_plant {
display:inline-block;
font-size:2em;
padding:0 1em;
box-shadow:
0 1px 0 gray;
background:linear-gradient(to left, red 20%,white 20%,white 80%,red 80%) bottom no-repeat, linear-gradient(gray,gray) no-repeat bottom;
background-size:100% 3px, 100% 4px ;
}
Sure, try adding: padding: 10px 0 to the <span>.
Similar to a previous question but I gave up on that an decided to come back to it later, now things are different as I'm using jQuery. I'm having a dropzone on my site and for image files I would like there to be a border shadow, but for files I don't want one. Multiple files can be dropped and the previews display inline, so say if 2 images and one file were dropped, I would want the shadow on both the images, but not the file preview box. I made 2 CSS classes, identical except for the shadow:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
.dz-preview-noshadow {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
Simplest way to go seemed to be with jQuery and I was using it in the project anyway, so I made this (.dz preview is the default class):
mydropzone.on("addedfile", function(file) {
if (!file.type.match(/image.*/)) {
$('.dz-preview').addClass('dz-preview-noshadow').removeClass('dz-preview');
mydropzone.emit("thumbnail", file, "http://i.local.dev:5000/jLNutaV.png")
}
});
It works initially-but goes wrong. I drop 2 images and they get their shadowed border just fine, but when I drop a file, it loses its shadow, which is what I wanted - but so do the two images that were dropped before it. If I drop another image it will get its shadow again, but the previous elements don't change. I know I'm missing something really stupid here about the scope of how JS is affecting these classes, but is there a way to change the class for JUST that instance, without muddling up everything before it, or do I need to run more checks and manually add the class back on?
Can't post codes in comments, so I'll make it an answer.
Since .dz-preview and .dz-preview-noshadow shares a lot of same codes, you can have a class that just holds the shadow. For eg:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
.shadow {
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
So instead of adding and remove, you can just do a remove.