I was just wondering, why people continue using frames and iframes when we have handy AJAX approach to fill needed divs with content. Is it because of some user's paranoia about javascript?
But if they make pages without javascript, they would not need to bother, how to access other frame's content, would they?
I believe that different browsers treat frames/iframes differently, and this
is one of the reasons to avoid using them in websites/applications.
Are there any other reasons to avoid them?
In my experience I find them clunky and messy to implement using javascript
and prefer to keep the whole web page as a single page.
I wish to have 3 frames left to right, an them to resize as i hover over each frame to specific percentage widths.[code]...
View 1 Replies View RelatedI am creating a form. The form uses variable to show different divs. Like for example .
If the user chooses state where tax will be implemented than it will update the div which contain total amount. Now the problem is I have 3 divs on a page and I want to update all of them accordingly. Like user select quantity as 500, state as florida. So I need to update 3 divs .. total cost, Shipping cost and quantity divs. Problem is they all r not inside a single div else I would have put tht whole div inside the response. So is there a way to update multiple divs?
Below id the ajax code I am using ..
Code:
function update_dockcontent() {
var quantityval = document.HVAC_Cards_Form.Quantity.value;
var BillingZip = document.HVAC_Cards_Form.BillingZip.value;
var url = '[URL]'+quantityval+'&BillingZip='+BillingZip;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
if (req.overrideMimeType) {
req.overrideMimeType('text/xml');
} .....
Code for ajaxcall page is:
Code:
<?
header("Cache-Control: no-cache");
header("Pragma: no-cache");
$total=($_GET[qval]*0.50);
$shippingrate="50";
if($_GET[BillingZip]) {
$total=$total+$shippingrate;
}?>
<p>Total Quantity: <strong><?=$_GET[qval]?></strong></p>
<p>Shipping: <strong><?=$shippingrate?></strong></p>
<p>Total cost: <strong>$<?=number_format($total,2)?></strong></p>
I want to show all 3 of them in different divs.
Textbox to search for employees
<div id="searchform">
<div id = "courses">
<form id="searchempform" name="searchempform" method="post" "/>
<li> SEARCH <b>EMPLOYEES</b> <input type="text" name="searchemployees" class="textbox" onkeyup="searchemp();" /> </li>
</form></div>
Typed characters sent ... ajax call to another page look out for data
<script type="text/javascript">
function searchemp(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} .....
Using getinfo2(this.value); I want to populated a new result to a new div. For instance the result div is populated with the employees personal information, when clicked to his id. How can I click to his same id and populated his courses information to "coursesinfdiv".
I've created an ajax function which retrieves comments from a news article. But if I am logged in I will also have access to an input field for posting comments. The problem / question is that if I use Ajax I can only update one div with the responseText? How would I go about updating another one where I want to insert my form field. Can I make multiple requests in some certain manner or do I simply create another ajax function updating it separately?
http.onreadystatechange = function(){
if(http.readyState == 4){
document.getElementById(newsId).innerHTML = http.responseText;
}}
http.open("GET", "AjaxController.php?func=newsGetComments&showcomments="+newsId, true)
http.send();
I don't know why but the div "Bill" is not working. I mean whatever I want to display is getting displayed in the section of div "txtHint". Here is the code:
PHP Code:
<?php require_once("../share /common.php");
session_cache_limiter(null); $tab = "profile"; $nav = "profile";
require_once("../shared/header.php");
require_once("../classes/Localize.php");
$sql=mysql_query("select sub_category,category_name,id from sub_category");
$sql_cat=mysql_query("select category from category");
$sql_cat1=mysql_query("select category from category");?>.....
I want to count the amount of divs on a page with the class of "samplesSection".
HTML
<html>
<head>
[code]....
When you click on "Click", it alerts you with how many divs with class "sampleSections" exist. Here's the problem: When it loads, just click "Click". It alerts 1 - valid. Then click "Category", AJAX refreshes, click "Click" and it alerts 2 - valid again. Click "Client", AJAX refreshes, and click alerts 3 - valid once more. However, whenever I click back on any of the other categories, it always alerts 3.
I'm using ajax to get multiple vars from a database and would like to show the vars in different parts of my page but everything is shown all in the same spot with the div.
An example is I'm pulling a home number and an email from a database and want to show them in different spots.
I have it working but I have to make a seperate ajax(), url, for each var which I don't think is very efficient!
[URL] you can test the search out by typing 000-000-0000 into phone or bank into the name field and tabbing through both input fields.
index.php
<!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" xml:lang="en" lang="en">
<head>
[Code].....
I tried to used this script to navigate through a gallery on my CMS website. [URL].
It looks like this:
HEAD
Code:
<head>
<title>My Domain</title>
<script type="text/javascript" src="[URL]"></script>
</head>
BODY
Code:
<div class="gallery">
<div id="gallery_content_left">Gallery<br />
<a href="javascript:void(0)" onclick="open_url('[URL]','gallery_content_right');">Gallery 1</a><br />
<a href="javascript:void(0)" onclick="open_url('[URL]','gallery_content_right');">Gallery 2</a><br />
</div> .....
The pages which are loaded look similar to the main page shown above. It works fine, except the fact that the whole page is loaded into the "gallery_content_right" DIV (including header, navigation and so on). Is it possible to just load the DIV "gallery_content_right" from the other pages, so that just the content from "gallery_content_right" is replaced onClick()?
I am building a forum and I am experienced in PHP, MySQL and even in jQuery now somewhat, but I have run into something I just can't seem to find the answer too. Here is a simple example which I think contains everything you need to know. If I have 10 elements on a page, say 10 divs, and I want to hide the odd ones, I would just use $("div:odd").hide() and wrap it into the document.ready function. The page loads, the divs are hidden, awesome. However, let's say that after the ten divs, there is a link which triggers an AJAX request and the return data is basically another 10 divs which get pasted under the ones already on the page.
What I would like to happen is that the script I wrote a paragraph ago kicks in and hides the odd divs automatically. Now it makes sense that this does not happen, since it seems logical that when the page loads, the script parses the divs and hides stuff, so after I get the AJAX results it won't do it again. What IS weird to me is that the functions I defined don't work either, so if I define
$("div").click(function() {SOMETHING HERE})
It will work for the first set of elements, but not for the ones which are returned by the AJAX call.
This is my current script
<script type="text/javascript">
$(document).ready(function(){
$("div.content1").load("content_1.txt");
$("div.content2").load("content_2.txt");
[Code].....
What I'm trying to do is get the script to look for class names div.content"x" and then correctly load content_"x".txt
I am building a large registration form. In this form, a sponsor/educator must register himself or herself and then may add up to 6 more " delegates" in pairs. The first two pairs registration info on the form is shown by default. I need to hide the other two pairs until when/if the user clicks on a button to add two more delegates at a time. I used javascript to show or hide the parts of the form that I had put into two divs and adjusted the css display attribute. However, my problem was that, if the user filled out the sponsor/educator section and the first two delegates, and then decided to add two more, when the user clicked on the button to show the part of the form for delegates 3 and 4, it reset all the previous visible form fields to empty. Not good. So, I thought, maybe AJAX.
I created the request object (I am a relative novice at AJAX), had it grab a text file with the code to insert into my target div, in this case a div with id = "delegate3and4". Surprisingly however, it still reset the previous form fields to empty. Am I misunderstanding how AJAX is supposed to work? I figured that, because it does not refresh the page that this would not happen. In fact, to test this out, I created a simple page from scratch with just a single input field and then used AJAX to insert the file in a div after this field and it did not reset the previous input. So, I am totally confused about why this would be happening on my live page. The page is a php page as it submits the form to a php script for processing but I don't think this should make a difference.
I'm loading a list of elements into mydiv with ajax, I want them to be selectable so I call the UI plugin selectable after the list has loaded.
The list building function produces this:
<div id='mydiv'>
<ul id='mylist'>
....
</ul>
[Code].....
The problem is, every time I click the link to reload the list via ajax, I get a duplicate selectable event handler created. Should I be removing the old event handlers before reloading the div ? if so, how?
Everything works, as in selectable still works, and only seems to fire once but I get ever growing memory usage in firefox and an ever growing list of event handlers in the firebug script tab. Eventually firefox starts to crawl and I have to restart the browser.
I am using javascript to switch between a series of divs, on clicking a navigation tab the divs display property is set to 'block' and all other divs have their display property set to 'none'. That works fine, the problem I have is when I redirect to another page (e.g. a PHP script) on return to the index the divs have reset and only the default div is shown, rather than the div that was showing when the user left the page. The solution, as I see it, is two stages: Write a function to display the relevant div based on the variable passed to it, then work out how to pass this variable around various pages (post/get). I am very inexperienced with javascript and it drives me mad that the script literally does nothing rather than throwing up an error (as in PHP) but this is what I have so far in terms of a function:
[Code]...
I have been trying to do some tooltips for a website and desperately wanted to learn something new and do that with jQuery.However, every time a mouse hovers over a tooltip, all hidden divs are shown, not just the one that supposed to. Here's my html:
Code HTML4Strict:
<div class="tip">
<a href="#"></a>[code].....
I'm looking for some javascript to work with wordpress (jQuery preferrably) that will show/hide multiple divs on one click.
I had one working but it was kinda janky because it was causing me to have two divs with the same ID on one page. No good.
Since I updated to wp2.8.3 prior to launch, it's not working. So I've decided to just try and do it right.
Here's a page: [URL]
So, what I want to happen: On page load, the first tab: "general" and it's corresponding div beneath should be showing. And the first image should be showing. The other content divs and images should be hidden. I've given the text content divs a dashed border to show their borders. When a visitor clicks "dine at home" the general div and image hide, the second content div shows, as does the second image (it's currently the identical image, but the client may change later.) Etc.
I'll be using this function on a few other pages as well.
how to adjust this javascript to work on two different IDs at once?
current code:
Code:
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.imgswap > div');
[Code]....
Code:
Currently, I have one of the iframes working. When you click on it text
below appears with information about the jewelry.
I would like an iframe to open up (immediately to the left of the
image) and show an enlarged image of the thumbnail (yes I know right
now the images are not thumbnails, but my friends are working on the
graphics).
I want to load a javascript file on a root page with various iframes,
then call the javascript functions from the root page to be displayed
in the iframes. Any idea how to do this?
I have a mainpage and it contains iframe (myFrame). A js function validatedata() is on iframe. before submitting mainform in mainpage i am calling validatedata() function as below. mybool = document.myFrame.validatedata();
This works in IE 6.0 but fails on mozilla firefox.
I have a webpage with some divs and iframes in them, I have some Javascript code in another page in one of the iframes that when activated, will change the page within the other iframe. The code I have throws the following error:
'null' is null or not an object
and it is complaning abou the following bit of code:
var obj = document.getElementById("frame2");
obj.src = new_src;
But I am not sure if the code is the correct code anyway. Can anyone assist please?
Please find below my complete code, hopefully you can spot what's going on. Here is my 'index.htm' file: Code:
I'm starting to use some iframes in a div layer. I want to know if i can use javascript to change the size of the iframe (from the parent page containing the iframe).
In IE i can use 100% width and height to fit the iframe to the layer, but in Netscape 6 the iframe doesn't appear if the height is set in % values - hence the need to be able to specify it dynamically as the layer wil change size.
Is there a way to use Javascript to detect if a browser supports IFrames, or (if it DOES support them)that IFrame use is enabled?
View 3 Replies View RelatedI am using struts frame work and in one of the jsp pages I have a bunch of IFRAMES like this.(This is in logic iterate and the recordId is incremented with that iteration) ....
View 3 Replies View RelatedI have a really professional conspiracy movie site
and I use tons of layers and an external scroll bar assembly.
I would like to put the various sections into MS Iframes and
in order to clean up the page but I find that the iframes interfere
with the getting the mouse coords from the screen which is
essential in moving the scroll bar around.
My test html is given below. With the iframe hidden the mouse coords
are obtainable. With the iframe visible things get buggy.
Where the "background_foriframe.html" is just a html file with
a background layer using a "DIV" tag. Code:
Is there a way to communicate between iframes on different subdomains?
e.g. from one.dot.com to two.dot.com? there is a security access
restriction passing javascript commands between subdomains that we've
run into.
