Limiting events with e.preventDefault() - javascript

Force function toolbarInit() to fire only once.
There are 2 items with the class "nav". When I click on the link "Menu", I would like to see both nav's open.
Right now, the event runs twice (once for each nav) so you see the slidetoggle run multiple times. so rather than it opening, closing, and reopening, i just want it to open a single time.
shouldn't my use of e.preventDefault() prevent the function from running multiple times?
See my Codepen
HTML:
<nav id="people-menu" class="nav people-nav">
<div class="wrap">
<div class="region region-audience-links">
<div class="block">
<div class="content">
<ul class="row in"><div class="split-left"><li class="first leaf menu-level-1">Alumni</li>
<li class="leaf menu-level-1">Current Students</li>
<li class="leaf menu-level-1">Faculty</li>
</div><div class="split-right"><li class="leaf menu-level-1">Parents</li>
<li class="leaf menu-level-1">Prospective Students</li>
<li class="last leaf menu-level-1">School Counselors</li>
</div></ul> </div>
</div>
</div>
</div>
</nav>
<ul class="header-toolbar-triggers row">
<li><span class="icon-menu"></span><span class="nodisplay">Menu</span></li>
</ul>
<nav id="global-menu" class="global-nav nav" role="navigation">
<div class="wrap">
<div class="in">
<div class="region region-header">
<div id="block-menu-menu-primary-menu" class="block block-menu">
<div class="content">
<ul class="menu"><li class="first leaf">About</li>
<li class="leaf">Admissions</li>
<li class="leaf">Financial Aid</li>
<li class="leaf">Academics</li>
<li class="last leaf">Student & Residential Life</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Javascript/JQuery
function toolbarRespond() {
if ($(window).innerWidth() < 795) {
$('.nav').hide();
}
}
function toolbarInit() {
$('.header-toolbar-triggers a').on('click', function(e) {
var toolbarTarget = $(this).attr('data-target');
$('.'+toolbarTarget).slideToggle(500);
e.preventDefault();
});
}
$(document).ready(function() {
toolbarRespond();
toolbarInit();
window.onresize = function(event) {
toolbarRespond();
toolbarInit();
}
});

The preventDefault() method only stops the browser from performing the event's default action. In this case, that action would be to follow the link to its location. Your call to e.preventDefault() is why the browser doesn't navigate to the #global-menu URL.
The reason you're seeing multiple runs of the bound functionality is that you're running toolbarInit() multiple times--thereby binding the click multiple times. You run it at document ready, but then you bound it to run every time the window resizes as well.
In your simple sample code, there is no need to run toolbarInit() on resize of the window. If your real-life code is more complex, you need to separate the click binding out and stop calling it on resize.

Related

Vue SPA overrides dropdown

