JavaScript - Best Way To Display Uninterupted Audio Player Across A Multi-page Website
I am creating a very content rich news/media website that requires an audio player. The audio player should be seen by the user as soon as they enter the website and the playlist should play throughout their time spent at the website and should not be restarted or stopped when navigating the website.
We originally were using a frameset for the audio player, but the fact that none of the pages through out the site could be reached through a link in the URL bar proved to be too much of an issue. So the new idea was to open the audio player in a javascript pop-up window. But because of the nature of the website, we found that it was very common for users to go "back" in their browser to the homepage after they had navigated away, which would cause the pop-up code to be activated again and would make the pop-up reload, interrupting the audio. So then we moved the pop-up code to the splash page so that when you enter the main page, its already open, and it can't be interrupted. But THEN we found that the pop-up window was of course opened behind the main website's window, which made it hidden and useless. So we currently have no solutions! All we need is for this pop-up window to take focus and be the very top window, and once its opened to never be reloaded/refreshed again. Does anyone have a solution?! Any help is appreciated! Similar TutorialsI put together a custom audio player using code from a few players. http://66.147.244.101/~fastlif2/wp-c...mp3player.html The player works in CHROME perfectly. The AUDIO tag supports mp3's in Chrome. However, there are compatibility issues in other browers. The audio tag works in FireFox, but only with ogg files (which I don't have). And IE is pretty useless. So, I need to have the player play in Chrome normally (as it is now). If the browser does not support mp3s or the audio tag, I want to default to my Flash player. And, if flash isn't supported, then I want to have a download link. I thought that if the browser didn't support the audio tag, it would default to the embed code that I have listed in there ... but it isn't working. Odd. Any idea what is wrong? Since I am not a strong javascript programmer, I need some way to check this. Also, there is so much javascript, the I am very hesitant to play with the code anymore (as I may mess it up). Please help Hello to all, Can anyone please assist in the following?: I have an embed code that needs to play only the first 10 seconds of an mp3 or audio file <EMBED SRC="clip.mp3" WIDTH=144 HEIGHT=60 STARTTIME="00:00" ENDTIME="00:10" > Unfortunately all the MP3 is getting streamed and the the STARTTIME and ENDTIME work on Netscape only Is there any way to stop an audio file from streaming after a number of seconds? If there is a way to crop the mp3 during the upload process, I would appreciate your help in this direction Thanks Simon I am working on a website that features a custom javascript enabled audio player with an animated playhead to follow along with the provided spectrogram. An example of this is included below. http://cetus.ucsd.edu/voicesinthesea.../humpback.html I am having difficulty figuring out why the audio/spectrogram player does not work on an iPad. This component was built by a developer who I am not longer in contact with, thus I am in urgent need of some advice/wisdom. Thank you! I have looked all over for an answer to this, but haven't found a definite way to do it yet. I am updating my audio page (a demo track list for getting composing work) and getting rid of my flash audio player in favor of embedding .mp3 files, or adding them with the HTML5 audio tag. What I would like to be able to do is link into the page, and have that link autoplay a specific track out of the 10-20 that I will have on the same page. The problem is I am extremely new to scripting and have no idea where to even start with this. The reason I want it to be able to autoplay specific tracks is so I can market a specific track, and have that person (who is already expecting to hear the music on page load) not have to then look through the track list for that one track I was promoting and click play. Any help would be greatly appreciated, Thanks! ok before i ask my question, please dont tell me to use php...i have my reasons for not doing so...and also, i would like to avoid cookies and ajax....that being said, lets see if you guys can help me out.... ive got a home page with a section where i have links....now, all those links actually go to the same page called services.html ....my problem is this....depending on what link they clicked, the page will display different information...and i cant for the life of me figure out out how to find out which link they clicked from the home page while in services.html....is there a way in my home page to create a variable that is usable on all pages that the person navigates to within my website? like a kind of global or something?? also, is there already a document object that tells me their history of what links they clicked....what im trying to do is contingent on knowing what link they clicked on the home page....basically, services.html has the same links as the home page; however, when i click each one, the innerHTML is changed to display the correect info...i just want to make it so that the home page tells services.html which link was clicked....or if thats not possible, maybe when i click one of the links on the home page, it takes me to services.html and activates one of services.html's links since it has the same links as the home page, except it has them working. now lets also get a little creative...i dont know much javascript, but i do know you can create a new window and hide it...if i create a new window, will it be accessible from another page? because i can put variables in that window maybe or even use the name of the window as a holder...im thinking outside the box here but please help me out...im new to javascript Hello All, I found this awesome upload script and it works perfectly for what I need so far. The one problem is I can't get it to work for multiple (individual files). The script works like a user will click the browse button, select the file, and it auto submits uploading the file. Now the script is setup to handle multiple files selected all at once, but I need separate buttons for each file. So here is the main page Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>HTML5 File API</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="main"> <h1>Upload Your Images</h1> <form method="post" enctype="multipart/form-data" action="upload.php"> <input type="file" name="images" id="images"/> <input type="file" name="images" id="images"/> <input type="file" name="images" id="images"/> <button type="submit" id="btn">Upload Files!</button> </form> <div id="response"></div> <ul id="image-list"> </ul> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="upload.js"></script> </body> </html> Here is the upload.php file Code: <?php foreach ($_FILES["images"]["error"] as $key => $error) { if ($error == UPLOAD_ERR_OK) { $name = $_FILES["images"]["name"][$key]; move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]); } } echo $_FILES['images']['name'][$key]; ?> And the upload.js file Code: (function () { var input = document.getElementById("images"), formdata = false; if (window.FormData) { formdata = new FormData(); document.getElementById("btn").style.display = "none"; } input.addEventListener("change", function (evt) { document.getElementById("response").innerHTML = "Uploading . . ." var i = 0, len = this.files.length, img, reader, file; for ( ; i < len; i++ ) { file = this.files[i]; if ( window.FileReader ) { reader = new FileReader(); reader.onloadend = function (e) { showUploadedItem(e.target.result, file.fileName); }; reader.readAsDataURL(file); } if (formdata) { formdata.append("images[]", file); } } if (formdata) { $.ajax({ url: "upload.php", type: "POST", data: formdata, processData: false, contentType: false, success: function (res) { document.getElementById("response").innerHTML = res; } }); } }, false); }()); I'm good with php, but don't know much with javascript and jquery so I don't really know how this works. Is there a way to adjust this so the multiple file inputs will upload. Right now it will only upload the first one. Here is it working. http://www.skafreaks.com/new2/upload/ Thanks for any help SkaFreaks i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine. the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same?? this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state. I don't want the city option to change upon a normal page refresh. how do I go about this? below are the city, hotel select options & iframe Code: <form name="hotelslist" id="hotelslist"> <select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();"> <option value="Baddeck">Baddeck</option> <option value="Banff">Banff</option> </select> <select id="hotelnames" name="hotelnames" onChange="loadHotel();"> <option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option> </select> </form> <iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe> below is my javascript functions Code: function loadHotel() { var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value; window.frames["hotelframe"].location = destURL; } var i; function hotel_list(i){ var hotelslist = document.getElementById("hotelslist"); hotelslist.hotelnames.options.length=0; switch(i) { case 0: //Baddeck hotelslist.hotelnames.options[0] =new Option('Inverary Resort, Baddeck','http://www.test0.com'); break; case 1: //Banff hotelslist.hotelnames.options[0] =new Option('Banff Caribou Lodge & Spa','http://www.test1.com'); hotelslist.hotelnames.options[1] =new Option('Banff Ptarmigan Inn','http://www.test2.com'); hotelslist.hotelnames.options[2] =new Option('Banff Rocky Mountain Resort','http://www.test3.com'); hotelslist.hotelnames.options[3] =new Option('The Rimrock Resort','http://www.test4.com'); hotelslist.hotelnames.options[4] =new Option('Fairmont Banff Springs','http://www.test5.com/'); break; } } can some one please advise on a cross browser solution? thanks in advance. Omar. Hi, I am Aditya. I am explaining below the exact scenario where I need the help: I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text. Now, I need help for the below issues: 1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages. 2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page. I am new to web development, so may be that these questions are too simple. But, I need some help from you. Waiting for your reply, Thanks, Aditya Hi All, Im new to this forum...need some of your help and advice. I have a js code like this : <script type="text/javascript"> <!-- var sipPos = 0; $(document).ready(function() { $("#panel-tab").click(function(e) { //if(autoTimer) clearTimeout(autoTimer); //autoTimer = null; e.preventDefault(); $("#panel").animate({ left: sipPos }, 1764, 'linear', function() { if(sipPos == 0) { sipPos = -856; } else { sipPos = 0; } }); }); }); --> </script> what it does is that it hide and show a panel by slidint it to the left. But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this : <script type="text/javascript"> <!-- var sipPos = 0; $(document).ready(function() { var autoTimer = null; autoTimer = setTimeout(function(){ $("#panel").animate({ left: sipPos }); autoTimer = setTimeout(function(){ $("#panel").animate({ left: sipPos = -856 }); }, 2000); },1000); $("#panel-tab").click(function(e) { //if(autoTimer) clearTimeout(autoTimer); //autoTimer = null; e.preventDefault(); $("#panel").animate({ left: sipPos }, 1764, 'linear', function() { if(sipPos == 0) { sipPos = -856; } else { sipPos = 0; } }); }); }); --> </script> But when the panel finished showing the button to open it again doesn't work...any help please..really urgent. thks //Sam Hi there! I am using GlassBox "http://www.glassbox-js.com/" As a light box on a website. Basically, You click an thumbnail image, and a window pops up with a larger version of that image. Now originally, the window opened X number of pixels from the top of the page. However, My thumbnail images were located mid page, so when you clicked on one, the window would open at the top of the page and the user would not see it unless they scrolled up. So I attempted to modify the script so that it would get the users page width/height and display it directly in the center no matter the position. Now my problem is that the script only works when the user has already scrolled down. So if the page is scrolled all the way to the top, and you click on a thumbnail, the window will not open center screen. Here is an example: http://synaxis.pcriot.com/ When the page loads, DO NOT scroll it, and click on the image. You will see the window pop up, and not centered, like it should be. However, now if you scroll down, and click the image again, you see that it is now centered. I also noticed that when the page is scrolled up, and the image does not center, it always is placed below the thumbnail image, or otherwise where ever the DIV is located. It normally located under the image, but if i place the DIV at the top of the page then the window will pop up there. And this does happen on every browser that I have tested, Firefox, IE, and Chrome. So, I am pretty much stumped as to why this is happening. If anyone can shed some light I would be very grateful. Thank You Here is a link to the original code: http://synaxis.pcriot.com/javascript...ox/glassbox.js And modified code: http://synaxis.pcriot.com/javascript...ox/glassbox.js The modified code is at the very bottom of the script. Original Code: Code: /** * @public */ if ( typeof($) == 'undefined' ) { $ = function (id) { return document.getElementById(id); } } Modified Code Code: /** * @private */ var removeElement = function(id) { var Node = document.getElementById(id); Node.parentNode.removeChild(Node); } /** * @private */ var getDocHeight = function() { var db = document.body; var ddE = document.documentElement; return Math.max( db.scrollHeight, db.offsetHeight, db.clientHeight, ddE.scrollHeight, ddE.offsetHeight, ddE.clientHeight ); } /** * @public */ if ( typeof($) == 'undefined' ) { $ = function (id) { return document.getElementById(id); } } Dear all, MAIN QUESTIONS : QUESTIONS for www.cyoffshore.byethost12.com/feedback4test.html I designed the Contact Us (Feedback) page of my website but something goes wrong. I would like to set an email address or some email addresses where the visitors can find me. Now, this function does not work! I would also like the users / visitors who complete and submit the (my) Contact Form, to receive an auto-confirmation to their email which will confirms that they have addressed to me with their details (their name, address, tel ,etc) according to their input into the fields and options from the (my) Contact form and if they would like to see their written request (what they have written to me if they did), they could use an option button from the (my) Contact Form. Actually the details of their written request will depend of what they would like to choose (depends on their choice). According to the submitted Contack Form, generally many users take the advantage of the Contact Us Forms where they send spam emails via the Contact Form. This might be avoid by the usage of the free tool: http://www.google.com/recaptcha Below is the url of the feedback.html page of my website. I have created a copy of the same and I renamed it to: feedback4test.html for testing purposes. www.cyoffshore.byethost12.com/feedback4test.html Here is the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <!-- this template was designed by http://www.tristarwebdesign.co.uk - please visit for more templates & information - thank you. --> <head> <title>cyproservices</title> <!-- change to whatever you want as the title for your website --> <meta name="description" content=" " /> <!-- enter a description for your website inside the " " --> <meta name="keywords" content=" " /> <!-- enter a a string of keywords that relate to your website inside the " " --> <meta http-equiv="Content-Language" content="en-gb" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="headercont"> <div id="header"> <h1><span>cyproservices</span></h1> </div> </div> <div id="menucont"> <div id="menu"> <ul> <li><a title="link one" title="home" href="index.html">ABOUT CYPRUS</a></li> <li><a title="link two" href="ourservices.html">OUR SERVICES</a></li> <li><a title="link three" href="offshorejurisdictions.html">OFFSHORE JURISDICTIONS</a></li> <li><a title="link four" href="fees.html">PRICES</a></li> <li><a class="active" href="feedback.html">CONTACT US</a></li> </ul> </div> </div> <div id="maincont"> <div id="main"> <h1>Feedback</h1> <p style="margin-top: 0; margin-bottom: 0" align="justify"> <font size="3" face="Book Antiqua" color="#FF0000"> Tell me what you think about my website. I welcome all of your comments and your suggestions.</font></p> <form method="POST" action="--WEBBOT-SELF--" onSubmit="location.href='../_derived/nortbots.htm';return false;" name="SENDEMAIL" webbot-onSubmit> <!--webbot bot="SaveResults" u-file="C:\Users\antonis\Documents\My Documents\My webs\cyproservices\_private\formresults.csv" s-format="TEXT/CSV" s-label-fields="TRUE" b-reverse-chronology="FALSE" s-date-format="%d %b %Y" s-time-format="%H:%M:%S" s-builtin-fields="REMOTE_NAME REMOTE_USER HTTP_USER_AGENT Date Time" u-confirmation-url="confirm.htm" s-email-address="georgeashiotis@yahoo.com" s-email-format="TEXT/PRE" startspan --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot bot="SaveResults" endspan i-checksum="43374" --><p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua"> What kind of comment would you like to send?</font></strong></p> <dl> <dd> <p align="justify" style="margin-top: 0; margin-bottom: 0"><font color="#666666" face="Book Antiqua"><strong><input type="radio" name="MessageType" value="Complaint">Complaint <input type="radio" name="MessageType" value="Problem">Problem <input type="radio" checked name="MessageType" value="Suggestion">Suggestion <input type="radio" name="MessageType" value="Praise">Praise</strong></font></dd> </dl> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua"> Subject:</font></strong></p> <blockquote> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="26" maxlength="256" name="Subject"></p> </blockquote> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua"> Enter your comments in the space provided below:</font></strong></p> <dl> <dd> <p align="justify" style="margin-top: 0; margin-bottom: 0"><textarea name="Comments" rows="5" cols="42"></textarea></dd> </dl> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong><font color="#666666" face="Book Antiqua"> Tell me how to get in touch with you:</font></strong></p> <dl> <dd> <table> <tr> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong> <font color="#666666" face="Book Antiqua">Name:</font></strong></td> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="Username"></td> </tr> <tr> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong> <font color="#666666" face="Book Antiqua">E-mail:</font></strong></td> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="UserEmail"></td> </tr> <tr> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong> <font color="#666666" face="Book Antiqua">Tel:</font></strong></td> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="UserTel"></td> </tr> <tr> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><strong> <font color="#666666" face="Book Antiqua">Fax:</font></strong></td> <td> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="text" size="35" maxlength="256" name="UserFAX"></td> </tr> </table> </dd> </dl> <p align="justify" style="margin-top: 0; margin-bottom: 0"> <strong><font color="#666666" face="Book Antiqua"> </font></strong><p align="justify" style="margin-top: 0; margin-bottom: 0"> <strong><font color="#666666" face="Book Antiqua"> <input type="checkbox" name="ContactRequested" value="ContactRequested"> Please contact me as soon as possible regarding this matter.</font></strong><p align="justify" style="margin-top: 0; margin-bottom: 0"> <p align="justify" style="margin-top: 0; margin-bottom: 0"><input type="submit" value="Submit Comments"> <input type="reset" value="Clear Form"></p> </form> </li> </ul> </td> </tr> </table> </div> </div> </div> <div id="footercont"> <div id="footer"> <div id="footerleft"> <p><a title="back to top" href="#headercont">^ back to top</a></p> </div> <div id="footerright"> <p>template design by <a title="derby web design" href="http://www.tristarwebdesign.co.uk">tristar web design</a></p> </div> </body> </html> </body> </html> According to the above CODE , I would like to inform you that I've just done a copy and paste to the above FORM from an other website of mine which is working properly, meaning that I do receive emailS from the users/ visitors when they fill and submit the (my) Contact Form. . This website is www.cypruspainters.net and the related web link is: http://cypruspainters.net/feedback2.htm The related CODE of the secondary website which I have copied and pasted the above code is the following CODE: : Code: <html> <head> <meta content="text/html; charset=windows-1252" http-equiv="Content-Type"> <meta content="en-us" http-equiv="Content-Language"> <title>Feedback2</title> <meta name="Microsoft Theme" content="pixel 011"> </head> <body background="_themes/pixel/pixbkgnd.gif" bgcolor="#FFFFFF" text="#000000" link="#6666CC" vlink="#999999" alink="#663333"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"> <tr> <td width="49" colspan="2" align="center"> <p style="margin-top: 0; margin-bottom: 0"> <a href="http://www.agora-gallery.com/" rel="nofollow" target="_blank"> <img border="0" src="photogallery/logoForLinks2.gif" hspace="3" width="125" height="78"></a></p> </td> <td align="center" width="907"><p style="margin-top: 0; margin-bottom: 0"> <img border="0" src="HEADERS/feedback2.gif" width="621" height="60"></td> </tr> <tr> <td width="882" colspan="3" style="border-bottom-style: none; border-bottom-width: medium"> <p style="margin-top: 0; margin-bottom: 0"></td> </tr> </table><table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="border-bottom-style: solid; border-bottom-width: 1" align="right"> <h4 style="margin-top: 0; margin-bottom: 0"> </h4> </td> </tr> </table><table border="0" cellpadding="0" cellspacing="0" width="727" height="78"> <tr> <td style="border-style: none; border-width: medium" valign="top" width="140"> <p> <!--webbot b-include-home="TRUE" b-include-up="FALSE" bot="Navigation" s-orientation="vertical" s-rendering="graphics" s-theme="nature 100" s-type="siblings" --> </p> <p><br> </p> <p> </p> </td> <td style="border-style: none; border-width: medium" valign="top" width="3"> <p></p> </td> <td height="100%" style="border-style: none; border-width: medium" valign="top" width="584"> <h3 align="justify" style="margin-top: 0; margin-bottom: 0"> <font color="#FF0000" face="Book Antiqua" size="3">Tell me what you think about my website. I welcome all of your comments and your suggestions.</font></h3> <h1><b><b><b><b><b>Contact Us:</b></b></b></b></b></h1> <form action="test.mf" method="post"> Your Name:<br /> <input name="Name" size="20" type="text" value="" /><br /> <br /> Email:<br /> <input name="Email" size="20" type="text" value="" /><br /> <br /> Comments:<br /> <textarea cols="40" name="Comments" rows="10"></textarea><br /> <br /> <script src="http://api.recaptcha.net/challenge?k=6LfxMwYAAAAAAM8fEdeJUlJzGmueIL9-gDhnUdpo " type="text/javascript"></script> <noscript> <iframe frameborder="0" height="300" src="http://api.recaptcha.net/noscript?k=6LfxMwYAAAAAAM8fEdeJUlJzGmueIL9-gDhnUdpo " width="500"> </iframe><br> <textarea cols="40" name="recaptcha_challenge_field" rows="3"> </textarea> <input name="recaptcha_response_field" type="hidden" value="manual_challenge"></noscript><input type="submit" value="Submit Form" /> </form> </td> </tr> </table></td> </tr> </table></td> </tr> </table> <blockquote> </blockquote> <p> </p> <p style="margin-top: 0; margin-bottom: 0"> </p> <p style="margin-top: 0; margin-bottom: 0"> <a href="index.htm"><img align="right" border="0" height="40" src="images/Press/home3.gif" width="40"></a></p> <p style="margin-top: 0; margin-bottom: 0"> </p> <table border="0" cellpadding="0" cellspacing="0" width="746" height="0%" style="border-collapse: collapse"> <tr> <td valign="baseline" width="746"> <p align="right" style="margin-top: 0; margin-bottom: 0"> <a href="Links.htm"> <img border="0" src="images/Press/back.gif" width="47" height="29"></a><a href="feedback2.htm"><img border="0" src="images/Press/top.gif" width="40" height="29"></a></td> </tr> </table></body> </html> You can email me at: antonis20032002@yahoo.gr and I can reply to you by attaching, uploading and sending my www.cyoffshore.byethost12.com website or/ and www.cyoffshore.byethost12.com/feedback4test.html (Contact Us Form) to your email in order to investigate the case! SECONDARY QUESTIONS : ADDITIONAL QUESTIONS for www.cypruspainters.net/feedback2.htm under your consideration: Firstly, when I visit my website a pop up page appears which is very annoying for the visitors! The url of the pop up is: http://www.freelotto.com/register.as...&affiliateid=3 Another issues are : According to these issues, I have attached the screenshots and the text below: The screenshots below are refered to my previous software which was FRONTPAGE. Now I am using a substituted program which is Microsoft Expression Web 3. The problem is when I would like to use a Captcha image to block form spam and include this setting in my test.mf file (see attached screenshot -test.mf file), then @recaptchaFailPage is pointing to the page I want the visitor redirected to should they enter the wrong text from the image and does not work (see attached screenshot - recaptchaFailPage). In addition, we can add more fields to Misk Contact Us.htm Form (see attached screenshot- Misk Contact Us.htm Form) and the file test.htm is merely an example of what can be done! I created under my website a web link www.cypruspainters.net/MiskMailForm.htm with 3 images to look over the guidelines describing what is supported by my hosting provider and it will help you setup any form with their Mail Form service. Another issue, as instructed in the pdf, my hosting provider provides a Mail Form service which I can setup a confirmation page to notify people of their form being submitted successfully within the test.mf file. My confirmation page is listed as: @redirPage=confirm2.htm within the test.mf file. This is merely a redirect and will not pass Form Information to the page in order to show people what was submitted. Currently this might not be a feature of my hosting provider Mail Form service. But I am not sure! According to the attached screenshot- confirm2.htm , could you make the necessary changes to confirm2.htm in order to notify people of their form being submitted successfully with a more detailed and presentable way, for example, showing what the visitors have requested (visitors input), their details, their comments, etc and at the bottom maybe will be better if we would add a web link back to the Form! You can email me at: georgeashiotis@yahoo.com and I can reply to you by attaching, uploading and sending my www.cypruspainters.net/index.htm website or/ and www.cypruspainters.net/feedback2.htm (Contact Us Form) to your email in order to investigate the case! Thanks! Antonis Is there an easy way of creating one file with the website menu code that is used on each page of a website? At present I use frames which work well except search engines don't direct through the frameset so only the content is loaded not the menu. Thanks in advance Hi There, I am attempting to do a site which is of a similar format to a TV listings website. Each day's schedule will be on a different HTM page (contained within an iFrame), and I would like it to display the current day's schedule on the appropriate day. I have searched the forum, but can't find anything exactly like this (maybe I'm searching for the wrong thing), so any answers greatly appreciated. Thanks, Roz I've been told by many reliable sources that getting people to 'like' your site on Facebook is a great way of increasing your site traffic and getting a site ranked higher on Google and other search engines. However, it is hard work to get it implemented correctly. What you want is to have each page individually 'liked' rather than the site as a whole. To do that can take a lot of time-consuming fiddling around. We've created a simple piece of Javascript that allows you to create a custom 'like' button on each page of your site. Because we've had some help from other members with some bits and pieces of Javascript coding, it only seems fair to share something in return. Prerequisites You will need to get a Facebook Application ID from Facebook themselves. This is a unique Application ID for your domain. The easiest way to get one of these is to go to http://developers.facebook.com/docs/.../plugins/like/ and enter the details for your domain. Then click on 'GET CODE' and copy the 15 digit number from #appId. You then paste this into the Javascript as shown below. Adding the Facebook 'like' button to each page - changes to HTML In the <head> section of your HTML, add the following piece of code: Code: <script type="text/javascript" src="SocialMedia.js"></script> <script type="text/javascript"> FacebookSetup('Your page title goes here', 'image-to-show-on-Facebook.jpg'); </script> At the point on the page where you actually want the 'Like' button to appear, you then add the following piece of code: Code: <script type="text/javascript"> FacebookLike(); </script> The JavaScript Now create a JavaScript file called SocialMedia.js: Code: var facebookAppID = "xxxxxxxxxx" function FacebookSetup(title, image) { var url=window.location.host + window.location.pathname; document.write("<meta property='og:title' content='" + title + "' />"); document.write("<meta property='og:type' content='article' />"); document.write("<meta property='og:url' content='" + url + "' />"); document.write("<meta property='og:image' content='" + hostname + "/images/" + image + "' />"); document.write("<meta property='og:site_name' content='" + sitename + "' />"); document.write("<meta property='fb:admins' content='" + facebookAppID + "' />"); } function FacebookLike() { var facebook="http://www.facebook.com/plugins/like.php?href=" + url + "&layout=standard&show_faces=false&width=250&action=like&font&colorscheme=light&height=35"; document.write("<iframe src=" + facebook + " scrolling=no height=35 frameborder=0 style=border:none; overflow:hidden; width:250px; height:35px; allowTransparency=true></iframe>"); } Change the value in the variable facebookAppId on line one to your Application ID (as explained in the prerequisites section above). What happens once you've implemented this? Once you've implemented this, you should see a LIKE button on your page. If you are a Facebook user and have cookies set to always log you in, you'll find that when you click on this LIKE button, a link to your page will appear on your Facebook page, along with a thumbnail photograph as specified by you when you called FacebookSetup in your HTML code. Other people who follow you on Facebook will then also have the link to your site appearing on their News Feed. If you are not logged in when you click on the LIKE button, you will be prompted to log on to Facebook before the information appears on your News Feed. What are the benefits of using JavaScript to do this, rather than writing the HTML code for each page? Many sites have created a blanket site-wide 'LIKE' button and embedded it into their HTML. Whilst this is easy, it is limiting - the LIKE button always has the same title, the same picture and sends you to the same page on your website. Of course, it is possible to write custom HTML for each page, but this can soon get messy and then becomes more difficult to maintain. As an alternative, this JavaScript is simple and tidy. The code makes it simple to create unique Facebook 'likes' for each page, with custom text and custom images. It also keeps your HTML tidy, thereby making it easy to maintain in the future. Hope this helps, folks. When I hit the submit button, the result are display on a new page. how do I force it to stay on the same page, here's my code. Code: <HTML> <HEAD> <TITLE>Test Input</TITLE> <script type="text/javascript"> function addtext() { var newtext = document.myform.inputbox.value; document.writeln(newtext); } </script> </HEAD> <BODY> <FORM NAME="myform">Enter something in the box: <BR> <INPUT TYPE="text" NAME="inputbox" VALUE=""> <INPUT TYPE="button" NAME="button" Value="Check" onClick="addtext()"> </FORM> </BODY> </HTML> any comments or suggestions would be greatly appreciated. javascript2.js Code: function displayMessage(msg) { // Open a new window var msgWindow = window.open('', 'Message'); // Write message in the new Window msgWindow.document.write(msg); // Raise this window, in case it's not visible msgWindow.focus(); } //Enter total number of questions: var totalquestions=13 var correctchoices=new Array("a","a","b","c","b","c","a","a","b","c","a","b","b"); var correctanswers=new Array("memory locations","_ underscore","x=5+5;","20","Else","lose win","ticker = ticker + 1;","Ticker = ticker + 1;","300.000","Jonathon \b","var","var counter;","var mark = 50, 70"); function gradeit(){ var actualchoices=new Array() var msg1=new Array() var correctanswersno=0 var t=0 var displaycorrectanswers="" for (q=1;q<=totalquestions;q++){ var thequestion=eval("document.Questionform.q"+q) for (c=0;c<thequestion.length;c++){ if (thequestion[c].checked==true) actualchoices[q]=thequestion[c].value } if (actualchoices[q]==correctchoices[q]){ msg1[t]=q+")"+" Correct"; correctanswersno = correctanswersno + 1; t = t + 1; } else { msg1[t]=q+")"+" Incorrect: <br>Correct Answer: "+correctchoices[q]+") "+correctanswers[q]; t = t + 1; } } for (p=0;p<=12;p++){ displaycorrectanswers+="<br>"+msg1[p]; } var msg="Sco "+correctanswersno+"/"+totalquestions+" <br><br>Marks: "+displaycorrectanswers; displayMessage(msg); } Basically on my index page it has a button which when clicked makes use of gradeit(). Currently this then used displayMessage(msg) which opens a new window and displays the message. However, what I want it to do is to open another created html page e.g. answer.html and then for this page to display the message. How do i do this? Hi. I am pretty sure this requires js, but if not and I am posting in the wrong section, I am sorry. Let me try to explain my situation so you know what i'm trying to accomplish. I am hosting a site on a home pc. My isp blocks inbound port 80 so I use no-ip services and port 80 redirect and cloak the address because it displays my ip instead of the domain name. For example, without the cloak it will show http://xxx.xxx.xxx.xxx:81/index.php instead of http://mydomain.com/index.php I would like to display the current page the user is on somewhere on the page. Example: You are currently viewing index.php How would I be able to accomplish this? Currently the page has some divs' displays set to none. When a user clicks an anchored link, it displays the appropriate div. Here is the script I'm currently using, which works fine: Code: function showApp(whichApp) { document.getElementById('dTips').style.display='none'; document.getElementById('dCaseStudies').style.display='none'; document.getElementById('dWebinars').style.display='none'; document.getElementById('dReports').style.display='none'; document.getElementById('dDigimags').style.display='none'; document.getElementById('dPodcasts').style.display='none'; document.getElementById('dNews').style.display='none'; document.getElementById('dCalendar').style.display='none'; if (document.getElementById) { document.getElementById(whichApp).style.display='block'; } } Here's how I call it within the page: Code: <a href="javascript:showApp('dTips')">Tips</a> Is there any way to modify it so that if the user clicks a link on a different page, it goes to the APPS page and displays the requested div? If not, is there another way to accomplish this task? |