thi is javascript code to show another html file inside index.html
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
but how to make when i click example header to show just content of header.html or if i click footer to show just footer.html
<li><span>Header</span></li>
<li><span>Footer</span></li>
Here's an example:
HTML
<ul id="nav">
<li>
<a href="header.html" data-container="header">
<span>Header</span>
</a>
</li>
<li>
<a href="footer.html" data-container="footer">
<span>Footer</span>
</a>
</li>
</ul>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
JavaScript
$(document).ready(function() {
$('ul#nav li a').on('click', function() {
var el = $(this);
$('#' + el.data('container')).load(el.attr('href'));
return false;
});
});
Related
I am trying to get one link to open in a certain div.
When click on Jump link I need open the link on div id="container" and replace the image on the div with the webpage.
I have tried this code without success.
How to do resolve this?
Can you help me?
Thank you in advance for any help, really appreciated.
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script>
function finish(){
document.getElementById("loading").style.visibility = "hidden";
}
$(document).ready(function () {
$('input[readonly]').on('keydown', function (e) {
if (e.which === 8) {
e.preventDefault();
}
});
});
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
});
});
</script>
<ul class="sub_menu">
<li><a name="#container" href="http://...">Jump</a></li>
</ul>
<div id="container" >
<img src="images/Logo.jpg" />
</div>
#EDIT01
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showPanel() {
document.getElementById('image').style.display = "none";
}
</script>
<ul class="sub_menu"">
<li><a name="#container" href="http://..." target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="image">
<img src="images/Logo.jpg" />
<iframe name="content" style="border:none;">
</iframe>
</div>
Why not use iframe?
function showPanel() {
document.getElementById('image').style.display = "none";
}
<ul class="sub_menu">
<li><a name="#container" href="www.example.com" target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="container" >
<img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067" id="image">
<iframe name="content" style="border:none;">
</iframe>
</div>
Answer for edit #1: Your edit #01 is not working because you are hiding the entire div by id "image". Change div id to another name.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showPanel() {
document.getElementById('image').style.display = "none";
}
</script>
<ul class="sub_menu">
<li><a name="#container" href="example.com" target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="images">
<img src="images/Logo.jpg" id="image" />
<iframe name="content" style="border:none;">
</iframe>
</div>
You can create iframe on the fly and place it inside container div.
$('.sub_menu').on('click', 'li > a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('#container').html('<iframe class="myiframe" src="'+url+'" />');
})
.myiframe{border: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub_menu">
<li><a name="#container" href="/questions">Jump</a></li>
</ul>
<div id="container" >
<img src="images/Logo.jpg" />
</div>
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.
here is the jsfiddle of what im trying to accomplish..
http://jsfiddle.net/#&togetherjs=08LnngLQ1M
im trying to make the content in an html file swap in and out. The java script file is set up to apply the slide function to my div. Please show me what I need to add to the javascript in order to allow the information to swap in and out as well as display appropriately.
first my javascript file then under is the index.html file. also displayed the css in the head in order to show how i am trying to hide the content.
please show me how to implement the javascript i am lacking and then make appropriate changes to my html and css if necessary.
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#navigationMenu li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#navigationMenu li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
<style type="text/css">
#page1, #page2, #page3, #page4, #page5 {
display: none;
overflow:hidden;
}
</style>
</head>
<body>
<div id="top">
</div>
<!-- The navigation css is in styles.css -->
<div id="main">
<ul id="navigationMenu">
<li>
<a class="home" href="#home">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#about">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="#services">
<span>Services</span>
</a>
</li>
<li>
<a class="portfolio" href="#portfolio">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="#contact">
<span>Contact us</span>
</a>
</li>
</ul>
</div>
<!-- The css for the main area is in css.css-->
<!-- The wrapper and the content div control the jquery slide up effect -->
<div id="wrapper">
<div id="content">
<!-- The 5 pages content divs will display in this area -->
</div>
</div>
<!-- The actual content I want to switch in and out of the panel, this is hidden -->
<div id="page1" class="pages">
<p>1 Whole bunch of text 1</div>
<div id="page2" class="pages">
<p>2 Whole bunch of text 2</div>
<div id="page3" class="pages">
<p>3 Whole bunch of text 3</div>
<div id="page4" class="pages">
<p>4 Whole bunch of text 4</div>
<div id="page5" class="pages">
<p>5 Whole bunch of text 5</div>
I suggest that you change your html so that your "pages" have ids that actually correspond to the href of the associated menu items:
Home
...
<div id="home" class="pages"><p>1 Whole bunch of text 1</p></div>
Then you can implement your slide animation paging thing something like this:
$(document).ready(function() {
$("#navigationMenu a").click(function(e) {
e.preventDefault();
var item = this.href.split("#")[1];
$("#content").slideUp(function() {
$(this).empty()
.append($("#" + item).clone().show())
.slideDown();
});
});
});
Note that there is no need to use .load() because you have all of the content already on the page. You can just empty the container and then append a clone of the relevant content.
Demo: http://jsfiddle.net/FtS8u/1/
Or in my opinion a neater option would be to move all of the content into the #content div to start with, show the #home "page" by default, and then just hide and show the pages in place:
$(document).ready(function () {
$("#navigationMenu a").click(function (e) {
e.preventDefault();
var item = this.href.split("#")[1];
$(".pages:visible").slideUp(function () {
$("#" + item).slideDown();
});
});
$("#home").show();
});
Demo: http://jsfiddle.net/FtS8u/2/
And a last thing to consider: if you remove the .pages { display : none; } CSS and instead use jQuery to hide the pages by adding this to the start of your document ready:
$(".pages").hide();
Then you'll still get the same effect: http://jsfiddle.net/FtS8u/7/ - except that if the user happens to have JavaScript disabled the page will still work because then the default anchor navigation will jump down to the associated div: http://jsfiddle.net/FtS8u/8/
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
I fund a toggle code that works perfectly, but I'd like to add a speed effect to slow it down a bit it when opening and closing. I did try to insert this code on it <p onclick="javascript:setTimeout(toggle(), 3000);">OPEN</p> instead of <h1>OPEN</h1> but without success.
I've a joomla website, some plugins use jquery. It seems that Jquery could do the trick with something like .toggle( [duration ] [, complete ] ) I've seen that JQ is a "Javascript's library", so it should work with the code bellow but no idea how I should insert it. I don't know if "simply" adding jquery code inside the code below would work, or if I should add something else in the FTP website some XX.js files (as I have seen in some tuto). I'm lost...
<script type="text/javascript">
// <![CDATA[
function toggle(id, link) {
var elem = document.getElementById(id);
var text = document.getElementById(link);
if (elem.style.display != "none") {
elem.style.display = "none";
text.innerHTML = "show";
} else {
elem.style.display = "block";
text.innerHTML = "hide";
}
}
// ]]>
</script>
<ul>
<li><a id="displayText" href="javascript:toggle('toggleText', 'displayText');">show</a>
<div id="toggleText" style="display: none;">
<h1>OPEN</h1>
</div></li>
<li><a id="toggler2" href="javascript:toggle('secondText', 'toggler2');">show</a>
<div id="secondText" style="display: none;">
<h1>OPEN</h1>
</div></li>
</ul>
thanks!
Since you are using jquery make some minor changes to the mark up for ease of use
<ul id="container">
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
</ul>
Then
$(function(){
$('#container').on('click', 'a.opener', function(){
$(this).next().toggle('slow')
});
});
Demo: Fiddle
for joomla :
1/ add in the index.php just after the tag this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript"></script>
2/ create in the ftp a file called app.js and write in it:
var $j = jQuery.noConflict();
$(function(){
$('#container').on('click', 'a.opener', function(){
$(this).next().toggle('slow')
});
});
3/ in the article source code :
<ul id="container">
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
</ul>