Internet Explorer Buggy CSS Left - javascript

I have a html page where I want a div to scroll vertically with the page but not horizontally (rest of the content to disappear under it);
From a previous question I found a good answer to this, however I was wondering if there was a way to fix a small bug.
http://jsfiddle.net/nkgsqc1o/
When scrolling left using either the scroll bar's arrow or the arrow keys on the keyboard, the green box goes all spazzy trying to keep up. This doesn't occur in Firefox.
I am wondering if its the jquery code (below) or Internet Explorer itself?
$('#Container').scroll(function() {
$('#Const').css('left', $('#Container').scrollLeft());
});
I have tried playing with jquery's animate but it does much the same. I have also tried playing with the "smooth scrolling" setting inside Internet Explorer but that didn't help either.

Please check this fiddle. I have removed jquery and simply used CSS. Hope that helps.
div.Container{
height: 300px;
border: 2px solid #F00;
width: 800px;
padding: 3px;
overflow: auto;
/* POSITION */
position:fixed;
z-index : 1;
}
div.Const{
border: 2px solid #0F0;
width: 200px;
height: 250px;
float:left;
position:fixed;
overflow-y:hidden;
z-index : -1;
}
div.Main{
border: 2px solid #00F;
width: 3000px;
height: 200px;
margin-left: 220px;
top:0px;
float:left;
z-index : 1;
}
<div id="Container" class="Container">
<div id="Const" class="Const">
</div>
<div id="Main" class="Main">
</div>
</div>

Related

Hide the "resizing" handle in a resizable div?

