css
.image-darken {
transition: 1s;
filter: brightness (10%);
}
javascript
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
portfolioItems.forEach(portfolioItem => {
portfolioItem.addEventListener('mouseover', () => {
console.log(portfolioItem.childNodes[1].classList);
portfolioItem.childNodes[1].classList.add('image-darken');
});
});
HTML
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background"
style="background-image:url(images/portfolio1.jpg"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/quip.png">
</div>
<div class="subtitle">
I built the Quip Ecommerce platform, named a Top 25 Invention by Time
Magazine in 2016.
</div>
</div>
</div>
I want to use javascript to make it so that when I put my cursor over the image, it darkens in one second. And when my cursor leaves, it lightens in one second. I have many portfolio-item-wrapper elements. I want to use javascript because I want this to be my introduction to javascript. I am following a tutorial on youtube.
This is the tutorial video. The part with javascript comes in at about 1:14:00.
This is what the website looks like so far:
Please help me and dumb it down for me, i just started learning to code.
Thanks!
What you're aiming for is typically achieved without any JavaScript, by using the :hover CSS pseudo-class. Taking a non-JavaScript "pure CSS" approach generally allows for simpler solution that is more maintainable in the long run.
In your case, a pure CSS approach is possible by removing your JavaScript and by applying the following changes to your CSS:
/*
Not needed
.image-darken {
transition: 1s;
filter: brightness (10%);
}
*/
.portfolio-item-wrapper {
/* Add transition rule to filter property of the item wrapper */
transition: filter 1s;
}
/* Add styling that applies when the user "hovers" the element. The
"hover" will cause the filtering to be applied to this element */
.portfolio-item-wrapper:hover {
filter: brightness(10%);
}
/* Added for snippet - not needed in your code */
.portfolio-img-background {
min-height:5rem;
}
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background"
style="background-image:url(https://via.placeholder.com/150)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
I built the Quip Ecommerce platform, named a Top 25 Invention by Time
Magazine in 2016.
</div>
</div>
</div>
If you really want to take a scripted approach to this, then you could do the following:
document.querySelectorAll('.portfolio-item-wrapper')
.forEach(item => {
/* Get background element of this item */
const background = item.querySelector('.portfolio-img-background')
/* Add image-darken class to background element on hover event */
item.addEventListener('mouseover', () => {
background.classList.add('image-darken');
});
/* Add image-darken class to background element on hover end */
item.addEventListener('mouseout', () => {
background.classList.remove('image-darken');
});
});
/* Apply transition to the background element of portfolio item */
.portfolio-item-wrapper .portfolio-img-background {
transition: filter 1s;
}
/* Define image darkening */
.image-darken {
filter: brightness(10%);
}
/* Added for snippet - not needed in your code */
.portfolio-img-background {
min-height:5rem;
}
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background"
style="background-image:url(https://via.placeholder.com/150)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
I built the Quip Ecommerce platform, named a Top 25 Invention by Time
Magazine in 2016.
</div>
</div>
</div>
Hope that helps!
Another way would be to overlay the image with a grey overlay that shall enable you to have dark effect on the image in the background.
.layer {
background-color: rgba(248, 247, 216, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.card-title {
position: absolute;
top: 36%;
font-size: 2.0em;
width: 100%;
font-weight: bold;
color: #fff;
}
.card {
position: relative;
text-align: center;
}
HTMl Patch
<div class="card" id="card">
<img src="{{Path_to_featured_image}}"/>
<div class="card-title" id="card-title">{{Heading_or_slug}}</div>
</div>
JS
$( "#card-title" ).hover(
function() {
$( this ).addClass( "layer" );
}, function() {
$( this ).removeClass( "layer" );
}
);
you can also set unset the classes on realtime using Javascript if you want to control it dynamically using various parameters like id, class or even tag to select the effected element.
I advise you use JavaScript addEventListener 'hover', function(){getEl......ById....style.opacity=0.5}
Related
The issue
https://streamable.com/e/9z6lev (the flickering in the video is caused by the overlay being reopened every time meal plan is selected)
It "feels" like during the initial overlay open it's not the focused element and as result is's children can be clicked through :sad:
Overlay Template
The logic for the overlay is quite simple, and allow to nest any type of content inside:
<template>
<div class='swipeableWrapper'
#click.stop.prevent // not original code, just attempt to fix the issue
#touch.stop.prevent> // not original code, just attempt to fix the issue
<slot />
</div>
</template>
.swipeableWrapper {
height: 100%;
left: 0;
min-height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
Items List Template
<template>
<div>
...
<ListProduct v-for='(product, index) in products'
...
:showProduct='showProduct'
:key='index' />
</div>
<template>
// List Item
<template>
<div class='listProduct'
...
#click='showProduct'>
...
</div>
</template>
Intended approaches:
The following logic added to the overlay template to prevent events from bubbling:
#click.stop.prevent
#touch.stop.prevent
Global logic that will listen to opened overlay and add the following CSS class to the body element, in order to allow click on the overlay items, but still not much luck
.overlayOpened {
& * {
pointer-events: none;
touch-action: none;
}
.swipeableWrapper {
&,
& * {
pointer-events: auto;
touch-action: auto;
}
}
}
I am a bit puzzled with this dark magic behaviour and will really appreciate your opinion on the origin of the behaviour and possible solutions :bow:
Try this
#click.self.prevent="function"
Edited:
For the list item and function as prop
:showProduct="() => showProduct(item/index)"
Main page would only have several buttons that will show the user designated content.
Those buttons in #home is not in header, so buttons will be only shown on #home only.
<section id="home">
content
something
someelse
</section>
<section id="content">
<section id="something">
<section id="someelse">
I found :target method on css which seems very easy to use and works ok, but #home is not displaying.
It seems like it would only work when I have a fixed header outside section
section {
display: none;
}
section:target {
display: block;
}
Each section other than #home will have back button which will send user to #home as well. This was fairly easy on :target method because I just used a href="#", and it worked.
What other method would I be able to use ?
I can't think of any pure CSS ways to do this, but it can easily be done with a little JavaScript to check if the hash is empty, and then show #home and hide it when there is a value.
window.onhashchange = checkHash;
checkHash();
function checkHash() {
var home = document.getElementById('home');
//Check if the hash is empty
if (window.location.hash.substring(1) == '') {
home.style.display = 'block';
} else {
home.style.display = 'none';
}
}
.section {
display: none;
}
.section:target {
display: block !important;
}
<div id="home" class="section">
Content
Somthing Else
<h3>Home</h3>
</div>
<div id="content" class="section">
Home
<h3>Content</h3>
</div>
<div id="somthingElse" class="section">
Home
<h3>Somthing Else</h3>
</div>
Fade
I used position: absolute so they will stack on top of each other. z-index: -1 will keep all the rest of the sections to the clear back to stop pointer events from overlapping. opacity: 0 was obviously used for the fade.
I changed the JS script to simplify my CSS. Now when you go to example.com/html.html you get redirected to example.com/html.html#home (without a history change for the back button).
window.onhashchange = checkHash;
checkHash();
function checkHash() {
//Check if the hash is empty
if (window.location.hash.substring(1) == '') {
history.replaceState(undefined, undefined, "#home")
}
}
.section {
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity 0.5s;
}
.section:target {
z-index: 1;
opacity: 1;
}
<div id="home" class="section">
Content
Somthing Else
<h3>Home</h3>
</div>
<div id="content" class="section">
Home
<h3>Content</h3>
</div>
<div id="somthingElse" class="section">
Home
<h3>Somthing Else</h3>
</div>
I have a div with some content in it, and I am showing a button with jQuery. I want to fade it in thus I used:
setTimeout(function() {
jQuery('#button').css('opacity', 1);
}, 100);
First, on html, I have set the button's html to display:none; opacity: 0 I have achieved showing/hiding button, however when it shows, it's making the div stretch instantly. Instead, I want the parent div to expand with transition.
I have created a Fiddle: https://jsfiddle.net/atg5m6ym/7450/ . In this example, when I press the trigger button, I want the button to fade in as well as applying transition on the parent div.
For optimal performance, when using transitions and animations in CSS, you should stick to opacity and transform instead of display: none; and width/height.
Will quote the comment I stated above:
The way you designed this is not ideal, you should not be using
display: none; in transitions or animations. This will cause redrawing
in your browser, and you cannot transition properties with binary
settings, display just switches between states (ex: none/block), not
between values like opacity does.
What you could do is separate your content, sharing the same background color to simulate it is the same container.
Then use transform and the scale() function.
Code Snippet:
jQuery('#trigger').click(function() {
jQuery('.bottom-content').addClass('open');
})
.top-content,
.bottom-content {
background-color: lightblue;
}
.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #otherButton {
opacity: 1;
}
#otherButton {
margin-top: 20px;
opacity: 0;
transition: opacity 10s;
transition-delay: 250ms;
/* Separated for clarity purposes, wait for parent transition to end before starting this one*/
}
<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<section class="top-content">
<button id="trigger">
Trigger
</button>
<br />Lalala La
<br />Lalala La
<br />Lalala La
<br />
</section>
<section class="bottom-content">
<button id="otherButton">
Test Btn
</button>
</section>
</div>
</div>
The accepted answer is overkill. Just use .fadeIn() and forget the opacity and transition settings completely. If you want to have the div expand separate from the button, just apply the effect to the div and then trigger the button effect at the end of the div effect. This snippet does the same thing as the accepted answer without any of the CSS troubles:
$(function(){
jQuery('#otherButton').hide();
jQuery('#two').hide();
});
$('#trigger').click(function() {
$('#two').slideDown(2000, function(){
$('#otherButton').fadeIn();
});
})
#container, #two {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div id="content">
<button id="trigger">Trigger</button>
<br>
Lalala La<br>
Lalala La<br>
Lalala La<br>
<div id="two">
<button id="otherButton">Test Btn</button>
</div>
</div>
</div>
You can combine the jquery:
jQuery('#trigger').click(function() {
jQuery('#otherButton').slideDown(300).css('opacity', 1);
})
Note that I used the slideDown() function rather than show(). Using a transition function allows you to set an execution time. show() simply toggles the css display property, but you can not transition the display property.
Updated Fiddle
Instead of adding CSS with jQuery, you can simply add a class instead.
Set this class to whatever properties you want on it, us as:
.is-visible {
opacity: 1;
}
Example Fiddle: https://jsfiddle.net/atg5m6ym/7456/
Now, CSS doesn't like to transition when switching display: none; so instead I have simply set the height: 0; and only applied necessary styling on the .is-visible class.
I want my divs to change colour upon hovering over them, but the code is not executing even when I'm hovering. I'm not completely sure why, but I think there could possibly be an issue with the fact that I'm using a z-index on the class I want to hover over.
Html with script:
$(".eventContents").hover(
function() {
$(".eventContents").css("background-color", "yellow");
})
//making events square
var cw = $('.eventContain').width();
$('.eventContain').css({
'height': cw + 'px'
});
.eventContain {
position: relative;
margin-bottom: 10px;
z-index: -1;
background-size: cover;
}
.eventContents {
color: white;
padding: 5px;
position: absolute;
bottom: 0;
left: 0;
}
.eventContents h2 {
font-size: 2em;
font-family: 'Montserrat', sans-serif;
}
.eventContents p {
font-size: 1em;
font-family: 'Roboto', sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="events">
<row>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/leaf.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/12.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="eventContain" style="background-image:url(img/events/1.jpg)">
<div class="eventContents">
<h2 class="eventName">Title of Event</h2>
<p>short description goes about here.</p>
</div>
</div>
</div>
</row>
</section>
Here is the fiddle, the issue is more prominent here:
https://jsfiddle.net/jakexia72/x7jLp17z/#&togetherjs=os0pjD0RNr
It seems to work for me, if I understood correctly, but here's a way to hover both on and off and use this instead of .eventContents twice more..
$('.eventContents').hover(
function() {
$(this).css('background-color', 'yellow');
},
function() {
$(this).css('background-color', 'red');
}
);
fiddle
https://jsfiddle.net/Hastig/4fjn0ndb/1/
The elements are being correctly hovered and the code is getting executed I've tested it, the problem is maybe that your elements are position:absolute; and they're all in top of each other, also they don't have a defined height and it's necessary because we are talking about div elements not img, maybe you'd want to check out your code a little bit better.
You'll want to put a top:0px; to your .eventContents because it's hidden on top (at least for this example)
One last thing, if you want to refer to the actual hovered element, you should use $(this) instead of the class name because it'll execute the code for all the elements with the class and not only the hovered one.
The negative z-index is the reason why the hover is not working, to fix it, make sure that the z-index of the element you want to hover over is positive. To avoid affecting the top nav bar, move the nav bar to the bottom of the html code file allowing it to naturally appear on top of everything else, avoiding the need to use a negative z-index on eventContain.
The issue is the following :
I have a calendar in which the user can create an appointment (using DHTMLX Scheduler Timeline View), the main problem is the Scheduler doesn't support a scrollable view , only fits the schedule into the view.
I Solve the previous problem, creating a div with a FIXED width (in this way can i have a longer horizontal scheduler ) and wrapping it inside a div that allows to scroll horizontally its content.
However , I dont have a clear idea of how to solve the following problem caused :
When the calendar is loaded , you can see which div belongs to its horizontal Row
And when the user scrolls horizontal (to see 7:00 PM for example)
You cannot see in which div with color you need to create the appointment !
So i need something like this, where the div is still visible although the user scrolls horizontally :
I already tried with something like the following :
May be a problem too with the parent container, because it hides the div if the following works maybe ?
.visible-division{
position:relative; /*Because the div with color is inside a table, and i need that still floating in the same row !!*/
float:left;
z-index:9000;/*a higher z-index in case something cover the div*/
}
without any luck ..
My CSS
#calendar-container{
width: 2000px;
}
#calendario {
height: 900px;
width: 100%;
border: 1px solid #cecece;
}
.scrolling_container {
height: 100%;
overflow: auto;
}
And my Markup
<div class="scrolling_container">
<div id="calendar-container">
<div class="dhx_cal_container panel" id="calendario">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab"></div>
<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<div class="well text-right">
<div>
a link
</div>
</div>
</div>
It can be solved via CSS ? Otherwise, Should I apply classes to it in case of scroll event ?
Any help is appreciated, thanks !
This may help you do the trick.
.visible-division{
position:fixed;
width: /* specifiy */
height: /* specify */
top: /* specify */
left: /* specify */
}
.scrolling_container {
height: 100%;
overflow: auto;
}
Though not supported by most browser, you may try sticky position value position: sticky.
Hope this will be helpful, apply this class to the floating div only.
.floating{
position:fixed;
top:20px;
right:0px;
width:80%; /* as required */
}