JavaScript - Hide Element When Page Loads
Does anyone know what's wrong with this code because when the page loads, the link is not being hidden
Code: window.onload = setTarget; function setTarget() { var theLinks = document.getElementsByTagName('a'); for(var i = 0; i < theLinks.length; i++) { if(theLinks[i].getAttribute('href') == '/subjects/new') { theLinks[i].style.display = "none"; } } } Similar TutorialsHi. I am very new to javascript, so I might not even be wording my question right, but I am going to try and be as concise and specific as possible. I am using jquery on my website- the galleria plugin- to make a slideshow. you can see the completed show he http://www.pauljameswilliams.com/demo2a.html This slideshow will be one of three on my website. Each slide show will opperate the same exact way.I have built in tabbed navifation, and the slideshows will all be accessable under the "portfolio" tab by clicking on their corresponding links. check out the site he http://www.pauljameswilliams.com/portfolio.html As it is I have one slideshow up, although not yet connected to the corresponding link, but the images won't load. My guess is that because the div tag is hidden that the contents don't load propperly and I need the contents to load when the corresponding div tag that it is contained in becomes visible but I don't know how to do that. this is the javascript that I have written to show/hide the <div> tags where the content will live. Three slide shows will live in content_2 and show/hide when the corresponding button is pressed. Code: function tabSwitch(new_tab, new_content) { document.getElementById('content_1').style.display = 'none'; document.getElementById('content_2').style.display = 'none'; document.getElementById('content_3').style.display = 'none'; document.getElementById('content_4').style.display = 'none'; document.getElementById(new_content).style.display = 'block'; document.getElementById('btn_1').className = ''; document.getElementById('btn_2').className = ''; document.getElementById('btn_3').className = ''; document.getElementById('btn_4').className = ''; document.getElementById(new_tab).className = 'current'; } thank you- I am really stuck. i promise, i am actually learning javascript, I'm not just trying to get other people to do my work for me. Hi well my problem is.. how do i hide the popup list.. i would like to if the user click outside of that div element.. the popup div will hide.. but whenever i select the body or the id containing that popup div.. the whenever i click the down arrow button.. it shows the popup div.. but then closes again.. because of the selector hide on the container div.. http://development.andrewfopalan.com/devpage/test.html here's the test page.. when i click the down arrow.. it shoes the popup.. how to do if i want that any click outside that popup element.. i will call the hide/fadeout for the popup element.. please help.. tried various things.. just a shed of light will do.. thanks Hey there, I want a div element only to show when you hover over an anchor of the main menu. The problem is: This div is not a child of the menu, so i can't do it through simple hover and display css functions. That's the menu. This is what should appear when you're hovering one of the items. Also, I want a different div for the different menu anchors, because I dont think wordpress can read the category by a hover. And, if this wasn't enough, I have no idea how to build this so you can actually from the menu anchor to the subnav without it disappearing when you're not above the anchor. Here's the website:www.chabuya.net I already tried hundreds of show/hide scripts, solving this via css but nothing works for me. I'd be grateful for any suggestions. Thanks in advance, Kevin What I am trying to do is get a select box for possible options... Much like you see on facebook when you search for a friend. If you select one of the options an action happens and if you select outside of the box or tab else where it closes. I can seem to do one or the other but not both. The options are filled in via AJAX and JSON. Here is a sample of my code. Code: <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ suggestions.hide(); // On the change of the id_location text search for matching results. $('#text').keyup(function(){ // Get the value of the id location. var text = $('#text').val(); // Trim any unnecessary white spaces. text = jQuery.trim(text); // Start guessing after the length of text if greater than one. if (text.length > 1) { // Create a query string for ajax. var qry_str = '?suggestion=' + text; // Send an ajax json request. $.getJSON('http://example.com/page.html' + qry_str, function(data){ // Empty the suggestions box. $('#suggestions').empty(); // Show the suggestions box. $('#suggestions').show(); if (data.length > 1) { // Start a list for the suggestion. $('#suggestions').append('<ul class="suggestion_list"></ul>'); // Loop through all the results. for (i = 1; i < data.length; i++) { // Get the name. $('#suggestions ul').append('<li id="suggestion_' + data[i].id + '" class="suggestion suggestions">' + data[i].name + '</li>'); } // If an id selection was made then place its complete text in the box and its id in the id location box. $('.suggestion').click(function(){ // Get the id from the substring of the html id. var html_id = $(this).attr("id"); var id = html_id.substring(11); // Get the name from the text. var name = $(this).html(); // Alert just to test if you have the id. alert(id); // Set the value of the text box to the complete name. $('#text').val(name); // Hide and empty the suggestion box. $('#suggestions').hide(); // Turn the focus back to the text. $('#text').focus(); }); /* This is the part that messes up the suggestion click function if turned on. */ // Hide the box when focus is else where. $('#container').focusout(function(){ alert('test'); // $('#suggestions').hide(); }); }); } }); }); </script> <div id="container"> <input type="text" id="text" name="text" value=""> <div id="suggestions"> <ul class="suggestion_list"> <li id="suggestion_1" class="suggestion">Option 1</li> <li id="suggestion_2" class="suggestion">Option 2</li> <li id="suggestion_3" class="suggestion">Option 3</li> <li id="suggestion_4" class="suggestion">Option 4</li> </ul> </div> </div> The main thing is to make them click an option or hide the list if anything outside the container is clicked on or tabbed to. Is there any vent better than the focus out statement or be able to select all elements not in the container and set a focus() function on them (without having to individually name all the elements)? Thanks for any help. 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() Resolved
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 ) 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 All, I am new to javascript and actually I need to insert the data into a textarea from a text file when the user loads the browser.. and I am using this program to do it..but its throwing error 405, I dont know whats the problem..can any one please check the code or give me some code to do the same funtionality. Quote: <script type="text/javascript"> function getfile() { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("Browser does not support HTTP Request"); return; } var url = "${pageContext.request.contextPath}/static/files/email1.txt"; xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("POST", url, true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") { var emm = xmlHttp.responseText; alert(emm); } } function GetXmlHttpObject() { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } </script> can one give me some idea regarding this. Thanks in Advance, Best Regards, Rajasekhar. I want to - after the page has loaded - detect a text string in the code.. something similar to Code: function afterPageLoadsDetect() { Quote: Simply put -- I want javascript to detect a text string in the source code and return it to me -- AFTER the page is fully loaded. THANKS. I have a slow loading external JavaScript that displays a calendar widget. When I put it in my sidebar, while the page loads, it cuts off where the calendar should be until the JavaScript for it finishes. How can I make the script load after the page finishes loading? I tried creating a function at the end of the HTML and calling the function in the sidebar, but I think because the function was being called before the script was executed, it didn't work. I appreciate any and all help! i have a photo slideshow that loads in the header so when the page is loaded the slide show is there on the left. it looks like this (page layout) header --------------------> slideshow content ---------------------> image footer ----------------------- where it says image i am adding an image, that colum is controlled by the header so i added a div in there for the image. what is happening is that since the image is small and the slideshow is large, when the page loads the single image pops up for a second where the slide show is, then it moves down on the page where it should be. I know this is caused by the fact that the image loads faster than the slideshow so we see the image first in that space. what i am trying to do is pause the single image load until the slideshow loads, but i dont know how? I cant move the image down and load it in the body because that left side column is controlled by the header slideshow it has to be part of it when it loads. has to be a way to make the slide show load on the page and then the image. here is the setup on the header.. Code: <table border="0" align="center" cellpadding="0" cellspacing="0" width="100%"> <tr><td height="10px"> </td></tr> <tr><td valign="top"> <?php if($_SERVER['PHP_SELF']!='/crop.php') {?> <div style="width:250px; background-color:#666666; height:250px; float:right; display:inline; color:#CCCCCC; margin-right:8px;"> <div id="fadeshow1"> </div> <!-- close fadeshow div --> <!-- added image --> <div style="text-align:center;width:250px;padding-top:30px; background-color:#FFFFFF;float:right;color:#000000;"> <img src="<?=$SKIN_IMAGE_PATH?>/myimage.gif" border="0" alt="" title="myimage" /> </div> <!-- end add --> </div> <!-- close top div for fadeshow and this image --> <?php } ?> the body of the site pages load here Alright, so I'm working on a script, and I'm simply using the following code: document.getElementById("element").onclick = alert("hello"); When I load the page, the alert fires instantaneously. I'm completely stumped. I've checked everything in my not too extensive Javascript file, and it looks fine. What common errors could cause this? I am displaying a webpage from external domain in an iframe on my site. The webpage being shown in iframe has a header image that I would like to not appear when someone visits my site. Is it possible using Javascript or otherwise to have the iframe scrolled down by a certain pixels by default?
How can I truncate all words greater than 30 characters using a class name when the page loads? Been trying to do this for about 5 hours. Trying to conside the following: * Truncate long words and churn anything above the minimum length with an ellipse. * Only truncate words and not the whole sentence or paragraph. * Should truncate text that are inside HTML tags and not truncate the tags themselves. * When you hover over the ellipse, it will show you the complete word. * The long words are already truncated when the page load (SEO friendly). * Block of text are included in a max of 25 <div> elements and a minimum of 1. That's why I'm not using ID. So far I have this lines of code: Code: <script charset="utf-8" language="javascript" type="text/javascript"> function test(gaz) { var sbText = gaz.innerHTML; var sbTextArr = sbText.split(' '); var tempText = ""; for (var s=0; s<sbTextArr.length; s++) { if (sbTextArr[s].length > 30) { sbTextArr[s] = "marco"; } gaz.innerHTML = ""; tempText = tempText + " " + sbTextArr[s]; gaz.innerHTML = tempText; } }</script> <div class="myClass" onmouseover="test(this);"><p>This is a <strong>looooooooooooooo</strong><em>ooooooooooooooooooooooooooooooong</em> word.</p></div> <div class="myClass" onmouseover="test(this);">A text without long word.</div> <div class="anotherClass"><p>Another set</p><p>But should not affect if there's a loooooooooooooooooong word.</p></div> I got this from the web and modified it but not working as I intended it to be. Useful for posts in forums, blog comments, and guestbooks Just a basic question.... I am fairly new here. Just wondering if this is just a part of life. It seems like when I load javascript code into a page, that each item I add, such as an accordian vertical navbar, image slider, etc, that each time I add one, the page loads a second or so slower with each one added. I would like some of these features, but is this just a part of life, or are there tricks to avoid the slower load time? It is not major time but after the 2 items I mentioned, it added on about 2 seconds. Just enough to make it a bit annoying. I read that $(document).ready(function() might slow me down but I do not see that statement in any of my .js files. Thanks, Buffmin. Hi, As you will see with the code below when the text ONE and TWO are clicked on it displays a background color. When ONE is activated TWO is off. When TWO is activated ONE is off. But when the page loads I want ONE to display the background color. When ONE displays the background color after the page has loaded, I want to click on TWO to display it's background color and ONE should turn off as it does now. I can't figure out how to activate the background color for ONE when the page loads. Then if it is activated when the page loads, how to turn off ONE and turn on TWO when clicked on and visa versa. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script language="javascript" type="text/javascript"> var btn = function () { var active = null, bcolor = '#84DFC1'; if (this.attachEvent) this.attachEvent('onunload', function () { active = null; }); return function (element) { if ((active != element) && element.style) { if (active) active.style.backgroundColor = ''; element.style.backgroundColor = bcolor; active = element; } }; }(); </script> </head> <body> <div onclick="btn(this);">ONE </div> <div onclick="btn(this);">TWO </div> </body> </html> Hi I have a problem with a form in my site he http://www.21centuryanswers.com/submit.php if no field is filled and you click submit, an alert will be shown, yet the next page will still load! How do I fix it? the code for the form is: <form action="privacy.php" method="post" onsubmit="return checkform(this);"> <fieldset> <center> E-mail: <input type="textfield" name="email" size="60" value="" /><br/></br> Question: <input type="textfield" name="question" size="70" value="" /><br/><br/> <input type="submit" value = "Submit"/> </center> </fieldset> </form> and here is the validation script: <script language="JavaScript" type="text/javascript"> <!-- function checkform ( form ) { // ** START ** if (form.email.value == "") { alert( "Please enter your email." ); form.author.focus(); return false ; } if (form.question.value == "") { alert( "Please enter the question." ); form.title.focus(); return false ; } // ** END ** return true ; } //--> </script> Please help! 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. |