Develop Reference

Single page website and one different logo per div?

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

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.

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');
});

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/

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.

JQuery calls function that shouldn't be called onclick?

Have a look at this JSFiddle: http://jsfiddle.net/kZ3Af/25/
I have the base navigation pinned down nicely. However when I try to click any of the navigation items, the whole menu dissapears? What's that about?

Why are you doing
$('.navcontent').hide();
See update 30.
[Two minutes later...]
Ok, I think I get it: you want to switch between both list interior and exterior. I restructured your HTML a bit (don't put <div>s into <a>s), that's why your styling is a little bit off. Then I changed the selector as Steven Lu suggested: try update 36

You're calling $('.navcontent').hide(); which hides all your <ul> with the class navcontent which is why the whole menu disappears.

Your statement:
$('#column1 a').click(function(){
switchlist($(this));
});
Is matching the inside content of ALL links, causing your switchlist function to be fired.
You will need to wrap your top nav with a new id and change the the selector to something like
$('#topnav a').click();

You call $('.navcontent').hide(); in your click handler. Just remove that and it should work.

select direct anchor childs: $('#column1 > a').click

jQuery show list items

I have two ul's that when the top li is clicked it shows the others below and hides another opened in other ul's.
My problem is I had to add a View All link beside the main li which I want to direct the users to a view all page while still allowing them to click main li to display the list.
I have put another a tag beside the main li's but now I cant get the show feature too work. Not sure what might be wrong.
I am not a great at traversing the dom and I know I have the siblings worng.
http://jsfiddle.net/ukkpower/En7KV/8/

EDIT: Sorry, I missed the hide all others requirement. Thanks for the comment. Please look at the link now and that issue should be resolved.
Note that I've wrapped the lists in a div called _sidenav. I much prefer this approach to looking for siblings as it's a bit easier to read and interpret at a glance and has less room for confusion in the future.
I think I understand what you want. Take a look at this fiddle:
http://jsfiddle.net/CU9zg/3/
I'm assuming the View All link is suppose to take you to another page, while the main li for a list acts like an accordian, hiding or showing the other items when clicked.
$('ul li.cat-item', $('#_sidenav')).hide();
$('.cat-item', $(this).closest('ul')).toggle();

Try this - http://jsfiddle.net/En7KV/10/
$('a.show_list').on('click', function(e){
e.preventDefault();
$(this).parent().siblings().toggle();
$(this).closest('ul').siblings().find('li a.show_list').parent().siblings(':visible').hide();
});

CSS-sprite menu and jQuery addClass() method

I've created CSS sprite menu based on this tutorial:
http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Now I'd like to assign .selected class to the 'a' which was clicked as last one. I've added sipmle script:
<script>
$("a").click(function(){
$(this).addClass("selected");
});
</script>
but the class .selected appears only during loading the page. After loading whole page menu item returns to its normal state. Could you help me with this issue? TIA
Have a nice day:)

Clicking a will take you to a different page, so this event is not gonna work for you. To add selected class to the current link you have to code like below:
<script>
$(function(){ //short form of $(document).ready(function(){
$("a").each(function(){
path=window.location;
path=String(path).split('/')['3']; //if you use absolute URLs then disable this line
if($(this).attr('href')==path)
{
$(this).addClass("selected");
}
});
});
</script>
It will add class selected to link(s) if it's href matches the current URL of the browser.

