how to change content without refreshing the page? - javascript

The Following Code is what I tried to execute to to change the content without refreshing the page. I'm unable to execute the home.html and other pages into the main page while I'm trying to call. Can anyone help me out, I'm a beginner in this. Thanks in Advance !
$(document).ready(function(){
$('#content').load('home.html');
})
ul #nav {
list-style:none;
padding:0;
margin: 0 0 10px 0;
}
ul #nav li {
display:inlne;
margin-right:10px;
}
<!Doctype html>
<html>
<head>
<title>Website Name</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Nav -->
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<!-- Content which would change without refreshing the page -->
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="simple.js">
</script>
</body>
</html>
<!-- home.html-->
<h1>Home</h1>
<p>Simple Text</p>
<!-- about.html-->
<h1>About Us</h1>
<p>Simple Text</p>
<!-- contact.html-->
<h1>Contact</h1>
<p>Simple Text</p>

Assuming
$(document).ready(function(){
$('#content').load('home.html');
})
is the the content of simple.js then change the hrefs to actual URLS like home.html and make your code look something like this:
$(function() {
$("#nav").on("click","a",function(e) {
e.preventDefault(); // cancel the link
$("#content").load(this.href); // load the href
});
})

Related

Getting the contents of each bootstrap tab and printing them in separate divs?

What I would like to do is get the contents of each bootstrap tab and print them in different divs. Basically, I would like to trigger the el.tab('show') function for each [data-toggle='tab'], grab the shown contents, and print them in different divs on the same page.
$(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
.new
{
width: 30%;
margin: 1%;
border: 1px solid black;
display: inline-block;
min-height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li>Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">This is Home</div>
<div class="tab-pane" id="profile">This is Profile</div>
<div class="tab-pane" id="messages">This is Messages</div>
<div class="tab-pane" id="settings">This is Settings</div>
</div>
<div id="newHome" class='new'>
Want to print home content here
</div>
<div id="newProfile" class='new'>
Want to print profile content here
</div>
<div id="newMessages" class='new'>
Want to print messages content here
</div>
<div id="Settings" class='new'>
Want to print settings content here
</div>
</body>
</html>
Example: http://jsbin.com/zixihexepu/edit?html,css,js,output
Remove <script src="https://code.jquery.com/jquery-3.1.0.js"></script> from your html head as jQuery is already defined, defining multiple times will cause problem.
Then try this:
$(function() {
//This event fires on tab show after a tab has been shown.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
//get the content href
var contentId = $(e.target).attr('href');
//from content href prepare new div id and show content html there
$("#new" + contentId.substring(1).capitalizeFirstLetter()).html($("" + contentId).html());
})
});
String.prototype.capitalizeFirstLetter = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
check this fiddle
bootstrap tab event Reference

i want to show all list items instead of one item

<html>
<head>
<link rel="stylesheet" type="text/css" href="mango.css">
<script>
function mango(){
document.getElementById("apple").style.display="block";
}
</script>
</head>
<body>
</body>
<ul id="main" onclick="mango()">main1
<li id="apple">sub1</li>
<li id="apple">sub2</li>
<li id="apple">sub3</li>
</ul>
<ul id="main">main2
<li>sub11</li>
<li>sub2</li>
<li>sub11</li>
</ul>
</html>
associated CSS:
#main li{
list-style-type: none;
display: none;
}
in the given program, when i click on main1 which on display the first list item,instead of that i want to display all list items under that.can you help me?
I have replaced the id with class and changed the js accordingly. Using multiple id with same value will result in undesired behavior depending on browsers
<html>
<head>
<link rel="stylesheet" type="text/css" href="mango.css">
<script>
function mango(){
document.querySelectorAll(".apple")
.forEach(function(node){
node.style.display="block";
})
}
</script>
</head>
<body>
</body>
<ul id="main" onclick="mango()">main1
<li class="apple">sub1</li>
<li class="apple">sub2</li>
<li class="apple">sub3</li>
</ul>
<ul id="main">main2
<li>sub11</li>
<li>sub2</li>
<li>sub11</li>
</ul>
</html>

Can't get the scrollTo jQuery effect to work

