|
JavaScript - How Can I Set This To Load On Page Load With Delay?
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> Similar TutorialsHello all, I am not really a javascript programmer... more of a copy/paste and tweak kind of guy. Hopefully you can help me out with this anyway. I am using the following script to play a sound when an object is clicked. (In header) Code: <script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
(Hyperlink to play sound) Code: <a href="#" onclick="playSound('URL to soundfile');">
I would like the hyperlink to also load a webpage after a 10 second delay (the duration of the sound effect). Is that something that is possible and can someone please point me in the right direction? Thank you 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">澳洲 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 I used DrDOS's solution from http://www.codingforums.com/showpost...17&postcount=8 and modyfied it a bit so I have 2 images, first without and 2nd with a link to other page. It works just fine in FF but in Chrome and in IE it shows just 2nd image. On place where first image shall be it's just blank white space. I have javascript enabled in all browsers, btw. Here's a code in head: Code: <script type="text/javascript">
function loadImg()
{
document.getElementById("loadimg").innerHTML="<img src=\"logo2.png\"";
}
function loadImg2()
{
document.getElementById("loadimg2").innerHTML="<a href=\"http://site.com\"><img src=\"logo2.png\"</a>";
}
</script>
And here's body part: Code: <div class="bottleft">
<div id="loadimg"></div>
<script type="text/javascript">var myimg = setTimeout("loadImg();",5000);</script>
</div>
<div class="bottright">
<div id="loadimg2"></div>
<script type="text/javascript">var myimg = setTimeout("loadImg2();",5000);</script>
</div>
I'm trying to figure out this whole day but just can't see where I am making a mistake? Hello Bit of a nightmare scenario but, the services page isn't loading and from what I can tell, IE 6,7 & 8 are throwing up the same error. It says: Line: 602 Char 5 Error: 'undefined' is null or not an object Code: 0 which refers to: vmlSegments.push('m'); if (glyph.o) { The page is here The script it is referring to is typeface.js: http://typeface.neocracy.org/ Hope someone can be a great help and tell me how I can get page loading again. All the other pages are fine. p.s. I'm not a coder but designer and hoping to get this fixed myself. Thank you. Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script> About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to. When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00. I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top. I appreciate your help. Hello, I am currently using Code: onload="document.getElementById("hidepage").style.visibility="hidden";"
to try to hide a div box. Yet this will not work. I've tried FF, IEpp4 (IE platform preview 4) and IE9beta. This is the correct <div> id, and I do not know why this will not work. Thanks! I need to be able to ensure that an html page will always load up in a particular browser. Let's say IE. Changing the default browser settings in the registry is horribly complex, and, besides, I don't want to override the user. That is, I envisage a javascript function on page load that checks which is the default browser in the user's machine. If it is IE, fine - page loads normally; if not IE, the page somehow forces a load in IE. Can it be done? I realise that you can make shortcuts that load up IE first and then a particular page, but that method has shortcomings: specifically the shortcut target below won't work in Windows 64-bit (and I must have a single shortcut for this task - not one for each Windows version). "C:\Program Files\Internet Explorer\iexplore.exe" -k "C:\Program Files\myfolder\README.html" So, I'm forced to try to do it in javascript from within the html page itself. Is it possible? Hey every1. Im a web design student who is trying to make my first webpage for a school project. my problem: I have 2 javascripts i would like to run smooth on my page, but they wont. I have read the info about using the <body onload="dothis()"; "dothat()"> but my problem is the way the 1 javascript is made. i believe so that is. First script: A matrix look-a-like screen for a link. Code: <script type="text/javascript">
// <![CDATA[
var height=9; // height of the effect in rows - must be an odd number
var speed=66; // lower is faster
var reveal=99; // between 0 and 100
// the higher, the faster the word is 'decoded'
var repeat=10; // if '0' the script does not repeat
// if set to a number this is the delay until the script repeats
var alink="http://www.noma.nu"; // place to link to
// set to alink="" if not needed
/***************************\
* The Matrix JavaScripted.. *
*(c) 2003-6 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var timer, table, x, y, columns, ma_txt, ma_cho;
reveal/=100;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() This is part im having troubles with. If i do as your toturial tells me i should put Function() down in the body onload command. But it wont work. { if (document.getElementById) {
var matrix, tbody, tr, td;
matrix=document.getElementById("matrix");
ma_txt=matrix.firstChild.nodeValue;
ma_txt=" "+ma_txt+" ";
columns=ma_txt.length;
while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
table=document.createElement("table");
table.cellSpacing=0;
table.style.margin="auto";
table.style.width="auto";
table.style.border="none";
tbody=document.createElement("tbody");
for (x=0; x<height; x++) {
tr=document.createElement("tr");
for (y=0; y<columns; y++) {
td=document.createElement("td");
td.className="matrix";
td.appendChild(document.createTextNode(String.fromCharCode(160)));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
matrix.appendChild(table);
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
m_copo[x]=0;
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
}
x=0;
timer=setInterval("mytricks()", speed);
}}
function mytricks() {
var mtmp, mrow;
var z=x;
x=0;
for (y=0; y<columns; y++) {
x=x+(m_copo[y]==100);
mrow=m_copo[y]%100;
if (mrow && m_copo[y]<100) {
if (mrow<height+1) {
mtmp=table.rows[mrow-1].cells[y];
mtmp.firstChild.nodeValue=m_coch[y];
mtmp.style.color="#33ff66";
mtmp.style.fontWeight="bold";
}
if (mrow>1 && mrow<height+2) {
mtmp=table.rows[mrow-2].cells[y];
mtmp.style.fontWeight="normal";
mtmp.style.color="#00ff00";
}
if (mrow>2) table.rows[mrow-3].cells[y].style.color="#009900";
if (mrow<Math.floor(height/2)+1) m_copo[y]++;
else if (mrow==Math.floor(height/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
else if (mrow<height+2) m_copo[y]++;
else if (m_copo[y]<100) m_copo[y]=0;
}
else if (Math.random()>0.9 && m_copo[y]<100) {
if (reveal>Math.random() && (z+1)/columns>Math.random()) m_coch[y]=ma_cho.charAt(y);
else m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
m_copo[y]++;
}
}
if (x==columns) {
if (repeat) {
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
m_copo[x]=0;
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
}
}
else clearInterval(timer);
}
}
function zoomer(ycol) {
var mtmp, mtem, ytmp;
if (m_copo[ycol]==Math.floor(height/2)+1) {
for (ytmp=0; ytmp<height; ytmp++) {
mtmp=table.rows[ytmp].cells[ycol];
mtmp.firstChild.nodeValue=m_coch[ycol];
mtmp.style.color="#33ff66";
mtmp.style.fontWeight="bold";
if (alink) {
mtmp.style.cursor="pointer";
mtmp.onclick=function() {window.location.href=alink};
}
}
mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
m_copo[ycol]+=199;
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]>200) {
mtmp=table.rows[m_copo[ycol]-201].cells[ycol];
mtem=table.rows[200+height-m_copo[ycol]].cells[ycol];
m_copo[ycol]-=1;
mtmp.style.fontWeight="normal";
mtem.style.fontWeight="normal";
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(height/2);
if (m_copo[ycol]>100 && m_copo[ycol]<200) {
mtmp=table.rows[m_copo[ycol]-101].cells[ycol];
mtmp.firstChild.nodeValue=String.fromCharCode(160);
mtem=table.rows[100+height-m_copo[ycol]].cells[ycol];
mtem.firstChild.nodeValue=String.fromCharCode(160);
m_copo[ycol]-=1;
setTimeout("zoomer("+ycol+")", speed);
}
}
// ]]>
</script>
Second script: a simple digital clock. Code: <script type="text/javascript">
function showClock()
{
// create a new Date() object
var currentTime=new Date();
var hours=currentTime.getHours();
var minutes=currentTime.getMinutes();
var seconds=currentTime.getSeconds();
var area=currentTime.getTimezoneOffset();
area=area/60;
var clock=hours;
// add a zero in front of numbers<10
if (minutes<10){
minutes="0" + minutes;
}
if (seconds<10){
seconds="0" + seconds;
}
document.getElementById('clock').innerHTML="<table><tr><td width=80 align=center>"+clock+":"+minutes+":"+seconds+"</td>"
+""
+"";
t=setTimeout('showClock()',500);
// setTimeout calls showClock() function every 500 miliseconds, that means 0.5 seconds
}
</script>
<body onload="showclock()"> this is where the clock load. It works fine. how do i get the other script to load with this.
I can get them both to run but not at same time. Any1 outthere who have a solution. I believe it has something to do with Function() part in the matrix code. can i change that do another command? so when the page is initially opened, i dont want the video to be showing until the preview button is clicked. Code: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Christmas Greets!</title>
<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<img src="somepicture.png"
<p><a onclick="switchMenu('myvar');" title="View Greeting"><button>Preview</button></a></p>
<div id="myvar">
<video width="240" height="160" controls="controls">
<source src="EatResponsibly.mp4" type="video/mp4" />
<source src="EatResponsibly.ogv" type="video/ogv" />
<source src="EatResponsibly.webm" type="video/webm" />
You Browser Does not Support This Video.
Please Update Your Browser.
</video>
</div>
</div>
</body>
</html>
Hi, I was wondering how to add a "loading page please wait" page to my web page, and then run any javascript only after the page loads? My web page contains some fade in/out scripts for pages, and all my pages are basically just divs and in one html file. Just a simple black container (not entire web page) with the words "loading" or something would be fine, then this page would fade out, then my main page would fade in. Thanks. I have already worked on this pop-up: https://defencedog.googlecode.com/sv...lcome_box.html but I still considers a lightweight replacement so here it goes https://defencedog.googlecode.com/sv...elcome/my.html as you can see the popup show at click event; I want it to load automatically when page loads & can't find the appropriate method: Here my failed tries... Code: $(document).ready(function () {
// id is the ID for the DIV you want to display it as modal window
launchWindow( dialog );
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$( dialog ).css('top', winH/2-$( dialog ).height()/2);
$( dialog ).css('left', winW/2-$( dialog ).width()/2);
//transition effect
$( dialog ).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
My homepage has a lot of stuff running on it and I was just wondering if it's possible to actually pre-load an entire PHP page including images, scripts, etc...? I tried the method at http://stackoverflow.com/questions/7...uery-technique but it didn't work :\
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 hi guys, i am using this script (jquery) to resize textareas when a user enters text. it works well. in the management system im writing i would like to also resize all textareas so that all text is visible when forms load i.e. a user loads a form with textareas on and all the text is visible when they read the contents Code: /*
* jQuery autoResize (textarea auto-resizer)
* @copyright James Padolsey http://james.padolsey.com
* @version 1.04
*/
(function($){
$.fn.autoResize = function(options) {
// Just some abstracted details,
// to make plugin users happy:
var settings = $.extend({
onResize : function(){},
animate : true,
animateDuration : 150,
animateCallback : function(){},
extraSpace : 20,
limit: 1000
}, options);
// Only textarea's auto-resize:
this.filter('textarea').each(function(){
// Get rid of scrollbars and disable WebKit resizing:
var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),
// Cache original height, for use later:
origHeight = textarea.height(),
// Need clone of textarea, hidden off screen:
clone = (function(){
// Properties which may effect space taken up by chracters:
var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
propOb = {};
// Create object of styles to apply:
$.each(props, function(i, prop){
propOb[prop] = textarea.css(prop);
});
// Clone the actual textarea removing unique properties
// and insert before original textarea:
return textarea.clone().removeAttr('id').removeAttr('name').css({
position: 'absolute',
top: 0,
left: -9999
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea);
})(),
lastScrollTop = null,
updateSize = function() {
// Prepare the clone:
clone.height(0).val($(this).val()).scrollTop(10000);
// Find the height of text:
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
toChange = $(this).add(clone);
// Don't do anything if scrollTip hasen't changed:
if (lastScrollTop === scrollTop) { return; }
lastScrollTop = scrollTop;
// Check for limit:
if ( scrollTop >= settings.limit ) {
$(this).css('overflow-y','');
return;
}
// Fire off callback:
settings.onResize.call(this);
// Either animate or directly apply height:
settings.animate && textarea.css('display') === 'block' ?
toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
: toChange.height(scrollTop);
};
// Bind namespaced handlers to appropriate events:
textarea
.unbind('.dynSiz')
.bind('keyup.dynSiz', updateSize)
.bind('keydown.dynSiz', updateSize)
.bind('change.dynSiz', updateSize);
});
// Chain:
return this;
};
})(jQuery);
many thanks for any help Hello! I am developing my personal website! And I am trying to implement it with JS completely. which means I need the page to be one front end page. But the back-end pages would be the ones which do the work and calculations! In other words and more explaination: I would like to have one "index.php" page that contains only a nav bar which handles the mission. Once the page load it loads with the content of "home.php" (the landing page) if the "contact" tab is clicked then I would like to load the "ContactMe.php" page content. I have done this already! but the problem is: "home.php" uses alot of javascript functions and jquery plug-ins. when I load it, it looks messy that you think the JS is disabled in your machine :-\ Note: the loading has been done with those methods: .load(), $.ajax! -> same results! The conclusion: * "home.php" * "ContactMe.php" * "About.php" Is it possible to load those pages in the "index.php" and still have their JS functions function correctly and display as if they were accessed individually? The goal that I am trying to achieve is that I make my whole website for the visitor as "One Page Site"! I am challenging myself with it though! Thank you in advance for your informative posts! Please Note that I have only put the <html><head><body> tags in the index.php and removed them from the back-end pages such as home.php, contactme.php and about.php! for that sake that it works correctly! but with no hope! I want to design my website so that when a page loads javascript will smoothly animate it from a reference point to the top of the page. I visited an Apple store recently and was looking at the encased ipods next to the displayed product and the one next to the iphone has a mini site and after pressing the compare button at the bottom of the page I saw this animation. Below is a link to the video i recorded showing what I am trying to achieve. Any and all help will be appreciated. I have found other script that animate on page load but none of which does it from a reference point like the following video. I'm not sure how the page loads at that point either. If someone could help with that as well I would greatly appreciate it. Thanks in advance. http://demetriusmcclain.elementfx.co...pageScroll.MOV Hey there I want to know how i can make a page that opens and loads content in a div tag when i click a certain link on my home page. i have a javscript code to load content into a div tag when the link is on the same page as the div tag, but i want to get a script where it will open a new page and load content into a div tag on that page. like the link must be something like main.html?div=content.html i know how to do this with iframes, but i want to work with div tags thank you javascript for loading content into the div tag on the same page : PHP Code: var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no) var loadedobjects="" var rootdomain="http://"+window.location.hostname var bustcacheparameter="" function clientSideInclude(containerid, url){ var page_request = false if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else if (window.ActiveXObject){ // if IE try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else return false page_request.onreadystatechange=function(){ loadpage(containerid, page_request) } if (bustcachevar) //if bust caching of external page bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', url+bustcacheparameter, true) page_request.send(null) } function loadpage(containerid, page_request){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) document.getElementById(containerid).innerHTML=page_request.responseText } function loadobjs(){ if (!document.getElementById) return for (i=0; i<arguments.length; i++){ var file=arguments[i] var fileref="" if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding if (file.indexOf(".js")!=-1){ //If object is a js file fileref=document.createElement('script') fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", file); } else if (file.indexOf(".css")!=-1){ //If object is a css file fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", file); } } if (fileref!=""){ document.getElementsByTagName("head").item(0).appendChild(fileref) loadedobjects+=file+" " //Remember this object as being already added to page } } } I use this tooltip script on my site: http://craigsworks.com/projects/simpletip/ The problem is that I have several links in the same div class and I want to load different content in tooltip when the mouse is over different links. This is the code I use to load tooltip: Code: $(document).ready(function(){
// Create your tooltips
var api = $(".ttip a").simpletip().simpletip();
api.load('include.php');
});
This is the HTML code: Code: <div class="ttip"> <a userid="1" href="#" >user1</a><br /> <a userid="2" href="#">user2</a> </div> Now the tooltip works only for the first link. For the second one only some default text is shown instead when I hover it! Can anyone please help? |
|||||||