|
JavaScript - Background Loading Problem
Hi all, I'm new to the site just have a quick question.
I'm currently working on a wordpress site, however everytime I click a page, the background only loads half way.. could it be a problem with a preload script or something of that sort? I've looked all over my codes and cannot find a valid reason.. the website is http://www.offhandmag.com/ppenny Please let me know what you guys think.. i need to figure this out today. Similar TutorialsHi, everyone. I've just finally adjusted the way that the background images is laid out. my problem is that the image seems to load in original size and then align to the screen's width. I'm using a javascript code that I got from http://stackoverflow.com/questions/1...g-aspect-ratio and it is working the way I want it to, mostly. My problem is that I'm not sure how to keep the image from exceeding 100% height of the windows without squashing the aspect ratio? I also need to figure out how to fix the visible action of the image being loaded in it's original size? If we can't get the image to load WHILE at the size I want it to be, can we at least 'hide' the image until the loading have been done? I tried to tweak the codes to include the height limitation but it did not seem to have made any differences. This is my first time actually using javascript so please be easy on me, heh My site is at http://www.lost-ear-studio.com (if you refresh the site, you will see random background images being swapped out using php). Code: <script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width > myImage.height){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
Code: <img id="bg" src="randombg.php" onload="resizeToMax(this.id)"> Code: #bg{
position:fixed;
left:0px;
top:0px;
z-index:-1;
}
Hi guys, I am new here and am looking for a bit of help! I am building a website for a friend and am using Javascript. When I preview the site from my computer in Chrome/Firefox then all the JS elements render correctly. I am using jCarouselLite by the way and have used HTML Boilerplate too. However, when I upload the site the Carousel does not work... Also, I seem to have a lot of scripts kicking around inside the html so I will give you a list of those, but here are my external JS files so my question before posting up all the code are 1.) what is the problem with rendering the JS elements live on t'internet, and 2.) can I reduce the amount of JS files/scripts to help page loading times? css_browser_select.js modernizr-1.7.min.js jquery-1.6.1.min.js jcarousellite.js functions.js Code: $(document).ready(function(){
// Activate the main slider
$("#mainSlider").jcarousellite({
btnNext: "#sliderBtnNext",
btnPrev: "#sliderBtnPrev",
visible: 1
});
});
plugins.js script.js jquery.placeholder.min.js and this is the code inside my HTML: Head: Code: <!-- CSS: implied media="all" -->
<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="stylesheet" media="handheld" href="css/handheld.css">
<!-- CSS Browser Compatibility -->
<script src="js/css_browser_select.js"></script>
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/libs/modernizr-1.7.min.js"></script>
/Head and this is at the bottom of the Body: Code: <script src="js/libs/jquery-1.6.1.min.js"></script>
<script src="js/libs/jcarousellite.js"></script>
<script src="js/libs/functions.js"></script>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.6.1.min.js'>\x3C/script>")</script>
<!-- scripts concatenated and minified via ant build script-->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- THIS MAY NEED TO BE REDONE! Placeholder for Forms -->
<script src="js/libs/jquery.placeholder.min.js"></script>
<script>
if (!Modernizr.input.placeholder){
$('input[placeholder], textarea[placeholder]').placeholder();
}
</script>
<!-- Form Submit -->
<script>
function submitForm()
{
document.contactPhone.submit();
}
</script>
<!-- Google Analytics Script - Change UA-XXXXX-X to be your site's ID -->
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
<!-- Bookmark Script -->
<script>
function bookmark_us(url, title){
if (window.sidebar) // firefox
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else if(document.all)// ie
window.external.AddFavorite(url, title);
}
</script>
Hi , Pls solve it Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading. what might be the problem ..pls solve it .......its too urgent thanks in advance nagaraja kharvi Hello everyone, I am just beginning to learn javascript, and I am trying to create a little game where when a user hovers over a picture it changes, and things like that. At the moment I have been trying to make it so that the pictures tile so they fill the whole page area, dynamically so that it changes depending on the users browser size (px). The images have many attributes so I can't just tile them with css as they need to be actual elements. The problem is the code doesn't run, and I can't work out why. I think all the lines that require it have semi colons and its all correct. Forgive me if the answer is clear but as I said I only just started learning. Anyway, on with the code: Code: <!doctype html>
<html lang="en">
<head>
<title>Hi, I'm a button.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="javascript">
function mainDo() {
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
document.write('Width = ' + winW + 'Height = ' + winH);
winW=winW/127;
winH=winH/128;
winW=Math.round(winW);
winWs=winW;
winH=Math.round(winH);
winHs=winH;
document.write('Width = ' + winW + 'Height = ' + winH);
while (winH>0) {
while (winW>0) {
document.write('<img onMouseover="this.src=\'img/hibutton_orange.png\'" onClick="this.src=\'img/hibutton_green.png\'" ondblClick="this.src=\'img/hibutton_blue.png\'" src="img/hibutton_blue.png">');
winW=winW-1;
}
document.write('\n' + '<br>');
winW=winWs;
winH=winH-1;
}
}
</script>
</head>
<body onload="maindo()">
</body>
</html>
I have added a booking form to a website with belongs to fastbooking. You can see a temporary website here. http://www.kohkoodguide.com/ It works perfectly fine in Mozilla Firefox, Google Chrome, Opera and Safari but it does not load on Internet Explorer. On the other browsers the form loads todays date and the year is generated but on IE the date stays on 01-01 and no year is generated. I'm using wordpress as a cms. I think the code that is not loading is Code: <body onLoad='start();'> But I'm not sure. The code of the year is Code: <select name='fromyear' class="input" onChange='update_departure();'> <option value="0"></option> </select> But since it's no just the year I assume its the onload code. I tried to add the onload to the header function like this Code: <body onLoad='start();' <?php if(function_exists('body_class')) body_class(); ?>>
So now wordpress generates the following code when it loads the page Code: <body onLoad='start();' class="home page page-id-6 page-template page-template-default logged-in"> But sadly the date still does no load on Internet Explorer. I'm out of ideas, anyone? I am using this code... simplified for example Code: [
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>
<a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');"
<div id="content"></div>
Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks I have written this code but when i include code for pop calender in a row, then button was disabled, So please help me i just struck in this problem from last one week Thanking you, L.Rajesh rajboy13@gmail.com my code is Code: function addRow()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var sl = document.createElement('input');
sl.type = 'text';
sl.name = 'sln' ;
sl.id = 'sln' + iteration;
sl.value = iteration;
sl.size = 3;
sl.readOnly = true;
cellLeft.appendChild(sl);
var cellRights= row.insertCell(1);
var elm= document.createElement('input');
elm.type = 'text';
elm.name = 'txtMdesc' ;
elm.id = 'Mdesc' + iteration;
elm.size = 20;
cellRights.appendChild(elm);
var cellRightt= row.insertCell(2);
var elmn= document.createElement('input');
elmn.type = 'text';
elmn.name = 'txtMqty' ;
elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy');
elmn.id = 'Mqty' + iteration;
elmn.size = 20;
cellRightt.appendChild(elmn)";
var cellRightu= row.insertCell(3);
var elmno= document.createElement('input');
elmno.type = 'text';
elmno.name = 'txtMbill' ;
elmno.id = 'Mbill' + iteration;
elmno.size = 20;
cellRightu.appendChild(elmno);
}
the button code is : Code: </br>
<fieldset style="width:60%;" align="center"> <legend>
<SCRIPT LANGUAGE="JavaScript">
function deleteRow(b){
document.getElementById('table_formcontainer').deleteRow(b)
}
function CompareDates1()
{
var str1 = document.getElementById("start").value;
var str2 = document.getElementById("edate").value;
var dt1 = parseInt(str1.substring(0,2),10);
var mon1 = parseInt(str1.substring(3,5),10);
var yr1 = parseInt(str1.substring(6,10),10);
var dt2 = parseInt(str2.substring(0,2),10);
var mon2 = parseInt(str2.substring(3,5),10);
var yr2 = parseInt(str2.substring(6,10),10);
var date1 = new Date(yr1, mon1, dt1);
var date2 = new Date(yr2, mon2, dt2);
if(date2 < date1)
{
alert("To date cannot be greater than from date");
return false;
}
else
{
alert("Submitting ...");
document.form1.submit();
}
return true;
}
function addRow()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var sl = document.createElement('input');
sl.type = 'text';
sl.name = 'sln' ;
sl.id = 'sln' + iteration;
sl.value = iteration;
sl.size = 3;
sl.readOnly = true;
cellLeft.appendChild(sl);
var cellRights= row.insertCell(1);
var elm= document.createElement('input');
elm.type = 'text';
elm.name = 'txtMdesc' ;
elm.id = 'Mdesc' + iteration;
elm.size = 20;
cellRights.appendChild(elm);
var cellRightt= row.insertCell(2);
var elmn= document.createElement('input');
elmn.type = 'text';
elmn.name = 'txtMqty' ;
elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy');
elmn.id = 'Mqty' + iteration;
elmn.size = 20;
cellRightt.appendChild(elmn)";
var cellRightu= row.insertCell(3);
var elmno= document.createElement('input');
elmno.type = 'text';
elmno.name = 'txtMbill' ;
elmno.id = 'Mbill' + iteration;
elmno.size = 20;
cellRightu.appendChild(elmno);
}
function delRow1(c)
{
document.getElementById('tblMed').deleteRow(c)
}
function validate()
{
var tbl = document.getElementById('tblMed');
var lastRow= tbl.rows.length-1;
var a;
for (a=1; a<=lastRow; a++)
{
var def = document.getElementById('sln'+ a);
var ghi = document.getElementById('Mdesc'+ a);
var jkl = document.getElementById('Mqty'+ a);
var jkl1 = document.getElementById('Mqty'+ a).value;
var abc = document.getElementById('Mbill'+ a);
var gpexpdt2 = document.getElementById('tblMed').value;
var str11 = document.getElementById("sdate").value;
var str12 = document.getElementById("edate").value;
var tranday = jkl1.substring(0,2);
var tranmon = jkl1.substring(3,5);
var tranyear = jkl1.substring(6,10);
var trandate = new Date(tranyear,tranmon,tranday);
var tranday2 = str11.substring(0,2);
var tranmon2 = str11.substring(3,5);
var tranyear2 = str11.substring(6,10);
var trandate2 = new Date(tranyear2,tranmon2,tranday2);
var tranday3 = str12.substring(0,2);
var tranmon3 = str12.substring(3,5);
var tranyear3 = str12.substring(6,10);
if ((document.getElementById("AC").value == ""))
{
alert ( "Please enter Amount Claimed." );
document.form5.AC.focus();
return false;
}
else if((document.getElementById("Amb").value == ""))
{
alert ( "Please enter Relationship" );
document.form5.Amb.focus();
return false;
}
if ( document.form5.Treat.selectedIndex == "")
{
alert ( "Please select Treatment Type" );
document.form5.Treat.focus();
return false;
}
else if((document.getElementById("C10").value == ""))
{
alert ( "Please enter Total " );
document.form5.C10.focus();
return false;
}
else if((document.getElementById("C11").value == ""))
{
alert ( "Please enter Place " );
document.form5.C11.focus();
return false;
}
else if((document.getElementById("start").value == ""))
{
alert ( "Please enter from date" );
document.form5.start.focus();
return false;
}
else if((document.getElementById("edate").value == ""))
{
alert ( "Please enter to date" );
document.form5.edate.focus();
return false;
}
if (ghi.value.length == "")
{
alert('Please enter Bill No');
ghi.focus();
return false;
}
if (jkl.value.length == "")
{
alert('Please enter Date');
jkl.focus();
return false;
}
var trandate3 = new Date(tranyear3,tranmon3,tranday3);
if (tranmon > 12|| tranmon < 1)
{
alert('Invalid Month In Date Field .Enter as dd-mm-yy');
jkl.focus();
return false;
}
if (tranday > 31|| tranday < 1)
{
alert('Invalid Date In Date Field Enter as dd-mm-yy');
jkl.focus();
return false;
}
if(trandate2.getTime() > trandate.getTime())
{
alert("Bill date should be less than From date");
jkl.focus();
return false;
}
if(trandate3.getTime() < trandate.getTime())
{
alert("Bill date should not be greater than End date");
jkl.focus();
return false;
}
if (abc.value.length == "")
{
alert('Please enter Amount');
abc.focus();
return false;
}
var str3 = document.getElementById("AC").value;
var str4 = document.getElementById("Amb").value;
if(parseInt(str3) > parseInt(str4))
{
alert('Amount Claimed must be less than Amount Balance');
document.form5.AC.focus();
return false;
}
var alertsay = "";
if (form5.Treat.value > 4)
{
alert("Sorry You Can Not This Employee Data In Database..........");
form5.Treat.focus();
return (false);
}
var checkOK = "0123456789";
var checkStr = abc.value;
var allValid = true;
var allNum = "";
for (e = 0; e < checkStr.length; e++)
{
ch = checkStr.charAt(e);
for (f = 0; f < checkOK.length; f++)
if (ch == checkOK.charAt(f))
break;
if (f == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{
alert("Invalid Data Please enter only digits'");
abc.focus();
return (false);
}
}
return true;
}
var count =0;
function Check()
{
if (!validate())
return true;
addRow()
}
function removeRow1()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
if (lastRow > 1) tbl.deleteRow(lastRow - 1);
}
function deleteRow(node) {
if (rowNum > 1) {
var td = node.parentNode;
while (td.tblMed.toLowerCase() != "tr")
td = td.parentNode;
td.parentNode.removeChild(td);
rowNum = rowNum - 1;
document.form1.count.value = rowNum;
}
else {
alert ("You cannot delete the last remaining row");
}
}
</script>
<b><font color="#153E7E"border="1">Bill Details</b></legend><br>
<table id="tblMed" width="75%">
<tr>
<th>Sl.No.</th>
<th align="left">Bill No</th>
<th align="left" onClick="cal1xx.select(document.forms[0].edate,'anchor1xx','dd-MM-yy'); return false;" NAME="anchor1xx" ID="anchor1xx" onFocus="self.status='Select Treatment Start Date';return true; " onBlur="self.status='';return true;">Bill Date(DD-MON-YY)</th>
<th>Bill Amount( <span class="WebRupee">Rs.</span> )</th>
</tr>
</table>
<tr><br/>
    <input name="button" type="button" value="Add Bill" onClick="Check()"/>
................................................................................................ i want popup calender in 3rd row of the table please help and if any one got solution then please please mail it to my gmail id : rajboy13@gmail.com 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 So I've done a ton of research and tried every fix I could think of (jQuery fixes, htc behaviours, etc) and nothing has worked. It seems most of the fixes are built for just changing the background color. I just can't get it to work in IE6! Even if I just got the Javascript to change the state without rollovers (for IE6) that would be okay. The way it's setup is that there's an image in 3 states in it (inactive, rollover, active), setup on the y-axis. So when a user rolls over it shoves the background down 111px to show the rollover, etc. I know IE6 doesn't support hover on anything except anchors. This works in IE 7/8 FF 2/3 Safaris and most likely everything else: http://www.muchomungo.com/CrowdTwist..._template.html Relevant CSS Code: li {
list-style:none;
float:left;
}
ul {
list-style:none;
margin:0;
padding:0;
}
ul#toolbar a {
height: 111px;
display:block;
text-indent:-9999px;
font-size:0px;
line-height:0px;
outline: none;
}
#toolbar li.unselected:hover {
background-position:0px 222px;
}
#toolbar li.selected {
background-position: bottom;
height: 111px;
z-index: 10;
}
#toolbar li.unselected {
background-position: top;
margin-left:0px;
}
CSS file JS Code: var currentSection = 'dashboard';
var newpane = function(gotoLink){
if (currentSection == gotoLink) {
return;
}
lastSection = currentSection;
currentSection = gotoLink;
// Change the section highlight.
// Extract the root section name, and use that to change the background image to 'top', revealing the alt. state
document.getElementById(currentSection).className = "selected";
if (lastSection) {
document.getElementById(lastSection).className = "unselected";
}
}
Thanks for any help! Hello all, I want to set dynamically a div's background image when the page loads, so I have my code like so: javascript code: window.onload = init; function init(){ $(document).ready(function(){ $('#button1').css('background', 'url(../imagenes/buttonNormal.jpg)'); $('#pg1').css('color', 'black'); $('#pg1').css('font-weight', 'normal'); }); } My CSS stylesheet is like so: #buttonsWrapper { position:relative; margin 50px 0px 0px 0px; } .buttons { text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:17px; font-weight:bold; color:#FFF; } #button1 { margin: 31px 0px 0px 0px; } #button2 { margin: -43px 0px 0px 195px; } #button3 { margin: -43px 0px 0px 390px; } #button4 { margin: -43px 0px 0px 585px; } #button5 { margin: -43px 0px 0px 780px; } #button1, #button2, #button3, #button4, #button5 { width:172px; height:33px; /* 33px */ padding-top:10px; text-align:center; } #button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover { background-image:url(../imagenes/buttonNormal.jpg); background-repeat:no-repeat; background-position:top; } My HTML sourcecode is like so: <div id="buttonsWrapper"> <div id="button1"><a href="#" id="pg1" class="buttons">link1</a></div> <div id="button2"><a href="#" id="pg2" class="buttons">link2</a></div> <div id="button3"><a href="#" id="pg3" class="buttons">link3</a></div> <div id="button4"><a href="#" id="pg4" class="buttons">link4</a></div> <div id="button5"><a href="#" id="pg5" class="buttons">link5</a></div> </div> The thing is that the background image that I'm calling (../imagenes/buttonNormal.jpg) is not loading for some reason... what am I doing wrong? Thank you so much in advance... Here is my script -- Applied in <head> Code: <script language="JavaScript">
var bgImage = new Array(); // don't change this
bgImage[0] = "images/aboutus_1.jpg";
bgImage[1] = "images/1.jpg";
bgImage[2] = "images/2.jpg";
bgImage[3] = "";
function changeBG(bgImage)
{
document.body.background = backImage[bgImage];
}
</script>
And here is the code im using that is not working within <body> Code: <body>
<div id="map"></div>
<div id="bf_container" class="bf_container">
<div id="bf_background" class="bf_background">
<img id="bf_background" src="images/background/default.jpg" alt="image1" style=" display:none;"/>
<div class="bf_overlay"></div>
<div id="bf_page_menu" class="bf_menu" >
<h1 class="title">Fujiyama<span>Japanese</span></h1>
<ul>
<li><a href="#" onClick="javascript:changeBG(1)" data-content="home"><span class="bf_background"></span><span>Welcome</span></a></li>
<li><a href="#" onClick="javascript:changeBG(0)" data-content="about"> <span class="bf_hover"></span><span>About us</span></a></li>
this goes on, however, it does not change the background when clicking on "Welcome" or "About us" Links. Where I want "About us" to load image#0 in the index and "Welcome" to load image #1. Any help would be greatly appreciated. Thanks, Cross 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 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! I have an entirely javascript page that once it is done it still looks like it is loading. This is more of an annoyance than anything harmful. The page can be viewed at http://mikedombrowski.com/mRNA.html Thank you for your help in advance. Hi I am currently doing a photography site. I would like to do a 'portfolio' page, but would like to pre-load the images so that they appear on-screen faster. Do I need to connect code to <body onload>? hello, I'm trying to load the ads on my site dynamically and have ran into an issue and was hoping for some help. First - I can get the ads to load using vanilla javascript with the code below. Code: var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", OAS_url + "adstream_sx.ads/" +sitePage + "/" + uniqid() + "@" + pos);
var ifrmId = "ifrm_" + uniqid();
ifrm.setAttribute("id", ifrmId);
ifrm.setAttribute("marginwidth", 0);
ifrm.setAttribute("marginheight", 0);
ifrm.setAttribute("frameborder", 0);
ifrm.setAttribute("scrolling", 0);
ifrm.setAttribute("height", container.scrollHeight + (container.offsetHeight - container.clientHeight));
ifrm.setAttribute("width", container.scrollWidth + (container.offsetWidth - container.clientWidth));
container.appendChild(ifrm);
But since the site is using jquery I wanted to develop it out that way. So I have the following code, Code: iRandom = oas.uniqid();
sAdURL = opt.url + 'adstream_mjx.ads/' + opt.sitepage + '/1' + iRandom + '@' + sPos + '?' + opt.query;
$('<iframe />', {
src: sAdURL,
id: sPos
}).appendTo(thisAd);
I figured the reason this isn't working is the difference between appendChild and appendTo and the fact that things are jquery objects. So again the top code block renders the ads and the lower code block just shows the javascript code from the ad provider. Any help to get this to work in jquery would be grateful. Thanks for some reason I can't get this code to load... Code: <script type="text/javascript">
alert("test");
windowBody = document.getElementById("windowBody");
windowBody.style.height = (frameHeight - 250) + "px";
</script>
that should load when it loads the file foot.php foot.php should be included onto the bottom of all of my labs (and it is) my labs are opened up with Ajax... but the script its not loading at all... someone help =[ the web site is http://opentech.durhamcollege.ca/~in...rittains/labs/ sorry for the poor description I'm having a hard time describing this error lol is there a way to after thye page load add an image. So maby loading it in the background and just showing it when you click a button?
Is there a way to load up an external JS file outside of the head tag? I've got an "AJAX" web app that's loading several pages simply by changing the innerHTML property of a single div. The JS source is getting to be rather large, so I'd like to split it up into manageable, organized portions. Is there some way to, using javascript or PHP, load another javascript into the browser dynamically?
|
|||||||