This is an awesome place. I have the following code but it does not work - does not change the tabs when you click on the links embedded in these tabs. Hot sure why this does not work - please let me know why you think it might not be working..
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Tabs</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script id="demo" type="text/javascript">
$(document).ready(function() {
var tabs = $("#tabs").tabs();
var $tabs = $('#tabs').tabs(); // first tab selected
$('#my-text-link1').click(function() { // bind click event to link
$tabs.tabs('select', 0); // switch to 1st tab
return false;
})
$('#my-text-link2').click(function() { // bind click event to link
$tabs.tabs('select', 1); // switch to 2nd tab
return false;
})
$('#my-text-link3').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
})
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li>ONE</li>
<li>TWO</li>
<li>and THREE</li>
</ul>
<div id="tabs-1">
<p>This is TAB 1, now is the time.</p>
<p><a href="#tabs-3" id="my-text-link5">I
want to open tab 3</a></p>
</div>
<div id="tabs-2">
<p>This is TAB 2, now is the time.</p>
<p><a href="#tabs-2" id="my-text-link6">I
want to open tab 2</a></p>
</div>
<div id="tabs-3">
<p>This is TAB 3, now is the time.</p>
<p><a href="#tabs-1" id="my-text-link4">I
want to open tab 1</a></p>
</div>
</div>
</div><!-- End demo --><!-- End demo-description -->
</body>
</html>
Look forward to hear from you,
Dave
Related
I am trying to use a toggle switch inside a tab control, to change the display of data for the current tab. So I have 3 tabs (Plots, People and Address). Tabs 2 & 3 are easy as they are just plain text content. But tab 1 (Plots) I need to filter the display of data.
So I broke this down to try and get two buttons to hide and display the divs as I want them to, but they both just hide everything.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#current").toggle();
});
});
$(document).ready(function() {
$("button").click(function() {
$("#all").toggle();
});
});
</script>
</head>
<body>
<!--<div>
<input id="current" type="radio" name="group1" value="plots">Current Plots
<br>
<input id="all" type="radio" name="group1" value="plots1">All Plots
</div>-->
<button class="current">Toggle Current Plots DIV</button>
<button class="all">Toggle all plots DIV</button>
<hr>
<div class="current" id="current">
<p>This is a paragraph with little content.</p>
<p>Paragraph 1 - Current Plots.</p>
<hr>
</div>
<div class="all" id="all">
<p>This is another small paragraph.</p>
<p>Paragraph 2 - All Plots</p>
<hr>
</div>
</body>
</html>
It's because for your click event you are using button as a selector, so any button element is going to toggle everything. Change the selector to the class on the button.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// This changed from button
$(".current").click(function() {
$("#current").toggle();
});
});
$(document).ready(function() {
// This changed from button
$(".all").click(function() {
$("#all").toggle();
});
});
</script>
</head>
<body>
<!--<div>
<input id="current" type="radio" name="group1" value="plots">Current Plots
<br>
<input id="all" type="radio" name="group1" value="plots1">All Plots
</div>-->
<button class="current">Toggle Current Plots DIV</button>
<button class="all">Toggle all plots DIV</button>
<hr>
<div class="current" id="current">
<p>This is a paragraph with little content.</p>
<p>Paragraph 1 - Current Plots.</p>
<hr>
</div>
<div class="all" id="all">
<p>This is another small paragraph.</p>
<p>Paragraph 2 - All Plots</p>
<hr>
</div>
</body>
</html>
Edit
Adding a more efficient way to handle by creating one function than can handle the buttons using data attributes on the button elements.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Use a data attribute on the button to toggle an element's id.
$('button').click(function() {
// get the button's data-target value
let target = $(this).data('target');
// use the data-target value to pass as the id of the target element.
$("#" + target).toggle();
});
});
</script>
</head>
<body>
<button data-target="current">Toggle Current Plots DIV</button>
<button data-target="all">Toggle all plots DIV</button>
<hr>
<div id="current">
<p>This is a paragraph with little content.</p>
<p>Paragraph 1 - Current Plots.</p>
<hr>
</div>
<div id="all">
<p>This is another small paragraph.</p>
<p>Paragraph 2 - All Plots</p>
<hr>
</div>
</body>
</html>
I want to select a tab on clicking a link. I tried using different online available solutions (including $('ul.tabs').tabs('select_tab', 'tab_id');) but none seems to be work with current materialize version. The official documentation for materialize states to do the initialization using var instance = M.Tabs.init(el, options); instance.select('tab_id'); but none of the methods seem to work correctly with current version or has been clearly specified w.r.t Materialize Tabs.
Any help is greatly appreciated. Below is the code snippet along with jsfiddle link,
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<!--
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
-->
<script>
$(document).ready(function() {
$('ul.tabs').tabs();
$("#btnContinue").click(function() {
$('ul.tabs').tabs('select_tab', 'test2');
});
});
/* var instance = new M.Tabs.init(el, options);
function check_active(){
var instance = M.Tabs.getInstance(elem);
instance.select('test2');
} */
</script>
</head>
<body>
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">tab1
</li>
<li class="tab col s4">tab2
</li>
<li class="tab col s4">tab3
</li>
</ul>
</div>
<div id='test1' class="col s12">
<!--<a id="btnContinue" href='#test2' onclick="check_active();">continue</a>-->
<a id="btnContinue" href='#test2'>continue</a>
</div>
<div id='test2' class="col s12"></div>
</body>
</html>
JSFiddle Link for the same: https://jsfiddle.net/chirag_cyber/6evpqcfb/6/
You should change
$('ul.tabs').tabs('select_tab', 'test2');
to :
$('ul.tabs').tabs('select', 'test2');
select shows tab content that corresponds to the tab with the id. JSFiddle
I can not seem to style my website... for example the <pre> tags.
Nothing I do works. I am trying to style the whois results, I've tried wrapping it in a div and styling that, styling the pre tags only, styling everything. I just can't seem to get it working. I am hoping I am missing something stupid. You can see from the CSS I have tried numerous combinations (tried deleting them all just having pre ect)
Nav bar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
Main page -
<?php
## Includes nav bar
include('navbar.php');
include('phpfiles/domainclass.php');
if (isset($_GET['userInput']))
{
$domainName = $_GET['userInput'];
}
?>
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<?php
##checks if the variable name $domainName is set, before loading everything below
if (isset($domainName)):
?>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'ping'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<?php
###End the "IF" check
endif
?>
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
Ajax return page --
<?php
include 'domainclass.php';
$result = domain::getWhois($domainName);
?>
<pre class="whois"> <?php echo $result ?> </pre>;
Style sheet
.header
{
margin:1%;
}
.domainquery
{
margin-bottom:3%;
padding:40px 50px;
}
.nav-bar-logo
{
margin-right:20px;
padding-right:20px;
}
.table
{
font-size:5px;
}
pre .whois
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
.whoiscontain
{
white-space:pre-wrap;
background-color:black;
width:100%;
color:white;
word-wrap: break-word;
}
pre
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
HTML output of page as requested (ignore style sheeting being above the bootstrap stylesheet, was trying something.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="lomcn.org" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'ping'
});
</script>
</div>
<h3>Tracert Result</h3>
<div class="tracecontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".tracecontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'trace'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
to style bootstrap you can over ride bootstrap styles or make your own new styles.
They recommend not editing the bootstrap .CSS directly so updates to bootstrap will not change your design.
You are correct to place your own style sheet call below the bootstrap call, so yours will override.
Even though your styles will over ride you might not be able to over ride a bootstrap rule that has the !important tag. You can either use the bootstrap classes and ID's in your stylesheet and make new rules, using your own !Important to force them through if necessary, or add additional classes for your styles:
a bit of code
was `<div class="col-md-12">`
make `<div class="col-md-12 myCol">`
and then make rules on your stylesheet for
.myCol{
these styles should persist
}
This is what I have in my layout view. Home tab and To Do tab.
And codes in my html:
<div id="tabs">
<ul>
<li id="li_tab1" onclick="HomeTab"><a>Home</a></li>
<li id="li_tab2" onclick="ToDoTab"><a>To Do</a></li>
</ul>
<div id="Content_Area">
<div id="HomeTab">
<p>Home tab content goes here.</p>
</div>
<div id="ToDoTab" style="display: none;">
<p>To Do tab content goes here.</p>
The problem here is I tried to click on the To Do tab but it seems that the onclick is not working. Please help! Thanks.
//use this code istead of that..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="tabs">
<ul>
<li id="li_tab1">Home</li>
<li id="li_tab2">To Do</li>
</ul>
<div id="Content_Area">
<div id="HomeTab">
<p>Home tab content goes here.</p>
</div>
<div id="ToDoTab" style="display: none;">
<p>To Do tab content goes here.</p></div
Use this code it will work
Use this javascript it will work to hide the content
<script type="text/javascript">
var showcont = [];
var showcont_containers = [];
$('#tabs ul li a').each(function () {
// note that this only compares the pathname, not the entire url
// which actually may be required for a more terse solution.
if (this.pathname == window.location.pathname) {
showcont.push(this);
showcont_containers.push($(this.hash).get(0));
};
});
$(showcont).click(function(){
$(showcont_containers).hide().filter(this.hash).fadeIn();
});
</script>
You can use JQuery UI:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1">
<p>Content of Tab 1</p>
</div>
<div id="tabs-2">
<p>Content of Tab 2</p>
</div>
</div>
Check out this link for more information
I have created a sample web application using jQuery Mobile.
I have created two <div>s; one contains href and another contains the content. When I click on HREF It showing jquery-mobile script Error as like below:
Error Loading Page
Can anybody see what might be causing this error?
<html> <head runat="server"> <title>How to expand collapse div layer using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-.0a3.min.css" />
<script language="javascript">
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" class='header_align'>Bristol-Myers Squibb</div>
<h2>
How to expand collapse div layer using jQuery</h2>
<div id="toggle">
<div id="heading">Heading</div>
<div id="content">
<ul>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
</div>
<div id="pages">
<div id="page-1">Page 1 Content</div>
<div id="page-2">Page 2 Content</div>
<div id="page-3">Page 3 Content</div>
</div>
</div>
</body>
</html>
The jQuery mobile default behavior of a link with a named anchor is to jump to a page (data-role="page") with the respective id. But there is no such page for page-1, page-2 or page-3 so the error occurs.
Try this
$(document).ready(function () {
var $pages = $('#pages > *').hide();
$('#content a').click(function() {
$pages.hide();
$($(this).attr('href') ).show();
return false;
});
});