I successfully loaded a list of links (e.g. <a href="info2.php">More info</a> into the #submenu div using the first part of the code below, and want these links, when clicked, to load their URL into the #content div.
$(function(){
$('#submenu').load('submenu.php');
$('#content').load('info.php');
$('#submenu a').click(function() {
$('#content').load(href);
});});
I have a site that is very jQuery and image heavy. The main sections of the site link to sections that are built with several Tabs, and as it loads, you briefly see all the content load and then it is hidden by the Tabs code.
The plan is to have a full window DIV that sits above all the content with a loading icon that plays until the entire page loads, and then it fades down.
After some hair pulling and research I have code in place that does exactly as I ask, however it does not seem to work in IE6+7. It works in all other browsers.
The current code is:
CSS for the loading DIV is:
A working link is [url]
I'm utilizing the replaceWith(); function on a page to simply replace content in one area with new content with corresponding buttons.
Problem is I really want to have slimbox on my images that I am loading into this new area, and the links will not work. Oddly enough the code recognized that it is a link, it just won't play the slimbox animation, it just opens the image normally.
The code I have in a function file linked from the main page (portfolio.html) is:
$('#graphicOne').click(function() {
$('#descrip').replaceWith ('<div id="descrip"><div class="floatRightPortfolio"><h4><em>"Embrace your Environment"</em></h4><p class="right"><a href="portfolio/embrace.html" rel="lightbox" title="Embrace Your Environment"><img
[Code].....
So basically there's a descriptive area on the right hand side, and the buttons are on the left. Inside the descriptive area is the title, and then the image.
You can view the site here: [URL]
how to write a script where when a link is clicked in the left nav column, it will display text in the right main column. So, when you first arrive to the page, nothing will appear in the main portion of the site. Content only appears after clicking on a link. When you click on another link, the previous content is hidden, and the new text is displayed. Here's what I have so far:
HTML
<div class="container">
<div class="nav">
<ul id="menu">
[Code]...
Fairly new to the Jquery game and I must say it rocks. I am trying to load new contents of one page into the div of a current page. My test URL can be foundWhen the first url (contact) is clicked the contents are loaded into the div, however if you click on the next link (about) it takes you straight to the about page as the contents are not loaded . Can anyone assist on how I can make this happen? I think it has something to do with the dom already being loaded.Here is my code
$(document).ready(function() {
$('#content a').click(function(){
var toLoad = $(this).attr('href')+' #content';
[code]....
Been trying to get this working for a while now, and I keep getting the error 'ajaxpage is not defined' Code copied from Dynamic Drive
[Code]....
I have an ajax.php page that handles requests for other pages. I am using .load() function to request the content. my problem is, when I click for the first time on the link to retrieve content, it will not loaded until the secont click. This is my code, it use fancybox to display it.
$('.edit_res_form').click(function(){
var id=$(this).next().val();
$('#edit-res-hidden').load('ajax.php?do=load&form=edit_res_form&res_id='+id,function(){
[Code]....
I have a lagre php page containing a lot of divs. Some functions take a lot of time in order to retrieve from db and then produce the html to be placed inside certain divs. So what i want is to first load the page without loading the html that requires time, and after the page is loaded then produce the html. Its all in the same page.
I know i have to deal with the:
But how can i first load some divs and then after this divs are loaded , afterwards load some other divs, all in the same page?
I can load content and update a <div> using the following code:
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('mypage.html').fadeIn("slow");
}, 5000);
<div id="loaddiv"></div>
However what I would like to do is load the html into a variable and then append it to the <div>. Looking through the forums I see people have suggested using get instead of load. However when I use $.get there is nothing in the responseText or responseXML.
So how can I load my html into a variable, and then append the contents of the variable to my div?
I'm fairly new to JQuery and am trying to get my menus to load all the images before it tries to fade in. I am passing categoryid to an external php page which gets the relevant data from the database, and then displays it in the right div element.
[Code]...
It turns out that jeditable.js will not work on any content that was .load(ed) Is there a way to use .delegate to accomplish the same as .load
View 3 Replies View RelatedI'm trying to load content from an external html file into a div.Here is the code I'm using now:
<script type="text/javascript">
("#upcomingevents").load("upcomingevents.html", function(){
//function executed when load is done.
[code].....
I have several drop down lists of links with one of the drop downs being a "My Favorites". My intent is that when the user clicks on a star image next to the links, it is cloned and appended to the favorites menu, where it can then be drag and drop sorted. To remove the link from the favorites menu, the user can either click on the "x" button to the right of the link on the favorites menu, or unselect the star on the main menus.
I have successfully cloned the link and appended it to the favorites menu by selecting the star and enabled the drag and drop sorting, but I am having trouble removing the link form the favorites menu when unselecting the star and when clicking on the "x". Here is what I have so far:
var me = '';
$('div.star').toggle(function(me){
var me = $(this).next('a').text();
$(this).addClass('favorite').next('a').clone(true).appendTo('ul#myFavs1').wrap('<li></li>').before("<div class='dragHandle'><img class='png' src='_images/dragHandle4.png' width='11' height='11' /></div>").after("<div class='remove' title='Remove from Favorites'></div>").attr('id', me); return me;}, function(me){[CODE]...
So, I clone the link, wrap it, add a drag handle and the 'x' button, give it an id of the text of the link which all works fine. I have a different part of the script that uses the drag handle to drag and drop the links...that works fine. The issues I am having are that unselecting the star does not remove the link from the favorites drop down and clicking on the 'x' does not even fire the alert. The z-index on the 'x' is higher than all the other elements in the li.
I'm using a jquery slider for displaying content on a webpage.
[url]
Like in the first examples i have 5 panels, and i have a meta navigation, contact, links ect. all thedifferent content for the meta-navigation is displayed via jquery in panel 5, and is working fine.
Now my question; when the user is for example on the second panel, and the clicks on links, the page should show panel 5 (which is the index page(default.asp)), and then show only the content for the links.
I tried different stuff for loading the defautl.asp page, but it doesn't work. how do i tell, that if i click on the link wirh class="kontakt" the page should load the default.asp, and THEN do all the jquery stuff?
Below is one example, what i tried, but did not work.
This is myI use the jQuery.load() function to load content from a page that should get in an <ul> element.At the moment the file contains plain text, and it works, but when i put the content in <li> elements it stops working.
View 3 Replies View RelatedI want add loading image before load content in bellow template.but I do not know what to do!
View 5 Replies View RelatedI'm loading content with the .load() method. How do i only allow oneclick to the link. I don't want future clicks to keep loading the samecontent.
$(document).ready(function(){
$("#FAQ").click(function(){
$('<div id="faqcontent" />').load("content.htm #faqs" , function(){
[code]....
I have this function lerotas(), that loads content throw Json, and then fadeIn the new content.
In local server it works fine, but in a web server is more slow to load the content, and when it fades in the new content is not ready yet.
How can i delay de fadein until de content is ready to load?
function lerotas(){
$('#listagem_rotas').fadeOut('slow', function(){
$.getJSON('ajax/modulos/rotas/le_rotas.php', function(dados_followup){
var rotas = "";
$.each(dados_followup, function(){
[Code].....
I use tabs, loading content by ajax. When I click on a tab, on first load, any access to objects like:
$("#my_input_text").val('my value')
Works fine, but if a click on another tab, and click again to theprevioustab, the same code don't update the input text.I think that is because the document has 2 inputs with the same id after second refresh.
To prove this, I did, on javascript console of firebug:
document.getElementById('my_input_text').id = "bad_my_input_text";
and$("#my_input_text").val('my value')
works again. Exist some way, when click on a new tab, before load a content, clean all data from previous tab?
Why after several times click on buttons, is hang website? i use of function .load() for loading content(html). i use of firebug for solution this problem but did not succeed.
My purpose is this buttons:
You yourself can see my site : [url]
And can see this js code to address: [url]
I'm loading external div content into another page div based on the hash. It works fine but when you click the link, the page loads, but it's blank. If you refresh the page it appears.I'm looking for some way to refresh the content (once).
View 1 Replies View RelatedI want to load new content into a container using .load ('content.html') after the user clicks on a menu item. and in the new content is a form and i encountered 2 problems. first is that the new content don't comply to my loaded css? the fonts sizes are off and the content seem unformated. second is that i cannot access the data in the new content in jQuery. code...
View 1 Replies View RelatedI have built a site that loads new content from a database when the user hits the end of the page. This works fine in all desktop browsers and on the iPad, but is not working on the iPhone. Have tried an iPhone 3g and 4.
Here is the code:
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$.ajax({
type: 'POST',
url: 'nextSet.php',
data: "?dummy=" + new Date().getTime(),
dataType: 'html',
cache: false,
beforeSend: function() {
$('#scrollLoading').show();
$('#scrollLoading').html('<p><img src="/images/ajax-loader.gif" alt="loading..." /></p>');
},
success: function(response){
$('#scrollLoading').hide();
$('#resultsPageSearch p').css('margin','0');
$('#sortDrop').show();
$('select.sortddl').selectmenu('destroy');
$('select.sortddl').selectmenu({style:'dropdown'});
$('#resultsSection').append(innerShiv(response));
},
error: function (request, status, error) {
alert(request.statusText);
}});}});
I can use the jQuery ajax function to grab all of the html from a remote page, and that's cool. What I would like to do is to grab only a particular element of the remote page, not the entire page. Is this possible? I've tried some variations of the ajax 'url' param, but I haven't gotten anything to work yet.
View 3 Replies View RelatedEntire Code Sample:[URL]I can get this code to work no problem if I create a second iFrame ("iNav") just to load the DHTML menu into. EX:
Code:
var FirstLineFrame=parent.iNav; // Frame where first level appears
var SecLineFrame=parent.iNav; // Frame where sub levels appear
var DocTargetFrame='icontent'; // Frame where target documents appear
However I would like to avoid this as I really just want the single iFrame on my page and then dynamically load content into the iFrame via the DHTML menu.
I have an ajax script which loads new content onto the page when the main navigation links is clicked. I also have a jquery script which fades divs in and out when another subset of links are clicked.
I guess these scripts essentially do the same thing but the first basically is loading in 'pages' without the page having to refresh. The second is just fading in and out divs that are on a page.
The problem is is that the second script only seems to work once, when the page is loaded.
Here they are: