JavaScript - Js - Direct Children Of Element
Hi guys I have a navagation like this:
Code: <ul id="nav" class="menu"> <li><a href="">Link Hover</a> <ul> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> </ul> </li> <li><a href="">Link Hover</a> <ul> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> </ul> </li> <li><a href="">Link Hover</a> <ul> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> </ul> </li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link Hover</a> <ul> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> <li><a href="">hidden</a></li> </ul> </li> </ul> Im trying to use javascript to count only the direct li children of ul. So I tried childnode but im not really familiar with it. Basically the li items inside the li should not be counted. Similar Tutorialsmorning all, I need help with a HTML UL I have ul inside ul but all I want to get when I select a certain list is the children of that list but remove the ul inside that list so they dont show at all http://pastebin.com/m98deaff any help would be great , current selecting code is http://pastebin.com/m6f4b886f Code: <div class="demo" id="demo_1"> <ul> <li id="1" class="open"><a id="1" href="#"><ins> </ins>Root node 1</a> <ul> <li id="2"><a id="2" href="#"><ins> </ins>Child node 1</a></li> <li id="3"><a id="3" href="#"><ins> </ins>Child node 2</a></li> <li id="4"><a id="4" href="#"><ins> </ins>Some other child node with longer text</a></li> <li id="6"><a id="6" href="#"><ins> </ins>Root node 222</a> //SHOUL NOT BE IN MY ARRAY <ul> <li id="7"><a id="7" href="#"><ins> </ins>Child node 222a</a></li> <li id="8"><a id="8" href="#"><ins> </ins>Child node 222b</a></li> <li id="9"><a id="9" href="#"><ins> </ins>Some other child node with longer text 222</a></li> </ul> //END OF UL ELEMENT N OT NEEDED THERE COULD BE more than 1 </li> </ul> </li> <li id="5"><a id="5" href="#"><ins> </ins>Root node 2</a></li> </ul> </div> Hey all, I have a dropdown (id='job-roles'), and I would like to remove a class from all of the options in the dropdown when certain conditions are met, but I cannot figure out how to do it. Is anyone able to help please? Thanks. Hi guys I was wondering if its possible in javascript to do something like this: Code: document.getElementById('div').children('img').style This is my code with int value I can target children is this also possible with a string like img? 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" dir="ltr" lang="en-gb" xml:lang="en-gb"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> window.onload=function() { var d = document; var e = d.getElementById('t'); e.children[0].style.border = "solid black 1px"; } </script> </head> <body> <div id="t"> <img width="120" height="80" src="./images/full6.jpg" alt="" /> <img width="120" height="80" src="./images/full6.jpg" alt="" /> <img width="120" height="80" src="./images/full6.jpg" alt="" /> <img width="120" height="80" src="./images/full6.jpg" alt="" /> </div> </body> </html> The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="") { document.getElementById('msn1').style.display='none'; } if(document.getElementById('yahoo1').innerHTML=="") { document.getElementById('yahoo1').style.display='none'; } if(document.getElementById('skype1').innerHTML=="") { document.getElementById('skype1').style.display='none'; } if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">') { document.getElementById('facebook1').style.display='none'; } else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">') { document.getElementById('facebook1').style.display='none'; } else { document.getElementById('fbook-add').innerHTML='Facebook Profile'; } What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init() { // Grab the appropriate div theDiv = document.getElementById('scrollbox'); // Grab all of the links inside the div links = theDiv.getElementsByTagName('a'); // Loop through those links and attach the target attribute for (var i=0, len=links.length; i < len; i++) { // the _blank will make the link open in new window links[i].setAttribute('target', '_blank'); } } window.onload = Init; But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! I read a beginners book on js and now I'm working through a cookbook style book to get a hang of things, I came across an example for redirecting URLs in the book that didn't work: Code: <form> <input type="text" name="url"> <input type="button" value="Go" onClick="location.href=this.form.url.value"> </form> After searching on the net I found another that works perfectly but I don't understand why the one in the book doesn't work. works: Code: <form name="openlocation"> <input type="text" name="href"> <input type="button" value="Go" onClick="location.href=document.openlocation.href.value;; "> </form> I tried replacing the url with href and other tweaks, is it that you cant use ".this" here, making it necesary to name the form? Any explanation help would be apreciated. Thanks in advance! Hi Guys, Is this possible. If a page is opened and no action is taken on the page, but left open for maybe 5 min can it be re-directed to another page BUT if the page has been scrolled inside the 5 min then no action to take place. Maybe the time be reset from the last action on the page. I hope I have made that clear. Regards, The Dingbat hi i try this code it not working beacause its open after one second open new tab javascript query but i have also use php redirect url also . i want javascript new tab url open new tab before page redriect here is code Code: <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { setTimeout(function() { window.open( 'https://google.com', '_blank' ); }, 2000); }); </script> <?php $url='http://yahoo.com'; echo header ('Location:'.$url); ?> in above code i want page redirect to yahoo.com before open new tab of google.com how to set it please help me I am trying to figure out a way to have a page redirect if the mysql connection fails. The issue is that the page is already loaded and the only time this would be needed is if the user tries to perform operations on a loaded page after the session runs out. So basically, I have a page that will allow you to search for an item using ajax, then select an item and press add which will place the item in another table displaying detailed information. Both operations connect to the database using SESSION variables to save the connection information. My goal is to use the "or die()" method to print something that will force a redirect because this could happen in a number of places in the site and I want to try and get them all in one swipe. Here is what seemed like it would be the most promising: Code: $conn = mysql_connect($_SESSION['host'], $_SESSION['username'], $_SESSION['password']) or die("<script>location.href= '../login.php'</script>"); Unfortunately the javascript never runs.... I tried putting alerts also and nothing, but with firebug I can see they are printed. Any idea how I can ensure that the javascript is executed? Thanks in advance. I've got a client using JQuery pageslide function on a wordpress site - http://srobbin.com/blog/jquery-pageslide/ There is a sidebar menu on the left and about 5 pages in the right hand side. So you click one of the links on the sidebar menu and it slides to one of the 5 corresponding pages. I guess the 5 pages are all really one page though within the slider app? I'm wondering if it's possible to link directly to a page within the slider... because right now it always goes to the first page of the 5. And is there a way to program it so the back button in the browser makes the page slide go back to the previous page, rather than going to the last actual page in the browser? Ok, I paid to have a website built, yet the developer used iFrames to accomplish the task. Basically, load a parent page, and then in an iframe, lod content chosen from a menu. Is there a way to create a menu at the homepage level, that will allow a menu listing the various parent pages, and under each parent page, have a drop down that will point directly at an iframe content? Like this? Page1 Page2 Page3 Page1ContentA Page1ContentB Page1ContentC And when you click Page1ContentC, it will load Page1.htm and in the iframe load Page1ContentC? If i am not clear, please let me know. Any help appreciated. Jeff I have 3 check boxes and one submit button when the submit button is hit I need it to direct to one of 3 pages depending on which check box is checked. can anyone help with this Thanks! I have the following script in my page Code: var tickspeed=4000 var enablesubject=0 if (document.getElementById){ document.write('<style type="text/css">\n') document.write('.dropcontent{display:none;}\n') document.write('</style>\n') } var firstDiv=0 var allDivs=0 function contractall(){ var inc=0 while (document.getElementById("dropmsg"+inc)){ document.getElementById("dropmsg"+inc).style.display="none" inc++ } } function expandone(){ var firstDivObj=document.getElementById("dropmsg"+firstDiv) contractall() document.getElementById("dropcontentsubject").innerHTML=firstDivObj.getAttribute("subject") firstDivObj.style.display="block" firstDiv=(firstDiv<allDivs-1)? firstDiv+1 : 0 setTimeout("expandone()",tickspeed) } function startscroller(){ while (document.getElementById("dropmsg"+allDivs)!=null) allDivs++ expandone() if (!enablesubject) document.getElementById("dropcontentsubject").style.display="none" } if (window.addEventListener) window.addEventListener("load", startscroller, false) else if (window.attachEvent) window.attachEvent("onload", startscroller) I also have the following in my html: Code: <div id="dropcontentsubject"></div> <div id="dropmsg0" class="dropcontent" subject=""></div> There are a total of 4 dropmsg# divs. I need to be able to input 4 navigation buttons below this code that will, when clicked, pause the ticker and go directly to the "dropmsg#" assigned to that button. I would deeply appreciate any assistance with this. Thank you. Hi All, I have to know whether we can track the direct browser closing event by Javascript. I have tried with window.unload & window.onbeforeunload, but I was not get full satisfaction with those ones. Please let me know if anybody have any kind of solutions other than those specified above. advance thanks... On my site's shopping cart, when clicking the "buy" button, it merely animates a little item that shows that something is now in the customer's cart. I'd like it to do this, and then redirect to "/cart", cutting down the work of what the user actually has to do (we only have one product). Here's what I'm working with: <!-- START ADD TO CART --> {% if featuredproduct.available %} <span class="featured-product price"><span>{{ featuredproduct.price | money }}</span>{% if featuredproduct.compare_at_price_max > featuredproduct.price %} <del>{{ featuredproduct.compare_at_price | money }}</del>{% endif %}</span> <input type="submit" value="{{ settings.text_addtocart }}" class=" add-to-cart addtocart button primary"> {% else %} <h3 class="featured-product price sold-out"><span>Sold Out</span></h3> <input type="submit" value="{{ settings.text_addtocart }}" class="featured-product add-to-cart button primary disabled" disabled="disabled "> {% endif %} <!-- END ADD TO CART --> Adding an "onclick="location.href='/cart';" after the input classes does not fire the actual act of adding the item to the cart, so it shows an empty cart on the redirect. JS newbie, sorry for the rough explanation. Any help greatly appreciated! Hi I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success! Thanks in advance I have the following code Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a></td> </div> what i want to do is this: Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a><a href="anotherlink">another_link</a></td> </div> how can i go about achieving this? Hi, (new to javascript) Code: digAudio = document.createElement("audio"); digAudio.setAttribute('src',hypeDocument.documentName()+'_Resources/'+'digging.m4a'); digAudio.id = "diggingAudio"; newAudio = document.getElementById("diggingAudio"); //returns null the audio element is added (I can play the audio) but I can't get it by its id ? thank you |