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.
Related
I want to hide the div till page load the i want show that div after the page is completely loaded, for that in my phtml file i tried this.
<div id='pilot' style="display : none">
<div class="trustpilot-widget" data-locale="en-US" data-template-id="5406e6b0d049e042d5f" data- businessunit-id="54c2a000ff00057c" data-style-height="28px" data-style-width="100%" data-theme="light">
Trustpilot
</div>
</div>
<script>
$(document).ready(function() {
$("#pilot").show();
});
</script>
But its not working, any help can be appreciated.
If your jQuery library is loaded in to the DOM and you can't see any errors on the console, then this code should work for 100% sure.
If this is your content all on the page, that will be rendered during milliseconds, so your jQuery code will be executed in no time. Make delayed showing the DIV, and in that case will seem like loaded after the page rendered.
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>
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
My HTML markup looks like that
<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>
I'm trying to hide whole page loading process with following solution.
CSS Rules:
#loading {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-image:url("img/load/tr.png");
z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}
And Jquery
$(document).ready(function(){
$('#loading').fadeOut(500);
});
Now, the problem is page loads like that:
first ugly draft of page (for 1-2 seconds)
appears loading div
loading whole content
disappears loading div
You can see it in action
I don't understand why loading div appears after 1-2 seconds?
I want to prevent 1).
I think this is a pretty simple one.
First make sure jQuery is called in your section.
First, wrap all the content of your page (except the loading div) in a div called
<div id="content-wrapper">
CONTENT HERE
</div>
Then using CSS set:
#content-wrapper {
visibility:hidden;
}
Then just make the jQuery into a function like this:
$(window).load(function(){
document.getElementById("content-wrapper").style.visibility="hidden";
$('#loading').fadeOut(500, function()
{
document.getElementById("content-wrapper").style.visibility="visible";
});
});
and I can see you're using Nivo Slider. Me too ;)
Edit: I fixed it, now it works perfectly. (You don't need the onload event in your body tag anymore)
Check out the example here: JSFiddle
Try moving the styles for loading to be inline instead of relying on the full external css file to load. If you look at Google Chrome Developer Tools and the Network tab, or a similar tool, you'll see the content of the page loads first, as expected, but then you have to wait until the external css is loaded and downloaded, and then the referenced image in the css file is loaded. Placing the style inline should assist in getting the loading element to display as soon as it can, or at least sooner.
<div id="loading" style="position: fixed;left: 0;top: 0;
width: 100%;height: 100%;background-image: url(core/design/img/load/tr.png);z-index: 100;"><img src="core/design/img/load/load.gif"></div>
Why not start everything else inside a <div style="display: none;" id="loaded">, and then when the loading has finished use $("#loaded").fadeIn()?
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.