Dual OnClick DIV And IFrame Load Working In Firefox Only
Jan 3, 2010
I finally got the below script working in Firefox and was really pumped about it until I realized it didn't load in Google chrome or Safari. What this script does is its a dual onclick event which makes a hidden div appear and loads an iframe within the now visible div. Here is the code, how to make this work in other browsers.
Here is the header code:
<SCRIPT type="text/javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
} else {
state = 'block';
} if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
} .....
Here is the code on the page where a link click shows the hidden div and loads the iframe contained.
<p><a href="#" onclick="showhide('div1');return loadIframe('ifrm1', '[URL]');
">show/hide me</a></p></td></tr>
<div id="div1" style="display: none; position: fixed; z-index:4;
width: 1010px; height: 500px; left: 5%; top: 15%; background-color: #f0f0f0;
border: 1px solid #000; padding: 10px;"><iframe name="ifrm1"
id="ifrm1" width="100%" height="90%" scrolling="yes" frameborder="0">
Sorry, your browser doesnt support iframes.
</iframe><p><a href="#" onclick="showhide('div1')">close</a></div>';
I am trying to use AJAX to do a simple thing of displaying the results in the same page. Clicking on the <a href tag should display the results in the same page. This is working correctly in IE but the onclick() function is not working in firefox and safari.
Before, I had an iframe, and when I moused over a link outside the iframe, it would load a page into the iframe. Background image was part of the page loaded, as well as the text and what not. The problem was, the image took too long to load. I've been learning how to do javascript and I came across some code for preloading an image before the mouseover so there was zero wait time. For the past few days I've been trying to figure out how to have the preload image appear BENEATH the iframe (now with no background image or color) with the allowtransparency attribute set to true.
I've figured out the code to do both individually, i.e. I have the code so that when the link is moused over, the new image will appear; AND I have the code so that when the link is moused over, the page with load into the iframe. Both work, both do what is expected, but they don't do it together.Below is the script. Here's where it's confusing. If I have the "setupImgRollover..." first inside the if statement: the page loads into the iframe, but there is no image. If I have the "setupImgRollover..." after the "document.link..." commands in the if statement: the image appears but the page does not load into the iframe.
HTML Code:
window.onload = rolloverInit; function rolloverInit() { for (var i=0; i<document.links.length; i++) { var linkObj = document.links[i];
To sum up this issue, I have a parent page, which holds some values in hidden input fields passed to them from the url. On this page, I have an iframe with a form in it, to which I want to pass values from these hidden fields to be displayed for the user in the iframe form. In IE, it works. To accomplish this, im just simply doing a <body onload="GetInput()">. The GetInput function does the following, but for about 10 fields:
Fnamefield=document.getElementById('firstname').value = parent.document.getElementById('firstname').value; Thats it. Once the page loads, i see my values. In firefox it does not work. I know the hidden fields are getting their values, but thats as far as it makes it. I have tried calling the GetInput function after the form is written out and not in the body tag, which still works for IE, but not FF.
Is there a way of controlling (i.e., using windows.open ) which screen new windows are to appear in, when I have multiple screens ? Is that a programming issue, or does it have to do with the OS?
I have this code that I use to display and grab data from 2 tables in mysql into 2 dropdown menus.
When I select in dropdown menu 1 an item (with ID in database, the first table has fields: ProgrammaID, Programma).
Then in de second dropdown menu the particulair item with this same ID as the selected one in menu 1 need to be shown. The second table has fields: ProjectID, ProgrammaID, Project.
The ProgrammaID from table1 is also in table2 (designed by our previous designer).
Now I can select an item from dropdown menu 1 but the second dropdown menu isn't shown the items as should be.
I'm after a drop down script that basically you press categories and down it drops with say one side products by category the left side and say product by price the right side.[url]... do it when you click on one of the top links I'm just not sure of the name and the most easiest to implement?
I have seen this quesion asked in various forms but the general idea of the question is "How do I make a rollover image clickable". Usually the asker wants to have the image stay on when clicked. Here is a little script that will do that and more..
This is the main code that goes in the HEAD section of your document.
<script type="text/javascript"> <!-- /** * Dual/Tri/Quad state rollovers from www.javascript-fx.com * posted at and available from www.codingforums.com * You may use this code on any website but please * leave this comment intact. */ var img= new Array(); var di= document.images; var currOn= null;
NOTE: The name if the image must match the Rollover name --- <img name="home" --- Rollover("home", "images/home_off.gif", "images/home_on.gif");
If you use the script in this form you will get something like this demo Dual State Rollovers (http://www.javascript-fx.com/post/codeforums/quadroll/QuadState2img.html) ------------------------------------------------------------------------ If you want the clicked image to be a third image you define the rollovers as follows :-
Where the syntax is Rollover(Name, offImage, onImage, clickedImage)
Which results in this demo Tri State Rollovers (http://www.javascript-fx.com/post/codeforums/quadroll/QuadState3img.html) ------------------------------------------------------------------------------------ If you want to have a clicked image and have that clicked image also have a (different) rollover effect you define the rollovers as follows :-
I am needing a dual thirty minute countdown timer. They would appear side-by-side and there would be a start button. Once the first one is finished it would automatically initiate the second.
I'm inexperienced with JS and I'm hoping that someone will knowCallback2)What I'm trying to achieve is for variables which come from PHP to be added to the map automatically. So far I have determined that variations on the theme of.Can someone tell me where I am going wrong? Hopefully someone looking at this is chuckling at the triviality of it!
I am working on a Javascript application and i am facing a strange behavior of the application in IE. I am creating a table at runtime using DHTML and registering event for the table row click. When i deploy this application on web server and browse the application, the events fires in firefox and chrome but in IE the events are not fired. If i browse the application from the server with localhost, the application triggers the events and fails when i use machine name.
The following is the source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>
I'm trying to use onClick in an iframe, but access to the function (defined in the external page) is denied. When I load the page (not-iframed), the function works fine.
I have an unique requirement that needs to be able to click and move between two lists.Each list is compose of an outer <div> and several inner <div>s. When user click on one of the inner div item, it will move from one list to another. To make more sense:
I am trying to add an onclick event to a dynamically generated element. This happens in an iframe, but the element is being added to the parent document, and I need to associate the onclick event with a function in the parent document. When I add it from the iframe and then click on the image, I get an error saying the function does not exist.
var img = parent.document.createElement('img'); img.onclick = function() { doSomething() }; parentDiv.appendChild(img); //parentDiv is an element in the parent document
I also tried: img.setAttribute('onclick', 'doSomething(this);'); This worked great in Firefox, but not in IE.
I know that innerText is not supported in FireFox and I've found the following code fragment which was originally designed in an HTMLElement prototype for an innerText getter. I do not however want to use the getter approach and want to just get the innerText as follows:
I've been having a problem with firefox and iframes:
What I have is 2 iframes in a page,the first spanning over the whole page ,the other about 200X200px.So what basically happens is the second one load after the first on top of the first.Now here's the problem.I'm using the dragiframe.js lib from ....
However, when using Firefox, version 3.6, the following error messages are displayed in the Firebug console when links "Page 3" and "Page 4" are clicked:
Unfortunately, if a user opens the link in a new tab (e.g right click->open in new tab), my onLinkClick function does NOT get called. This happens with Firefox (various versions, including the latest one - 1.5.0.1).
Does anyone know if there is a way to work around that and catch even the "open in new tab" clicks/events?
