The Html div with cursor resize and scroll auto:
.scrollable {
cursor: ew-resize;
border-color: red;
height: 200px;
max-height: 150px;
overflow: scroll;
}
<div class="scrollable">
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
The div is displaying the cursor with resize option. But when the scroll bar is visible, the resize cursor is showing inside the scroll bar. How to show the resize cursor outside border of vertical scroll bar.
I have tried using with no luck:
.scrollable {
cursor: ew-resize;
}
Please provide your suggestions. Thanks.
Consider the following changes.
.myDiv {
width: 100%;
height: 200px;
max-height: 150px;
overflow-x: scroll;
}
.myDiv {
cursor: ew-resize;
border-color: red;
width: calc(100% - 5px);
}
<div class="wrapper">
<div class="myDiv">
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
</div>
This is really only needed for Chrome yet does work for other browsers.
The trick here is wrapping your content div and making it sort of a viewport. Now you can adjust the width so that when the User moves it over to the scrollbar, the cursor changes back before the very edge.
The issue I saw was that when the cursor box was just a pixel before half, the graphic of the resize cursor still showed and appeared to bleed over onto the scrollbar. This is due to the border of the div element being right at the edge of the window. We can move that border by making the div a bit smaller, yet keeping the scrollbar in the same position, the cursor changes well beforehand and the graphic no longer looks like it bleeds over.
Unfortunately, it's not possible to display the resize cursor outside the border of the vertical scroll bar as it is determined by the browser's default behavior. You can try changing the border color to transparent or a color that matches the background to make it less noticeable, but the cursor will still be displayed within the scrollbar.
I guess, your problem is more OS or Browser related. I tried to reproduce this from iOS + Chrome and I didn't succeed, everything works as expected for me.
However for webkit based browsers you can try:
body::-webkit-scrollbar {
cursor: default;
}
/* Apply styles to the scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
z-index: 1; /* set the z-index to a lower value */
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
}
/* Apply styles to the div element */
div {
cursor: ew-resize;
position: relative;
z-index: 2; /* set the z-index to a higher value */
}
<div style="border-color:red;height:200px; max-height:150px;overflow:scroll;position:relative;">
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
I'm not sure if this is specifically what you're asking for. I couldn't tell if your goal was to allow the box to resize or not. If my understanding is correct, your goal is to allow resize, but you don't want that to interfere with the scrollbar. Here is my best answer based on this:
const parent = document.querySelector("#parent"),
handle = parent.querySelector("#handle")
let startX,
startWidth
handle.addEventListener("mousedown", e => {
startX = e.clientX
startWidth = parseInt(document.defaultView.getComputedStyle(parent).width, 10)
document.documentElement.addEventListener("mousemove", resize, false)
document.documentElement.addEventListener("mouseup", stopResize, false)
})
function resize(e) {
parent.style.width = (startWidth + e.clientX - startX) + "px"
}
function stopResize() {
document.documentElement.removeEventListener("mousemove", resize, false)
document.documentElement.removeEventListener("mouseup", stopResize, false)
}
#parent {
border-color: red;
border-width: 1px;
border-style: solid;
height: 200px;
max-height: 150px;
overflow: scroll;
width: 300px;
padding-right: 20px;
position:relative;
}
#handle {
position: absolute;
top: 0;
right: -5px;
width: 10px;
height: 100%;
cursor: ew-resize;
}
<div id="parent">
<div>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
<div id="handle"> </div>
</div>
I restructured the HTML style attribute into separate CSS. First of all, if you want to be able to resize using the right edge of the element, rather than using the built in resize CSS (with default CSS, use resize: horizontal; on the parent), then you will need to us JavaScript.
This also requires an additional element to represent the resize bar (<div id="handle">). This is where we apply the cursor: ew-resize;. Make sure the position of the handle is absolute, and is placed slightly further right than the parent. It's also important to note, the parent needs to have a position of relative on it, so that the handle is contained to the parent.
As an explanation of the JavaScript, we start by defining our element variables, and presetting the startX and startWidth variables to undefined, to be redefined later. Next we add an event listener to the handle, to handle the resizing on mousedown. This will set the startX to the clientX position of the handle. Then we set the startWidth based on the computed width of the parent, using parseInt to convert the string value to a number. Then we handle the mousemove and mouse in order.
On mousemove, we run the resize function. This sets the width of parent to a pixel value based on the startWidth, mouse x position, and starting mouse x position.
On mouseup we run the stopResize function, which disables the event listeners for mousemove and mouseup.
Hopefully this is the answer you were looking for. Please let me know if you have any questions, or better explanation for what you were asking for specifically, so I can provide further insight.
Simply wrap your scrollable div with one that has cursor: ew-resize;
Related
I'm trying to emulate position: fixed; using javascript, the reason being that the element has to be inside a scrollable div (overflow-scroll-y), and position: fixed; only works relative to the window scroll, not an elements scroll, though normally in a case like this I could fix it by using position: absolute; and everything would just work, but the scollable div / container element needs to have perspective: 1px; which brakes the position: absolute; adjustment, so back to just js emulation.
Now it works, with javascript, but all too often the element in question lags a bit behind the scroll, creating a kind of "jumpy" feeling (it's especially bad on Firefox), that is say it's fixed at the top of the element, if the user scrolls it's suppose to be exactly at the top always, but in reality it sometimes goes a bit (or allot) too high or low, depending on the scrolling direction, and then snaps in place again, this snapping or jumpy effect is undesirable, and is not present in cases where you can fix the element using either position: fixed; or position: absolute;.
I've made a jsFiddle Example, if you don't notice the undesirable effect in your browser you can try uncommenting the increaseLag function, on my computer the lag is clearly visible on Firefox but not as noticeable on Chrome unless I enable the increaseLag function (I'm running Ubuntu).
How could one tackle this? Is there perhaps a pure css solution I'm missing or an alternative js route?
My current buggy solution uses a scroll event on the container element which updates the top css property of the "fixed" element relative to the updated scroll position.
$("#container_element").scroll(function() {
//increaseLag(this);
var scrollTop = $(this).scrollTop();
$(".fixed_emulation").css("top", scrollTop+"px");
});
#container_element {
width: 100%;
height: 100%;
overflow-y: scroll;
perspective: 1px;
}
.fixed_emulation {
background-color: #000;
color: #FFF;
position: absolute;
top: 0;
width: 100%;
}
<div id="container_element">
<div class="fixed_emulation"> :) </div>
<p>Text text text. Text text. Text.</p>
<p>Text text text. Text text. Text.</p>
<p>Text text text. Text text. Text.</p>
...
</div>
I have a one-page site. It is basically a list of sections. One of the section has a button which overlays a dialog when clicked. This dialog ends up expanding the width of the page and a sideways scroll bar is introduced.
This really spoils the look and I'm looking to make the dialog not expand the page.
For reference, it is the same kind of layout as here:
http://www.polymer-project.org/components/core-animated-pages/demos/music.html
I tried setting max-width: 100% and overflow-x: hidden on the problematic section but to no avail.
Here's the problematic section's markup:
<section id="music-section">
<div class="music-container">
<h1> About Us </h1>
<h2> The following is our mission statement on campus. </h2>
<div class="music-row">
<music-demo></music-demo>
</div>
<div class="music-row">
<music-demo-duplicate></music-demo-duplicate>
</div>
</div>
</section>
And the CSS:
.music-row {
width: 100%;
height: 330px;
}
.music-container {
background: rgb(236, 183, 9);
padding-top: 1%;
max-width: 100%;
}
are you using "position:absolute" in your div?
your elements wouldn't align to your div with position:absolute, other cause may be the size of the div, are using % in the values width and height.
Unfortunately the CSS you provided doesn't correspond to your HTML. If you've got a fluid layout (resizes based on screen/browser size) and the parent container of music-section is width: 100%; or in this case max-width, this can cause problems I've discovered. Often times the child element will expand beyond the parent. What worked for me is this:
.music-row {
width: auto;
height: 330px;
}
Set your child to auto rather than 100%. I hope it works for you.
I'm developing a jQuery Backbone.js web app.
I have a table with table entries. The table has a white background.
If the user selects a table entry, a modal popup is shown. To show the user that the popup is now in modal mode, I used to have the jQuery UI diagonal stripes (ui-widget-overlay).
But I changed to an alternative. Those stripes were too "striking", "obtrusive" for me. I now change the opacity of the table to 0.5. I like this more.
The problem now is that I have popups in the popup window. And if I also change the opacity of the first popup to show the user that only the second popup is working now, the table shines through the first popup.
Is there any possibility, any alternative way to have a popup window (a div) "dim", "grey out" to half of its appearance without getting transparent?
I would add another div on top of the div that has the same dimensions but has grey background color with opacity 0.75. This should work pretty fine.
CSS
.inner {
position: absolute;
}
.fade {
background: grey;
opacity: 0.75;
}
HTML
<div class="outer">
<div class="inner">content</div>
<div class="inner fade"></div>
</div>
This way you are pretty safe when it comes to cross-browser references. Also you can control the fade by adding an "id" attribute to the fade class and make it go away. This way, you can also make div inactive, as they div inner fade is on top of it.
Try with hsla (look here).
<style>
#el1 {
background: red;
width: 700px;
height: 700px;
}
#el2 {
background-color: hsla(190, 30%, 94%, 0.6);
width: 500px;
height: 500px;
}
#el3 {
background: green;
width: 300px;
height: 300px;
}
</style>
<div id="el1">
<div id="el2">
<div id="el3">
</div>
</div>
</div>
In my code, el1 is the holder and not transparent at all. Then, el2 as first child uses hsla for transparency. The contained el3 is not transparent again and this works.
You could lay a glass pane on top of your page and set the z-index appropriately so that your 2nd popup lies on top of it and everything else is hidden under it:
#pane {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
opacity:0.5;
z-index: 999;
}
Assure that your 2nd popup has a z-index higher than the pane and you're fine.
I need to build a dynamically-resizing scrolling div.
The div should dynamically resize to fit the screen. But if the content doesn't fit on the screen, it should display a scrollbar. So the browser's own scrollbar should never need to become active.
I can get a scrollbar to appear in the div by placing another div inside it and using overflow: auto.
<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
<div id="gridcontent" style="height:100%">
<!--Put loads of text in here-->
</div>
</div>
The trouble is that this only works when the first div has a fixed height. I had hoped I could just set the first div to height:100%, but sadly not- this property appears to get ignored, and the scrollbar just doesn't appear.
I have tried putting the divs in a table with height:100%, and setting the first div to height:auto, hoping it might take its height from its parent. But the div still seems to ignore the height property.
So my question is: Can this be done using just html, or- failing that- javascript?
You could stretch the div using absolute positioning. This way it will always take the size of the browser window (or the closest positioned ancestor).
Given this HTML:
<div id="gridcontainer"></div>
the CSS should be something like:
#gridcontainer {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
Live Demo
Since IE9 you can use viewport units.
Let's say that the height of your container is dynamic, unless its size is greater than the window height. In that case we stop the expansion & activate the scroll.
#container{
background: #eaeaea;
max-height: 100vh;
overflow-y: scroll;
}
div{
outline: 1px solid orange;
width: 200px;
height: 200px;
}
<div id='container'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
If you are trying to make element fit the screen then you can set the value of hight and width of the element to 100%.
You will also need to set the height of html and body
html, body {height: 100%}
#gridcontaine {
height: 100%;
width: 100%;
}
I am using an old CSS trick to get a semi-transparent background for some content, without the content appearing semi-transparent. Here is the HMTL:
<div id="frame">
<div id="opacityFrame">
</div>
<div id="contentFrame">
<div>
<!-- Main Site Content Here -->
</div>
</div>
</div>
Here is the corresponding CSS:
#frame
{
width: 90%;
margin: auto;
position: relative;
z-index: 0;
}
#opacityFrame
{
background: #00ff00;
opacity: .15;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
#contentFrame
{
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
My problem is that because #frame is position: relative, it's height does not dynamically expand with its content. Both #opacityFrame and #contentFrame are set to 100% height and width and they appropriately expand to fill #frame which is great. The issue is that I need #frame's height to grow with the contents of the child DIV of #contentFrame because that DIV's height dynamically adjusts with the content placed in it.
I ended up having to create a jQuery function:
function resizeFrame()
{
$('#frame').height($('#contentFrame > div').height());
}
NOTE: The reason there is a child DIV of #contentFrame is because #contentFrame's height always reads as zero for some weird reason. I'm assuming it has to do with its position being absolute.
This code works great and accurately resizes #frame's height to the height of the child DIV of #contentFrame. However, I do a lot of ajax that changes the content within that DIV. One solution would be to call resizeFrame() with EVERY ajax event but it just seems so tedious. Is there an event or something I can tie to that would execute this function without my explicitly having to call it? I tried the following events but they didn't seem to work; maybe I did them wrong.
$('#subFrame > div').resize()
$('#subFrame > div').change()
Neither of these seemed to fire when the contents of the child DIV were modified. Maybe I'm going about this the wrong way? I do not want to use transparent images for the background.
Try taking position: absolute off of the contentFrame but leaving it on the opacityFrame. That should cause it's parent to resize, and the opacityFrame to still overlay everything.
do you have to use opacity? If it's a solid color, consider RGBA or if it's not solid, consider a semi-transparent PNG. That way you can nest them.