|
JavaScript - Dynamically Load Html Without Reload?
Hey everyone,
I currently have a grid of thumnails which when clicked will load an image at the top of the page without reloading the page using the following JS: Code: <a href="JavaScript:;" onClick="JavaScript:document.all.Main.src='images/image01.png';"><img src='images/image01thumb.png'></a> This works wonderfully, However, what I need to do now is to produce the same thing but instead of loading an image, load an html file into the page without reloading. Is there a way I could use a similarly simple solution? Thanks Similar TutorialsBasically, what I'm trying to do is set the left margin of an image based on the width of the image, because I want the image to appear centered relative to the link table above. I've been using this code: Code: function insertImageMargin()
{
var marg = getImageMargin();
document.getElementById("comic").style.marginLeft = marg + "px";
}
function getImageMargin()
{
var com = document.getElementById("comic");
return 440 - com.width / 2;
}
What happens is, the first time com.width is 0, but if I hit reload, it is the width of the image, and the code works correctly. How do I get this to work the first time, or can you suggest an alternate approach? I'm slowly scraping away errors from a page im working on and ive found this forum to be very helpful- down to one more that i wanted to post on. sample page is he http://darrenlasso.com/freelance/loo.../lookbook.html Works fine in most all browsers except for IE8- ive even had to include built in ie7 compatibility to get it to work at all. Problem is most likely associated with my js, which is: Code: function ShowPage(frame)
{
frames[0].location = frame+'.html'
}
and html is: Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div>
etc etc.. Which is just something i found online - probly isnt right for what im trying to accomplish. If you go to the site- you navigate by hovering over/clicking the images at the top and that loads a new page into the iframe below. Id like to be able to fix the errors and get it working without having to force ie7 compatibility if possible too. Any help is much appreciated Hi all! I am trying to write code that does the following: 1) creates an array with 6 objects in it. 2) each object has a respective image. 3) from the 6, one object is selected as the "target" 4) all the 6 images are displayed on the screen with a hint as to which of the 6 is the target this time. 5) the user selects one of the 6 he/she thinks is the right object. 6) if the selection is right, his/her score increases by 1, and the whole process loops. The issue is I want the whole process to loop, but I want to store the users score somewhere otherwise it will get reset to 0 everytime the process loops.I've been told I could use cookies for this, but I've been reading a lot that cookies are outdated. Is there an easy way to do this without cookies? The required code is below: Code: <head>
<script language="text/javascript">
var redScore = 0;
....
targets = new Array(); // creating a new array with all the possible elements
....
fisherYates(targets); //randomizing the array
...
var theTarget = targets[0]; // selecting the element at index 0 to be the target
...
...
lots of code that is not relevant
...
...
function redClick( buttonLocation ) {
if(buttonLocation == redLocation){
redScore = redScore +1;
I need something here that will save the score and reload the page
}
}
...
...
</script>
</head>
<body>
<table>
<tr>
<td><img id="red0" onclick="redClick(0)" /></td>
<td><img id="red1" onclick="redClick(1)" /></td>
<td><img id="red2" onclick="redClick(2)" /></td>
...
...
...
</tr>
</table>
</body>
I know this is quite complicated, so any help or direction would be much appreciated. Thank you! Evening all. Here's a snippet: Code:
canvases[i] = document.createElement('canvas');
canvases[i].style.width = '3px';
canvases[i].style.height = '100%';
canvases[i].getContext("2D");
canvases[i].fillRect(1,0,1,table_height);
I'm trying to dynamically create a canvas element. Later in the script it gets attached to the DOM, and this works fine if the last two lines are missing. I end up with a canvas element that is 3px wide and 100% of the containing div tall. However, the last two lines make it crash, with the error report 'canvases[i].fillRect is not a function'. If I change the last two lines to Code: var drawing = canvases[i].getContext("2D");
drawing.fillRect(1,0,1,table_height);
it says 'drawing is null'. Something seems to be going wrong with the getContext bit, because setting the height and width work fine. Any ideas? It behaves the same if I append the canvas element to the DOM before trying to do the drawing as well. This is in FF4.0.1 with a xhtml1-strict.dtd doctype and valid html. Thanks, Chris hi this is santosh first off all thanks in advance to all who r reading my question im in prblm in my project in 1 file i have to first display textbox in html statically which will hav + & - button preceding it , & on click of + button one more textbox should appear dynamically & first textbox + button should disapper & it should hav only - button & the textbox which was dynamically generated now on click of first textbox + button should hav + & - button & it should go on. & on click of - button textbox which is in front of it should get deleted. here i tried alot but my code is showing + & - button to every textbox that is dynamically generated which is not the requirement plz help me im in great need. earlier also i hav submitted my queries & got a fully satisfied result bcoz of that now im having great hopes from u & this site plz reply as early as possible waiting for ur reply again thanks in advance That's right, I want to load a random html file from a list into a another div. Does anyone knows any example, please? It would be very helpful. Thanks Is there a way onclick to load external html into a DIV tag, but without iFrame usage?
Hi. I am new here. I wanted help for a JavaScript code. You might think I'm lazy for not writing it myself, but the truth is I am not a JavaScript coder. I just have a really simple website and I am trying to do something for which I know JS is required but I don't know how to do it. I've also searched around but couldn't find the appropriate code. What I want to do is to make an html page load a different background image every time it refreshes. I will have a list of background images and I want to be able to add in this list, without having to change anything else in the codes after I do this (I think this is made by making an array of images and by putting .length somewhere in the codes, but I don't know exactly how I should do this). I already know how to do an external file (.js) and link to it from my .html page. Now I want the code to put in the .js file, and the code to put in the <body> of my .html file. Please help me Thanks Hi all Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now? I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load. Example of how the tabs look. Code: <div class="tabbertab">
<h2>Australia_____</h2>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
<caption class="highlight_Red">澳洲 Australia
</caption>
<tr>
<td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc
the other tabs look the same. LT This script displays a link to a registration/login form that loads in a light box for Joomla. I've been goin nuts trying to figure out how to get this to load on page load with a delay. Anyone know how to get this done? PHP Code: <?php JHTML::_('behavior.mootools'); $document = JFactory::getDocument(); $document->addStyleSheet(JURI::base() . 'media/system/css/modal.css'); $document->addScript(JURI::base() . 'media/system/js/modal.js'); $document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});"); $user = & JFactory::getUser(); $uri = JFactory::getURI(); $url = $uri->toString(); $return = base64_encode($url); ?> <div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden"> <a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a> </div> <?php if ($user->get('guest')) :?> <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" onclick="SqueezeBox.fromElement(this); return false;" rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a> <?php else: ?> <?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?> <br> <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a> <?php endif; ?> <script type="text/javascript"> function LB_onLogout() { var form = new Element('form'); form.setProperty('method', 'POST'); form.setProperty('target', '_self'); form.setProperty('action', 'index.php'); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'option'); input.setProperty('value', 'com_user'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'task'); input.setProperty('value', 'logout'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'return'); input.setProperty('value', '<?php echo $return; ?>'); form.appendChild(input); $E('body').appendChild(form); form.submit(); } </script> This is my dilemma and I am not sure if I am handling the right way, so please suggest a new way or provide a valid answer so that I may achieve my goal. Thanks in advance for your help in solving this matter. In short I have a single "A.html" page that uses AJAX to reload in "B.php" into a <DIV id='bDiv'> every second and "C.php" into another <DIV id='cDiv'> with no reloading. The code in B.php generates a random number between 1 and 100. If the number generated is less than 10, I want <DIV id='cDiv'> to refresh its content. I have tried a number of tricks, I could not find anything in jQuery so if there is please point me to the correct function calls. I have a index page on which there are several iframes which point to pages from a tomcat server. Sometimes when the index page loads, most of the iframes display session expired error. When I refresh the page, all iframes load properly. I want to reload the page twice whenever I come to that page initially. I also want to reload that page twice when I come to it from another page. Any ideas are welcome. I have tried the following in the onload event ----------------- if(window.location.search.indexOf('reload')<0) window.location.replace(window.location.href+'?reload'); --------------- function loaded() { if (!navigator.fudge) { navigator.fudge = 0; } navigator.fuge++; if (navigator.fudge>1){navigator.fudge=0} else{location.reload()}; } ------------- if(readCookie('reloaded')!='Yes') { createCookie('reloaded','Yes',1); window.location.reload(); } else eraseCookie('reloaded'); function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } --------------------------- several meta tags to get the page each time from the server e.x. <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="-1"> hello im working on my senior design project for my electrical engineering class. and part of the project is to upload an image via php (which ive written and it works great) but when the image is loaded into the same directory as the html file (which is supposed to display the image everytime a new image is uploaded) the image stays the same it doesnt show the new image. but i kno the new image has been uploaded because i can see it my web server. this is the code Code: <html>
<head>
<title>Human Cam</title>
<script type = "text/javascript">
function refresh() {
var refreshTime = 5*1000; //5000ms
var thisImage = "Lighthouse.jpg"; //the image location
var today = new Date(); //the current time
//add the time to the end of the image string
//to make a unique url:
document.images["pic"].src=thisImage+"?"+today;
//reload if the images are loaded:
if (document.images) {
window.onload=refresh;
}
//IF the time is up reload the image
t=setTimeout('refresh()', refreshTime);
}
</script>
</head>
<body onload="refresh()">
<center>
<h2>human cam</h2>
<img src="Lighthouse.jpg" id="pic">
</center>
</body>
</html>
If multiple pages reference the same external JS sheet, does the sheet reload every time you go to a new page or does it stay in memory?
I have cpa gateway on a site that when the customer completes a function of the gateway. The external js of the gateway sends a command to the website to reload the site. Is there any way I can have some sort of event listener to know if that command is sent or not? The problem I'm having is its causing a loop in my existing JS. So it keeps looping the page. I would like to be able to set a cookie when the command is sent and then just have the cpa gateway not load. Thanks all! I haven't been on here in awhile so I have been learning a lot on my own! But this one stumps me Eric. Hi all, I'm new to javascript and html so this may be a silly question, and I'm sorry if I'm posting this in the wrong forum section. Anyway, I need some kind of javascript that will work in a framed page. Right now when I try to navigate to another framed page located elsewhere on my website it's pulling it up in that frame, so it's an ever expanding framed webpage. I need it to simply open the new page up in the whole browser, and not in the individual frame.. Any help is appreciate, (There may as well be an html solution but I couldn't find one)... Thanks. topic has been answered
Hey guys, I have read the past posts and I see that there have been some other people who have had issues with resetting a form. Right now - on this mess in progress - I have a function that runs on body load: Code: function load ()
{
document.forms[0].reset();
}
I know it is running because originally it was an alert, but this is not clearing the form. I need to get all checkboxes and fields to clear. I have also tried: Code: function load ()
{
document.getElementById("regForm").reset();
}
No dice. Any idea what I am missing? The temp page is he http://www.temp1.hangnailproductions...ISTRATION2.php My script is he http://www.temp1.hangnailproductions...egistration.js Thanks guys, sorry if things are clunky and sloppy, I'm doing my best but still pretty bad. -AJ Hi, I am using javascript function for refreshing html page. I have used [window.location.reload(true);] method to reload page from server. This code works if i use it by using Link/button etc. For Example: <input type="button" value="Refresh" onclick="window.location.reload(true);" /> But i want to refresh page when page loads. For Example: <body onload = "window.location.reload(true);> But this time, page reloads in an infinite loop. i don't know why... I have also used following function (against body onLoad) to reload and then stop, but this also does'nt work. function doLoad(){ var timeoutId = setTimeout( window.location.reload(true), 1000 ); window.clearTimeout(timeoutID); } Is there a way to stop reloading page after one refresh ? Thanks... Hi... I am having a problem with the resize... I use the script below to adjust the size of the frame. It works nicely for me. The only problem is, the frame initially jumps to the bookmark, and then on the reload, jumps to the top of the page. Any ideas on how to keep the frame at the bookmark in the web page, instead of jumping back up to the top???? Thanks much in advance.... <script> <!-- function resize_iframe(){ if ( window.frames["MainWindow"].document.body.scrollHeight=0 ) { } else { document.getElementById("MainWindow").height=100 document.getElementById('MainWindow').height=window.frames["MainWindow"].document.body.scrollHeight + 20 } } // --> </script> <IFRAME src="main.htm" frameborder="0" scrolling="no" ID=MainWindow NAME=MainWindow HEIGHT=800 WIDTH=1012 onLoad=resize_iframe();></IFRAME> |
|||||||