JavaScript - Auto Resize Banner

http://isensors.com.sg/isensors-GJ/

That's the page I'm working on now, the script I'm using from he http://www.frontpagewebmaster.com/m-89000/tm.htm posted by collide007.

It allows me to resize my iframe when a new page loads in it, it's working fine on Chrome and Firefox. For safari, the iframe expands but does not contract when a smaller page is loaded in. The code doesn't even work in IE.
<script type="text/javascript">

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["contentframe", "newsframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="no"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 3 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<=iframeids.length; i++){
var iframeid = iframeids[i];
if (document.getElementById)
resizeIframe(iframeid)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeid] : document.getElementById(iframeid)
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight+50;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight+50;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script> Could someone kindly help me find the problem? Thanks.

i have this code included within a .php file on my website. I realised that my %age rules defining the width of my website page dont really work once i get to wider sizes so i want to use a fixed width page design using css code (only once wide enough) to achieve this. Please have a look at my code and tell me what im doing wrong i cant find anything wrong with my js. If js is anything like python i may need to change the output from a string to an integer or something along those lines. I can easily just doc.write the width but i cant get it to compare properly


Code:

<script type="text/javascript">
if (document.body.clientWidth > 1280)
{document.write('<link href="wdestyle.css" rel="stylesheet" type="text/css" />')};
else
{document.write('<link href="nrostyle.css" rel="stylesheet" type="text/css" />')};
</script>

I have found a jQuery slide show at http://tobia.github.com/CrossSlide/ which interests me because of its smooth, cross-browser fade transitions. I would like to add a feature which automatically resizes the images proportionally, to fit the browser window. This feature is demonstrated in the Supersized slide show at www.mauitradewinds.com, but I am not satisfied with the quality of fade transition with Supersized -- especially under Safari. I would appreciate any guidance as to how to implement auto-resizing with the Cross-slide plug-in. Additionally, it would help if Cross-slide launched the slide show without waiting for all images to load.

-edit - nevermind. mods plz delete.

Hi' there

Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized?

so i have to use the addEvent() to call the makeBannerAd function which i believe i have done so.... but then i gotta <div id = "bannerBox"> </div> and loop through all the iteams in my adsURL Array and for each item i must create the html fragment
<div class = "bannerAd"> <a href = "url"> <img src = "bannerindex" /> </a> </div>
i must set the z index number to each number ad to the value of the counter index and append the banner ad to the banner Box element.....Append the bannerBox to the documentbody, run the changeBannerAd() every 10 sec



Banners.js

Code:

//this is the global scope here when you declare out side of a function it because global or at the top of the js file
	var nextAd; //this is going to be used to change or show the next banner ad to the web page
	
	
	
	function addEvent(object, evName, fnName, cap) 
	{
			makeBannerAds();
	   if (object.attachEvent)
		{
		   object.attachEvent("on" + evName, fnName);
		}//end if
	   else if (object.addEventListener)
		{
		   object.addEventListener(evName, fnName, cap);
		}//end else if
	}//end function addEvent
	
	function makeBannerAds()
	{
		//this creates a banner box to store the banner ads in
		var bannerBox = document.createElement("div");
			bannerBox.id = "bannerBox";
			
		for(var i = 0; i < document.adsURL.length; i++)
			{
				if(adsURL[i] != <div class = "bannerAd">,
					<a href ="url">,
					<img src ="bannerindex" />,
					</a>,
					</div>)
							{
							 if
								(adsURL[i] = <div class = "bannerAd">,
									<a href ="url">,
									<img src ="bannerindex" />,
									</a>,
									</div>)
											
											 else
											return adsURL[i] = <div class = "bannerAd">,
											<a href ="url">,
											<img src ="bannerindex" />,
											</a>,
											</div>;
											
							
							}//end if
			
			}//end if
				
					
	
	}//end function makeBannerAds

ads.js

Code:

	function storeURL()
		{
			//this creates a new array, the array is called adsUR:
			var adsURL = new Array();
			
			//this stores each item in the array using a index place holder
			adsURL[0] = "testpage0.htm";
			adsURL[1] = "testpage1.htm";
			adsURL[2] = "testpage2.htm";
			adsURL[3] = "testpage3.htm";
			adsURL[4] = "testpage4.htm";
			adsURL[5] = "testpage5.htm";
			adsURL[6] = "testpage6.htm";
			adsURL[7] = "testpage7.htm";
			adsURL[8] = "testpage8.htm";
			adsURL[9] = "testpage9.htm";
			adsURL[10] = "testpage10.htm";
			adsURL[11] = "testpage11.htm";
		
		
		}//end function storeURL

