Jump to content
xisto Community
Sign in to follow this  
BlueInkAlchemist

Using Jquery Beginners Questions

Recommended Posts

Greetings all,

Lately I've been looking into things JQuery can do for me in terms of development. Specifically, I'm looking at this demo:

http://forums.xisto.com/no_longer_exists/

In this situation, is it possible for the target file being loaded to be defined as a variable instead of a relative or absolute path? Specifically, if there were more than one div on the page, and each div were to contain different external content, how would the same function be used for each div? Thanks in advance.

EDIT: After a tweak or two, the JQuery function on my page looks like this:

$(document).ready(function() {  var x = "theOtherPage.htm ul#favoriteMovies";  $("#loadData").click(function()   {	$(this).text("...One Moment Please...");	 $("#container").append('<div id="favoriteMovies"></div>')					.children("#favoriteMovies").hide()					.load(x, function()					 {					  $("#loadData").remove();					  $("#favoriteMovies").slideDown("slow");					 });   return false;   });});

Looking to see if I can define 'x' outside of the function...
Edited by BlueInkAlchemist (see edit history)

Share this post


Link to post
Share on other sites

Looking to see if I can define 'x' outside of the function...

Since i'm not entirely sure of the purpose of your script, i'll address what i currently can. Go to http://www.w3schools.com/js/js_functions.asp and scroll down to "The Lifetime of JavaScript Variables."

Share this post


Link to post
Share on other sites

Since i'm not entirely sure of the purpose of your script, i'll address what i currently can. Go to http://www.w3schools.com/js/js_functions.asp and scroll down to "The Lifetime of JavaScript Variables."

@truefusion: Bless you. I don't mind working entirely with JavaScript if I can get it to function the way I want.

 

The objective of this project is to display advertising content in a div, parceled out to clients in 30-second increments. Basically, one ad will show within the div for 30 seconds, to be replaced by another. The nature of most adverts means Flash is unable to accommodate this need, and using Ajax or an IFRAME violates Google's terms of service, since we use Google Ads and other clients may do the same or use a similar service with similar terms.

 

So, in essence, the script needs to:

 

1. Define the sources of the adverts

2. Set up and run a 30-second timer

3. Dynamically load, display, and unload the content defined in step 1 according to the increments of the timer from step 2.

 

1 and 2 are simple enough, and here's what I'm working on so far to accomplish 3. The source file is "OtherPage.htm":

 

<div id="someAds"><script type="text/javascript"><!--google_ad_client = "*snip*";/* 300x250, etc */google_ad_slot = "*snip*";google_ad_width = 300;google_ad_height = 250;//--></script><script type="text/javascript"src="http://*snip*/show_ads.js"></script></div>

This is what I want to load via a JQuery function in "QueryTest.html":

 

<html><head><script src="jquery-latest.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {  var x = "OtherPage.htm div#someAds";  $("#loadData").click(function()   {	$(this).text("...One Moment Please...");	 $("#container").append('<div id="someAds"></div>')					.children("#someAds").hide()					.load(x, function()					 {					  $("#loadData").remove();					  $("#someAds").show();					 });   return false;   });});</script><title>Load Test</title></head><body><div id="container"> <a href="#" id="loadData">Click This Link To Load The Ads</a></div></body></html>

Simple, eh? :)

Edited by BlueInkAlchemist (see edit history)

Share this post


Link to post
Share on other sites

you can define x outside that function. All i did was remove it from there and put it before and it still works. I'm not sure how google add works but are you intending to have only one 'ads.html' file that contains all different divs of different adds and pull each one randomly from there or have them all separated in 1 file like ads1.html ads2.html etc.

Either way will depend on how you code it. First off easiest way would be to put the block of code that does the loading into a function and have it called on onload.

body onload='setInterval("myFunc()", 30000);'

how you go about modifying the code to load what depends on what you want. I think that would work.
Edited by sonesay (see edit history)

Share this post


Link to post
Share on other sites

you can define x outside that function. All i did was remove it from there and put it before and it still works. I'm not sure how google add works but are you intending to have only one 'ads.html' file that contains all different divs of different adds and pull each one randomly from there or have them all separated in 1 file like ads1.html ads2.html etc.
Either way will depend on how you code it. First off easiest way would be to put the block of code that does the loading into a function and have it called on onload.

body onload='setInterval("myFunc()", 30000);'

how you go about modifying the code to load what depends on what you want. I think that would work.

There are going to be multiple ad units - for the sake of argument, ads1.html, ads2.html and the like will work for example's sake. Keeping them in separate files that are loaded on demand and unloaded when the next loads would, I believe, cut down on overall load times and allow the ads to run as intended by their owners. Say ads1.html has a 30-second unit and ads2.html has a 60-second unit. If they were loaded onto the same page at the same time, even if ads2.html's content is hidden, when it's shown as ads1.html's content is hidden it'll be showing from the middle of the ad, not the start.

...Did I explain that properly? :)

Share this post


Link to post
Share on other sites
<html><head><script src="jquery-1.2.6.js" type="text/javascript"></script><script type="text/javascript">function loadAds(){	// generate random number (0-1).	var iRandom = Math.floor(Math.random()*2);	var x;	if(iRandom == 0)	{		x = "Ads1.html div#someAds";	}	else if(iRandom == 1)	{		x = "Ads2.html div#someAds";	}			// original loading code.	$("#loadData").text("...One Moment Please...");	$("#container").append('<div id="someAds"></div>')					.children("#someAds").hide()					.load(x, function()					 {					  $("#loadData").remove();					  $("#someAds").slideDown("slow");					 });}</script><title>Load Test</title></head><body onload='setInterval("loadAds()", 1000);'><div id="container"><a href="#" id="loadData">Click This Link To Load The Ads</a></div></body></html>

That works but its just using a random number generator so you may end up seeing ad 1 being displayed and then ad 1 again :). Also I set the timer to 1000 so you can quickly see it changing. One thing though you said you aren't allowed to use Ajax with Google ads? Well technically I think this would be classed as Ajax because its doing essentially the same thing but using jQuery objects. I can see why this would be considered cheating in some way allowing you to display more ads to visitors then usual. I'd be careful also since retrieving a new ad every 30 seconds may trigger some of their alerts if they have any :).

