I have a template that I'm creating for colleagues to use in a WYSIWYG editor (am a teacher) with an accordion so they can easily add content to each one of them. It will have surplus headers/content for colleagues to use but that doesn't show any that has something like "title_name" as the text of the header.
The HTML is:
<div class="accordion">
<div class="card">
<div class="card-header" data-toggle="collapse">
<h2 class="card-title">
Accordion 1
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 1 of 4 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 2 of 4 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 3
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 3 of 4 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
title_name
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 4 of 4 content here.</p>
</div>
</div>
</div>
</div>
The jquery that I have is
$(".card-header").each(function(){ ($(this).text() === "title_name") ? $(this).hide() : $(this).show()});
Help will be greatly appreciated :)
You can use :contains of jquery. Since you are having h2 tag inside div of class card-header, jquery is not able to get the text of title_name. I verified this code should work.
$("div.card-header:contains(title_name)").hide();
Related
I want the addToCartBar show when the mouse enters the any of the grid-items , it should appear on that grid item only, however it is just working on the first one. What am i doing wrong.
Here is the necessary ejs code
<div class="main-cont">
<div class="grid-container">
<div class="grid-item grid-item-1">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-2">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img class="rotated-img" src="/AdidasAce.png" alt="">
</div>
<div class="card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-3">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-4">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-5">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-6">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
</div>
</div>
Here is the JS for it
// //Hover Effect On Grid-Item
let cardItems = document.querySelectorAll('.grid-item');
let addToCartBar = document.querySelector('.add-to-cart')
for (let cardItem of cardItems) {
cardItem.addEventListener('mouseenter' , () => {
addToCartBar.style.display = "flex"
})
}
I know that the above code loops through the array of cardItems and for each one, it applies the function so I have no idea what I am doing wrong. Any help is appreciated. Thank you.
The problem is that you actually change the display property of the first card item's button every time because of let addToCartBar = document.querySelector('.add-to-cart'). This will traverse the dom and grab the first matching element. In order to achieve what you want you have to query inside each cardItem like below:
// //Hover Effect On Grid-Item
let cardItems = document.querySelectorAll('.grid-item');
for (let cardItem of cardItems) {
cardItem.addEventListener('mouseenter' , () => {
let addToCartBar = cardItem.querySelector('.add-to-cart')
addToCartBar.style.display = "flex"
})
}
For the posted code i believe this answers you question:
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
So you are applying the event listeners callback to a single element, you can select multiple elements with the .querySelectorAll() .
As well you can use the hover css selector which will simplify your code.
You can create a separate css file and link it into your js file or add the snipet directly into your javascript code.
.add-to-card:hover {
//add wanted behaviour here
}
You can read more about css selectors here
I'm looking to get my highlighter (blue bar) to stay on the element that is clicked on. I want to keep the hover animation but also include the option to have it stay on the <div> the user clicks. Any insight is greatly appreciated.
Pen: https://codepen.io/chriskaram/pen/eGXrOp
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment</h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Apprentice Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1"></span>
<span class="demo__hover demo__hover-2"></span>
<span class="demo__hover demo__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Apprentice Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In this example, I just focused on demo__element-3.
Check this link: https://codepen.io/anon/pen/GMbYdz
These are the modifications to be made:
CSS:
Add .active to all demo__hover-3:hover styles(in css).
(ie, add .demo__hover-3.active to .demo__hover-3:hover)
Element:
Add class
active to demo__hover elements.
(in this case, it become
<span class="demo__hover demo__hover-3 active"></span>)
Jquery:
Add jquery to add active to element if user clicks it.
Just like the bootstrap manu when you click one option it will add a class 'active' to element <li>
I'm using scrollmagic to display content in a project I'm currently working on. The design I have uses 'wedges' at the top and bottom of the containers. I have managed to achieve the result that I want using an svg for the 'wedge' and by sticking the first one to the top of the page with a z-index: 1;
As a result this layer overlays the rest of the content that subsequently follows. Please see the codepen below.
http://codepen.io/oliver_randell/pen/MyLNON
I really need to be able to click the buttons in the promo boxes!
Any help would be greatly appreciated.
<section id="intro" class="intro">
<div class="content">
<div class="row">
<div class="medium-10 medium-offset-1 large-8 large-offset-2 columns">
<div class="fade-trigger"></div>
<h2>Intro title</h2>
<h3>Intro Subtitle</h3>
<p>Some extract text</p>
</div>
</div>
</div>
</section>
<section class="promo-boxes">
<!-- THIS IS WHERE THE TOP WEDGE NEEDS TO SIT -->
<div id="pinned-trigger1">
<div id="pinned-element1">
<div class="top-wedge"></div>
</div>
</div>
<!-- BOX 1 -->
<div id="pinned-trigger2" class="promo box1 full-screen">
<div id="pinned-element2">
<div class="wrapper">
<div class="content">
<div class="img-container">
<div class="img" style="background-image: url('https://unsplash.it/800/800');"></div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-trigger4" class="promo box3">
<div class="content">
<div class="img-container">
<div class="img" style="backgroundimage:url('img-link.png');">
</div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
Button 2
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-element4">
<div class="bottom-wedge show-for-large"></div>
</div>
</div>
</section>
<section class="next-section full-screen">
<h2>this is the next section</h2>
</section>
So... I just added:
#pinned-trigger1 {
position-events: none;
}
And voila!!
Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>
If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}
I want my fluid boxes to take all the content. This is what I get now:
And this is what I am looking for:
I am using the Twitter bootstrap.
Here is the jsfiddle, exactly like my layout shows:
http://jsfiddle.net/jUQEc/
Current html markup:
<div class="container-narrow">
<h4 class="title">Featured Companies</h4>
<div class="row-fluid" id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
<div class="span6 item">
<h4 class="title">Company Details</h4>
<div class="box">
test
</div>
</div>
<div class="span3 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span3 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
</div>
</div>
<div class="span4 item">
<h4 class="title">Company News</h4>
<div class="box">
test<br>test<br>test
</div>
</div>
</div>
</div>
Thanks.
You should put a width on the 3rd box and then float it right. If it fits, it will sneak up and fill in the space you are looking for. Perhaps you should brush up on how floats work and take a look at how this applies to divs in bootstrap. Hope this helps!