books.html file


Code:

<head>
<!-- 
   
-->
   <title>Online Bookworms</title>
   <link href="bw.css" rel="stylesheet" type="text/css" />
   <link href="bannerstyles.css" rel="stylesheet" type="text/css" />
   
   <script src ="ads.js" type ="text/javascript"></script> <!--calls the external file called slideshow.js -->
   <script src ="banners.js" type ="text/javascript"></script> <!--calls the external file called slideshow.js -->
   
   
   

</head>

<body>
   <div id="page">
      <h1 id="heading"><img src="bwlogo.jpg" alt="Online Bookworms" /></h1>

      <ul id="menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">Reviews</a></li>
         <li><a href="#">Forums</a></li>
         <li><a href="#">Book Swaps</a></li>
         <li><a href="#">OBW Store</a></li>
         <li><a href="#">Author's Corner</a></li>
         <li><a href="#">My Account</a></li>
      </ul>

      <ul id="menu2">

         <li><a href="#">My Reading List</a></li>
         <li><a href="#">Review a Book</a></li>
         <li><a href="#">Join a Discussion</a></li>
         <li><a href="#">Post to a Forum</a></li>
         <li><a href="#">My Mail</a></li>
         <li><a href="#">My Posts</a></li>

         <li class="newgroup"><a href="#">Reading Recommendations</a></li>
         <li><a href="#">Books of the Month</a></li>

         <li class="newgroup"><a href="#">MP3 Downloads</a></li>
         <li><a href="#">Podcast</a></li>
         <li><a href="#">RSS Feeds</a></li>

         <li class="newgroup"><a href="#">Tech Support</a></li>
         <li><a href="#">Comments</a></li>
         <li><a href="#">About online BookWorms</a></li>
      </ul>

      <div id="main">
         <h2>Welcome</h2>
         <p>Welcome to <strong>online BookWorms</strong> &mdash; your location on
            the Web for books, magazines, short stories, poetry, and essays.
            Please explore our online bookstore for the lowest prices on new
            and rare books. Share your love of reading by joining one of our
            many forums and discussion groups. Are you an aspiring critic?
            We welcome book reviews and essays on your favorite authors and
            works.
         </p>
         <h2>News</h2>
         <p>We are very happy to introduce the <a href="#">online BookWorms
            Podcast</a>. The podcast will contain free excerpts from great
            works of fiction and reviews of current books. You can quickly
            subscribe to this new BookWorms feature <a href="#">here</a>.
         </p>
         <p>Take a few moments now to explore our book shelves. And remember to
            patronize our sponsors by clicking the banner ads at the top of the
            page. Enjoy browsing our site!
         <p id="signature">
            <img src="signature.jpg" alt="Helen Ungerstatz" />
         </p>
      </div>

   </div>
</body>

</html>

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,

I'm looking for an option for a rotating banner on a website.

I'd like to have a banner that rotates per visit. I don't mean every time a person returns to a website. I mean person A comes to the site and banner A is displayed. Then person B comes to a site and another banner is displayed.

Is this possible?

Hi,

I've created following script:
Code:

<script type="text/javascript">

banners=new Array; 

banners[1]="http://i33.servimg.com/u/f33/14/73/69/91/110.png"; 

banners[2]="http://i33.servimg.com/u/f33/14/73/69/91/210.png"; 

banners[3]="http://i33.servimg.com/u/f33/14/73/69/91/510.png"; 

banners[4]="http://i33.servimg.com/u/f33/14/73/69/91/310.png"; 

banners[5]="http://i33.servimg.com/u/f33/14/73/69/91/410.png"; 

function ShowBANNERS() {

num = Math.random();
num = 1 + ( num * ((banners.length - 1)-1));
num = Math.round(num);

document.write("<style> #i_logo { background-image : url('" + banners[num] + "'); } <\/style>");
}

ShowBANNERS();

</script>

... And I was thinking if there was a way to create a select/value script, were the user can choose on of the banners inside the select/value - like...
Code:

<select>
  <option value="banners1">1. Banner</option>
  <option value="banners2">2. Banner</option>
  <option value="banners3">3. Banner</option>
  <option value="banners4">4. Banner</option>
  <option value="banners5">5. Banner</option>
  <option value="bannerrotator">Random Banner</option>
</select>

<input type="button" value="submit">

