JavaScript - Can I Make A Script Globally Available To My Entire Domain With One Download??
First, let me clarify. I'm still a JS noob, so feel free to dummy-proof your answers
By my understanding, if I want to use a given JS on multiple pages, I need to call for that script in each page. If I understand correctly, it then downloads it, and the functionality is then available to that given page. Now, presuming that I've got that at least mostly correct, it seems like there should be a way to just download it once, and use it till the session is over. My thinking is to call for the heavy JS's on the welcome page after a succeful login, and then not have to slow down each and every page by calling for those same scripts. Is this common, or at least possible? Are there specific reasons to not do this? Thanks-a-bunch, ~ Mo Similar TutorialsWhere can I get a script that looks up IP addresses and domain name just like http://cqcounter.com/whois/ I've seached everywhere without sucess. Thanks in advance. Ok after much research I have created a script that will search godaddy for domains using javascript. Now the problem is that it doesn't open in a new window when you click search. How do I get the script to open the godaddy results in a new window? btw target="_blank" isn't working. Any help would be very much appreciated. Thanks, Tim CODE: Code: <form onsubmit="var loc='http://www.godaddy.com/gdshop/registrar/search.asp?domainToCheck='+this.elements[0].value+'/';location.href=loc;return false" method="post" action="" target="_blank"> <input name="query" size="38" style="border: 1px solid rgb(126, 157, 185);" value="" type="text"> <input name="Submit2" value="Search" id="Submit2" type="submit"> </form> I have been trying to download the jquery code from this site, but the Firefox browser downloader says that it is unable to download it. Any ideas why this happens? Frank Hi Guys, I am trying to create a way for my users to download some code dynamically from my web page via a file download. Below is the code that i have written so far. It seems to be dying on the iframe but i'm not sure why. Here is my jquery trigger which is inside my onreadystate function. Code: $('#export_txt').click(function(e){ alert(LPAjax.ajaxurl + "/download.php"); $.generateFile({ action : "download_txt", filename : "exportme.txt", content : $("#ticket_window").html(), script : LPAjax.ajaxurl + "/download.php" }); e.preventDefault(); }); and here is the code i am using to process the post. Code: (function($){ // Creating a jQuery plugin: $.generateFile = function(options){ options = options || {}; if(!options.script || !options.filename || !options.content){ throw new Error("Please enter all the required config options!"); } alert("Inside Function"); // Creating a 1 by 1 px invisible iframe: var iframe = $('<iframe>',{ width:1, height:1, frameborder:0, css:{ display:'none' } }).appendTo('body'); var formHTML = '<form action="" method="post">'+ '<input type="hidden" name="filename" />'+ '<input type="hidden" name="content" />'+ '</form>'; // Giving IE a chance to build the DOM in // the iframe with a short timeout: setTimeout(function(){ // The body element of the iframe document: var body = (iframe.prop('contentDocument') !== undefined) ? iframe.prop('contentDocument').body : iframe.prop('document').body; // IE alert(" We are almost there"); body = $(body); // Adding the form to the body: body.html(formHTML); alert("added form to page"); var form = body.find('form'); form.attr('action',options.script); form.find('input[name=filename]').val(options.filename); form.find('input[name=content]').val(options.content); alert("submitting form"); // Submitting the form to download.php. This will // cause the file download dialog box to appear. form.submit(); },50); }; })(jQuery); it seems to be dying on this line. Code: var body = (iframe.prop('contentDocument') !== undefined) Any suggestions? Thanks in advance. Hello! I have the following code that I just can't seem to get to work. Here are the issue that aren't working: 1. The items that are stored in the users account aren't showing up as selected when you enter the page. (They work in IE, not Chrome) 2. When you click the items, nothing happens. (It used to work and would add the item to the top image) If you need any more info, or more of the code, let me know. I removed most of the PHP to simplify it for revising, and I didn't include it's CSS. Code: <div id="avatar_form" width="95" height="141"> </div> <div id="avatar_stack"> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Extras]" type="radio" value="blank" <? if($prof[base]==blank) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/skin1.gif" alt="" /><input name="avatar[Skin Tone]" type="radio" value="body1" <? if($prof[skin]==body1) echo('checked="checked"');?> <? if($prof[skin]==blank) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hair]" type="radio" value="blank" <? if($prof[hair]==blank) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/girlface.gif" alt="" /><input name="avatar[Face]" type="radio" value="girlface" <? if($prof[face]==girlface) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hand Item]" type="radio" value="blank" <? if($prof[handitem]==blank) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/shirt6.gif" alt="" /><input name="avatar[Shirt]" type="radio" value="shirt6" <? if($prof[shirt]==shirt6) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Hat]" type="radio" value="blank" <? if($prof[hat]==blank) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/pants7.gif" alt="" /><input name="avatar[Pants]" type="radio" value="pants7" <? if($prof[pants]==pants7) echo("checked='checked'");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Shoes]" type="radio" value="blank" <? if($prof[shoes]==blank) echo("checked='checked' checked");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Accessories]" type="radio" value="blank" <? if($prof[accessory]==blank) echo("checked='checked' checked");?> /> </p> <p> <img src="hs/news/Upload/images/blankx.png" alt="" /><input name="avatar[Costume]" type="radio" value="blank" <? if($prof[costume]==blank) echo("checked='checked' checked");?> /> </p> </div> <BR><BR><BR> <script type="text/javascript"> var avatar_layers = new Array('Extras', 'Skin Tone', 'Hair', 'Face', 'Hand Item', 'Shirt', 'Hat', 'Pants', 'Shoes', 'Accessories', 'Costume') var layer_colours = new Array('#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff') var inactive_tab_background_colour = '#fff' var inactive_tab_bottom_border_colour = '#fff' var stack_height = 1 var on_top = 0 var key = null onload = layout function layout() { if(!document.getElementById('avatar_section')) return document.onkeydown = keyhit tabs() hide_radio_buttons(document.getElementById('avatar_stack')) StackImageHolders('avatar_stack'); P = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top] P.style.backgroundColor = layer_colours[on_top] P.style.zIndex = stack_height++ LIs = document.getElementById('avatar_section').getElementsByTagName('li') for(i=0; i<LIs.length; i++) { LIs[i].style.backgroundColor = inactive_tab_background_colour LIs[i].style.borderBottomColor = inactive_tab_bottom_border_colour } LIs[on_top].style.backgroundColor = layer_colours[on_top] LIs[on_top].style.borderBottomColor = layer_colours[on_top] LIs[on_top].focus() IMGs = document.getElementById('avatar_stack').getElementsByTagName('img') for(i=0; i<IMGs.length; i++) { IMGs[i].className = 'black_border' IMGs[i].style.cursor = 'pointer' IMGs[i].onclick=function(){ChangeGarment(this)} } avatar_preview_and_hotkey_text() update_avatar(document.getElementById('avatar_stack').firstChild) /* I added the following two lines because Internet Explorer wasn't updating the display properly after loading */ document.getElementsByTagName('body')[0].style.width='95'; document.getElementsByTagName('body')[0].style.width='95'; } function keyhit(e) { thisKey = e ? e.which : window.event.keyCode alt_key_down = e ? e.altKey : window.event.altKey ctrl_key_down = e ? e.ctrlKey : window.event.ctrlKey shift_key_down = e ? e.shiftKey : window.event.shiftKey switch (thisKey) { case 37: key = 'LEFT' break case 39: key = 'RIGHT' break default: key = null } if(key && alt_key_down && ctrl_key_down) { IMGs = document.getElementById('avatar_stack').getElementsByTagName('p')[on_top].getElementsByTagName('img') for(i=0; i<IMGs.length; i++) { if(IMGs[i].className == 'red_border') { if((key == 'LEFT') && (i > 0)) { i-- ChangeGarment(IMGs[i]) return } if((key == 'RIGHT') && (i < (IMGs.length - 1))) { i++ ChangeGarment(IMGs[i]) return } } } } else if(key && alt_key_down && shift_key_down) { LIs = document.getElementById('avatar_section').getElementsByTagName('li') if((key == 'LEFT') && (on_top > 0)) { on_top-- bring_to_the_top(LIs[on_top]) return } if((key == 'RIGHT') && (on_top < (LIs.length - 1))) { on_top++ bring_to_the_top(LIs[on_top]) return } } } function tabs() { list = document.createElement('ul') for(i=0; i<avatar_layers.length; i++) { list_item = document.createElement('li') list_item.appendChild(document.createTextNode(avatar_layers[i])) list_item.onmouseover=function(){this.className='mouse'} list_item.onmouseout=function(){this.className=''} list_item.tab_number=i;//faux attributes to "stick" the indexes i and j values list_item.onclick=function(){ bring_to_the_top(this) } list_item.onfocus=function(){ bring_to_the_top(this) } list.appendChild(list_item) } document.getElementById('avatar_section').insertBefore(list, document.getElementById('avatar_stack')) } function hide_radio_buttons(caller) { INPUTs = caller.getElementsByTagName('input') for(i=0; i<INPUTs.length; i++) { if(INPUTs[i].type == 'radio') { INPUTs[i].style.display = 'none'; } } } function StackImageHolders(caller) { Ps = document.getElementById(caller).getElementsByTagName('p') for(i=0; i<Ps.length; i++) { Ps[i].className = 'stack' } } function avatar_preview_and_hotkey_text() { for(i=0; i<avatar_layers.length; i++) { preview = document.createElement('img') preview.id = avatar_layers[i] preview.className = 'preview' preview.width = '95px' preview.height = '141px' preview.alt = 'avatar preview image' document.getElementById('avatar_stack').appendChild(preview) } hotkey_text = document.createElement(' ') hotkey_text.className = 'hotkeys' hotkey_text.appendChild(document.createTextNode('')) document.getElementById('avatar_stack').appendChild(hotkey_text) } function update_avatar(caller) { INPUTs = caller.parentNode.getElementsByTagName('input') for(i=0; i<INPUTs.length; i++) { if(INPUTs[i].type == 'radio') { if(INPUTs[i].checked) { document.getElementById(INPUTs[i].name.match(/^.*[(.*)]$/)[1]).src='hs/news/Upload/images/' + INPUTs[i].value + '.gif' INPUTs[i].previousSibling.className = 'red_border' } else { INPUTs[i].previousSibling.className = 'black_border' } } } } function ChangeGarment(caller) { inputs = caller.parentNode.getElementsByTagName('input') for(i=0;i<inputs.length;i++) { inputs[i].checked=false } caller.nextSibling.checked=true update_avatar(caller) } function bring_to_the_top(caller) { tabs = document.getElementById('avatar_section').getElementsByTagName('li') for(i=0; i<tabs.length; i++) { tabs[i].style.backgroundColor = inactive_tab_background_colour tabs[i].style.borderBottomColor = inactive_tab_bottom_border_colour } on_top = caller.tab_number caller.style.backgroundColor = layer_colours[caller.tab_number] caller.style.borderBottomColor = layer_colours[caller.tab_number] put_on_top = document.getElementById('avatar_stack').getElementsByTagName('p')[caller.tab_number] put_on_top.style.zIndex = stack_height++ put_on_top.style.backgroundColor = layer_colours[caller.tab_number] } </script> I have 3 HTML form inputs fields that is dynamically generated by a "add more" button, with naming for the fields name as fieldName, fieldName1, fieldName2, fieldName3, and so on. Now, I'm trying to retrieve the value from this fields with JavaScript, using the script below. var bookingForm = document.forms['formName']; var qty = bookingForm.fieldName +'i'.value; with the 'i' been a generated numeric number by a for loop when I use alert(qty), it returns NaN, when I'm expecting the value for fieldName1, fieldName2, and so on. But when I use; var qty = bookingForm.fieldName.value I can get the value in that field but get NaN when I try to concatenate 1,2,3, with the fieldName. Any help will be very much appreciated. Hi, I am using this script Code: <script type='text/javascript'> var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"; var maxresults=14; var splittercolor="none"; var relatedpoststitle="Related Results"; </script> As you can see it has a variable that lets me give a name to the results, in this case I have used Related Results. This code is used once at the back and in that way it used by my every page. So e-g if I change it to More Results it will changed everywhere on all pages. I don't want it like this, I want to be able to give a different name to every page like on one it is like 'More Images Results' while on 2nd it is something else. you can see a demo here at this page http://bloghutsbeta.blogspot.com/201...ng-slider.html Total javascript noob here, but managed to get this working: Code: $(document).ready(function() { if ((screen.width>=1024) && (screen.height>=768)) { $("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detect1024.css"}); } else { $("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detect800.css"}); } if ((screen.width>=1280) && (screen.height>=1024)) { $("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detectlarge.css"}); } }); Like i said, its working fine. However i was hoping to make it also work on the fly, so if the user resizes the window, the different stylesheets are used. Ive been told to: 1. Put the working gubbins into a separate function and 2. Call the function from both load and resize events - But i dont know how to do this. Any help would be really appreciated! Hi, I have a script that shows/hides a div but rather than making it sort of snap I would like to make it glide/slide. I have looked at other scripts but can't make them work with mine. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css" media="screen"> /* CSS Reset */ * { margin: 0; padding: 0; border: 0; outline: 0; } body { font-family: Arial, Helvetica, sans-serif; background-color: #FFFFFF; color:#FF0000; } a:link { color: #999999; text-decoration: none; letter-spacing: 3px; font-size:14px; } a:visited { color: #999999; text-decoration: none; letter-spacing: 3px; font-size:14px; } a:hover { color: #FF0000; letter-spacing: 3px; text-decoration: none; font-size:14px; } a:active { color: #FF0000; font-size:14px; letter-spacing: 3px; } #wrapper{ position:relative; width:730px; height:600px; margin:0px auto; } #images{ width:730px; height:552px; overflow:hidden; float:right; position: absolute; top: 48px; } #textbox{ position: absolute; width:205px; height:40px; background-color: #FFFFFF; top: 68px; left: 20px; z-index: 2; padding: 10px; border-bottom: 2px solid red; } #logo { position: absolute; width: 101px; position: absolute; left: 634px; top: 19px; padding: opx; margin: 0px; z-index: 2; } .more { display: none; text-decoration: none; font-family: Arial, Helvetica, sans-serif; background-color: #FFFFFF; border-bottom: 2px solid red; padding-left: 8px; padding-right: 8px; margin-left: -10px; width: 209px; padding-bottom:10px; } a.mo hover { text-decoration: none;} a.showLink, a.hideLink { text-decoration: none; font-size: xx-small; color: #36f; padding-left: 8px; /*** background: transparent url(down.gif) no-repeat left;***/ } a.hideLink { /*** background: transparent url(up.gif) no-repeat left;***/ } .drop1 { font-size: 12px; font-weight: bold; } .drop2 { color: #666666; font-size: smaller; } #apDiv1 { position:absolute; left:319px; top:87px; width:234px; height:32px; z-index:1; } .init_image, .inactive_class { } .hover_class, #active_id { color:#F00; } </style> <script language="javascript"> function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "<img src=ShowProduct.jpg border='0'>"; } else { ele.style.display = "block"; text.innerHTML = "<img src=hideProduct.jpg border='0'>"; } } </script> <script type="text/javascript"> // Reference URL to large images here var Images = new Array( "001.jpg", "002.jpg", "003.jpg", "004.jpg" ); function swap(el) { var timgs=document.getElementsByTagName('a') for (var i_tem = 0; i_tem < timgs.length; i_tem++) if (timgs[i_tem].className=='inactive_class'||timgs[i_tem].className=='hover_class') timgs[i_tem].id='' el.id='active_id' document['imgMain'].src = Images[el.href.substr(el.href.lastIndexOf('#')+1)]; } function init(){ var timgs=document.getElementsByTagName('a') for (var i_tem = 0; i_tem < timgs.length; i_tem++) if (timgs[i_tem].className=='init_image'){ timgs[i_tem].className='inactive_class' timgs[i_tem].onmouseover=function(){this.className='hover_class'} timgs[i_tem].onmouseout=function(){this.className='inactive_class'} timgs[i_tem].onclick=function(){swap(this);return false;} } swap(document.getElementById('first')); } </script> </head> <body onLoad="init();"> <div id="wrapper"> <div id= logo><img src="logo2.png" width="101" height="92" /></div> <div id="textbox"> <div style="position:relative;"> <img style="padding-right:5px;" src="logo_dedon.png" alt=""/> <a href="javascript:toggle();" id="displayText"><img src=ShowProduct.jpg border="0"></a> <img style="padding-right:5px;" src="clear.gif" alt="" width="135" height="10" /> <a class="init_image" id="first" href="#0">1</a> <a class="init_image" id="first" href="#1">2</a> <a class="init_image" id="first" href="#2">3</a> <a class="init_image" id="first" href="#3">4</a> </div> <div id="toggleText" style="display: none;" class="more"> <p><span class="drop1">BARCELONA</span><br /> <span class="drop2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non mi in urna hendrerit tincidunt. Maecenas eleifend erat et lacus. Sed tempor. Sed venenatis consequat neque. Sed massa. Donec quis orci sed lacus ullamcorper venenatis. </span></p> </div> </div> <div id="images"> <div><img galleryimg="no" name="imgMain" src="img/big/1big.jpg" alt=""></div> </div> </div> </body> </html> Can anyone advise a solution for this please? Thanks alot Joe How do I make my Script load faster? Is there Code that will make my Script load faster, (so that it won't take so long to view) If so, can someone show me how to incorporate it into my Example Script? With appreciation I am trying to make the following fill the value box when the page loads as opposed to pressing the button. I cant seem to do it. Any ideas?? PHP Code: <script> var keylist="abcdefghijklmnopqrstuvwxyz123456789" var temp='' function generatepass(plength){ temp='' for (i=0;i<plength;i++) temp+=keylist.charAt(Math.floor(Math.random()*keylist.length)) return temp } function populateform(enterlength){ document.pgenerate.output.value=generatepass(enterlength) } </script> <form name="pgenerate"> <input type="text" size=18 name="output"> <input type="button" value="Generate Password" onClick="populateform(this.form.thelength.value)"><br /> <b>Password Length:</b> <input type="text" name="thelength" size=3 value="7"> </form> I want to display a pdf on my site but allow the users to turn the pages like amazon does - how do I go about this? Is it something that can be done in javascript?
Right now, it only works with IE. This goes in the header... Quote: <script language="JavaScript1.2"> function makevisible(cur,which){ strength=(which==0)? 1 : 0.2 if (cur.style.MozOpacity) cur.style.MozOpacity=strength else if (cur.filters) cur.filters.alpha.opacity=strength*100 } </script> and this goes in the image: Quote: <img style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" src="SOURCE OF IMAGE"> It works great in IE, but not firefox or chrome. Any way I can alter this to get it to work in all 3 or at least Firefox and IE. Thanks for the help! hi i need to merge this code in 1 file the files in attach the code for auto popup window withe cookis i need merge it for switch it to vb mood i think the job very easy but am not java script cooder I have been trying for some time now to find a script to create a cookie for the following, so that the user selected font size is remebered throughtout the site. I have traweled the internet for some time now but all to no avail, the only guides i can find are for resizing a single element, which is no good for what i require. The code i already have is: <script type="text/javascript"> //Specify affected tags. Add or remove from list: var tgs = new Array( 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'b', 'li', 'form.button' ); //Specify spectrum of different font sizes: var szs = new Array( 'x-small','small','medium','large','x-large' ); var startSz = 2; function ts( trgt,inc ) { if (!document.getElementById) return var d = document,cEl = null,sz = startSz,i,j,cTags; sz += inc; if ( sz < 0 ) sz = 0; if ( sz > 5 ) sz = 5; startSz = sz; if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ]; cEl.style.fontSize = szs[ sz ]; for ( i = 0 ; i < tgs.length ; i++ ) { cTags = cEl.getElementsByTagName( tgs[ i ] ); for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ]; } } </script> On a seperate issue i would also like to know if there is a script i can put in to enable users to quickly return to the default font size (although it would not be the end of the world if such a thing is not possible). Okay, lets say I have this simple code he Code: var container = document.getElementById(con); var obj = container.getElementsByTagName('img'); and I want to get the full HTML image tag using the obj value, if you get what I mean. How would I do this? So I want to get this: Code: <img src="images/image_209948045.jpg" /> by using this: obj[0]; 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 everyone, I am just learning the basics of javascript, and am finding myself stuck. Any help is greatly appreciated. So, I'm using the below javascript for expand / collapse text, it suffices well. However it will only collapse either table rows, or table data cells. Now, I know that these tags Code: {var trs = table.getElementsByTagName('tr'); {var a = trs[i].getElementsByTagName('td') Make the rows / data cells expand. However, I cannot seem to make it work on headers. To be lucid, I would like to know what I have to add, or edit to make the below code expand table headers (<th>), and perhaps div tags. The full javascript is thus : Code: window.onload = function() { var table = document.getElementById('stjorn'); if (table) { var trs = table.getElementsByTagName('tr'); for(var i = 0; i < trs.length; i++) { var a = trs[i].getElementsByTagName('td')[0].getElementsByTagName('a')[0]; a.onclick = function() { var span = this.parentNode.getElementsByTagName('span')[0]; span.style.display = span.style.display == 'none' ? 'block' : 'none'; this.firstChild.nodeValue = span.style.display == 'none' ? 'More' : 'Less';}; } } }; Thank you for your time. |