JavaScript - Trouble With Jquery .each() Iterations
Here's what should happen.
1. Get the rel attribute of the clicked link 2. For every div with class 'entry': (i)Get its 'left' position (ii) Calculate its outer height (iii)Loop through all instances of 'a.tag_filter'. If it finds the same string in the 'rel' as the one oringinally clicked on then add 1 to 'V' and break out of the loop. (iv)If 'V' is equal to 0 after the loop we know the same tag isn't present within that '.entry' so fade it out. (v)Once the fadeout has finished loop through all the '.entry' after the faded out one and get their 'left' values. (vi)If the left value of the faded entry = the left value of the current '.entry' then reposition it to the new 'top' value. What is currently happening. It runs through and fades out all the correct '.entry' elements and only after all of them have faded out does it reposition them remaining '.entry' elements. After each element is faded out I would like the repositioning loop to run so it essentially positions the remaining elements one at a time rather than all at once. Here's the development page http://www.redeemercentral.com/index.php/test/grid Here's the code I have so far Code: $('a.tag_filter').click(function(e){ e.preventDefault(); var selectTag = $(this).attr('rel'); $('div.spotlight_entry_container_grid').each(function(i){ var $entry = $(this); var tagArray = []; $('a.tag_filter', this).each(function(){ tagArray.push ($(this).attr('rel')); }); if($.inArray(selectTag,tagArray) == -1){ var leftPos = $entry.css("left"); var topPos = $entry.css("top"); $entry.fadeOut(1000, function(){ var nextLeftPos; var nextTopPos; $('div.spotlight_entry_container_grid:gt('+i+')').each(function(j) { var $laterEntry = $(this); nextLeftPos = $laterEntry.css("left"); nextTopPos = $laterEntry.css("top"); if(leftPos == nextLeftPos){ $laterEntry.animate({ top: topPos }); } }); }); } }); }); I hope that all makes sense. Any help would be very much appreciated. Thanks Similar TutorialsHello Coding Forums, I have a list of pub skittle players and I want a definite gap after two iterations. So.. The Red Lion ...... John and his Mrs The Two Pigs ......Martin and his mate The next pub ...... the next pair The next pub ...... the next pair Below is what I have so far : Code: var pubs = new Array('The Red Lion','The White Hart','The Cross Keys','North End Club','The Three Crowns','The British Legion','The Hare and Hounds','The Royal Oak'); var teamMembers = new Array ('Joan & Richard','Steve & Colin','Brian & Martin','Alice & Moyra',' Kirsty & Ben',' Lorri & Mark','Paul & Andy','Finchey & Sue'); for (var cplCount = 0; cplCount < teamMembers.length; cplCount = cplCount + 1) { document.write('The venue will be ' + pubs[cplCount] + ' and the players are ' + teamMembers[cplCount] + '<BR>'); } As you can see it's one big list at the moment. Any help would be greatly appreciated Morris L I've been trying to get the jquery nivo slider and the lavalamb function to work on the same webpage. From each of the tutorials comes different versions of jquery and they don't both work on the most recent version of jquery. I left both versions of the jquery attached for now... Am I doing something wrong or is it possible to have them both working on the same page? I'm a noob and my code is pretty messy...but I'm trying to do some simple stuff... Pleeeeese help meeeee!! I'm getting ubber frustrated Here is the website - http://sethwardallison.com/ihome/index.html Here is the menu I made that is working correctly on it's own... - http://sethwardallison.com/ihome/lavalamp/other.html Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <html lang="en"> <head> <title>iHome Preview</title> <link rel="stylesheet" href="js/nivo-slider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <style type="text/css"> #nav {width:397px; background: url(images/bg2.gif) no-repeat top left; overflow:hidden; margin:0px; padding:10px 0px 13px 20px; color:#fff; position:relative; font: bold 14px arial;} #nav li {float:left; display:inline; list-style:none; line-height:35px; position:relative; z-index:3;} #nav li a { padding:0px 10px 0px; cursor:pointer; Palatino, serif; font-size:20px; display:inline; color:#fff; } #nav li.rounder { position:absolute; left:0px; top:10px; margin:0px; padding:0px; display:none; z-index:2;} #nav li.rounder img {position:absolute;} .cornersWrap {position:relative; height:25px; width:auto; margin-top:5px; background:#dfddc0;} #nav, #nav li, #nav li a, #nav li.rounder {height:35px;} #tl,#tr,#bl,#br {position:absolute; width:8px; height:8px; overflow:hidden;} #tr,#tl {top:0px;} #br,#bl {bottom:0px;} #tr,#br {right:0px;} #tl,#bl {left:0px;} #tr img,#br img {left:-8px;} #bl img,#br img {top:-8px;} </style> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#nav li a").mouseover(function(){ $("#nav li a").each(function(count){ $(this).css({color:"#fff"}); }); $(this).css({color:"#663300"}); var offL = $(this).offset().left - $("#nav").offset().left; var offW = $(this).width() + parseInt($(this).css("paddingLeft")) * 2; $("li.rounder").stop().animate({left:offL+"px", width:offW+"px"},295,function(){ //IE6 1px Fix var trOff = $("#tr").offset().left + parseInt($("#tr").css("width")); var wrapWOff = $(".rounder").offset().left + parseInt($(".rounder").css("width")); var brOff = $("#br").offset().top + parseInt($("#br").css("height")); var wrapHOff = $(".cornersWrap").offset().top + parseInt($(".cornersWrap").css("height")); if(wrapWOff > trOff){ $("#tr,#br").attr("class","rFix"); } $(".rFix").css({right:"-1px"}); if(wrapHOff > brOff){ $("#br,#bl").attr("class","bFix"); } $(".bFix").css({bottom:"-1px"}); }); }); }); </script> </head> <body> <center><img src="images/logo.png" alt="" title="Welcome"> <div id="wrapper"> <div id="slider-wrapper"> <div id="slider" class="nivoSlider"> <a href="http://youtu.be/4Mh--oqL6ak"><img src="images/randall.png" alt="" title="" /></a> <a href=""><img src="images/creekwood.png" alt="" title="" /></a> <a href=""><img src="images/poinsettia.png" alt="" /></a> <a href="http://youtu.be/fO5q_lG7jKY"><img src="images/cielo.png" alt="" title="#htmlcaption" /></a> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is a<em>House</em> <a href="#">neat</a> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> <div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Product</a></li> <li><a href="#">Example</a></li> <li><a href="#">Contact</a></li> <li class="rounder"> <div class="cornersWrap"> <div id="tl"><img src="images/rounder.gif" /></div> <div id="tr"><img src="images/rounder.gif" /></div> <div id="bl"><img src="images/rounder.gif" /></div> <div id="br"><img src="images/rounder.gif" /></div> </div> </li> </ul> </div> </body> </html> I currently have to run jQuery.noConflict(); so my other scripts work correctly, examples: Code: prototype.js validation.js And i have this Code: $( document ).ready( function() { $( window ).scroll( function( e ) { if( $( window ).scrollTop() > 160 ) { $( '.navigation' ).addClass( 'fixed' ); } else { $( '.navigation' ).removeClass( 'fixed' ); } } ); } ); witch works when i take jQuery.noConflict(); out, but with it in it dont work and thats my main feature is there anyway round it, thanks. I am going through the example at the bottom of this page: http://api.jquery.com/jQuery.getJSON/ I am using the following code: 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=UTF-8" /> <title>Untitled Document</title> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> </head> <body> <script> var id=$("#id").attr("value"); $.getJSON("json.php",{id:id},dates); function dates(datos) { $("#list").html("Town:"+datos[1].rsTown+"<br>"+"County:"+datos[1].rsCounty); } </script> <div id="id"></div> <div id="list"></div> </body> </html> and I'm trying to pull my JSON data from my PHP page: http://www.mypubspace.com/dashtest/json.php the JQuery seems to be doing something but nothing is being output to my screen?! project page http://www.mypubspace.com/dashtest/json.html Please help?! So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){ //References var change = $("#menu li a"); var loading = $("#loading"); var content = $("#content"); //Manage click events change.click(function(){ //show the loading bar showLoading(); //load selected section if(this.id == "home") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/index.php", hideLoading); content.slideDown(); } else if(this.id == "secondpage") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/secondpage.php", hideLoading); content.slideDown(); } else { //hide loading bar if there is no selected section hideLoading(); } }); //show loading bar function showLoading(){ loading .css({visibility:"visible"}) .css({opacity:"1"}) .css({display:"block"}) ; } //hide loading bar function hideLoading(){ loading.fadeTo(1000, 0); }; }); Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) { function load(num) { $('#content').load(num +".html"); } $.history.init(function(url) { load(url == "" ? "1" : url); }); $('#ajax-links a').live('click', function(e) { var url = $(this).attr('href'); url = url.replace(/^.*#/, ''); $.history.load(url); return false; }); }); hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
OK i really hope someone can help me because this has put a complete halt to what I'm doing right now. i have various images in a 12x12 grid with names such as x1y1, x2y2, ect I need to check what x1y1's image SRC is. I have been trying stuff like this: var xpos = 1 var ypos = 1 var IMAGENAME = "x" + xpos + "y" + ypos blah = ('document.' + IMAGENAME + '.src') if (blah == "something.gif") { do what i want } Just doesn't work, nor has the 80 other things I've tried lol. Can anyone help me out? I have a form that does not validate when in a modal. Here is the page: http://www.varsitytrainers.com/purchase1.html It works well. It does not work when viewed on this page: http://www.varsitytrainers.com/bosto...ltrainers.html - Then click "Apply Now" and then click "Featured Membership" then click "Submit" You will see that the validation does not take place. I have been banging my head against the desk for days now. Please help. I am not great at using JavaScript but I am working on it. I really need help with my script. I can't seem to find out why my images won't load correctly. I am trying to get a 2 part radio button selection to show different pictures for every combination of colors you can choose. So if I was to pick black and black a black_black.jpg picture will pop up and black_white.jpg will pop up for a black and white selection. Please if anybody can help I could really use it right now. Thanks! Code: <html> <body> <form name = "myform"> <img id = "myImage" src = "MyDefaultImage.jpg"> <br><br> Barrels: -------- Inserts:<br> Black <input type = "radio" name = "col1" value = "black" onclick = "showImage();"> Black <input type = "radio" name = "col2" value = "black" onclick = "showImage();"><br> White <input type = "radio" name = "col1" value = "white" onclick = "showImage();"> White <input type = "radio" name = "col2" value = "white" onclick = "showImage();"><br> Orange <input type = "radio" name = "col1" value = "orange" onclick = "showImage();"> Orange <input type = "radio" name = "col2" value = "orange" onclick = "showImage();"><br> Red <input type = "radio" name = "col1" value = "red" onclick = "showImage();"> Red <input type = "radio" name = "col2" value = "red" onclick = "showImage();"><br> </form> <br> <br> <script type = "text/javascript"> function showImage() { var A = 0; var B = 0; for (var i=0; i <document.myform.col1.length; i++) { if (document.myform.col1[i].checked) { A = document.myform.col1[i].value; } } for (var u=0; u <document.myform.col2.length; u++) { if (document.myform.col2[u].checked) { B = document.myform.col2[u].value; } } var x = A + "_" + B; if (x>0) { var picture = x + ".jpg"; document.getElementById("myImage").src = picture; } } </script> </body> </html> http://icant.co.uk/sandbox/countdown.html Hi, I am trying to understand the countdown above but I am having some problems. I am trying to remove some of the fields under preferences, I just want to show "Time in Seconds" and "warning start" and not any of the other fields. When I try to remove something from the script the entire thing just stop working. So my question is simple, how do I hide/remove fields under preferences without breaking the countdown? Hi, the cookies I am trying to read are values from a form that were stored. The problem I am having is that one value form the form, the value is 5000, was stored as a cookie but I cannot read it. When I display it, it returns: [object HTMLInputElement]. The code for storing the value is this: Code: document.cookie = "bankRoll=" + encodeURIComponent(money) + "; expires=" + expireDate.toUTCString(); , where money = 5000. The code for reading the cookies is this: Code: var cookies = decodeURIComponent(document.cookie); var cookieNumber = new Array(10); cookieNumber = cookies.split("; "); for(var i = 0; i < cookieNumber.length; ++i) { var equalPos1 = cookieNumber[i].search("="); if (cookieNumber[i].substring(0, equalPos1) == "firstName") firstName = cookieNumber[i].substring(equalPos1 + 1); if (cookieNumber[i].substring(0, equalPos1) == "lastName") lastName = cookieNumber[i].substring(equalPos1 + 1); if (cookieNumber[i].substring(0, equalPos1) == "pCode") pCode = cookieNumber[i].substring(equalPos1 + 1); if (cookieNumber[i].substring(0, equalPos1) == "bankRoll") bankRoll = cookieNumber[i].substring(equalPos1 + 1); if (cookieNumber[i].substring(0, equalPos1) == "lastVisit") lastVisit = cookieNumber[i].substring(equalPos1 + 1); } The only one that does not display properly is the variable bankroll. All the others return the proper value. I would like to know how to fix my code so that the value 5000 is displayed. Hi i start of with a some csv data and convert this into an array. The resulting array looks like the following [["Apple", "64"], ["Banana", "20"], ["pear", "12"], ["Orange", "16"]] But i need this to be formatted as below without the quotes around the second value. [["Apple", 64], ["Banana", 20], ["pear", 12], ["Orange", 16]] Im not sure how to achieve this. I guess i need to loop through the array and strip out the quotes but im failing to get this working. Help! I am getting an error: "document.getElementById("gender") is null" Any ideas how I can get this to work? Code: <head> <script type="text/javascript"> var selected = document.getElementById("gender").selectedIndex; var lname = document.getElementById("lastname"); var boyarray=new Array(); boyarray[0]="Joseph James"; boyarray[1]="Robert Michael"; boyarray[2]="Brian Shawn"; boyarray[3]="Joseph Duke"; var boymax=(boyarray.length - 1); var boychoose = Math.round(Math.random() * boymax); var girlarray=new Array(); girlarray[0]="Christine Louise"; girlarray[1]="Cheyenne Lynn"; girlarray[2]="Kelly Anne"; girlarray[3]="Julia Marie"; var girlmax=(girlarray.length - 1); var girlchoose = Math.round(Math.random() * girlmax); function randomname() { if (selected = "2") { alert((girlarray[girlchoose]) + lname); } else if (selected="1") { alert((boyarray[boychoose]) + lname); } else { alert("Please select a gender."); } } </script> </head> <body> <form onsubmit="randomname(this);"> Last Name:<input type="text" name="lastname" id="lastname"/> <br/> Gender: <select id="gender"> <option value="0">Please select a gender</option> <option value="1">Boy</option> <option value="2">Girl</option> </select> <br/> <input type="submit" id="submit" name="submit" value="Submit"/> </form> </body> Someone tell me where I'm going wrong. I'm trying to print out the month/year ? Code: <html><head> <SCRIPT language=JavaScript> var dateNow = new Date(); var monthNow = dateNow.getMonth(); var yearNow = dateNow.getYear(); function MakeArray(n) { this.length = n return this } monthNames = new MakeArray(12) monthNames[1] = "Janurary" monthNames[2] = "February" monthNames[3] = "March" monthNames[4] = "April" monthNames[5] = "May" monthNames[6] = "June" monthNames[7] = "July" monthNames[8] = "August" monthNames[9] = "Sept." monthNames[10] = "Oct." monthNames[11] = "Nov." monthNames[12] = "Dec." function customDate(oneDate) { var theMonth = monthNames[oneDate.getMonth() +1] } </SCRIPT> </head><body><script type="text/javascript"> document.write(theMonth + "/" + yearNow); </script> </body></html> I am working on converting something and this is what I have come up with: http://www.msnsportsnet.com/content/ravenstest.htm The width of the original file was 845 px, I needed to change it to 235 px though. As I have knocked the size down of everything, I noticed the arrows are now not working correctly. The arrow only goes to the right once and to the left once, I need to it to go to the right and left multiple times. Here is the javascript file that I have been working with: Code: // gameday scroller function scrollGameday(dir) { var cssDir= (dir<0) ? 'right':'left'; var scrollWidth = 235; var scrollSpeed = 235; var scrollWrapLeft = parseInt($("#gameScroller").css("left")); if(okScroll == false) { return; } if(cssDir == "left") { if($("#arrowRight").hasClass("disable")) $("#arrowRight").removeClass('disable'); if(currentPane <= 1) { return; } else { scrollWrapLeft = (scrollWrapLeft + (dir * scrollWidth)); okScroll = false; $("#gameScroller").animate({left: scrollWrapLeft+"px"}, scrollSpeed, function() { okScroll = true; }); currentPane = currentPane-dir; if(currentPane <= 1) { if(!$("#arrowLeft").hasClass("disable")) $("#arrowLeft").addClass('disable'); } } } if(cssDir == "right") { if($("#arrowLeft").hasClass("disable")) $("#arrowLeft").removeClass('disable'); if(currentPane >= paneCount) { if(!$("#arrowRight").hasClass("disable")) $("#arrowRight").addClass('disable'); return; } else { scrollWrapLeft = (scrollWrapLeft + (dir * scrollWidth)); okScroll = false; $("#gameScroller").animate({left: scrollWrapLeft+"px"}, scrollSpeed, function() { okScroll = true; }); currentPane = currentPane-dir; if(currentPane >= paneCount) { if(!$("#arrowRight").hasClass("disable")) $("#arrowRight").addClass('disable'); } } } checkCurrentPane(currentPane); } function checkCurrentPane(currentPane) { alert('check'); if(currentPane == 1) { if(!$("#arrowLeft").hasClass("disable")) $("#arrowLeft").addClass('disable'); } else if(currentPane == paneCount) { if(!$("#arrowRight").hasClass("disable")) $("#arrowRight").addClass('disable'); } } $("#gameScroller").each(function (i) { var scrollWidth = 235; var newLeftPos = (i * scrollWidth)+"px"; $("#gameScroller:eq("+i+")").css("left", newLeftPos); var items = $('.game'); $('#gameScroller').css('width', items.length * items[0].offsetWidth + 'px'); $("#arrowLeft").click(function() { scrollGameday(3); return false; }); $("#arrowRight").click(function() { scrollGameday(-2); return false; }); }); if("#gameScroller") { var okScroll = true; var currentPane = 1; var paneCount = Math.ceil(($(".game").length) / 10); if(paneCount <= 1) { $(".arrow").className = $(".arrow").className + ' disable'; } else if (paneCount > 1) { $("#arrowLeft").addClass('disable'); } preScroll(); } function preScroll() { var games = $('.game'); for(n=0; n<games.length; n++) { if(games[n].className.match('active')) { var currFrame = Math.floor(n/10); scrollGameday(-currFrame); } } } This is the CSS file: http://www.msnsportsnet.com/content/ravens.css Thank you very much and any help is much appreciated. Hello, I am researching an issue in a rather big app which displays pdf files in IE window. The issue is that inside javascript code we call 'window.setTimeout( win.focus() ...)' (for the child window), but it doesn't come into focus every time, seems a bit random when it does and does not come into focus. At present I wrote a much smaller app + javascript to reproduce the issue, but it does not manifest in same way. Specifically this is the confusing part: window.setTimeout( function() {win.focus(); win.moveTo( 200 , 200 ); } , 500 , "JavaScript" ); the 'win' does move, but never comes into focus. Any ideas about why the focus function does not accomplish what I'm trying to do? Here's the code of my simplified app + html + javascript: JAVASCRIPT: Code: var win; function f(s) { website="http://machine/apache/jsfnu/mytest" + s + ".txt"; if (!win) win = window.open( website , "thetest" , "toolbar=yes,resizable=yes"); else { win.url = website; } win.navigate(website); win.focus(); window.setTimeout( function() {win.focus(); win.moveTo( 200 , 200 ); } , 500 , "JavaScript" ); } function emitApplet() { document.write("<APPLET CODE=\"mytest.class\" archive=\"mytest.jar,netscape.jar\" NAME=\"myApplet\" MAYSCRIPT HEIGHT=1000 WIDTH=1000> </APPLET>"); } function window_onUnload() { } JAVA code: Code: import netscape.javascript.*; import java.awt.*; import java.awt.event.*; public class mytest extends java.applet.Applet implements ActionListener { Button nextButton; Button prevButton; int _page=1; public void init() { System.err.println("init started"); setLayout(new FlowLayout()); System.err.println("setLayout done"); nextButton = new Button("Next!"); System.err.println("next button created"); prevButton = new Button("Prev!"); System.err.println("prev button created"); add(prevButton); System.err.println("prev button added"); add(nextButton); System.err.println("next button added"); nextButton.addActionListener(this); System.err.println("next button action"); prevButton.addActionListener(this); System.err.println("prev button created"); } public void actionPerformed(ActionEvent evt) { if (evt.getSource() == nextButton) { doButton(++_page); } else if (evt.getSource() == prevButton) { doButton(--_page); } } public void doButton(int page) { JSObject win = JSObject.getWindow(this); JSObject doc = (JSObject) win.getMember("document"); JSObject loc = (JSObject) doc.getMember("location"); String s = (String) loc.getMember("href"); String []args = new String[1]; args[0] = (new Integer(page)).toString(); win.call("f", args); } public void paint (java.awt.Graphics g) { g.drawString("Hello, World9!",50,25); } } HTML: Code: <script type="text/javascript" src="StartTest.js"> </script> <html> <head> <title>try</title> </head> <body bgcolor="#fdf8ed" text="black" language="Javascript" onload="window_onUnload()"> <center> <script type="text/javascript"> emitApplet(); </script> </center> </body> </html> |