-1

I'd like to have a different logo on each "page" of my single page website http://goo.gl/16XdA (each page has a separate div). Is it possible, and how? Many thanks

Greg
  • 3,025
  • 13
  • 58
  • 106
  • What do you mean by logo? All I can think you mean is favicon, in which case no, you can't have more than one for a single web page – Andy Aug 05 '12 at 19:01
  • @Andy: No, he means...logo. Top left image? – Purag Aug 05 '12 at 19:01
  • Oh right.. I figured someone who created that site would know how to replace an image – Andy Aug 05 '12 at 19:03
  • @Andy: Well he used multiple plugins, so it's not exactly a custom job. – Purag Aug 05 '12 at 19:04
  • @Andy It is quite off-topic, but it would be possible to change the favicon dynamically: http://stackoverflow.com/questions/4875689/is-it-possible-change-favicon-on-site-when-users-change-themes – Jonny Burger Aug 05 '12 at 19:19

4 Answers4

1

That site is pretty nice, I don't understand why changing the logo would be hard for you.

Here is a simple way to do it, there are many.

<li class=""><a onclick="changeLogo();" href="#team">Team</a></li>
<script type="javascript/text">
  function changeLogo(){
   var logoImg = document.getElementById("logo").children[0];
   logoImg.src = "newsource.jpg";
  }
</script>

I would suggest pre-loading the various logos so that the switch is instantaneous.

Travis J
  • 81,153
  • 41
  • 202
  • 273
  • @Purmou - :D Well it is still visually appealing. – Travis J Aug 05 '12 at 19:05
  • Oh, I agree. Parallax scrolling is a really nice layout option. – Purag Aug 05 '12 at 19:05
  • Thanks - the issue with this is that if people scroll down with clicking on the menu items the logo image would not change, right? – Greg Aug 05 '12 at 19:09
  • @Greg - Well, the issues with this exact implementation could be numerous in production depending on your site's flow. The point was just to show an example of how you could change the logo from one point. You will need to determine which paths lead to the logo changing and then handle those paths with a change of the `` through javascript or some similar means. – Travis J Aug 05 '12 at 19:11
1

What have you try? You can add event to your navigation: when user click on nav item, it change your current logo...

Something like this

$('#nav li').click(function(){
   var selected = $('a', this).attr('href'); // This will return current item # like #team, #activities...
   #change your logo based on selected
   $('#logo img').attr('src', 'your url');
});
James
  • 13,571
  • 6
  • 61
  • 83
  • this will not work for the user scrolling through the page. But it looks like the dom has a active property on the currently selected li. So it may be wiser to check for that and switch the logo accordingly – Khallil Mangalji Aug 05 '12 at 19:06
  • Agreed! Fastest way is to create a logo within your div... Then it will change it self, no more coding, css only (position: absolute) – James Aug 05 '12 at 19:08
  • Thanks - the issue with this is that if people scroll down with clicking on the menu items the logo image would not change, right? – Greg Aug 05 '12 at 19:09
0

You can do this several ways with javascript. I'd shift the background position of a sprite-format image on the click event using jQuery or change the source of the image url altogether. Another method is to just add your individual logos to each of those nicely animated backgrounds you have going there (if you don't mind making the logos page-specific).

http://api.jquery.com/click/
http://api.jquery.com/css/

Kwon
  • 400
  • 3
  • 12
0

You can find which of your divs are currently visible

Check if element is visible after scrolling\

and then set the image in your logo div based on that.

Community
  • 1
  • 1
Khallil Mangalji
  • 471
  • 5
  • 13