We Keep Coding

How to create profession box shadow effect in div using css

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

Auto complete doesn't work

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]

Sliding div onclick left/right [duplicate]

This question already exists:
How to make this into a sliding left/right div
Closed 9 years ago.
Provided below is a snippet from my html and css code, how and what would I need to add in not only html and css, but javascript as well to make this work as a slide in/out in the direction of (right to open) and (left to close) div?
I currently do not have any javascript written up for this as I do not know where to start with it...I am, however, using jquery-1.3.2
If anyone can provide a jsfiddle, I'd greatly appreciate it ;)
HTML
<div id="left">
Edit Profile
Settings
Sign Out
</div>
CSS
#left { width: 338px; border-left: 1px solid #333; float: left; }
#left a {
width: 145px;
height: 22px;
padding: 5px 12px;
margin: 0;
border-bottom: 1px solid rgba(204, 204, 204, 0.09);
float: left;
display: inline-block;
position: relative;
top: 34px;
color: #15ADFF;
font: 16px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: -1px -1px 1px #000, 2px 2px 3px rgba(110, 110, 110, 0.7);
}
#left a:hover {
width: 138px;
background: rgba(204, 204, 204, 0.4);
border-right: 7px solid #15ADFF;
color: #111;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4);
}
I'm assuming I'd need to add an id or class as either #open, #close and/or .open, .close.

You could use jQuery's animate function, should do the job easy enough.
Tutorial/Information on .animate:
http://viralpatel.net/blogs/understanding-jquery-animate-function/

There really isn't enough info here to know what you want, because the layout of the page is important. Without knowing if the menu should be absolute, fixed or relative.
You can use jQuery's animate() method to animate CSS numeric properties, and then use mouseenter and mouseleave to slide the menu.
http://jsfiddle.net/thinkingmedia/8a7GL/1/
It's only 2 lines of code.

adding a progress indicator inside a button

I have the following button:
http://jsfiddle.net/TU6vQ/
and I wanted to add a loading spinner next to the 'Invite your friends' text. How do I do so?
The spinner is here.
Is this spinner going to be a div inside a button? Or what is the easiest way to do so? I also wanted to show the spinner on a button click.
This is the simple button I have:
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>

If you make the button relatively positioned, you can absolutely position the spinner inside of the button:
http://jsfiddle.net/TU6vQ/8/
HTML:
<button id="inviteYourFriends" class="arvo-bold button blue" style='position:relative'>
<img src="http://www.gifstache.com/images/ajax_loader.gif" class='spinner'/>
Invite your friends
</button>
CSS:
.spinner {
position: absolute;
right: 5px;
top: 6px;
width: 25px;
height: 25px;
display: none;
}
JS:
$('button#inviteYourFriends').click(function() {$('.spinner').show();});

Put spinner inside of button, give it absolute positioning, and relative on the button. The button is a block level element, you don't need an additional div around it all.

I updated the jsfiddle here:
<div style='position:relative'>
<img src='http://www.gifstache.com/images/ajax_loader.gif' style='position:absolute; width:16px; margin:10px 10px; height:16px;' />
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>
</div>

The button tag can support img tags like almost any other element, and so all you need to do is put the image inside it; as simple as it sounds.
<button id="inviteYourFriends" class="arvo-bold button blue" >
<img src="http://www.gifstache.com/images/ajax_loader.gif" height=10> Invite your friends
</button>
On your button click just prepend your button contents with the image. Voila.

You can do this.
http://jsfiddle.net/YQNn4/
HTML
<img class="progress" src="http://www.gifstache.com/images/ajax_loader.gif" height="20px" width="20px" alt="">
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
</button>
JS
$(document).ready(function(){
$('.progress').hide();
$('#inviteYourFriends').click(function(){
$('.progress').show();
});
});

i would add the image inside the button element, then position and size it using css.
here is the jfiddle: http://jsfiddle.net/TU6vQ/9/
here's the code:
<button id="inviteYourFriends" class="arvo-bold button blue" >
Invite your friends
<img src="http://www.gifstache.com/images/ajax_loader.gif" alt="..." class="spinner"/>
</button>
CSS:
.button {
line-height: 52px;
font-size: 16px;
width: 270px;
height: 50px;
text-shadow: -1px -1px 1px rgba(175,175,175,.42);
text-transform: uppercase;
text-decoration: none;
text-align: center;
line-height: 38px;
color: #fefefe;
font-size: 14px;
display: block;
height: 38px;
border: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
box-shadow: 1px 2px 2px rgba(0,0,0,.1);
}
.button.blue {
background: rgb(169,191,200);
background: -moz-linear-gradient(top, rgba(169,191,200,1) 0%, rgba(169,191,200,1) 51%, rgba(143,170,182,1) 54%, rgba(143,170,182,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,191,200,1)), color-stop(51%,rgba(169,191,200,1)), color-stop(54%,rgba(143,170,182,1)), color-stop(100%,rgba(143,170,182,1)));
background: -webkit-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: -o-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: -ms-linear-gradient(top, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
background: linear-gradient(to bottom, rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
}
.spinner
{
margin-top:8px;
margin-left:5px;
height:20px;
width:20px;
position:absolute;
}

Anchor split into two pieces on IE7

Top: IE8
Bottom: IE7
How do you fix IE7 so it doesn't split my anchor into two pieces? I know display:block and float:left would solve this, but I'd rather have it be inline. This way, I can have text both to the left and right of any arbitrarily placed anchor button.
#launchChrome {
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,1);
background: #eee;
background: -moz-linear-gradient(center top, #fff, #cfd5e3);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #cfd5e3));
border: 1px solid;
border-color: #ccc #ccc #999 #ccc;
-moz-border-radius: 0.4em;
-webkit-border-radius: 0.4em;
text-shadow: 0 1px 0 rgba(255,255,255,0.7);
color: #666;
font-size: 1.4em;
padding: 0.2em 0.6em;
margin: 0 0 0 1em;
-moz-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
}
<a id="launchChrome" href="javascript:void(0)" onclick="launch()">
<img src="<?=base_url()?>images/spacer.gif" class="spriteChannel googleChromeSmall">
Launch Chrome
</a>

I used display:inline-block to fix it.

Why even use an image tag to begin with?
Use a non repeating background image and set a padding-left on the link so the text does cover the image.

First of all close your img tag <img />.
Second - try adding zoom:1 to #launchChrome - I'm not having the exact same render problem in IE7 but it fixed it's look in both IE6/7. That shoud trigger hasLayout.