Is it possible to ignore mix-blend-mode of the element?

Is it possible to ignore mix-blend-mode of the element? - javascript

I have a component which has a "sticky" header at the top and list of elements that use blending modes. In this simplified example, it's headers inside divs.
It works fine until I scroll content. If I scroll down, blending mode also applies to blend "sticky" header with elements which is not what I want.
Is there any way to make a "sticky" header to ignore the blending modes of an another element and always just cover the elements behind.
See code below.
<div>
<div style="display: flex; flex-direction: column; height: 700px; max-height: 700px; overflow: auto; text-align: center;">
<div style="position: sticky; top: 0px; background: blue;">Sticky</div>
<div style="background: lightblue;">
<h1 style="background: red; mix-blend-mode: multiply;">ABC</h1>
</div>
<div style="background: lightblue;">
<h1 style="background: red; mix-blend-mode: multiply;">ABC</h1>
</div>
/* a lot of other elements like 2 above*/
</div>
</div>

you just have to add z-index: 1000; on Sticky style
.class_Parent {
display: flex;
flex-direction: column;
height: 700px;
max-height: 700px;
overflow: auto;
text-align: center;
}
.class_Sticky {
position: sticky;
top: 0px;
background-color: blue;
z-index: 1000;
}
.class_ABC {
background: lightblue;
}
.class_ABC h1 {
background: red;
mix-blend-mode: multiply;
}
<div>
<div class="class_Parent">
<div class="class_Sticky">Sticky</div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
</div>
</div>

Setting z-index of the "sticky" header to any value more than 0 solves the problem. I think value should be more than z-index of the elements.

Related

Not able to put divs side by side on Firefox but works on Chrome

With the following markup, I'm able to put two div side by side, as seen on image 1, but only on Chrome. Image 2 shows how Firefox processes the HTML. Is this a known issue I missed? How do I fix this?
<div style="background-color: #ffcc33;">
<div class="entry-content" style="float: left;">
<h3>Full Article: Link</h3>
<div id="summary_headline">
<h3>Summary</h3>
</div>
<?php
the_field('generated_summary');
wp_link_pages( array(
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'inbox' ),
'after' => '</div>',
) );
?>
<p class="read-more"><?php echo esc_html('Read More', 'inbox'); ?></p>
</div>
<div style="float: left; background-color: #eee;">
<div id="wordmap_display" style="background-color: #a0a0a0;" >
<h3>Word Map</h3>
<div id="wordmap_chart"></div>
</div>
<div id="sa_results_display" style="background-color: #f5baff;">
<h3>Sentiment Analysis Results</h3>
<canvas id="sa_chart"></canvas>
</div>
<div style="clear: both;"></div>
</div>
</div>
CSS
.page .post-content .entry-content, .single-post .post-content .entry-content {
height: auto;
overflow: hidden;
background: #42ffec;
width: 60%;
}
.post-content .entry-content {
height: 60vh;
overflow: hidden;
position: relative;
text-align: justify;
}
div {
display: block;
}
EDIT: Got it to work. I set my outer most div to overflow: hidden and from my second inner div, removed float:left, and added overflow:hidden

Use display: flex property. It is supported in major browsers.
.main-container {
background-color: #ffcc33;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.more-details {
float: left;
background-color: #eee;
}
<div class="main-container">
<div class="entry-content" style="float: left;">
<h3>Full Article: Link</h3>
<div id="summary_headline">
<h3>Summary</h3>
</div>
Dynamic markup from PHP
<p class="read-more">Read More</p>
</div>
<div style="more-details">
<div id="wordmap_display" style="background-color: #a0a0a0;" >
<h3>Word Map</h3>
<div id="wordmap_chart"></div>
</div>
<div id="sa_results_display" style="background-color: #f5baff;">
<h3>Sentiment Analysis Results</h3>
<canvas id="sa_chart"></canvas>
</div>
<div style="clear: both;"></div>
</div>
</div>

How to align images in card with dynamic title?

I will have several different cards with dynamic titles coming from the backend. What I need is to align pictures in a same line, no matter how long the title is, it should be aligned based on the longest title. Here is the picture bellow what I need, and here is the JSfiddle link to the code so far.
This is how it should look like
.wrapper {
width: 100%;
display: flex;
}
.card{
text-align: center;
width: 33%;
background: pink;
margin-right: 10px;
padding: 20px 5px;
}
.image {
margin-top: 20px;
}
<div class="wrapper">
<div class="card">
<div class="head">
<div class="title">
Hello
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
<div class="card">
<div class="head">
<div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
</div>

