|
JavaScript - Loading A Webpage?
Can someone please show me a working example of how to load a WebPage from an existing WebPage using Javascript! I have tried googling the syntax and not having any luck.
Thanks, Blake Similar TutorialsI am using this fancy box code to smoothly pop up an image on click, I got it working on my main index page but that's not where I want to put it. My site has a menu where it loads webpages inside the main index one, I would like to use the code on one of those pages but something is not working. I am not able to use the specified DOCTYPE but find that it works all the same with my current one, however if I use the given one in addition to the one I have now (and need) then my site does not work properly, further if I replace it I get the same results. My existing doctype: Code: <DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> What the code uses: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> I'm not sure what the differences are but I've been advised that I need to run the code in "standards mode" before I try to fix it. As I see it the code works, just not where I need it to, nothing unusual on my site and nothing unusual that I may be wrong. On my site you can see at the bottom right a blue text link called "aaaa" this is the code that works, however (clicking the dome to the left of that to scroll the page down and selecting the "met.a has guts" menu option diagram) you'll see the "aaaa" link again at the bottom left of that page and that is where I need it to work from. I even tried using the exact code from the example in that linked .htm page but it doesn't make a difference, it probably even hinders the code as it looks at the main html page. But if loading the page on its own the code will work, so its related to the menu and the way that works. If anybody can help that would be brilliant, I'm sure its something simple. Thanks! 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 Hi, I would like to ask if there is anyway to get a variable from any webpage source using javascript. Something like javascript: document.getelement? Hi please help me with this website. This website is used to list 6 events and then it should accurately countdown to when that event happens. As it is right now it accurately counts days, but hours, minutes, and seconds are counted down incorrectly. Here is the js file: /* New Perspectives on JavaScript, 2nd Edition Tutorial 2 Review Assignment Author: Andrew Duren Date: 8 May 2011 Function List: showDateTime(time) Returns the date in a text string formatted as: mm/dd/yyyy at hh:mm:ss am changeYear(today, holiday) Changes the year value of the holiday object to point to the next year if it has already occurred in the present year countdown(stop, start) Displays the time between the stop and start date objects in the text format: dd days, hh hrs, mm mins, ss secs */ function showDateTime(time) { date = time.getDate(); month = time.getMonth()+1; year = time.getFullYear(); second = time.getSeconds(); minute = time.getMinutes(); hour = time.getHours(); ampm = (hour < 12) ? " a.m." : " p.m."; hour = (hour > 12) ? hour - 12 : hour; hour = (hour == 0) ? 12 : hour; minute = minute < 10 ? "0"+minute : minute; second = second < 10 ? "0"+second : second; return month+"/"+date +"/"+year+" at "+hour+":"+minute+":"+second+ampm; } function changeYear(today, holiday) { var year = today.getFullYear(); holiday.setFullYear(year); year = (today > holiday) ? year + 1 : year; year = holiday.setFullYear(year); } function countdown(start, stop){ time = stop - start; var rawdays = ((time)/(1000*60*60*24)); days = Math.floor(rawdays); //milisec/sec*sec/min*mins/hour*hours/day is what's divided 4 value var rawhours = ((rawdays - days)*24) - 1; hours = Math.floor(rawhours); var rawminutes = (rawhours - hours)*60; minutes = Math.floor(rawminutes); var rawseconds = ((rawminutes - minutes)*60) + 1; seconds = Math.floor(rawseconds); return days + " days, " + hours + " hours, " + minutes + " mins, " + seconds + " secs"; } Here is the html file: <?xml version="1.0" encoding="UTF-8" ?> <!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> <!-- New Perspectives on JavaScript, 2nd Edition Tutorial 2 Review Assignment Events in Tulsa Author: Andrew Duren Date: 08 May 2011 Filename: events.htm Supporting files: dates.js, logo.jpg, tulsa.css --> <title>Upcoming Events at Tulsa</title> <link href="tulsa.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="dates.js"></script> <script type = "text/javascript"> function timeLeft() { //the today variable contains the current date and time var today = new Date(); var Date1 = new Date("January 14, 2011 10:00:00"); var Date2 = new Date("May 21, 2011 12:00:00"); var Date3 = new Date("July 4, 2011 9:00:00"); var Date4 = new Date("September 1, 2011 12:00:00"); var Date5 = new Date("December 1, 2011 11:30:00"); var Date6 = new Date("December 31, 2011 3:30:00"); //Display the current date and time. document.eventform.thisDay.value = showDateTime(today); changeYear(today, Date1); changeYear(today, Date2); changeYear(today, Date3); changeYear(today, Date4); changeYear(today, Date5); changeYear(today, Date6); document.eventform.count1.value = countdown(today, Date1); document.eventform.count2.value = countdown(today, Date2); document.eventform.count3.value = countdown(today, Date3); document.eventform.count4.value = countdown(today, Date4); document.eventform.count5.value = countdown(today, Date5); document.eventform.count6.value = countdown(today, Date6); } </script> </head> <body onload="setInterval('timeLeft()', 1000)"> <form name="eventform" id="eventform" action=""> <div id="logo"> <img src="logo.jpg" alt="Tulsa Events" /> </div> <div id="links"> <a href="#">Home</a> <a href="#">City Services</a> <a href="#">City Agencies</a> <a href="#">Mayor's Office</a> <a href="#">News Today</a> <a href="#">Upcoming Events</a> <a href="#">Site Map</a> <a href="#">Search Engine</a> <a href="#">Public Notices</a> <a href="#">Survey Form</a> <a href="#">Contact Us</a> <a href="#">E-Government</a> </div> <div id="main"> <h3>Countdown to Upcoming Events</h3> <table> <tr> <th colspan="2" style="text-align: right">Current Date and Time</th> <td><input name="thisDay" id="thisDay" readonly="readonly" size="40" /></td> </tr> <tr> <th>Event</th> <th>Starting Time</th> <th>Countdown to Event</th> </tr> <tr> <td><input value="Heritage Day" readonly="readonly" size="20" /></td> <td><input value="Jan 14 at 10:00 a.m." readonly="readonly" size="20" /></td> <td><input name="count1" id="count1" size="40" /></td> </tr> <tr> <td><input value="Spring Day Rally" readonly="readonly" size="20" /></td> <td><input value="May 21 at 12:00 p.m." readonly="readonly" size="20" /></td> <td><input name="count2" id="count2" size="40" /></td> </tr> <tr> <td><input value="July 4th Fireworks" readonly="readonly" size="20" /></td> <td><input value="Jul 4 at 9:00 p.m." readonly="readonly" size="20" /></td> <td><input name="count3" id="count3" size="40" /></td> </tr> <tr> <td><input value="Summer Bash" readonly="readonly" size="20" /></td> <td><input value="Sep 1 at 12:00 p.m." readonly="readonly" size="20" /></td> <td><input name="count4" id="count4" size="40" /></td> </tr><tr> <td><input value="Holiday Party" readonly="readonly" size="20" /></td> <td><input value="Dec 1 at 11:30 a.m." readonly="readonly" size="20" /></td> <td><input name="count5" id="count5" size="40" /></td> </tr> <tr> <td><input value="New Year's Bash" readonly="readonly" size="20" /></td> <td><input value="Dec 31 at 3:30 p.m." readonly="readonly" size="20" /></td> <td><input name="count6" id="count6" size="40" /></td> </tr> </table> </div> </form> </body> </html> Please tell me what I need to do to make all of them countdown properly and tell me what technique I can use in the future to do this for future websites in case I need to countdown to 30 events. I would appreciate any help. Hello all, I'm trying to open up an internal link from my leftnav div into my content div. I used the following JS code from my book but im not quite sure how to make it all work. Any thoughts appreciated. Thank you Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--header script starts here -->
<script type="text/javascript">
window.onload = initlinks;
function initlinks() {
for (var i = 0; i < document.links.length; i++) {
document.links[i].onclick = setContent;
}
}
function setContent() {
document.getElementById("content").contentWindow.document.location.href = this.href;
return false;
}
</script>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#header
{
height: 60px;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#leftnav
{
float: left;
width: 160px;
height: 380px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
height: 380px;
}
</style>
<title>JavaScript</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>JavaScript</h1>
</div>
<div id="leftnav">
<p>
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
<a href='#'>Load Content</a> <br /><br />
</p>
</div>
<!--Div to load content into-->
<div id="content">
<h2>Subheading</h2>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel erat volutpat.
</p>
</div>
</div>
</body>
</html>
Hi, I'd like to insert a date on a webpage in the following format: Monday, May 10, 2010 However, I want to be able to set the date 6 days before the current date. So, if today's date is Monday, May 10, 2010, I want it to instead display the following: Tuesday, May 4, 2010 Can someone please provide me the javascript and html coding to be able to do this? I'd seriously appreciate it. Thanks much in advance!! Hi everyone, I am having trouble getting a loading bar to appear from my javascript. I have the following code in place Code: $(document).ready(function(){
$(window).scroll(function(){
var h = $('#footer').height();
var y = $(window).scrollTop();
if( y > (h*0) && y < (h*1.0) ){
$('#loading').fadeIn("slow");
$('#loading').delay(10000).fadeOut();
$("#portfolios").delay(1000).fadeIn("slow");
}
});
})
I have it so when the user reacher the 'footer' div of the page, new posts appear which are contained in the 'portfolios' container div. They appear fine but no loading bar appears... The loading bar 'gif' is in the 'loading div id'. There is a 'display:none;' in the css on the loading div and the portfolios div. Any reason why the 'loading' div doesn't display but the portfolios does? I want the loading gif to show whilst the 'portfolios' is loading basically when the user hits the bottom of the page. Any help would be appreciated! Thank you! Hi there, Firstly my title may be a bit misleading as I don't i'm not sure how to do it. My situation is that I have a small piece of javascript that 'cycles' through a bunch of URL's (the URL's are reports produced by SSRS). The problem is that each time the javascript loads a new URL it has to generate the report, so I have a few seconds where the screen says 'Generating Report'. What I would like is a system that never displays the Generating Report, instead I would like to maybe pre-load the next report so it is ready to show instantly. Does anyone have any idea how to do this? Any help would be greatly appreciated. Cheers, Tom. Hi, I need an option to help my family members who does not have computer knowlege in logging onto a online TV channel website. Can you please let us know how to write a script which will open the web page and automatically login with the user id and password. webpage is http://www.yupptv.com/ Thanks in Advance for the help. Regards, scrptlng Hi, Can someone direct me to what do i need to get something like this going: When a user clicks on a button to focus a windows program thats already running Thanks I maintain a website for a small local restaurant. I do this with FrontPage so I know very little coding. I have an upload manager so the owner can remotely upload a txt or doc file of daily specials to a folder on the server. I would like to put a java script into one of the web pages that would open and display this file on page load. Is that possible and can someone help with the code, Thanks I went to the PHP section of this site and posted this same question, but someone told me it's a javascript question. I'm trying to carry a string from one webpage to another. The user inputs some data on page 1, the info gets tested for certain elements, then gets sent to page 2. The problem is the strings aren't transferring and I don't know how to use sessions to transfer them. I need recipeNameEl, ingredientsEl, and descriptionsEl to be stored to a string and then transferred to the page the form's action="" attribute points to. How can I accomplish this? Code: <script>
function checkFields() {
var recipeNameEl = document.getElementById( 'recipeName' );
var ingredientsEl = document.getElementById( 'ingredients' );
var descriptionEl = document.getElementById( 'description' );
var helperMsg1 = 'You have not filled in all required fields.';
var helperMsg2 = 'I thought I said no measurements! (No Numbers)';
return notEmpty( recipeNameEl, ingredientsEl, descriptionEl, helperMsg1, helperMsg2 );
}
</script>
<script type="text/javascript">
function notEmpty( recipeNameEl, ingredientsEl, descriptionEl, helperMsg1, helperMsg2 ){
if(recipeNameEl.value.length == 0){
alert(helperMsg1);
recipeNameEl.focus();
return false;}
if(ingredientsEl.value.length == 0){
alert(helperMsg1);
ingredientsEl.focus();
return false;}
if(descriptionEl.value.length == 0){
alert(helperMsg1);
descriptionEl.focus();
return false;}
var alphaExp = /^[a-zA-Z]+$/;
if(ingredientsEl.value.match(alphaExp)){
return true;
}else{
alert(helperMsg2);
ingredientsEl.focus();
return false;}
return true;
}
</script>
How to add an .mp3 file using java-script with HTML. I wish to add an mp3 file as a background music to my webpage. It should load automatically while user viewing my home page. I'm doing a project in php. "Give me a simple and easiest guideline for me" -thank you I'm trying getting one of my webpage XHTML 1.0 Strict. There is only one error left, namely: document type does not allow element "br" here at this line: Code: container.innerHTML = result.translation.replace(/mdw/g, '<br />'); Obviously this is part of my javascript coding, but it's where the validation goes wrong. I can't put the javascript in an external file since several javascript variables are getting filled by php. I've tried several options, but I ain't a javascript expert.. so perhaps someone can help me out. I am trying to write a javascript to open multiple websites in the same window for Internet Explorer. However I keep getting the website opening in a new window. Here is my code. Code: var url = [
"http://www.google.com",
"http://www.yahoo.com",
"http://www.msn.com"
];
var interval = 3000;
var startTime = 0;
for (i = 0; i < url.length; i++) {
startTime = startTime + interval;
setTimeout("openWindow("+i+")", startTime);
}
function openWindow(num) {
window.open(url[num],'mywindow','width=800,height=600,menubar=yes,status=yes,location=yes,toolbar=yes,scrollbars=yes');
}
So currently, this code behaves like this. Every 3 seconds, it opens up a new website. However this code I wrote opens google.com in a new window, then yahoo.com in a new window and so on. I want it to open all the websites in the same window. How do I achieve this? Complete and utter newb here, so I apologize in advance. I'm trying to create a widget for a website that will show the Recent Comments, but will limit what is shown to 1 comment per unique thread. The idea being that the popular threads don't drown out the unpopular threads in the widget. Alas, I do not know Javascript. I am, however, proficient in XSLT. So I mapped out a little transform to get (essentially) what I want, thus: Input: http://anamardoll.disqus.com/latest.rss XSLT: Code: <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template name="RSS_Feed" match="rss">
<xsl:value-of select="'
'"/>
<!-- ITERATE THROUGH ALL POST NODES -->
<xsl:for-each select="//item">
<!-- IF NOT PREVIOUSLY USED -->
<xsl:if test="not(preceding-sibling::item/child::title/node() = current()/child::title/node())">
<xsl:value-of xmlns:dc="http://purl.org/dc/elements/1.1/" select="child::dc:creator/node()"/>
<xsl:value-of select="(' posted on 
')"/>
<xsl:value-of select="substring-after(child::title/node(), 'Ramblings: ')"/>
<xsl:value-of select="('
')"/>
<xsl:value-of select="child::link/node()"/>
<xsl:value-of select="('

')"/>
</xsl:if>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Output: Code: Ana Mardoll posted on Twilight: It's All About The Protagonist, Baby http://www.anamardoll.com/2011/09/twilight-its-all-about-protagonist-baby.html#comment-320798527 Thepepboy posted on eReader: Running CM7 on a Nook Color from SD Card (REPOST) http://www.anamardoll.com/2011/07/ereader-running-cm7-on-nook-color-from.html#comment-320690496 Jckeeml posted on Narnia: The Clean and Tidy Poor http://www.anamardoll.com/2011/09/narnia-clean-and-tidy-poor.html#comment-320649311 chris the cynic posted on Metapost: Newsletter Subscriptions http://www.anamardoll.com/2011/09/metapost-newsletter-subscriptions.html#comment-320586205 (And here is why I say the output is "essentially" what I want -- I'd PREFER the links to be linked around the preceding texts, but that's an advanced step at this point in the game.) Is there an easy way in Javascript to just invoke an XSLT on a webpage and display the results? I've read online that there is, but can find no examples that work for me. I do appreciate any help provided and thank you in advance! (Also, for background: This will be going into the Blogger HTML/Javascript Widget tool, so... yeah.) OK, I appologise in advance if this post is long, but I need this answer, as I'm at my wits end. So I have this code Code: function SizeSelect(){
if(document.getElementById("JarSize").value=="Small")
document.getElementById("JarPrice").innerHTML="3.00"
else if(document.getElementById("JarSize").value=="Medium")
document.getElementById("JarPrice").innerHTML="5.00"
else if(document.getElementById("JarSize").value=="Large")
document.getElementById("JarPrice").innerHTML="7.00"
}
Which alters the value of JarPrice, based on which JarSize is selected. Which is the code below here. Code: <select id="JarSize" onchange="SizeSelect();"> <option value="Small" >Small</option> <option value="Medium">Medium</option> <option value="Large">Large</option> </select> <span class="price">$<span id="JarPrice">3.00</span></span></div> Now for the hard part. I need this piece of code Code: <a href="javascript:;" onclick="simpleCart.add('name=Mango and Papaya', 'price=5', 'quantity=1');" class="prod_buy">add to cart</a>
to be flexible, so that what ever value JarPrice becomes, that 'price=5' becomes the same. Now, the first piece of code is in a seperate .js file to the other two parts, which sit inside a regular HTML page. As I said, I'm desperate, as this is the only part of my site that isn't working ATM And if you need more information about any part, please don't hesitate to ask, as I will be able to give as much info as I can. I'm not sure where to put this question. I'mworking with something called OSClass which is a classified section php program. It has a plugin to make payments to paypal. but I need it to work in a new window, and the link won't do so. Don't suppose anybody sees an issue here? It seems to me that just adding target=_new to this would work. but it doesn't. Still opens the page in the same window. Code: <div class="buttons">
<div class="right"><a id="button-confirm" class="button" onclick="$('#payment_<?php echo $r; ?>').submit();" target="_new"><span><img src='<?php echo paypal_path(); ?>paypal.gif' border='0' /></span></a></div>
</div>
|
|||||||