We Keep Coding

changing dynamically the "onlink" id in css

I made a navigation bar as tabs in my website, and I used the onlink identity to specify the current tab with certain characteristics. My problem is that when I change tabs, I don't know how to make the previous tab id set as none and the current one set as onlink.
Here's the navigation bar code:
<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd')" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');">Double Indicators</a></li>
</ul>
</div>
</div>
There's a simple ways but it's somehow stupid, which is to make each current tab as a whole page and when I click another tab, it's just given the url of clicked tab which goes to the page with specified onlink id, but this requires reloading the whole page that's why I'm seeking a better solution.

You can get the control being clicked by passing this in javascript method
onclick="DisplayDIV('IndPage', this);
function DisplayDIV(IndPage, sourceObj)
{
alert(sourceObj.id);
}

Are you ok do use the jQuery Library?
If so you can avoid putting inline javascript into your html and use toggleClass http://api.jquery.com/toggleClass/

You are trying to use HTML ids in the wrong way.
Ids are unique identifiers for HTML tags. They should not change at runtime.
Instead, apply CSS classes to the tab you want to be visible.
CSS
.hide {display:none;}
Javascript
var indpage = document.getElementById("IndPage");
if (!indpage.classList.contains("hide")) {
indpage.classList.add("hide");
}
Then your HTML at runtime will change to
<div id="IndPage" class="hide">...</div>
This is the standard approach.
And you can do much more with this idea.
I agree that making a tab a whole page is not a good idea. You can use javascript to apply CSS classes to hide and remove that class to show again.
Its also a good idea to learn how to separate your javascript from your HTML. Please read some more tutorials on this. One for instance: Unobtrusive Javascript

Here is a jquery way to do it: http://jsfiddle.net/surendraVsingh/HyAhL/
$('#indHolder a').click(function(){
$(this).attr('id', 'onlink');
$(this).parent().siblings().find('a').removeAttr('id');
});​

I took hints from the answers above and it worked as the following:
function putOnlink(x){
document.getElementById('onlink').id = "none";
$(x).attr('id','onlink');
}
and the tabs code is:
<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd');putOnlink(this);" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');putOnlink(this);document.getElementById('onlink').id='none'">Double Indicators</a></li>
</ul>
</div>
</div>
I just wanna not that in the second link I had to change the id of the first link twice because it didn't work once, maybe cause its id is set in the tag not just when clicked.

Show/Hide On Click

I have one area of space and two body's of text to show. I have two "hyperlinks" above this area and would like to use those to show/hide the text below. Upon first loading the page, nothing will be showing except for the two links. When you click one link it shows the body of text. When you click the other link it will hide the previous body of text and show the new text. There are only two hyperlinks, but I would like for the user to be able to toggle back and forth at their convenience. Is this possible? Previously I was using javascript to unhide the text because they were in two different areas. I am not too experienced with writing code. I have found some other answers on this topic useful but most of them use buttons and on click listeners. Is there a way to do this using a hyperlink? Code examples are very much appreciated!

You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?
so your html will contain:
<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>
Your CSS would contain:
div.hide { display:none; [your properties]; }
div.show { [your properties]; }
and the your JS would look something like this:
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
Does this help at all?

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>
in javascript you can do this if you use jQuery:
function myLinkButtonClick()
{
$("#myDiv").hide();
}
or
function myLinkButtonClick()
{
$("#myDiv").show();
}
Alternatively you can do .toggle
function myLinkButtonClick()
{
$("#myDiv").toggle();
}

Many will agree that using anchor tags to execute Javascript (and do nothing else) is a little on the messy side, since, among other things, it generates a hash tag in the address bar which can confuse users. That isn't to say that they don't have their place in JS execution.
It is very possible to achieve this however. Here is one possible solution:
Link1
Link2
<div id="div1">Text1</div>
<div id="div2" style="display:none;">Text2</div>
<script>
var currentDiv = document.getElementById("div1");
function show(divID) {
var div = document.getElementById(divID);
currentDiv.style.display = "none";
div.style.display = "block";
currentDiv = div;
}
</script>
The script tag defines a variable and a function: currentDiv, which references the currently displayed div element and a show function, which is used for hiding the currently displayed div and showing a new one.
The anchor tags at the top, when clicked, call the show function, replacing the currently shown element with the one the anchor tag specifies.
In order to get elements to show/hide, the code changes the element's CSS display attribute. A value of block shows the div element, and a value of none hides it. The second div has its display property set to none when the page loads. Javascript will change this attribute when a link is clicked.
No, you do not need JQuery to do this, but it can help.

