I need to see if an element in jQuery contains another overflowing element.
I need to do this without referring to/knowing the elements that could be overflowing into it - just that some other element overflows into the current cell
Snippet below (ignoring varying widths)
$.fn.exists = function () {
return this.length !== 0;
}
$( document ).ready(function() {
var $element = $('td#append');
var do_spans_exist = $('span', $element).exists();
if ( do_spans_exist == true );
//change top position
add_html = $('td#append').append('<span class="span1"></span>'); //and have some top position attribute
});
.table1 {
border:1px solid navy;
width: 70%;
text-align: center;
}
.table1 td {
width: 100px;
height: 100px;
vertical-align: top;
text-align: right;
border: 1px solid #c6c6ec;
position: relative;
left: 0;
position: relative;
}
.span1 {
display: inline-block;
width: 300px;
height: 30px;
background-color: blue;
z-index: 1;
position:absolute;
border: solid black 1px;
}
div {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
<table class="table1">
<tr>
<td><span class="span1"></span></td>
<td id="append"></td>
<td></td>
<td></td>
</tr>
</table>
</div>
So before I append the span in jQuery, I want to get if there are any other span elements overflowing into the cell. So I can change the position to avoid overlap.
My exists() function only gets a span that is physically in the cell rather than overflowing into it.
Thanks!
try this css and don't use your .table1 you will get result
.table1 td {
width: 100px;
height: 100px;
vertical-align: top;
border: 1px solid #c6c6ec;
position: relative;
left: 0;
position: relative
}
.span1 {
display: inline-block;
width: 418px;
height: 30px;
background-color: blue;
z-index: 1;
position:absolute;
border: solid black 1px;
}
Just check if the width of element inside another, is greater than its parent...
Related
I have a parent <a> with an href attribute. I have a child <p> and I want a small box to be opened when I click on child element.
The problem is when I click on the child element, it opens the small box but after a second the parent link opens up too. I don't want the parent link to be opened when I click on child element. I added event.stopPropagation() but it doesn't change anything. I also added z-index property but no changes either.
In my JS Fiddle demo you can see a live example; but here is my code so far:
.parent {
background-color: blue;
display: inline-block;
width: 400px;
height: 300px;
z-index: 1;
}
.child {
color: black;
background-color: yellow;
display: inline-block;
width: 100px;
height: 50px;
z-index: 2;
}
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
.child:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
font-size: 10px;
z-index: 20;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<a class="parent" href="https://www.google.com/">
<p class="child" title="This is mobile tooltip" tabindex="0" (click)="$event.stopPropagation();">Click</p>
</a>
JS Fiddle demo
PS: I cannot use jQuery.
Thanks.
Let me explain What I did was create a variable that changed whenever it hovered on the element or off the element. Next Whenever the user clicked on it I just ran a check to see if the mouse was not hovering on the element and executed a code if was on the element I ran a other code
var mouse = false;
function mouseStatus(n) {
mouse = n;
}
function parent() {
if (mouse == false) {
console.log('parent');
window.open('www.google.com');
}
}
function child() {
console.log('child');
}
.parent {
background-color: blue;
display: inline-block;
width: 400px;
height: 300px;
z-index: 1;
}
.child {
color: black;
background-color: yellow;
display: inline-block;
width: 100px;
height: 50px;
z-index: 2;
}
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
.child:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
font-size: 10px;
z-index: 20;
}
<a class="parent" onclick="parent()">
<p class="child" title="This is mobile tooltip" onmouseover="mouseStatus(true);" onmouseout="mouseStatus(false);" onclick="child()">Click</p>
</a>
call a function instead :
onEvent(event) {
event.stopPropagation();
return false;
}
calling the function with
(click) ="onEvent($event)"
Here, I'm having issues with the table in display inline-block property. In my scenario, I need to add 2 spans and text inside the td element. When I use it the text wrapped into the next line. Here I need the text overlap into the span, i.e., the spans should not be disturbing the td's text content. I don't want to use position property. Here is my simple demo.
table {
border-collapse: collapse;
width: 200px;
}
table tr td {
border: 1px solid;
}
span.leftspan {
display: inline-block;
width: 50%;
height: 20px;
background-color: skyblue;
}
span.rightspan {
display: inline-block;
width: 40%;
height: 20px;
background-color: red;
}
<table>
<tr>
<td><span class="leftspan"></span><span class="rightspan"></span>12</td>
<td><span class="leftspan"></span><span class="rightspan"></span>25</td>
</tr>
</table>
In the demo 2 numbers (12, 25) shouldn't wrap into the next line. I need to achieve this without position property.
Using display:flex on the td element and flex-grow: 1 in the element containing the number will make this element to fill the rest of the space on the parent td element. then you can make them overlap using a translateX transform. Check this answer for extra info about how flex and flex-grow.
table {
border-collapse: collapse;
width: 200px;
}
table tr td {
border: 1px solid;
display: flex;
}
span.leftspan {
display: inline-block;
width: 50%;
height: 20px;
background-color: skyblue;
}
span.rightspan {
display: inline-block;
width: 40%;
height: 20px;
background-color: red;
}
span.rest {
flex-grow: 1;
transform: translateX(-100%)
}
<table>
<tr>
<td><span class="leftspan"></span><span class="rightspan"></span><span class="rest">12</span></td>
<td><span class="leftspan"></span><span class="rightspan"></span><span class="rest">25</span></td>
</tr>
</table>
Added Div, and added style for Div
table {
border-collapse: collapse;
width: 200px;
}
table tr td {
border: 1px solid;
}
table tr td div {
display: flex;
}
span.leftspan {
display: inline-block;
width: 50%;
height: 20px;
background-color: skyblue;
}
span.rightspan {
display: inline-block;
width: 40%;
height: 20px;
background-color: red;
}
<table>
<tr>
<td>
<div>
<span class="leftspan"></span><span class="rightspan"></span>12
</div>
</td>
<td>
<div>
<span class="leftspan"></span><span class="rightspan"></span>25
</div>
</td>
</tr>
</table>
I have a div named welcome-inputs and within other two left and right
The div named left needs to be on the left side welcome-inputs and the div named right right side of welcome-inputs.
left and right have width = 100px
Need for a line that is at the MIDDLE of the two, signaling the separation.
view the code: http://jsfiddle.net/gn1asdmh/3/
The red line must be in the middle of the images (the images represent left and right)
jsFiddle demo
Add a span element between .left and .right
<span class="middleLine"></span>
CSS:
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
text-align:center; /* ADD THIS */
}
.welcomeforms {
color: #6B6B6B;
margin: 0 auto;
width: 100px !important;
}
.left {
float: left;
/*border-right: 3px solid red; REMOVE THIS */
}
.right {
float: right;
}
body {
background:blue;
}
span.middleLine{
display:inline-block;
border-right: 2px solid red;
margin-left:-1px; /* cause the border is 2px */
height:100%;
}
JSFiddle
The other way to resolve it.
.left {
position:absolute;
top: 0;
left: 0;
}
.right {
position:absolute;
top: 0;
right: 0;
}
If you add position: relative to .welcome-inputs, you can use an ::after or ::before pseudo-element on .left or .right like this:
.left::after {
border-right: 3px solid red;
content: "";
height: 100px;
position: absolute;
top: 0;
left: calc((100% - 3px) / 2); // or use '50%' for better compatibility, but less exactness
}
and get rid of the border-right on .left
JSFiddle Here
Just use generated content on the parent element. There is no reason in the given example to use structural markup for this.
Updated fiddle, http://jsfiddle.net/gn1asdmh/26/
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
position: relative;
}
.welcome-inputs::before {
content: '';
display: block;
position: absolute;
outline: 1px solid red;
left: 50%;
width: 0;
height: 100px;
}
.welcomeforms {
color: #6B6B6B;
margin: 0 auto;
width: 100px !important;
}
.left {
float: left;
}
.right {
float: right;
}
body {
background:blue;
}
The cleanest way to do it would be to use an HTML table. This will keep it responsive. Try something like the below code.
.welcome-inputs {
width: 100%;
}
#leftInput,
#rightInput {
width: 100px;
}
#separatorInput {
text-align: center;
}
#dividingLine {
display: inline-block;
height: 100%;
width: 5px;
background: red;
}
<table class="welcome-inputs">
<tr>
<td id="leftInput">
<img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
</td>
<td id="separatorInput"><div id="dividingLine"</td>
<td id="rightInput">
<img width="100%" src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" />
</td>
</tr>
</table>
Even better: no need to use any empty/dummy elements. We rely on using pseudo-elements instead. In this case I will use ::before:
.welcome-inputs {
float: none;
margin: 0 auto;
width: 80%;
background:white;
height:100px;
position: relative; /* new property added to original one */
}
.welcome-inputs::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 3px;
background-color: red;
left: 50%;
transform: translateX(-50%);
}
Just remember to declare position: relative on the parent element. See fiddle here: http://jsfiddle.net/teddyrised/gn1asdmh/28/
p/s: You might want to use vendor prefixes for transform, to maximise cross-browser compatibility.
to add some idea to these answers , you may think as well of :box-sizing, calc() for instance , or even a simple background image/repeat/sizing
I'm trying to create a div with a fluid-width textarea inside it. The width of the div should be at least 3em, at most 12em, and otherwise the exact same width as the textarea. I've got this working. See fiddle.
When the textarea fills up the div, it creates a line break rather than overflowing to the left, which is the effect I'm going for. Any ideas how to achieve this?
Edit: This code is based on A List Apart's article on Expanding Text Areas.
html
<div><pre><span></span><br></pre>
<textarea autofocus placeholder='Note'></textarea>
</div>
css
div {
border: 1px solid grey;
position: relative;
display: inline-block;
/* overflow: hidden; */
height: 1.3rem;
min-width: 3rem;
max-width: 12rem;
}
textarea {
border: 1px solid blue;
resize: none;
background: rgba(0,0,255,.5);
padding: 0;
width: 100%;
}
textarea, pre {
position: absolute;
top: 0;
right: 0;
height: 100%;
margin: 0;
/* visibility: hidden; */
}
pre {
border: 1px solid pink;
position: relative;
max-width: 100%;
}
* {
font: 1rem arial;
}
js
var textarea = document.querySelector('textarea');
var span = document.querySelector('span');
textarea.addEventListener('input', function() {
span.textContent = textarea.value;
});
In your CSS use:
white-space: nowrap;
overflow: hidden;
Edit this is deprecated:
Can you set wrap="off" as an attribute on the textarea?
edit: to say overflow: hidden; (per comment below) original: overflow: auto;
I need to be able to draw a single black line exactly down the center of a specific column (td). This column contains an image and so the black line would have to be over the top of the image.
I'm attempting this in CSS, but javascript would be OK. I would prefer not to use an image for the black line.
I've attempted:
.verticalLine {
position: relative;
float: center;
height: 100%;
border-right: 1px solid #000;
z-index: 9999;
}
and then:
<td align="center" valign="center">
<div class="verticalLine" id="verticalLine"></div>
etc.
...but that doesn't show anything.
I also tried left: 50%; and left: 428; but that didn't work either.
Any ideas?
Using your code:
<td align="center" valign="center"><div class="verticalLine" id="verticalLine"></div>
The CSS I'd use for this might go as follows:
td {
position: relative;
}
.verticalLine{
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
border-right: solid 1px #000;
z-index: 9999;
}
With the TD positioned relative, your line can be positioned absolute, which takes it out of the standard flow and won't affect the positioning of other elements in the cell. Of course, it would be better if you applied the position: relative to the TD using a class, so it doesn't affect all the other TD tags.
your td needs position relative, then you can position your div relative with 50% and put the border on the left:
td {
position: relative;
}
.verticalLine {
position: relative;
left: 50%;
height: 100%;
border-left: 1px solid #000;
z-index: 9999;
}
example here (just used a div with id #wrapper for illustrion-purposes instead of td): http://codepen.io/anon/pen/DBphv
This is easily done.
HTML
<table>
<tr>
<td align="center" valign="center"><div class="verticalLine" id="verticalLine"></div><img src="http://www.ehdwalls.com/plog-content/thumbs/1440x900/animals/small/610-citten_1440x900.jpg" /></td>
</tr>
</table>
CSS
.verticalLine {
position: relative;
float: center;
height: 100%;
width: 1px;
background: #000;
z-index: 9999;
}
td {
height: 50px;
}
I have made a quick jsfiddle example:
jsfiddle example