I want to display an image if a pane of my accordion is open.
When one of the three shutters of the accordion opens, I want to show an image.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<div id="faq_slide">
<div class="question">First Question</div>
<div class="answer" name"accordeon">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>
<img id="myImgaa" src="" width="107" height="98">
<script>
$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function () {
if ($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});
function myFunction() {
const accordeon = document.querySelector('[name="accordeon"]');
if ( $(this).next(".answer").is(":visible"))
{
document.getElementById("myImgaa").src = "https://cdn.wamiz.fr/cdn-cgi/image/format=auto,quality=80,width=776,height=388,fit=cover/article/main-picture/chat-souris-main-5f4e10068679c.jpg";
} else {
document.getElementById("myImgaa").src = "";
}
}
</script>
A couple of issues with your current code.
There's an error in your HTML markup - name"accordeon" should be name="accordeon". That's one of the reasons your code is not working.
The second issue is that you're not calling myFunction anywhere, you're just defining it.
And there's no real need to have a separate function like that (that I can see from your current code). A better thing to do would be to dismantle it, and use its parts in your click event handler, but the logic would be counterintuitive.
$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function () {
if ($(this).next(".answer").is(":visible")) {
$("#myImgaa").attr("src","");
$(this).next(".answer").slideUp(300);
} else {
$("#myImgaa").attr("src","https://cdn.wamiz.fr/cdn-cgi/image/format=auto,quality=80,width=776,height=388,fit=cover/article/main-picture/chat-souris-main-5f4e10068679c.jpg");
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="faq_slide">
<div class="question">First Question</div>
<div class="answer" name="accordeon">Lorem ipsum dolor sit amet.</div>
<div class="question">Second Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
<div class="question">Third Question</div>
<div class="answer">Lorem ipsum dolor sit amet.</div>
</div>
<img id="myImgaa" src="" width="107" height="98">
As you can see, I've placed the img source clearing in the if is visible part of your check, and the image showing in the else part of it (that's the counterintuitive part).
An additional change to your original code involves making everything use jQuery - while you can mix vanilla JS and jQuery, stick to using one of them.
As an aside - consider hiding the image instead of removing its source (unless there's a really good reason for removing it).
I don't think you can use this here:
function myFunction() {
const accordeon = document.querySelector('[name="accordeon"]');
if ( $(this).next(".answer").is(":visible")){
document.getElementById("myImgaa").src = "https://cdn.wamiz.fr/cdn-cgi/image/format=auto,quality=80,width=776,height=388,fit=cover/article/main-picture/chat-souris-main-5f4e10068679c.jpg";
} else {
document.getElementById("myImgaa").src = "";
}
}
Not sure when your function is called but try:
function myFunction() {
const accordeon = document.querySelector('[name="accordeon"]');
if ( $("#faq_slide .question").next(".answer").is(":visible")){
document.getElementById("myImgaa").src = "https://cdn.wamiz.fr/cdn-cgi/image/format=auto,quality=80,width=776,height=388,fit=cover/article/main-picture/chat-souris-main-5f4e10068679c.jpg";
} else {
document.getElementById("myImgaa").src = "";
}
}
Related
I'm not sure why my code is not responding, everything looks correct to me. I'm new to using jQuery and trying to use toggleClass to have card info displayed when the card on my page is clicked. Initially, I'd like it to be hidden but able to be toggled on and off.
$(document).ready(function() {
$('.card').click(function() {
$(this).toggleClass('inner-card.active');
});
});
.card {
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.inner-card .active {
display: none;
}
.inner-card {
display: flex;
flex-direction: column;
justify-content: end;
background: rgba(255, 165, 0, 0.5)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
It should go from this
To this
I believe there are several problems. First of all, I believe you want to write the display:none CSS logic this way:
.inner-card.active{
display: none;
}
This means that the inner card will be hidden if it also has the active class.
Secondly, I believe you need to rewrite the script this way:
$(document).ready( function(){
$('.card').click( function() {
$(this).find(".inner-card").toggleClass('active');
});
});
When you use the toggleClass you need to use just the name of the class, not the selector (-> no dot). Also, from the CSS, it looks like you need to find the inner card element first.
Fiddle link
You probably want something like this:
$(document).ready(function() {
$('.card').click(function() {
$(this).find(".inner-card").toggleClass('hidden');
});
});
.card {
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.hidden {
display: none !important;
}
.inner-card {
display: flex;
flex-direction: column;
justify-content: end;
background: rgba(255, 165, 0, 0.5)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="inner-card hidden">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="magnify lens">
</div>
</div>
</div>
Here's my css code and HTML. Whenever a line in my carousel-caption becomes too long it falls off the image. When I minimize the window, however, the caption eventually moves into the image creating the effect I really want. Wondering how I can contain it to the image? Thanks for the help - because I am relatively new to CSS/BOOTSTRAP styling.
* {
margin: 0;
padding: 0;
}
a {
background-color: transparent !important;
color: white;
}
img {
max-width: 100%;
max-height: 80vh;
margin: auto;
}
.carousel-caption {
padding: 30px;
background-color:transparent !important;
position: absolute;
}
.picsum-img-wrapper {
padding-bottom: 20px;
padding-top: 20px;
background-color: #8E9AAF ;
color: white;
font-size: 20px;
font-family: orpheuspro, serif;
font-style: normal;
font-weight: 600 !important;
display: grid;
height: 100%;
}
h3 {
background-color: transparent !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ngb-carousel [showNavigationArrows]="true"
[showNavigationIndicators]="true"
interval="12000"
[keyboard]="true"
[pauseOnHover]="true"
[wrap]="true"
[activeId]="'secondSlide'"
[interval]="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="../../assets/img/actual.png" alt="Angular Carousel 1">
<div class="carousel-caption">
<h3>Title Goes Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.. To read on click <a routerLink="/blog/1">here</a></p>
</div>
</div>
</ng-template>
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="../../assets/img/image0.jpeg" alt="Angular Carousel 2">
<div class="carousel-caption">
<h3>Title Goes Here</h3>
<p>Consectetur tortor volutpat pretium... To read on click <a routerLink="/blog/2">here</a></p>
</div>
</div>
</ng-template>
</ngb-carousel>
Using Javascript, I have multiple element and when I hover that element, it changes the content and element.
I tried using mouseover and mouseout, it's working for single element, but doesn't work when I have multiple element.
I add loops for the parent, but still not working, also now when I hover the first element, it's just looping over.
What am I doing wrong?
const wrapper = document.querySelectorAll(".wrapper");
wrapper.forEach(function () {
let mouseWhite = document.querySelector(".commercial-white");
let mouseBlue = document.querySelector(".commercial-blue");
mouseWhite.addEventListener("mouseover", function (e) {
mouseBlue.classList.add("open");
e.stopPropagation();
})
mouseBlue.addEventListener("mouseout", function (e) {
mouseBlue.classList.remove("open");
e.stopPropagation();
})
})
.wrapper {
display: flex;
position: relative;
}
.commercial-white {
background-color: #f1f1f4;
width: 240px;
height: 260px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 15px solid #005da0;
margin: 10px;
}
.commercial-blue {
position: absolute;
background-color: #005da0;
color: #FFFFFF;
width: 240px;
height: 273px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px;
border: 2px solid #FFFFFF;
visibility: hidden;
}
.open.commercial-blue {
visibility: visible;
}
.commercial-flip {
padding: 20px;
}
<div class="wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
<h1>Your title</h1>
</div>
</div>
<div class="commercial-blue">
<div class="commercial-flip">
<img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
<h1>Lorem Ipsum</h1>
<p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
<h1>Your title</h1>
</div>
</div>
<div class="commercial-blue">
<div class="commercial-flip">
<img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
<h1>Lorem Ipsum</h1>
<p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
</div>
</div>
</div>
You need to 'querySelect' on each wrapper, not the document because in your code document.querySelector(".commercial-white") will only give you the first occurence of .commercial-white .. and it will do that twice, but it will still be the same occurence... the first one in the document (twice).
Your querySelectorAll gave you a NodeList of elements wrapper.
forEach will go through each element of your NodeList (kind of) like an array. wrapper[0] wrapper[1]...
The argument aWrapper is just the name for "The current element being processed in the NodeList".
This way, aWrapper.querySelector will only "select" within the current element wrapper in the loop.
wrapper.forEach(function (aWrapper) {
let mouseWhite = aWrapper.querySelector(".commercial-white");
let mouseBlue = aWrapper.querySelector(".commercial-blue");
const wrapper = document.querySelectorAll(".wrapper");
wrapper.forEach(function(aWrapper) {
let mouseWhite = aWrapper.querySelector(".commercial-white");
let mouseBlue = aWrapper.querySelector(".commercial-blue");
mouseWhite.addEventListener("mouseenter", function(e) {
console.log("e.target.classList mouseWhite :", e.target.classList);
mouseBlue.classList.toggle("open");
})
mouseBlue.addEventListener("mouseout", function(e) {
console.log("e.target.classList mouseBlue :", e.target.classList);
mouseBlue.classList.toggle("open");
})
})
.wrapper {
display: flex;
position: relative;
}
.commercial-white {
background-color: #f1f1f4;
width: 240px;
height: 260px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 15px solid #005da0;
margin: 10px;
}
.commercial-blue {
position: absolute;
background-color: #005da0;
color: #FFFFFF;
width: 240px;
height: 273px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px;
border: 2px solid #FFFFFF;
visibility: hidden;
}
.open.commercial-blue {
visibility: visible;
}
.commercial-flip {
padding: 20px;
pointer-events: none;
}
<div class="wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
<h1>Your title</h1>
</div>
</div>
<div class="commercial-blue">
<div class="commercial-flip">
<img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
<h1>Lorem Ipsum</h1>
<p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="commercial-white">
<div class="commercial-flip">
<img style="width:100px" src="http://g-ec2.images-amazon.com/images/G/31/img14/anywhere/amazon-logo-500500._V327001990_.jpg">
<h1>Your title</h1>
</div>
</div>
<div class="commercial-blue">
<div class="commercial-flip">
<img style="width:100px" src="https://images-na.ssl-images-amazon.com/images/G/01/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_us-main._CB468775337_.png">
<h1>Lorem Ipsum</h1>
<p>lorem ipsum dolor si amet lorem ipsum dolor si amet lorem ipsum dolor si amet</p>
</div>
</div>
</div>
Edit :
For the buggy display I just added "pointer-events: none;" to .commercial-flip and it was enough :
.commercial-flip {
padding: 20px;
pointer-events: none; }
I am fairly new to JS (so I may be wrong), but if I understand correctly, it work because if .commercial-flip can receive pointer events then when it's hovered, it's parent is not.
Before this modification, as long as you didn't enter the border of .commercial-flip it worked just fine.
So apparently hovering a child isn't the same as hovering it's parent if the child can catch the event, but if it can't it's all good.
Edit : Preventing Child from firing parent's click event
Note : I used classList.toggle instead of classList.add and classList.remove, and mousenter instead of mouseover but it's just a personal preference here ; it gives the exact same result.
You have to query the childs:
wrapper.forEach(function (el) {
let mouseWhite = el.querySelector(".commercial-white");
let mouseBlue = el.querySelector(".commercial-blue");
....
You're looping over each one but using the same selector which causes some issues. Just change your loop to the following so there's a reference to each element:
wrapper.forEach(function (el) {
let mouseWhite = el.querySelector(".commercial-white");
let mouseBlue = el.querySelector(".commercial-blue");
mouseWhite.addEventListener("mouseover", function (e) {
mouseBlue.classList.add("open");
e.stopPropagation();
})
mouseBlue.addEventListener("mouseout", function (e) {
mouseBlue.classList.remove("open");
e.stopPropagation();
})
})
I have made a simple lay-out for a div I want on my website. The div handles the news about the page.
The div looks like this: http://jsfiddle.net/6baouaLt/
The thing is that I want to have multiple news content in the same div, for example every 5 seconds the current new will scroll down and vanish with lets say overflow: hidden and then another new appears from the top of the div scrolled down.
EDIT: I have made a basic picture of how it should be done:
I hope you understand what I mean, Otherwise I can explain further more.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>News div</title>
<style type="text/css">
div.newswrap
{
width: 522px;
box-shadow: 0 10px 5px #c9c9c9;
}
div.newstitle
{
background-color: #54B3F4;
display: inline-block;
margin-right: -4px;
border-right: 1px solid black;
padding: 5px 10px;
}
div.newscontent
{
display: inline-block;
background-color: #f49554;
padding: 5px 10px;
}
.newstitle > span
{
font-family: sans-serif;
font-weight: 600;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div class="newswrap">
<div class="newstitle">
<span>NEWS</span>
</div>
<div class="newscontent">
<span class="newsspan">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati</span>
</div>
</div>
</body>
</html>
I'm trying to move a div inside a container div to another container div using jQuery sortable api. I have added the code in jquery ready function but for some reason it doesn't work.
Here is the code I added:
$(".portlet-content").sortable({
connectWith: ".portlet-content"
});
I'm adding the complete code below for proper understanding. Any help will be highly appreciated. Thanks in advance :)
<html>
<head>
<title>Javascript Create Div Element Dynamically</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style type="text/css">
body {
min-width: 520px;
background-color: dimgray;
}
.column {
width: 230px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
background-color: lightgray;
border: 2px solid white;
}
.portlet-content:hover {
background-color: lightblue;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
div {
min-height: 20px;
}
</style>
<script type="text/javascript" language="javascript">
$(function () {
$(".column").sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".portlet-content").sortable({
connectWith: ".portlet-content"
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all");
});
</script>
</head>
<body>
<div class="column">
<div class='portlet'>
<div class='portlet-header'><span class='rubrik'>Section 1</span></div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class='portlet'>
<div class='portlet-header'><span class='rubrik'>Section 2</span></div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</body>
</html>
$(".portlet").sortable({
connectWith: ".portlet",
items: ".portlet-content"
});