calling a specific div on an external page

**jscheuer1** · 06-06-2012, 03:59 AM

Use the same page for table.htm. New demo:

http://home.comcast.net/~jscheuer1/s...mo_buttons.htm

demo_buttons.htm:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var $buttons = $('#tableselect button');
	$buttons.click(function(){
		$('#resultarea').load('table.htm #table_' + $buttons.index(this));
	}).eq(0).trigger('click');
});
</script>
</head>
<body>
Choose Table:
<div id="tableselect">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
</div>
<div id="resultarea"></div>
</body>
</html>

**oldmanInAz** · 06-06-2012, 04:05 AM

Thanks again. That is just what I need.

I will post a working model tomorrow.

**jscheuer1** · 06-06-2012, 05:55 AM

Here's a version with persistence (a cookie):

http://home.comcast.net/~jscheuer1/s...ons_cookie.htm

demo_buttons_cookie.htm:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var cook = {
		set: function(n, v, d){ // cook.set takes (name, value, optional_persist_days) - defaults to session if no days specified
			if(d){var dt = new Date(); 
				dt.setDate(dt.getDate() + d);
			d = '; expires=' + dt.toGMTString();}
			document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
		},
		get: function(n){ // cook.get takes (name)
			var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
			return c? unescape(c[2]) : null;
		}
	},
	$buttons = $('#tableselect button'), i;
	$buttons.click(function(){
		$('#resultarea').load('table.htm #table_' + (i = $buttons.index(this)));
		cook.set('tableselected', i);
	}).eq(cook.get('tableselected') || 0).trigger('click');
});
</script>
</head>
<body>
Choose Table:
<div id="tableselect">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
<input type="hidden" value="0">
</div>
<div id="resultarea"></div>
</body>
</html>

Refresh the page after choosing a different table.

**oldmanInAz** · 06-09-2012, 01:19 AM

I have need of a script that will do the following:

You are on a page named index.html.
You see a link and click on it.
Instead of being taken to that page, the item comes to you.

Let's say on page1.html I have 3 items.

Link1 calls up only item1 on page1.
Link2 calls up only item2 on page1.
Link3 calls up only item3 on page1.

DD has several fine scripts that I could use.
I do like the new sidepanel script the most.
As they are written, you need a single page for each item.
Using the DD approach, I would need 3 seperate pages.

Why? What's wrong with having only one page and 3 items on that page?

I really don't want to write 1,000 seperate pages when a handfull would do the same job.

**ajfmrf** · 06-09-2012, 01:24 AM

you need to explain a bit more.I have no idea what you are trying to ask.

At least give us a link to one of the pages you are talking about

**keyboard** · 06-09-2012, 01:42 AM

You could do this in four ways.

Option 1 - Each link triggers a javascript function to hide all the other content and only display what you want it too (Disadvage being if they have no javascript, nothing would work).

Option 2 - You could use a get variable on the page (http://www.example.com/index.php?includePage=pathtopapgetoinclude.php) then just use include (a php function) to include that page. You'd have to reload the page each time though, and you'd need php.

Option 3 - Use php and ajax to get the contents of the page and then display it. You wouldn't need to reload the page and if they have javascript disabled, you can just give them a link to the page instead. You'd need php.

Option 4 - You could use javascript to change the src attribute on an iframe. If javascript is disabled, just give them a link to the page. You wouldn't need php, but you'd have to be willing to put up with the iframe

Do you have php at your disposal?
Does this have to be 100% compatible with every browser (javascript)?

If you answer those, we could probably suggest the best method for you!

**oldmanInAz** · 06-09-2012, 01:56 AM

http://1littleworld.net/test/1960/sidepanel.html

When a link is clicked, the sidepanel displays.
But shows all the tables on that page. I only want the related table for that link to display.

The page for the sctusl table is:
http://1littleworld.net/test/1960/table.htm

**jscheuer1** · 06-09-2012, 09:05 AM

.

oldmanInAz - When asking about a Dynamic Drive Script, please post in the Dynamic Drive scripts help area and include a link to the script. I've moved this thread there and merged it with another similar thread of yours.

I'm assuming you mean:

http://www.dynamicdrive.com/dynamici...xsidepanel.htm

If so, with a small modification to that script (using a text only editor like NotePad, around line #49 change the highlighted line):

Code:

			if (loadtype == "iframe"){
				ddajaxsidepanel.$contentarea.html('<iframe src="javascript:false" style="border:0; margin:0; padding:0; width:100%; height:100%"></iframe>')
				ddajaxsidepanel.$contentarea.find('iframe:eq(0)').attr('src', url)
			}
			else{
				ddajaxsidepanel.$contentarea.load(url)
			}
		}
	},

to:

Code:

				ddajaxsidepanel.$contentarea.load(unescape(url))

This will allow you to specify an id selector separated by a space as part of the href:

Code:

<a href="table.htm" rel="ajaxpanel">Running Gun</a>

for example would become (notice the added space, and no space (only a comma) between the two selectors these are both important points):

Code:

<a href="table.htm #table_0,#table_1" rel="ajaxpanel">Running Gun</a>

Important Note: This will only work with AJAX imports, not with the data-loadtype="iframe" type links. And the script code in the head of table.htm:

Code:

            <script type="text/javascript" src="js/audio-player.js"></script>  
            <script type="text/javascript">  
                AudioPlayer.setup("player/player.swf", {  
                    width: 350,
                initialvolume: 100						  
                });  
            </script>

will not be brought over because only the table you've selected gets imported. You could put that script in the head of the 'top' page (sidepanel.html) though. That way it should be available to the content you're importing, at least in theory. If not we can make other arrangements for that part. But it might not be needed, it looks like the audio player object loads just fine without that script. I can't see how, but it looks like it is.

Edit: In local testing, using this method appears not to work with the Flash audio. I have a solution that works with it, but it's a bit complicated. I'll see if it can be simplified and, either way post it here soon.

But, if thepage is live, it might work simply by placing the script on the 'top' page as mentioned, try that and see. Because if that works, it's much easier that way.

Thread: calling a specific div on an external page

Thread Tools

Search Thread

The Following User Says Thank You to jscheuer1 For This Useful Post:

calling an item from another page

Bookmarks

Bookmarks

Posting Permissions