I have an issue with triggering the click event of one of the elements, i added to my Jquery tab. As you know, when one of the links in a Jquery tab is clicked, it changes the content of a specified div to the contents of the div with an id specified in the '<a> </a>' of one of the Jquery tab elements (in this case the one that has just been clicked)..
What I want to do is trigger the click event on this element (i.e the Jquery tab group element that has just been clicked) when i click another element in my document (i.e the element with the id #viewClassesNavBtn).
-------This the call back function code snippet ------
$(document).ready(function(){
$("#viewClassesNavBtn").click(function(){
<!-- $("#dasCBtn").click();-->
document.getElementById('dasCBtn').click();
});
});
------This is the jquery tab ui section------
<ul id="tabs_ul" style="background-color:transparent; border:none;">
<li class="dashBBtn" id="dasBtn">Dash Board</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasCBtn">Classes</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasPBtn">Profile</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasBStn"> Settings</li>
</ul>
When I click the element with id #viewClassNavBtn, I expect it to simulate the tab switching event of the JQuery UI but it doesn't. I get the feeling it is not possible, but I am inexperienced with JQuery UI tabs and stuff, so if it is possible, please help.
jQuery UI is not attaching the click event to the li items, it's attaching it to the link. Simply move the id tags onto the link and problem solved. Included a function to simulate a mouse click instead of relying on the technically obsolete .click() method (which doesn't seem to show any signs of going away)
function clickTab(tab) {
let click = new MouseEvent('click', {
bubbles: true,
cancelable: true,
synthetic: true,
view: window
});
tab.dispatchEvent(click);
}
$( function() {
$( "#tabs" ).tabs();
$(".navBtn").click(function() {
let tab = document.getElementById(this.dataset.for);
if (document.getElementById("simulate").checked) {
clickTab(tab);
} else {
tab.click();
}
});
});
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li class="dashBBtn"><a id="dasCBtn" href="#tabs-1">Nunc tincidunt</a></li>
<li class="dashBBtn"><a id="dasPBtn" href="#tabs-2">Proin dolor</a></li>
<li class="dashBBtn"><a id="dasBStn" href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Stuff in the C tab</p>
</div>
<div id="tabs-2">
<p>Stuff in the P tab</p>
</div>
<div id="tabs-3">
<p>Stuff in the S tab</p>
</div>
</div>
<div>
<button class="navBtn" type="button" data-for="dasCBtn">C</button>
<button class="navBtn" type="button" data-for="dasPBtn">P</button>
<button class="navBtn" type="button" data-for="dasBStn">S</button>
<input id="simulate" type="checkbox" checked>
</div>
</body>
Related
I am designing a widget style using HTML ul tag.
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a></li>
<li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a></li>
<li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a></li >
<li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
And I have 4 divs.
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
I only want to show the li's href div that has currently been clicked. I only want to use HTML / CSS and jQuery.
This is the basic idea. You can improvise as per your need. I have set the target li's id as data attribute in to div where you will click. Now on click of that div i gets li's id so we can make that shown and all else li hide.
$(document).ready(function(){
$('.tab').click(function(){
$('.tabs li').hide();
var idTab = $(this).data('id');
$('#' + idTab).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tabs' style='width:50%'>
<ul>
<li id="basic-li"><a href='#basic_information'>Basic</a>
</li><li id="master-passenger-li"><a href='#master_passenger'>Master Passenger</a>
</li><li id="other-passenger-li"><a href='#all_passengers'>Other Passengers</a>
</li ><li id="confirm-li"><a href='#confirm'>Confirmation</a></li>
</ul>
</div>
<div id="basic_information" data-id="basic-li" class="tab">//basic info</div>
<div id="master_passenger" data-id="master-passenger-li" class="tab">//master passenger</div>
<div id="other-passenger" data-id="other-passenger-li" class="tab">//other passenger</div>
<div id="confirm" data-id="confirm-li" class="tab">//confirm</div>
Cheers...!!
This can be achieved via the following changes to your HTML, and the addition of the jQuery script below:
<ul>
<!-- add data-target attribute to each "a", with value matching corresponding tab -->
<li>
<a data-target="basic_information" href='#basic_information'>Basic</a>
</li>
<li>
<a data-target="master_passenger" href='#master_passenger'>Master Passenger</a>
</li>
<li>
<a data-target="other-passenger" href='#all_passengers'>Other Passengers</a>
</li>
<li>
<a data-target="confirm" href='#confirm'>Confirmation</a>
</li>
</ul>
<div id="basic_information" class="tab">//content</div>
<div id="master_passenger" class="tab">//content</div>
<div id="other-passenger" class="tab">//content</div>
<div id="confirm" class="tab">//content</div>
<script>
$(function() {
// Hide all tabs by default
$('.tab').hide()
// Assign click handler to all elements with data target attribute
$('[data-target]').click(function() {
// Hide all tabs
$('.tab').hide()
// Extra target id of the menu link that was clicked
var tabToShow = $(this).data('target')
// Show the corresponding tab
$('#' + tabToShow).show()
// Return false to prevent default navigation behaviour of links
return false
})
})
</script>
I'm working on a custom solution, so I thought I would ask the community if anyone has use jQuery Tabs for this purpose before.
The idea is this: I have one main panel, a form with inputs. There are multiple tabs which basically identify different records. All the records will use this form, thats why I just want to load it once, instead of for each tab.
I put a basic example of the direction I want to go. As you can see there are 3 tabs but only one panel. I want to dynamically load content into the_input depending on which tab I click. SO i don't even want to switch the panel, just the selected tab on each click.
I was thinking I need to catch the beforeActivate (http://api.jqueryui.com/tabs/#event-beforeActivate) event, identify which tab was selected, and dynamically alter the 1 visual panel accordingly.
The code isn't really working
jQuery(function($){
$("#tabs").tabs({
beforeActivate(event, ui) {
$('#msg').append('<p>'+ui.newPanel+'</p>');
//I figure what I want to do here is catch the ID of the selected tab, and use that to dynamically load content to the tab.
}
});
function fill_input(selector){
if ( selector == 1 ) {
$('#the_input').val(1);
}else if ( selector == 2 ) {
$('#the_input').val(2);
}else{
$('#the_input').val();
}
}
})
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
<div id="bol_new">
<form>
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
You could set the href for each hyperlink to bol_new as under
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
This will set the panel for each tab to the same div with id="bol_new"
Test: https://plnkr.co/edit/EGtCnmNr0c28AaT647SP?p=preview
I would advise just mocking up the tabs with CSS. You can then manipulate the form as needed.
Working example: https://jsfiddle.net/Twisty/j63uvk4q/
HTML
<div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content">
<ul class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active">
New
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 1
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 2
</li>
</ul>
<div id="bol_new" class="ui-tabs-panel ui-corner-bottom ui-widget-content">
<form>
Record:
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
JavaScript
var myData = {
records: {
bol_1: "Homer Simpson",
bol_2: "Marge Simpson"
}
}
$(function() {
$("#tabs .ui-tabs-nav li").click(function(e) {
e.preventDefault();
$("#tabs li.ui-state-active").toggleClass("ui-tabs-active ui-state-active");
$(e.target).parent().addClass("ui-tabs-active ui-state-active");
var id = $(e.target).attr("href").substring(1);
$("#the_input").val(myData.records[id]);
});
$("#tabs .ui-tabs-nav .ui-tabs-tab").hover(function(e) {
$(this).toggleClass("ui-state-hover");
}, function(e) {
$(this).toggleClass("ui-state-hover");
});
});
I have the following code for my menu, the trouble is I want it to hide/close as soon as I click on one of the options, instead of closing at the X button:
THIS IS THE HTML
MENU
<div class="mobilenav">
<li>HOME</li>
<li>SERVICES</li>
<li>WORK</li>
<li>TALK</li>
</div>
ICON
<a href="javascript:void(0)" class="icon">
<div class="MENU">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
AND JS
$(document).ready(function () {
$(".icon").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
Try this:
$( ".icon" ).bind( "click", function() {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
This will bind the click function to the class. Also a side-note watch where you place your scripts. From personal experience I've had best results putting all js code (inline and external) right before the tag (even when using document.ready()) but this is probably just personal preference.
DOCUMENTATION FOR BIND
<script type="text/x-kendo-tmpl" id="my-template">
<ul >
<li>
<div onclick="showToggle()"> Show/Hide Form</div>
<div id="myform"> My Form Stuff</div>
</li>
<ul>
</script>
So in the above I want to click on the div or button and what ever and toggle the other part of the list item.
<ul data-role="listview" id="myList"
data-bind="source: listOfStuff"
data-template="my-template"></ul>
now I can't really assign IDs to this. I just want to toggle it with some function like below. Maybe this is more of a javascript question. I guess I could also add another variable to my list of objects in my mvvm and then set that to visible true on a click, but I'd rather not add on the to the view model.
function showToggle(){
if ( $('#myform') visible) do
$('#myform').hide();
else
$('#myform').show();
}
You can use jQuery On to attach an event handler function for one or more events to the selected elements. Set class selector for your div and register click handler for that class.
<script type="text/x-kendo-tmpl" id="my-template">
<ul >
<li>
<div class="show-hide"> Show/Hide Form</div>
<div>My Form Stuff</div>
</li>
<ul>
$('.show-hide').on('click', function(e) {
console.log( e ); // e is div
});
Ok im working on this website where Id like to have the content of a div change to content based on the menu item clicked. I do not have pages for the different menu items but I have all the different content in divs in the index page. I would like to incorporate JQuery but I just cannot seem to find a way to link the menu item class or id to the corresponding div element. My code below":
<html>
<body>
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about">About Me</li>
<li class="btn" id="gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
</body>
</html>
etc..
as for my JQuery coding so far this is where i am after hours of trying different things out
//Update Content-Container Div
$(document).ready(function(){
var $main = $(".content-container");
var $section = $(".content");
$("#about").click(function(){
$main.empty();
$main.find(".bio");
$(".bio").show();
});
});
Instead of writing individual handlers for each menu item, use a data-* attribute to refer to a particular content which need to be displayed, then in the click handler use that attribute to decide which content has to be displayed
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about" data-target=".bio">About Me</li>
<li class="btn" id="gallery" data-target=".gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact" data-target=".contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
then
$(document).ready(function () {
var $main = $(".content-container");
var $section = $(".content").hide();
$(".navbar li.btn").click(function (e) {
e.preventDefault();
$section.hide();
var target = $(this).data('target');
if(target){
$section.filter(target).show();
}
});
});
Demo: Fiddle
Check out jquery tabs,
I think you need this.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Gallery</li>
<li>Resume</li>
<li>Contact Me</li>
</ul>
<div id="tabs-1">
<p>Home content</p>
</div>
<div id="tabs-2">
<p>About me content</p>
</div>
<div id="tabs-3">
<p>Gallery content </p>
</div>
<div id="tabs-4">
<p>Resume content </p>
</div>
<div id="tabs-5">
<p>Contact Me content </p>
</div>
</div>
</body>
</html>
Try:
Assuming ids are associated with relevant classes.
HTML:
<li class="btn" id="bio">About Me</li>
JS:
$(".btn").click(function () {
$(".content-container .content").hide();
$(".content-container").find("."+$(this).attr("id")).show();
});
DEMO here.
Here I initially hid everything, then based on what links you click, the page displays the correct content. Note that your about page has the wrong id attribute so it will not work but your contact and gallery pages work. This is roughly how the twitter bootstrap framework works, I do suggest you look at that.
var $main = $(".content-container");
var $section = $(".content");
$section.hide();
$("li.btn").on('click', function() {
var link_id = $(this).attr('id');
var content = $main.find("." + link_id);
$section.hide();
content.show();
})
Working Example
const containers = Array.from(document.querySelectorAll('.content'));
// Slicing for link as it's not related to changing the slide content,
// so we don't want to bind behaviour to it.
const links = Array.from(document.querySelectorAll('.navbar ul .btn a')).slice(1);
$(function() {
hideEls(containers);
});
function hideEls (els) {
if (Array.isArray(els)) {
els.forEach(el => {
el.style.display = 'none';
});
}
return;
}
function showEl (els, i, e) {
e.preventDefault();
hideEls(els);
els[i].style.display = 'block';
}
links.forEach((link, i) => {
link.addEventListener('click', showEl.bind(null, containers, i));
});
Here's a fiddle