I found a great codepen for displaying team members. The problem, when you add html above it, the hover effects go berzerk. You should only get hover effects when you hover over a person (which is exactly what happens in the original code pen: http://codepen.io/solutiondrop/pen/IqKhk)
<script type="text/javascript" src="//use.typekit.net/npe3lft.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<div class="wrapper--team">
<div class="l-container">
<div class="team-grid">
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Robert Finkel</h3>
<p class="member__title">Rootmaster</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/robert-finkel_2.jpg" alt="Robert Finkel">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Randy Mosher</h3>
<p class="member__title">Alchemist</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/randy-mosher.jpg" alt="Randy Mosher">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">BJ Pichman</h3>
<p class="member__title">Operations Manager</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/mrch8596.jpg" alt="BJ Pichman">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Jacqueline Armanetti</h3>
<p class="member__title">Brand Ambassador</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/jacqueline-armanetti.jpg" alt="Jacqueline Armanetti">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Romy Seth</h3>
<p class="member__title">Analyst</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/romy-seth.jpg" alt="Romy Seth">
</div>
</div>
</div>
</div>
However, when I add a little html above the original html in my own implementation, (like the two divs below the hover) behavior breaks.
<div></div>
<div><span><br>if you hover on this text on the white region over the images,
weird stuff happens. <br>The javascript should only be triggered if you hover over a person (scroll down to see)</span>
</div>
After I add my little divs above the fancy codepen stuff, the pages provides information when you hover on the new, preceding white-region, instead of when you hover over the team member. Here is the codepen showing the broken version, with the little bit of preceding html: http://codepen.io/ihatecoding/pen/zqqyVj .
Why on earth could this be happening and how do I fix it?
The problem is with your .member-info class... Use chrome developer tools to easily debug this problem.
CodePen: http://codepen.io/anon/pen/wGGNmd#0
Your CSS:
.member__info {
color: #fff;
height: auto;
width: auto;
opacity: 0;
position: absolute;
top: 1rem;
left: 1rem;
right: 1rem;
bottom: 1rem;
background: rgba(0, 0, 0, 0.85);
backface-visibility: hidden;
transition: opacity 0.4s ease-in-out;
}
my recommendation:
.member__info {
color: #fff;
height: 184px;
width: 184px;
position: absolute;
opacity: 0;
background: rgba(0, 0, 0, 0.85);
backface-visibility: hidden;
transition: opacity 0.4s ease-in-out;
}
Related
I want to have a section of the website which is fixed while to slide kind of a carousel on scroll (vertically). Once you are at the last slide the scroll will let you continue on the page instead of changing the slide of the carousel.
Similar to the Creative strategy page on the following website: https://www.petitmoulinstudio.com/#comp-kmkqr752
Any pointer on where to start and what to look at?
I am using React, HTML, CSS
I have recoded the exact website once before. This design can be done without any use of JavaScript. Mainly with clever position:sticky; div elements.
Here is a quick image to demonstrate how to achieve this:
To elaborate more, you're going to need <section> elements that have their height set to 100vh (to be responsive). Inside those sections you can use either flex or grid. Structure will be something like this:
<section style="height:100vh position:sticky top:0">
<div class="left-big-box" style="flex direction-column">
<div class="top_of_left-big-box">
<h2 style="margin-top: x; (x = i*30px where i is the index of element starting from 0 for first elem)">Title to be overlapped</h2>
</div>
<div class="bot_of_left-big-box" style="background:black (so that the text overlapped will be not visible)">
<p>• asdasd<br> • asdasd <br> • asdasd</p>
</div>
</div>
<div class="right-img-box">
<img>
</div>
</section>
Working Example (Not-Responsive / see "full page")
html,body {margin:0;padding:0;}
#uv_home_services {background: linear-gradient(90deg, #000 50%, #252525 50%);position: relative;top: 0;z-index: 1;}
.service-card {display: grid;grid-template-columns: 1fr 1fr;height: 100vh;position: sticky;top: 0;}
.service-card .info {display: grid;grid-template-rows: 3fr 2fr;text-align: right;padding: 0 2.5rem;}
.service-card .info h3 {color: #fff;font-size: 3rem;margin:4rem 0 0;}
.service-card:nth-child(2) .info h3 {margin:8rem 0 0;}
.service-card:nth-child(3) .info h3 {margin:12rem 0 0;}
.service-card:nth-child(4) .info h3 {margin:16rem 0 0;}
.service-card:nth-child(5) .info h3 {margin:20rem 0 0;}
.service-card:nth-child(6) .info h3 {margin:24rem 0 0;}
.service-card .info .text {max-width: 500px;width: 100%;justify-self: end;display: grid;height: 100%;color: #fff;align-content: end;background: linear-gradient(0deg, #000 50%, #0000);}
.service-card .info .text p {font-size: 1.5rem;margin-bottom: 4rem;}
#uv_home_services .service-card .photo {background-size: cover;}
.service-card:nth-child(1) .photo, .service-card:nth-child(2) .photo,
.service-card:nth-child(3) .photo, .service-card:nth-child(4) .photo,
.service-card:nth-child(5) .photo, .service-card:nth-child(6) .photo {background: url('https://via.placeholder.com/150x150');}
<section id="uv_home_services">
<div class="container vertical-bar">
<div class="service-card">
<div class="info">
<h3>Branding & Design</h3>
<div class="text">
<p>
LOGO DESIGN<br> PACKAGE DESIGN<br> COMPANY PROFILE<br> AD & BANNER DESIGN
</p>
</div>
</div>
<div class="photo"></div>
</div>
<div class="service-card">
<div class="info">
<h3>Web Design</h3>
<div class="text">
<p>
HOSTING PLANS<br> CUSTOM DESIGNS<br> STATIC OR WORDPRESS<br> CORPORATE AND E-SHOPS
</p>
</div>
</div>
<div class="photo"></div>
</div>
<div class="service-card">
<div class="info">
<h3>Social media + SEO</h3>
<div class="text">
<p>
GOOGLE ADWORDS<br> GOOGLE ANALYTICS<br> WEBSITE OPTIMIZATION<br> SOCIAL MEDIA MANAGEMENT
</p>
</div>
</div>
<div class="photo"></div>
</div>
<div class="service-card">
<div class="info">
<h3>Printing</h3>
<div class="text">
<p>
SPECIAL FEATURES<br> TINY OR HUGE SIZE<br> CORPORATE OR PERSONAL<br> MATERIAL OF YOUR CHOICE
</p>
</div>
</div>
<div class="photo"></div>
</div>
<div class="service-card">
<div class="info">
<h3>Photoshooting & Studio</h3>
<div class="text">
<p>
PROFESSIONAL PRODUCT SHOOTING<br> CATALOGUE AND WEBSITE GALLERY<br> WORKPLACE & INDUSTRY SHOOTING<br> SHOOTING FOR SOCIAL MEDIA
</p>
</div>
</div>
<div class="photo"></div>
</div>
<div class="service-card">
<div class="info">
<h3>Aerial Photography & Video</h3>
<div class="text">
<p id="start-team">
AERIAL PHOTOSHOOTING<br> AERIAL VIDEO PRODUCTION<br> HIGH-END DRONE FEATURES
</p>
</div>
</div>
<div class="photo"></div>
</div>
</div>
</section>
I have posted the same question two days earlier but didn't get any
answer so I'm posting again this question. May be I get lucky this time.
My slider buttons are working fine with static data, but they don't
work with the dynamic data. And unable to show the next or previous
slide.
My HTML Code
<section class="browse-cat u-line section-padding">
<div class="container">
<div class="row">
<div class="col-12">
<div class="swiper-wrapper">
<div class="swiper-slide myreward-slider-item col-md-4" *ngFor="let reward of readableRewards; let i = index">
<a href="javascript:void(0);">
<div class="myreward-slider-img">
<img
src="{{reward?.Image}}"
class=""
alt="rewards">
</div>
</a>
<div class="row">
<div class="col-md-6 text-left padding-20">
<span class="text-light-black cat-name"><b>{{reward?.Title}}</b></span>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</section>
My CCS Code
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 14px;
font-weight: 900;
color: #ff0018;
background: #ff0018;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-disabled {
display: none;
}
I am working on a puppteer script to evaluate facebook page chat's contact list section. contact list section's class name is fixed but height varies based on the screen size.
<div class="_24tx" style="height: 143px;">
when I tried to scroll the section by the following javascript code programmatically it didn't work.
document.querySelector('._24tx').scrollTop = document.querySelector('._24tx').scrollHeight
Here are the things I tried to scroll. But the section doesn't scroll.
Here is the html code of this section
<div class="_24tx" style="height: 143px;">
<div style="position: absolute; height: 80px; width: 100%; pointer-events: auto; transform: translate(0px, 0px);">
<div class="_4k8w _8gcz _75ux _5_n1 _284c _5m10" role="presentation">
<div class="_6yv6 clearfix _ikh">
<div class="_11eh _4bl7">
<div class="_5m0- _5m10" style="width: 40px; height: 40px;"><img class="_1-3q img" height="40"
src="https://scontent.fdac6-1.fna.fbcdn.net/v/t1.0-1/p100x100/80994426_155703309073913_5851419077058232320_o.jpg?_nc_cat=108&_nc_sid=7206a8&_nc_eui2=AeF9hYSwS5n7sfQ6UXVP6oNA1WrvDxpHbcPVau8PGkdtw0zvRFSJU0BwcRn-PqdKW_4&_nc_ohc=imbT4oyNr9sAX-T-FeN&_nc_ht=scontent.fdac6-1.fna&_nc_tp=6&oh=f122e376389993a39af8755993a1d10d&oe=5F3DE7AE"
width="40" alt="">
<div class="_5m17">
<div class="_5m18"></div>
</div>
</div>
</div>
<div class="_4bl9">
<div class="_284g _4bl9">
<div class="_4k8x">
<div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
<span>Tiffany Hwang</span></div>
</div>
<div class="_4k8y">
<div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
<span><span>Hello</span></span></div>
</div>
</div>
<div class="_11ei _4bl7">
<div class="">
<div class="_4ugl">
<div class="_5hhj"><span class="accessible_elem">Today</span><abbr aria-hidden="true"
class="timestamp" title="Today">8:31 PM</abbr></div>
</div>
<div class="_4a51" role="grid" tabindex="-1"><a href="#">
<div data-tooltip-content="Move to Done" data-hover="tooltip"
data-tooltip-position="right" class="_4ocz _2x0y" data-tooltip-delay="2000">
<div class="_18am"></div>
</div>
</a><a href="#">
<div data-tooltip-content="Mark as Follow Up" data-hover="tooltip"
data-tooltip-position="right" class="_4ocz _63kh" data-tooltip-delay="2000">
<div class="_63ki"></div>
</div>
</a></div>
</div>
</div>
<div direction="left" class="clearfix">
<div class="_ohe lfloat"></div>
<div class="">
<div class="_6yv4">
<div class="_3qn7 _61-0 _2fyi _3qng">
<div class="_6yv3" data-tooltip-content="ad_id.6161496302357" data-hover="tooltip">
<div class="_ke0 _4-u2 _4-u8"
style="background-color: rgb(114, 167, 55); border: none;"></div>
ad_id.616...
</div>
</div>
<div class="_3qn7 _61-0 _2fyi _3qng">
<div class="_6yv3" data-tooltip-content="ad_id.6182848562757" data-hover="tooltip">
<div class="_ke0 _4-u2 _4-u8"
style="background-color: rgb(251, 146, 64); border: none;"></div>
ad_id.618...
</div>
</div>
<div class="_6yv3">+2 more</div>
<div class="_7136"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 80px; width: 100%; pointer-events: auto; transform: translate(0px, 80px);">
<div class="_4k8w _8gcz _75ux _5_n1 _284c _5m10" role="presentation">
<div class="_6yv6 clearfix _ikh">
<div class="_11eh _4bl7">
<div class="_5m0- _5m10" style="width: 40px; height: 40px;"><img class="_1-3q img" height="40"
src="https://scontent.fdac6-1.fna.fbcdn.net/v/t1.0-1/p100x100/106221023_280175709922712_3201346937707756688_n.jpg?_nc_cat=104&_nc_sid=7206a8&_nc_eui2=AeHJJCuxGcY8uiLUfZlrjzW1rW1uRGedHyytbW5EZ50fLGK3GT0w7vRgfLB7cHKGNEY&_nc_ohc=hciXweYdgVgAX98T_6v&_nc_ht=scontent.fdac6-1.fna&_nc_tp=6&oh=0dc232174a7e0620724bd755e3b7d2b4&oe=5F3B87FC"
width="40" alt="">
<div class="_5m17">
<div class="_5m18"></div>
</div>
</div>
</div>
<div class="_4bl9">
<div class="_284g _4bl9">
<div class="_4k8x">
<div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
<span>Farzana Oni</span></div>
</div>
<div class="_4k8y">
<div class="_4ik4 _4ik5" style="line-height: 18px; height: 18px; -webkit-line-clamp: 1;">
<span><span>Hi</span></span></div>
</div>
</div>
<div class="_11ei _4bl7">
<div class="">
<div class="_4ugl">
<div class="_5hhj"><span class="accessible_elem">Today</span><abbr aria-hidden="true"
class="timestamp" title="Today">8:31 PM</abbr></div>
</div>
<div class="_4a51" role="grid" tabindex="-1"><a href="#">
<div data-tooltip-content="Move to Done" data-hover="tooltip"
data-tooltip-position="right" class="_4ocz _2x0y" data-tooltip-delay="2000">
<div class="_18am"></div>
</div>
</a><a href="#">
<div data-tooltip-content="Mark as Follow Up" data-hover="tooltip"
data-tooltip-position="right" class="_4ocz _63kh" data-tooltip-delay="2000">
<div class="_63ki"></div>
</div>
</a></div>
</div>
</div>
<div direction="left" class="clearfix">
<div class="_ohe lfloat"></div>
<div class="">
<div class="_6yv4">
<div class="_3qn7 _61-0 _2fyi _3qng">
<div class="_6yv3" data-tooltip-content="ad_id.6195306188957" data-hover="tooltip">
<div class="_ke0 _4-u2 _4-u8"
style="background-color: rgb(251, 146, 64); border: none;"></div>
ad_id.619...
</div>
</div>
<div class="_3qn7 _61-0 _2fyi _3qng">
<div class="_6yv3" data-tooltip-content="messenger_ads" data-hover="tooltip">
<div class="_ke0 _4-u2 _4-u8"
style="background-color: rgb(114, 167, 55); border: none;"></div>
messenger...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="_5-dk">
<div class="_1t0r _1t0s _4jdr" tabindex="0" style="top: 0px; height: 143px; z-index: 99;">
<div class="_1t0w _1t0z _1t0_" style="height: 22px; transform: translate(0px, 4px);"></div>
</div>
</div>
</div>
How to scroll this section? Thanks in advance.
Element.scrollIntoView does the job. It has an optional block parameter which can be set to either start, center, end or nearest. The scroll to the bottom of an element { block: 'end' } should be used:
await page.evaluate(() => {
document.querySelector('._24tx').scrollIntoView({ block: 'end' }));
});
I'm trying to list out all of the warehouse locations from Google Maps on my website by using Google Map's iframe:
<iframe src="http://maps.google.com/maps?q=118+Lamington+Rd.+–+Bateman+Student+Center,+Branchburg,+NJ+08876&output=embed" frameborder="0" style="border:0" allowfullscreen=""></iframe>
Currently, I'm stuck on how to remove the location box (top left) since I'm using this as an iframe. Is there a possible way that I can remove this part of the location box from iframe?
<div style="position: absolute; left: 0px; top: 0px;">
<div style="background-color: white; margin: 10px; padding: 1px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px;">
<div jstcache="0" style="">
<div jstcache="117" class="place-card place-card-large">
<div class="place-desc-large">
<div jstcache="36" class="place-name" jsan="7.place-name">Raritan Valley Community College</div>
<div jstcache="37" class="address" jsan="7.address">118 Lamington Rd, Branchburg, NJ 08876</div>
</div>
<div jstcache="38" class="navigate">
<div jsaction="placeCard.directions" class="navigate">
<a target="_blank" jstcache="52" href="https://maps.google.com/maps?ll=40.609526,-74.688894&z=16&t=m&hl=en-US&gl=US&mapclient=embed&daddr=Raritan%20Valley%20Community%20College%20118%20Lamington%20Rd%20Branchburg%2C%20NJ%2008876#40.6095258,-74.6888942" class="navigate-link">
<div class="icon navigate-icon"></div>
<div jstcache="53" class="navigate-text">Directions</div>
</a>
</div>
<div class="tooltip-anchor">
<div class="tooltip-tip-outer"></div>
<div class="tooltip-tip-inner"></div>
<div class="tooltip-content">
<div jstcache="54">Get directions to this location on Google Maps.</div>
</div>
</div>
</div>
<div jstcache="39" class="navigate-separator"> </div>
<div jstcache="40" class="star-entity">
<div jsaction="placeCard.star" class="star-button">
<div class="star-entity-icon-large">
<div jstcache="67" class="icon can-star-large" jsan="7.icon,7.can-star-large"> </div>
<div jstcache="68" class="icon logged-out-star" style="display:none"> </div>
</div>
<div jstcache="69" class="star-entity-text hidden" jsan="7.star-entity-text,7.hidden,t-PmAZCbgKmDw">Saved</div>
<div jstcache="70" class="star-entity-text" jsan="7.star-entity-text,t-bbrD6GAQ-ds">Save</div>
</div>
<div jstcache="71" class="tooltip-anchor">
<div class="tooltip-tip-outer"></div>
<div class="tooltip-tip-inner"></div>
<div class="tooltip-content">
<div jstcache="72">Save this place onto your Google map.</div>
</div>
</div>
</div>
<div jstcache="41" class="review-box">
<div jstcache="42" class="review-number" jsan="7.review-number">4.0</div>
<div jstcache="43" jsinstance="0" class="icon rating-star rating-full-star" jsan="7.icon,7.rating-star,7.rating-full-star"></div>
<div jstcache="43" jsinstance="1" class="icon rating-star rating-full-star" jsan="7.icon,7.rating-star,7.rating-full-star"></div>
<div jstcache="43" jsinstance="2" class="icon rating-star rating-full-star" jsan="7.icon,7.rating-star,7.rating-full-star"></div>
<div jstcache="43" jsinstance="3" class="icon rating-star rating-full-star" jsan="7.icon,7.rating-star,7.rating-full-star"></div>
<div jstcache="43" jsinstance="*4" class="icon rating-star rating-empty-star" jsan="7.icon,7.rating-star,7.rating-empty-star"></div> <a target="_blank" jstcache="44" href="http://www.google.com/search?q=Raritan+Valley+Community+College,+118+Lamington+Rd,+Branchburg,+NJ+08876&ludocid=1578495031502184362#lrd=0x89c3937dc5acab1f:0x15e7f0de30681faa,1" jsaction="mouseup:placeCard.reviews" class="review-box-link" jsan="7.review-box-link,8.href,0.target,22.jsaction">69 reviews</a> </div>
<div jstcache="45" class="saved-from-source-link" style="display:none"></div>
<div class="bottom-actions">
<div class="google-maps-link"> <a target="_blank" jstcache="46" href="https://maps.google.com/maps?ll=40.609526,-74.688894&z=16&t=m&hl=en-US&gl=US&mapclient=embed&cid=1578495031502184362" jsaction="mouseup:placeCard.largerMap">View larger map</a> </div>
</div>
</div>
</div>
</div>
</div>
I tried using css but it does not work:
div[style*="position: absolute; left: 0px; top: 0px;"] {
display: none;
}
I have also tried adding iwloc=near or iwloc=A on the URL, but it doesn't work still.
The ability to remove the location card in the Maps Embed API is currently not available, however, you may file a Feature Request in the Issue Tracker in order for the engineers to review the feasibility of the request. You may also try the workaround offered in this issue. Hope this helps
what is the best way to make in bootstrap a hide/show element like in the picture??
I started with something like this:
<div class="container-fluid no-padding-left">
<div class="row">
<div class="col-md-4 no-padding-left">
<div class="row">
<div class="col-md-12 background-azul-claro">
<div class="col-md-2 text-left">
<img src="assets/images/ic_close_white_36dp_1x.png" alt="">
</div>
<div class="col-md-8 text-center" style="">
<h3>Nueva incidencia</h3> </div>
<div class="col-md-2 text-right">
<img src="assets/images/ic_done_white_36dp_1x.png" alt="">
</div>
</div>
</div>
<div class="col-md-12 no-padding-left"> <img src="assets/images/default-image.jpg" alt="" class="img-responsive"> </div>
<div class="col-md-12 no-padding-left background-azul-oscuro"> <img src="" alt=""> </div>
<!-- form div with form field -->
<!-- checkbox Mostrar otras incidencias -->
</div>
</div>
</div>
styles.css
.background-azul-oscuro {
background-color: #009688;
}
.background-azul-claro {
background-color: #00BFA5;
}
.no-padding-left {
padding-left: 0px;
}
h3 {
color: white;
}
It´s nested columns the best way to do it ???
Im using angular in the front end, should i use normal bootstrap or angular ui bootstrap???
I would like totally responsible element with the hide and show functionality..
Since you would have to use custom width, margin and padding for the default bootstrap col's, there isn't much sense in using them.
You could have something like this in my opinion:
<div class="container">
<div class="background-azul-claro">
// position:relative;
width: calc(100% - 40px);
margin-right: 40px;
float: left;
</div
<div class=" background-azul-oscuro">
// position: relative;
width: 40px;
float: right;
</div>
</div>
*In case you would want one div to hover above the other, you should use position: absolute;