How to remove right bottom-corner dots from textarea ?
There is a solution with following css resize:none but I don't want to remove resizing...
So is it possible to do ...
try these two ways:
.none::-webkit-resizer {
display: none;
}
.pic::-webkit-resizer {
background: url(http://www.zhangxinxu.com//study/image/selection.gif);
outline: 1px dotted #000;
}
<textarea class="none"></textarea>
<textarea class="pic"></textarea>
You can't remove resize handle without resize:none; property. But you can position a div on those dotted lines(resize handles). See Demo here
textarea {
position: relative;
margin: 20px 0 0 20px;
z-index: 1;
}
.wrap {
position: relative;
display: inline-block;
}
.handle-hide {
height:12px;
width:12px;
position: absolute;background:#fff;
bottom: 2px;
right: 2px;
pointer-events: none;
z-index: 2;
}
<div class="wrap">
<div class="handle-hide"></div>
<textarea placeholder="drag the cyan triangle..."></textarea>
</div>
Using jQuery this is possible, I found a jQuery UI here
With this source code you're able customize the textarea
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Textarea</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-resizable-se {
bottom: 17px;
}
</style>
<script>
$(function() {
$( "#resizable" ).resizable({
handles: "se"
});
});
</script>
</head>
<body>
<textarea id="resizable" rows="5" cols="20"></textarea>
</body>
</html>
Simply override the CSS by adding
<style>
.ui-icon, .ui-widget-content .ui-icon {
background-image: none;
}
</style>
after:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
Hello There HERE is a working example of my answer:
First is to point this is based on CSS3 resize, which is not fully supported in all browsers.
HTML
<div class="resize_this">
<textarea class="no_dots"></textarea>
</div>
ENDS HTML
CSS3
.no_dots{
resize: none;
width: 100%;
height: 100%;
border:none;
}
.resize_this{
resize:both;
overflow: hidden;
border:2px solid black;
border-radius: 5px;
/*HERE PLACE DEFAULT SIZE FOR THE TEXTAREA*/
width: 50%;
height: 250px;
}
ENDS CSS3
HOPE THIS HELPS T04435
Have you considered a masking solution?
Here's a basic example (tested only on Chrome):
textarea {
border: 1px solid #000;
box-shadow: inset .3em 0 #000,
inset -.3em 0 #000,
inset 0 .3em #000,
inset 0 -.3em #000;
padding: 10px;
}
DEMO: http://jsfiddle.net/onzqnk5v/
UPDATE (based on comments):
This answer is just a concept for consideration. The example code is meant to illustrate the concept, not serve as a final solution.
Finally, I did. You can wrap the textarea with an element(for example span) and etc. See my demo. I did not use any javascript or jquery, For tricky part I use pointer-events which is supported by most browser.
try this but its funny, involves draggin and div ,
HTML Code
<div id="d2" class="ui-widget-content" contenteditable>
I look like textarea :)
</div>
css Code
#d2{
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 300px;
height: 200px;
}
jquery Code
$(function() {
$( "#d2" ).draggable({revert: function(obj){
if (obj === true) {
// success
return false;
}
else {
// reverting
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$("#d2").css("width", $("#d2").width()+xPos);
$("#d2").css("height", $("#d2").height()+yPos );
return true;
}
}});
});
above code can do what you want but in different taste just drag to increase textarea(here div) to resize.
jsfiddle link
Related
I'm using slick-carousel on my website and have such problem. http://prntscr.com/i9ojqf
I added border bettwen slides by this code: border-right: 5px solid red;
Question is: how can i get rid of border for the very last visible slide here?
Thanks!
<div class="slider js-slider">
<img /> four images here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
$(function() {
$('.js-slider').slick({
slidesToShow: 4
});
});
</script>
body {
background-color: #ff0;
}
.slider {
width: 522px;
margin: 150px auto 0;
border: 5px solid green;
}
.slick-slide {
height: 200px;
box-sizing: border-box;
border-right: 5px solid red;
}
img {
max-width: 100%;
height: 100%}
.slick-next, .slick-prev {
position: absolute;
left: -80px;
top: 0;
}
.slick-next {
left: auto;
right: -50px;
}
.slick-slider {
div {
&:focus {
outline: 0;
}
}
}
It's working for me.
Without having access to your code, I can't give you a definitive answer, but I can give it a go.
Let's assume your slider object has the class of .slider and each of your slides has a class of .slide.
Your slider is the parent and each slide is a child of the slider. When you use the following code snippet in your CSS file, you are targeting the last child in the slide array.
In your CSS file:
.slider .slide:last-child{
border-right: none;
}
The class names on your specific slider will differ so you should change them to the actual slider and slide classes used on your end.
I hope this makes sense. I'm new to StackOverflow and trying to help.
This is the solution with Jquery:
$('.slick-active').addClass('border-right').removeClass('border-right--no');
$('.slick-active:last').addClass('border-right--no');
$( ".slick-arrow" ).click(function() {
$('.slick-active').addClass('border-right').removeClass('border-right--no');
$('.slick-active:last').addClass('border-right--no');
});
<style>
.border-right {
border-right: 1px solid #000;
}
.border-right--no {
border-right: 0;
}
</style>
To remove border from the last image, you can use :last-child selector.
.slick-slide:last-child {
border-right: 0;
}
Demo: https://jsfiddle.net/g04jrd3n/
I want to style a form that has the label and input inside the form field and when I'll write something inside the input (probably with focus), I want the borders to light up with some blue. Now I have something like this:
HTML
<div class="login-form-field">
<label for="email" class="login-form-label">Email:</label>
<input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email">
</div>
CSS
.login-form-input{
margin-left: 20px;
width: 90%;
outline: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: 0 0 0px 1000px white inset;
}
.login-form-label {
font-size: 13px;
font-weight: 300;
padding-left: 20px;
}
.login-form-field{
width: 100%;
border-radius: 0px;
height: 6rem;
border: 0.5px solid grey;
box-shadow: 0px 0px 0px;
}
I already tried to select the parent to made some change and other stuff I found on google. The closest I got was to highlight with blue when the mouser was over it with :hover, but i need the color to stay as I'm with the input selected.
.login-form-field:hover {
border-color: blue !important;
}
Here is the JSFiddle, if anyone could help I would be grateful!
You can now do this in pure CSS so no JavaScript is needed.
The new CSS pseudo-class :focus-within would help for cases like this and will help with accessibility when people use tabbing for navigating, common when using screen readers.
.login-form-field:focus-within {
border-color: blue !important;
}
The :focus-within pseudo-class matches elements that either themselves
match :focus or that have descendants which match :focus.
You can check which browsers support this http://caniuse.com/#search=focus-within
You can do like this, where you add an extra div, absolute positioned, which acts as the border, ... and no script is required.
.login-form-input {
margin-left: 20px;
width: 90%;
outline: none;
}
.login-form-label {
font-size: 13px;
font-weight: 300;
padding-left: 20px;
}
.login-form-field {
position: relative;
width: 100%;
border-radius: 0px;
height: 6rem;
box-shadow: 0px 0px 0px;
}
.login-form-field input ~ .login-form-field-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 0.5px solid grey;
z-index: -1
}
.login-form-field input:focus ~ .login-form-field-border {
border: 2px solid blue;
}
<div class="login-form-field">
<label for="email" class="login-form-label">Email:</label>
<input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email">
<div class="login-form-field-border"></div>
</div>
CSS does not have native support for parent selecting. If your goal is to have .login-form-field have a blue border on focus you're going to have to rely on JavaScript to add the respective CSS.
The following CSS:
.login-form-field.highlight {
border-color: blue;
}
With the following jQuery
$('.login-form-field').hover(function() {
$(this).toggleClass('highlight');
});
Would achieve that goal. I should note that jQuery is certainly not necessary here; it's just what I prefer to use.
React with jquery:
$( document ).ready(function() {
console.log( "ready!" );
$('.login-form-input').focus(function() {
$(this).parent().css( "border", "#99f 2px solid" );
});
$('.login-form-input').focusout(function() {
$(this).parent().css( "border", "" );
});
});
Although this is an old answer. I am answering this so anyone who lands here can use just CSS to achieve this.
Use CSS3 pseudo element: focus-within
You could do:
form:focus-within {
border-color: blue !important;
}
if you want to give the border color when the input is active you can add like this:
.login-form-input:focus {
border:1px solid blue;
}
I'm trying to to create a simple drag, drop and resize page using jquery.
So far everything works fine. But now I have faced a new challenge.
This is the current process:
1- user drags and drops an image (div) onto a parent DIV.
2- The user will be presented with a clone of the dragged and dropped image with handles so they can easily resize the image (div).
basically, what i need to do is to remove the handles (helper), on clickout and add them again if the user wants to resize the DIV and if they click inside the DIV again.
so i tried to use this code:
$("#droppable").find(".ui-resizable-handle").remove();
the code above will remove the handles only when a new image has been dragged and dropped onto the stage. also, it is not a good way of doing this becuase it will remove the handles completely and I cannot re-add them again.
This is my entire code:
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" >
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script>
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$("#droppable").droppable({
drop: function (e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
$("#droppable").find(".ui-resizable-handle").remove();
x.draggable({
//helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
x.resizable({
animate: true,
//aspectRatio: 16 / 9,
helper: "ui-resizable-helper",
handles: "n, e, s, w, nw, ne, sw,se"
});
x.appendTo('#droppable');
}
}
});
});
</script>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:500px;
height:820px;
border:1px solid #CCC;
float:left;
}
.drag{
width:100px;
height:100px;
position:relative;
background-size:contain !important;
background-repeat:no-repeat;
float:left;
margin-left:10px;
margin-top:30px;
border:solid 1px #CCC;
}
.drag:hover{
opacity: 0.6;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
#droppable{
width:720px;
height :820px;
border:1px solid #CCC;
}
#droppable .drag{
width:200px;
height :220px;
background-size:200px;
border:none;
}
.new-class{
width:200px;
height :220px;
background-size:200px;
border:solid 4px #666;
}
.ui-resizable-handle {
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
}
.ui-resizable-n{
top: -10px;
left:50%;
width: 6px;
height: 6px;
}
.ui-resizable-e
{
right:-10px;
top:50%;
width: 6px;
height: 6px;
}
.ui-resizable-s
{
bottom: -10px;
left: 50%;
width:6px;
height: 6px;
}
.ui-resizable-w
{
left:-10px;
top:50%;
width: 6px;
height: 6px;
}
.ui-resizable-nw
{
left: -10px;
top: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-ne
{
top: -10px;
right: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-sw
{
bottom: -10px;
left: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-se
{
bottom: -10px;
right: -10px;
width: 6px;
height: 6px;
}
.ui-resizable-helper {
border: 1px dotted #CCC;
}
</style>
</head>
<body>
<div align="center" id="wrapper">
<div class="col" id ="droppable">
</div>
<div class = "col" id="col1">
<div id="drag1" class="drag" style="background-image:url(images/Chrysanthemum.jpg); background-position:center;"> </div>
<div id="drag2" class="drag" style="background-image:url(images/Hydrangeas.jpg); background-position:center;" ></div>
<div id="drag2" class="drag" style="background-image:url(images/3.jpg); background-position:center;"></div>
</div>
</div>
</body>
</html>
I do apologies for posting my entire code, I did try to create a working jsfidle and it seems like jsfidle doesn't like jquery.ui URL.
could someone please advise on this issue ?
If you want to detect a click falling outside of a particular element, you can do that by attaching a click handler to a top-level element (commonly document) and look at event.target.
To reinsert elements you've previously removed from the DOM you have to use .detach() instead of .remove(). However, a better way to get the same visual effect is to simply use hide and show which toggle the css property diplay:, since you don't have to care about where you need to reinsert the detached elements. It would look like:
$(document).click(function(e) {
// matches all children of droppable, change selector as needed
if( $(e.target).is("#droppable *") ) {
$(e.target).find(".ui-resizable-handle").show();
}
else {
$("#droppable").find(".ui-resizable-handle").hide();
}
});
You can see the code here: http://jsfiddle.net/KfwyL/
I have a div and inside of the div there is an h1. I have the h1 set so that on hover it becomes green. I want to make it so that when the mouse hovers over the h1, the div gets a box shadow. my code is not working.
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="../stylesheets/1.css">
<title> Max Pleaner's First Website
</title>
</head>
<body>
<div class="welcomebox">
<h1 class="welcometext">Welcome to my site.
</h1>
</div>
</body>
<<script src="../Scripts/1.js"> </script>
</html>
css:
body {
background-image:url('../images/sharks.jpg');
}
.welcomebox {background-color:#1C0245;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
width: 390px;
height: 78px;
margin-left:100px;
margin-top:28px;
border-style:solid;
border-width:medium;
}
h1 {
display:inline-block;
margin-left: 12px;
height: 40px;
width: 357px;
background-color: #670715;
padding: 4px;
position: relative;
bottom: 5px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
h1:hover {background-color: green;}
Javascript:
welcomeboxshadow = document.getElementsByClass("welcometext");
function doit()
{
var topbox = document.getElementsbyClass("welcomebox")
topbox.style.box-shadow = "-webkit-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);-moz-box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);box-shadow: 0px 0px 30px rgba(114, 220, 215, 1);"
};
welcomeboxshadow.onmouseover.doit;
The first thing you'll want to do is discover your browser's Dev Tools. On Chrome and IE, press F12, but you can find it somewhere in the menus. The dev tools console reports errors, amongst other things.
Here it would be telling you that getElementsByClass doesn't exist on document. The method is called getElementsByClassName (note the "Name") at the end.
Once past that, you'd find that it would complain that NodeList doesn't have a style property. getElementsByClassName returns a NodeList (a list of nodes, in this case elements). Each of those has a style, but not the list. So you'd have to loop through the list to work with the style of each element.
here is a working version of your code that doesn't use jQuery since I figured you wanted to know how to do this in pure JS...
welcomeboxshadow = document.getElementsByClassName("welcometext");
welcomeboxshadow[0].addEventListener('mouseover',
function() {
var topbox = document.getElementsByClassName("welcomebox");
topbox[0].setAttribute("class","welcomebox welcomeBoxMouseOver")
}, false)
I changed the inline style to a class but the concept is the same.
The problems were mostly invalid function names (getElementsByClass*Name*), trying to set properties that didn't exist (topbox.style.box-shadow)
Also you need to remember that function returns a collection, not a single element, so you need to reference it using [0]
Note that I would recommend not using the raw js approach in this
case, I'd prefer to use jQuery as it's much cleaner and once you go beyond anything simple like your code you will be glad you used it
This doesn't use your event listeners, but gives you an idea of how to apply the drop shadow. This uses jQuery.
http://jsfiddle.net/KfwyL/20/
I modified your html since it doesn't want you to use head/body tags.
<div class="welcomebox">
<h1 class="welcometext" onmouseover="$('.welcomebox').addClass('boxshadow');" onmouseout="$('.welcomebox').removeClass('boxshadow');">Welcome to my site.
</h1>
</div>
css:
.welcomebox {background-color:#1C0245;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
width: 390px;
height: 78px;
margin-left:100px;
margin-top:28px;
border-style:solid;
border-width:medium;
}
h1 {
display:inline-block;
margin-left: 12px;
height: 40px;
width: 357px;
background-color: #670715;
padding: 4px;
position: relative;
bottom: 5px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
h1:hover {background-color: green;}
.boxshadow
{
box-shadow: 10px 10px 5px #888888;
}
Here's a working version with a box shadow working correctly without using jQuery:
Live demo
Javascript:
welcomeboxshadow = document.getElementById("welcomeH1");
welcomeboxshadow.addEventListener('mouseover', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox shadowed";
}, false)
welcomeboxshadow.addEventListener('mouseout', function() {var topbox = document.getElementById("welcomeDiv");
topbox.className = "welcomebox";
}, false)
HTML changes:
<div class="welcomebox" id="welcomeDiv">
<h1 class="welcometext" id="welcomeH1">Welcome to my site.</h1>
Im not an expert either, but why not just add:
.welcomebox:hover { box-shadow here }
to your css?
I have an issue with some CSS shrinkwrapping. First the (very simple) code...
<!doctype html>
<html lang="en-US">
<head>
<title>Device Activation</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: white;
font-family: "Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
//border: 1px solid;
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
//display: inline-block;
padding: 0px 10px;
//text-align: justify;
//-moz-border-radius: 40px;
}
</style>
</head>
<body>
<h1>Boogy-woogy</h1>
<div id="start" class="toggleable">
<p>Test</p>
</div>
<script type="text/javascript">
function makeVisible() {
// Not here yet, but that's okay...right?
}
</script>
</body>
</html>
The issue: When you remove the comments from border: 1px solid; the div top and bottom margins will increase significantly.
I have done some research and I understand that this issue relates to collapsing-margins, but I have tried several fixes and nothing seems to effect my end result.
Any help would be greatly appreciated.
i think what you mean is because the p has got default margins and padding. add
p {
margin:0px;
padding:0px;
}
to the css
Maybe your code sample is just a typo.
If not, then please note that with JavaScript comments, you have the options of:
// This is a javascript comment
/* This is a javascript comment as well... */
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Code_comments
If you want to make a CSS comment,
you cannot use the // this is a comment snyntax.
You need to use the /* this is a comment */ syntax.
http://www.w3.org/TR/CSS21/syndata.html#comments
Now, when I hide the border: 1px solid line, I do not see the top or bottom margin changing. But I think what was happening with the improper syntax you used in the code in your question, the div was resorting to display: block because the inline-block rule was not being applied. Because inline-block was not being applied, the div stretched to its full width.
http://jsfiddle.net/2f59k/
body {
background: white;
font-family:"Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
/* border: 1px solid;*/
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
display: inline-block;
padding: 0px 10px;
text-align: justify;
-moz-border-radius: 40px;
}
Again, if nothing else is gleaned from this answer,
this is not a CSS comment:
// border: 1px solid;
This is a CSS comment:
/* border: 1px solid; */
UPDATE
This issue has nothing to do with border radius, borders, etc. Your problem, if understood solely as the amount of space above and below the text, yet inside the grey background, is that the margin surrounding the text.
This increase is significant, but not nearly as significant as the change in the width when the div goes between block and inline-block.
Setting the margin of the inner paragraph to margin: 0 resolves the issue.
http://jsfiddle.net/74eTg/