1

I'm working on designing an interactive university campus map and need some direction with what I am looking to do.

Link to page: http://www.torontoclassfind.com/startpage.html

I want to be able to click on the links in the top menu (only one link is active so far and it loads and Ajax page in lower left div) and have it swap the building image with a different image to show that it's been selected.

I could do that with the following:

$("#buildinglink1").click(function () {
   $("#buildingimg1").attr("src","highlightedimage.gif")
})

Problem is I need to change back the image to it's default image once another menu link is clicked and a new building is selected.

The building images are located at www.torontoclassdfind.com/building/ and the highlighted images are located at www.torontoclassdfind.com/buildingc/ and the names for the buildings are the same in both locations.

I am thinking of using JQuery's .replace element to do this (ex: jquery remove part of url) which would remove or add the 'c' to the url, but I'm kind of lost from here.

Any tips? I think I need to make a function that would indicated a link is selected and somehow merge it with the .replace element.

0

Just a note: .replace is a JavaScript string (and others) method, not a jQuery method.

I think you're asking to do something like this:

$(".any-building").click(function () {
   //replace all building sources with the unhighlighted version
   $(".any-building").attr('src', function () {
      return $(this).attr('src').replace('buildingc', 'building');
   });

   //replace clicked image with highlighted one
   $(this).attr('src', $(this).attr('src').replace('building', 'buildingc'));
});

A possible downside is that with a lot of images this swap may take a long time or cause some flicker. If that's the case, then you may want to add a class .active to the highlighted image or something like that and only do the swap for that image and the newly clicked one.

4
  • Looks like this is what I'm aiming to do. Although is .anybuilding the class that's being added to menu links or is it being added the image on the map itself? It looks like it's being applied to a click event on the images themselves, whereas I want the class to be applied to the links instead since I intend for the user to click those instead of the building images. – GSimon Dec 16 '12 at 23:27
  • @GSimon .anybuilding is a placeholder; I understand your problem though -- is there any relationship between the a and its building img element? – Explosion Pills Dec 16 '12 at 23:33
  • not currently but I could give the link a class/id that would really similar to the id of the building image on the map. For ex the building images/ids are all 2 letter abbreviations (AH, BR etc.) so I could give the link an id of (AHlink , BRlink). – GSimon Dec 16 '12 at 23:41
  • actually there is one relationship. Each time a link is clicked the map scrolls to where the building is on the map. $('#torontomapholder').scrollTo( $('#LM'), 900, {offset:{top:-200, left:-490}}); So...if I could make the image go back to its default state when a new building is being scrolled too, that could be something? Probably still not the direct relationship you might of been getting at though. – GSimon Dec 16 '12 at 23:55
0

A common learning mistake in jQuery is to focus on ID's for all types of selectors. They work great for very small number of elements however become very unwieldy fast for large groups of elements that can easily be managed by simpler code methods.

You want to be able to write far more universal code where one handler would cover all of your links that share the same functionality in the page .

Example:

var $mainImage=$('#mainImage')

var $buildingLinks=$('.buildingliststyle a').click(function(){
      /* "this" is the link clicked*/
       /* get index of this link in the whole collection of links*/
       var index=$buildingLinks.index(this);
      /* perhaps all the image urls are stored in an array*/
      var imgUrl= imagesArray( index);
      /* perhaps the image urls are stored in data attribute of link( easy to manage when link created server side)*/
       var imgUrl=$(this).data('image');
      /* store the current image on display (not clear how page is supposed to work)*/
      var currImage=$mainImage.attr('src');

       $mainImage.data('lastImage', currImage);/* can use this to reset in other parts of code*/
       /* nw update main image*/
       $mainImage.attr('src', imgUrl);

       /* load ajax content for this link*/
       $('#ajaxContainer').load( $(this).attr('href') );

      /* avoid browser following link*/
       return false;                
});

 /* button to reset main image from data we already stored*/  
$('#imageResetButton').click(function(){
   $mainImage.attr('src',  $mainImage.data('lastImage') );
})

Can see that by working with groups of elements in one handler can do a lot with very little code and not needing to focus on ID

Code above mentions potentially storing image url in data attribute such as:

<a href="ajaxUrl?id=345" data-buildingID="345" data-image="imageUrl-345">Building name</a>
7
  • Oh boy, I like it though I'm going to have to stare at this for a little bit to get it all to sink in. It looks like I may have to create an array as mentioned since there's a lot of images and ajax pages linked to each building. I'm fairly new to JQuery so it might have bit off a bit more than I can chew on this one :K – GSimon Dec 16 '12 at 23:37
  • OK..I'm glad you made last statement because I almost mentioned that what you want to do is not a simple learners level app and why I took th time to add as many comments and several scenarios – charlietfl Dec 16 '12 at 23:56
  • One scenario I didn't mention is getting data for buildings from server on as needed basis also based on some sort of buildingID. For example the html and other data could be delivered at same time and parsed to corresponding parts of page. Lots to think about when structuring such an app – charlietfl Dec 16 '12 at 23:58
  • Agreed and thanks for the comments, I'm familiar with using more complicated scripts but have never written one from scratch. Will probably approach this issue again later when I've learned a bit more about creating, storing and using arrays. – GSimon Dec 17 '12 at 0:05
  • Although it's not ideal for now I might just avoid trying to swap the image back to it's default state, since it's rare that even half of the 130 buildings on the map would be highlighted before page reload. – GSimon Dec 17 '12 at 0:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.