changing dynamically the "onlink" id in css - javascript

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.

Related

Current menu item

I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.

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).

Change div content with link in another div

i have a menu bar with links which are in the header. when you click the link, i want to just change the content in the main div. i'm thinking of doing it in php, but you will have to reload the page. So i need to do it in javascript, but i dont know javascript.
here is my menu code in the header div:
<ul id="nav">
<li>Enter Information</li>
<li>View Records</li>
<li>View Upcoming</li>
</ul>
If you think about using PHP, I guess that you have to load dynamic content. For this, I advice you to use AJAX
The easiest is to use a framework, like the famous Jquery. Example here
here i am assuming that you get your content with a function call as content()
var list=document.getElementById('nav');
var links=list.getElementsByTagName('a');
var header=document.getElementById('header');
for (var i=0;i<links.length;i++)
{
links[i].onclick=function() {
header.innerHTML=content(); //here you can use something else to generate the content
}
}
You want to use jquery to build something like this. If you are serious about building web apps you need to learn how to use it (or a similiar framework like MooTools)
For this particular problem I would use an existing menuing system, here's the first list of jquery based menus that I found, but there are many more.
You don't need any anchor elements. W3 example
<script>
$(document).ready(function() {
$('.menu').click(function() {
$("div").load('somecontent.txt');
});
});
</script>
<ul>
<li class="menu">Enter Information</li>
<li class="menu">View Records</li>
<li class="menu">View Upcoming</li>
</ul>
Depending on the type of content, you have a few options available to you. If you need to load a new page into the main content, you can use iframes and some javascript. If you need to load simple text, you can simply use javascript.
Based on your feedback, you'll do something like this (note- I'm shooting from the hip regarding syntax, but this is generally what your code will need to look like):
Link 1
<iframe id="MainContent">
</iframe>
<script>
function UpdateIFrame( newPageAddress ){
document.getElementById("MainContent").contentWindow.location = newPageAddress;
}
</script>
In order to dynamicly load content (e.g. from a server using php/sql) without having to reload the website Ajax is exactly what you need.
Inlineframes (mentioned before), however, should not be used for they are deprecated.
W3schools provides a very basic but straightforward tutorial on Ajax.

Facebook FBML Questions

I have a client looking to create a Facebook page very similar to http://www.facebook.com/enchantment
Inside the "Enchantment" page, you can see that there is a list of sub-tabs, "Enchantment, Blurbs, Excerpts, Order". I'm looking to create the same style, but I can't seem to figure out how. I've looked through the code and it appears they're using the "FBML Static" application for the main tab, and there's a ton of javascript to show and hide the tabs that I highly doubt was all written by hand.
Does anybody have any experience with this? Thanks in advance.
You will have to create a Facebook application via the My Applications link in the developers page. After you have filled in all the of the fields your app page should be up and running.
Now you need to begin developing the actual app on your website (you will have to specify the link in your application settings). Go through the Developer documentation, as they have quite a good documentation.
So, in order to actually create those tabs, its actually very simple, all you have to do is utilize FBMls clicktoshow and clicktohide attributes. Essentially all you need is the following code:
Link 1
Link 2
Link 3
<div id="nav1">
//content for first tab
</div>
<div id="nav2">
//content for second tab
</div>
<div id="nav3">
//content for third tab
</div>
When Facebook 'imports' this (only via FMBL, I'm unsure if this works with iframe) it conveniently does all the work and converts the above links to something like:
<a href="#" clicktoshow="nav1" clicktohide="nav2, nav3" class="test"
onclick="(new Image()).src = '/ajax/ct.php?app_id=7146470109&action_type=3&post_form_id=fd583a515fe76b1d3d300e974aba931d&position=16&' + Math.random();FBML.clickToHide("app7146470109_nav2");
FBML.clickToHide("app7146470109_nav3");
FBML.clickToHide("app7146470109_nav4");FBML.clickToHide("app7146470109_nav5");FBML.clickToHide("app7146470109_nav6");
FBML.clickToHide("app7146470109_nav7");FBML.clickToHide("app7146470109_nav8");FBML.clickToShow("app7146470109_nav1");return false;">Test</a>
But, you only have to worry about the first part, as Facebook takes care of the second. As you can see it is a fairly straightforward process.
They're probably just capturing the click event, and simply showing and hiding different divs based on that. You can create a static FBML tab, and do something like this inside of it:
<ul>
<li><a id="afoo" href="#foo" onclick="gotoFoo(this); return false;">Foo</a></li>
<li><a id="abar" href="#bar" onclick="gotoBar(this); return false;">Bar</a></li>
</ul>
<div id="foo">
This is content of the foo tab
</div>
<div id="bar" style="display:none;">
This is content of the bar tab
</div>
<script>
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
var afoo = document.getElementById('afoo');
var abar = document.getElementById('abar');
var gotoFoo = function(target) {
abar.removeClassName('selected');
bar.setStyle({display: 'none'});
afoo.addClassName('selected');
foo.setStyle({display: 'block'});
};
var gotoBar= function (target) {
afoo.removeClassName('selected');
foo.setStyle({display: 'none'});
abar.addClassName('selected');
bar.setStyle({display: 'block'});
};
</script>
I haven't created any styles for you, but what the code above does is it hides and shows the "foo" and "bar" divs depending on what you click on. It also adds the class name "selected" to the anchor tag that was clicked on so that you can set some styles to give a visual cue as to which tab is currently active. You'll definitely want to add some styles to pretty this up.
I hope this helps.
You cannot see directly the code since the code written in FBML gets parsed by Facebook before it's delivered to the browser and transformed into HTML; that's why you see a lot of JavaScript.
Actually it doesn't look so complex so I believe it was actually written by hand with JavaScript.

Show hidden div with bookmarks

Basically I hide all of the answer divs on the page, but I want to show a div if the a user has clicked a bookmarked link to it.
Here's the javascript code
<script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".faq_answer").hide();
//toggle the componenet with class msg_body
$(".faq_question").click(function(){
$(this).next(".faq_answer").slideToggle("normal");
});
});
</script>
The resulting HTML for the section is
<li>
<div class="faq_question">
Question
</div>
<div class="faq_answer">
<p>Text to show</p>
</div>
</li>
EDIT
The question was how do I do it...Figured it out though after the answers here.
window.location.hash will give you the value "#" in your URL. You can use that to build a selector.
// if visiting /index.php#item1
$(window.location.hash).show(); // $('#item1').show();
You can look for the #url-blah in the URL in javascript and display the corresponding section?
I would assume you would need to add a class to the div that hides it and shows it based on the click function
I dont really see a question here though
To accomplish this you are going to most likely need to change your document structure a bit, as you cannot reference any of the specific "faq_answer" items individually.
Typically what I would do here is use a specific ID for each of the answers, then you can use javascript with a show action to be able to toggle visibility.
For an example of my HTML and jQuery code, you can view this page, look at the version history section.

Categories