In my design I have a div with 0 height (its height will be increased via some JS code on some anchor click) and a textbox. The HTML is:
<div class="container">
<textarea class="foo-textarea"></textarea>
<div class="foo">
<ul>
<li>Test1</li>
<li>Test1</li>
...
</ul>
</div>
</div>
and the following CSS:
.foo { -webkit-box-shadow: rgb(116, 117, 117) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.74902) 0px 24px 30px 0px; -webkit-transition-delay: 0s; -webkit-transition-duration: 0.3499999940395355s; -webkit-transition-property: height; -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); box-shadow: rgb(116, 117, 117) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.74902) 0px 24px 30px 0px; color: rgb(85, 85, 85); display: block; font-family: 'lucida grande' , tahoma, verdana, arial, sans-serif; font-size: 11px; height: 0px; left: 20px; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 0px; top: 0px; width: 642px; z-index: 99; cursor: pointer; }
.foo-textarea { -webkit-appearance: none; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-border-image: none; -webkit-box-orient: vertical; -webkit-box-shadow: rgba(0, 0, 0, 0.0352941) 0px 0px 0px 0px inset; -webkit-rtl-ordering: logical; -webkit-transition-delay: 0s, 0s; -webkit-transition-duration: 0.20000000298023224s, 0.20000000298023224s; -webkit-transition-property: border, box-shadow; -webkit-transition-timing-function: linear, linear; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-color: rgb(223, 223, 223); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(223, 223, 223); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(223, 223, 223); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(223, 223, 223); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; box-shadow: rgba(0, 0, 0, 0.0352941) 0px 0px 0px 0px inset; box-sizing: border-box; color: rgb(85, 85, 85); cursor: auto; display: block; font-family: 'Helvetica Neue' , Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; height: 140px; letter-spacing: normal; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 10px; margin-top: 0px; min-height: 20px; outline-color: rgb(85, 85, 85); outline-style: none; outline-width: 0px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 9px; padding-left: 9px; padding-right: 9px; padding-top: 9px; position: relative; resize: none; text-align: start; text-indent: 0px; text-shadow: none; text-transform: none; vertical-align: middle; white-space: pre-wrap; width: 642px; word-spacing: 0px; word-wrap: break-word; writing-mode: lr-tb; }
The live JS Fiddle for the above code is http://jsfiddle.net/VHsKc/1/.
My issue is that when I hover the textbox I am seeing hand cursor over it. It can be because of "cursor:pointer" style applied on div having "foo" class and at this moment it is behind the textbox with absolute positioning (position: absolute;left: 0px; top: 0px;). But it is having 0 height at this moment then why it is showing hand cursor? Can this be fixed? I don't want the "foo" div classes getting applied when I am hovering the textbox.
The way I would do it is set .foo to display: none;. In your jQuery, since I assume you want to animate the height element, set the css display to block first, then do your animation.
TRIGGER
$('.foo').css('display','block');
$('.foo').animate(YOUR ANIMATION);
Set the z-index on .foo to -1. In the click() handler that increases its height, change .foo's z-index property back to 99.
Set the LI items to height 0 and overflow hidden.
http://jsfiddle.net/VHsKc/4/
.foo li {
height: 0;
overflow: hidden;
}
you might need to set the height to auto for the LIs later depending on needs
Related
I created a flask application using a template that I found online. I am not well-versed with html or css. After calling the application, I realized that the background of the web page has a red-to-blue gradient that I would like to change to a regular dark blue color. Could you please let me know where in my code I can do this. The code is pasted below. Thanks in advance.
I tried changing background-image to none and background to #e6e6e6 (which represents the blue that I want) in multiple places, but it still did not work
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #00008B; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow:scroll; }
body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
background-image: none;
background-color: #e6e6e6;
color: #fff;
font-size: 18px;
text-align:center;
letter-spacing:1.2px;
}
.login {
position: absolute;
top: 40%;
left: 50%;
margin: -150px 0 0 -150px;
width:400px;
height:450px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input {
width: 100%;
margin-bottom: 15px;
background-image:none;
background: #e6e6e6;
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
You can try adding !important to override the background from the template. it would look something like this
background-image:none !important;
background-color: #e6e6e6 !important;
I am just getting started with Stripe's Element Quickstart. I have the following fiddle. As you can see, it looks nothing like the example. I've even loaded their https://js.stripe.com/v3/ file but have no idea what I'm missing:
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
The page that the example is on here defines styles for the form, button, label, etc. You can find this css if you open up the console on their example site and search for this style tag <style media="screen"> embedded in the html. Add the css to your fiddle and it will look like their example.
body, html {
height: 100%;
background-color: #f7f8f9;
color: #6b7c93;
}
*, label {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
font-variant: normal;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}
button {
border: none;
border-radius: 4px;
outline: none;
text-decoration: none;
color: #fff;
background: #32325d;
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
border-radius: 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.025em;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
float: left;
margin-left: 12px;
margin-top: 28px;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
background-color: #43458b;
}
form {
padding: 30px;
height: 120px;
}
label {
font-weight: 500;
font-size: 14px;
display: block;
margin-bottom: 8px;
}
#card-errors {
height: 20px;
padding: 4px 0;
color: #fa755a;
}
.form-row {
width: 70%;
float: left;
}
.token {
color: #32325d;
font-family: 'Source Code Pro', monospace;
font-weight: 500;
}
.wrapper {
width: 670px;
margin: 0 auto;
height: 100%;
}
#stripe-token-handler {
position: absolute;
top: 0;
left: 25%;
right: 25%;
padding: 20px 30px;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
0 15px 35px rgba(50, 50, 93, 0.15),
0 5px 15px rgba(0, 0, 0, 0.1);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
transform: translateY(0);
opacity: 1;
background-color: white;
}
#stripe-token-handler.is-hidden {
opacity: 0;
transform: translateY(-80px);
}
/**
* The CSS shown here will not be introduced in the Quickstart guide, but shows
* how you can use CSS to style your Element's container.
*/
.StripeElement {
background-color: white;
height: 40px;
padding: 10px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
I'm using ajax and jquery UI to search and select in the input field. How can I style the drop down thing to not to show me <ul> bullets and also have a white background? I have been trying to target the search field using ID but it changes the input box and not the drop down box. I'm attaching the screenshot here.
A css solution
change the list style type on you li tags to none. and add a white background to your ul tag
li {
list-style-type: none
}
ul {
background: white;
}
<ul>
<li>Option</li>
</ul
If someone like me is struggling with jQuery UI stylying for Ajax calls, here is bootstrap code which I'm copy pasting from a blog and it is working perfectly for me.
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none;
}
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}
Glad to be on Stack Overflow. I'm new to JS /Jquery and can use HTML/CSS and have managed to piece together the following code.
It's for a box with an expand button that upon clicking shows / hides a slider panel under it.
It works on desktop but doesnt not work on smartphones (Tested on iPhone5 with Chrome & Safari up to date versions.
Can you please guide me as to why this is not functioning at all on the mobile?
Thanks
Vila
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<div id="card_bg">
<p class="hero_text">We love design</p>
<p class="sub_text">We love design</p>
<p class="link showSingle" id="2">EXPAND ></p>
<div class="share_sheet_2 collapse_share"></div>
</div>
#card_bg {
background-position: 50% 100%;
box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px -2px;
box-sizing: border-box;
width: auto;
height: auto;
min-width:320px;
position: relative;
text-align: left;
text-rendering: optimizelegibility;
background: rgb(255, 255, 255) linear-gradient(transparent 50%, rgb(255, 255, 255) 50%) repeat-x scroll 50% 100% / 2px 2px padding-box border-box;
border: 0px none rgba(55, 70, 72, 0.8);
border-radius: 2px 2px 2px 2px;
overflow: auto;
outline: rgba(55, 70, 72, 0.8) none 0px;
-webkit-font-smoothing: antialiased;
}
.hero_text {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
color: green;
font-weight: bold;
font-size: 55px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
margin: 0px;
letter-spacing: -2px;
-webkit-font-smoothing: antialiased;
}
.sub_text {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #535860;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
margin-top: -2px;
-webkit-font-smoothing: antialiased;
}
.link {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #535860;
font-size: 16px;
padding-left: 20px;
padding-right: 10px;
padding-top: 16px;
padding-bottom: 8px;
line-height: 0px;
margin-top: 0px;
float: left;
-webkit-font-smoothing: antialiased;
}
.link:hover {
color: green;
}
.collapse_share {
position: relative;
margin-top: 60px;
display: none;
height:54px;
background-color: green;
clear: both;
text-align: center;
-webkit-box-shadow: inset 0px 8px 9px -5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 8px 9px -5px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 8px 9px -5px rgba(0, 0, 0, 0.5)
}
.share_icons {
width: 20%;
height: 54px;
float:left;
opacity: 0.9;
}
.ico_padding {
width: 20%;
height: 25px;
float: left;
padding-top: 14px;
}
jQuery(document).ready(function () {
$(document).on("click", ".showSingle", function () {
$('.showSingle').toggleClass('hide');
var index = $(this).attr('id');
newTarget = $('.share_sheet_' + index).slideDown('fast');
$('.collapse_share').not(newTarget).slideUp('fast');
});
$(document).on("click", ".collapse_share", function () {
$('.collapse_share').slideUp('fast');
$('.showSingle').removeClass('hide');
});
$(document).on("click", ".hide", function () {
$('.collapse_share').slideUp('fast');
});
});
Fiddle
I'm trying to style the sections inside the AutoComplete, but I don't know what to put in the CSS for the sections. I'm specifically trying to make:
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
Any suggestions???
Are you looking for this selector?:
.ui-menu .ui-menu-item a{
background:red;
height:10px;
font-size:8px;
}
Ugly demo:
http://jsfiddle.net/zeSTc/
Just replace with your code:
.ui-menu .ui-menu-item a{
color: #96f226;
border-radius: 0px;
border: 1px solid #454545;
}
demo: http://jsfiddle.net/w5Dt2/
Bootstrap styling for jQuery UI Autocomplete
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
padding: 4px 0;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border-color: #ccc;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #555555;
white-space: nowrap;
text-decoration: none;
}
.ui-state-hover, .ui-state-active {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
background-image: none;
}
Based on #md-nazrul-islam reply, This is what I did with SCSS:
ul.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
margin: 0 0 10px 25px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, 0.2);
//#include border-radius(5px);
#include box-shadow( rgba(0, 0, 0, 0.1) 0 5px 10px );
#include background-clip(padding-box);
*border-right-width: 2px;
*border-bottom-width: 2px;
li.ui-menu-item{
padding:0 .5em;
line-height:2em;
font-size:.8em;
&.ui-state-focus{
background: #F7F7F7;
}
}
}
You can overwrite the classes in your own css using !important, e.g. if you want to get rid of the rounded corners.
.ui-corner-all
{
border-radius: 0px !important;
}