JavaScript - Loading External Js Before Page Page Load (specific Span Element)

I have looked all over for an answer to this, but haven't found a definite way to do it yet.

I am updating my audio page (a demo track list for getting composing work) and getting rid of my flash audio player in favor of embedding .mp3 files, or adding them with the HTML5 audio tag. What I would like to be able to do is link into the page, and have that link autoplay a specific track out of the 10-20 that I will have on the same page. The problem is I am extremely new to scripting and have no idea where to even start with this.

The reason I want it to be able to autoplay specific tracks is so I can market a specific track, and have that person (who is already expecting to hear the music on page load) not have to then look through the track list for that one track I was promoting and click play.

Any help would be greatly appreciated,

Thanks!

Ok, I am aware this will sound like a plug for my script, but please bare with me. I created a bookmarklet script to help me audit extremely large style sheets.

Basically while on a site that you would like to audit, you click the bookmarklet and the document's body contents gets remove and replaced with an iframe that points to the current sites home page. From here you can choose what style sheet (the script finds) to begin reporting over. The more pages you browse (through the iframe) the more accurate the report gets.

My problem however, is if the person is on the site's home page when first running the script, the iframe never loads up. I think it has to do with the fact that you are on the home page, and then the iframe tries to point to the home page as well and fails for some reason.

Is there any solution that comes to mind for anyone out there?

You can test it by bookmarking this bookmarklet and running it on any site's home page where style sheets can be found:

Get The Bookmarklet on this page

Again, it works great if you don't start the script from a sites home page.

i need a javascript that will show LOADING in the top left or top right corner of the page until the entire page is completely loaded because the page is VERY VERY VERY long.... and it takes a while on 56kbps because it has so much text.... like in Google's GMAIL, it has the red and white Loading text in the top right until the page loads... can someone refer me to such a script?

I have a slideshow on the "Projects" page. The javascript is external.
There's a link on the homepage that when clicked needs to open the Projects page with the appropriate slide loaded. How do I do that?

Here's the code I have for the slideshow:

Code:

var prev = document.getElementById('prev');
var next = document.getElementById('next');
var current = 0;

function prevPic() {
	clearInterval(interval);

	if(current > 0) {
		current--;
		
		if(current == 0) {
			document.getElementById('next').src = "images/right_arrow.jpg";
			document.getElementById('prev').src = "images/left_arrow_off.jpg";
		} else {
			document.getElementById('next').src = "images/right_arrow.jpg";
			document.getElementById('prev').src = "images/left_arrow.jpg";			
		}
		update();
	}		
}

function nextPic() {
	clearInterval(interval);

	if(current <  slides.length - 1) {
		current++;
		
		if(current == slides.length - 1) {
			document.getElementById('next').src = "images/right_arrow_off.jpg";
			document.getElementById('prev').src = "images/left_arrow.jpg";
		} else {
			document.getElementById('next').src = "images/right_arrow.jpg";
			document.getElementById('prev').src = "images/left_arrow.jpg";			
		}
		update();
	}
}

function update() {
	var pic = slides[current];
	document.getElementById('project_title').innerHTML = pic.title;
	document.getElementById('project_image').src = "images/slides/" + pic.image;
	document.getElementById('project_location').innerHTML = "<span>Location:</span> " + pic.location;
	document.getElementById('project_operation').innerHTML = "<span>Commercial Operation:</span> " + pic.commercial_operation;
	document.getElementById('counter').innerHTML = (current + 1) + " of " + slides.length;
	
	if(pic.link) {
		document.getElementById('project_link').style.display = "block";
		document.getElementById('project_href').href = pic.link;
	} else {
		document.getElementById('project_link').style.display = "none";		
	}
}

//preload slides
var images = [];

for(i in slides) {
	var img = new Image();
	img.src = "images/slides/" + slides[i].image;
	images.push(img);
}

Hi All,
Im new to this forum...need some of your help and advice.

I have a js code like this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

what it does is that it hide and show a panel by slidint it to the left.

But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {
var autoTimer = null;
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos });
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos = -856 });
}, 2000);
},1000);

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

But when the panel finished showing the button to open it again doesn't work...any help please..really urgent.
thks

//Sam

Hello

Basically I have found and adapted the code:

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#projectscontainer').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

I want when the user scrolls to the bottom of the page for content in a new page to load under the div "#projectscontainer". So in the new page 'Page2.html" I have put 5 divs going down with content in...

I want the new content to appear below "#projectscontainer'"