You need to incorporate flexbox into the children and then force the image to always be at the bottom of the column.
Note...this only works when there are two children...aligning multiple children is not fully supported see Align child elements of different blocks
.wrapper {
width: 100%;
display: flex;
}
.card {
text-align: center;
width: 33%;
background: pink;
margin-right: 10px;
padding: 20px 5px;
display: flex;
flex-direction: column;
}
.title {
flex: 1;
}
.image {
margin-top: auto;
}
.head {
display: flex;
flex: 1;
flex-direction: column;
}
<div class="wrapper">
<div class="card">
<div class="head">
<div class="title">
Hello
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
<div class="card">
<div class="head">
<div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
</div>

Show floated div with percentage width and different pattern

I am not very good with CSS, so I am posting my problem here hoping for a solution:
What I need is following:
I need an HTML row/div/line that shows a date and after the date it shows a bar which will be a percentage of the remaining screen width.
Like so:
2015-11-17 ---------------------(50%)
2015-11-18 ------------------------------------------- (80%)
2015-11-19 ==================================================== (100%)
If you will please consider in the dashes as a proper bar (like 10px height for e.g.). You might notice that 50% and 80% have ---- while 100% has ====.
This is because for any percentage less than 100 I want the bar to be a mixed color like blue and white combo. For the 100% it will be a solid blue color bar.
I am trying to achieve this using HTML/CSS only, but I find my expertise to be lacking.
So far, I have following HTML/CSS:
<div style="padding-top: 10px;padding-bottom:10px; width:100%">
<div style='float:left'><strong>Date </strong>{{Today.date}}</div>
<div style='float:left;background-color:red;width:100%'></div>
</div>
The above code does not even show the second div with red background :(
Any pointers in helping me solve this is very much appreciated!

Flexbox could help here depending on your browser support requirements.
.wrap {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar {
height: 10px;
background: #f00;
}
.bar-50 {
flex: .5;
}
.bar-80 {
flex: .8;
}
.bar-100 {
flex: 1;
}
<div class="wrap">
<div class="date">2015-11-17</div>
<div class="bar bar-50"></div>
</div>
<div class="wrap">
<div class="date">2015-11-18</div>
<div class="bar bar-80"></div>
</div>
<div class="wrap">
<div class="date">2015-11-19</div>
<div class="bar bar-100"></div>
</div>
Sneaky version with pseudo-element instead of extra HTML
.bar {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar::after {
content: '';
height: 10px;
background: #f00;
}
.bar-50:after {
flex: .5;
}
.bar-80:after {
flex: .8;
}
.bar-100:after {
flex: 1;
}
<div class="bar bar-50">
<div class="date">2015-11-17</div>
</div>
<div class="bar bar-80">
<div class="date">2015-11-18</div>
</div>
<div class="bar bar-100">
<div class="date">2015-11-19</div>
</div>
Perhaps more semantically, use a progress element and a label.
Progess Element # MDN
div {
margin: 10px;
}
<div>
<label for="alpha">2015-11-17</label>
<progress id="alpha" value="50" max="100">50 %</progress>
</div>
<div>
<label for="beta">2015-11-18</label>
<progress id="beta" value="70" max="100">70 %</progress>
</div>
<div>
<label for="gamma">2015-11-19</label>
<progress id="gamma" value="100" max="100">70 %</progress>
</div>

You can try this
<div style="padding-top: 10px;padding-bottom:10px; width:100%;position: relative;">
<div style="float: left;width: 50%;display: inline-block;"><strong>Date </strong>{{Today.date}}</div>
<div style="float:left;width: 50%;height: 10px;display: inline-block;">
<div class="progress" style="background-color:red;width: 100%;height: 100%;">
</div></div>
</div>

Auto-scroll to a div when clicking on another div

When I click on one of the smaller divs on the left (inside of the div with the class "smallitems", I want for the div on the right (with the class "items") to auto-scroll to the appropriate larger div.
HTML:
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
JavaScript (with JQuery):
$('.smallitems .col').on("click", function(){
//how use scroll items show
});
Example:
This is before I click on a div in the left div ("smallitems").
I've now clicked on the number 5 (<div class="col">5</div>) in the left div. As you can see the right div has scrolled to the 5th div (<div class="item">5</div>).
Similar to the above, I've clicked on the number 4, and subsequently have had the right div auto-scroll to the 4th div.
see jfiddle http://jsfiddle.net/h7bLK/

This can be done with anchors. If you replace your div.cols with anchor tags and add an ID to your div.items like this:
<div class="smallitems">
<a class="col" href="#item1">1</a>
<a class="col" href="#item2">2</a>
. . .
</div>
<div class="items">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
. . .
</div>
Fiddle link
BONUS: You'll be able to link externally to the correct item.
CONS: If the content is smaller than the frame it is rendered in, the whole frame will scroll.

According to requirement, no-need to use javascript or jquery. Its done only using css.
<div class="main-container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col last-child">3</div>
<div class="col">4</div>
<div class="col">5 </div>
<div class="col last-child">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="scroll">
<div class="item" id="one">1</div>
<div class="item" id="two">2</div>
<div class="item" id="three">3</div>
<div class="item" id="four">4</div>
<div class="item" id="five">5</div>
<div class="item" id="six">6</div>
<div class="item" id="seven">7</div>
<div class="item" id="eight">8</div>
</div>
</div>
</div>
**Css** :
.main-container{
margin: 20px auto;
width:960px;
overflow: hidden;
border: 1px solid #bababa;
padding: 5px;
}
.smallitems{
overflow: hidden;
float: left;
width:330px;
border: 1px solid #bababa;
display: table;
padding: 10px;
}
.col a{
display: block;
padding: 41px 0;
text-decoration: none;
}
.col{
float:left;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid #bababa;
height: 100px;
width: 100px;
margin: 0 10px 10px 0;
}
.items{
float: right;
width:580px;
border: 1px solid #bababa;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
}
.col:nth-child(3),.last-child{
margin-right: 0;
}
.item{
display: inline-block;
text-align: center;
position:relative;
font-size: 14px;
font-weight: 700;
border: 1px solid #bababa;
height: 440px;
width: 180px;
margin: 0 10px 10px 0;
}

$('.smallitems .col').on("click", function(){
var index = $(this).index();
var items = $('.items');
var item = items.children().eq(index);
items.scrollLeft((item.width() - 50) * index);
});
When you add a new div to the items play around with the value of 50.

<div class="container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items" id="maindiv"> // set id
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
</div>
$('.smallitems').on("click", function(e){
// get click element text and calculate scrollLeft
var scrollLeft = (parseInt($(e.target).text())-1) * 200;
// use jquery animation function
$('#maindiv').animate({scrollLeft :scrollLeft},1100)
});

Horizontal scrolling with sticky div that stays on the left border

I have two rows of data (green) and a header (red), which should be visible at all times:
Check out the example I already have:
http://jsfiddle.net/j9C8R/33/
Now the red header scrolls away together with the content, but it should stick to where it is now, but scroll vertically with the content (MS Excel style).
How can this be achieved (preferably with only CSS).
UPDATE: It is important that the red headers scroll vertically along with the corresponding content but stick to the left edge when scrolling horizontally.
.main {
background-color: blue;
overflow: scroll;
height: 200px;
width: 400px;
}
.row {
height: 50px;
overflow: scroll;
clear: both;
width: 1000px;
background-color: yellow;
}
.sticky,
.content {
float: left;
width: 150px;
border: 1px solid black;
}
.sticky {
background-color: red;
}
.content {
background-color: green;
}
<div class="main">
<div class="row">
<div class="sticky">Sticky header A</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
</div>
<div class="row">
<div class="sticky">Sticky header B</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
</div>
<div class="row">
<div class="sticky">Sticky header C</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
</div>
<div class="row">
<div class="sticky">Sticky header D</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
</div>
<div class="row">
<div class="sticky">Sticky header E</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
</div>
</div>

UPDATE
please note the below is now a little out of date as we have css position sticky
Original Post
I do not think it is possible to achieve your goal through pure css as items that are sticky usually use position:fixed which unfortunately fixes them relative to the viewport.
with the use of javascript (in this case the jquery library) and absolute positioning, you should be able to achieve what you are after:
$('.main').scroll(function() {
$(this).find('.sticky').css('left', $(this).scrollLeft());
});
.main {
background-color:blue;
overflow:scroll;
height:200px;
width:400px;
}
.row {
height:50px;
overflow:scroll;
clear:both;
width:1000px;
position:relative;
background-color:yellow;
padding-left:150px;
box-sizing:border-box;
}
.sticky, .content {
float:left;
width:150px;
border:1px solid black;
}
.sticky {
background-color:red;
position:absolute; left:0; top:0;
}
.content {
background-color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>

Ok I've scrapped your thing and have made a complete new one, I've just not wrapped up things inside a position relative container but you can manage to do it atleast
The things are easy for vertical scroll but if you expect horizontal scroll and move headers along, (CSS Wont Just Do It)
Demo
CSS
.head {
background-color: #f00;
width: 300px;
position: absolute;
left: 100px;
}
.head table {
width: 100%;
}
.body {
position: relative;
left: 100px;
top: 20px;
width: 300px;
height: 50px;
overflow-y: auto;
}
.body table {
width: 100%;
}
.body td {
width: 100px;
}
.head table td {
width: 100px;
}
.left {
position: absolute;
background-color: #0f0;
width: 90px;
top: 40px;
}

Develop Reference

JavaScript is the programming language of the Web.

Is it possible to ignore mix-blend-mode of the element? - javascript

Setting z-index of the "sticky" header to any value more than 0 solves the problem. I think value should be more than z-index of the elements.

Related

Not able to put divs side by side on Firefox but works on Chrome

How to align images in card with dynamic title?

Show floated div with percentage width and different pattern

Auto-scroll to a div when clicking on another div

Horizontal scrolling with sticky div that stays on the left border

Categories

Resources