Archive.zip

Share this post


Link to post
Share on other sites

<html><head><script src="jquery-1.2.6.js" type="text/javascript"></script><script type="text/javascript">function loadAds(){	// generate random number (0-1).	var iRandom = Math.floor(Math.random()*2);	var x;	if(iRandom == 0)	{		x = "Ads1.html div#someAds";	}	else if(iRandom == 1)	{		x = "Ads2.html div#someAds";	}			// original loading code.	$("#loadData").text("...One Moment Please...");	$("#container").append('<div id="someAds"></div>')					.children("#someAds").hide()					.load(x, function()					 {					  $("#loadData").remove();					  $("#someAds").slideDown("slow");					 });}</script><title>Load Test</title></head><body onload='setInterval("loadAds()", 1000);'><div id="container"><a href="#" id="loadData">Click This Link To Load The Ads</a></div></body></html>
That works but its just using a random number generator so you may end up seeing ad 1 being displayed and then ad 1 again :). Also I set the timer to 1000 so you can quickly see it changing. One thing though you said you aren't allowed to use Ajax with Google ads? Well technically I think this would be classed as Ajax because its doing essentially the same thing but using jQuery objects. I can see why this would be considered cheating in some way allowing you to display more ads to visitors then usual. I'd be careful also since retrieving a new ad every 30 seconds may trigger some of their alerts if they have any :).

Great solution, the functionality and theories are sound, only problem is the ad content won't display. I alternate between some static text (an unordered list pulled from one page) and the JavaScript for Google Ads listed above, and while the ul items come in fine, the div holding the ad module does not. The ad page loads fine by itself, so the div is not a hindrance to it on that page.

Share this post


Link to post
Share on other sites

can you post the full div and JavaScript content so I can have a look at?

The test page itself:
<html><head><script src="jquery-latest.js" type="text/javascript"></script><script type="text/javascript">function loadAds(){	// generate random number (0-1).	var iRandom = Math.floor(Math.random()*2);	var x;	if(iRandom == 0)	{		x = "theOtherPage.htm ul#favoriteMovies";	}	else if(iRandom == 1)	{		x = "theOtherOtherPage.htm div#adspace";	}	// original loading code.	$("#loadData").text("...One Moment Please...");	$("#container").append('<div id="content"></div>')					.children("#content").hide()					.load(x, function()					 {					  $("#loadData").remove();					  $("#content").show();					 });}</script><title>Load Test</title><body onload='setInterval("loadAds()", 10000);'></head><div id="container"> <a href="#" id="loadData">Click This Link To Load My Favorite Movies</a></div></body></html>

TheOtherPage.htm:
<ul id="favoriteMovies"><li style="font-weight: bold; list-style-type: none;">My Favorite Movies</li><li>The Boondock Saints</li><li>Lord of the Rings</li><li>Smokin' Aces</li><li>Batman Begins</li><li>The Dark Knight</li><li>Deja Vu</li><li>Big Trouble in Little China</li><li>Shoot 'Em Up</li></ul>

TheOtherOtherPage.htm:
<div id="adspace"><script type="text/javascript"><!--google_ad_client = "*snip snip*";/* 300x250, Ad Module */google_ad_slot = "*snip snip*";google_ad_width = 300;google_ad_height = 250;//--></script><script type="text/javascript"src="http://*snip snip*/show_ads.js"></script></div>

Share this post


Link to post
Share on other sites

I need to see the full TheOtherOtherPage.htm code. I understand you might not want to show your add client id or what ever but I need to see how it works fully to be able to try and help you out.

Share this post


Link to post
Share on other sites

I need to see the full TheOtherOtherPage.htm code. I understand you might not want to show your add client id or what ever but I need to see how it works fully to be able to try and help you out.

Just sent you a PM with the uncensored code.

Share this post


Link to post
Share on other sites

Ok I think I know whats causing the problem. When you retrieve the DIV content from the other page with your ads there it has JavaScript. The JavaScript is the actual code that renders the ads so why its not working is the code is just being pulled in and not executed like it would if you were to open the page on its own. I checked in firebug too and the response from the Ajax :) call is just the plain source and no executed JavaScript. The only way for it to work is if you can figure out a way to execute it before pulling it into your main page but at this stage I have no clue.Good luck with finding a solution.

post-45102-1227553466_thumb.png

Share this post


Link to post
Share on other sites

Ok I think I know whats causing the problem. When you retrieve the DIV content from the other page with your ads there it has JavaScript. The JavaScript is the actual code that renders the ads so why its not working is the code is just being pulled in and not executed like it would if you were to open the page on its own.
I checked in firebug too and the response from the Ajax :) call is just the plain source and no executed JavaScript. The only way for it to work is if you can figure out a way to execute it before pulling it into your main page but at this stage I have no clue.

Good luck with finding a solution.


Thanks so much for your help, sonesay.

Do you think it might be possible to call the code using Flash? I tried a couple of solutions that way but so far I haven't had any success.

Share this post


Link to post
Share on other sites

I haven't spent enough time working with flash so I cannot answer that question. I suggest you try searching around and post any links of any examples you find. Maybe someone who is much more experienced in flash can answer this question for us.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.