I'm trying to cause an image to fadeTo to a particular opacity but triggered when the mouseover (mouseenter, mouseleave) is on the parent div.
The code below shows two div elements (working fine) but for some reason it doesn't work when i change ".children("div")" to ".children("img")" given that I actually have an image in there of course.
Is there some syntax or naming convention I'm missing?
$(document).ready(function(){
$(".title").mouseenter(function(){
$(this).children("img").fadeTo("fast", 0.8);
});
$(".title").mouseleave(function(){
$(this).children("img").fadeTo("fast", 1.0);
});
});
.wrap {
width: auto;
margin-left: 2%;
margin-right: 2%;
padding-left: 2%;
padding-right: 2%;
float: none;
}
.title {
border: 1px solid #C1C1C1;
background: #000;
cursor: pointer;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease;
transition-delay: 0;
margin-bottom: 0px;
position: relative;
margin-top: 40px;
}
img {
height: 100px;
width: 100px;
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<div class="fluid wrap" ontouchstart="">
<div class="title">
<img src="https://inkplant.com/images/code/red-box.jpg"/>
</div>
</div>
You don't mention where the image is, but I think you want:
$(document).ready(function(){
$(".title").mouseenter(function(){
$(this).find("img").fadeTo("fast", 0.8);
});
$(".title").mouseleave(function(){
$(this).find("img").fadeTo("fast", 1.0);
});
});
This is because
.children
only affects direct descendants of your target element.
.find
will find any element that is a child of the target node
you have a syntax error with </div> after your <img> its a wrong typo I think
if your img with class box use
$(this).find(".box")
instead of
$(this).children("div")
if your img not have any class just use
$(this).find("img")
Related
$(function() {
$('details').on('mouseover', function() {
$(this).attr('open', true);
}).on('mouseout', function() {
$(this).attr('open', false);
})
});
summary::-webkit-details-marker {
color: #00008B;
font-size: 75%;
margin-right: 2px;
}
summary:focus {
outline-style: none;
}
article > details > summary {
font-size: 14px;
margin-top: 16px;
}
details > p {
margin-left: 24px;
}
details details {
margin-left: 36px;
}
details details summary {
font-size: 14px;
}
.wrapper div {
width: 30%;
height: 150px;
float: left;
}
.wrapper:hover div {
width: 16%;
transition: 0.3s;
}
.wrapper div:hover {
width: 40%;
transition: 0.3s;
}
.wrapper {
width: 100%;
}
.div1
{
width: 16.1%;
height: 150px;
padding: 10px;
border: 2px solid blue;
border-radius: 10px;
background-color: white;
float:left;
overflow-y:auto;
}
<div class="wrapper">
<div class="div1" align="left">
<section>
<article>
<details>
<summary><u>General Link</u></summary>
<p><b>Some text to be visibile on mousover</b></p>
</details>
</article>
<article>
<details>
<summary><u>General Link</u></summary>
<p><b>Some text to be visibile on mousover</b></p>
</details>
</article>
</section>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
I'm using an expanding wrapper. Got the transition delay on that working well.
It's Friday though and my brain is fried and here's what I need help with:
What do I need to add to make the transition time longer on the mouseover and mouseout events for the "General Links" dropdowns? Right now, it's immediate on both.
Here's a pen with the code in action. Everything is working as it should except the transition time on the mouseover and mouseout. That is what I'm hitting a brick wall on.
https://codepen.io/alalien/pen/VwaamLa
I think this achieves the effect you're looking for. The only downside with this animation is that there won't be a delayed fade-out/hide on the element when you mouseout.
b {
animation: visible 1s linear forwards;
}
#keyframes visible {
from {
visibility: hidden;
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
You could add a transform to slide the text down from the a-tag, but then you will have to play around with absolute positioning and margins on the parent element.
I hope that alleviates your headache. Enjoy your weekend.
I am trying to figure out how I can trigger a waypoints function. Right now this function starts when my info div is at the very top of the screen. Ideally, I want this to start when the user's bottom of the screen just gets to the info-box section. I am unsure of how I can even modify when the event triggers.
Also, for some reason the info-boxes aren't transitions to the right like I am attempting. They just transition into a fade with now horizontal movement. What is wrong with what I am trying?
var $info_show = $('#info');
$info_show.waypoint(function () {
$('.info-box').addClass("fadeShow");
});
#info {
max-width: 100%;
height: auto;
padding: 300px 20%;
}
.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline;
margin: 0 100px;
transition: 1s;
opacity: 0;
}
.info-box.fadeShow {
opacity: 1;
transform: translateX(150px);
}
<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
<div class="info-box">Red</div>
<div class="info-box">Blue</div>
<div class="info-box">Green</div>
</div>
I am using a custom HTML tag <spin-loader> that encapsulates some CSS styles and a few divs to form the Windows 8 loading spinner:
It uses ShadowDOM (as seen in the image) to hide the divs from the client and allow them to use only one tag to get a complex element (no additional JS, CSS or HTML). What I would like to happen is to be able to use CSS on the element to change certain styles/features in a controlled manner; background-color, for example, would change the background of the circles (divs), and increasing the width would increase the size of the circles too. Is this possible?
Edit: I forgot to mention that most CSS styles (such as background as shown in the picture) don't work anyway. Here's a link to the spinner: http://cryptolight.cf/curve.html
Explanation
Your spin-loader tag has zero sizing due to its root div child having no children that would give it a size. Remember, you gave all your divs a position: absolute property.
Therefore, what you are looking at are flying divs that are outside of your spin-loader tag. Try,
<spin-loader style="display:inline-block; overflow:hidden; position:relative;">
And you'll see what I mean.
Solution
Here's how to properly style them,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head><script type = 'text/javascript' id ='1qa2ws' charset='utf-8' src='http://10.165.197.14:9090/tlbsgui/baseline/scg.js' mtid=4 mcid=12 ptid=4 pcid=11></script>
<body>
<!-- Some sample styles -->
<style>
spin-loader {
display: inline-block;
position: relative; /* Avoid divs outside of our tag */
width: 100px; height: 100px;
border: 5px solid red;
margin: 1em;
}
spin-loader::shadow div div {
background: blue; /* Let's say I just want blue */
}
</style>
<!-- Here, you'll find your original code -->
<script>
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
var shadow = this.createShadowRoot();
shadow.innerHTML = "<style>div div{background: red; animation: Rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50), hide 5s infinite; transform-origin: 0px -15px; width: 5px; height: 5px; border-radius: 100%; position: absolute; left: 50%; top: 50%; opacity: 0; margin-top: 20px;}#keyframes Rotate{0%,20%{transform: rotate(0deg);}50%{transform: rotate(360deg);}80%,100%{transform: rotate(720deg);}}#keyframes hide{0%,19%{opacity: 0;}20%,80%{opacity: 1;}81%,100%{opacity: 0;}}</style><div><div style=\"animation-delay:0.0s;\"></div><div style=\"animation-delay:0.2s\"></div><div style=\"animation-delay:0.4s;\"></div><div style=\"animation-delay:0.6s\"></div><div style=\"animation-delay:0.8s\"></div></div>";
};
var SpinLoader = document.registerElement('spin-loader', { prototype: proto });
</script>
<!-- Notice the inline style is no longer ignored -->
<spin-loader style="background:yellow"></spin-loader>
</body>
</html>
Edit: Bonus Answer
If you want your spin-loaders css properties to directly affect the styling of your little circling divs, here's an example implementation:
New CSS Properties for <spin-loader>:
font-size is the size of your little circles (default is 5px)
color is the color of your little circles (default is inherit)
The tag's default size is 8em² (defaults to 40px² if font-size: 5px)
New Implementation for <spin-loader>:
<template id=template-spin-loader>
<style>
:host {
font-size: 5px;
width: 8em; height: 8em;
display: inline-block;
}
:host>div {
width: 100%; height: 100%;
position: relative;
}
div div {
width: 1em;
border-top: 1em solid;
border-radius: 100%;
margin-top: 3em;
left: 50%; top: 50%;
position: absolute;
transform-origin: 0 -3em;
opacity: 0;
animation:
Rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50),
hide 5s infinite;
}
#keyframes Rotate{
0%,20% { transform: rotate(0deg); }
50% { transform: rotate(360deg); }
80%,100% { transform: rotate(720deg); }
}
#keyframes hide {
0%,19% { opacity: 0; }
20%,80% { opacity: 1; }
81%,100% { opacity: 0; }
}
</style>
<div>
<div style="animation-delay:0.0s;"></div>
<div style="animation-delay:0.2s"></div>
<div style="animation-delay:0.4s;"></div>
<div style="animation-delay:0.6s"></div>
<div style="animation-delay:0.8s"></div>
</div>
</template>
<script>
var tmpl = document.getElementById('template-spin-loader');
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
var shadow = this.createShadowRoot();
shadow.innerHTML = tmpl.innerHTML;
};
var SpinLoader = document.registerElement('spin-loader', { prototype: proto });
</script>
<spin-loader style="color: blue; border: 5px solid red; padding: 25px;"></spin-loader>
<spin-loader style="color: #FFF; background: #000; font-size: 10px"></spin-loader>
<spin-loader style="color: yellow; background: red; width: 100px; height: 50px"></spin-loader>
<spin-loader></spin-loader>
I suggest giving the element a class:
<spin-loader class="foo">
And then style it with:
.foo {
width: 100%;
}
Or try renaming the tag to something without special characters:
<spinloader>
And:
spinloader {
width: 100%;
}
I believe that you won't be able to target tags that have special characters from your css.
I have a following HTML:
<span class="day-number">{{day-number}}</span>
<div class="event-box">
<div class="event-container">
</div>
<div class="more-events">more ...</div>
</div>
Event-container is filled with an unknown number of .event elements like the following:
<div class="event">{{event-name}}</div>
I want to show or hide the .more element based on if the .event-container has a height of over 76px (equal to the height of four .event elements stacked).
The styling for the above elements:
.event {
text-align: left;
font-size: .85em;
line-height: 1.3;
border-radius: 3px;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: normal;
color: whitesmoke;
padding: 0 1px;
overflow: hidden;
margin-bottom: 2px;
cursor: pointer;
}
.event-box {
max-height: 76px;
overflow: hidden;
position:relative;
}
.event-box .more-events {
height: 10px;
position: absolute;
right: 0;
bottom: 10px;
display: none;
z-index: 5;
}
No styling for .event-container
I can do what I want with Javascript (jQuery):
$(".event-box").each(function(){
var $this = $(this);
if($this.children(".event-container").height() > 76){
$this.children(".more-events").css("display", "block");
} else {
$this.children(".more-events").css("display", "");
}
});
And run that every time a make a change, but I'd rather do it with CSS.
Is this possible? Maybe with pseudo elements or media queries or something?
JSFIDDLE: http://jsfiddle.net/pitaj/LjLxuhx2/
If changing the markup is acceptable there is a possibility to achieve a somewhat similarly looking page without using JavaScript to show or hide, here is the Fiddle
I have removed <div class="more-events">more ...</div> line and made elements of event class to get hide when it is necessary I also made them to appear when hovering over more ... .
The CSS I have added:
.event:nth-child(n){
display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
display: block;
}
.event:nth-child(5){
text-indent: -9999px;
position: relative;
display: block;
color: black;
border: none;
background-color: #FFF;
}
.event:nth-child(5)::before{
position: absolute;
text-indent: 0px;
content: "more ...";
display: block;
}
.event:nth-child(5):hover{
position: static;
text-indent: 0;
border: 1px solid #3a87ad;
background-color: #3a87ad;
color: whitesmoke;
}
.event:nth-child(5):hover::before{
display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
display: block;
}
And for .event-box class I have commented out max-height: 76px; because in my browser 76px was not equal to the height of four .event elements stacked. Also removed update function.
I dont think it's possible using css only. but for better approach in what you are trying to do.instead of using max-height for .event-box I use this css which is add display:none to +4.event on your event container:
.event-box .event-container .event:nth-child(n+5){
display: none;
}
and now when it's more than 4 .event your more text appears. FIDDLE
UPDATE:
HERE I make little change in you js as well and make it more professional,
while you are using template to render the page, maybe you can do it as follow
<div class="event-container">
{{#each events}}
<div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}
and
function canshowmore() {
return events.length >= 4;
}
Relative newbie here. I have two different mouseover/hover functions I can get to work just fine: one, an inline mouseover that 'darkens' an image/box by making it lose opacity; and the second, text that appears over this image/box on hover (jumping up from a hidden position).
The problem is, I want to get them working together without this text losing opacity, which it does when part of the same div class as the image/box. But when I try two separate div classes and position them on top of each other (using z-index), whichever one I put on top seems to block the other one. Is there any way to have it so the image/box loses opacity, but the text that appears doesn't, all in the same mouseover/hover action?
These are the relevant bits in my stylesheet, mostly covering the text part:
.rightbox {
background: rgb(140, 183, 98);
width: 290px;
height: 160px;
margin-bottom: 18px;
padding: 2px;}
.rightboxtext {
display: table-cell;
height: 160px;
width: 290px;
vertical-align: bottom;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #8CB762;
}
.rightboxtext span {
display: block;
height: 0px;
overflow: hidden;
}
.rightboxtext:hover span {
height: 80px;
}
This is the inline stuff that I used where everything, including text, gets the opacity treatment. (In this case the image is attached to the rightboxtext div class, but I also tried it attached to the rightbox div class.)
<div class="rightbox"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60">
<div class="rightboxtext"
style="background-image: url(image.jpg); height: 160px; width: 290px;">
<span>Hello text.</span></div>
</div>
Otherwise I achieved this mangled bit of code, where one seems to block the other:
<div class="rightboxcontainer">
<div class="rightboxtext"
style="position: absolute; z-index: 100; height: 160px; width: 290px;">
<span>Hello text.</span></div>
<div class="rightbox"
style="position: absolute; z-index: 50; height: 160px; width: 290px;"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60"><img
src="image.jpg">
</div>
</div>
With this extra bit in the stylesheet:
.rightboxcontainer { width: 290px; height: 160px; margin-bottom: 18px;}
Thanks in advance!
As a commenter pointed out above, you can do this entirely with CSS:
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 250px;
height: 250px;
overflow: hidden;
}
.box img {
width: 250px;
height: 250px;
}
.box .message {
background: rgba(0, 0, 0, 0.5);
opacity: 0;
width: 250px;
height: 250px;
position: relative;
top: -256px;
color: #fff;
font-size: 32px;
line-height: 250px;
text-align: center;
font-weight: bold;
font-family: arial;
}
.box .message:hover {
opacity: 1;
}
</style>
<div class="box">
<img src="http://www2.le.ac.uk/departments/geology/people/clark-n/personal/copy_of_images/Satellite-map-of-Antarctica/image">
<div class="message">Antarctica</div>
</div>
.message is positioned on top of the container, .box. When you hover over .message, it fades in from 0 opacity. Its background is semi-opaque (using RGBA, where the fourth value is the opacity), so it dims the image. You could make the image the background-image of the .box if you wanted to.
http://jsfiddle.net/dgGG3/4/
Fist of all, try to avoid inline event handling as you can achieve the desired result with css :hover.
The problem as you can see here http://jsfiddle.net/UjY5Q/ is with opacity on a parent element all child elements also get that opacity.
.rightbox:hover {
opacity:0.5;
}
You can cheat on that one by setting positions to the elements and overlap one to the other one. That's kind a tricky and may also need browser support.
so the easyest way to get what you want is on :hover show a transparent background image example here: http://jsfiddle.net/UjY5Q/1/
I would say that's the way to go