There are a few other questions which are similar, but none works or seems in the right area. I'm trying to make a table's columns' widths resizable. My table is a normal HTML table, except that it has the Bootstrap 4 class table (maybe they could have thought of a different name...!).
My css looks like this:
.resizable-div {
resize: horizontal;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
The relevant bit of JS where I add the cell to the table row with a resizable div inside it, and text inside that, is like this:
row.appendChild(cell);
const resizableTdDiv = document.createElement( 'div' );
resizableTdDiv.classList.add( 'resizable-div');
cell.appendChild( resizableTdDiv );
const cellTextNode = document.createTextNode(isHeader ? fieldName : value);
resizableTdDiv.appendChild(cellTextNode);
The result works fine: resizable columns. Hurrah. There is only one fly in the ointment:
I can get rid of the borders, of course. I just want to lose those pesky handler triangles in the bottom right corners... all of them!
I realise users have to be given an idea that they are able to resize the columns... but I'd be perfectly happy to do that some other way if I could replace those triangle icons with 100% transparent ones (for example).
Edit
Here's a JSFiddle! Amazingly easy to do!
You can do this in WebKit based browsers currently with the ::-webkit-resizer pseudo element.
div{
overflow:auto;
resize:both;
width:50%;
}
div:nth-of-type(2)::-webkit-resizer{
background:transparent;
}
<div>
Not Hidden
</div>
<div>
Hidden
</div>
WebKit provides a pseudo-element for this ::-webkit-resizer and you can hide those triangles by applying display: none, -webkit-appearance: none, or background: transparent.
For Firefox or anything without WebKit an alternative / workaround would be to position a custom handle over top of each resizable div. This may require some different markup though.
.wrapper {
position: relative;
display: inline-block;
}
.resizable-div {
position: relative;
resize: both;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
.handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: black;
pointer-events: none;
}
/* ::-webkit-resizer {
background: transparent;
} */
<div class="wrapper">
<div class="resizable-div"></div>
<div class="handle"></div>
</div>

html-css make part of a div blur

So, I'm learning HTML and CSS, and here's what I'm trying to do.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.floatdiv {
position: absolute;
display: inline-block;
transform: translateX(50%);
text-align: center;
}
.basediv {
position: relative;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="basediv" id="particle">
<!-- particles lives here -->
<div class="floatdiv"><!-- some content --></div>
</div>
</body>
</html>
I'm using this https://vincentgarreau.com/particles.js/ and this is a minimal example of my actual code. I have some text content in the floatdiv that stays in the middle of the page and over the basediv. Now the basediv has the particles animation. Now what I want to do is to blur the particles animation just below the flaotdiv. I cant blur the floatdiv, that will make the content blurry, also I can't make the basediv blur, that would make the particles blur everywhere. So how do I blur only the background of the floatdiv
Edit: Well, Its maybe confusing, but I actually want, the particles to get blurred when it goes under the floatdiv. Is it possible to do?
it is not possible to ignore child element.
you need to change html markup like this
<div class="basediv" style="position:relative;height:100px;width:100px;">
<div id="particle" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red; filter: blur(4px);z-index:-1;"> active particle js</div>
<div class="floatdiv">some text</div>
</div>
This is actually possible if you apply backdrop-filter: blur(4px) and -webkit-backdrop-filter: blur(4px) css property to floatdiv. It will blur everything underneath floatdiv's content while floatdiv's content will remain clear. However, this is not natively supported property on all browsers, in fact it's support is very limited (check the support tables here https://caniuse.com/#feat=css-backdrop-filter).
If I understand the question correctly, there is a way to solve this styling issue.
Instead of blur(), try using box-shadow method, as it would not blur the contents of floatdiv. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Here is the example that might be helpful:
.floatDivBlurred{
transform: translateX(50%);
text-align: center;
background-color: green;
height: 100px;
width: 200px;
box-shadow: 0 0 8px 5px green;
}
.floatDivBot{
transform: translateX(50%);
text-align: center;
background-color: green;
height: 100px;
width: 200px;
box-shadow: 0 50px 20px #99ff99;
}
.basediv{
position: relative;
width: 100%;
height: 100%;
}
<body>
<div class="basediv" id="particle"> <!-- particles lives here -->
<div class="floatDivBlurred">
<p><font color="white"> floatDiv blurred </font></p>
</div>
<div class="floatDivBot">
<p><font color="white"> floatDiv bottom blurred/extended </font></p>
</div>
</div>
</body>

jquery ui draggable restricting div to up and down drag within containment

I have been learning Javascript lately. As an exercise I wanted to create a Dominoes board. I am trying to drag a tile around the board. The approach I took is to create a tile within the board and set it to draggable with jquery ui.
However, somehow the drag is confined to up and down movement only. Why is that??
Html:
<div id="board">
<div id="tile_1-0" >
<div class="dominoe"> </div>
</div>
</div>
css:
.dominoe {
/* Dominoe shape */
position: relative;
height:60px;
width:30px;
background-color:white;
border: 2px solid black;
/* Rounded Corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding:2px;
}
#board {
margin: auto;
width: 200px;
height: 200px;
background-color: #0A9D2D;
}
javascript:
$( "#tile_1-0" ).draggable({containment:'#board'});
Please take a look at the embedded fiddle:
https://jsfiddle.net/totoorozco/t5nnd95j/
Because the div it's in takes up the full width of the 'board'. Fix that by setting the display of that div to inline-block:
#tile_1-0 {
display: inline-block;
}
jsFiddle example
add this to your css:
#tile_1-0{
position: absolute;
}

Is there a way to make the hover area larger than the image?

I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.
This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>
Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}
Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}
You could also set the image to display: block and add padding, if it does not mess with your layout.

JS not working after doing custom css on Wordpress Site

I am currently in the process of developing an online shop via wordpress. Everything was working fine, now I wanted to give my page a custom border( inverted round corners) and found the css code for it as seen here:
css:
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
html:
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello</h1>
<div class="bottom"> </div>
</div>
</div>
I renamed the classes to get no conflict with the existing css classes of the theme. It is working fine as seen here:my site. The problem is now, that I cannot interact with the site anymore, no links, no hover effects. It seems like the custom css is overlaying the actual site. Do you have any suggestions what I maybe did wrong?
P.S. I edited the header.php so that inverted corner div and the top div are right underneath the page-wrapper div( site content) and in the footer.php I edited the top div and the inverted-corner div closing right above the page-wrapper div closing.
Add :
pointer-events: none;
to the .bottom-corner CSS, so the mouse passes through.
In your custom.css you have this:
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
This basically overlays the whole page and thus disables any interaction.
One other option I would like to suggest to change following css rule
CSS
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
Replace above code with the below one
.top - corner, .bottom - corner {
position: absolute;
width: 100 % ;
}
this solution will work on all modern browsers and IE8 and above ( I'm not sure about lower version of IE, but it may work on them as well )

Categories