JavaScript - Controlling The Loading Of Divs Asynchronously Using Jquery

Hello all, I'm still learning java. I have the concept of hide/show down, but want I want to do is when a div is shown, all the other divs are hidden, and when I click on another div to show, the other one hides, etc.

This is my code for jquery show/hide:

Code:

<script type="text/javascript">
 $(document).ready(function(){
 $('#{field_label}').hide();
$('input#show{field_label}').click(function(){
$('#{field_label}').show('fast');
 });

$('input#close{field_label}').click(function(){
$('#{field_label}').hide('fast');
})
});
</script>

What do I need to add so that the previous DIV that was open, auto closes when a NEW DIV is enabled to show.

Much appreciated Coders!

I'm not sure what this is called to google it,

ok so i have 3 divs
Code:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Now say my page is 800x600

So when the page loads #div1 and #div3 height = 390px
and #div2 height = 20px;

What i want is when #div2 is draged it resized #div1 and #div3

E.G
(#div2 is draged up so top = -100px)

so when that happens i want #div1 = 290px and #div3 = 490px

And vice versa now this is the code i have for my site

So #div1 = ".torrents-list"
#div2 = "#dragBar"
#div3 = "#torrent_info"

PHP Code:
$("#dragBar").draggable({
        axis: 'y',
        drag: function(event, ui){
            var heightString= $("#dragBar").css("top");
            var height = parseInt(heightString.replace("px", ""));
            $("#dragBar").css("top", "0px");
            $(".torrent-list").height($(".torrent-list").height() + heightString);
            $("#torrent_info").height($("#torrent_info").height() - heightString);
        }    
    }); 


But this dose not work for me its never setting #dragBar top to 0px and not resizing any thing if some one can tell me what this is called so i can google for a prebuilt one if not help me write one please?

I have made a code which is for a 9 tile picture puzzle.And i have done it for click event.now i want to make it possible to drag and drop to swap divs rather than clicking.So how do i swap divs with only javascript.[p.s my divs are dynamically created]

Hi,

Im trying to change the position of a div when a button is clicked.

The js is:

Code:

function curPos() {
	objDivStrip = document.getElementById('thumbview');
	return objDivStrip.style.top;
}
function up(pos) {
		//get objects
		objImgStrip = document.getElementById('str');
		objDivStrip = document.getElementById('thumbview');
		//Get End position
		var totImg = (objImgStrip.height - 100) / 130;
		var endpos = totImg * 130;
		
		if (pos=endpos)
			{
				return false;
			}
		else
			{
				objDivStrip.style.top = pos - 130;	
			}
		
}

and the html on the button is

Code:

<img id="arrow" src="images/arrow_up.jpg" onclick="up(curPos());" />

The code doesnt work but if anyone could point me in the direction to get it to work your help is greatly appreciated.

Cheers

Sol

Hi, I have a few checkboxes in a form. Some of them work independently, but some make the others go on and off. Specifically the lower ones are controlling the upper ones. Can anyone explain why please?

Code:

<td>	
		<input type="checkbox" name="weddingitem1"  value="Toppers" id="Toppers"/><label for="Toppers" >Toppers<br />
		<input type="checkbox" name="weddingitem2"  value="Champers" id="Champers"/><label for="Champers" >Champers<br />
		</td>

ok guys, i am not very saavy with javascript and I dont know if this is an easy fix or something difficult, but here is my plan. I would like to have 4 divs with content in each and set each to occupy the same web space through absolute positioning.

The .js would be for me to have three divs with a display:none and one to have display:block. and then at a set interval, have the divs switch role so that one that was display none is then block and the others are hidden.

I dont want to have a page reload and I dont want to work in flash or anything like that, I just need an example of a script that will alternate through a set array of div ids (i.e. "<<div id="ad1"></div> div id="ad2"></div> <div id="ad3"></div> <div id="ad4"></div>, and change the display attribute every 10 seconds or so.

Any help would be greatly appreciated thanks so much

Hello all,

I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page.

It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user.

So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it.

Is this easy to do? I am new to javascript so bear with me

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#newcontent').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

The 'new content' is a div which is at the bottom of the page and is where the new content loads to!

Thank you very much

Hello,

I need your help.

I have 2 checkboxes.

How would I control one from the other?

Eg.

[ ] Option A

[ ] Option B

- If Option A was checked first and, I put a checkmark in option B then Uncheck Option A and leave option B checked.

- If Option B was checked and, I put a check mark in Option A then uncheck Option B and leave Option A checked.

How would that be written in Javascript, I am totally confused.

Any help with this is much and foremost greatly appreciated.

Cheers,

J

hi everybody;

i'm using this code to trigger functions with left and right arrow keys..

but they work even if the arrow keys pressed in input boxes.. is there any way to prevent this code to work when user presses the arrow keys in input boxes?



Code:

document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
	geri();
	gostergeyaz();
	break;

        case 39:
	ileri();
	gostergeyaz();
	break;
    }
};

Problem
I have an index.html that sets up 3 Frames. They are called FrameTop, FrameA and FrameB. See pic below. In FrameTop the user can type in a url into a textbox with id="urlINPUT". When user clicks LOADA it loads that url into FrameA. User can then browse web in FrameA, clicking links etc and going to new pages. The second button LOADB is designed to determine the current location/url of the page displayed in FrameA and load that into FrameB. So far when I write the javascript in FrameTop LOADA works but LOADB loads the FrameTop into FrameB! [error!]

If someone can please help me with this problem it would be much appreciated. This work is going towards a free website idea.

I suspect my error lies in use of parent/self in the parent.frame.location.



Here is my page layout.