There's a nice jQuery script that does something along these lines, have a look to see if it's any good for you:
http://api.jquery.com/slideToggle/

This is possible, but a more user friendly way of doing this would be with something like jquery tabs. It's very easy to do it with jquery UI's tab feature, it's all HTML markup with a script that just runs .tabs(); as the function on the ID of the tab element.
Here is a link: Jquery Tabs

Tabs would be the best way to do this. There's plenty of tutorials around for jQuery tabs - here's a fairly basic one which outlines the concepts pretty well, and here's a more advanced one (which goes into using CSS to generate rounded corners on tabs).

scrollTo: Getting button images to scrollTo divs

I've not found an answer really specific to my case, which I would imagine is common. I'm looking to add the scrollTo effect to my webpage using jquery (or javascript). I still don't know what is the easiest way granted I've not gotten anything to work. :(
I have a single vertical page. Navigation is on the bottom of each div wrapper. I'd like my button areas to scroll to the divs. As of now, I've styled the buttons to link to the Divs. That's perfect, except, I need to add the animation.
You can have a look at my test page here: my site
I've tried scrollTo, but each of my buttons links to a specific div. Not sure how to modify the plugin to work for me.
I think the next best solution is inserting javascript that animates all links in a window? Definitely don't know where to find that code or how to modify it for my case.
Thanks in advance everyone, and I look forward to a solution from what seems to be a very vibrant community.

Try something like this...
working example: http://jsfiddle.net/BTncy/
$(document).ready(function(){
$('a').click(function(){
var ele_href= $(this).attr('href');
$('html,body').animate({scrollTop: $('#' + ele_href).offset().top},'slow');
return false;
});
});

(Note, from your example you have the javascript in the title attribute, not an onclick, not sure if that's intended)
This doesn't use a plugin, but you could do something as simple as the following using jQuery:
function scrollTo (element) {
var target = $(element).offset();
$('body').animate({scrollTop: target.top}, 'slow');
}
This allows you to just specify the selector to what you want to scroll to, so it could be as simple as:
<div id="more">
<a onclick="scrollTo('#intro_2_container'); return false;" href="#into_2_container">
<img src="images/more.png" border="0" />
</a>
</div>
In my quick testing that seemed to work. (After I fixed the typo of the target element in the scrollTo call)

how return to top button works

I have looked around many places return to top button .when i click on that that takes me to top of the page.
some time some links taking me to particular place how does this works
is this html tack ticks or javascript..can i do this without page loading ?

<a name="top">Top of the page</a>
...
return to top
Note: HTML5 recommends using id="top" rather than name="top"

return to top
The #top bit refers to the id of an element that resides at the top of your page. In most cases this will be something like #header where you have:
<div id="header"></div>
at the top of the page. I'd suggest not using name as I believe the attribute is now deprecated.
Of course, to make it a little more fancy you could use something like:
http://webdesignerwall.com/tutorials/animated-scroll-to-top

If you require to jump to a particular portion of the page by default during page than read on:
Just append the id of the tag with URL.
Eg:
<div id='myID'>Some content</div>
Now if your URL ends with #myID than it shall jump to that portion automatically.

Lastly you can use javascript too:
<a href="#" onclick="document.getElementById('someId').scrollIntoView(); return false</a>
but assuming all modern browsers can do some id it is less needed nowadays

javascript css without frameworks

I want to build a left sidebar that opens content in the right div when you click on a link without using a framework such as jquery.
Can you point me to a resource for this. I haven't been able to find a decent resource in Dynamic Drive or Google.
Also, I need resources to build other javascript and css tools without using frameworks.
Thanks in advance for your help.

For the left opening content in the right, you can set the left links to change the css of the right containers so they can be opened, something like:
<a rel="leftlink" onclick="openContent('content-2')>LInk 2</a>
<div id="content-2" class="visibility: hidden">I am a second right content</div>
And the js function should be:
function openContent(el_id) {
document.getElementById(el_id).style.visibility = "visible";
}
Once again, you will spend less time (and consequently less money) using a framework such as jQuery...

I'm assuming you want to have an iframe on the right and a left div with links that affect the iFrame?
To do this, you only have to change the "src" attribute of an iFrame element.
example:
var iFrameElement = document.getElementsByTagName('iframe')[0];
iFrameElement.setAttribute("src",new_page_source);
You would have to attach events to the links, and those events to change the attribute of the iFrameElement.
Some resources:
http://ajaxian.com/archives/sandboxing-javascript-with-iframes
http://www.devarticles.com/c/a/JavaScript/Working-with-IFRAME-in-JavaScript/
http://www.dyn-web.com/tutorials/iframes/