I'm having problems implementing the One Page Nav and scrollTo jQuery plugins (Seems I need more reputation to post the links, so I hope you know which plugins I'm referring to). I'm a complete beginner to Javascript and I just want the links of my navigation bar to have a scrolling effect as seen here.
I've pasted the entire code of my html page below as I'm not sure where I've gone wrong. For now I've left in the ready functions from both plugins (although I have tried with only one - and also tried attaching it to 'div#nav', '#navbar', etc.).
<html>
<head>
<meta charset="utf-8">
<title>deepeedesigns - Portfolio site of Web Designer Dan Pierce</title>
<link rel="icon" type="image/png" href=""><!--favicon-->
<meta name="description" content=""><!--description that appears under Google listing-->
<meta name="keywords" content="">
<meta name="robots" content="">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.nav.js"></script>
</head>
<body>
<div id="header">
<div class="container">
<div id="navbar">
<div id="logo"><img src="images/logo.png"></div>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--navbar-->
</div><!--container-->
</div><!--header-->
<div id="home">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--home-->
<div id="about">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--about-->
<div id="portfolio">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--portfolio-->
<div id="contact">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--contact-->
$(document).ready(function() {
$('#nav').onePageNav();
});
$(document).ready(function() {
$('#nav').$scrollTo();
});
</body>
</html>
Where is your opening <script> and closing </script> tag for the jQuery?
Update:
Why declare $(document).ready twice?
$(document).ready(function() {
$('#nav').onePageNav();
$('#nav').scrollTo();
});
You do not need to use Jquery to scroll top. You can use it on window object
window.scrollTo(0,0);
But if you want to animate or want to perform scroll on specific element, then you can use jquery
$("html, body").animate({ scrollTop: 0 }, "slow");
In your code, you have to write your javascript code inside <script></script> tag.
There is an spelling mistake of scrollTo instead of $scrollTo
Back To Top Link
HTML
<a class="btn-go-top" href="javascript:window.scrollTo(0,0);">Go to top</a>
CSS
.btn-go-top {
position:fixed;
bottom: 20px;
right: 20px;
}

Twitter-Bootstrap Scrollspy

I'm tying to implement Twitter-Bootstrap Scrollspy on a menu so that when the user scrolls to a section of the page the css class is changed. This proven to be beyond frustrating. I'm already using the affix code from the code which works great.
So from my code below when a user scrolls to the LI element of #ScrollSpyContent I want to change the class of .product_submenu_image to .product_submenu_active.
How can I do this?
(I'm using jsp's in java so their might be some java code in here. I tried to strip out most of it.)
Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/bootstrap.css"/>
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<header></header>
<div class="row-fluid product_submenu">
<nav class="span10 offset1">
<ul class="productmenus">
<li><div class="product_submenu_image"><img src="../img/product_computer.png" alt=""/> Product Features</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_people.png" alt=""/> Getting Started</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_phone.png" alt=""/> Product Support</div></li>
</ul>
</nav>
</div>
<div class="container-fluid">
<nav class="row-fluid" >
<ul class="span10 offset1" data-spy="scroll">
<li class="row-fluid" id="product_features"></li> <!-- End Product Features -->
<li class="row-fluid" id="gettingstarted"></li> <!-- End Getting Started -->
<li class="row-fluid" id="product_support"></li><!-- End Product support -->
</ul>
</nav>
</div>
<footer></footer>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/js/bootstrap.js"></script>
<script>
$(function() {
var $spy = $('.productmenus');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
//e.target is the current <li> element
var header = $(e.target).find(".product_submenu_image");
$(header).addClass('active');
});
});
</script>
</body>
</html>
CSS:
.product_submenu_image
{
background: url('../img/product_tab_default.gif');
max-height: 100%;
padding: 18% 0 18% 0;
border: none;
}
.product_submenu_image.active
{
background: blue;
/*background: url('../img/product_tab_selected.gif');*/
}
So you need to use the scroll spy activate event described here:
http://twitter.github.com/bootstrap/javascript.html#scrollspy
Basically you need some code like so:
$(function() {
var $spy = $('.nav.nav-pills');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
// do stuff here when a new section is in view
});
});
Here is a working example:
http://jsfiddle.net/hajpoj/f2z6u/3/
please ignore the fact that it starts at the bottom... not sure if that a unrelated or related bug, but the main point is you can see how the activate event works

jQuery Mobile - listview data-inset on refresh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$("#local").live('pageinit', function(evt) {
//$(document).ready(function(){
var edit = $('#edit');
edit.append('<li>test1</li>');
edit.listview('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#local">
<h3 class="ui-li-heading">Local Storage Test</h3>
<p class="ui-li-desc">Just a test</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="local">
<div data-role="content">
<ul id="edit" data-role="listview" data-inset="true">
<li>ntry already there. Append works...</li>
</ul>
</div>
</div>
</body>
</html>
So my problem is on the second page. I just added a new element and update the list view just to load the css jqm.
But if I use everything that is good pageInit except round the corners of the list view (data frame = "true"). He did not appear rounded, but I checked the css load, and should be all year. But when used document.ready everything is fine. Round the corners of the list view!
Please help me because I do not want to use document.ready.
$("#local").live('pagecreate', function (evt) {
var edit = $('#edit');
edit.append($('<li>test1</li>'))
});
Try replacing above code peace

Categories