I have a textarea for comments and a button to show or hide it (toggle). If I want to hide it by default (display: none) when I click the button to show it, the style is broken but if it's not hidden (display: block) I can click without problems, the style will be fine.
html:
<a id="1" class="comment_button a_button" title="Dejar un comentario">Comentar</a>
<div id="hide_1" class="rows" style="display: none;">
<ul id="UL_101">
<!-- New comment row -->
<li class="newComment_row">
<div class="userComments_photo">
<img class="photo" src="/images/profile/' . $_SESSION['photo'] .'" alt="" />
</div>
<textarea id="' . $imgID . '" class="textarea" rows="1" placeholder="Escribe un comentario..." title="Escribe un comentario..."></textarea>
</li>
</ul>
</div>
css:
.rows {
height: auto;
width: 494px;
background: rgb(246, 247, 248) none repeat scroll 0% 0% / auto padding-box border-box;
border-radius: 0 0 3px 3px;
margin: 8px -12px -12px;
}
#UL_101 {
width: 494px;
list-style: none outside none;
margin: 0px;
padding: 0px;
border-top: 1px solid rgb(225, 226, 227);
}
/* li */
.newComment_row {
height: auto;
position: relative;
width: 470px;
background: rgb(246, 247, 248) none repeat scroll 0% 0% / auto padding-box border-box;
border-radius: 0 0 2px 2px;
list-style: none outside none;
margin: 0px 12px;
padding: 4px 0px 8px 0px;
}
.textarea {
resize: none;
width: 416px;
font: normal normal normal 12px/15.3599996566772px Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
position: initial;
padding: 8px 3px 0 3px;
margin: 0 7px;
overflow: hidden;
}
and jquery:
// show rows
$('.comment_button').on('click', function () {
$('#hide_' + this.id).slideToggle('fast');
});
function h(e) {
$(e).css({
'height': 'auto',
'overflow-y': 'hidden'
}).height(e.scrollHeight);
}
$('textarea').each(function () {
h(this);
}).on('input', function () {
h(this);
});
display: none breaks the style: http://jsfiddle.net/cb41hmpo/
display: block does not break it: http://jsfiddle.net/cb41hmpo/1/
It seems the problem is the auto-height function... Is there a way to fix this?
I'd like to keep that textarea size if possible, whatever the changes are.
It's not a big deal but if display is set to block and I click the button, the textarea placeholder text appears some fuzzy or blurred for a second, is that a normal thing or can it be fixed?
If we go through your code
function h(e) {
alert(e.scrollHeight);
$(e).css({
'height': 'auto',
'overflow-y': 'hidden'
}).**height(e.scrollHeight)**;
}
If you look at the bold section here you are assigning the scrollHeight to $e. If we do an alert we can see that the height of textarea when the parent div is hidden is 0 and it is 23 when the div is shown it is 23 px. Now in the (star marked -->height(e.scrollHeight) text we are assigning explicitly that height to the textarea (bold text). Hence, it is smaller in size. Hence your height auto is not coming into picture as you are assigning height by e.scrollHeight.
Try removing the bold text from both the snippets. The result you will get will be the same.
Hope this be of some help.
Happy Learning :)
Related
I have some content which can have only specific height (no more), and I added some scroll on that content.
This is my CSS:
.value {
max-height: 60px;
overflow-y: auto;
color: black;
font-size: 16px;
}
/* width */
.value::-webkit-scrollbar {
width: 3px;
}
/* Track */
.value::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgb(163, 163, 163);
border-radius: 5px;
}
/* Handle */
.value::-webkit-scrollbar-thumb {
background: linear-gradient(60deg, #b95aca, #8c15ad);
border-radius: 5px;
}
And This is my Subtitle content:
<div
class="value"
*ngIf="courseData.sub_title"
> {{courseData.sub_title}}
</div>
This is the image:
So, when I want to scroll down or up using mouse wheel it's scrolling too much and user can not be able read full text (part of text was going up or down with scrolling).
How can I change scroll step?
Trying to make my tooltips show and hide on click. I managed to do it with the first tooltip but this doesn´t work for the others.
I know that the problem might be with the code document.getElementById but I don´t know with which code I have to replace that, so that every tooltip gets triggered one after the other when clicked.
How can I manage that all the tooltips are shown and hidden as the first one?
Thanks for your support! ;)
//Showing the tooltip on click
document.getElementById("website-tooltip-container").addEventListener("click", function() {
var element = document.getElementById("test");
element.classList.add("website-tooltiptext-visible");
});
//Removing tooltip when clicked outside tooltip container or outside tooltip itself
document.addEventListener('mouseup', function(e) {
var container = document.getElementById('test');
if (!container.contains(e.target)) {
container.classList.remove("website-tooltiptext-visible");
}
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
Thanks for your help!
This question got answered in a similar question I made.
Here the link to the question also in stackoverflow
There you will find deeper insights and possible solutions for tooltips via JavaScript or :hover pseudo class.
A slide-out side panel menu won't hold internal padding without being partially displayed.
I've stripped the whole site and have tried changing just about every value, but nothing over two days of searching has worked - -though I know the answer's something obvious to an experienced coder.
.sidePanelTableA {
height: 80%;
width: 0;
position: fixed;
z-index: 20;
top: 0;
background-color: red;
overflow-x: hidden;
}
#mysidePanelTableA {
padding: 0px 0px 8px 0px;
<!--0 left padding makes dissapear move padding?-->
}
.closebtn {
color: blue;
position: absolute;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<svg viewbox="0 0 1200 600" preserveAspectRatio="none">
<g transform="translate(300,364) scale(16)" >
<g onclick="openPanelTableA()" >
<rect style="display:inline; fill: yellow;"
width="5" height="3" />
</svg>
function openPanelTableA() {
document.getElementById("mySidePanelTableA").style.width = "250px";}
function closePanelTableA() {
document.getElementById("mySidePanelTableA").style.width = "0";}
<div id="mySidePanelTableA" class="sidePanelTableA">
<a href="javascript:void(0)"
class="closebtn"
onclick="closePanelTableA()">
×
</a>
<br><br>
TITLE
<br><br>
<img src="tableA.jpeg" height="200px">
</div>
I expect the red side panel to be completely hidden, but it shows by the width of it's padding on the left of the screen. It is properly hidden if I remove the internal left-side padding from the panel, but then the padding's gone...
Thanks, in advance.
Badly-formatted Codepen: https://codepen.io/moptopop/pen/RwbVMLv in which the effect somehow DOES NOT seem to show on adding left padding.
(Please scroll slightly to click yellow rectangle which should trigger the problem panel. Sorry I wasn't able to add the image back in, but that shouldn't affect the issue.)
You have two options- either remove he left padding when the menu is "hidden" then reinstate it when it is"shown" - or to apply a max width:0; overflow:hidden to the panel when it is "hidden".
Also - it is better to add / remove a class that has the styling in the CSS than to directly add css to an element via javascript.
Note the following code only addresses the width / padding / visibility and not the side transitions etc.
//js
function openPanelTableA() {
document.getElementById("mySidePanelTableA").classList.remove("hide-panel")}
function closePanelTableA() {
document.getElementById("mySidePanelTableA").classList.add("hide-panel")}
//css
#mySidePanelTableA {
width: 250px;
padding: 0px 0px 8px 0px;// or whatever padding you want
}
#mySidePanelTableA.hide-panel {
width: 0;
max-width: 0;
overflow: hidden; // this prevents the panel from being seen - even with the padding.
}
For the closed state, you have to either:
give negative left = width + padding
give padding = width = 0, and then, set padding/width for .open state
here's a code snippet:
function openPanelTableA() {
document
.getElementById("mySidePanelTableA")
.classList.add('open');
}
function closePanelTableA() {
document
.getElementById("mySidePanelTableA")
.classList.remove('open');
}
html, body {
padding: 0;
}
.sidePanelTableA {
box-sizing: border-box;
height: 80%;
position: fixed;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
width: 0;
padding: 0;
transition: all ease 0.5s;
}
.sidePanelTableA.open {
width: 150px;
padding: 30px;
}
#mysidePanelTableA {
padding: 0px 0px 8px 20px;
}
.closebtn {
color: blue;
position: absolute;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<div id="mySidePanelTableA" class="sidePanelTableA">
<a
href="javascript:void(0)"
class="closebtn"
onclick="closePanelTableA()"
>
×
</a>
<br /><br />
TITLE
<br /><br />
<img src="tableA.jpeg" height="200px" />
</div>
<button onclick="openPanelTableA()">Open</button>
I created the button on the left purely with CSS. It is a div within a div. However, the three buttons on the right are background properties on img tags. I did this so I could simulate a rollover effect following instructions from here.
Now, is there a way to add the inner border, as in the first button, to the other three using CSS?
Fiddle here.
According to the box model, padding is between the content and border. You should be able to style the images like:
.img-btn {
background: #FFF; // inner border color
padding: 2px; // inner border width
border: 2px solid #[yourgreen]; // outer border
}
You shouldn't need any extra divs to accomplish this, even for your pure CSS button. Following style is for the case when the image is a background-image:
.img-btn {
background: #FFF url('your.img') no-repeat;
padding: 2px;
border: 2px solid #[yourgreen];
width: [image width];
height: [image height];
background-position: center center;
}
Here's a DEMO of double-border as described above.
You don't need two <divs> and an <a> to do the button. You can do it with a single <a>. For both the images and the button you can use box-shadow to do the outer border. Center the background-images in the <img> elements.
Demo: http://jsfiddle.net/ThinkingStiff/bNmzB/
Output:
HTML:
<a id="add" href="#">Add To Cart</a>
<img id="facebook" class="icon" />
<img id="twitter" class="icon" />
<img id="email" class="icon" />
CSS:
#add {
background-color: #9bc9c7;
border: 1px solid white;
box-shadow: 0 0 0 2px #9bc9c7;
color: white;
display: inline-block;
font: normal 13px/25px Helvetica, Arial, Sans Serif;
height: 25px;
margin-right: 6px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
vertical-align: top;
}
#add:hover {
background-color: #eabeb2;
box-shadow: 0 0 0 2px #eabeb2;
}
.icon {
background-color: rgb( 155, 201, 199 );
border: 1px solid white;
box-shadow: 0 0 0 2px rgb( 155, 201, 199 );
height: 25px;
margin-right: 3px;
width: 25px;
}
Use the same approach as you did for the button - just treat the icons as background images to the inner div. So you should have a div with some padding, an inner div(in your case img) with a white border, and a background image (the icons.)
Assuming you can't modify the icon images directly, just wrap them in a div in the same way as "Add to Cart". You'll also need to use either
background-position: center center;
to ensure that the icon stays centered within the smaller img, and/or
background-size: 24px 24px;
to scale the background down a bit so the white border doesn't run into the symbols.
I'm building a jQuery form-field validator, and at the moment I'm working on building in the pop-up notifications in CSS.
The problem is, I can't get .notification-point to align to the center of .notification-body, regardless of the application of margin-top/padding-top properties.
Here's a link to my JsFiddle: http://jsfiddle.net/Z6Jtd/8/
Any help/edits would be greatly appreciated!
Solution: http://jsfiddle.net/vonkly/Z6Jtd/9/
There you go.
Note: I changed your javascript a little. I removed .fadeOut; I would highly recommend creating a function for .focusout() - or better yet, detect changes to the value and when it matches the required rule, hide the message.
For future readers:
The solution to this issue was to wrap both the marker ("point") and the body ("message") in a container with position: relative; on it.
Then, I positioned the marker using position: absolute; and top: 8px.
Next, I added margin-left: 12px to the message in order to not overlap the marker.
CSS
input[type="text"], input[type="password"] {
display: inline-block;
font: bold 13px Arial;
color: #555;
width: 300px;
padding: 8px 10px;
border: 0;
}
.notify-wrap {
position: relative;
display: none;
}
.notify-point {
position: absolute;
top: 8px;
display: inline-block;
border-style: solid;
border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
border-width: 6px;
}
.notify-body {
margin-left: 12px; /* push the body out to make room for point */
padding: 8px 10px;
font: bold 11px Arial, Helvetica;
color: #fff !important;
background-color: rgba(0, 0, 0, 0.75);
}
note: above code is modified to not take up loads of room with border-radius, etc
HTML
<div id="email">
<input name="1" type="text" value="Enter your email address"/>
<div class="notify-wrap x1">
<div class="notify-point"></div>
<div class="notify-body">
You've entered an invalid email address.
</div>
</div>
</div>
note: on notify-wrap, i added the class x1 to define a specific error message to keep in line with the OP's original formatting for javascript.
Javascript (jQuery)
$('input').focus( function() {
var num = $(this).attr('name');
$('div.notify-wrap.x' + num).css('display','inline-block');
});