JavaScript - How To Edit A Web Page Using A Javascript Editor And Display New Content In Same Page

There are two pages,


folder/india.html
folder/usa.html
and dropdown menu in each page to switch between india and usa pages.


india.html page sells in INR and usa.html in USD with links to shopping carts for each currency.


link1(INR)
link2(USD)

Except the link and the currency information(selling price), contents in both the pages are same.

So here comes the problem. Google hates duplicate pages!

I am looking for a solution where,



a single page In That Page, a dropdown menu to select currency As the currency is selected, without page reload, the link to shopping cart and the pricing also should be changed according to the selected currency. So Single page should be able to handle both the currencies.

Kindly suggest me with codes as I am new to javascript. Thanks a lot

Hello

Basically I have found and adapted the code:

Code:

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

I want when the user scrolls to the bottom of the page for content in a new page to load under the div "#projectscontainer". So in the new page 'Page2.html" I have put 5 divs going down with content in...

I want the new content to appear below "#projectscontainer'"

Why won't this work? Anyone know?

Thanks

Hi All,
Im new to this forum...need some of your help and advice.

I have a js code like this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

what it does is that it hide and show a panel by slidint it to the left.

But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {
var autoTimer = null;
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos });
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos = -856 });
}, 2000);
},1000);

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

But when the panel finished showing the button to open it again doesn't work...any help please..really urgent.
thks

//Sam

Hi there!
I am using GlassBox "http://www.glassbox-js.com/" As a light box on a website. Basically, You click an thumbnail image, and a window pops up with a larger version of that image.

Now originally, the window opened X number of pixels from the top of the page. However, My thumbnail images were located mid page, so when you clicked on one, the window would open at the top of the page and the user would not see it unless they scrolled up.

So I attempted to modify the script so that it would get the users page width/height and display it directly in the center no matter the position.

Now my problem is that the script only works when the user has already scrolled down. So if the page is scrolled all the way to the top, and you click on a thumbnail, the window will not open center screen.

Here is an example: http://synaxis.pcriot.com/

When the page loads, DO NOT scroll it, and click on the image. You will see the window pop up, and not centered, like it should be. However, now if you scroll down, and click the image again, you see that it is now centered. I also noticed that when the page is scrolled up, and the image does not center, it always is placed below the thumbnail image, or otherwise where ever the DIV is located. It normally located under the image, but if i place the DIV at the top of the page then the window will pop up there.
And this does happen on every browser that I have tested, Firefox, IE, and Chrome.

So, I am pretty much stumped as to why this is happening. If anyone can shed some light I would be very grateful.

Thank You



Here is a link to the original code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

And modified code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

The modified code is at the very bottom of the script.

Original Code:
Code:

/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Modified Code

Code:

/** 
* @private 
*/
var removeElement = function(id) {
	var Node = document.getElementById(id);
	Node.parentNode.removeChild(Node);
}

/** 
* @private 
*/
var getDocHeight = function() {
	var db = document.body;
	var ddE = document.documentElement;
    return Math.max(
        db.scrollHeight, db.offsetHeight, db.clientHeight, 
        ddE.scrollHeight, ddE.offsetHeight, ddE.clientHeight
    );
}
/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Is there a way to make a script that edits something on a different page.

Hello,

I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible.

I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading:

Code:

<td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td>

The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script.

The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue..

http://watch-movies-online.anyfilman...-Movie-17.html

To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com.

If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required.

Please feel free to ask any questions, i'll be happy to answer.

Thanks in advance.

Best Regards,
Jonathan.

hello guys
the idea is to make "offline" bill of lading

i used to do php thing and well this time i only need to kinda make bill of lading generator

so i want to pass value from page 1 to page 2 and to page . all offline without web server interaction

i was never fluent in javascript and i wanted to get a quick start from you guys how do i pass the form ( javascript variable from 1 page to another page )

i am googling this as well right now and hoping answer from codingforums

thanks

