How to repeat fadeItem function? - javascript

I have side bar menu with the list of items, when it opened it shows the list of the menu with the fade effect. My question is how can I repeat the effect every time when I click "opener" by the way the fadein works for the first time only.
Here is my code for the effect...
<body>
<div id="st-container" class="st-container">
<div id="main" >
<div class="st-pusher">
<!-- nav menu start -->
<nav class="st-menu st-effect-8" id="menu-8">
<ul>
<li><a class="icon icon-data" href="profile.html"> <div class="icon-menu"><img src="img/user-demo.png" alt="user-picture"></div> Nathen Scott</a></li>
<li><a class="icon icon-data" href="index.html"> <div class="icon-menu"><img src="img/icon-library.png" alt="user-picture"></div> Library</a></li>
<li><a class="icon icon-location" href="#"><div class="icon-menu"> <img src="img/icon-bookstore.png" alt="user-picture"></div> Bookstore</a></li>
<li><a class="icon icon-study" href="#"><div class="icon-menu"> <img src="img/icon-camera.png" alt="user-picture"> </div>Text Capture</a></li>
<li><a class="icon icon-photo" href="#"> <div class="icon-menu"><img src="img/icon-setting.png" alt="user-picture"></div> Setting</a></li>
</ul>
</nav>
<div class="st-content"><!-- this is the wrapper for the content -->
<div id="main"><!-- extra div for emulating position:fixed of the menu -->
<div id="st-trigger-effects" class="tab_bar_index">
<button data-effect="st-effect-8" class="opner"><img src="img/icon-menu.png" alt="icon"></button>
<button class="table_content"><img src="img/icon_setting_small.png" alt="icon"></button>
<div id="titlebar">
<img src="img/logo_text.png" alt-"logo">
<span >Library</span>
</div>
</div>
</div>
</div>
</div>
</div><!-- /main -->
</div>
<!-- fade effect for the nav menu -->
<script type="text/javascript">
function fadeItem() {
$('ul li:hidden:first').stop().hide().delay(50).fadeIn();
$(".st-menu ul li ") .addClass("animate");
}
$('.opner').click(fadeItem);
$('li').hide();
</script>
</body>

Initially hide all the items on click and than use .each to loop through and apply the delay and fade in effect.
function fadeItem() {
// hide menu items
$('.st-menu ul li')stop().hide();
// go through and set each element to fade in
$('.st-menu ul li:hidden').each(function (index, elem) {
$(elem).delay((index + 1) * 50).fadeIn();
});
$(".st-menu ul li").addClass("animate");
}
$('.opner').click(fadeItem);
$('li').hide();

Related

Fixed NavBar on scroll using jQuery

I have my navbar on my page. I had used CSS and jQuery to fix it at the top but when I am selecting any menu item in navbar it doesn't go to that section. Give me the solution.
<header id="index-banner">
<nav id="navigation" class="banner-header z-depth-0 ">
<ul class="left hide-on-med-and-down">
<li><span>HOME</span></li>
<li><span>LOCATIONS</span>
<li><span>FAQ</span></li>
</li>
</ul>
<img src="img/logo/50.png" class="banner-logo" id="mylogo">
<ul class="right hide-on-med-and-down">
<span><li>MENU</li></span>
<span><li>CONTACT US</li></span>
<li><img src="img/tunnsingh/face.png" id="tunnsinghface"></li>
<li>
<h5 id="call" class="head"><span>989898XXXX</span></h5>
</li>
</ul>
&nbsp&nbsp<i class="fa fa-bars"></i>
<div id="slide-out" class="side-nav hide-on-large-only">
<img src="img/logo/50.png" id="side-nav-logo">
<img src="img/divider/green.png" class="divide">
<ul>
<span><li>HOME</li></span>
<span><li>LOCATIONS</li></span>
<span><li>MENU</li></span>
<span><li>FAQ</li></span>
<span><li>CONTACT US</li></span>
</ul>
</div>
</nav>
<img src="img/banner.jpg" class="hide-on-large-only" id="index-banner">
</header>
You have to define each section with the "id" attribute and then you have to use the "scrollTop" for those navigation which will scroll to those defined "id".
HTML Code
Scroll to Target Element
<section id=”target-element”>Target Element Content</section>
Jquery Code:
jQuery('.scroll_to').click(function(e){
var jump = $(this).attr('href');
var new_position = $(jump).offset();
$('html, body').stop().animate({ scrollTop: new_position.top }, 500);
e.preventDefault();
});

