Transitions for sliding navigation using materializecss? - javascript

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

Related

tab content is overlapping with other tab contents

I have implemented a code which have two tabs and I want to make them appear when the header tab header clicked. but the issue is once I load the page content in the second tab also previewing in first tab. but when i swith in to second tab and come back it working as expect.
any suggestions??
here is my code
<div class="row">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#policy">POLICY PERFORMANCE</a></li>
<li><a data-toggle="tab" href="#claim">CLAIMS</a></li>
</ul>
<div class="tab-content">
<div id="policy" class="tab-pane fade in active">
<div class="col-sm-4">
<h4>By Warranty</h4>
<p ng-show="warrentyChartAccess">* access restricted</p>
<p class="margin-top-20">
<div tc-chartjs-legend chart-legend="lineChart4"></div>
</p>
<div class="text-center margin-bottom-15">
<canvas class="tc-chart" height="175" tc-chartjs-pie chart-options="warrentyChartOptions" chart-data="warrentyChartData" chart-legend="lineChart4" width="250"></canvas>
</div>
</div>
<div class="col-sm-4">
<h4>By Product</h4>
<p ng-show="productChartAccess">* access restricted</p>
<p class="margin-top-20">
<div tc-chartjs-legend chart-legend="lineChart2"></div>
</p>
<div class="text-center margin-bottom-15">
<canvas class="tc-chart" height="175" tc-chartjs-doughnut chart-options="productChartoptions" chart-data="productChartData" chart-legend="lineChart2" width="250"></canvas>
</div>
</div>
<div class="col-sm-4">
<h4>By Make</h4>
<p ng-show="makeChartAccess">* access restricted</p>
<div class="text-center margin-bottom-15">
<canvas ng-hide="makeChartAccess" class="tc-chart" height="250" tc-chartjs-radar chart-options="makeChartOptions" chart-data="makeChartData"></canvas>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-6">
<h4>By Country</h4>
<p ng-show="countryChartAccess">* access restricted</p>
<div class="text-center margin-bottom-15">
<div google-chart chart="localchart"> </div>
</div>
</div>
<div class="col-sm-6">
<h4>By Month</h4>
<p ng-show="monthlyChartAccess">* access restricted</p>
<div class="text-center margin-bottom-15">
<canvas ng-hide="monthlyChartAccess" class="tc-chart" height="200" tc-chartjs-line chart-options="monthChartOptions" chart-data="monthChatsData"></canvas>
</div>
</div>
</div>
<div id="claim" class="tab-pane fade in active">
<div class="col-sm-4">
<h4>By Claim Status</h4>
<p ng-show="claimStatusChartAccess">* access restricted</p>
<p class="margin-top-20">
<div tc-chartjs-legend chart-legend="lineChart3" style="width:175px"></div>
</p>
<div class="text-center margin-bottom-15">
<canvas class="tc-chart" height="175" tc-chartjs-doughnut chart-options="claimStatusChartOptions" chart-data="claimStatusChartData" chart-legend="lineChart3" width="250"></canvas>
</div>
</div>
<!--<div class="col-sm-4">
<h4>By Claim Invoice</h4>
<p ng-show="claimInvoiceChartAccess">* access restricted</p>
<p class="margin-top-20">
<div tc-chartjs-legend chart-legend="lineChart4" style="width:175px"></div>
</p>
<div class="text-center margin-bottom-15">
<canvas class="tc-chart" height="175" tc-chartjs-doughnut chart-options="claimInvoiceChartOptions" chart-data="claimInvoiceChartData" chart-legend="lineChart4" width="250"></canvas>
</div>
</div>-->
</div>
</div>
</div>

Both the tabs has class as active. Add active class to a single tab that you want to see on page load
<div id="policy" class="tab-pane fade in active">
</div>
<div id="claim" class="tab-pane">
</div>

Bootstrap Placing Elements one under another

I'm using bootstrap to position some cards one near another but i'm not really able to do it because it always places the cards one under another.
<div class="container">
<div class="row">
<div class="col-8">
<div class="col-sm-2">
<div class='card' style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card" style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
Basically i need those 2 cards to be on the same row and one after another but i don't understand what's wrong.Are those cards too big?

The problem is your inline style definition for your cards: width: 20rem. Essentially, you're giving the card 2/12 of the grid to work with (col-sm-2) and then giving a hard definition of the card to have a width of 20rem, which forces the next card to take up the next line.
Also, you need to specify another row after your col-8 declaration. Here's my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-sm-6">
<div class='card'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>

Using Multiple Masonry Grids On Collapsible

JSFiddle
Hey! I've decided to use Masonry, which I find completely awesome.
Although I've ran into the issue where when I use it in a collapsible, it only works on the first collapsible when it's open. I can't seem figure out a way to get it to work when the collapsible is closed and then opened.
I would think it's because when the page loads the images aren't shown/don't exist. I've tried using Juery on click methods for when the collapsible is clicked to load Masonry. That didn't seem to work so I scratched that. I've tried using another on click method to reload Masonry when it's open. That also didn't seem to work correctly.
I am fairly new to JavaScript so I wouldn't be surprised if I had done something wrong. But any help would greatly appreciated. Especially considering I've been banging my head for the last few days on this.
I hope this is enough! Thanks in advance!
HTML :
<ul class="collapsible popout">
<li class="active">
<div class="collapsible-header">
<h1 class="bodyFont noMargin">
Landscapes
</h1>
</div>
<div class="collapsible-body">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes1" name="Landscapes1">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link to album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes2" name="Landscapes2">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
</div>
</div>
</li>
<li>
<div id="secondCategory" class="collapsible-header">
<h1 class="bodyFont noMargin">
Potraits
</h1>
</div>
<div class="collapsible-body">
<div class="grid">
<div class="card deep-purple lighten-4" id="Butterflies" name="Butterflies">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="Bees" name="Bees">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="RollyPolies" name="RollyPolies">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="Ants" name="Ants">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
</div>
</div>
</li>
</ul>
CSS:
.grid {
margin: 0%;
}
.card,
.grid-sizer {
width: 31.3%;
margin-top: 5px;
margin-bottom: 5px;
}
.gutter-sizer {
width: 2%;
}
JS:
$(".collapsible").collapsible();
var $grid = $(".grid");
$grid.masonry({
itemSelector: ".card",
columnWidth: ".grid-sizer",
gutter: ".gutter-sizer",
percentposition: true,
horizontalOrder: true
});
$grid.imagesLoaded().progress(function() {
$grid.masonry("layout");
});

ContentFlow - div max-width not working

I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php

Click function that opens and closes

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...

Categories

Resources