Why won't this work? Anyone know?

Thanks

On this website... http://livedemo00.template-help.com/...21/index.html# When you click on the Navigation Bar the website pages load inside that page?

How exactly would i go around doing this?

Thankyou

Hi all

Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now?

I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load.

Example of how the tabs look.

Code:

    	  <div class="tabbertab">
            <h2>Australia_____</h2>
                      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
                       <caption class="highlight_Red">澳洲&nbsp; Australia
                       </caption>
  <tr>
    <td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc

the other tabs look the same.

LT

Hello all,

I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page.

It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user.

So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it.

Is this easy to do? I am new to javascript so bear with me

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#newcontent').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

The 'new content' is a div which is at the bottom of the page and is where the new content loads to!

Thank you very much

This script displays a link to a registration/login form that loads in a light box for Joomla.
I've been goin nuts trying to figure out how to get this to load on page load with a delay.
Anyone know how to get this done?
PHP Code:
<?php
JHTML::_('behavior.mootools');
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'media/system/css/modal.css');
$document->addScript(JURI::base() . 'media/system/js/modal.js');
$document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});");
$user = & JFactory::getUser();

$uri = JFactory::getURI();
$url = $uri->toString();
$return = base64_encode($url);

?>
<div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden">
<a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a>
</div>
<?php if ($user->get('guest')) :?>
   <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" 
      onclick="SqueezeBox.fromElement(this); return false;"  
      rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a>
   <?php else: ?>
<?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?>
<br>
   <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a>
<?php endif; ?>
<script type="text/javascript">
function LB_onLogout() {
   var form = new Element('form');
   form.setProperty('method', 'POST');
   form.setProperty('target', '_self');
   form.setProperty('action', 'index.php');
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'option');
   input.setProperty('value', 'com_user');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'task');
   input.setProperty('value', 'logout');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'return');
   input.setProperty('value', '<?php echo $return; ?>');
   form.appendChild(input);
   
   $E('body').appendChild(form);
   form.submit();
}
</script>

hi , how to load external page into div without template . Example :
I have external page using CSS & html :
<div id="header"></div>
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="sidebar"></div>
<div id="sidebar1"></div>
<div id="footer"></div>
NOTE : all javascript code load external page with all template code into div ! how to load ONLY content2 into DIV .
thanks

Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks.

I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed.
Code:

<div class="scroll-pane" id="scrollbox">
	WORDPRESS BLOG		     
</div>

My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code.

Code:

function Init()
{
  // Grab the appropriate div
  theDiv = document.getElementById('scrollbox');
  // Grab all of the links inside the div
  links = theDiv.getElementsByTagName('a');
  // Loop through those links and attach the target attribute
  for (var i=0, len=links.length; i < len; i++) {
    // the _blank will make the link open in new window
    links[i].setAttribute('target', '_blank');
  }
}
window.onload = Init;

But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues.

Is this possible by editing the above code? If not what do I need?

Thanks in advance for any help!

I have an entirely javascript page that once it is done it still looks like it is loading. This is more of an annoyance than anything harmful. The page can be viewed at http://mikedombrowski.com/mRNA.html
Thank you for your help in advance.

Hi,

For the last few day's i've been searching for a js/ajax div refresh.

I need a js/ajax script that refresh a div every 10 seconds or gets menu.php file and updates it.

Thanks.

Hello,

I would like to program a custom link for my visitors, which will fill a payment form on an external page automatically. As an ultimate goal, I would like to press a link, which will send necessary information to this external page, fill it in the right forms, and press "submit" button there.
If there is no way to do all these tasks in only one link, then just filling the forms would be great.

I've tried something like:
Code:

<a 
href="https://load.payoneer.com/LoadToPage.aspx"
style="cursor:pointer;" 
onclick="document.getElementById('emailAddress').value='somemail@mail.com';">
Pay to "somemail@mail.com"
</a>

Unfortunately this approach didn't work for me. The other problem is that I need to fill more fields on this external page (https://load.payoneer.com/LoadToPage.aspx), like payment amount, email address, reason for payment, etc.

I've found out that I can send Email as a parameter in an URL:
https://load.payoneer.com/LoadToPage...email@mail.com
(will work only with a valid email, as it goes through a validation on their page). Is there any way to get the names of other parameters (like "email", "payment", etc.)?

Please let me know if there are any possible ways to program such a task. I believe that JavaScript should be used here, but if not, please advise me on different ways of programming such a solution.

Thank you in advance,
Anatoliy.