I use ZURB Foundation 5's tabs. When I click on a tab the hash in the URL is changed.
I would like to prevent this behaviour because I use hash to handle the page load.
I was trying to use preventDefault but nothing happened.
Does anybody know how to achieve this?
Second try it's really work. But not work on loaded content from Ajax
this is my index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cẩm nang Dịch Lý beta 2.0.0</title>
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body >
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<!-- <a class="left-off-canvas-toggle menu-icon" href="#">
<span></span>
</a> -->
<a class="left-off-canvas-toggle icon-menu" href="#">
<span></span>
</a>
</section>
<section class="middle tab-bar-section">
<h1 class="title ">titke</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><a href="#home" >xxxx</a></li>
<li><label></label></li>
<li>xxxx</li>
</ul>
</aside>
<section class="main-section" >
<!-- content goes here -->
<div id="main"></div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
This is my app.js
page_manager();
$(window).on('hashchange', function(event) {
page = $(this).attr('href');
page_manager(page);
});
$(document).foundation({
offcanvas : {
open_method: 'move',
close_on_click : true
}
});
function page_manager(page){
var hash = window.location.hash;
if(!page){
var page = hash.split('/')[0];
}
var input = hash.split('/')[1];
off_canvas();
switch(page) {
case'':
case'undefined':
case'#home':
$( "#main" ).load( "pages/home.html", function() {
page_home();
});
break;
case '#solar':
$( "#main" ).load( "pages/solar.html", function() {
page_solar(input);
});
break;
}
And this is my solar.html
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational" >Chủ</li>
<li class="tab-title" role="presentational" >Hỗ</li>
<li class="tab-title" role="presentational">Biến</li>
</ul>
<div class="tabs-content" data-section data-options="deep_linking: false">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
<h2>First panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
<h2>Second panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
<h2>Third panel content goes here...</h2>
</section>
</div>
From the Docs
Deep Linking
Set deep-linking to true to enable deep linking to sections of content. Deep linking allows visitors to visit a predefined URL with a hash that points to a particular section of the content. Deep linking also requires a matching data-slug on the content section that the hash should point to, without the pound (#) sign.
So if you mean you want to disable the hash change you may want to try to set it to false and remove the data-slug for the tabs..
<div data-section data-options="deep_linking: false">
I haven't used foundation before but this may help..
Edit
Include properly your Foundation dependencies
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation.min.js"></script>
Now try this, leave your tab sections empty and add an event to load content via AJAX, then call
HTML
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational">
Chủ
</li>
<li class="tab-title" role="presentational">
Hỗ
</li>
<li class="tab-title" role="presentational">
Biến
</li>
<div class="tabs-content" data-section data-options="deep_linking: false">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1" data-options="deep_linking: false">
<h2>Here perhaps add something because it is the active tab</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2" data-options="deep_linking: false">
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3" data-options="deep_linking: false">
</section>
</div>
JavaScript
$(document).ready(function () {
$(document).foundation(); // Init Foundation
// When first Tab is clicked get AJAX content
$("a[href='#panel2-1']").bind("click", function (e) {
e.preventDefault();
$("#panel2-1").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow'); // or $(document).foundation('tab', 'reflow');
});
});
// Second anchor
$("a[href='#panel2-2']").bind("click", function (e) {
e.preventDefault();
$("#panel2-2").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow');
});
});
// and so on
$("a[href='#panel2-3']").bind("click", function (e) {
e.preventDefault();
$("#panel2-3").load("http://stackoverflow.com/questions/29596655/how-to-disable-hash-change-in-zurb-foundation-5 #answer-29596981", function (data) {
$(document).foundation('reflow');
});
});
});
See the DOCS for more information about $(document).foundation('reflow'); it is useful to call this function after your AJAX is completed and successful.
If your first tab is active by default you may want to load the content via AJAX on DOM ready or add the content manually for this tab. I tried this on my end and works fine.
Related
I'm trying to create a basic slideshow so when you click the thumbnail in the nav the main image changes to that one. I have a JS function running in my head and when i click a thumbnail that image replaces the main image for a fraction of a second, before being reset. I'm really new to coding so i'd appreciate any help given!
``` <head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```
```<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='gem 4-3.jpg'>
</div>
</div>
</div>```
```<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-3.jpg');">
<img class="img-thumb" src="gem 4-3.jpg">
</a>
</li>
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-4.jpg');">
<img class="img-thumb" src="gem 4-4.jpg">
</a>
</li>
</ul>
</div>
<body>```
From your code, it looks like your thumbnails and the image your are supposed to be replacing are the same. What you see is just a flicker when you set the new src, but the image source is the same.
The issue is happening because of the a tag must be reloading the page on click.
Here is a solution without the a tag or if you want to keep the a tag in check out preventDefault() on an <a> tag
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
</div>
</div>
</div>
<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
<img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
</li>
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
<img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
</li>
</ul>
</div>
I want the navbar button hover drop-down effect to only activate once one of the navbar buttons is clicked. After that once clicked outside like body hover again should be disabled. At the moment hover is working where if I move the mouse around it activate (hence hover effect) but this can be annoying if user meant to not use navbar.
So normally when hovering the navbar, buttons shouldn't drop down any list. But once any of the navbar button is clicked, till you click out side, like the body all navbar buttons should be hovering like normally. I tried some jQuery but wasn't successful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>BAPTIST</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./headerAndFooter.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav top-nav pull-right">
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> About Us</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Providers</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Payors</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Employers</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Patients</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
</ul>
</div>
</div>
</nav>
</body>
</html>
I was having trouble with getting your navbar to work without all the css you have, so I used the generic Bootstrap 3 navbar from the site to show you.
What the code below does is this:
Anytime a link tag inside the nav is clicked, it will set the variable allowHover to true.
Anytime the users mouse enters the div with class of "content", allowHover is set to false.
I believe the other two functions are self explanatory, but if they require explanation, let me know.
let allowHover = false
$('nav a').click(function() {
allowHover = true
})
$('.content').mouseenter(function() {
allowHover = false
})
$('ul.nav .dropdown').hover(function() {
if(allowHover)
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn('fast');
})
$('ul.nav .dropdown').mouseleave(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut('fast');
})
Check out the codepen. Make sure you when you click a regular link in the nav, don't move your mouse outside of the navbar, or the dropdown won't work.
This is a close example to what you asked for, but I think its quite sufficient in getting you where you need to be to get your own rendition working.
My goal is to have the data-role collapsible, collapse after I click a tab link. Is there a solution for this or a better way to go about it? Thanks.
Here is my fiddle, notice the tabs change but the collapsible stays open, I tried to use a on click function but it didn't seem to do anything.
Any Ideas?
Jfiddle
HTML
<div data-role="tabs">
<div class="filter" data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
<h4>Filter</h4>
<ul data-role="listview" data-inset="false" >
<li><a class="collapse" href="#one" data-ajax="true">Suggested</a></li>
<li>Distance</li>
<li>Rating</li>
<li>Open Now</li>
<li>Test</li>
</ul>
</div>
<div id="one" class="tablist-content">
<!-- TAB 1 --->
1<br>1<br>1<br>1<br>1<br>1<br>
</div>
<div id="two" class="tablist-content" >
<!-- TAB 2 --->
2<br>2<br>2<br>2<br>2<br>2<br>2<br>
</div>
<div id="three" class="tablist-content" >
<!-- TAB 3 --->
3<br>3<br>3<br>3<br>3<br>3<br>3<br>
</div>
<div id="four" class="tablist-content" >
<!-- TAB 4 --->
4<br>4<br>4<br>4<br>4<br>
</div>
</div>
SCRIPT
$(document).ready(function() {
$(".collapse").click(function() {
console.log("ok");
$( ".filter" ).trigger( "collapse" );
});
});
HEAD
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You have two issues going on here. First, you have two versions of jQuery loaded.
https://code.jquery.com/jquery-1.11.3.min.js
and
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
This can provide collisions, so please remove one.
Secondly, the proper code to collapse is:
$( ".filter" ).collapsible( "collapse" );
I have a page where I'm using javascript load() to inject a particular div element from another page:
setTimeout(function(){
function showPattern(patternId, page_url) {
var patternstuff = $(patternId).load(page_url + " .pattern-markup");
return patternstuff;
}
showPattern("#tabsOpen .pattern", "individuals/tabs-open/index.html");
}, 200);
with a timeout, otherwise the html won't load and render.
I'm using AngularJS on the tabs that I am bringing in:
<div class="tab-container container" ng-controller="PanelController as panel">
<ul class="tabs">
<li class="active" ng-class="{ active: panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Tab 1</a></li>
<li ng-class="{ active: panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Tab 2</a></li>
<li ng-class="{ active: panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Tab 3</a></li>
</ul>
<div class="tab-contents">
<div class="tab-content" ng-show="panel.isSelected(1)">
Tab 1 content
</div>
<!-- Tab 1 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(2)">
Tab 2 content
</div>
<!-- Tab 2 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(3)">
Tab 3 content
</div>
<!-- Tab 3 Ends Here -->
</div>
</div>
However, when the page renders, the Angular isn't working and all of the tab-content divs are showing. The Angular tabs controller is here:
app.controller("PanelController", function() {
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});
The Angular tabs are working fine on the individual page I am pulling them from. Both that page, and this page I am loading them into have the same ng-app="manual" attribute on the surrounding element. Here is the individual HTML page I am drawing the tabs HTML from:
<!doctype html>
<html lang="en" ng-app="manual">
<head>
<title>Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/patterns.css">
<script src="../../assets/js/angular.min.js"></script>
<script src="../../assets/js/app.js"></script>
</head>
<body>
<!-- Tabs -->
<div class="pattern-markup">
<div class="tab-container container" ng-controller="PanelController as panel">
<ul class="tabs">
<li ng-class="{ active: panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Tab 1</a></li>
<li ng-class="{ active: panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Tab 2</a></li>
<li ng-class="{ active: panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Tab 3</a></li>
</ul>
<div class="tab-contents">
<div class="tab-content" ng-show="panel.isSelected(1)">
Tab 1 content
</div>
<!-- Tab 1 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(2)">
Tab 2 content
</div>
<!-- Tab 2 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(3)">
Tab 3 content
</div>
<!-- Tab 3 Ends Here -->
</div>
</div>
</div>
<!-- End Tabs -->
</body>
</html>
Do I need to reinitialize AngularJS somehow, after the HTML is loaded by javascript, for Angular to recognize the tabs and make them work?
I wonder if the reference to the value of this inside selectTab and isSelected is creating issues. Try the following code in controller,
app.controller("PanelController", function() {
var panel = this;
panel.tab = 1;
panel.selectTab = function(setTab) {
panel.tab = setTab;
};
panel.isSelected = function(checkTab) {
return panel.tab === checkTab;
};
});
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