I have a website with some navigation buttons on top. When one button is clicked I replace it's content with the content of a red button using this code:
document.getElementById('button').innerHTML = '
<a href="javascript:void(0)">
<img src="header/button_active.jpg" border="0" />
</a>'
The original code was enclosed in a DIV and I cant just change the img src because the original code is:
But when the orignal button is clicked, a ajax event goes off and loads the new page without reloading the button.
Using this code a button becomkes red once you click it. This is what I want.
Just one problem: when I click on another button, the first one stays red because it doesn't reload the page. Now I thought, I'll refresh the navigation page using a div and ajax. Code:
What website do any of you recommend for learning Javascript browser compatibility? I'd like to learn more about acceptable javascript programming.
I am using the script below for changing elements content without refreshing my page. Typically it works fine on recent Mozilla and IE releases if they haven't had too many hijacked settings. I know this isn't really much of an excuse for a script not to execute if it is done properly so I am hoping someone here can help me make what I have more compatible with more settings and browsers.
Im not sure if im going about this the right way but what I'm trying to achieve is to have my webpage seperated into two main div's.The first div contains a media player so it cant be refreshed or the media stops.The second div is used to view content.I've used innerHTML to change the content of the second div from links in the first.The problem is the URL displayed doesn't reflect the change in content of the second divI want to be able to load content into the second div using innerHTML while changing the URL so people can link directly to that content
Given some recent success on a simple form validation (mainly due to the kind folks in this forum), I've tried to tackle something a bit more difficult. I'm pulling data down from a database and populating a simple table. I'd like the table to contain 10 entries per page and have the option for the user to scroll through the pages of data without having to go back to refresh the page (I've already pulled all the info I need from the database). So, I've taken a stab at it and this is probably not the best way to do it (so if you have a better idea I'm open), but I think it will work. Right now I'm encountering an 'Object Expected' error and I don't know how to interpret what it's telling me. Code:
What would be the jQuery-based way of refreshing random content that is currently managed by PHP?
PHP Code:
$num = Rand (1,5);switch ($num) {case 1:echo '<div>Random content</div>';break;// and so on...}
I'd like to add the option to refresh this content with jQuery. I'm not sure how this might work (I'm only an amateur coder and not familiar with JS beyond using plugins). Would it be as simple as adding an ID to each div and then somehow displaying a new div at each click of an anchor? It doesn't really need to be random: in number order would be fine. I want to keep the underlying PHP method, or a near equivalent, so that it degrades nicely.
How do I refresh the content in a dialog box ?I embedded a iframe inside the dialog box which contains some form and when clicked on the submit button its redirected to a output data.When I closed the dialog box it still shows the previous output data instead of from How to get back to the form after I close the dialog box?
I am teaching myself javascript and in the course of my experimentation have run into this roadblock: I want to display a styled navigation bar with a button beneath it. When the button is clicked, an onclick event will be triggered and the response of the browser should be to print the word "test" right beneath the button. However, what actually happens is the page blanks out and the word 'test' appears in the upper left corner of the screen.
I have been searching high and low on how to do this and I think I'm at a loss because I'm so unfamiliar with js and ajax.What I would like to do is have just a single div on a page refresh every 5-10 secs; the content of the div shows what users are logged on; the content is generated by a query on my db
<div id="players"><?php $online_query = "SELECT user_log.user_id,user_log.ip,user_log.logged_in,user_log.logged_out,users.username,users.type_id FROM user_log LEFT JOIN users ON user_log.user_id=users.id WHERE user_log.logged_in IS NOT NULL AND user_log.logged_out IS NULL ORDER BY users.username";[code]....
almost all of the google results I got for refreshing a div were for updating dropdown boxes or dealt with some kind of page event...so now I'm at a loss on what else to look for..
I would like to load in content from an xml file, when the user clicks on one of the products from the sidemenu. The content will be an image and text for each type of headphone.I'm stuck on starting off, I'm not sure how to associate the click of one of the models with the correct model in the XML. In other words, in the JS how do I select the content for CX 300 in the same XML if they click on this model, I just need a little orientation please
I've got a web page which uses lots of divs to position the content of the page and I'm using a nice javascript to alter the css of a table of links. The thing is I don't want the table of links to point to an external site but to calla function which will replace the content of a layer... perhaps it's be better if I showed you the code:
I have a problem with changing the pictures in cells in the javascript created table.I need to change the picture in specific cells. Like: 5.th row, 4.th cell and so on.Here is the code:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I'm trying to get this to work. I'm making an multiple uploadscript which shows an loader animation while uploading and after upload the image which has been uploaded.When a file is submitted an <li></li> is added with the loadergif. After uploading I want to change the animation gif with the uploaded image.
Im making a quiz with some javascript and when the user hits submit I want a table cell to display that questions have been missed and to provide a link to the pages that hold the information. Can I do this without using DHTML?
I've got a link that launches a little AJAX application in a window.
Like this:
function launchListener() { var newWindow = window.open("listener.php", "newWindow", "width=300,height=150"); }
Ideally, once this window is loaded, it will sit in the background and wait for stuff to happen. I would like to then change the title bar to denote changes. Simple enough, right?
Anyway, problem is: When the new window launches, its title is not exactly what I assign it in "listener.php" (for instance, "Listener"), but rather "http://155.55.55.55 - Listener" (or whatever). This means that while sitting the taskbar, generally all the user is going to see is a domain name and some dots, rather than what I want them to see.
I have a div with a dynamic ID and content based on a database.I want to replace that ID's content with some content with I collect from the database via PHP.The new content may contain <br />'s.
I am running a website and I want to display many things on the same page. Currently what I have is something like this: [two buttons here][some code here, showing][some code here, hiding]When i click the second button, the hidden code replaces the code that was just showing. The first button then re-hides that code and shows the first code again. What I want to do is combine the two buttons so that when you click the first one, the text and hyperlink will change to display that of the second button. And when you click the button again, it will change to the text and hyperlink of the first button.
check to see if my AJAX select boxes are working for you. The website is: [URL] and there are dropdown select boxes on the right hand side of the travel photo section and also the travel video section.
I've tested these in the following browsers: Mac: Safari 3.2.1, Firefox 3.0.5 Windows: Firefox 2, Firefox 3.0.5, IE6, IE 7
These boxes work fine for me in all the browsers listed above, yet a friend using Windows can't get the drop downs working on either Firefox 3 or on IE 6.
I am using HTML/Javascipt/CSS to maintain a page whereby the content of the page is switched when a user selects a link. An example of the code used is below for your better understanding:
The container in which all of the content is loaded:
I need the page to detect which "sub" is being displayed and change the style of that particular link so the user can see which is the active link.
For instance - When the page loads, by default, all subs are hidden except sub1 which is today's content - So when the page loads, I want the "Today" link to be styled differently to the rest... However, if they then go on to click "Tomorrow" - as well as changing the content like it already does, I need it to also switch the style of the link from the "Today" link to the "Tomorrow" link.
My application uses multiple lists in dynamic tables the contents of which change to reflext a user's context. I tried applying your tutorial code for assigning arrays to option values and text using the suggested pipe character "|" delimiter if one was used, but strangely in FireFox .search() to test for the presence of the pipe character returned 0 whether it was there or not! Using another character such as "#" worked fine. Also using DOM methods the text component had to be added by appending a TextNode otherwise the list simply displayed a list of 'undefined' items.My resulting function just unwraps an array of list items into an option group which is then appended to the select element at the calling end:[code]
This is what I want to achieve: a fixed positioned div next to my content area where the text changes depending on the section of the content area the user is reading. Can this be achieved, and how?
I have a tab control finally behaving the way I want, with one exception. The second tab page contains a search form that returns data to be used in the first form on that page. The cgi program returns the results of the searh fine. The problem is that it when it returns the data, the tab control displays with the first page visible rather than the second. NB: I have not yet figured out how to add AJAX to the mix, but for now I just need a simple way for the search cgi program to tell the borwser that when it opens the page it produces, it should open with the second page visible Rather than the first.
I currently have a normal link like Code:<a href="http://sitepoint.com" class="link">sitepoint</a> and when a user clicks on it I want to be able to change the "link" class to a different class. However, I don't want to add anything to the actual link html. Is it possible to do this using javascript without modifying the original link code?
I am trying to dynamically clear the value of a form input field and then submit the form.When I used $('#my_field').val('') to clear the field, it was cleared on the screen but when the form was submitted the original value of the input field was posted.My browser is FireFox and I can see using FireBug that when the field is cleared, firebug is still showing the html code with the old value. E.G. <input type="text" value="old_value" />The same situation occurred if I used $('#my_field').attr('value', '') to clear the field.The same situation occurred if I actually changed the value of the field rather than just clearing it.To work around this problem I ended up using the $('#my_field').removeAttr('value') to clear the field before it was submitted.
I am a complete novice when it come to Javascript. I copied the script for displaying random images at a specific interval (from javascriptkit.com). I would appreciate knowing whether the following is possible:
The pages are based on tables, so the parts that change are all cells.
1. Can I define text instead of an image in the array? i.e. can I have the image change to say an apple in one cell and the next cell have text explaining what an apple is?
2. Would it be possible to put a countdown timer for when the image/text is going to change?
Ive got a small image of a power button and when pressed the inner section on the button changes to yellow, but when its pressed down Im also trying to get part of my H1 (main header logo title) to change to yellow.
Ive created a span with an id surrounding the letters of the H1 that I want to change, the id being : "power";
The javascript that I have come up with so far and works is as follows:
<img id="poweron" src="http://www.sitepoint.com/forums/images/power.png" alt="Power on button" onmousedown="this.src='images/poweron.png';" onmouseup="this.src='images/power.png';"/>
I understand Im not really supposed to be using inline JS, and I know Ive got to create a function for the onmousedown event to trigger changing the H1 text, so am I under the right impression that the JS so far written is redundant and will have to be re-written so thats contained within a script placed just before the closing </body> and an external script for invoking the main function ?