I'm building a, SPA with Vue JS, and I'm having some problems with my Sidebar component. The default functionality of my Dropdown - to open the submenu - is being overridden by Vue. When I click the anchor, the url is being updated as though I was clicking in a route.
I tried to add #click.stop, but it doesn't work.
Sidebar.vue
<template>
<div class="sidebar">
<div class="main-menu">
<div class="scroll">
<ul class="list-unstyled">
<li>
<a href="#start" data-target="#start" #click.stop>
<i class="iconsminds-shop-4"></i>
<span>Dore</span>
</a>
</li>
</ul>
</div>
</div>
<div class="sub-menu">
<div class="scroll">
<ul class="list-unstyled" data-link="start">
<li>
<a href="Dore.Start.html">
<i class="simple-icon-briefcase"></i> Start
</a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script >
export default {
name: 'Sidebar',
data () {
return {
}
}
}
</script>
The question is a little ambiguous but if I understood you correctly, you're trying to prevent navigation from happening when you click on the a element?
If this is the case, try the prevent modifier (#click.prevent) instead of #click.stop as the latter will stop the event from propagating to parents, rather than preventing the default behaviour.
Docs: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

Bind the listener to dynamic generate content in HTML

There is a dynamic generate page using jquery like this:
var html = "tab...button..datatable...etc...";
And I generate the page when click on a button
$("btn").on("click",function(){
$("body").append(html);
});
The problem is , all element from generated html does not have event listener, so for the click button /change event I use
$('body').on('change', '.gui-file', function (event) {
However, for the bootstrap element how can I bind the event to the generated element ? e.g. Tab?
Or are there any better way other than binding after generate the html content? Thanks
The tab:
<div class="tab-block mb10">
<ul class="nav nav-tabs nav-tabs-left tabs-border">
<li class="active">
English
</li>
<li class="">
繁體
</li>
<li class="">
简体
</li>
</ul>
<div class="tab-content">
<div id="tab1_1" class="tab-pane active">
</div>
<div id="tab1_2" class="tab-pane">
</div>
<div id="tab1_3" class="tab-pane">
</div>
</div>
Can you please init newly added tab by calling:
$("btn").on("click",function(){
$("body").append(html);
$(".nav-tabs").tab();
});

Show first div on page load and hide others and then show the rest on click of the menu items

I am working on a menu where on click of the navigation items, the div will be shown, but by default, the first div should be shown and rest hidden. They should be seen only on click of other navigation items.
Below is my code that I have tried so far.
The HTML:
<ul id="menu">
<li class="page_item current_page_item justClick">a</li>
<li class="page_item page-item-2 justClick">b</li>
<li class="page_item page-item-2 justClick">c</li>
<li class="page_item page-item-2 justClick">d</li>
<li class="page_item page-item-2 justClick">e</li>
<li class="page_item page-item-2 justClick">f</li>
<li class="page_item page-item-2 justClick">g</li>
<li class="page_item page-item-2 justClick">h</li>
<li class="page_item page-item-2 justClick">i</li>
</ul>
<div class="content">
</div>
<div class="content1">
cccc1
</div>
<div class="content2">
cccc2
</div>
<div class="content3">
cccc3
</div>
<div class="content4">
cccc4
</div>
<div class="content5">
cccc5
</div>
<div class="content6">
cccc6
</div>
<div class="content7">
cccc7
</div>
<div class="content8">
cccc8
</div>
<div class="content9">
cccc9
</div>
The Script:
$('.justClick').bind('click', function() {
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
The CSS:
.content {
background-color: red;
}
The JSFiddle link:
http://jsfiddle.net/6uzU6/
I am getting to achieve the onclick functionality on the click of navigation items on click of them, but all the div's are visible.
What I want, is that all the div's except first div (with the class .content) should be hidden and when you click on the navigation items, it should show up.
Try this:
$('div').not(".content,.content1").hide();
$('.justClick').bind('click', function() {
$('div').not(".content").hide();
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
DEMO
It seems like there is something missing in your code because there is no relation between the links and div you want to show. you will require more attributes on to maintain a relations between them.
A better approach would be apply a common class to all div like 'content-block' and class equal to use following code.
$(".content-block:not(:first)").hide();
and show respective div on click on link
$("#menu li").click(function(e){
$(".content-block").eq($(this).index()).show();
});
you can use other parameters as well to relate them instead of index.
Give attribute to div runat="server" and Id="dv1"
using property display block and none u can show or hide it

Changing the active class as well as content in nav pills

Basically I'm trying to create a "wizard" via bootstrap where the active tab changes when the "continue" button is clicked. I've managed to come up with the following code:
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="step1">
<a class="btn" href="#step2" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step2">
Step 2
<a class="btn" href="#step3" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step3">
Step 3
</div>
</div>
</div>
Right now it works fine when I click the nav pills themselves (the content changes and the active pill changes too).
However when I click the individual continue button the content changes but the active nav pill does not change.
Why doesn't the active class change like when I click the pill itself?
Here's a jsFiddle with the code:
http://jsfiddle.net/MvY4x/5/
Just found this much more elegant solution...
$('ul.nav.nav-pills li a').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
from: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/
You could use jQuery to activate the next tab and it's content. Give all of your continue buttons a class like 'continue' and then you can do something like this..
$('.continue').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
Demo on Bootply: http://bootply.com/112163
you could add Ids to the pills (step1tab, etc) and then make a function a function like this:
function switchPill(a,b){
$("#step"+a+"tab").removeClass("active");
$("#step"+b+"tab").addClass("active");
}
and add this to the anchor tag of the text:
onClick="switchPill(2,3)"
I hacked this fiddle: http://jsfiddle.net/MvY4x/7/
$('div.tab-content a[data-toggle]').on('click', function ()
{
var that = $(this),
link = that.attr('href');
$('a[href="' + link + '"]').not(that).trigger('click');
});
Really a bad ass hack, needs improvement but may give an idea...

Calling twitter bootstrap tab function from within another function

With bootstrap-tab.js I want to activate a tab, calling it from within another function.
Html:
<a onClick='activate_tab()'>Activate Tab</a>
<ul class='nav nav-tabs hydro' id='nav_tabs'>
<li class='active'><a href='#1' data-toggle='tab'>First</a></li>
<li class=''><a href='#2' data-toggle='tab'>Second</a></li>
<li class=''><a href='#3' data-toggle='tab'>Third</a></li>
</ul>
<div class='tabbable'>
<div class='tab-content'>
<div class='tab-pane active' id='1'>content first</div>
<div class='tab-pane ' id='2'>content second</div>
<div class='tab-pane ' id='3'>content third</div>
</div>
</div>
I am able to activate the tab on page load with the following:
<script>jQuery(function($){$('#nav_tabs li:eq(2) a').tab('show');})</script>
And the tabs activate properly by clicking on the respective anchor elements. The following does not work:
function activate_tab(){
//process other data...then goto tab
alert(1);
$('#nav_tabs li:eq(2) a').tab('show');
alert(2);
}
I am new to javascript/jQuery.
[EDIT] I stripped the original page down to just what's shown above and it works. So, likely a conflict with other functions. Sorry to waste your time.
try this if you dont
<script>
jQuery(function($){
function activate_tab(){
//process other data...then goto tab
alert(1);
$('#nav_tabs li:eq(2) a').tab('show');
alert(2);
}
});
</script>

Categories

Resources