-----------------Index.html-------------------------------------
<frameset rows="5%,*">
<frame name="FrameTop" src="frame_top.html" />
<frameset cols="50%,50%">
<frame name="FrameA" id="FrameA" src="frame_a.html" />
<frame name="FrameB" id="FrameB" src="frame_b.html" />
<noframes>
</noframes>
</frameset>


--------------------frame_top.html-------------------------------
<SCRIPT language="JavaScript">

function loadURLintoA() /*gets the url typed in by user and loads it into Frame A. This works fine*/
{
var urlrequest= "http://"+document.getElementById('urlINPUT').value;
parent.FrameA.location.href = urlrequest; /*sets FrameA location to url that user enters in frametop input*/

}

</SCRIPT>

<SCRIPT language="JavaScript">

function loadAintoB() /*I WANT this to get the url of the website loaded in frame A and load it into frame B*/
{
var urlofA = parent.FrameA.location;
parent.FrameB.location = urlofA; /*this is supposed to get the url of FrameA and load it into FrameB*/

}

</SCRIPT>
</HEAD>

<body bgcolor="#848484">
http://<input type="text" name="urlINPUT" value="" id="urlINPUT" size="10">
<input type="button" name="loadAbutton" id="loadAbutton" value="LOAD A" onclick="loadURLintoA()">
<input type="button" name="loadBbutton" id="loadBbutton" value="LOAD B" onclick="loadAintoB()">


----------------------------------------------

What happens when I run index.html
index.html loads the index correctly and displays FrameTop, FrameA and FrameB. The load A button also works correctly BUT when I click LoadB it loads FrameTop into FrameB! This happens when no page is loaded into FrameA AND when an external page in loaded in.






Please help, I would be very greatfull if you could point out my mistake.

I have the following code ...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
    background-color:#000;
 }
#scenery {
    width:964px;
    height:482px;
    padding:318px 0 0 316px;
    margin:auto;
    background-image:url('http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg');
 }
</style>

</head>
<body>

<div id="scenery">
 <img src="http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/DrawingPin1_Blue.png" alt="">
</div>

</body>
</html>

... in which I would like to use Javascript to control the values in the 'padding'.

Code:

padding:318px 0 0 316px;

May I know how can I use Javascript to control that 'padding' values?

Appreciate any help.

I am trying to use JavaScript to manipulate the appearance of a web browser.
(1) Initially I need to identify and save the current browser settings (e.g. position, height, width, caption on or off, menubar on or off, border on or off).
(2) Then I need to change the appearance of the browser to full screen, no border, no caption, no status bar, no menubar).
(3) Finally, I need to return the browser to the initial settings using the settings saved at the beginning.

I am a novice at JavaScript and am having a difficult time locating details of the language that permit me to accomplish my objectives.

John Chapman
jchapman@onlinecbt.com

I am trying to do a custom add to cart to use with paypal and need to utilize javascript to achieve inserting some code or a weight value per the paypal forms' options choice. Here is my dilemma, All of my items have multiple weights, for instance the below example called Aqua Max 100 comes in .5lbs, 1.5lbs., 10lbs., 20lbs., and 50lbs. Paypal allows you to enter weight but it's one weight per item and I would have to create 5 Paypal buttons just for this one item to calculate the different weights per zip code. I need help making javascript insert the following code within the paypal forms' code upon option select before clicking submit?

<input type="hidden" name="weight" value=".5">
<input type="hidden" name="weight_unit" value="lbs">

<input type="hidden" name="weight" value="1.5">
<input type="hidden" name="weight_unit" value="lbs">

<input type="hidden" name="weight" value="10
<input type="hidden" name="weight_unit" value="lbs">

<input type="hidden" name="weight" value="20
<input type="hidden" name="weight_unit" value="lbs">

<input type="hidden" name="weight" value="50
<input type="hidden" name="weight_unit" value="lbs">

The code I came up with is wrong as I'm getting an error but I was originally trying to make it enter a weight using a hidden fillable number and without any real javascript training, just alot of googling but I think I'm pretty close. Please take a look at the code I've came up with so far and maybe point me in the correct direction:

<html>
<body>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<input type="hidden" name="cmd" value="_cart"> <input type="hidden"
name="business" value="test@test.com">
<input type="hidden" name="currency_code" value="USD"> <input type='hidden'text'
name='amt' id='amt' value="0.00"/>
<table>
<tr>
<td>
<input type="text" name="on0" value="Aqua Max 100">Aqua Max 100</td></tr>
<tr><td>
<select name="os0" onChange="getamt()">
<option value="select">Please Select</option>
<option value="1/2 lb.">1/2 lb. $3.99 USD</option>
<option value="1 - 1/2 lbs">1 - 1/2 lbs $7.59 USD</option>
<option value="10 lbs.">10 lbs. $25.80 USD</option>
<option value="20 lbs.">20 lbs. $42.75 USD</option>
<option value="50 lbs.">50 lbs. $86.20 USD</option>
</select></td></tr> </table>
<script type="text/javascript"> function getamt() {
var sh=0;
var choice = document.getElementById("os0").selectedIndex;
if (choice == 0)
{ sh=0; }
if (choice == 1)
{ sh=.5; }
if (choice == 2)
{ sh=1.5; }
if (choice == 3)
{ sh=10; }
if (choice == 4)
{ sh=20 }
if (choice == 5)
{ sh=50.00; }
document.getElementById("on0").value=sh;
}
</script>
<input type="image" src="https://images.paypal.com/images/sc-but-03.gif"
border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" /> <img
alt="" border="0"
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1"
height="1">
</form>
</body>
</html>

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });