I would like to increase jQuery mobile slider's handle clickable area. As of now, the handle's clickable area is small. so, I am unable to tap and change the range of the handle everytime. I want to have the handle size to be the same but increase the clickable area. My custom CSS is as follows.
.ui-slider-track .ui-btn.ui-slider-handle {
width: 12px;
height: 12px;
margin: -10px 0 0 -10px;
background-color:#0096E2;
padding: 5px;
border-color: #0096E2;
}
div {
position: relative;
width: 100px;
height: 100px;
border: 1px dashed #eee;
cursor: pointer;
transition: background-color 1.5s;
}
div::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: rgb(188,20,20);
border-radius: 2px;
}
div:hover {
background-color: #FFFFDF;
}
<div></div>
Related
I need a div where a background image will be set but there should be a button on bottom of image (content of same div).
When this button will be click then background image should be rotate not Button.
Is this possible using JavaScript Only?
this is code sample
function rotate() {
document.getElementById("img_container").style.transform = "rotate(45deg)";
}
.container {
position: relative;
height: 400px;
max-width: 400px;
background: url("https://www.w3schools.com/howto/img_snow.jpg");
}
.container .btn {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
<div class="container" id="img_container">
<button class="btn" onClick="rotate()">Button</button>
</div>
Wouldn't this work for you? Create the container where you would have a div with the background image and the rotate button. And then only rotate the div with the image.
function rotate() {
document.getElementById("img_container").style.transform = "rotate(45deg)";
}
.container {
position: relative;
height: 400px;
max-width: 400px;
}
#img_container {
background: url("https://www.w3schools.com/howto/img_snow.jpg");
width: 100%;
height:100%;
}
.container .btn {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
<div class="container">
<div id="img_container"></div>
<button class="btn" onClick="rotate()">Button</button>
</div>
Try keeping the button div outside the container div. Since you have kept "btn" inside "container", the button is inheriting all the css of container. Keep the button independent.
div {
background-color: #ccc;
width: 100%;
color: #ffffff;
}
div > div {
background-color: #000;
width: 80%;
margin: auto;
}
h1::before {
content: '';
display:block;
height: 30px; /*height of icon */
width: 30px; /*width of icon */
border-radius: 15px;
color: #fff;
position: absolute;
left: 5%;
margin-top: 30px;
/*background */
background: #ffffff no-repeat 0px 0px;
}
<div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>
The example code above is using a inside another . The actual code uses a layout that is inside another container. So the dot and line elements in the screenshot are outside that container.
The dot is currently displayed with a pseudo-element. I can display the circle but I would like to create the line on the left of it as well. The left-end of the line needs to be stretched to the left edge of the browser.
Thanks
You can solve this by adding an :after pseudo-element to your H1 element and apply some styles to it.
I've created a code example that might help you out. It also centers the dot and line vertically if the header is being displayed with multiple lines:
div {
background-color: #ccc;
width: 100%;
color: #ffffff;
}
div>div {
background-color: #000;
width: 80%;
margin: auto;
}
h1 {
position: relative;
}
h1::before {
content: '';
display: block;
height: 30px;
width: 30px;
border-radius: 15px;
color: #fff;
position: absolute;
left: -5%;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background: #ffffff no-repeat 0px 0px;
}
h1::after {
content: '';
display: block;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: -105%;
border: 1px solid blue;
width: 100%;
}
<div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>
div {
background-color: #ccc;
width: 100%;
color: #ffffff;
}
div > div {
background-color: #000;
width: 80%;
margin: auto;
}
h1::before {
content: '';
display:block;
height: 30px; /*height of icon */
width: 30px; /*width of icon */
border-radius: 15px;
color: #fff;
position: absolute;
left: 5%;
margin-top: 30px;
/*background */
background: #ffffff no-repeat 0px 0px;
}
h1::after {
content: '';
display: block;
height: 6px;
width: 41px;
border-radius: 15px;
color: red;
position: absolute;
left: 0%;
margin-top: 30px;
background: #ffffff no-repeat 0px 0px;
top: 35px;
}
<div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>
I'm trying to get better at JS and CSS, so I'm making a fake iPhone and am trying the simulate the look of when a text bubble pops on and off screen.
This is what it looks like so far, and this is the HTML for the phone itself:
<div id="iPhone">
<div id="screen"></div>
<div id="me" class="bubble"></div>
<div id="homeButton" class="circle"></div>
</div>
As well as the style sheet:
#iPhone {
position: fixed;
width: 250px;
height: 500px;
background-color: black;
border-radius: 25px;
top: 50%;
right: 30%;
transform: translate(-50%, -50%);
-webkit-filter: blur(3px);
box-shadow: 0 0 40px 20px white;
border: solid 2px white;
}
#me {
background-color: #1D62F0;
margin-top: 130%;
margin-left: 25%;
}
#me::after{
content: "";
position: absolute;
right: 0em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #1D62F0;
border-bottom-left-radius: 1em 0.5em;
}
#screen {
position: fixed;
width: 241px;
height: 370px;
background-color: white;
border-radius: 0px;
top: 8%;
left: 1%;
-webkit-filter: blur(3px);
border: solid 2px black;
}
Right now, there's no JS governing it. How do I make it naturally slide onto the "screen" div and then disappear off the top, just like a real text message?
Thanks!
You need to put the overflow: hidden property on the message container div, then simply push new message boxes beneath the already existing ones, so they disappear eventually.
I have created a custom checkbox, all works fine. I would like to know if there's an option to style\manipulate the content or background attribute. I used a custom tick sign but it sits too much at the bottom, how can I raise it several pixels up?
Desired result:
JSfiddle
HTML:
<input type='checkbox' value='valuable4' id="valuable4"/>
<label for="valuable4">
<span></span>
</label>
CSS:
input[type=checkbox] {
visibility: hidden;
}
label span
{
height: 25px;
width: 25px;
position: absolute;
left: 107px;
cursor: pointer;
border: 1px solid lightblue;
}
input[type=checkbox]:checked + label span
{
content: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
height: 25px;
width: 25px;
cursor: pointer;
border: 1px solid red;
}
Now this should be exactly what you are looking for. You can safely omit the <span>, it is not needed.
input[type=checkbox] {
display: none;
}
label {
height: 25px;
width: 25px;
position: absolute;
display: block;
left: 107px;
cursor: pointer;
border: 1px solid lightblue;
}
input[type=checkbox]:checked + label {
border: 1px solid red;
}
input[type=checkbox] + label:after {
background: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
background-size: cover;
content:" ";
display: block;
opacity: 0;
height: 30px;
transition-duration: 0.2s;
width: 30px;
position: relative;
right: -4px;
top: -8px;
}
input[type=checkbox]:checked + label:after {
opacity: 1;
}
http://jsfiddle.net/39qkjs6k/5/
What's happening here? Basically, you create a pseudo element (which is available on most html elements) :after which you apply the background to (this replaces the <span> you used before). You position it relatively inside its parent <label> right: -4px; top: -8px;. With the checkbox unchecked, it has opacity: 0;, so it's fully transparent, making it invisible. Next to a :checked checkbox, it gets opacity: 1;, making it fully visible. The transition-duration: 0.2s; makes sure that all changes in transitionable properties is being done in a smooth animation rather than just abruptly changing.
I think you need this as a pseudo-element and the label.
You can use the label as the base state of the 'checkbox` and then apply a pseudo-element on top of the label using absolute positioning.
The pseudo-element can be moved into the right position by using the top/left values as required
label {
height: 25px;
width: 25px;
left: 107px;
cursor: pointer;
border: 1px solid lightblue;
position: relative;
display: inline-block;
}
input[type=checkbox]:checked + label::before {
position: absolute;
content:'';
background: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
background-size: contain;
width: 100%;
height: 100%;
top:-8px;
left:8px
}
input[type=checkbox] {
visibility: hidden;
}
label {
height: 25px;
width: 25px;
left: 107px;
cursor: pointer;
border: 1px solid lightblue;
position: relative;
display: inline-block;
}
input[type=checkbox]:checked + label {
border-color: Red;
}
input[type=checkbox]:checked + label::before {
position: absolute;
content: '';
background: url("https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png") no-repeat;
background-size: contain;
width: 100%;
height: 100%;
top: -8px;
left: 8px
}
<input type='checkbox' value='valuable4' id="valuable4" />
<label for="valuable4">
</label>
I have been created simple menu with single button from this link http://codepen.io/MrBambule/pen/jIseg
Now i want to reduce the size of the button,
So that i changed the code like this,
.button {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}
.line {
background: #ccc;
width: 43px;
height: 7px;
margin: 5px auto;
}
.line__first {
margin-top: 9px;
}
index.js:
// function to trigger animation
$('.button').click(function() {
// check if the menu-items are hidden behind the button
if ($('.menu__list').hasClass('hidden')) {
// add class to make the menu-items drop down
$('.item1').addClass('list--animation');
// the following items trigger the animation after a certain delay
$('.item2').addClass('list--animation--delay1');
$('.item3').addClass('list--animation--delay2');
// remove the hidden class from the ul container to show that the items are not hidden anymore
$('.menu__list').removeClass('hidden');
}
else {
// remove class to make the menu-items disappear
$('.item1').removeClass('list--animation');
$('.item2').removeClass('list--animation--delay1');
$('.item3').removeClass('list--animation--delay2');
// add the hidden class to the ul container to show that the items are now hidden again
$('.menu__list').addClass('hidden');
}
});
So the button size reduced, but when i click the button, it shows the lists are not properly.
Can anybody help me, how to solve this one, thanks in advance.
Change your CSS as below.
Workin JSFIDDLE Here
CSS
.button {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}
.line {
background: #ccc;
width: 15px;
height: 5px;
margin: 2px auto;
}
.line__first {
margin-top: 15px;
}
.menu {
z-index: 1;
float: left;
width: 100%;
}
.menu__list {
width: 100%;
margin-left:-110px;
margin-top:-10px;
}
/* Animation keyframes for the drop down */
#keyframes drop {
from {
top: 0px;
}
70% {
top: 85px;
animation-timing-function: ease-in;
}
to {
top: 70px;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes drop {
from {
top: 0px;
}
70% {
top: 85px;
-webkit-animation-timing-function: ease-in;
}
to {
top: 70px;
-webkit-animation-timing-function: ease-out;
}
}
li {
position: relative;
list-style: none;
padding-bottom: 0px;
top: 0px;
}
li a {
text-decoration: none;
color: grey;
text-align: center;
font-size: 0.7em;
font-family: 'Open Sans', sans-serif;
}
Working Demo Here
Update 1 : See the Updated Link here
Update 2: Working Demo with large font
.button {
margin: auto; //try this.
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}