DIVs inside FeaturedContentGlider "gildecontent" not working

**cybergirl** · 11-29-2012, 09:59 PM

My page is setup to retrieve gliding contents from an external file on my server. I need to place a customized Google map in a DIV within <div class="glidecontent"> but when I do, all the content within the DIV disappears. How can I resolve this?

I do not encounter this problem when everything, including the gliding contents, are contained on the same page. Any help would be greatly appreciated!

**bernie1227** · 11-30-2012, 06:03 AM

Do you have some code We can see or a live website?
If you don't have it live, you could put in on:
http://jsfiddle.net/

**jscheuer1** · 11-30-2012, 07:09 AM

.
Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread.

Sounds like you have script content on a AJAX fetched page. That's generally not a good idea, but can often be worked around. If you can put that content on the page though, that's almost always the best solution.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out, and:

Please include a link to the DD script(s) in question in your post. See this post for more information.

**cybergirl** · 11-30-2012, 06:44 PM

Sorry about the post in the incorrect place and in the wrong format. Here, let me try again:

Script: Featured Content Glider
http://www.dynamicdrive.com/dynamici...tentglider.htm

And you're right - I have the script content on an AJAX fetched page. I need to do that so that the client can update just the content in a WYSIWYG editor. Here is the URL of my page: http://qddm.ca/dynamicdrive/. The content is on http://qddm.ca/dynamicdrive/content.htm. You will notice that the div containing the map is commented out. If I don't do that, all the text in each content div disappears and only the images are visible. The page where everything works because all the content is included on it is: http://qddm.ca/dynamicdrive/main.htm.

Thanks for taking the time and trouble to help with this.

**jscheuer1** · 12-02-2012, 05:18 PM

There are two problems. One the maps are not initializing. Two whether they do or not, the layout is messed up.

The second one is because the act of importing the content puts an extra </div> tag in there when the map tag is used. To fix that, on the content page uncomment the map tags and get rid of the self closing slash in their div tags, ex:

Code:

<!-- <div id="map_canvas" style="width:340px; height:300px; float:right; padding: 0 0 10px 5px; border:0;" /></div>-->

becomes:

Code:

<div id="map_canvas" style="width:340px; height:300px; float:right; padding: 0 0 10px 5px; border:0;"></div>

Do that for all ten of them. It's invalid markup anyway (having a self closing slash on a div element), the page that works must be error correcting for it.

On the page that's importing content, get rid of the highlighted:

Code:

<body onload="initialize()">

Using a text only editor like NotePad, open up the featuredcontentglider.js file and find this code (around line #41):

Code:

	getremotecontent:function($, config){
		config.$glider.html(this.ajaxloadingmsg)
		$.ajax({
			url: config.remotecontent,
			error:function(ajaxrequest){
				config.$glider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
			},
			cache: false,
			success:function(content){
				config.$glider.html(content)
				initialize();
				featuredcontentglider.setuptoggler($, config)
			}
		})
	},

Add the two highlighted lines. Save and use that version. What that will do is import the content and then initialize its maps and then set it up as a glider. I've tested it and it works here in Chrome, Firefox, and IE 9. I'll test in some others when I have more time.

Now, I'm thinking, that's great for what you currently have. But how do we add new buildings with new maps? I'm thinking that, since jQuery is already on the page, and that there are certain commonalities of each map's init, we could detect each map after the content arrives and run a generic map init function for each one, plugging in values from the map tags, ones that are there already and/or ones we can put there. Probably only the id and lat/long need to be passed in from the tag.

But let's get the basic idea working for you first.

BTW, the page has two versions of jQuery on it, one right after the other. Only the second one would be used and I'm not sure if either is the optimal version. Again, let's not worry about that yet. Let's first get the basic idea working for you as it does for me.

The browser cache may need to be cleared and/or the page refreshed to see changes.

**cybergirl** · 12-03-2012, 04:31 AM

Thanks a million, John. That worked perfectly!I didn't need to clear the cache or refresh the page. Tested on IE 9 and 10, Chrome, Safari and Firefox and it worked fine on each. I'll test with a new building and a new map to see what happens but further guidance from you would be more than welcome. As you could probably tell, I am a novice as far as Javascript is concerned.

Also, what version of jQuery would you recommend?

And once again, thanks very much for your help. It is truly appreciated!

**jscheuer1** · 12-06-2012, 06:17 AM

Generally the latest jQuery is the best as long as it works because it usually affords greater flexibility. I tend to stay away from the first and second version in a series though. Often the bugs aren't worked out yet. 1.8.3 seems to work well with the page. So I've setup a demo for you using it:

glidermap.zip

Most of the changes are documented inside the files using HTML, css, and javascript comments. I also validated the HTML and put things in the preferred order in the head.

The big innovation is that the maps now are all created using a common function, rather than repeat the same function over and over. I also devised a way to get all the information for each map from the markup. I took the name of the building from the alt attribute of the img tag that immediately precedes the map tag in each glidecontent div. I got the street address from the toc anchor's (link that triggers the building's content to glide up) parent p element's text which follows its first <br> tag for each one. As a result you cannot change the markup that you've established for those things. And the tocs must be in the same order as the glidecontent divs. The id I of course got from each map tag itself. That leaves just the latitude, longitude and the code for the 'street view'. These I made attributes of each map tag on the content.htm page, ex:

Code:

<div id="map_canvas" data-lat="53.563043" data-lng="-113.612448" data-streetcode="otkrc" style="width:340px; height:300px; float:right; padding: 0 0 10px 5px; border:0;" ></div>

This all might be easier to understand once you look at the code in the two files in the attached archive. If you have any questions, just let me know.

I don't know much about Google Maps, but I wonder if you can get the street view using the longitude and latitude. If so, you wouldn't need that street code. And I looked at a few of them. They all plop you down in the middle of the street looking down the street, not at the building. I wonder if there's a way to point the user initially at the building.

**cybergirl** · 12-06-2012, 07:52 PM

Thank you, thank you, thank you!! What more can I say? I'm totally floored by the fact that you took so much time with this and don't quite know how to express my appreciation. Thank you!

I've downloaded the file and will now study it and play around with it. I'll certainly be in touch if any questions come up.

Re: Google maps - I'm new to them too. And Google's documentation is not very helpful. At least, I found it hard to follow. I'm still researching ways to get street view using latitude and longitude like you suggest. Have found no instances yet so for now what I have seems to be the only way to go, unfortunately.

And once again, thanks a million.

Thread: DIVs inside FeaturedContentGlider "gildecontent" not working

Thread Tools

Search Thread

DIVs inside FeaturedContentGlider "gildecontent" not working

Similar Threads

"featuredcontentglider not defined" in IE8?!?

"Floating" divs that scroll with page, with special conditions.

inside "div" larger than outsite "div"

"overflow: hidden" not working on firefox when the div contains flash inside

target="_top" doesn't work from inside a document included with an OBJECT tag

Bookmarks

Bookmarks

Posting Permissions