JavaScript - Building My First Widget: Help Form
I work for a university in Texas, and recently my boss indicated he wanted me to build a "help button" widget for our computers. We run both Mac and Windows, and will be upgrading to Windows 7 soon, as I understand it supports widgets. According to the guide I'm working my way through, Widgets can built using a combination of HTML and Javascript. While I know HTML, I know next to nothing about Javascript, hence, my question. Here's what I need the script to do: Pull the logged in username, pull the machine name, pull the time and date, then throw up a dialogue box which will send everything to an e-mail address/server. Does anyone know a spot for me to begin? I must confess, I'm a little befuddled by Javascript.
Thanks Similar TutorialsI have tried using Microsofts translator widget but it messes up my menu that I wish it to sit beside, the widget is almost twice the height if my menu bar. I am after a widget that is just text and the user clicks it to open up a select language box. Does anyone have other widgets they use that is based on a single line selector not more than say 15px high or some thing like that ? Hello, Im a coding noob and trying to make this widget display in 3 columns. Can some one help me? I am able to do it with simple css modifications, but the container still only shows up as 1 column rather than 3. Any ideas? Code: <!-- Show static HTML/CSS as a placeholder in case js is not enabled - javascript include will override this if things work --> <style type="text/css" media="screen"> .gr_custom_container_1318614690 { /* customize your Goodreads widget container here*/ border: 1px solid gray; -moz-border-radius:10px; -webkit-border-radius:10px; padding: 10px 5px 10px 5px; background-color: #FFFFFF; color: #000000; width: 300px } .gr_custom_header_1318614690 { /* customize your Goodreads header here*/ border-bottom: 1px solid gray; width: 100%; margin-bottom: 5px; text-align: center; font-size: 120% } .gr_custom_each_container_1318614690 { /* customize each individual book container here */ width: 100%; clear: both; margin-bottom: 10px; overflow: auto; padding-bottom: 4px; border-bottom: 1px solid #aaa; } .gr_custom_book_container_1318614690 { /* customize your book covers here */ overflow: hidden; height: 60px; float: left; margin-right: 4px; width: 39px; } .gr_custom_author_1318614690 { /* customize your author names here */ font-size: 10px; } .gr_custom_tags_1318614690 { /* customize your tags here */ font-size: 10px; color: gray; } .gr_custom_rating_1318614690 { /* customize your rating stars here */ float: right; } </style> <div id="gr_custom_widget_1318614690"> <div class="gr_custom_container_1318614690"> <h2 class="gr_custom_header_1318614690"> <a href="http://www.goodreads.com/review/list/6131699-kevin?shelf=read&utm_medium=api&utm_source=custom_widget" style="text-decoration: none;">Kevin's bookshelf: read</a> </h2> <div class="gr_custom_each_container_1318614690"> <div class="gr_custom_book_container_1318614690"> <a href="http://www.goodreads.com/review/show/202292893?utm_medium=api&utm_source=custom_widget" title="The Great Gatsby"><img alt="The Great Gatsby" border="0" src="http://photo.goodreads.com/books/1273944449s/4671.jpg" /></a> </div> <div class="gr_custom_rating_1318614690"> <img alt="3 of 5 stars" height="15" src="http://d16kthk4voxb3t.cloudfront.net/images/layout/stars/red_star_3_of_5.png?1318545374" title="3 of 5 stars, liked it" width="75" /> </div> <div class="gr_custom_title_1318614690"> <a href="http://www.goodreads.com/review/show/202292893?utm_medium=api&utm_source=custom_widget">The Great Gatsby</a> </div> <div class="gr_custom_author_1318614690"> by <a href="http://www.goodreads.com/author/show/3190.F_Scott_Fitzgerald">F. Scott Fitzgerald</a> </div> </div> <div class="gr_custom_each_container_1318614690"> <div class="gr_custom_book_container_1318614690"> <a href="http://www.goodreads.com/review/show/202292900?utm_medium=api&utm_source=custom_widget" title="Where the Sidewalk Ends"><img alt="Where the Sidewalk Ends" border="0" src="http://photo.goodreads.com/books/1168052448s/30119.jpg" /></a> </div> <div class="gr_custom_rating_1318614690"> <img alt="5 of 5 stars" height="15" src="http://dkt27ch3b0vq7.cloudfront.net/images/layout/stars/red_star_5_of_5.png?1318545374" title="5 of 5 stars, it was amazing" width="75" /> </div> <div class="gr_custom_title_1318614690"> <a href="http://www.goodreads.com/review/show/202292900?utm_medium=api&utm_source=custom_widget">Where the Sidewalk Ends</a> </div> <div class="gr_custom_author_1318614690"> by <a href="http://www.goodreads.com/author/show/435477.Shel_Silverstein">Shel Silverstein</a> </div> </div> <div class="gr_custom_each_container_1318614690"> <div class="gr_custom_book_container_1318614690"> <a href="http://www.goodreads.com/review/show/202292913?utm_medium=api&utm_source=custom_widget" title="The Alchemist"><img alt="The Alchemist" border="0" src="http://photo.goodreads.com/books/1287827991s/865.jpg" /></a> </div> <div class="gr_custom_rating_1318614690"> <img alt="5 of 5 stars" height="15" src="http://dkt27ch3b0vq7.cloudfront.net/images/layout/stars/red_star_5_of_5.png?1318545374" title="5 of 5 stars, it was amazing" width="75" /> </div> <div class="gr_custom_title_1318614690"> <a href="http://www.goodreads.com/review/show/202292913?utm_medium=api&utm_source=custom_widget">The Alchemist</a> </div> <div class="gr_custom_author_1318614690"> by <a href="http://www.goodreads.com/author/show/566.Paulo_Coelho">Paulo Coelho</a> </div> </div> <div class="gr_custom_each_container_1318614690"> <div class="gr_custom_book_container_1318614690"> <a href="http://www.goodreads.com/review/show/202292927?utm_medium=api&utm_source=custom_widget" title="Slaughterhouse-Five"><img alt="Slaughterhouse-Five" border="0" src="http://photo.goodreads.com/books/1316813479s/4981.jpg" /></a> </div> <div class="gr_custom_rating_1318614690"> <img alt="4 of 5 stars" height="15" src="http://d2owxupnsl35mn.cloudfront.net/images/layout/stars/red_star_4_of_5.png?1318545374" title="4 of 5 stars, really liked it" width="75" /> </div> <div class="gr_custom_title_1318614690"> <a href="http://www.goodreads.com/review/show/202292927?utm_medium=api&utm_source=custom_widget">Slaughterhouse-Five</a> </div> <div class="gr_custom_author_1318614690"> by <a href="http://www.goodreads.com/author/show/2778055.Kurt_Vonnegut">Kurt Vonnegut</a> </div> </div> <div class="gr_custom_each_container_1318614690"> <div class="gr_custom_book_container_1318614690"> <a href="http://www.goodreads.com/review/show/202292969?utm_medium=api&utm_source=custom_widget" title="Of Mice and Men"><img alt="Of Mice and Men" border="0" src="http://photo.goodreads.com/books/1309211906s/890.jpg" /></a> </div> <div class="gr_custom_rating_1318614690"> <img alt="3 of 5 stars" height="15" src="http://d16kthk4voxb3t.cloudfront.net/images/layout/stars/red_star_3_of_5.png?1318545374" title="3 of 5 stars, liked it" width="75" /> </div> <div class="gr_custom_title_1318614690"> <a href="http://www.goodreads.com/review/show/202292969?utm_medium=api&utm_source=custom_widget">Of Mice and Men</a> </div> <div class="gr_custom_author_1318614690"> by <a href="http://www.goodreads.com/author/show/585.John_Steinbeck">John Steinbeck</a> </div> </div> <div class="gr_custom_each_container_1318614690"> <div class="gr_custom_book_container_1318614690"> <a href="http://www.goodreads.com/review/show/202292999?utm_medium=api&utm_source=custom_widget" title="Lord of the Flies"><img alt="Lord of the Flies" border="0" src="http://photo.goodreads.com/books/1165637417s/7624.jpg" /></a> </div> <div class="gr_custom_rating_1318614690"> <img alt="4 of 5 stars" height="15" src="http://d2owxupnsl35mn.cloudfront.net/images/layout/stars/red_star_4_of_5.png?1318545374" title="4 of 5 stars, really liked it" width="75" /> </div> <div class="gr_custom_title_1318614690"> <a href="http://www.goodreads.com/review/show/202292999?utm_medium=api&utm_source=custom_widget">Lord of the Flies</a> </div> <div class="gr_custom_author_1318614690"> by <a href="http://www.goodreads.com/author/show/306.William_Golding">William Golding</a> </div> </div> <br style="clear: both"/> <center> <a href="http://www.goodreads.com/"><img src="http://www.goodreads.com/images/widget/widget_logo.gif" alt="goodreads.com" style="border:0;" /></a> </center> <noscript> Share <a href="http://www.goodreads.com">book reviews</a> and ratings with Kevin, and even join a <a href="http://www.goodreads.com/group/">book club</a> on Goodreads. </noscript> </div> </div> <script src="http://www.goodreads.com/review/custom_widget/6131699.Kevin's%20bookshelf:%20read?cover_position=left&cover_size=small&num_books=6&order=a&shelf=read&show_author=1&show_cover=1&show_rating=1&show_review=1&show_tags=1&show_title=1&sort=date_added&widget_bg_color=FFFFFF&widget_bg_transparent=&widget_border_width=1&widget_id=1318614690&widget_text_color=000000&widget_title_size=medium&widget_width=medium" type="text/javascript" charset="utf-8"></script> Ok so I'm making a music website for a project and we have the official Twitter widget in the sidebar. It is an external javascript file as the website must be XHTML 1.0 compliant. What I'm trying to do is make this dynamic so that when viewing different artist pages, the widget changes to that artist's Twitter Feed. I have gotten this to work when the script was fully on the page, by echoing a PHP variable in the javascript, but when it's external I can't figure it out. The file MUST be external so that it passes the XHTML 1.0 Validator. Here's the widgets code(significantly shortened, the full code is too long to post here): Code: new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 'auto', height: 300, theme: { shell: { background: '#000000', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#ff5454' } }, features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('choiceprize').start(); All we need is to pass a string to the .setUser('choiceprize') here ^ so that instead of 'choiceprize' it is our variable. Any help is appreciated! I've been looking everywhere with no luck, so maybe someone here can help me. If you end up having to code it for me, I'll give you credit and put you in my blogroll. So it's really easy to find a random post widget that just shows a list of links, but that's not what I want. What I want is something that will show only one post at a time with an image and a text exerpt. I also only want it to show posts with the label "favorite products". If you look at my blog now (http://www.orangeraspberrylemonade.blogspot.com), you'll see that there's a section in the sidebar that shows a favorite product and a link to all the posts with that label, but I have to update it manually and therefore only one post is getting attention at any given time. Hey there. first post here. I ran across this google maps widget for an archos 5 internet media tablet. Located he http://www.poorbrothertom.com/blog/c...dget_downloads ZIP file he http://www.poorbrothertom.com/Archos/Google_Maps.zip I've been trying to get this app working, to no avail. I've tried contacting the programmer, and theres been no response, and Im completely stumped on how to get this working. Any help on this code would be absolutely great. Thanks in advance. Hello everyone~ I hope this will be a very simple question for someone on here. I am a current web design/development major at the art institute kansas city, and this has stumped me and my teacher pretty hard... I am trying to implement the window widget javascript like the one found he http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/ Where it looks like windows are opening up on the web page. It gave some fairly specific directions: upload these two files to your server and add these tags to create the functions that are called from the linked files. It sounded fairly simple. I uploaded and linked the two files from my server to the test page I was making, and then created my code and my links (the links call on the code to call on the linked script to open the window with your information.) However, somewhere in the midst of there, something isn't working and I can't figure out what. When I click the link on the test page, instead of opening a window, the link opens with a # in the URL bar after the web address. You can see what I'm talking about he http://zero7starz.com/test/home.html and see the source code and everything. The files that are in my "test" directory are the two files I needed linked, the home.html file, and the file I'm trying to call "Lingo.html". Can anyone on here see what the issue is? Or any other information you need from me I'll be happy to provide, but I wasn't sure what else I needed to include in here besides my source code. Much appreciated! -Jay How do I retrieve input/selections from this calendar widget on this site: moongarm.99k.org
Hi, How can I set the following widget so it opens the links (pages) in a new window? Code: <SCRIPT charset="utf-8" type="text/javascript" src="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822/US/oweg0a-20/8018/9000c5f7-9ce1-4eb6-887f-0491e54add7d"> </SCRIPT> <NOSCRIPT><A HREF="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2Foweg0a-20%2F8018%2F9000c5f7-9ce1-4eb6-887f-0491e54add7d&Operation=NoScript">Amazon.com Widgets</A></NOSCRIPT> Thanks in advance! Regards Rain Lover Hi everyone, I have followed David Power's tutorial on linking to specific tabs in an Accoridion widget. I have got a test page working: http://fuelrecruitmenttest.co.uk/linktest.html which links to specific stories on my news page. My problem is, I'm adding news stories in the accordion panel, so the newest story goes on the top. Javascript counts the top panel as 0, the second panel as 1 etc etc. So if I was to add a new panel, any previous links I have to the top panel would be to the wrong story. My question is, Is there anyway of counting from the bottom panel up? Or any other workaround that people can think of eg: giving each panel a unique identifier so that the links remain the same even when new stories are added. Thanks! Hi All, I have a javascript function which adds a label and value to a select widget in its parent window. The function is working fine in firefox and chrome without any errors or warnings. But it is not working in internet explorer. Please tell me what the issue is. Thanks in advance for your help. Code: function addToParent( formName, selectName, name, label ) { var parent = window.opener; var selectWidget = parent.document.forms[formName].elements[selectName]; if( selectWidget ) { var length = selectWidget.length; selectWidget[length] = new Option( name, label, false, false ); } } When I tried to debug, internet explorer shows an error in the following line Code: selectWidget[length] = new Option( name, label, false, false ); Is there anything wrong with this statement ?? Hi forums, I'm building a website for my class and one of the things I was planning on doing is building a navigation where when you hover over the mouse, depending on which side, I wanted the content to scroll from that particular direction. The problem is, I am terrible at Javascript. I have nothing to work with, just the idea. This is an illustration to what I was referring to. Is there a term for this? All I really need is just something to work with, a redirect to an existing example that vaguely captures this idea along with the source is fine. I tried finding myself, but I only found and worked with one Javascript navigation and it didn't do what I was expecting to do. Any assistance is highly appreciated. Hello, I'm trying to build a simple API - it's running fine in Safari and Firefox but failing in IE and Opera. In order to isolate the problem I've stripped it right back 'til all the methods are just alerting their own name. Safari and Firefox give me loads of alerts, but in Opera and IE I just get one, LMSInitialize() when the page first loads - at least I know the browser is finding the API properly. IE also runs LMSCommit() and LMSFinish() when you close the browser window; that's good, but not enough. Opera doesn't even do that. The trigger for all this is a Flash movie created in Adobe Captivate, and published with a whole lot of its own JS which I can't touch - it's running in an iframe, and it's the parent window which includes the API. I need to work out whether there's an issue in my code, or if it's to do with the movie or the publication settings - that side of things is out of my control. Here's the full code of my test version of the API. I'd really appreciate any comments! Thanks, Ben Code: function SIScormAPI(){ this.version = '1.2'; this.LMSInitialize = LMSInitialize; this.LMSFinish = LMSFinish; this.LMSGetValue = LMSGetValue; this.LMSSetValue = LMSSetValue; this.LMSCommit = LMSCommit; this.LMSGetLastError = LMSGetLastError; this.LMSGetErrorString = LMSGetErrorString; this.LMSGetDiagnostic = LMSGetDiagnostic; } function LMSInitialize(){ var alertStr1 = 'LMSInitialize() - v.'+this.version; alert(alertStr1); } function LMSFinish(){ var alertStr2 = 'LMSFinish()'; alert(alertStr2); } function LMSGetValue(){ var alertStr3 = 'LMSGetValue()'; alert(alertStr3); } function LMSSetValue(){ var alertStr4 = 'LMSSetValue()'; alert(alertStr4); } function LMSCommit(){ var alertStr5 = 'LMSCommit()!!!!!'; alert(alertStr5); } function LMSGetLastError(){ var alertStr6 = 'LMSGetLastError()'; alert(alertStr6); } function LMSGetErrorString(){ var alertStr7 = 'LMSGetErrorString()'; alert(alertStr7); } function LMSGetDiagnostic(){ var alertStr8 = 'LMSGetDiagnostic()'; alert(alertStr8); } API = new SIScormAPI(); Hi, I have an array but I'm not exactly sure how to finish the build using an if statement. I have 6 elements and need the build to load a different top image for each array that loads that matches the specific element. Here is what I have but it only shows the first top image no matter what: PHP Code: <LINK REL=StyleSheet HREF="scrolling_popup/scrolling_popup.css" TYPE="text/css"> <script type="text/javascript" language="javascript" src="scrolling_popup/scrolling_popup.js"></script> <script type="text/javascript" > var array = new Array(); array[0]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/1.jpg" border="0" alt=""></a>'; array[1]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/2.jpg" border="0" alt=""></a>'; array[2]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/3.jpg" border="0" alt=""></a>'; array[3]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/4.jpg" border="0" alt=""></a>'; array[4]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/5.jpg" border="0" alt=""></a>'; array[5]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/6.jpg" border="0" alt=""></a>'; var num=Math.floor(Math.random()*(array.length) ); var html_code = array[num]; if (array[0]) { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop1.png">', html_code); } else if (array[1]) { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop2.png">', html_code); } else if (array[2]) { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop3.png">', html_code); } else if (array[3]) { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop4.png">', html_code); } else if (array[4]) { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop5.png">', html_code); } else { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop6.png">', html_code); } </script> Any ideas? Hey all, I have an issue building a query string. Basically, I have this: /sites?order=site_numper_page=20& But I would like to convert it to this: /sites?order=site_num&per_page=20 I have tried this to check if the current iterator is less than the length of the object and if so, then add the "&", otherwise, don't. But it doesn't seem to work: Code: $.each(query_string, function(key,value){ params += key + '=' + value; if((value + 1) != query_string.length){ params += "&"; } }) Thanks for any response. Hi Peers, i am trying to build a template for my work. 1- it consists of 3 rows of data pulled from a databse based on 3 parameters entered in a form. those 2 rows includes 60 cells each ( 60 columns : 60 months) 2- i will have another 2 empty rows where i have to call another data from another table or enter it manually.. 3- i ll have the last row that will hold calculation results based on the above rows.. Any idea on how to build that ? \please let me know if you need more details or mock up .. it almost like an excel web spreadsheet except that sopme data is pulled directly from a database.. thank you I'm looking at building an interactive desktop gadget for our company computers that functions similar to Clippy (less annoying though). The idea is for users to be able to type in keywords or questions and have the gadget present links to pages on our intranet. So similar to a search engine but more focused on answering questions as opposed to just returning a hundred results. I've got a moderate understanding of java so I know I could do something like IF "Textbox" EQUALS "Keyword" THEN DO "THAT". Need a little more sophistication though, it should be able to accept multiple keywords and weigh the search results accordingly. I'm sort of picturing an updatable XML table like this: KEYWORD This is the result KEYWORD This is the result Or an array in a separate .js file. Maybe there's a better way than that actually but it's what I know. Has anyone got some advice on this? Thanks. So I am working on a fairly difficult project (for my level at least). I actually had this project planned before I even knew JavaScript so I specifically learned JavaScript in order to write this program! Here is my plan: I am writing a javascript program to help students prepare to take an exam (a standardized test). The test consists of 80 questions from various topics in history. The test covers three time spans (0-1000, 1000-1500, 1500-2000) and 4 different question types (ie. politics, culture, economics, foreign relations). Likewise, each question will cover a specific topic, maybe one will be about a specific war and another question will be about a leader. What I want the quiz to do is give a detailed report on the student's strengths and weaknesses. Once the student is done with the quiz and they select "grade" it will take them to the results page which will show them: 1. their score (percent correct) 2. percent correct for each of the time periods. 3. percent correct for each of the question types 4. a recommended chapter reading list based on the questions they got wrong. I did some search on the internet and found a basic script that ive been using. All it does is have the html code for the questions and the, "grade" button only shows the percent correct and which which questions were wrong. Its basically a simple quiz script without any of the advanced features I want. I figure I'll just add the advanced features to this existing script. Here is a link to the example script I am using. So far my script is 100% the same (except different questions and answers). What is the best route to modify that script to add all the features I want. From what I've read on javascript so far. I have to write a function to process each of the elements I want to display on the results page. I have no idea about how to do that though. hello, I have a text input box where users can input values separated by a line break. What I need to do is to take those values and put them all into an array once they hit "submit". I can do this one line at a time, but I would like to be able to do it all in one hit. Can it be done in javascript? thanks in advance... Hi, I'm new to JS and I am trying to build my first script. My problem, is I'm trying to build a multi hide/show script, displaying paragraphs of information. If I want multiple variables for the script do I have to use an array? and if so, how can I construct this array? Here is my script as of now, <!-- // this tells jquery to run the function below once the DOM is read $(document).ready(function() { // choose text for the show/hide link var showText="Resume"; var hideText="Hide"; var profile_showText="Profile"; var profile_hideText="Hide"; // append show/hide links to the element directly preceding the element with a class of "toggle" $(".toggle").prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)'); $(".profile_toggle").prev().append(' (<a href="#" class="profile_toggleLink">'+profile_showText+'</a>)'); // hide all of the elements with a class of 'toggle' $('.toggle').hide(); $('.profile_toggle').hide(); // capture clicks on the toggle links $('a.toggleLink').click(function() { $('a.profile_toggleLink').click(function() { // change the link depending on whether the element is shown or hidden if ($(this).html()==showText) { $(this).html(hideText); } else { $(this).html(showText); } // profile_toggle if ($(this).html()==profile_showText) { $(this).html(profile_hideText); } else { $(this).html(profile_showText); } // toggle the display $(this).parent().next('.toggle').toggle('fast'); // profile_toggle $(this).parent().next('.profile_toggle').profile_toggle('fast'); // return false so any link destination is not followed return false; }); }); }); //--> Right now the script doesn't work with the bottom two variables profile_"ect." Please help, been working on this for sometime and its probably an easy fix for someone experienced. Thanks! |