I am new to using the ratchet framework so I am probably missing something basic. I want to use a toggle to hide a div when the toggle is off, and display it when the toggle is on. I know the toggle name changes to toggle active when it's active but the code I found from a few other posts does not seem to be working in my situation. Any help is appreciated.
Thanks
HTML
<div class="content">
<div id="map"></div>
<ul class="table-view">
<li class="table-view-cell">
Stages
<div id="toggle1" class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Washrooms
<div class="toggle ">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Foods
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Security
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
First Aid
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
ATM
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div id="Stage1" class="StageMain">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageSecond">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageThird">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
</div>
Javascript
if(document.getElementById("toggle1").className == 'toggle active')
{
$('#Stage1').show();
}
else
{
$('#Stage1').hide();
}
you should use a handle to show/hide your element.
visit this link http://www.w3schools.com/jquery/jquery_hide_show.asp
check this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var status = 'show';
function change()
{
if(status == 'show')
{
document.getElementById("toggle1").style.display = 'none';
status = 'hide';
}
else
{
document.getElementById("toggle1").style.display = 'block';
status = 'show';
}
}
</script>
</head>
<body>
<div class="content">
<div id="map"></div>
<ul class="table-view">
<li class="table-view-cell" onclick="change()">
Stages (click here)
<div id="toggle1" class="toggle">this is test
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell" >
Washrooms
<div class="toggle ">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Foods
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Security
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
First Aid
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
ATM
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div id="Stage1" class="StageMain">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageSecond">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageThird">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
</div>
</body>
</html>
Related
I have several materialize tabs, where each tab will have a different collapsible expandable lists (used as a sidebar).
The tabs work correctly, and the expandable works correctly on the first tab; however, the expandable does not work on any other tab. It simply works as an accordion, and does not call the onOpenStart function within the collapsible.
Here is a simplified example of what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using cdn for testing purposes -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Tab 1</li>
<li class="tab col s3"><a class="" href="#tab2">Tab 2</a></li>
</ul>
</div>
<!-- This Exandable works! -->
<div id="tab1" class="col s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
<!-- This Expandable does not work (just accordion) -->
<div id="tab2" class="col s3 offset-s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
</div>
</div>
<!-- cdn for testing purposes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
M.AutoInit();
document.addEventListener('DOMContentLoaded', function() {
let el = document.querySelector('.tabs');
let instance = M.Tabs.init(el, {});
});
document.addEventListener('DOMContentLoaded', function() {
let elem = document.querySelector('.collapsible.expandable');
let instance = M.Collapsible.init(elem, {
accordion: false,
onOpenStart: function(){console.log('collasible Open Start')}
});
});
</script>
</body>
</html>
Could someone help point out what I'm missing?
Thanks!
Your error is in this line:
let elem = document.querySelector('.collapsible.expandable');
You need to use querySelectorAll in order to init both the collapsible elements.
The snippet:
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
let el = document.querySelector('.tabs');
let instance = M.Tabs.init(el, {});
let elem = document.querySelectorAll('.collapsible.expandable');
let instanceCollapsible = M.Collapsible.init(elem, {
accordion: false,
onOpenStart: function(){
//console.log('collasible Open Start');
}
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Tab 1</li>
<li class="tab col s3"><a class="" href="#tab2">Tab 2</a></li>
</ul>
</div>
<div id="tab1" class="col s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
<div id="tab2" class="col s3 offset-s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
</div>
</div>
I'm building a campaign site for my school. I am implementing a sidebar that changes colour on different sections of the website when its in viewport. I'm unable to make the scrollspy work.
This is what I have: https://codepen.io/aahlfeeyann/pen/oeBGdq
<body data-spy="scroll" data-target="#sidebar">
<div class="wrapper">
<nav id="sidebar">
<ul class="sidebar visible">
<li id="step1" class="active">
<a href="#hero">
<span>Home</span>
</a>
</li>
<li id="step2">
<a href="#about">
<span>About this Campaign</span>
</a>
</li>
<li id="step3">
<a href="#mvps">
<span>Our Participants</span>
</a>
</li>
<li id="step4">
<a href="#appreciation">
<span>How to fight Procrastination</span>
</a>
</li>
<li id="step5">
<a href="#details">
<span>Event Details</span>
</a>
</li>
<li id="step6">
<a href="#team">
<span>Our Team!</span>
</a>
</li>
</ul>
</nav>
<div class="bg-wrapper">
<div class="section" id="hero">
</div>
<div class="section" id="about">
<h1>About the Campaign</h1>
</div>
<div class="section" id="mvps">
<h1>Our Participants</h1>
</div>
<div class="section" id="appreciation">
<h1>Appreciation...?</h1>
</div>
<div class="section" id="details">
<h1>Event Information</h1>
</div>
<div class="section" id="team">
<h1>About the Team</h1>
</div>
</div>
</div>
</body>
Add nav class to ul element.
As per Bootstrap Docs
Scrollspy currently requires the use of a Bootstrap nav component for
proper highlighting of active links.
HTML
<ul class="sidebar visible nav">
.....
...
..
.
</ul>
Scrollspy Docs Reference
Hope This Helps..
I have menus in 'ul, li' how can I disable the parent menu using JavaScript? I want to stop redirect for parent menu and only child menu will get redirected
I cannot add class or id in the html to disable the parent menu. is there any way that will help to stop redirect using JavaScript?
Following is my HTML code:
<ul class="firstLevel" style="">
<li class="sel">
<div class="item">
<a title="Home" href="#/"><span>Home</span></a>
</div>
</li>
<li class="dir">
<div class="item">
<a title="About Us" href="#/page-18080"><span>About Us</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="Vision" href="#/page-18126"><span>Vision</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Team" href="#/Our-Team"><span>Our Team</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Board" href="#/page-18128"><span>Our Board</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a>
</div>
</li>
</ul>
</div>
</li>
<li class="dir">
<div class="item">
<a title="Events" href="#/events"><span>Events</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="About the event" href="#/page-18147"><span>About the event</span></a>
</div>
</li>
</ul>
</div>
</li>
</ul>
https://api.jquery.com/event.stoppropagation/
$(child).on("click", function(event) {
// TODO
event.stopPropagation();
});
Based on what I understood, you want to disable all firstLevel links except links also under secondLevel. As requested I have not touched the HTML and the javascript will do all the work by itself.
SEE COMMENTS FOR STEP-BY-STEP EXPLANATION:
$(function() {
$(".firstLevel").find('a').each(function() {
// this is all link elements under element with class firstlevel
if ($(this).parents('.secondLevel').length) {
// this is all link elements which also is under element with class secondLevel
$(this).click(function() {
//don't disturb the event here. feel free to remove the below alert as well.
alert("this link will work");
});
} else {
// this is all link elements under a firstLevel element but not a secondLevel element
$(this).click(function() {
// we shud block this click. we will return false so that jQuery will internally call e.stopPropogation() and e.preventDefault() and thus stop the link from working.
alert("this link will not work");
return false;
});
}
});
});
WORKING SNIPPET EXAMPLE: (note that the HTML is same as you posted. no changes were made there, only the above javscript was added!)
$(function() {
$(".firstLevel").find('a').each(function() {
if ($(this).parents('.secondLevel').length) {
$(this).click(function() {
alert("this link will work");
});
} else {
$(this).click(function() {
alert("this link will not work");
return false; //this will call e.stopPropogation() and e.preventDefault() and thus stop the link from working.
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="firstLevel" style="">
<li class="sel">
<div class="item">
<a title="Home" href="#/"><span>Home</span></a>
</div>
</li>
<li class="dir">
<div class="item">
<a title="About Us" href="#/page-18080"><span>About Us</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="Vision" href="#/page-18126"><span>Vision</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Team" href="#/Our-Team"><span>Our Team</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Board" href="#/page-18128"><span>Our Board</span></a>
</div>
</li>
<li class=" ">
<div class="item">
<a title="Our Charter" href="#/page-18127"><span>Our Charter</span></a>
</div>
</li>
</ul>
</div>
</li>
<li class="dir">
<div class="item">
<a title="Events" href="#/events"><span>Events</span></a>
<ul class="secondLevel">
<li class=" ">
<div class="item">
<a title="About the event" href="#/page-18147"><span>About the event</span></a>
</div>
</li>
</ul>
</div>
</li>
</ul>
I have a single page html code with 3 different Tabs in that.I have a requirement of chaining the URL for each tab.
I have seen some resources for changing the browser history using windows.history.pushState().But as far as I know It only changes changing with #extra-path.
But I am trying to achieve something like:
for tab1 .. mybasedomain.com/tab1
for tab2 .. mybasedomain.com/tab2
How do I achieve it?Can I achieve it using JavaScript, jQuery?
My code structure:
<section id="features">
<header>
<div class="features-switcher">
<div class="container">
<ul class="tab-links">
<li>
<a class="active" href="#tab1">
<span>tab one</span>
</a>
</li>
<li >
<a class="" href="#tab2">
<span>tab two</span>
</a>
</li>
<li>
<a class="" href="#tab3">
<span>tab three</span>
</a>
</li>
</ul>
</div>
</div>
<hr>
</header>
<div class="tab-content">
<div id="tab1" class="tab--active">
<section class="container">
<h2> content of tab 1</h2>
<hr>
</section>
</div>
<div id="tab2" class="tab--inactive">
<section class="container">
<h2> content of tab 2</h2>
</section>
</div>
<div id="tab3" class="tab--inactive">
<section class="container">
<h2> content of tab 3</h2>
</section>
</div>
</div>
</section>
Try using history.replaceState()
$(".tab-links a").click(function(e) {
var active = this.href.slice(-5)
, link = active.slice(1);
console.log(active, link)
$(".tab-content [id^=tab]").hide();
$(active).show();
history.replaceState(null, link
, location.href.slice(-1) === "/"
? location.href + "/" + link
: link
)
})
.tab--inactive {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<section id="features">
<header>
<div class="features-switcher">
<div class="container">
<ul class="tab-links">
<li>
<a class="active" href="#tab1">
<span>tab one</span>
</a>
</li>
<li>
<a class="" href="#tab2">
<span>tab two</span>
</a>
</li>
<li>
<a class="" href="#tab3">
<span>tab three</span>
</a>
</li>
</ul>
</div>
</div>
<hr>
</header>
<div class="tab-content">
<div id="tab1" class="tab--active">
<section class="container">
<h2> content of tab 1</h2>
<hr>
</section>
</div>
<div id="tab2" class="tab--inactive">
<section class="container">
<h2> content of tab 2</h2>
</section>
</div>
<div id="tab3" class="tab--inactive">
<section class="container">
<h2> content of tab 3</h2>
</section>
</div>
</div>
</section>
I am working on a pagination script and all is well apart from one small problem. I need to fire an action when the page number (li) is clicked.
The pagination is returned via ajax to a div called "result". However this div is burried amound several other divs deep - i think this may be the problem. How can fix?
Thanks
$('#result .pagination li').live('click', function () {
var page = $(this).attr('p');
loadData(page);
return false;
});
The full output is below with the full pagination
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0">
<div class="navbar-header">
<button class="navbar-toggle" type="button"><span class="sr-only">Toggle navigation</span>
</button> <a class="navbar-brand" href="index.php">Title</a>
</div>
</nav>
<nav class="navbar-default navbar-static-side">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input class="form-control" placeholder="Search..." type="text">
</div>
<!-- /input-group -->
</li>
<li class="active">Dashboard
</li>
<li>Claims
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Claims</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
DataTables Advanced Tables
<div id="loading" style="float: right; display: none;">
<img src="images/loading.gif">
</div>
</div>
<div class="panel-body">
<div id="result">
<!-- DATABASE RESULTS GO HERE -->
<ul class="pagination" id="pg">
<li class="disabled">First
</li>
<li class="disabled">«
</li>
<li class="disabled"><a>1</a>
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
<li>»
</li>
<li>Last
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using jQuery v1.10.2
You are using jQuery >= 1.9, so there is no .live() method
$(document).on('click', '#result .pagination li', function () {
var page = $(this).attr('p');
loadData(page);
return false;
});