How to remove Location Box of Google Maps (top left)? - javascript

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

Related

How to scroll Facebook page chat contact list section by javascript?

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' }));
});

How to make the second row of the second column be the same height as first column

I'm trying to build a layout which essentially looks like this (the blue line being the scroll bar)
But with how I have it right now the lower green box goes past the total height of the entire box. I've uploaded a rough version of what I have created onto codepen, I'm using the Bulma framework and essentially I want the lower box in the second column be a height where the total height of the left column equals the height of the right column.
So I want it to end where the black line is and have a scroll bar where the right hand side is.
I can set the height of the lower box to be a specific view height which fixes it a tiny bit and just set the overflow to scroll, but it gets messed up a bit if you try to resize.
At worst, I can do this with JavaScript by making the height of the lower box equal to height of left column - height of top box but I'm trying to see if there's a better CSS way.

My solution: set .column.is-2 to flex with direction column, set #getHeight display: block and make bottom one scrollable with overflow: auto.
Codepen demo: https://codepen.io/anon/pen/ZVJdgj
html {
overflow:hidden;
}
.fullh:not(:last-child) {
margin-bottom: 0rem;
}
.fullh:last-child {
margin-bottom: 0rem;
}
.fullh{
margin-top: 0rem;
margin-left: 0rem;
margin-right: 0rem;
}
.shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
option:hover{
background-color:#F1F6FE;
}
.is-vertical-center {
display: flex;
align-items: center;
}
.component-helper {
cursor: pointer;
color: #74A2F8;
}
.component-helper:hover {
color: #504A77;
}
.column.is-2 {
display: flex;
flex-direction: column;
}
#getHeight {
display: block;
}
.column.is-2 > .scroll {
overflow: auto
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
<link rel="icon" type="image/png" href="" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="dashboard_script.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<body>
<nav class="navbar is-transparent navbar-padding" role="navigation" aria-label="main navigation" style="background-color: #fafafa">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item nav-text" href="#" style="font-weight: 500;font-size: 1.5rem;color: #74A2F8;">
Test
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end nav-text">
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item">
Test
</a>
<a class="navbar-item" style="color:#f15870" href="/logout">
Test
</a>
</div>
</div>
</div>
</nav>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="hero is-fullheight" style="background-color: #fafafa">
<div class="columns fullh" style="height:92vh;">
<div id="heightActual" class="column is-10">
<iframe class="shadow" src="/" frameborder="0" style="width: 100%;height:100%;">
</iframe>
</div>
<div class="column is-2">
<div id="getHeight" class="columns">
<div class="column">
<div class="box is-vertical-center is-centered" style="height:100%;background-color: #fafafa;">
<div class="has-text-centered" style="margin: 0 auto;">
<ul>
<li class="component-helper" id="add">Add Components</li>
<li class="component-helper" id="edit">Edit Components</li>
<li class="component-helper" id="order">Order Components</li>
<li class="component-helper" id="order">Add pages</li>
<li class="component-helper" id="order">View Pages</li>
</ul>
</div>
</div>
</div>
</div>
<div class="columns scroll">
<div class="column">
<div id="heightFix" class="box is-vertical-center is-centered" style="background-color: #fafafa;display:block;">
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div style="font-weight: 500;font-size: 1.2rem;">
All
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
<div class="columns is-desktop" style="margin: 0 auto;">
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
<div class="column">
<img src="https://i.gyazo.com/2f3761216d6940f8c535a80b1df3042e.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal containing all the Elements -->
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box" style="width: 100%;">
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</body>
Hope this will help

How center login card on Framework7?

I'd like to center the login card, but I connot do it. At the moment the card stays on the top of the page.
I wrote this class.
.card-center {
margin-left: auto;
margin-right: auto;
}
but it did not solve the issue...
I also tryed to use align-content-center class
This is my login page
<div data-name="login" class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content ">
<form id="form-login">
<div class="row justify-content-center">
<div class="col-100 tablet-80 desktop-50 ">
<div class="card head-card-forest card-center">
<div class="card-header">
<span></span><h2>Login</h2><span></span>
</div>
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Username</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Username">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Password">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
<div class="row">
<a class="col button button-fill" id="button-login" onclick="login()"> Login </a>
</div>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--.card-->
</div><!--.col-->
</div><!--.row-->
</form>
</div> <!-- ./ page-content -->
Thank you in advance for your help!

Since you don't provide any code, I can only assume and provide you a solution that should work
.tablet-80.desktop-50{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
Note: I tested this code with framework7 demo login page see image below

This below code make the form proper center of the page.
#form-login{
width:300px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}

Animation effect for the images

Is there any way possible to apply animation effect to images in my about section,here is the code:
<div id="about" class="row section bgimg3">
<div class="col-sm-8">
<h2 style="color:black;">Want to Know More About me?</h2>
<h3>BIOGRAPHY</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Born:1961,dharmavaram</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>spouse:swarna latha</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>parents:Nagi reddy(father),sarada(mother)</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>education:B.A,L.L.B,P.H.D</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>children:Divya,Tejasvi,Saisree</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Achievements:Great father,Public Prosecutor</h4>
<h3>Hobbies</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Partying with friends</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Playing Cricket</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Reading Books</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Travelling</h4>
<h3>Goals yet to achieve</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>World tour with family</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Buy an AUDI</h4>
</div>
<div class="col-sm-4 pull-right">
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
</div>
</div>
<hr style="border: 1px solid black" />
Here is my link to code pen: https://codepen.io/saisree/pen/WjVjMW
What i want to do is there are three images in my about section,i don't want to display all the three images at a time,i want to appear one by one when i click on about section in header!I want to use animation for this!

I recommend this library https://github.com/michalsnik/aos . Is very simple the implementation and you can get delay for any class.
Example: https://michalsnik.github.io/aos/

there are different ways to implement it, since you are using jQuery, you can try fade in effects, like the example https://codepen.io/RACCH/pen/bRbpwM
adding this event to your about tab, and hiding the circled images
$(".img-circle").hide();
var iteration=1;
$(".1").click(function() {
$('html,body').animate({
scrollTop: $("#about").offset().top},
'slow');
$(".img-circle").hide();
$('#'+iteration+'-img-circle').fadeIn(2000);
if(iteration==3) iteration=1;
else iteration++;
});

Add the following jQuery:
$(".1").click(function() {
$(".col-sm-4.pull-right img:nth-child(1)").hide();
$(".col-sm-4.pull-right img:nth-child(2)").hide();
$(".col-sm-4.pull-right img:nth-child(3)").hide();
$(".col-sm-4.pull-right img:nth-child(1)").fadeIn(2000);
$(".col-sm-4.pull-right img:nth-child(2)").fadeIn(4000);
$(".col-sm-4.pull-right img:nth-child(3)").fadeIn(6000);
});

Add below code.
$('.img-circle').mouseenter(function(){
$(this).animate({
'border-radius': '40%'},
'slow',
function(){
$(this).animate({
'border-radius': '50%'},
'fast');
});
})
This working code will help you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
$().ready(function () {
$(".0").click(function () {
$('html,body').animate({
scrollTop: $("#home").offset().top
},
'slow');
});
$(".1").click(function () {
$('html,body').animate({
scrollTop: $("#about").offset().top
},
'slow');
});
$('.img-circle').mouseenter(function () {
$(this).animate({
'border-radius': '40%'
},
'slow',
function () {
$(this).animate({
'border-radius': '50%'
},
'fast');
});
})
$(".2").click(function () {
$('html,body').animate({
scrollTop: $("#family").offset().top
},
'slow');
});
$(".3").click(function () {
$('html,body').animate({
scrollTop: $("#blog").offset().top
},
'slow');
});
$(".4").click(function () {
$('html,body').animate({
scrollTop: $("#testimonial").offset().top
},
'slow');
});
$(".5").click(function () {
$('html,body').animate({
scrollTop: $("#spec").offset().top
},
'slow');
});
$(".6").click(function () {
$('html,body').animate({
scrollTop: $("#contact").offset().top
},
'slow');
});
$(".overlay + img").each(function () {
var w = $(this).css("width");
$(this).prev(".overlay").css("width", w);
});
});
</script>
<style>
#blog a {
color: Bisque;
text-decoration: underline;
}
.bgimg {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A");
background-position: center;
background-size: cover;
}
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}
.jumbotron {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
background-position: center;
background-size: cover;
}
h3 {
text-color: black;
}
#family h2 {
color: black;
text-decoration: none;
}
#Nav h3 {
color: black;
text-decoration: none;
}
.text {
white-space: nowrap;
color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(255, 255, 255, 0.48);
/* background-color: white; */
overflow: hidden;
height: 0;
transition: .5s ease;
}
.ovparent:hover .overlay {
height: 100%;
}
.ovparent {
position: relative;
}
#over {
text-align: center;
}
.bgimg1 {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJRGtOjps8wjohBoCFu3oDrwu4O6RakP9KgUbbBHPdoFb_MuUs");
background-position: center;
background-size: cover;
}
.bgimg2 {
background-image: url("data:image/jpeg;base64,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");
background-position: center;
background-size: cover;
}
.well.first {
background-color: Bisque;
}
.well.second {
background-color: LightGoldenRodYellow;
}
.well.third {
background-color: Thistle;
}
.well.fourth {
background-color: Pink;
}
</style>
</head>
<body>
<div id="Nav" class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="https://codepen.io/saisree/full/WjVjMW/">Anand Reddy</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" ">
<li class="active"><a class="0" href="#home">Home</a></li>
<li><a class="1" href="#about">About</a></li>
<li><a class="2" href="#family" >Meet the family</a></li>
<li>Blog</li>
<li >Testimonials</li>
<li >Specialization</li>
<li ><a class="6" href="#contact">contact</a></li>
</ul>
</div>
<div class="jumbotron myjumbotron ">
<section class="bgimg" id="home">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h1 style="color:white;" class="text-center">ANAND REDDY</h1>
<h3 style="color:white;" class="text-center">A WONDERFUL SERENITY HAS TAKEN POSSESSION OF MY ENTIRE SOUL, LIKE THESE
SWEET MORNINGS OF SPRING WHICH I ENJOY WITH MY WHOLE HEART
</h3>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</section>
<hr style="border: 1px solid black" />
<div id="about" class="row section">
<div class="col-sm-8">
<h2 style="color:black;">Want to Know More About me?</h2>
<h3>BIOGRAPHY</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Born:1961,dharmavaram</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>spouse:swarna latha</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>parents:Nagi reddy(father),sarada(mother)</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>education:B.A,L.L.B,P.H.D</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>children:Divya,Tejasvi,Saisree</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Achievements:Great father,Public Prosecutor</h4>
<h3>Hobbies</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Partying with friends</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Playing Cricket</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Reading Books</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Travelling</h4>
<h3>Goals yet to achieve</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>World tour with family</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Buy an AUDI</h4>
</div>
<div class="col-sm-4 pull-right">
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
</div>
</div>
<hr style="border: 1px solid black" />
<div id="family" class="gray-bg">
<section class="container section team-3col ">
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
</div>
</section>
</div>
<hr style="border: 1px solid black" />
<div id="blog" class="section bgimg1">
<p> </p>
<h1 style="color:Bisque;" class="text-center">Welcome to my Blog</h1>
<h2 style="color:Bisque;" class="text-center">"Man must explore, and this is exploration at its greatest"</br>
Problems look mighty small from 150 miles up
</h2>
<p> </p>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h2 >
Know about my backgound
<h2>
</div>
<div class="col-md-5 col-md-offset-1"> <h2> Know about my specialization</h2></div>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-1"><h2> Contact My Firm</h2></div>
<div class="col-md-5 col-md-offset-1">
<h2 class="text-center"> Visit my portfolio</h2></div>
</div>
</div>
<hr style="border: 1px solid black" />
<div id="testimonial" class="section">
<div class="section-header">
<h2 style="color:white"; class="text-center">Testimonials</h2>
<h4 style="color:white"; class="text-center">
We have worked with hundreds of clients. Check what our awesome happy clients saying about us.
</h4>
</div>
<p> </p>
<div class="row">
<div class="well first col-md-3 ">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span>
</div>
<div class="well second col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
<div class="well third col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
<div class="well fourth col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
</div> </div>
<hr style="border: 1px solid black" />
<div id="spec" class="section bgimg2">
<p> </p>
<h2 style="color:black" class="text-center">So, what will I actually be doing?</h2>
<h3 style="color:SlateGrey" class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Attending court hearings (and doing the preparation beforehand)</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Drawing up contracts and other legal documents </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Negotiating (not all cases will end up in court)</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Explaining the law and giving general legal advice </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Settling disputes and supervising any agreements </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Researching and gathering evidence</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Analysing legal documents</h2>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Supervising legal assistants.</h3>
<p> </p>
</div>
<hr style="border: 1px solid black" />
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading" style="color:black">Let's Get In Touch!</h2>
<hr class="primary">
<h3 style="color:black">Ready to discuss your next case with me? That's great! Give me a call or send an email and I will get back to you as soon as possible!</h3>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<h3><span class="glyphicon glyphicon-earphone">986-60-32199</span></h3>
</div>
<div class="col-lg-4 text-center">
<h3><span class="glyphicon glyphicon-envelope">anandreddyv.25#gmail.com</span></h3>
</div>
</div>
</div>
</section>
<hr style="border: 1px solid black " />
</div>
</div>
</div>
<footer class="text-center ">
<p>Copyrights © <span class="text-primary">anand reddy vennapusa.</span> All Right Reserved.</p>
<p>Developed By : saisree vennapusa</p>
</footer>
</body>
</html>

