JavaScript - Litebox Creation For Updating Data
hi,
I want to create a litebox with one or two inputs in it and submit button. These inputs would work in jQuerry to update information in main page.. I see many websites are using them, but i am not so good in javascript if you know any examples of simple litebox which could work with jQuerry, please inform me. All suggestions are welcome. Kind regards, Aurimas. Similar TutorialsI have a website I am currently debugging, http://display.ist-apps.com/. When you select a ski resort, then go on to select a date, the dates relating to that ski resort show. However if you then go back and select another ski resort, the dates do not update they still continue to show the ones from the ski resort you originally selected. This is a debug piece of work I am doing based on something someone else built so it's a bit of a toughie, any help is appreciated. Here is the related (I think) JS file. Code: (function($){$.fn. dynamicResortSelect = function(options) { var defaults = { 'dateFormat' : 'dd/mm/y', 'forceDatePickerZindex' : false, 'uris' : { 'get_availiable_durations' : '/get-availiable-durations', 'get_availiable_start_dates' : '/get-availiable-start-dates'}}; var options = $.extend(defaults, options); var datePickerDrawn = false; var durationsDrawn = false; var currentMonth = ''; var resortTitle = ''; var resorts = []; function _updateDurations(dateText, durationsValue) { $.getJSON(options.uris.get_availiable_durations, {'resort_title': resortTitle, 'start_date': dateText}, function (data) { var options = {0:'Duration...'}; for (var i in data) { options[data[i]] = data[i]+' Nights' } if (durationsValue < 0) { $('.duration_container').addClass('disabled'); $('select[name="duration"]') .selectBox('disable') .selectBox('value', 0); } else { $('.duration_container').removeClass('disabled'); $('select[name="duration"]') .selectBox('options', options) .selectBox('enable') .selectBox('value', durationsValue); } }); } /* function _isValidDate(dates, date) { var formattedMonth = date.getMonth()+1; if (formattedMonth < 10) formattedMonth = '0'+formattedMonth; var formattedDate = date.getDate(); if (formattedDate < 10) formattedDate = '0'+formattedDate; var dateFormatted = date.getFullYear()+'-'+formattedMonth+'-'+formattedDate+' 00:00:00'; return [$.inArray(dateFormatted, dates) != -1]; }*/ function _drawDatePicker(startDate, endDate, dates) { $('.date_picker_conatiner').removeClass('disabled'); $('.date_picker_conatiner .date_picker').removeAttr('disabled').datepicker( { dateFormat: options.dateFormat, minDate: startDate, maxDate: endDate, beforeShow: function() { if (typeof(options.forceDatePickerZindex) == 'number') setTimeout('jQuery("#ui-datepicker-div").css("z-index", "'+options.forceDatePickerZindex+'")', 1); }, beforeShowDay: function(date) { var formattedMonth = date.getMonth()+1; if (formattedMonth < 10) formattedMonth = '0'+formattedMonth; var formattedDate = date.getDate(); if (formattedDate < 10) formattedDate = '0'+formattedDate; var dateFormatted = date.getFullYear()+'-'+formattedMonth+'-'+formattedDate+' 00:00:00'; return [$.inArray(dateFormatted, dates) != -1]; }, onSelect: function(dateText, inst) { _updateDurations(dateText, 0); } }); } function _updateDatePicker(value) { if (datePickerDrawn) $('.date_picker').destroy(); resortTitle = resorts[value]; $.getJSON(options.uris.get_availiable_start_dates, {'resort_title': resortTitle}, function (data) { var startDate = data[0]; var endDate = data[data.length-1]; currentMonth = startDate.substring(5, 7); startDate = _buildDate(startDate); endDate = _buildDate(endDate); _drawDatePicker(startDate, endDate, data); }); return true; } function _buildDate(text) { ret = new Date( text.substring(0, 4), (text.substring(5, 7) - 1), text.substring(8, 10)); return ret; alert('alerting'); } return this.each(function() { var alreadyPopulated = $('select[name="duration"]').val() != 0; $('select[name="first_hotel_id"] option').each(function() { resorts[$(this).val()] = $(this).text(); }); // $('select[name="first_hotel_id"]').selectBox(); $('select[name="first_hotel_id"]').change(function() { var value = $(this).val(); _updateDatePicker(value); /* if (durationsDrawn) $('select[name="duration"]').*/ }); // $('select[name="duration"]').selectBox(); // alert("true"); if (alreadyPopulated) { _updateDatePicker($('select[name="first_hotel_id"]').val()); durationsValue = $('select[name="duration"]').val(); _updateDurations($('.date_picker_conatiner .date_picker').val(), durationsValue); } }); }})(jQuery); Hi Here's what I want: A bracket/tournament creator on my website, so that users can start their own matches and just use my site as "scorekeeper". Here's what I've come up with so far: http://javascript.internet.com/misce...ournament.html provides a basic sketch of what I'm looking for. Can that script be changed so that multiple tournaments/matches can run at the same time. Is it also possible to only allow the participents of that specific tournament to submit the score? I'd really appreciate any help. I'll also be willing to acknowledge whatever help I get on my site, so that you can link to it, if someone wants to see your work. Thanks in advance! Hi, I know that it is possible to create map via javascript, which has some spots used like links. I have 3 images: background, house and man. Also 3 php variables: $man = 'yes'; $background = 'yes'; $house = 'no'; What I need is to make javascript map which would show background(yes) and man (yes). House must be invisible, because I have NO. The problem, that man must appear to 21px width 100px height and be active as a link. If you haven't understood what I want - ask. Now I will try to explain this with example. You have a map with countries. But map is like image and you can't do anything. If variable with country gets value "yes" - the country become active on the map and you can push on it. Thanks in advance... Hello, 1. I have the following script: function selectThis(id){ var locationstring = "process.php?value=" + id; ///// locationstring += "&bs=" + $('#bs_' + id).attr("selectedIndex"); locationstring += "&ad=" + $('#ad_' + id).attr("selectedIndex"); locationstring += "&ns=" + $('#ns_' + id).attr("selectedIndex"); locationstring += "&wt=" + $('#wt_' + id).attr("selectedIndex"); locationstring += "&in=" + $('#in_' + id).attr("selectedIndex"); document.location.href = locationstring; } With it I am getting a string with the value of the clicked button from an array and some other select field values that are listed in the same set of mysql results as the clicked button. BUTTON: <input name="button" type="button" onclick="selectThis('<? echo $rows['id']; ?>');" value=""> At the end of the script the page is redirected to in the script mentioned page with following string: process.php?value=1&bs=2&ad=3&ns=4&wt=5&in=6 (values are not real, so whatever the chosen value of the select field should apear in the link.) THIS WORKS FINE. 2. My problem is following: In order to be able to use var locationstring in other scripts as well I have removed var and have made it global. function selectThis(id){ locationstring = "process.php?value=" + id; ///// locationstring += "&bs=" + $('#bs_' + id).attr("selectedIndex"); locationstring += "&ad=" + $('#ad_' + id).attr("selectedIndex"); locationstring += "&ns=" + $('#ns_' + id).attr("selectedIndex"); locationstring += "&wt=" + $('#wt_' + id).attr("selectedIndex"); locationstring += "&in=" + $('#in_' + id).attr("selectedIndex"); } The problem is that later on when I use locationstring variable in other script I get only first variable in the string process.php?value=1 instead of process.php?value=1&bs=2&ad=3&ns=4&wt=5&in=6 3. Is it possible to make locationstring variable global and in a single line in order to be able to use the full string in other scripts or is there another solution. Thank in advance. I want to create an array of 1 - X (X could be 10, 20, 30 or any number) Then I want to randomly choose a number from 1 - X I now want to remove the random choice - and then do the same again twice Question 1: How do I create the array in the first place? Answer: var x=[0,1,2,3,4,5,6,7,8,9,10]; I'd much prefer it if I could do something like this: var x=[0...10]; This would create the same, except, I don't have to type out all the numbers! And if I needed to increase the number in the array, I could simply just change the last number I've just made the syntax up I was hoping something similar shorthand existed Or do I have to do this by creating a loop? Question 2: how do I pop an item from the middle or somewhere other than the beginning or end? I've googled and all I can find is how to remove the first and last items! The way I see it: - Get a solution for popping from the middle of an array I'm sure I'll find a solution to this if I looked - but is it optimal to be doing it this way? - Instead, maybe I could fill my array in a random order in the first place - and then just pop at the beginning or end?? Which is the best solution? Any code to start me off would be great Thanks OM Hi! I have encountered a problem with IE that I'm simply unable to solve. I have a form where the user can choose different things to input from a drop down list and depending on the choise, different kinds of textboxes of text areas etc. are loaded onto the page with JS. After the user has finished inputing text and submits the form, I read the input with PHP and process it further. Now, this works perfectly in firefox but IE doesn't seem to add the name properties to the elements (both textboxes and text areas) because PHP cannot find them and no info is printed from the input. The creation of the elements (adding them to the page...) works just fine, it's just getting the data from them that's the problem. Since it works in FF I know it's not a PHP problem. I've used the recommended .name to set the property (although I've also tried .setAttribute() etc), yet it still doesn't work. What can I do to solve this? My relevant JS code: Code: function addTextbox(idName, head) { var target = document.getElementById('addThings'); var newDiv = document.createElement("div"); newDiv.id = "container"; newDiv.name = "container"; newDiv.setAttribute("className", "intNew"); //IE newDiv.setAttribute("class", "intNew"); //FF var newTextbox = document.createElement("input"); newTextbox.type = "text"; newTextbox.id = idName; //-- newTextbox.name = idName; //Doesn't work in IE?.. newTextbox.setAttribute("className", "newWidth"); //IE newTextbox.setAttribute("class", "newWidth"); //FF var text = document.createTextNode(head + ":"); target.appendChild(newDiv); newDiv.appendChild(text); newDiv.innerHTML += "<br />"; newDiv.appendChild(newTextbox); newDiv.innerHTML += "<p />"; } (The text area function is the same, more or less) The PHP code, if anyone's interested: Code: if($_POST['createBtn']) { $head = $_POST['head']; //1 $intro = $_POST['intro']; //2 $question = $_POST['question']; //3 $answer = $_POST['answer']; //3 $image = $_POST['image']; //? $author = $_POST['author']; //5 $end = $_POST['end']; //4 //sammanfattning printHTMLTop(9); $today = date('Y-m-d'); $text = <<<END <div class="intContainer"> <div class="intHeadRow"><b>$head </b></div> <div class="stpdIEContainer"> <div class="intTextContainer"> <p /> $intro <p /> END; if($question != "" && answer != "") { foreach($question as $k) { $text .= $k . "<p />"; foreach($answer as $j) { $text .= $j . "<p />"; } } } $text .= <<<END <p /> $end <p /> <i>Skrivet av: $author den $today</i> </div> <!-- intTextContainer --> <div class="intImgContainer"> </div></div> <!-- stpdIEContainer --> </div> <!-- intContainer --> END; //Prints to new file (on server) $file = file_put_contents('interviews/interview01.html', $text); //Set name //Add to DB //print newly created file $page = file_get_contents('interviews/interview01.html'); echo $page; printHTMLBottom(); Hi I am making a PC customization website, And I need help wit hthe inputs where you select the parts for the PC. Anyway, I need help for self updating inputs, Like if a user was to select a socket 775 processor, The form would automatically update the motherboard field from --Select a processor-- to a list of socket 775 motherboards. I am quite new at javascript I have never attempted to do anything like this myself, Although I don't know if this would need some PHP in here as well Anyway thanks in advance, Gergy Hi - I am updating a site for a friend as the original designer has gone missing.. I am no developer by any means but know basic html etc.. I want to change a link in the drop down menu.js file, have opened it in my text editor and changed the link that needs changing to a diff page but it isn't updating on the site - arghhh!! I have notice at the top of the page it has: // QuickMenu Pro, Copyright (c) 1998 - 2003, OpenCube Inc. - http://www.opencube.com does this have anything to do with it? I can't find anything on google - any advice is greatly appreciated. Thanks Hello. I'm creating a simple auto updating script based on PHP and using jQuery to set the interval to 1000 miliseconds. It works in FireFox, as the only one I've tested so far, but in Internet Explorer (Version 7 right now, didn't test others) it just freezes and doesn't auto update. Doesn't auto update either if I refresh the page, so something's messed up here. I'm using the same way of auto updating on other things, such as a chat-page - works on those in all browsers, so I'm kinda on a lost track here. Here's the JavaScript/jQuery: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> function loadContent() { $('#count').load('counter.php', function() { setTimeout("loadContent()", 1000); }); return false; } $(loadContent); And this is what I put on the body of the page: Code: <div id="count"></div> Can anyone see what my problem is? And any workarounds for this? Hi, I am creating a web page which automatically updates one image every 5 seconds. I use ajax to fetch a new img url every 5 seconds, and then update the image by changing img.src. I tested the same (in IE8, firefox) and it worked without any issues in my development server. But, when I try to put it on production server, many people are complaining that they are not able to see any image at all. Code: if (url_received){ var path = url.substring(url.indexOf("/")); var img = document.getElementById("testimage"); img.src = "/test/media/" + path; } I cannot think of a reason why this is failing for others. Is this due to any security issues? If someone helps me out, I would be very thankful. Hello Guys, I have a question here.. I have a scroller on my pages that basically reads a text file and displays.. The problem that I am having is it doesn't update until I reload the page(even though the .txt file updates about every 3 minutes).. I would like it to update when the file has been changed.. Here is my page. PHP Code: <link rel="stylesheet" href="../../css/li-scroller.css" type="text/css"> <script src="../../js/jquery.li-scroller.1.0.js" type="text/javascript"></script> <script type="text/javascript" src="../../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul#ticker01").liScroll(); }); </script> <?php $file = file_get_contents ('playingnow.txt'); ?> <div class="scrollpos"> <ul id="ticker01"> <li><a href="#"><?php Echo $file;?></a></li> <!-- eccetera --> </ul> </div> What can I add to make it go out and reload just the div not the entire page? Please advise.. Resolved
In a form I have two input boxes (ids of return1 and return2) with default values of 0 and a span element (id return3). The span's value is initalized to 0 on page load, and it updates when a button is clicked that calculates x - value of return1 - value of return 2, where x is calculated elsewhere. Form code: Code: Month 1: <input size="7" type="text" value="0" id="return1" name="return_1"> <input type="button" value="Calculate Remaining Amount" onClick="thirdReturn();"> Month 2: <input size="7" type="text" id="return2" value="0" name="return_2"> Month 3: <span style="color:black; font-size:14px;" id="return3"></span> ThirdReturn code: Code: function thirdReturn() { var first_return = document.getElementById("return1").value; var second_return = document.getElementById("return2").value; first_return = first_return.replace(/\,/g,''); second_return = second_return.replace(/\,/g,''); var combined = Number(first_return) + Number(second_return); if (typeof this.remaining_pipp_amount == "undefined") { alert('Please select a Flex option'); } else{ if (combined > this.remaining_pipp_amount){ alert('Return Amount Exceeds Credit Amount'); } else{ var temp = this.remaining_pipp_amount - combined; var third_return_amount = document.getElementById("return3"); third_return_amount.innerHTML = addCommas(Math.round(temp)); } } } I am trying to change it so that if return2 is zero when the button is clicked, return2 = x - return 1. Here is what I have: Code: function thirdReturn() { var first_return = document.getElementById("return1").value; var second_return = document.getElementById("return2").value; first_return = first_return.replace(/\,/g,''); second_return = second_return.replace(/\,/g,''); var combined = Number(first_return) + Number(second_return); if (typeof this.remaining_pipp_amount == "undefined") { alert('Please select a Flex option'); } else{ if (combined > this.remaining_pipp_amount){ alert('Return Amount Exceeds Credit Amount'); } else{ var temp = this.remaining_pipp_amount - combined; if (second_return == 0){ var new_second = document.getElementById("return2") new_second.innerHTML = Math.round(temp); } else{ var third_return_amount = document.getElementById("return3"); //alert (temp); third_return_amount.innerHTML = addCommas(Math.round(temp)); } } } } Does anyone know why this doesn't work or what can be done to fix it? Thank you! Hi guys, I've had a little trouble with this and haven't been able to find answers on google. I'm trying to set up a new window that contains a button. Then, if the user clicks the button, the window would display new information accordingly. I have written a simple test that won't seem to work: Code: <html> <head> <script language="Javascript" type="text/javascript"> var count = 0; function Window() { MyWindow = window.open('', 'myWin', 'height=250,width=250') MyWindow.document.write('<html>') MyWindow.document.write('<head>') MyWindow.document.write('<\/head>') MyWindow.document.write('<body>') MyWindow.document.write('<FORM method="post" name="aname">') MyWindow.document.write('<INPUT type="button" onclick="newfunc()" name="test" value="Click Me"\/>') MyWindow.document.write('<\/FORM>') MyWindow.document.write('<\/body>') MyWindow.document.write('<\/html>') MyWindow.focus() } function newfunc() { count++ MyWindow.document.write(count) } </script> </head> <body> <FORM method="post" name="me"> <INPUT name="opendis" value="Open Window" type="button" onclick="Window()"/> </body> </html> I am probably doing something very wrong. Is there a way for this to work? Thanks! All, first post on the forum. I hope this is relatively simple. I've looked around for the answer, but I thin think the search terms (update onchange event) are a bit too common... Code: document.getElementById("tester").innerHTML= "hello"; document.getElementById("tester").onmouseover = "alert('hello')"; You see I'm trying to change an event like I'd change a property. The first will change the text to hello. I'd like the second to change the onmouseover event to display a hello world alert... but it doesn't seem to do anything. How can I change events? Jason Is there any way that I can make my HTML website STAY updated from a javascript innerHTML or value change? I've only used it a little...
I've done some googling and have come across some information, but I'm not quite sure how to apply it to my problem. I have a PHP page saturna.php with six frames on it using the frameset commands. I would like to somehow make it so that when I click on something in one frame (with one PHP page loaded in it - game.php), it automatically/dynamically updates one of the other PHP pages (inventory.php) in another frame. What will happen is when the thing is clicked on in game.php, an entry will be added to the database, and the second PHP page (which retrieves information from the database) will notice that there is a new relevant record, and will add it to the inventory.php page in the table I have constructed there. From my googling it seems I need to use JavaScript to do this, but I'm not quite sure how - any ideas ? Thanks very much! In the code below I have an iframe that acts as a WYSIWYG editor. On load a link is loaded inside the iframe. When you click the link a div opens that displays the URL of that link. Upon changing the link inside the DIV I want to update the href tag that I clicked. I've experimented with pasteHTML/execCommand("inserthtml") however this only updates the link when you select the text before clicking (as opposed to just clicking on the link), otherwise it inserts a whole new link. I'm trying to get this working across IE, Firefox, Opera, Chrome and Safari. I'd happily pay someone (Paypal) to help me with this. Code: <html> <body> <script language="JavaScript"> // Initialize WYSIWYG function initialise() { // HTML code to paste var html = "<a href='http://www.google.com'>Click Me</a>"; if (detectBrowser() == "ie") { // IE editorContent.document.designMode='on'; // turn on design mode editorContent.document.attachEvent("oncontextmenu", showContextMenu); // add listener for context menu editorContent.document.attachEvent("onclick", showContextMenu); // add listener for context menu // Paste the HTML code in iframe document.editorContent.focus(); range = editorContent.document.selection.createRange(); range.pasteHTML(html); document.editorContent.focus(); } else { // FF, Saf, Chr, Op document.getElementById("editorContent").contentDocument.designMode='on'; // turn on design mode editorContent.document.addEventListener("contextmenu", showContextMenu, true); // add listener for context menu editorContent.document.addEventListener("click", showContextMenu, true); // add listener for context menu // Paste the HTML code in iframe editorContent.focus(); editorContent.document.execCommand("inserthtml", false, html); editorContent.focus(); } } // Show Context Menu function showContextMenu(e) { // Get the URL from the clicked link if (detectBrowser() == "firefox") { url = e.target.href; } else { url = document.getElementById('editorContent').contentWindow.event.srcElement.href; } // Set the URL in the pop-up and load it document.getElementById("theUrl").value = url; document.getElementById("popUp").style.visibility = 'visible'; document.getElementById("popUp").style.display = ''; if (navigator.appName != "Microsoft Internet Explorer") { e.stopPropagation(); e.preventDefault(); } return false; } // Update the URL function updateUrl() { newUrl = document.getElementById("theUrl").value; alert('Update the URL to '+newUrl); /*******************************************/ /* WHAT TO DO HERE TO UPDATE URL IN EDITOR */ /*******************************************/ document.getElementById("popUp").style.visibility = 'hidden'; document.getElementById("popUp").style.display = 'none'; } // Detect browser function detectBrowser() { var userAgent = navigator.userAgent; var browser; if (userAgent.indexOf("MSIE") !=-1) browser = "ie"; if (userAgent.indexOf("Firefox") !=-1) browser = "firefox"; if (userAgent.indexOf("Chrome") !=-1) browser = "chrome"; if (userAgent.indexOf("Safari") !=-1) browser = "safari"; if (userAgent.indexOf("Opera") !=-1) browser = "opera"; return browser; } </script> <div id="popUp" style="width:250px; height:60px; border: 1px solid black; visibility:hidden; display:none; position: absolute; left: 300px; background-color:yellow; padding: 10px"> <form> <input type="text" id="theUrl" size="30"> <p><input type="button" value="Update" onClick="updateUrl()"> </form> </div> <iframe id="editorContent" name="editorContent" width="200" height="200" frameborder="1" onLoad="initialise();"></iframe> </body> </html> I am fairly new to JS so please have patenience with me. What I am codeing is essentialy some digital signaage for my office. I will have a calender that updates through several screens with information in them. The basic page stays the same but the content is loaded into a large iframe in the center of the page and each html file loaded into the iframe is changed using meta tags. This is a touch screen so I want control along the bottom of the screen. I have did this very crudely with css and html. But I would like to refine it a little more with javascript. I want javascript to control the content of the iframe and javascript to control the buttons along the bottom to manual switch to a diffferent screen along with a button that stops the auto reloading of the page. Here is where I am so far. I have the javascript to automatilly change the iframe src but I need help with the nav buttons and the stop button. Right now the nav buttons are still using the regular <a> tags targeting the iframe. Code: <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> <meta name="created" content="Thu, 21 Jul 2011 15:16:57 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <script type="text/javascript"> var frames = Array('cal11,html/', 10, 'cal22.html/', 10, 'cal33.html/', 10, 'cal55.html/', 10 'cal66.html/', 10, 'cal77.html/', 10, 'cal44.html/', 15,); var i = 0, len = frames.length; function ChangeSrc() { if (i >= len) { i = 0; } // start over document.getElementById('frame').src = frames[i++]; setTimeout('ChangeSrc()', (frames[i++]*1000)); } window.onload = ChangeSrc; </script> <title>Calender</title> </head> <body> <div align="center"><iframe src="" name="frame" id="frame" width="900" height="476" frameborder="0" scrolling="no"></iframe> </div> <ul class="solidblockmenu"> <li><a href="calstart.html">Instructions</a></li> <li><a href="cal11.html" target="frame">Month View</a></li> <li><a href="cal22.html" target="frame">Week View</a></li> <li><a href="cal33.html" target="frame">Agenda</a></li> <li><a href="cal55.html" target="frame">Current Projets</a></li> <li><a href="cal66.html" target="frame">Bidding Projects</a></li> <li><a href="cal77.html" target="frame">Open Service Calls</a></li> <li><a href="cal44.html" target="frame">General Information</a></li> <li><a href="??????????" target="frame">Stop Scroll</a></li> </ul> </body> </html> Hi, I'm working on a project that will display a form that takes in the amount of Money I earn in a given month. This value is inserted into the code, and once submitted, a Live Updating value will display how much $ I would have earned so far this month. This counter will work and display much like Gas Pumps increment. So in example: I type in that I make $1,000 per month. Once submitted, the count begins. The code will figure out how much money I will be making every second of the day, and update it live. This value updates live displaying something like $0.0012. If I earn $1 Million per month, then the values would increment much faster. Could anyone give me some input? Thanks |