I want to create several pages (they can be text or html) with basic informatons for css formatting.
example:
<div class="appname"
name: this app
<div class="appdetails">
Version: 1.0
Date: 1/1/2011
Description: this is an app
</div>
</div>

I want to be able to save several of these and load them into a web page where they are formatted and displayed.

This needs to be a client side solution so that I can be able to access this offline.

Any suggestions?

Edit: so far I have tried this but I am not sure about it.
<object type="text/html" data="app1.html">

Hi,

I wish to get some content from another page.
Here is my code.
Code:

<script type="text/javascript">
jQuery.ajax({url: 'http://www.livecounter.dk/viewstats/30050',type: 'get',success: function(ajax) {
var x = jQuery('#box4 .first:last', ajax).innerHTML;
document.write(x);
}
}
});
</script>

<script src="http://code.jquery.com/jquery-1.6.1.min.js"> </script>

But it isn't working. I can't get the at this page : http://www.livecounter.dk/viewstats/30050 under "Altid" (to the right), next to "Sidevisninger". Image of it here : http://i51.tinypic.com/2e0sb9s.png

Thanks

I have been searching online for hours, but it is possible I'm just not thinking of the correct keywords. I have included a basic illustration of the current setup (which does not work). The issue lies with the page that is the desired output. I have a far deeper issue which I have narrowed down to javascript on the final .asp page not loading at all.


On default.asp, I am calling a function contained in 'ajax_call-contentselection.js'

Code:

<a onclick="func_displaycontents('restaurants'); return false">displayajaxcontent</a>

Honestly, I don't believe the following piece of code (ajax_call-contentselection.js) is relevant, as it is standard ajax code, but just in case:
Code:

function func_displaycontents(var_type){     
	var xmlHttp = GetXmlHttpObject();     
	var url = "../_include/ajax_display-contentselection.asp";    
	url += "?type="+var_type;

	if (!xmlHttp){          
		alert ("Browser does not support HTTP Request")          
		return     
	}    
		
	xmlHttp.onreadystatechange=function(){     
	if(xmlHttp.readyState == 1){
       		document.getElementById("div_ajaxfillattractions").innerHTML = "<div style='padding-top:50px;color:white;width:930px;text-align:center;'><img src='../_images/ajax-loader.gif'/><br/>Loading...</div>";
	};
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
			document.getElementById("div_ajaxfillattractions").innerHTML=xmlHttp.responseText;
        	}     
	};     
	xmlHttp.open("GET", url, true);     
	xmlHttp.send(null);
}

The other contents of "ajax_display-contentselection.asp" are displayed properly in "div_ajaxfillattractions" of "default.asp", but no javascript code on that page loads. If I use "ajax_display-contentselection.asp" as an include file on "default.asp", I get the javascript alert of 'Success', but when I initiate the AJAX it does not work, so I know there isn't a problem with the javascript.

Please let me know if I sucked at explaining something, or more detail is needed.

Thanks in advance,
Matt

Hi all:

This script and code works great, but in order for me to finish, I need a way of passing to the next PHP page which check box is checked. Currently, it is just passing a single value (1, 2, 3, 4, 5, or 6) depending on the last box checked. I need a way to record which check boxes are selected.

Code:

