JavaScript - Show Logo/ad While Content Loads At Back End
I want to place a Logo/ad in front of content, there are ways to do it but the problem with them is that they use JS show/hide method. What happens is that the content doesn't load while user is watching the logo/ad, which results as double waiting for the user first for the logo/ad and then the actual flash content loading.
So I was thinking if there is a way that a logo/ad could be displayed and at the same time flash content continues to load at the back end. *I didn't ask for a loader that continues to appear until at the back end flash content is done loading, because I found only one script that was able to do so using Jquery but it was designed to work with fixed pixels while my flash content is based on %ages* Live Demo: http://bloghutsbeta.blogspot.com/201...ent-issue.html Note: Sorry for providing blogspot link but JsFiddle is not an option for a person living in Afghanistan with 5KBps but still if you feel that I am missing something please let me know I will edit it and try my best to provide as relevant question as possible ^^ Relevant Markup: Button for lightbox or Modal Window Code: <a class="poplight" href="#?w=100%" rel="popup_name"><img alt="play game" class="happybutton" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://farm5.static.flickr.com/4084/4998558471_27e3985c16_m.jpg" style="opacity: 0.8;" /></a> Code: <div class="popup_block" id="popup_name"> <script type="text/javascript"> $(document).ready(function(){ $('a.poplight[href^=#]').click(function() { $('<iframe/>') .attr('frameborder', 0) .attr('allowTransparency', false) .attr('scrolling', 'no') .attr('width', '100%') .attr('height', '98%') .attr('src', 'http://files.cryoffalcon.com/bhgames/dressup/Celebrities/Wizard%20Fashion.html') .appendTo('#popup_name'); }); }); </script> </div> CSS: Code: #fade { display: none; background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 9999999; } .popup_block{ width: 98.95%; height: 98.2%; display: none; padding: 0px; line-height:1em; font-size: 1em; position: fixed; top: 0px; left: 0px; z-index: 999999999; -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .close { height:20px; float: right; margin: 0 2px 0 0; } JS (actually Jquery) Code: <script type="text/javascript"> $(document).ready(function(){ //When you click on a link with class of poplight and the href starts with a # $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); //Get Popup Name var popURL = $(this).attr('href'); //Get Popup href to define size //Pull Query & Variables from href URL var query= popURL.split('?'); var dim= query[1].split('&'); var popWidth = dim[0].split('=')[1]; //Gets the first query string value //Fade in the Popup and add close button $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Close It" class="close"><img src="http://files.cryoffalcon.com/bloghuts/images/close%20button.png" alt="Close" width="20" height="20" /></a>'); //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css var popMargTop = ($('#' + popID).height() + 0) / 0; var popMargLeft = ($('#' + popID).width() + 0) / 0; //Apply Margin to Popup $('#' + popID).css({ 'margin-top' : -popMargTop, 'margin-left' : -popMargLeft }); //Fade in Background $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer return false; }); //Close Popups and Fade Layer $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... $('#fade , .popup_block').fadeOut(function() { $('#fade, a.close').remove(); }); //fade them both out return false; }); }); </script> Similar TutorialsI'm looking for something, preferably JQuery, that will let me load new content (blog posts) when "View More" is clicked. Something with a smooth animated motion would be nice. Any tutorials or info on what this technique is called?
It's a well documented issue- when you have a page that contains an iframe, and then navigate inside the iframe, hitting the browsers back button will only affect the contents of the iframe and not the entire page. I've been searching all over for solutions and cant find one that works for my current implementation. Anyone have any suggestions? Here is my code: js Code: function ShowPage(frame) { frames[0].location = frame+'.html' frame.contentWindow.location.replace(newUrl); } Buttons that change the contents of the iframe Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div> <div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div> <div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div> and then the iframe itself Code: <iframe src="frame1.html" type="text/html" style="border-width:0; border-style:hidden;" transparency="true" name="mainbox" frameborder="0" scrolling="no" width="700" height="807"> </iframe> I have two effects, one is a fadein effect and one is a smooth scrolling effect. I also have a simple image slider but that isn't the problem. It doesn't seem like the fadein is the problem either because when I had non-scrolling (positioned absolute) content "fadein", it wouldn't fadein in IE but at least it showed up, whereas the main content is blocked in IE with a dialogue about not running scripts or activex. Is there a way to overwrite this? I tried running the basic example of smooth scrolling in IE9 and it worked fine without being blocked. My code seems the same! I would be ok with the content just not fading in when using IE9, but if a user doesn't know to enable activex scripts from the dialogue box (assuming they even get a dialogue box), they won't be able to read any of the content which is an issue. Here's the JavaScript in the head section: Code: <script type="text/javascript" src="jquery.js"></script> <script> function goToByScroll(id){ $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');} </script> <link href="template.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="slider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); </script> <link href="slider2.css" rel="stylesheet" type="text/css" media="screen" /> <script> function fadein(){var fade=0,fadein=document.getElementById("fadein").style,ms=(fadein.opacity==0)?0:1,pace=setInterval(Fade,40);function Fade(){if(fade<100){fade+=2;if(ms)fadein.filter="alpha(opacity="+fade+")";else fadein.opacity=(fade/100)}else clearInterval(pace)}}; window.onload=fadein; </script> </head> http://phplist.xxmn.com/menu.html When the mouse hover on the navigation (cpanel). it shows the corresponding content under it. but i can't click the link in it. is there a way to get it.i know it will be using setTimeout. but i don't know how to do. thank you. when i change the top value small.but under IE7 and IE6.i still can't click the link in the showing content. Can anyone tell me how I can change the code below so that instead of all the fade in fade out stuff the function will actually replace whatever is inside a div called Myholder with the response this script pulls in? Here's the code I need to change. <script type="text/javascript"> $(document).ready(function() { $('#wait_1').hide(); $('#drop_1').change(function(){ $('#wait_1').show(); $('#result_1').hide(); $.get("func.php", { func: "drop_1", drop_var: $('#drop_1').val() }, function(response){ $('#result_1').fadeOut(); setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400); }); return false; }); }); function finishAjax(id, response) { $('#wait_1').hide(); $('#'+id).html(unescape(response)); $('#'+id).fadeIn(); } </script> drop_1 is the name of a drop down which when changed runs this script which brings back a second dropdown with data relating to the first one. If I need to post more info to get some help with this please let me know. Thanks in advance. display text depending dropdown Hey! I am creating a new function for my website which will make it very nice I believe. But since I am no good at javascript I have got quite stuck here but I don't think it's that hard afterall. Actually I'm not completely sure if javascript is needed but please lead me in the right direction here, I'm lost. What I want to make is depending what checkboxes the visitor choose and then click "Search" he will get a certain result which is categoried under these checkboxes. I don't know what else to say but I hope you get an idea of what I mean, if not please ask and I'll try explain it better. Thankful for your help Hi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = ''; which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx Hi, I'm very new to coding Javascript, so have no idea what I'm doing, so sorry What I'm trying to do is, on my Wordpress Blog I have a button/Image: Code: src="http://Mysite.com/Images/Button.png" I would like for when a user Clicks this Image/button, 2 things to happen - 1. For my Content Locker to pop up, I believe that i already have the correct code for that?: Code: onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890') For this content locker to trigger, The whole action needs to have a ID e.g. 'ID="button1'? And 2. For a timer to start for say 30 Seconds. When that timer ends, i would like the original button/image to be replaced with a different button/image. And when that New button is clicked i would like a text string to appear below the button - saying something e.g. 'You've completed this part' I know that this is a lot to ask, and I will be so very grateful if someone helps me out here! Thanks! Harry. I'l not good in Javascript and I can't find anything about what I want.. . On a sports website there is a table with our ranking and results. On this site the content is changed weekly, but it stays in the same tables.. . Is it possible to make a javascript to get those tables and put them on my own website so the content will change on my site when the content is changed on the sports site? Please help me, it would save me lot of time.. . THx Whenever I update my website, sometimes I notice my browser shows the old version or a modification in the browser after I upload to the ftp. Whats the best way to prevent this from happening? Preferably without noticing it happening. Thanks. Hi All, I'd like to create a custom logo (don't know what yet) that represents the pieces of my project so that a user can click on a piece of the logo and have that associated panel brought forth. I'm not sure how to go about doing this so could someone point me in the right direction? Thanks! Resolved
i have a javascript bookmark to log me onto my schools site javascript: window.location.href="http://www.MySchool";login=document.getElementById('Login'); void(login.value='user'); pass=document.getElementById('pass');void(pass.value='pass'); LoginbuttonSubmit(); without window.location.href="http://www.MySchool" it works fine if the page is already open, but with using the link to open the page, it runs the remaning script before the page loads and it doesn't work. is there any way to fix this withou using setTimeout() I have an issue with my javascript files loading (i.e. checking the source code of the page after having loaded yields working links to my external files and the JQuery loading for sure after running some test), but calling a function from my javascript file works in no way shape or form. For example, one test I was running was: From my .js file Code: $("p").click( function() { $(this).hide(); } ) This will work on a standalone page when I test it (not loading from external .js file), but not in the page I need to get my scripts running on. Hey guys, hope this is in the right place... Basically I was wondering if anyone could point me in the right direction or to an example of where a div slides onto the screen as soon as a page loads. My client wants something like this: http://www.nytimes.com/packages/html...ion/index.html (without parallax or the fade-in) but I refuse to do it in Flash, obviously. I have this gallery he http://juicenothing.com/freelance/gallery.php The div id is wrap. Is this possible? I can't find a good example anywhere!! Thanks (i'm a bit of a n00b, so pls go easy on me ) Hi everyone, I'm new on this forum. I really need help in coding an part of my website. I want to make the logo background image fade to another background image on hover. Here is the code I have until now: Code: #logo {margin-top:0px; margin-bottom:0px; margin-left:auto; margin-right:auto; width:600px; height:515px;} #logo h1 {display:block; background:url(img/logo.jpg) no-repeat; width:600px; height:515px; text-indent:-10000px; margin:0px;} #logo h1 a {display:block; width:100%; height:100%;} #logo h1 a:hover {background:url(img/logo.jpg) no-repeat 0px -515px;} I want the background:url(img/logo.jpg) no-repeat; to fade to {background:url(img/logo.jpg) no-repeat 0px -515px;}. I haven't found any tutorial which explains how to do that properly. I'd be really greatful if you could help me. Thank you very much, Alex I am working with using Javascript to create a page that scales and keeps its aspect ratio (much like a Flash page would). After a lot of trial and error, I have a prototype up with a couple of problems. It loads correctly once in I.E. Reloading, or opening a new browser, will also load the page correctly. But visiting a different page and coming back causes the width attributes to break. This happens with the non-aspect-ratio version in pure HTML also, but I was hoping that this problem would be solved by establishing values based on javascript variables. As for Firefox, the problem is more or less exactly the opposite. The page loads up all wonky the first time, and a reload or resize will fix it for every time afterward. To see what I'm talking about, you can take a look at http://www.jonesmfgmusic.com/testpag...lem_width.html For the HTML only version, see http://www.jonesmfgmusic.com/testpag...blem_html.html I'm guessing this is something to do with the order in which the data is loaded, so that once the information is all cached, it stops functioning in IE, and starts functioning in FF... can anyone confirm whether I'm on the right track with that, or how to fix it if I am? I'm most concerned by the fact that the width attribute is behaving as it does in IE. That looks like some kind of Microsoft bug to me, and I need a way around it. As for Firefox, I am guessing if I can just get it to load all of the correct information ahead of time, the page should come up correctly, but I just can't think how to do that. So I am having a bit of a weird issue. I am trying to make a webpage compatible with IE8 and it's quite painful. The page works great in firefox and chrome, but in IE8 it only loads some of the time. About 60% of the time the page loads and executes properly, but the other 40% of the time it looks like it hits an error somewhere and doesn't finish loading. I have tried using the IE error console / debugger (by pressing F12), but I can't seem to find any information about why the page isn't loading properly. The page that I am working on is located he http://tinyurl.com/89anxbd The page uses an SVG based UI, and in order to make this compatible with <= IE8 I am using SVGWeb to render the SVG code as flash for IE8 users. For Firefox, and other browser-compliant users the SVG code is rendered natively in the browser. Here is an image of what the page should look like (when it does load correctly in IE8): Here is an image of what the page looks like when it fails to load: It is like the page defines the circle elements for the various cities, but has not yet rendered the provinces (which are defined above the cities in the HTML body), but I'm not 100% sure on this. Any help is much appreciated! Hi Currently my website waits till all images are loaded up first: Code: $(document).ready(function(){ * LOAD UP ALL THEM IMAGES FIRST... * $(window).load(function() { letsLoad(); fadingEffects(); }); However my website now has over 200 images on the website and now its taking way too long to load the images. My question's a 1. Is it possible to either load the site when its around 20% or even 50% loaded? OR 2. If its possible to give certain images a tag?? and when these images are loaded then the site loads? Heres a link to the site - must warn you need broadband and a high speed connection takes way to long to load. Takes me around 1minute 30seconds http://www.arcvizio.co.uk/ovoma/2/index.html Thanks Hello: I have an ajax file to loads the content of another file into a div, here is the js code: PHP Code: <script type="text/javascript"> function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getcar.php?q="+str,true); xmlhttp.send(); } </script> the file within xmlhttp (getcar.php) has other js codes that are to be executed once the file is loaded into the div. here is one of those files: PHP Code: <!-- loading, please wait message script begins--> <div id="loading\" class=\"loading-invisible\" z-index: 999> <p><font color=\"black\" size='4'>one moment, please!</font> <font color=#218868> Auto Tech Pro « Initiating... » </font><br /><img border='0' src='images/spinnnnnn.gif' width='215px' height='206px'> </div> <script type=\"text/javascript\"> document.getElementById(\"loading\").className = \"loading-visible\"; var hideDiv = function(){document.getElementById(\"loading\").className = \"loading-invisible\";}; var oldLoad = window.onload; var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv; window.onload = newLoad; </script> <!-- loading, please wait message script ends--> <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\"></script> <script src=\"/AJAX/popBox1.2.0.js\" type=\"text/javascript\"></script> <link href=\"/AJAX/popBox1.2.0.css\" rel=\"stylesheet\" type=\"text/css\" /> <script type=\"text/javascript\"> $(document).ready(function () { $('#inputbox').popBox({width:550, newlineString: '<br/>' }); }); </script> this however is not working. If I open getcar.php independently of the ajax, the preceeding js codes work fine, but not once the ajax loads the file into div. Any thoughts on how this is doable? Mossa |