The up image shows the unwanted red selection out of the yellow area when you select cross lines. I want to select within the yellow part, like the following:
HTML:
<div id="parent">
<div id="child">
This is some content... This is a long lonnnnnnng content.
</div>
</div>
CSS:
#parent {
width: 200px;
background-color: #666;
}
#child {
padding: 50px;
background-color: #ff0;
}
::selection {
background-color: #f00;
}
Do you know how to achieve this?
Run code here: http://jsfiddle.net/3AESf/
You can use display: inline-block; on #parent to solve it
An alternative solution, if display:inline-block would not be an option, would be to add
overflow: hidden;
to #parent. That works too.
Related
I currently have a grid set up that looks something like this:
<div class="grid-container">
<div class="headers"> <!-- ... --></div>
<div class="row-container">
<div class="row"> <!-- ... --></div>
<!-- ... -->
</div>
</div>
Essentially what I'd like to do is place an overflow-x on the entire grid-container (so that scrolling horizontally will scroll both the headers and the rows together), but just place an overflow-y: overlay on the row-container (so that scrolling down will only scroll through the rows and keep the grid headers in a fixed position.
I was able to do that and it looks okay, however, the vertical scrollbar on the row-container is at the far right of the row-container. I'd like it to be visible and in a fixed position (similar to how it would look if you were to place an overflow-y on the entire grid-container except without affecting the headers).
Sorry I know I probably explained this poorly, but here's a JSFiddle that should hopefully illustrate the problem I'm having: https://jsfiddle.net/4xwd5yzp/
Notice in that fiddle, you can only see the vertical scrollbar when you scroll to the end of the row-container.
Thank you in advance for any help. Ideally, I'd prefer a solution using just HTML + CSS, but I'm also open to use vanilla JS + jQuery if absolutely necessary.
EDIT: Here is an example of how it currently works (not ideal):
And here is a photo of how I want it to look:
You were very close, if you take the overflow-y style off of .row-container and add it to .grid-container and also add position: sticky; and background: white; to .headers then I believe it'll work how you want it to.
Update the width in % rather than px.
`
.grid-container {
border: 1px solid black;
height: 200px;
width: 99%x;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.row-container {
height: 150px;
width: 99%x;
overflow-y: overlay;
}
.grid-cell {
display: inline-block;
width: 250px;
}
.headers {
border-bottom: 1px solid black;
height: 50px;
width: 99%;
}
.row {
border-bottom: 1px solid lightgray;
height: 30px;
width: 99%;
}
`
When link is clicked, I need jQuery to click on specific part of a div, lets say exactly 1px from its right side.
I'm familiar with jQuery, but I'm not sure how offsets really work in this case?
HTML
<div class="container">
<div class="toBeClicked">Click the right side of me!</div>
</div>
EDIT: I've added JSfiddle for reference: https://jsfiddle.net/ebc59bah/1/
Check this code.I create two color boxes.The red is the container and the aqua is the div that you want 1px right aside to have an event.I get the pageX position and via if condition I trigger the alert() method.Note the CSS setting specially the html and body because I don't want to have any margin in pixels that must adding to the if condition:
$('.container').on('click',function(e){
var xPosition=e.pageX;
if(xPosition>01 && xPosition<150){
alert('Click');
}
});
html, body {
margin: 0;
padding: 0;
}
.container{
height: 150px;
width: 250px;
background-color:#FF0000;
}
.toBeClicked{
position: inherit;
font-size: 150%;
height: 140px;
width: 150px;
background-color: #00FFFF;
word-break: keep-all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="toBeClicked">Click the right side of me!</div>
</div>
Since my last question was marked as a duplicate, while it was no duplicate, and no-one is changing it back, I will just ask my question again.
I have an <a>, which has, by default, a on-click function. This <a> also has a hover, which I would like to keep.
How do I disable the click function, but keep the hover?
P.s., I would love to see a CSS solution!
Important! Last time, my question was marked as a duplicate of this question: How to disable a link using only CSS?, but pointer-events:none; is also blocking the hover.
If it is still a duplicate, please mark it as a duplicate of a question that is truly a duplicate.
Edit:
I forgot to mention, that my hover is made like this:
https://jsfiddle.net/7o3dbak7/7/
HTML:
<div class="container">
<ul>
<li id="item1">hoverable object</li>
<li id="item2">text object, here comes alot of text explaining certain features of the website.</li>
</ul>
</div>
CSS:
.container ul #item2 {
display: none;
width: 150px;
padding: 20px;
background: red;
color: white;
cursor: pointer
}
.container ul #item1 {
pointer-events: none;
}
.container ul #item1:hover + #item2 {
display: block;
}
Add pointer-events: none to the a element, then apply the hover to the parent element, targeting the a specifically within that:
span a {
pointer-events:none;
}
span:hover a {
color: red;
}
<span>Hello, world!</span>
I would not use anchor to begin with. Replace anchor with a paragraph tag and modify your CSS.
CSS:
.container #item2 {
display: none;
width: 150px;
padding: 20px;
background: red;
color: white;
}
HTML:
<div class="container">
<p id="item1" href="somelinkthatistherebecauseitis">hoverable object</p>
<div id="item2">text object, here comes alot of text explaining certain features of the website.</div>
</div>
I have some div elements. All of them are supposed to slide in when the page is opened. Three of them are sliding in horizontally and one is sliding in vertically.
$(document).ready(function () {
$("#lineHor1").toggle("slide");
$("#lineHor2").toggle("slide");
$("#lineHor3").toggle("slide");
$("#lineVer1").slideToggle("slow");
});
.lineSliderHor {
width: 1000px;
height: 2px;
background: #000000;
display: none;
}
.lineSliderVer {
width: 2px;
height: 1000px;
background: #000000;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="lineVer1" class="lineSliderVer"></div>
<p>Click anywhere to toggle the box.</p>
<div id="lineHor1" class="lineSliderHor"></div>
<br />
<div id="lineHor2" class="lineSliderHor"></div>
<br />
<div id="lineHor3" class="lineSliderHor"></div>
So my plan was to use this kind of behavior as animation on the page. As you can see the div sliding in vertically forces all other div's down. I want all the lines to overlap. Is there a way to achieve this? Is it even reasonable to do it this way, or should I use a canvas for this kind of requirement?
The easiest way to not have the vertical line push down the other elements, is to have its position absolute
.lineSliderVer {
...
position: absolute;
}
Snippet
$(document).ready(function () {
$("#lineHor1").toggle("slide");
$("#lineHor2").toggle("slide");
$("#lineHor3").toggle("slide");
$("#lineVer1").slideToggle("slow");
});
.lineSliderHor {
width: 1000px;
height: 2px;
background: #000000;
display: none;
}
.lineSliderVer {
width: 2px;
height: 1000px;
background: #000000;
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="lineVer1" class="lineSliderVer"></div>
<p>Click anywhere to toggle the box.</p>
<div id="lineHor1" class="lineSliderHor"></div>
<br />
<div id="lineHor2" class="lineSliderHor"></div>
<br />
<div id="lineHor3" class="lineSliderHor"></div>
You could use
position:absolute;
But this may not behave as you want because this makes the div break out of its parents constraints. Unless you use:
position:relative;
On the parent div.
If you choose position: absolute I prefer to use JQuery.animate(); as you can reference CSS properties directly (such as left or marginRight) and easing for more customisable sliding.
I hope this achieves something you're looking for.
Do not bind it to javascript "onclick".
It needs to be an anchor.
I know I can bind onclick to the div and make it window.location. However, then...the user cannot open a new tab by CONTROL+Clicking it.
I just want an <a> that fills up the entire div.
Try setting the anchor to display as a block within your DIV and setting its height to 100%, like this:
<style>
a { display: block; height: 100% }
#test { width: 100px; height: 200px; background: red; }
</style>
<div id='test'><a href='#'>...</a></div>
You can see a working example here: http://jsbin.com/ujoca3/2/edit
The semantic way to do it would be to have the anchor act like a div. Because you don't want anything else in the container there's no point in having a container.
<style>
a.fakeDiv, a.fakeDiv:link, a.fakeDiv:hover, a.fakeDiv:active, a.fakeDiv:visited{
display: block;
text-decoration: none;
color: Black;
cursor: default;
outline: none;
}
</style>
<a class="fakeDiv">Content</a>
some html:
<div></div>
some css
yourdiv { position: relative; }
yourdiv a { position:absolute; left:0;right:0;top:0;bottom:0; }
<div>
</div>