<html>
<head>
<script type="text/javascript">
var majors = {
"001 - Exchange"                                                 : [ 2, 6 ],
"003 - Academic Foundations"                                     : [ 2, 6 ],
"005 - Pre-Engineering"                                          : [ 2, 6 ],
"006 - Pre-Business"                                             : [ 2, 6 ],
"008 - Pre-Nursing"                                              : [ 2, 6 ],
"010 - Accounting"                                               : [ 3, 4 ],
"014 - Afro-American Studies"                                    : [ 2, 6 ],
"050 - American Studies"                                         : [ 2, 6 ],
"070 - Anthropology"                                             : [ 2, 6 ],
"080 - Art"                                                      : [ 2, 6 ],
"082 - Art History"                                              : [ 2, 6 ],
"090 - Arts and Sciences"                                        : [ 2, 6 ],
"100 - Astronomy"                                                : [ 2, 6 ],
"115 - Biochemistry"                                             : [ 2, 6 ],
"120 - Biology"                                                  : [ 2, 5, 6 ],
"124 - Biomedical Technology"                                    : [ 2, 6 ],
"130 - Botany"                                                   : [ 2, 6 ],
"135 - Business Administration"                                  : [ 3, 4 ],
"140 - Business Law"                                             : [ 3, 4 ],
"160 - Chemistry"                                                : [ 2, 5, 6 ],
"163 - Childhood Studies"                                        : [ 2, 5, 6 ],
"190 - Classics"                                                 : [ 2, 6 ],
"198 - Computer Science"                                         : [ 2, 5, 6 ],
"200 - Creative Writing"                                         : [ 5 ],
"202 - Criminal Justice"                                         : [ 2, 5, 6 ],
"203 - Dance"                                                    : [ 2, 6 ],
"220 - Economics"                                                : [ 2, 6 ],
"300 - Education"                                                : [ 2, 6 ],
"350 - English"                                                  : [ 2, 5, 6 ],
"352 - English - American Literature"                            : [ 2, 5, 6 ],
"354 - English - Film Studies"                                   : [ 2, 5, 6 ],
"360 - European Studies"                                         : [ 2, 6 ],
"387 - Film Studies"                                             : [ 2, 6 ],
"390 - Finance"                                                  : [ 3, 4 ],
"415 - Foreign Languages"                                        : [ 2, 6 ],
"420 - French"                                                   : [ 2, 6 ],
"460 - Geological Sciences"                                      : [ 2, 6 ],
"470 - German"                                                   : [ 2, 6 ],
"490 - Greek"                                                    : [ 2, 6 ],
"500 - Hebraic Studies"                                          : [ 2, 6 ],
"509 - Historical Methods and Skills"                            : [ 2, 6 ],
"510 - History, General"                                         : [ 2, 6 ],
"512 - History, American"                                        : [ 2, 5, 6 ],
"516 - African Asian Latin American and World Hist"              : [ 2, 6 ],
"520 - Home Economics"                                           : [ 2, 6 ],
"525 - Honors Program"                                           : [ 2, 6 ],
"533 - Human Resource Development"                               : [ 3 ],
"537 - Hospitality Management"                                   : [ 3 ],
"549 - International Studies"                                    : [ 2, 6 ],
"555 - Student Proposed Major"                                   : [ 2, 6 ],
"560 - Italian"                                                  : [ 2, 6 ],
"565 - Japanese"                                                 : [ 2, 6 ],
"570 - Journalism"                                               : [ 2, 6 ],
"580 - Latin"                                                    : [ 2, 6 ],
"590 - Latin American Studies"                                   : [ 2, 6 ],
"601 - Law -  Day Student"                                       : [ 1 ],
"602 - Law -  Evening Student"                                   : [ 1 ],
"606 - Liberal Studies"                                          : [ 2, 5, 6 ],
"615 - Linguistics"                                              : [ 2, 5, 6 ],
"620 - Management"                                               : [ 3, 4 ],
"623 - Management Science and Info Systems"                      : [ 3, 4 ],
"626 - Managerial Economics"                                     : [ 4 ],
"630 - Marketing"                                                : [ 3, 4 ],
"640 - Mathematics"                                              : [ 2, 6 ],
"645 - Mathematical Science"                                     : [ 5 ],
"660 - Medical Technology"                                       : [ 2, 6 ],
"680 - Microbiology"                                             : [ 2, 6 ],
"698 - Museum Studies"                                           : [ 2, 6 ],
"700 - Music"                                                    : [ 2, 6 ],
"701 - Music, Applied"                                           : [ 2, 6 ],
"705 - Nursing"                                                  : [ 2, 6 ],
"730 - Philosophy"                                               : [ 2, 6 ],
"740 - Physical Education"                                       : [ 2, 6 ],
"742 - Physical Therapy"                                         : [ 5 ],
"750 - Physics"                                                  : [ 2, 6 ],
"760 - Physiology"                                               : [ 2, 6 ],
"780 - Plant Physiology"                                         : [ 2, 6 ],
"790 - Political Science"                                        : [ 2, 6 ],
"830 - Psychology"                                               : [ 2, 5, 6 ],
"834 - Public Administration"                                    : [ 5 ],
"840 - Religon"                                                  : [ 2, 6 ],
"842 - Rhetoric"                                                 : [ 5 ],
"860 - Russian"                                                  : [ 2, 6 ],
"890 - General Science"                                          : [ 2, 6 ],
"910 - Social Work"                                              : [ 2, 6 ],
"920 - Sociology"                                                : [ 2, 6 ],
"940 - Spanish"                                                  : [ 2, 6 ],
"950 - Speech"                                                   : [ 2, 6 ],
"960 - Statistics"                                               : [ 2, 6 ],
"964 - Teacher Preparation"                                      : [ 2, 6 ],
"965 - Theater Arts"                                             : [ 2, 6 ],
"975 - Urban Studies and Community Development"                  : [ 2, 6 ],
"976 - Urban Planning"                                           : [ 2, 6 ],
"981 - Volunteer Organization and Leadership"                    : [ 2, 6 ],
"988 - Womens & Gender Studies"                                  : [ 2, 6 ],
"989 - Writing"                                                  : [ 2, 6 ],
"990 - Zoology"                                                  : [ 2, 6 ]
};

