The handler must operate when you hover over an element with a class D1 and when you hover over all his children. How to do it? Tried through the cycle but confused.
<div class="d1">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita inventore nobis cum itaque unde eos aliquam labore reiciendis iusto dolore ducimus tempore quidem et nisi debitis similique ea dignissimos ex.</p>
</div>
Link to the sandbox: Fiddle
You can use mouseenter and mouseleave instead of mouseover and mouseout. These have the functionality you need, provided you're targeting the supported browsers (see links above).
Here's a working jsFiddle from your code: http://jsfiddle.net/rgthree/rs6qm9v5/2/
Related
I have two vertical Scrollbars, which are placed parallely to each other. The thing is that I'm trying to implement a lazy load to my web page, but it isn't behaving as expected.
I want to fire the lazy load event only when the inner scrollbar is actuated, actually it's being fired when the outer scrollbar is actuated.
I'll post below a code snippet (extracted from internet, not the real one) that behave a bit as I mentioned before. Let's imagine I want to display the scrollbar coords only when the inner scroll is actuated. I hope I have explained myself well
window.addEventListener('scroll', () => console.log(scrollY))
html{height:5000px}
You can use the scrollTop property on the element that has the scroll.
Having said that, I would like to mention the Intersection Observer API that monitors elements (that you specify) and fire an event when an element intersects another element (ie. when an element enters the viewport for example). It is more performant and you have better control over what should happen and when it should happen.
const inner = document.getElementById("inner");
inner.addEventListener("scroll", event => console.log(inner.scrollTop));
body {
height: 5000px;
}
.inner {
height: 250px;
width: 250px;
margin-inline: auto;
margin-top: 25vh;
overflow-y: scroll;
}
<div id="inner" class="inner">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quasi labore veniam blanditiis perferendis ex repellendus. Consectetur error veritatis maxime ut quisquam odio iste fugiat, vel, dicta iure vero mollitia? Doloribus consequuntur eos
veritatis sunt corrupti maiores alias perferendis asperiores consequatur, illo, minus aut esse placeat quam itaque quos inventore ipsa eum aperiam? Optio, labore perspiciatis! Possimus sed ipsum suscipit vel perferendis porro quaerat consequuntur.
Totam quibusdam sit quas quae delectus doloremque consequatur minima? Adipisci facere quam ipsum ex sed alias molestiae temporibus! Voluptatum cum quae molestiae, ut fuga sint atque nam placeat dolores tenetur. Doloribus odit placeat ea corrupti!
</p>
</div>
i want to make an header that acts like a button or something like this, that onclick will open underneath a text for example:
<h1>Dinosaurs</h1>
<p> Dinosaurs are ancient creatures....</p>
so if i click on my h1, it will do like an onclick event and behave like button, and open/close a paragraph text underneath
For your purposes, HTML has the <details> element, which you can style to your likings using the proper CSS.
<details>
<summary>
Dinosaurs
</summary>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
</p>
</details>
More information here https://developer.mozilla.org/de/docs/Web/HTML/Element/details and here
https://markodenic.com/html-tips/
I'm trying to create function in js to swap content of webpage using .style.display = "none" or "block" but the main problem is that there are few different divs with different id's for that. The main aim of doing this is chagning content after clicking specific buttons without loading new page. The biggest problem for me is creating script which will change "id"
independently of what id was before. Normally I could write all of id's one by one and just swap them but this is not the case. Content should be changed automatically so no matter what id was before it will replace for specific one after pressing button.
I have tried with querySelector in many ways by changing id with class, by using remove / set Attribute but none of these methods work for me. Im trying to write this fuction for 2 weeks and I don't have any ideas.
I'm worried that bootstrap classes may cause problem with this...
Can someone help me with this? Any tips?
This is my first post here so if I did something wrong, sorry for that.
I cannot paste here my code as everything is on my company laptop which I left when I was finish my job.
Here is an agnostic approach using no HTML ids or classes.
const container = document.querySelector('.container');
const buttons = container.querySelectorAll('button');
const divs = container.querySelectorAll(':scope > div');
function handleButtonClick() {
this.previousElementSibling.classList.toggle('hide');
}
buttons.forEach(button => {
button.addEventListener('click', handleButtonClick);
});
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.hide {
display: none;
}
<div class="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
</div>
jsFiddle
Problem
I have two info boxes that are display:none when a user clicks the first span.highlight shows info box to the side aside.info. If the other span is clicked it shows the alternate second info box. However, clicking on the links a second time, doesn't fade them out/back in
Previously, I didn't have a fadeOut function and instead had bg-one and bg-two fade in and out, but you would still see the previous element before the other faded in, so I feel like the problem is with my if/else statement.
JSFiddle: http://jsfiddle.net/51haqmg3/4/ (scroll until you see two highlighted phrases)
scripts.js
/*-------------------------------------
HIGHLIGHT
--------------------------------------*/
$(".highlight").click(function() {
$(".highlight").removeClass("active"); // Remove active class from spans
$(".fa-plus-circle").show(); // Show the Font Awesome icon
$(this).addClass("active"); // Add an active class to span just
$(this).find(".fa-plus-circle").hide();
$(this).data("clicked", true);
var clicked = $(".highlight").data("clicked");
if (clicked) {
$(".bg-one").fadeOut(500, function() {
$(".bg-two").fadeIn(500);
});
} else {
$(".bg-two").fadeOut(500, function() {
$(".bg-one").fadeIn(500);
});
}
});
index.html
<aside class="info bg-one">
<div class="define">
<p class="background">Background One</p>
<img src="https://placeholdit.imgix.net/~text?txtsize=21&txt=224%C3%97148&w=224&h=148" alt="">
<p class="caption"></p>
<p class="hoarding"></p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, laudantium, excepturi. Neque doloribus praesentium ad. Voluptates animi accusamus iusto laborum aperiam quis, eveniet architecto mollitia labore in laboriosam illum. Facilis.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum perspiciatis minus corporis expedita fugiat excepturi nostrum atque adipisci magnam deserunt, reprehenderit, a fugit, neque esse unde mollitia at nemo. Natus?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quas nulla, voluptatem corrupti vel, maiores delectus fuga dolorum sint, nisi suscipit deleniti, velit? Debitis maxime, necessitatibus similique saepe vel nisi!</li>
</ul>
</div><!-- /.define -->
</aside>
If you just want to detect if the first element was clicked or if it was the second one and then fade out and fade in the corresponding info boxes you could do this:
http://jsfiddle.net/so14L57w/
All I changed was the bool variable to determine which background to switch to:
var fadeOne = $(".highlight").index(this) == 0;
This isn't a great solution though since it won't scale beyond your 2 elements. However you could switch on the $(".highlight") index and load the correct background that way for more than 2 elements.
You're always setting them to true instead of toggling them on each click.
Fix this line:
$(this).data("clicked", true);
to something like:
$(this).data("clicked", !$(this).data("clicked"));
Also the whole block above it:
$(".highlight").removeClass("active"); // Remove active class from spans
$(".fa-plus-circle").show(); // Show the Font Awesome icon
$(this).addClass("active"); // Add an active class to span just
$(this).find(".fa-plus-circle").hide();
should be in the conditional in order for you to be able to cancel their action when clicked is false.
I need to design accordion in the following way... http://jsfiddle.net/gmcLnowa/1/ as shown on fiddle.
I need to two things to be fixed.
One: How to keep first Tab open by default.
Second: How to show each active tab in different colour when that particular tab contents are active or visible.
Let us say when active
Example One: In Blue colour
Example Two: in red colour
Example Three: In yellow colour.
<div id="accordion">
<ul>
<li>
Example one
</li>
<li>
Example two
</li>
<li>
Example three
</li>
</ul>
<div id="one" class="accordion">
ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
<div id="two" class="accordion">
TWO Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
<div id="three" class="accordion">
THREE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
</div>
</div>
You can trigger a click on the first anchor on ready() to show the first accordian by default: Note that you should trigger it on the native element rather than the jQuery element.
JS:
$("a").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
})
$("a:first")[0].click()
CSS:
a[href="#one"].active{
background:blue !important;
}
a[href="#two"].active{
background:red !important;
}
a[href="#three"].active{
background:yellow !important;
}
Demo
this is possible with jQuery
Example one
chage color of custom color attribute that you want
$('#accordion a').click(function(){
$('#accordion a').css('backgroundColor','transparent');
$(this).css('backgroundColor',$(this).attr('colr'));
});
fiddle
You should alter your HTML to get this effect.
Added CSS:
#accordion div#one.accordion:target + a {
color: blue;
}
#accordion div#two.accordion:target + a {
color: red;
}
#accordion div#three.accordion:target + a {
color: yellow;
}
Altered HTML: (example)
<div id="accordion">
<ul>
<li>
<div id="one" class="accordion">ONE.......</div>
Example one
</li>
<li>
<div id="two" class="accordion">TWO.........</div>
Example two
</li>
<li>
<div id="three" class="accordion">THREE........</div>
Example three
</li>
</ul>
</div>
Working Fiddle
For the first problem, I guess the only thing you can do is to append the hash #one to your page url or to use jQuery.
For the second problem, you can add this to your css:
#one {
border-color: #C00;
}
#two {
border-color: #FF0;
}
#three {
border-color: #CF0;
}