I'm making mock up site to learn. But my css on Buttons don't work, I can put any css and their appearance doesn't change.
HTML:
<div id="bottom">
<form method="get">
<button class="sButtons" type="submit" name="gSearch">Google Search</button>
<button class="sButtons" type="submit" name="gLucky">I'm Feeling Lucky!</button>
</div>
And the CSS
#sButtons{
overflow: visible;
padding: 0 7px;
width: 100px;
color: #ffffff;
background-color:black;
}
(I just put very random values into it just to see if there's a difference)
here's a link to the rest of my code https://gist.github.com/Bitvala/4c0600c03c3a215fd023
In CSS the Class selector is defined with a dot like so:
.Divclass{
position:absolute;
}
And the ID Selector is used with a #, like so:
#DivID{
position:absolute;
}
What you want to do is:
.sButtons{
overflow: visible;
padding: 0 7px;
width: 100px;
color: #ffffff;
background-color:black;
}
change #sButtons to .sButtons
or class to id
Related
I was looking for a way to display the value of an
<input type="submit">
on 2 lines, so potentially add a line break in it, but i tried multiple stuff such as :
<br>
\r\n
\n
The result should be like this (On the right side of the picture) :
Nothing works. Anyone got a clue on this ?
Add this to your css:
A white-space property will allow to have input in multiple lines
input[type="submit"] {
white-space: normal;
width: 150px;
float:right;
text-align: right;
}
<input type="submit" value="J'essaie gratuitement 30 jours" />
Two other methods are
<button type="submit">Multiple line<br/>input</button>
and
using
carriage return in between the input value as:
<input type="button" value="Multiple line
input" style="text-align:center;">
The last method however doesn't work in IE10
Use button instead of input:
.right-aligned {
text-align: right;
}
<button type="submit" class="right-aligned">Text <br /> broken </button>
Buttons can accept a variety of other tags inside, such as <br />, <span>.
Then, you can style it with CSS however you wish (see the CSS class and rules in the code snippet).
I think you try this in HTML:
Just as example help for you:
<input type="button" value="Really
Tall
Button">
This is working for me:
div.full {
width:500px;
background-color:grey;
}
div.left {
float:left;
width:60%
}
button {
width:40%;
text-align:right;
cursor:pointer;
}
div.underline {
width:100%;
}
<div class='full'>
<div class='left'>
there is a part of text
</div>
<button>J'essaie gratuitement
<div class='underline'>30 jours</div>
</button>
</div>
I just added some CSS to keep the size of the button. and line breaks are not a very good practice. You'd better do it with css.
Alternatively, use a standard <a> or <span> tag.
var submits = document.getElementsByClassName('submit');
for (var i = 0; i < submits.length; i++) {
submits[i].addEventListener('click', function() {
alert('submit!');
document.getElementById('form_to_submit').submit();
});
}
.submit {
text-decoration: inherit;
color: inherit;
display: inline-block;
border: 1px solid #222;
border-radius: 2px;
padding: 2px 4px;
background: #eee;
cursor:pointer;
text-align:right;
}
<p>J'essaie gratuitement<br>30 jours</p>
<p><span class="submit">J'essaie gratuitement<br>30 jours</span></p>
Hello I really need your help. I have been googling around for how to make a tweet box like twitter's "What's happening" box for user to post new content using bootstrap 3 but so far I cannot find anything close.
Anyone have any idea or keyword that could help? Thank you very much!
You may find a lot of plugins to do the same . But If you want do it your own follow the below steps (this contain only basic functionality)
Define a span or div like below
<div class="container">
<div id="mockTextBox">
What's Happening ?
</div></br>
<textarea id="originalTextBox" class="form-control">
</textarea>
</div>
Hide the textarea at first and show the span/div as textbox.
Then define the events
$(document).ready(function(){
$('#originalTextBox').hide()
$('#mockTextBox').click(function(){
$('#mockTextBox').hide()
$('#originalTextBox').show()
})
})
Apply CSS accordingly and you got what you want.
#mockTextBox
{
width:300px;
height:50px;
border:1px solid;
}
#originalTextBox
{
width:300px;
height:50px;
resize:none;
}
Check this sample http://codepen.io/Midhun052/pen/mVByzK
I have add the bootstrap class to text area in the codepen above for that nice look.
Just updated
A few more CSS and Images
$(document).ready(function() {
$('#originalTextBox').hide()
$('#mockTextBox').click(function() {
$('#mockTextBox').hide()
$('#originalTextBox').show()
})
})
#mockTextBox
{
width:300px;
height:50px;
border:1px solid;
display:inline-block;
margin-top:10px;
border: 1px solid #337ab7;
}
#txt
{
border:1px solid;
display:inline;
height:20px;
}
#originalTextBox
{
width: 310px;
height: 100px;
resize: none;
border: 1px solid #337ab7;
background-color: #337ab7;
margin: 10px;
}
#originalTextBox textarea
{
resize:none;
margin:5px;
width:300px;
}
.class2
{
float: right;
margin-top: 12px;
margin-right: 2px;
}
.imgF1
{
width:20px;
height:20px;
margin:5px
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
<div id="mockTextBox">
<img src="http://lorempixel.com/46/46"/>
<div id="txt">What's Happening ?</div>
<img class="class2" src="http://lorempixel.com/16/16"/>
</div>
<div id="originalTextBox">
<textarea class="form-control">
</textarea>
<img class="imgF1" src="http://lorempixel.com/46/46">Post your photo</img>
</div>
</div>
It's simple jQuery application.
Check this out.
Here's a JSFiddle.
Then all you gotta do is initiate the jQuery.
Such as:
$('textarea').autogrow({onInitialize: true});
Check fiddle for more info.
Cheers!
UPDATED ANSWER:
Use CSS to style your textarea, no need for javascrcipt styling here. Prepare your style in CSS under a specific class and when you need to, you can add your element this class and its propeties. This is much cleaner solution. Use focus and blur events to get textarea element. Here is example.
HTML
<textarea rows="4" cols="50" id="txtArea">
<textarea>
JS
$(document).ready(function() {
$('#txtArea').on("focus", function(event) {
if(!$('#txtArea').hasClass('customTextAreaClass')){
$('#txtArea').addClass('customTextAreaClass');
}
});
$('#txtArea').on("blur", function(event) {
if($('#txtArea').hasClass('customTextAreaClass')){
$('#txtArea').removeClass('customTextAreaClass');
}
});
});
CSS
.customTextAreaClass{
background-color: #fff;
width: 565px;
color: #000;
height: 120px;
padding-left: 1px;
padding-top: 1px;
font-family: "Tahoma", Geneva, sans-serif;
font-size: 10pt;
border: groove 1px #e5eaf1;
position: inherit;
text-decoration: none;
}
I'm not having any joy with this so any help would be much appreciated. The basic problem is when I click on Login it presents me with an input box for username but I can't get the focus on the box to enter anything. If I change the css from position:absolute to relative it works but mucks up the layout. Similarly if I remove the code for the About tab it works. I guess there might be something going on with layering as the dropdown for each tab occupies the same space but it defeats me so far. I'm working in Chrome and IE11. It's a personal project so not bothered about other browser compatibility.
Here is the code:
<body>
<style>
.panel div {
opacity:0;
width: 100%;
position:absolute;
top: 34px;
}
.panel .tab-link {
float: left;
width: 20%;
padding: 7px;
background:#ddd;
margin-right: .5%;
text-align: center;
}
.anchor:target + .panel div {opacity: 1;background: #ccc;}
.anchor:target + .panel .tab-link {opacity:1;background: #ccc;}
</style>
<span class="anchor" id="login"></span>
<div class="panel">
<a class="tab-link" href="#login">Login</a>
<div>
<div>
<input name="test" type="text" placeholder="Username or email" value="" autofocus>
</div><br><br><br>
</div>
</div>
<span class="anchor" id="about"></span>
<div class="panel">
<a class="tab-link" href="#about">About</a>
<div><h2>Hello World</h2></div>
</div>
</body>
Alternatively I have a jsfiddle for you.
http://jsfiddle.net/PCaAC/
You need to add z-index:2; to your input in CSS.
As Beardminator stated. A z-index is sufficient. However, I wouldn't use 2. If you skip a number of precedence in a z-index you will leave gaps in your layering. use 1. Just in case you need to layer something else, then you can use 2 and so forth.
.panel .tab-link {
float: left;
width: 20%;
padding: 7px;
background:#ddd;
margin-right: .5%;
text-align: center;
z-index:1;
}
Also, I changed you html a little for a more solid markup. You had an extra div set that wasn't needed
check the fiddle
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg
I have CSS that changes formatting when you hover over an element.
.test:hover { border: 1px solid red; }
<div class="test">blah</div>
In some cases, I don't want to apply CSS on hover. One way would be to just remove the CSS class from the div using jQuery, but that would break other things since I am also using that class to format its child elements.
Is there a way to remove 'hover' css styling from an element?
One method to do this is to add:
pointer-events: none;
to the element, you want to disable hover on.
(Note: this also disables javascript events on that element too, click events will actually fall through to the element behind ).
Browser Support ( 98.12% as of Jan 1, 2021 )
This seems to be much cleaner
/**
* This allows you to disable hover events for any elements
*/
.disabled {
pointer-events: none; /* <----------- */
opacity: 0.2;
}
.button {
border-radius: 30px;
padding: 10px 15px;
border: 2px solid #000;
color: #FFF;
background: #2D2D2D;
text-shadow: 1px 1px 0px #000;
cursor: pointer;
display: inline-block;
margin: 10px;
}
.button-red:hover {
background: red;
}
.button-green:hover {
background:green;
}
<div class="button button-red">I'm a red button hover over me</div>
<br />
<div class="button button-green">I'm a green button hover over me</div>
<br />
<div class="button button-red disabled">I'm a disabled red button</div>
<br />
<div class="button button-green disabled">I'm a disabled green button</div>
Use the :not pseudo-class to exclude the classes you don't want the hover to apply to:
FIDDLE
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>
.test:not(.nohover):hover {
border: 1px solid red;
}
This does what you want in one css rule!
I would use two classes. Keep your test class and add a second class called testhover which you only add to those you want to hover - alongside the test class. This isn't directly what you asked but without more context it feels like the best solution and is possibly the cleanest and simplest way of doing it.
Example:
.test { border: 0px; }
.testhover:hover { border: 1px solid red; }
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>
add a new .css class:
#test.nohover:hover { border: 0 }
and
<div id="test" class="nohover">blah</div>
The more "specific" css rule wins, so this border:0 version will override the generic one specified elsewhere.
I also had this problem, my solution was to have an element above the element i dont want a hover effect on:
.no-hover {
position: relative;
opacity: 0.65 !important;
display: inline-block;
}
.no-hover::before {
content: '';
background-color: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 60;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">hover</button>
<span class="no-hover">
<button class="btn btn-primary ">no hover</button>
</span>
You want to keep the selector, so adding/removing it won't work. Instead of writing a hard and fast CSS selectors (or two), perhaps you can just use the original selector to apply new CSS rule to that element based on some criterion:
$(".test").hover(
if(some evaluation) {
$(this).css('border':0);
}
);