I believe you are making this more complicated than it needs to be. Here's a quick solution using CSS instead of bulky JS :)
First off, your body tags should have classes assigned to them.
<body class="products">
for example.
Now, in your menu, assign each <li> (I'm guessing/hoping you are using a list, you didn't supply any code so I don't know...) with classes as well.
<li class="products">Products</li>
for example.
Now, in your CSS, simply do this:
body.products ul#menu li.products a { /* Define how the "selected" button should look, here. */ }
These CSS rules will then only be "used" when the visitor is on the "selected" page.
This technique is the msot used as it is without a doubt the quickest and very SEO friendly as the code in your main navigation always stays the same across the site.

How do I dynamically show and hide an entire TabContainer using DOJO?

DOJO seems to have some quirks here. I specifically need to have the TabContainer hidden when the page loads, but then become visible after the user clicks a button. The first thing I tried is setting style.display = "none" to start, and then setting style.display = "block" on the click event. Unfortunately, this only partially works- the page will render an invisible box in the right location/dimensions, but not render the actual contents. The box's contents only get rendered when triggered by something else (for example, going to a different FF tab or suspending/resuming firebug will make the box render).
If the style.display property is set to be visible on page load, everything works fine. You can toggle the display property and it shows or hides the tabcontainer properly. But if it's set to "none" on page load, it screws up.
I tried a workaround of setting the style.display property to "" in the HTML but then immediately setting it to "none" in the Javascript, but it still fails- the change occurs too soon and it needs to happen after the tabcontainer renders (which can take a second or two).
Some stripped sample code:
HTML:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px;
height:100px;display:none;">
</div>
and then the Javascript to show the tab on a user click:
function initTabs()
{
var tabContainer = dojo.byId('tabContainer');
tabContainer.style.display = 'block';
}
How can I dynamically show/hide a TabContainer without having it start in the shown state?

There is solution for this. If you want to show TabContainer calll:
dijit.byId("tabContainer").domNode.style.display = 'block';
dijit.byId("tabContainer").resize();
and use 'none' if you want to hide TabContainer.
This works for me, but that is truth, it is not obvious :)

Old thread but I experienced this same issue and this is how I solved it. First, you cannot use display:none. Per the folks at DOJO, you have to use visibility:hidden with dijits or this will not work. So, you want this:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;visibility:hidden;">
Then, to show this you do the following:
dojo.style("tabContainer", "visibility", "visible");
Now, the problem this poses is what you already found out. This reserves a invisible div in your viewport that is 500px wide. So if you are using a bordercontainer, there will be this empty 500px gap in your page. To resolve this, I had to create my dijits programatically and inject them into a empty div, rather than do what you did and do it declaratively. Hope this helps someone out there.

you should do
dijit.byId("tabContainer").domNode.style.display = 'block'
or perhaps
dijit.byId("tabContainer").domNode.style.visibility = 'hidden';
is even better

Well, I did not solve this problem, but I came up with a workaround...Creating the TabContainer on the click event, instead of creating it hidden on page load and then showing it on the click event.
HTML:
<div id="tabContainer">
</div>
JS:
var tabContainer = new dijit.layout.TabContainer({id:"tabContainer", style:"width:500px;height:200px;"}, dojo.byId('tabContainer'));
//add tabs
tabContainer.startup();

After you set display:block do this:
dijit.byId('tabContainer').resize();
dijit.layout widgets often don't lay themselves out properly if they are display:none (and sometimes even when visibility:hidden). You have to fiddle around in Firebug till you figure out what works!

Tested sucessfully with Dojo 1.10 . Use registry instead of "dijit.byId()". The method resize() only works on the dijit.layout.BorderContainer.
define([
"dijit/registry" // registry
], function(registry) {
var show = true;
if (show) {
domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'block'});
registry.byId("dijitLayoutBorderContainer").resize();
} else {
domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'none'});
registry.byId("dijitLayoutBorderContainer").resize();
}
}

The first thing (setting style.display = "none") is right. In place of
...then setting style.display = "block"
you should just call .set_visible JS method of the ajax TabContainer when "...user clicks a button", like:
$find('<%= Tabs.ClientID %>').set_visible(true);

I used this after setting the style display:block and it works great! This way you don't need to know the ID of the container to resize.
this.getParent().resize();

If you use
dijit.byId("tabContainer").resize();
after you set the display to block it will bring back the tab headers.
You'll save a little bit of javascript if you just use
visibility: hidden;
(although the tabContainer will still take up space on the page)
Another alternative I use pretty frequently is instead of
display: none/block;
I use
height: 0px/auto;
You could also switch the position to absolute and set the coordinates for off screen somewhere too. That's require a lot more css changes than simply doing the height though. That's my preferred method if it works in my situation.
Between these solutions hopefully one will work for you.