The following option will then choose one valued banner, and will be the new banner on the site, when clicking submit (the bannerrotator value, will rotate the banners, so there aren't one chosed all the time).

I can figure out I also have to use cookies to this, but I aren't the best at it (I only know the basic properties).

Thanks (:

Hi
I am using the following code to create rotating banners. This all works when I fill in links to swf files on all 5 of my fields and then set a limit in the limit field. What I want to be able to do is have the ability to only have one banner field filled in with the rest blank but this breaks the page when the is nothing in the other 4 fields or have 2 filled in etc etc

Code:

<script>
var maxFlashAdNo=100;
adFlashNo= Math.round(Math.random() * maxFlashAdNo);
var logolimit2="<%=requestItem.getFieldValue("iLogo2")%>";
var logolimit3="<%=requestItem.getFieldValue("iLogo3")%>";
var logolimit4="<%=requestItem.getFieldValue("iLogo4")%>";
var logolimit5="<%=requestItem.getFieldValue("iLogo5")%>";


var secflash=logolimit2;
var thirdflash=logolimit3;
var fourthflash=logolimit4;
var fifthflash=logolimit5;


//alert("2=" + secflash);
//alert("3=" + thirdflash);
//alert("4=" + fourthflash);
//alert("5=" + fifthflash);
//alert(adFlashNo);
if(fifthflash>0&&adFlashNo>fifthflash){
document.write("<%=requestItem.getFieldValue("sLogo5").replaceAll("\"","'")%>");
}else if(fourthflash>0&&adFlashNo>fourthflash){
document.write("<%=requestItem.getFieldValue("sLogo4").replaceAll("\"","'")%>");
}else if(thirdflash>3&&adFlashNo>thirdflash){
document.write("<%=requestItem.getFieldValue("sLogo3").replaceAll("\"","'")%>");
}else if(secflash>2&&adFlashNo>secflash){
document.write("<%=requestItem.getFieldValue("sLogo2").replaceAll("\"","'")%>");
}else{
document.write("<%=requestItem.getFieldValue("sLogo").replaceAll("\"","'")%>");
}

</script>

Hi all,

I am using Javascript for rotating 2 images.

In the head section,

var maxAdNo = 1

var adNo

var myAd = new Array()

myAd[0] = '<img src="images/sponsor-box-1.jpg" width="322" height="306" border="0">'

myAd[1] = '<img src="images/sponsor-box-2.jpg" width="322" height="306" border="0">'


In the body,

<script type="text/javascript">
<!-- Begin
adNo = Math.round(Math.random() * maxAdNo)
document.write(myAd[adNo])
// End -->
</script>

I want to rotate these 2 images 50% / 50% i.e. alternate image to be loaded for every page refresh instead of random. What is to be done?

Thank you in advance.

Hi guys,

I need some help.

I'm trying to make a banner in java or jquery.
Idea is


div 1
div 2
div 3
div 4

>> custom div1 button >> custom div2 button >> custom div3 button >> custom div4 button

I've also added an image of something i have in mind... i can do the CSS but i can't figure out a good tutorial.


The closest I found on google was this
http://cssglobe.com/lab/easyslider1.7/02.html

but its with numbers..

Hi everyone.
I am running a short url service with payment...
So now we have 1 full ad advertising and banner advertising.
On Full ad page For users to skip the full ad page they must click on the banner on the header so then go main link.
<a href="{$_WEB_URL}"> is the link on the database tat it has been shortened.
So when guests click on the banner the banner opens in new window but the page does not start to forward to main url.

Can some one help me on this ..?

I tried this : <div class="lb_ad">
<a href="{$_WEB_URL}">
<div onclick="redir()">
<!-- START all AdPeeps.com Code -->
<p align="center">
<script type="text/javascript" src="http://paytox.us/advertises/adpeeps.php?bfunction=showad&amp;uid=100000&amp;bmode=off&amp;gpos=center&amp;gwidth=90&amp;bzone=de fault&amp;bsize=all&amp;btype=3&amp;bpos=default&amp;ver=2.0&amp;btotal=1&amp;brel="nofollow" target=_blank&amp;bbo rder=0">
</script>
<noscript>
<a href="http://paytox.us/advertises/adpeeps.php?bfunction=clickad&amp;uid=100000&amp;bmode=off&amp;bzone=default&amp;bsize=all&amp;btype =1&amp;bpos=default&amp;ver=2.0" rel="nofollow" target="_blank">
<img src="http://paytox.us/advertises/adpeeps.php?bfunction=showad&amp;uid=100000&amp;bmode=off&amp;bzone=default&amp;bsize=all&amp;btype= 1&amp;bpos=default&amp;ver=2.0" alt="Click Here!" title="Click Here!" border="0" /></a>
</noscript>
</p>
<!-- END AdPeeps.com Code -->
</div>
</a>

</div>