Staggered Display of Materialized Carousels while displaying them in modals

I was making a display of carousel in the models, but I am facing problems. When I load the page and click on categories, the carousel appears staggered, or disoriented; but when I click inside the modal , it comes to exact shape. I am using the jQuery plugins, but I think I am not able to place them in order.
I am giving my HTML and JavaScript here; I have included jQuery and other CDN stuff properly.
html:
<body>
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<div id="modal2" class="carousel ">
<a class="carousel-item" href="#one!"><img src="1.jpg"></a>
<a class="carousel-item" href="#two!"><img src="1.jpg"></a>
<a class="carousel-item" href="#three!"><img src="1.jpg"></a>
<a class="carousel-item" href="#four!"><img src="1.jpg"></a>
<a class="carousel-item" href="#five!"><img src="1.jpg"></a>
</div>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<header>
<div class="navbar-fixed">
<ul id="dropdown1" class="dropdown-content">
<li>Profile</li>
<li class="divider"></li>
<li>Settings</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<nav>
<div class="nav-wrapper" >
<div class="brand-logo" href="#" style="height:100%;pointer-events: none;">
<img src="logo.png" style="height:100%;">
</div>
<b>Idea Watch</b>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a id="cate" href="#modal1" style="color: rgba(0,0,0,0.73);margin-right: 40%">CATEGORIES</a></li>
<li>BOOKMARKS</li>
<li><a class="dropdown-button" href="#" data-activates="dropdown1" style="margin-left: 50%">ME<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
</header>
here is my JS:
$(document).ready(function () {
let a = $(".dropdown-button");
a.dropdown();
$('.carousel').carousel();
$('.modal').modal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0,
inDuration: 300, // Transition in duration
outDuration: 200, // Transition out duration
startingTop: '4%', // Starting top style attribute
endingTop: '10%' // Ending top style attribute
});
$('.parallax').parallax();
});
here is CSS:
.modal{
position:absolute;
overflow:scroll;
}
Removing or writing the above css is doing nothing in favour
Please Help!
<----------Edit1------>
Image before click :
Image after click in modal :
You have to initialize components in the modal in its ready callback.
https://codepen.io/anon/pen/QgrMVd
$(document).ready(function () {
let a = $(".dropdown-button");
a.dropdown();
$('.modal').modal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0,
inDuration: 300, // Transition in duration
outDuration: 200, // Transition out duration
startingTop: '4%', // Starting top style attribute
endingTop: '10%', // Ending top style attribute
ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
$('.carousel').carousel();
},
});
$('.parallax').parallax();
});

jQuery adding and removing classes dynamically when the user clicked