Jquery Cycle: Can't navigate through slides

I'm trying to make a slider with jQuery Cycle where, when you click on one of 5 thumbnails, you switch to the right slide in the slider. Those thumbs are external to the slider.
Thing is, for some reason, the startingSlide argument doesn't work and just doing .cycle(number) doesn't either, even if the slider is clearly running. Here's a peek at the code:
JS
jQuery(document).ready(function(){
var current_slide;
jQuery('#slider_accueil').cycle({
fx: 'fade',
timeout: 3000,
after: onAfter,
startingSlide: 0,
pager: '#nav',
next: '.next_btn_slider',
prev: '.prev_btn_slider'
});
function onAfter(curr,next,opts){
jQuery('.indicator').removeClass('current')
current_slide=opts.currSlide + 1
jQuery('#thumb'+current_slide+' .indicator').addClass('current')
}
jQuery('#thumb1').click(function(){
jQuery('#slider_accueil').cycle(0);
return false;
})
jQuery('#thumb2').click(function(){
jQuery('#slider_accueil').cycle(1);
return false;
})
jQuery('#thumb3').click(function(){
jQuery('#slider_accueil').cycle(2);
return false;
})
jQuery('#thumb4').click(function(){
jQuery('#slider_accueil').cycle(3);
return false;
})
jQuery('#thumb5').click(function(){
jQuery('#slider_accueil').cycle(4);
return false;
})
})
html
<div id="sliderAccueil">
<div id="nav" style="display:none;"></div>
<img src="/wp-content/themes/customtheme/images/slider_previous.png" class="prev_btn_slider">
<img src="/wp-content/themes/customtheme/images/slider_next.png" class="next_btn_slider">
<div id="slider_accueil" style="position: relative;">
<div style="position: absolute; top: 0px; left: 0px; z-index: 5; opacity: 0; display: none;">
<img src="/wp-content/uploads/2011/09/slider1.jpg">
<div>
<div class="maintext">
<h2>Slide 1</h2>
<p>Slide 1</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><ig src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 4; display: none; opacity: 0;">
<ig src="/wp-content/uploads/2011/09/slider2.jpg">
<div>
<div class="maintext">
<h2>Slide 2</h2>
<p>Slide 2</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 3; display: block; opacity: 0.942616;">
<img src="/wp-content/uploads/2011/09/slider3.jpg">
<div>
<div class="maintext">
<h2>Reprise des travaux majeurs</h2>
<p>Slide 3</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 2; display: block; opacity: 0.0573843;">
<img src="/wp-content/uploads/2011/09/slider4.jpg">
<div>
<div class="maintext">
<h2>Slide 4</h2>
<p>Slide 4</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 1; display: none; opacity: 0;">
<img src="/wp-content/uploads/2011/09/slider5.jpg">
<div>
<div class="maintext">
<h2>Slide 5</h2>
<p>Slide 5</p>
</div>
<div class="link">
<b href="/"></a>
<b class="call_slide" href="/"><img src="/wp-content/themes/customtheme/images/call_slider.png"></a>
</div>
</div>
</div>
</div>
<div id="thumbnails_slider_accueil">
<ul>
<li>
<b id="thumb1" href="#1">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb1.png)" class="thumbnail">
<p>Voies retranchées trains ajoutés</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb2" href="#2">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb2.jpg)" class="thumbnail">
<p>Événements</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb3" href="#3">
<div class="indicator current"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb3.jpg)" class="thumbnail">
<p></p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb4" href="#4">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb4.jpg)" class="thumbnail">
<p>Appels d'offres</p>
</div>
<div class="clear"></div>
</a>
</li>
<li>
<b id="thumb5" href="#5">
<div class="indicator"></div>
<div style="background-image:url(/wp-content/uploads/2011/09/thumb5.jpg)" class="thumbnail">
<p>Environnement</p>
</div>
<div class="clear"></div>
</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
^check source, seems I cant put that cleaner than this.
Anybody have an idea?
PS, It's on purpose that all img are ig and all links are ... Stackoverflow wouldn't let me post.

I found the answer to my own question...
Seems that to use jQuery('#slider_accueil').cycle(0); you need to have the full version linked, and not the lite.
Seems like that function is one of those who have been taken out from the conversion from full to lite... Note to self: The lite versions may not have the function you want to do... just spent 2 hours trying all kinds of stuff on that. :p

Categories

Resources