I'm using jQuery to include a header to my main index page (as well as other pages). I want to highlight different items of the nav bar (which is in the header.html) using CSS depending on which page the user is currently on. Say if the user is on the Home page, then CSS will add a class to the Home item of the nav bar found in header.html. The problem I'm having is that the class doesn't get added, presumably because I'm trying to add a class to an element that is in another (jQuery loaded) file
index.html looks like this:
<html>
<head>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
</head>
<body>
<div id="header"></div>
<script>
$('.homeNav > a').addClass("navSelected");
</script>
</body>
</html>
The above is the main page of the site, where I'm using jQuery to load header.html into the div in the body. Then in my body script tag I add the class navSelected to the header element
header.html looks like this:
<header>
<h1>title</h1>
</header>
<nav>
<span class="homeNav">Home</span>
<span class="contactNav">Contact</span>
</nav>
So when the user hits this page, I want to add the navSelected class to the span with class homeNav in header.html, but the class does not get added and I'm not sure what the fix is.
If I use jQuery to add the class from within header.html then the class gets added fine, but that defeats the purpose of only highlighting the nav item relevant to the page the user is currently on
jQuery's load() is just a shortcut for $.ajax, and it's asynchronous.
You have to wait for the content to load, before you can manipulate it, and you'd do that by using the callback
$(function(){
$("#header").load("header.html", function() {
$('.homeNav > a').addClass("navSelected");
});
});
Your $('.homeNav > a') probably fail to find the DOM elements because this line is executed before the content is loaded (created). So use the callback of load like #KartikeyaSharma suggested.
There is a little change that the AJAX callback doesn't work because the creation of DOM elements takes time, so it is safer to call this function at the end of header.html:
onNavReady = function (){$('.homeNav > a').addClass("navSelected");}
Inside your header.html call this function at the end
...
<span class="contactNav">Contact</span>
<script>onNavReady()></script>
Related
I've got problem with jquery
page1.html
<div id="gold">gold value</div>
<!-- NAVIGATE -->
Go to page 2
page2.html
<div id="gold">gold value</div>
<!-- NAVIGATE -->
Go to page 1
main.js
$(document).on('pagebeforeshow', function () {
$('#gold').html(100);
});
This code working for page1.
When I navigate from page1 to page2 on page2 is string "gold value".
Its only working when I change main.js and page2.html like this:
$(document).on('pagebeforeshow', function () {
$('#gold').html(100);
$('#gold2').html(100);
});
and
when I change in page2.html
div id="gold2"
Due to the page loading method of jQuery Mobile, you may have many pages in the DOM at a certain time.
jQuery Mobile uses div elements with attribute data-role="page" to represent pages. First, make sure that your pages have a unique id, it does not matter if you separate your pages in many HTML files.
Now you can access your duplicate ID element specifying the current active page:
$(document).pagecontainer("getActivePage").find("#gold");
But I really recommend avoiding duplicate IDs, even in different pages. Use a class instead:
<div class="gold">gold value</div>
and
$(".gold").html(100);
I am using wordpress and I have div whose classname is "page" on three different pages. Three pages slugs are 1. home 2. aboutus and 3. contactus.
I want the width of page class div on aboutus page to be different but I don't want to access the page html directly I mean supposing I only have the option of jquery to be enqueued and add some new id or class on about us page with variable width. So how can it be done.
Below is the code for three pages
on home page
<div class="page">
</div>
on about us page
<div class="page">
</div>
on contactus page
<div class="page">
</div>
CSS
div.page {width:1000px; height:auto;}
I don't want to manually change the html but want to use jquery to append some new class and define different width for about us page.
add to your body tag this php code to append class:
https://codex.wordpress.org/Function_Reference/body_class
(or check if it is not already added).then your about us page will have code like that:
<body class="about-us page-12...">
<div class="page">
then you will be able to write special css for this case:
.about-us div.page {width:500px; height:auto;}
This is the first page where I try to open the detail.html;
<a href="detail.html" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
I have problems to load the scripts on detail.html (after href link is clicked on first page)
Here is my script in header of details.html(the page I go after href is clicked on first page), Problem is I can NOT get the console test print, that function is NOT called when details.html page is loaded. It only hits after I manually refresh the page
<script>
$(document).bind("pageinit", function(){//or $(document).ready(function ()
console.log('test');
});
</script>
To understand your problem I think you need to first understand how jQuery Mobile "loads" external pages. By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.
If you want to run code for a second page, you either need to include that script on your first page and use event delegation (since the second page is not part of the DOM yet) or include the script withing the second page's date-role="page" wrapper.
Case in point in your case if you want to run code for your details page you either need to include the script on your first page for example assuming you have a div on your detail.html page like the following
<div id="details" data-role="page"> ..rest of your content
</div>
Then on your first page you could do the following
$(document).on('pageinit', '#details', function() {
console.log('test');
});
Or alternatively you can include a script tag withing your "details" page wrapper.
EDIT:
As I mentioned this is the default behavior, however if you wish you can tell jQuery Mobile to do a full post when loading a second page by adding in data-ajax="false" or rel="external" to your link for example
<a href="detail.html" data-ajax="false" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
The difference between data-rel="external" and data-ajax="false" is if the second page is basically semantic in that data-rel="external" should be used if the second page is on a different domain.
I made you an working example: http://jsfiddle.net/Gajotres/Eqzd2/
$("#second").live('pagebeforeshow', function () {
console.log('This will only execute on second page!');
});
You can use on instead of live if you are using last version of jQuery.
Also take a look at my article about event flow in jQM page transition: https://stackoverflow.com/a/14010308/1848600
I'm trying to create a website with tabbed browsing and have followed a tutorial to make this. But the problem is that the code I'm currently is using doesent work as expected.
HTML-code:
http://pastebin.com/CG146NS3
CSS-code: http://pastebin.com/4VCuAwJm
JavaScript: http://pastebin.com/sZhhQs6v
The tutorial I followed: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
The problem:
When I click one of the tabs the #content goes away with a slideUp and .load loads the content but it doesent place the content in #content.
You have some duplicate #ids.
Remember when you do:
var toLoad = $(this).attr('href')+' #content';
// other execution
function loadContent() {
$('#content').load(toLoad,function(){
$('#content').slideDown('normal');
});
you are actually loading a page fragment #content into #content in your page. So you end up with this:
<div id='content'>
<div id='content'>Random Data</div>
</div>
Okay, based on your comment..Just make sure that you actually have a DIv with ID #content in your random html files.
Is there a way to do this?
page1.php
--has
<div id="main">
<div id="content">hello</div>
</div>
index.php
--has
<div id="main">
</div>
Can I somehow grab the data from page1.php inside of the content div and load it into the main div in my index.php?
I have done this with the code provided at css-tricks url: http://css-tricks.com/examples/DynamicPage/
But this uses hash change events. I don't want to use the hash feature, just the load content feature, but I can't seem to isolate the code for that because I think it's built into the bbq hashchange plugin.
Is there an Ajax way of doing it?
Something like
$(selector).find('#main').load('#content');
Just put a filtering selector after the URL in .load's first argument:
$(document).ready(function() {
$("#main").load('page1.php #content');
});
That will inject the #main div in the current page with the contents of #content from page1.php.