JavaScript - Cant Get The Page To Load Unexpanded
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> Similar TutorialsHi 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 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> 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. 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 Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. 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. 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 :\
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! 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 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? It must be a simple thing... I am trying to change an image source on page load depending on the contents of a cookie: Code: function goVisited(cookiename,img_name,img_src) { var visited = readCookie(cookiename); if (visited == "1"){ //alert("visited!"); document[img_name].src=img_src; }} <img onload="goVisited('main1','Introduction','img/Yellow.gif');" name="Introduction" border="0" src="img/Green.gif" width="250" height="18"> I need the page to check the cookie "main1" and if its value is 1, then change the image src from Green.gif to Yellow.gif. It almost works, but I get a stack overflow. I have a page that loads a fancybox popup and it works perfectly with the cookie for setting ho many days to show. the problem i have is that i need it to show 1 every 24 hours over a 3 day period. once the 3rd day is over and the user sees the window for the 3rd day i need a cookie set to never show the window again. here is my code as it sits now. I have worked with this for a couple of days on and off and it is above my head for sure. any help is appreciated. $(function() { if ($.cookie('moment_comm')) { // it hasn't been 1 day yet } else { $("#autostart").fancybox({'overlayShow':true,frameWidth: 840,frameHeight:360}).trigger('click'); } } ); $('#autostart').live('click', function(e) { e.preventDefault(); $.cookie("moment_comm", "true", { path: '/', expires: 1 }); $.fancybox.close() }); Hi all, I'm a bit newbie in scripting, but i'm trying to learn by myself . Hope you can help me with this I have two main pages, called index.html and news.html. Both pages loads a third page called news_content.html, using AJAX function load. This third page has a pagination script, but the pagination has to be different if the page has been loaded from index.html or news.html (for example, the max items per page has to be different). The pagination settings are defined inside news_content.html. How can I know, from the content page, with one has loaded it? Or... its possible to pass values from the main pages into the content page, in order to change the pagination settings? Thanks in advance! Hello, I am using the following script on my site RCENO .com in a easyadsense plugin, it is working well, because it is adding the elements after the posts on the page, but instead of rotating (This causes a problem when a Video is playing, and it rotates out in the middle of it) I would like for it to be Random when the posts load or refreshed....This is a Wordpress CMS site that provides News and Event Information to the local area, I am using this to display Holiday Greetings from area merchants in the form of Videos....... Thank You For Your assistance on This <script type="text/javascript"> if (document.all || document.getElementById){ //if IE4 or NS6+ document.write('<style type="text/css">\n') document.write('.dyncontent{display: none; width: 340px; height: 230px;}\n') document.write('</style>') } var curcontentindex=0 var messages=new Array() function getElementByClass(classname){ var inc=0 var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className==classname) messages[inc++]=alltags[i] } } function rotatecontent(){ //get current message index (to show it): curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0 //get previous message index (to hide it): prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1 messages[prevcontentindex].style.display="none" //hide previous message messages[curcontentindex].style.display="block" //show current message } window.onload=function(){ if (document.all || document.getElementById){ getElementByClass("dyncontent") setInterval("rotatecontent()", 75000) } } </script> Season Greetings: <div class="dyncontent" style="display: block">[flv:/files/videos/HolidayGreetings/FamilyVideoGreetings.flv 340 230]</div> <div class="dyncontent">To Add Your Holiday Greetings, Contact Us at Roy@rceno.com or Call (336) 398-6003</div> <div class="dyncontent">Happy Holidays</div> Hello 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 guys, I've been using bumpbox (lightbox alternative) script for a while and decided I want to start it on page load. Don't know how to do it though, authors website has disappeared from the web (not a good sign is it) ..... anyway, here is the script activating line: Code: <script type="text/javascript"> doBump( '.bump',475, 500, '000', '130023', '0.95', 5, 1 ,'333', 15,'000', 3, Fx.Transitions.Bounce.EaseOut, Fx.Transitions.Bounce.EaseOut); </script> The problem is that it only appears when you click the link that has class bump assigned to it. how do i get it to appear on page load ? here is the full script if needed: |