I am trying to code something like this one on http://teamgeek.co.za/#who
I already had the code on the gif and div that will show the description on the bottom of each picture selected. The problem is that if I clicked on the second row, the opened description on the first row won't automatically close itself.
Here is my script that I used.
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div#" + id + "").toggle("slow").siblings().hide("slow");
});
</script>
<script>
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div#" + id + "").toggle("slow").siblings().hide("slow");
});
</script>
This is the full code that I used, and I am using the javascript above to get the functions:
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
<div id="pages">
<div id="1" class="mydivhide">
<h1>Greggy Rick Go</h1><h4>/Chief Executive Officer</h4>
</div>
<div id="2" class="mydivhide">
<h1>Dennise Recuerdo</h1><h4>/Secretary</h4>
</div>
<div id="3" class="mydivhide">
<h1>Jude Marlon Alegro</h1><h4>/Head Web Developer</h4>
</div>
<div id="4" class="mydivhide">
<h1>Hannah Lois Aliposa</h1><h4>/Head Content Writer</h4>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items2">
<div class="item">
<a id="5" class="work page-scroll">
<img class="media" src="img/tryimages/rd.png"/>
<div class="content">
<img class="media" src="img/tryimages/rd.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="6" class="work page-scroll">
<img class="media" src="img/tryimages/soc.png"/>
<div class="content">
<img class="media" src="img/tryimages/soc.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="7" class="work page-scroll">
<img class="media" src="img/tryimages/anj.png"/>
<div class="content">
<img class="media" src="img/tryimages/anj.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="8" class="work page-scroll">
<img class="media" src="img/tryimages/ian.png"/>
<div class="content">
<img class="media" src="img/tryimages/ian.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
<div id="pages2">
<div id="5" class="mydivhide">
<h1>Ruth Danielle Aliposa</h1><h4>/Head Web Designer</h4>
</div>
<div id="6" class="mydivhide">
<h1>Christopher Emmanuel Socong</h1><h4>/Web Developer</h4>
</div>
<div id="7" class="mydivhide">
<h1>Angineth Bantiles</h1><h4>/Web Content Writer</h4>
</div>
<div id="8" class="mydivhide">
<h1>Ian Kevin Mendova</h1><h4>/Web Developer</h4>
</div>
</div>
</div>
</section>
If you want to go with this code you should maybe use this:
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
</script>
I'm not sure if I understand the snippet correctly since I don't know the rest of your code :-)
However, this isn't a good way to solve your issue. As in the comments already mentioned, it's a lot better to handle it with classes.
Here is a jsfiddle which can easily solve your problem:
JSFiddle
However you might only change the effect, but this is a minor thing.
Below code optimization of toggle for your issue
you have set class as .row-data for each row and the and write below script..
<script>
$(".row-data a").click(function() {
$(".row-data").hide("slow");
$(this).parent().show("slow");
});
</script>
Note: remove your Script...
Related
I am working on a site which has been created using Angular. On the homepage I have a Service Box that contains icons which redirects us to different pages. Currently when I click on service box icon it displays the service box:
Now Whenever I click outside of it, it does not close. I am not using jQuery in my project. I have seen many answers for AngularJs but none worked.
Here is my code for service-box.component.html:
<button mat-icon-button (click)="opened = !opened">
<mat-icon>apps</mat-icon>
</button>
<div class="box" [class.opened]="opened">
<div class="tip">
<div class="border"></div>
<div class="foreground"></div>
</div>
<div class="services">
<div class="row">
<a href="https://blog.fossasia.org">
<div class="col">
<div class="img">
<img src="assets/images/blog.png" alt="Fossasia">
</div>
<span>Blogs</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search">
<div class="col">
<div class="img">
<img src="assets/images/github.png" alt="Fossasia">
</div>
<span>Github</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search/issues">
<div class="col">
<div class="img">
<img src="assets/images/bug.png" alt="Fossasia">
</div>
<span>Bug Report</span>
</div>
</a>
</div>
</div>
<hr />
<div class="services">
<div class="row">
<a href="https://fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/fossasia_logo_55x22.png" width="55" height="22" alt="Fossasia">
</div>
<span>FOSSASIA</span>
</div>
</a>
<a href="https://phimp.me">
<div class="col">
<div class="img">
<img src="assets/images/phimpme_64x64.png" width="50" height="50" alt="Phimpme">
</div>
<span>Phimpme</span>
</div>
</a>
<a href="https://susper.com/">
<div class="col">
<div class="img">
<img src="assets/images/susper_60x16.png" width="60" height="16" alt="Susper">
</div>
<span>Susper</span>
</div>
</a>
</div>
<div class="row">
<a href="https://chat.susi.ai/">
<div class="col">
<div class="img">
<img src="assets/images/susi_60x12.png" width="60" height="12" alt="Susi.AI">
</div>
<span>Susi.AI</span>
</div>
</a>
<a href="https://pslab.fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/pslab_64x68.png" width="50" height="50" alt="PSLab">
</div>
<span>PSLab</span>
</div>
</a>
<a href="https://eventyay.com/">
<div class="col">
<div class="img">
<img src="assets/images/eventyay.png" width="60" height="18" alt="Eventyay">
</div>
<span>Eventyay</span>
</div>
</a>
</div>
</div>
</div>
service-box.component.ts contains only a public variable opened set to false by default.
I have tried to wrap up whole code of service-box.component.html in a div and used (focusout) event like this:
<div id="side-menu" (focusout)="opened=false">
//Rest of code as in service-box.component.html
</div>
But doing this disables the links in service box.
Any suggestion will be of great help.
You seem to be using #angular/material and therewith the CDK. You should try the CDK's Overlay package.
The overlay package provides a way to open floating panels on the screen.
By setting the attribute hasBackdrop, the overlay will create a backdrop element (= everything outside of your component) and with it a backdropClick #Output event, to which you could bind the closing of your "Service Box".
I'm trying to show/hide multiple divs at the same time. I'm using anchor tag to achieve this. I want to change content of two separate divs at same time. One div holds iframe and other video description.
So far I've managed to make one of my divs change it's content, but not the other. Is there a way to make content of both divs change when I click on anchor tag ?
My code. HTML:
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='zero'>
<p>This text needs to change. Video description</p>
</div>
<div id='one' style="display: none">
<p>This is my video description</p>
</div>
</div>
</div>
</div>
JS:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
});
Also a followup question can I make this toggleable (I've tried adding toggle() at the end of my line, but it just made everything worse), so when I click on anchor tag again it returns original image ?
Here is the codepen so you can better understand my problem : https://codepen.io/Karadjordje/pen/ybRyyo?editors=1010
The crux of your problem is that IDs must be unique. If you have multiple of the same ID then it will never work as expected. I switched things to classes and it's working as you expected.
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div class='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div class='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div class='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div class='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div class='zero'>
<p>This text needs to change. Video description</p>
</div>
<div class='one' style="display: none">
<p>This is my video description</p>
</div>
<div class='two' style="display: none">
<p>Two!</p>
</div>
<div class='three' style="display: none">
<p>Three!</p>
</div>
</div>
</div>
</div>
Instead of having multiple divs for each description, use one div and change the content based on rel value. store the description inside an object and use rel value to get the description.
// store your description in here
// on click the anchor tag get the rel value and display description
// like desc[relvalue]
var desc = {'one': 'no man no cry jimmy sax', 'two': 'Pendulum - hold on', 'three': 'Paul Van Dyk'};
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
$('#desc p').html(desc[$(this).attr('rel')])
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='desc'>
<p>This text needs to change. Video description</p>
</div>
</div>
</div>
</div>
Change id to class...
Instead of id="one" put class="one", and in the jquery put:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});
I'm trying to move the #whatsOnLink to below the "Get a Quote" button across the site using jQuery and I'm having trouble on the jQuery side of things. If I remove the additional part of .button from the target then it will move fine but I need it to go inside the holding div.
$('div[class^="grid"] a#whatsOnLink').each(
function() {
$(this).insertAfter($(this).closest('div[class^="grid_3"] div .button'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
Any help is appreciated.
Regards,
Kieran
Use this
$(this).closest('div[class^="grid_3"]').find('div .button')
Instead of
$(this).closest('div[class^="grid_3"] div .button')
$(document).ready(function() {
$('div[class^="grid"] a#whatsOnLink').each(
function() {
$(this).insertAfter($(this).closest('div[class^="grid_3"]').find('div .button'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
You could use .next()
$('div[class^="grid"] a#whatsOnLink').each(function() {
$(this).insertAfter($(this).next().next());
// OR
// $(this).appendTo($(this).parent());
});
$('div[class^="grid"] a#whatsOnLink').each(function() {
$(this).insertAfter($(this).next().next());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
i have a page in web 'about TOEFL'. if i click about TOEFL, then the content/form was changing to content/form about TOEFL. when i click 'about TOEFL' the content was changing but when i click 'close', the form/content not changing. please help
this is my page code
<!-- Start Page 2 About -->
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Help your <span>TOEFL</span> Score<em> High</em></h3>
</div>
</div>
<!-- Start menu-form -->
<form id="menu-form">
<div class="grid_2">
<div class="box 60px"> <img src="images/img1.png" alt="">
<div class="text1">About TOEFL</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img2.png" alt="">
<div class="text1">Tips and Trick</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img8.png" alt="">
<div class="text1">Cambridge</div>
</div><br><br><br><br><br><br><br><br>
</div>
</form>
<!-- End menu-form -->
<!-- Start AboutTOEFL-form -->
<form id="AboutTOEFL-form" style="display:none" class="grid_14">
<div id="filters" class="sixteen columns">
<ul class="clearfix">
<li><a href="#page2" onclick="showAboutTOEFL()">
<h5>About TOEFL</h5>
</a></li>
<li><a href="#" >
<h5>Tips And Trick</h5>
</a></li>
<li><a href="#page2" onclick="showMenuForm()">
<h5>Close</h5>
</a></li>
</ul>
</div>
<div class="box 1000px">
<img src="images/toefl-1.jpg" alt=""><br><br>
--my text--
</div>
</form>
<!-- End AboutTOEFL-form -->
</div>
</div>
<!-- End Page 2 -->
this is my java script
<script type="text/javascript">
var showAboutTOEFL = function() {
document.getElementById("menu-form").setAttribute("style", "display:none");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:block");
}
</script>
<script type="text/javascript">
var showMenuform = function() {
document.getElementById("menu-form").setAttribute("style", "display:block");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:none");
}
</script>
The casing on your onclick event is wrong. You have onclick="showMenuForm()", but your function name is showMenuform (lowercase "f").
Hi I am trying to add transitions to sliding navigation but in vain. When I click on About Us I takes me to that part immediately. Instead I want it to slide and display. And same for other links as well (Team,Contact). Have a look over below jsfiddle. https://jsfiddle.net/samson421/90zku52x/2/
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper light-blue darken-3" >
<a href="#" class="brand-logo right-align" > hello.com</a>
<ul class="left-align">
<li><a href="#about" >About Us</a></li>
<li>Our Team</li>
<li>Contact Us</li>
<li>Login</li>
</ul>
</div>
</nav>
</div>
<section id="about">
<div class="container">
<h4 style="text-decoration:underline;text-align:center">About Us</h4><br><br>
<div class="quot">
<h5 style="color:#446CB3;padding-top:30px">Vision</h5>
<p id="vision">some text</p>
<h5 style="color:#446CB3">Mission</h5>
<p id="vision">some text</p>
<h5 style="color:#446CB3">Objectives</h5>
<p id="vision">some text</p><br><br><br>
</div>
</div>
</section><br><br><br><br>
<section id="team">
<div class="container">
<div class="center-align">
<h4 style="text-decoration:underline">Core Team</h4><br><br>
<div class="row">
<div class="col s4">
<img class="circle responsive-img" src="index2/img/works/1.png" class="circle" height="200" width="200">
<h5>one </h5>
<p style="text-align:justify">
some text
</p>
<div class="row">
Details
</div>
</div>
<div class="col s4">
<img class="circle responsive-img" src="index2/img/works/2.png" class="circle" height="200" width="200">
<h5>two</h5>
<p style="text-align:justify">
some text
</p>
<div class="row">
Details
</div>
</div>
<div class="col s4">
<img class="circle responsive-img" src="index2/img/works/3.png" class="circle" height="200" width="200">
<h5>three</h5>
<p style="text-align:justify">
some text
<div class="row">
Details
</div>
</div>
</div>
<div class="center align">
<h4 style="text-decoration:underline">Contact Us</h4>
<p>Let us know if you are interested in knowing more.</p>
<table>
<tr>
<td id="no">+4917655434285 </td>
</tr>
<tr>
<td id="email">Email:<a href=">info#hello.com</a></td>
</tr>
</table>
</div>
This is how I would do it:
$("li a").click(function(e) {
e.preventDefault();
$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top}, 400);
});
Here is the JSFiddle demo