I am attempting to create a static microsite that has a list of pages. I have a main file 'index.php' with a list of links like the following:
Go to page 1
Go to page 2
What I'm trying to do is something like (http://voiceandtone.com/) where when you click on a page it fades-out the current page you are on and animates in the new page without refreshing the page.
Does anyone know how I can achieve this or if there are any great tutorials out there that can help me?
Maybe somethig like this ?
$(document).ready(function() {
$("a").click(function() {
$('#result').load("http://domain.com" + $(this).attr('href'), function(){
// Stuff to do after the page is loaded
});
});
});
here is documentation http://api.jquery.com/load/
The answer is Ajax. You can use either the GET or POST method to achieve your task.
Related
I have a primary landing page with a filter navigation on the left, and a listing of different article types on the right. When a user clicks on an article, they go to a new landing page, but I have a copy of that filter navigation on the left, so that they can click on a new filter to go back to the primary page with a revised listing or articles.
My html looks like:
<li>Internet Articles</li>
my content should load in:
<div id="#insights-div-articles"> </div>
and my javascript looks like:
$(document).ready(function(){
$(".-categories a").on("click", function(e) {
e.preventDefault();
});
$("#internet-nav-articles").on("click", function(){
$(window.location = '/insights-and-news/internet-articles/').load("insights-category-divs/internet-articles-tab #insights-div-articles");
});
});
Thank you in advance for any help, I'm sure my javascript is way off, just trying to learn
I think what you're looking for is the history API. It looks like you want to load new content as well as change the URL in the bar. You can do that with something like:
history.pushState(data, "page 2", "bar.html");
See these resources:
https://developer.mozilla.org/en-US/docs/Web/API/History_API
https://css-tricks.com/using-the-html5-history-api/
I ended up using the parameters suggestion from the comments above. There is probably a cleaner way to do this, but my final code looks like:
For example, a user clicks on http://www.example.com/#filter=internet
$(document).ready(function(){
var url = window.location.href;
var insightfilter = url.split('#')[1].split('=');
insightfilter.shift();
if (insightfilter == 'internet') {
$.get("/insights-category-divs/internet-articles-tab", function(data) {
$("#insights-div-articles").html(data);
$('.-categories a').removeClass('-active');
$('#internet-insights-link-articles').addClass('-active');
history.pushState("", document.title, window.location.pathname);
});
}
});
The removeClass and addClass are to set the correct filter as highlighted when going back to the primary page. The history.pushState removes the #whatever from the url if a user switches to another filter on the primary landing page.
I want to load whole page into my browser using ajax. I want it to look like general page navigation (like when user clicks some link).
I have a select tag, and want to navigate to appropriate page when select is selected.
I guess I have to do it with ajax,
I am trying like that:
courseSelect.on('change', function(){
var courseId = this.value;
// start search of the course by courseId
$(document).load('/courses/'+courseId+'');
});
I get my html response, but nothing happens.
Use body instead of document:
$("body").load('/courses/'+courseId);
Also I would advice you to use a container instead of loading it fully on the document.
Something like this would what I would suggest you:
$("#content").html('<img src="loading.gif" />').load('/courses/'+courseId);
I've build up an menu with jQuery.jsTree and every item should contain a link to a specific page. With jsTree it isnt possible to click these links due to the prevention of the standard behaviour of
<a href="index.php?content=example" ... >....</a>
links (this is actually an example of one of my links. The index.php is my standard page and just the content will be replaced). In order to fix that I found this solution:
jQuery(".tree").bind("select_node.jstree", function (e, data) {
document.location = data.rslt.obj.children("a").attr("href");
});
This solution works partly for me, which means the clicked link works but in the opened window Firebug tells me that jQuery is not defined. Is it possible that on document.location the browser "forget" the library imports (as I mentioned I stay on the index.php page and just replace the content)?
and the other question is: does anyone may know a better solution for the enabling of the links in jsTree without edit the library itself ?
thanks in advance!
If your links at first look like:
<a href="index.php?content=example" ... >....</a>
And you want to load the content into a div with ID maincontent
You can do something like:
$(".tree a").each(function(){
var $this = $(this);
$this.click(function(){
$("#maincontent").load($this.href, function(){
// this callback functions fires once load is complete,
// incase you need to do post-load operations
});
return false;
});
});
This will byposs loading the new page as a normal link would, and fetch the page via AJAX and load the returned HTML into the DIV with ID maincontent.
Code is untested, but I've done this in the past so should work as is.
I'm making a site where the different pages are brought in by .load(), the problem is that index.php is initially empty and my other efforts have simply loaded the page into itself or left the page empty (pages can still be emptied and loaded from #contentspace though). My current code loads nothing, i'm sure i'm doing several things wrong, I just need to know where to start. do i need to use php for this?
//load page into contentspace by default?
var defaultpage = "blog.php";
$(document).ready(function() {
$("#contentspace").load(defaultpage);
)};
You have a syntax error with your closing of the $(document).ready )}; for one. As you can see in my demo here: http://jsfiddle.net/n1ck/NNpqq/9/ it is requesting the blog.php file.
//load page into contentspace by default?
var defaultpage = "blog.php";
$(document).ready(function() {
$("#contentspace").load(defaultpage);
});
How do you activate a link when the page loads using javascript?
I am trying to open a lightbox when the page loads, here is the link I am trying to activate.
Replay Intro
All you need to do is
<script type="text/javascript">
$(document).ready(function() {
$("#linkID").bind('click',function()
{
$(this).facebox();
})
$("#linkID").click();
})
</script>
using vanilla javascript that would be to use window.location.href = 'your_link_here.html'
Using your lightbox, the code could be different. Please post a link to the lightbox you are using or show us some sample code. Usually they come with API's or documentations on how to use them.
Do you just want to trigger a 'click' event on the <a>?
That would be something like this:
$('#home_video').click();