I've a problem with the following code. I've two tabs in my navigation Tab-1 & Tab-2, when the user click on any tab, then I want to add the active class to it and at the same time I want to remove the active class from previously active tab. Also the tab which is currently active should display its content and have to hide the remaining content. It means when the user clicked on any tab it should display only its content and the other contents should be hidden. Please help me thank you.
<style>
.wrapper .tabs {
display: none;
}
.wrapper .tabs.active {
display: block;
}
</style>
<div class="wrapper">
<!-- Navigation -->
<ul class="nav">
<li class="active">Tab-1</li>
<li>Tab-2</li>
</ul>
<!-- Panel-1 -->
<div id="tab-1" class="tabs active">
<p>Tab-1 Content</p>
</div>
<!-- Panel-2 -->
<div id="tab-2" class="tabs">
<p>Tab-2 Content</p>
</div>
</div>
<!-- Script -->
<script>
$(document).ready(function () {
$('.nav li').click(function() {
$('.nav li.active').removeClass('active');
$(this).addClass('active');
});
// To display content for active class only
$('.nav li').click(function() {
$('.wrapper .tabs.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
You can use .eq(), .index() at click event attached to selector "a[href^='#tab-']" which selects element where href begins with #tab-, create variable referencing elements where id begins with tab-, call event.preventDefault() within click function to prevent navigation to document fragment, .hide(), .show()
$(document).ready(function() {
var a = $("a[href^='#tab-']");
var tabs = $("[id^=tab]");
a.click(function(e) {
e.preventDefault();
tabs.hide().eq(a.index(this)).show()
})
})
#tab-1 {
display: block;
}
[id^="tab"]:not(#tab-1) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">
</script>
<div class="wrapper">
<!-- Navigation -->
<ul class="nav">
<li>
Tab-1
</li>
<li>
Tab-2
</li>
</ul>
<!-- Panel-1 -->
<div id="tab-1" class="tabs active">
<p>Tab-1 Content</p>
</div>
<!-- Panel-2 -->
<div id="tab-2" class="tabs">
<p>Tab-2 Content</p>
</div>
</div>

How to close responsive menu, click outside of nav

Hello my problem is that i have a menu a responsive menu with bootstrap i want to close menu on responsive view on desktop its fine but on responsive view i want that when i click outside the nav menu on any area it should be close, my nav code is following
<!-- Navigation -->
<nav id="navigation-sticky" class="white-nav b-shadow">
<!-- Navigation Inner -->
<div class="nav-inner">
<div class="logo">
<!-- Navigation Logo Link -->
<a href="#home" class="scroll">
<!-- Your Logo -->
<img src="" class="site_logo" alt=""/><br>
</a>
</div>
<!-- Mobile Menu Button -->
<a class="mobile-nav-button colored"><i class="fa fa-bars"></i></a>
<!-- Navigation Menu -->
<div class="nav-menu clearfix ">
<ul class="nav uppercase oswald">
<li>home</li>
<li class="dropdown-toggle nav-toggle" ><span href="#about" class="scroll">About App<b data-toggle="dropdown"></b></span>
<!-- DropDown Menu -->
<ul class="dropdown-menu uppercase gray-border clearfix">
<li>HOW DOES IT WORK?</li>
<li>Features</li>
<li>APP FLOW</li>
<li>F.A.Q</li>
</ul>
<!-- End DropDown Menu -->
</li>
<li>Service Types</li>
<li>Cities</li>
<li>Rates
</li>
<li>Download</li>
<li class="dropdown-toggle nav-toggle" ><span aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle scroll">Become a Driver</span>
<!-- DropDown Menu -->
<ul class="dropdown-menu uppercase gray-border clearfix">
<li>Signup</li>
<li>Flyer</li>
</ul>
<!-- End DropDown Menu -->
</li>
<li>login</li>
<li>contact</li>
</ul>
</div><!-- End Navigation Menu -->
</div><!-- End Navigation Inner -->
</nav><!-- End Navigation -->
i use this script to close menu it close menu but menu open by double click not on single click
$('html').click(function() {
$('#menu').hide();
});
I think this might work for you:
$(document).mouseup(function (e)
{
var container = $(".nav-menu");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.css("display","none");
}
});
Updated: Try this
var container = $(".nav-inner div.nav-menu, .mobile-nav-button");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$(".nav-inner div.nav-menu").slideUp();
}
I think this is what you are looking for:
$('html').click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
Try this:
$( "#menu" ).toggle( "slide" );

Anchor Point Jumps Instead Of Smooth Scroll

For some reason when i click my logo image which is the same anchor point link as 'Home' on my Nav Menu it jumps instead of smooth scrolling like 'Home' does when it's clicked.
Does anyone know why this is happening & how do i go about correcting this? Thanks in advance :)
<!-- LOGO -->
<div class="logo pull-left">
<img src="images/logo.png" class="logo" alt="">
</div>
<!-- //LOGO -->
<!-- MENU -->
<div class="pull-right">
<nav class="navmenu center">
<ul>
<li class="first active scroll_btn">Home</li>
<li class="scroll_btn">About Us</li>
<li class="scroll_btn">Products</li>
<li class="scroll_btn">Team</li>
<li class="scroll_btn">News</li>
<li class="scroll_btn last">Contact</li>
</ul>
</nav>
</div>
<!-- //MENU -->
Add this to your existing ready function:
$(document).ready(function () {
$(".logo a").click(function (e) {
e.preventDefault();
$('body, html').animate({
scrollTop: 0,
scrollLeft: 0
}, 500);
});
});

Categories

Resources