Array.prototype.isMember = function( find ) 
{
    for ( var i = 0; i < this.length; ++i )
    {
        if ( this[i] == find ) return true;
    }
    return false;
}
function resetOptions( )
{
    var form = document.theForm;
    var sel = form.Majors;
    for ( var s = sel.options.length-1; s > 0; --s )
    {
        sel.options[s] = null;
    }

    var checked = [ ];
    for ( var cb = 0; cb < form.schools.length; ++cb )
    {
        if ( form.schools[cb].checked ) checked.push( form.schools[cb].value );
    }
    for( major in majors )
    {
        var mschools = majors[major];
        for ( var c = 0; c < checked.length; ++c )
        {
            if ( mschools.isMember( checked[c] ) ) 
            {
                sel.options[sel.options.length] = new Option( major, major );
                break;
            }
        }
    }
}
</script>
</head>

<title>Search</title>

<body bgcolor="99CCFF">
<center>
<br>
<center>Search:<table border='1'>

<form name='theForm' action='display.php' method='post'>
<tr><td>ID: </td><td><input type="text" name="ID"/></td></tr>
<tr><td>Last Name: </td><td><input type="text" name="NAME_LAST"/></td></tr>
<tr><td>First Name: </td><td><input type="text" name="NAME_FIRST"/></td></tr>

<tr><td valign="top">School: </td>
<td>
<input type="checkbox" name="schools" value="1" onClick="resetOptions()">  Law School<br/>
<input type="checkbox" name="schools" value="2" onClick="resetOptions()">  College of Arts and Sciences<br/>
<input type="checkbox" name="schools" value="3" onClick="resetOptions()">  School of Business (Undergraduate)<br/>
<input type="checkbox" name="schools" value="4" onClick="resetOptions()">  School of Business (Graduate)<br/>
<input type="checkbox" name="schools" value="5" onClick="resetOptions()">  Graduate School<br/>
<input type="checkbox" name="schools" value="6" onClick="resetOptions()">  University College
</td>
</tr>
    
<tr><td>Major: </td><td><select name="Majors">
        <option value="" selected>Select a major</option>
        </select></td></tr>

<tr><td>Order By: </td><td>
<select name="ORDER_BY">
  <option value = "" selected> Select One </option>
  <option name="NAME_LAST" value = "NAME_LAST ASC"> Last Name </option>
  <option name="CURRIC_CD" value = "CURRIC_CD ASC"> Major </option>
  <option name="ID" value = "ID ASC"> RUID </option>
  <option name="UNIT_OF_REG_CD" value = "UNIT_OF_REG_CD ASC"> School </option>
  <option name="EMAIL_ADDR" value = "EMAIL_ADDR ASC"> Email Address </option>
  </select></td>
</tr>
</table>

<br><br>
	<input type='submit'/>
	
    </form><br><br>
    </center>
</body>
</html>

Thanks in advance.

D.I.C Head
**

Joined: 29 Jan, 2009
Posts: 94



Thanked: 1 times
My Contributions

Hello,

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'm hoping someone would be kind enough to fix this code and explain to me where I've gone wrong here.

CODE

<html>
<head>
<title>JavaScript Navanimation Example</title>
<style type="text/css">

#navsite h5 {
display: none;
}

#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}

#navsite ul li {
list-style: none;
margin: 0;
display: inline;
}

#navsite ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#navsite ul li a:link {
color: #448;
}

#navsite ul li a:visited {
color: #667;
}

#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #AAE;
border-color: #227;
}

/* #navsite ul li a#current {
background: white;
border-bottom: 1px solid white;
} */

</style>
</title>
<script language="JavaScript" type="text/javascript">
function navanimate()
{

document.write("test");
return false;

}
</script>

</head>
<body language="JavaScript" type="text/javascript">
<div id="navsite">
<h5>Site Navigation</h5>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/archives/">Archives</a></li>
<li><a href="/writing/">Writing</a></li>
<li><a href="/speaking/">Speaking</a></li>
<li><a href="/Contact/">Contact</a></li>
</ul>
</div>

<input type="button" name="button" value="Drop Down" onclick="return navanimate()">

</body>
</html>


Thanks!

Hello,

I'm creating a section for a school website that will list over 9,000 book titles in four different categories (by Title, by Author, by Book Level, and by Points).

The content is shown in a div and called and loaded via Ajax.

Here is the test page: http://www.gilchrist.leon.k12.fl.us/ar/artest.htmlAfter you click "Go" when the drop down menu is displaying By Book Title, the content loads in the div in a few moments.

Here is the content page that appears in the div after you click "Go":
http://www.gilchrist.leon.k12.fl.us/...tByAuthor.html

If possible, I need a "page loading..." script that will appear only after you click "Go" while the list of books is being loaded.

I've been testing different ones I've found online, but can't get any to work. Of course, I'm not even sure if the script would be added to artest.html, 1112-QuistListByTitle.html, or a combination of both...

Any help with this would be greatly appreciated.

Thank you,
Deborah

Hey there

I want to know how i can make a page that opens and loads content in a div tag when i click a certain link on my home page.

i have a javscript code to load content into a div tag when the link is on the same page as the div tag, but i want to get a script where it will open a new page and load content into a div tag on that page.

like the link must be something like main.html?div=content.html

i know how to do this with iframes, but i want to work with div tags

thank you

javascript for loading content into the div tag on the same page :

PHP Code:

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function clientSideInclude(containerid, url){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(containerid, page_request)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(containerid, page_request){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
} 

So I'm trying to get one particular number from a game's grand exchange database.
Say I wanted to know the 'Market price' of this item
and the item results would change on click of a drop down box.
I don't know how I'd go about getting that one section of the entire page though.
Any help is appreciated.

Code:

<html>
<head>
<title></title>

function doit()
{
	var potion = calculate.potion.options[calculate.potion.selectedIndex].text;
	
	if (potion=="Sara brew")
	{
		var potion = "Saradomin_brew_(3)";
	}
	if (potion=="Zammy brew")
	{
		var potion = "Zamorak_brew_(3)";
	}
calculate.results.value=potion;
}

</head>
<body>
Item: <select name="potion" onChange="doit()" />
        <option selected>--Potion--</option>
        <option>Sara brew</option>
        <option>Zammy brew</option>

<br />
<input type="text" name="results" />
</body>
</html>