We Keep Coding

Basic jQuery on hyperlink clicked print content

I was hoping for a little guidance if possible. On my website I have a small area that shows "Most Popular" and underneath I have 4 hyperlinks: Blogs, Tips, News, Videos. I want it so that if the user clicks the hyperlink it prints the appropriate content below, ideally without loading the entire page but not essential.
I'm new to jQuery so if someone could help me that would be super.
Thank you.

Have a look at jQuery's AJAX, especially the load method: http://api.jquery.com/load/
In a nutshell, this method makes a request to a URL, and writes the response into any element you specify. In your case, I would likely:
1) Create a URL which returns the HTML snippet you want to display e.g:
<div><p>Popular Blog 1</p><p>Popular Blog 2</p></div>
2) In the javascript on your page, add something like this:
$("a#myPopularBlogsLink").click(function() {
$("#loadAndReplaceContentInThisElement").load("http://mywebsite.com/some-url-returning-data/);
});
3) If you read through the jQuery docs, you may be able to adapt this better to your situation - for example, passing a parameter in the .load() method to choose which page you want to load data for, etc.
It's hard to say what the best practice would be without more details on your situation - how much flexibility you have server-side with URLs, how much control you have over your content, and if you need search engines to index the content (they will NOT index content loaded through AJAX).

Using jQuery, you could try something like this:
<script type="text/javascript">
$(document).ready(function() {
$("#alink").click(function () {
$("#aframe").attr("src", $(this).attr('href'));
return false;
});
});
</script>
<a id="alink" href="http://www.google.com">Google</a>
<div id="adiv">
<iframe id="aframe" src="" width="100%" height="300"></iframe>
</div>

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.

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.

JQuery - nested ul/li list, keep expanded after reload of page [duplicate]

This question already has an answer here:
How to remember last state with Jquery?
(1 answer)
Closed 7 years ago.
I have a nested ul/li list
<ul>
<li>first</li>
<li>second
<ul>
<li>Third</li>
</ul>
</li>
... and so on
I found this JQuery on the interweb to use as inspiration, but how to keep the one item i expanded open after the page has reloaded?
<script type="text/javascript">
$(document).ready(function() {
$('div#sideNav li li > ul').hide(); //hide all nested ul's
$('div#sideNav li > ul li a[class=current]').parents('ul').show().prev('a').addClass('accordionExpanded'); //show the ul if it has a current link in it (current page/section should be shown expanded)
$('div#sideNav li:has(ul)').addClass('accordion'); //so we can style plus/minus icons
$('div#sideNav li:has(ul) > a').click(function() {
$(this).toggleClass('accordionExpanded'); //for CSS bgimage, but only on first a (sub li>a's don't need the class)
$(this).next('ul').slideToggle('fast');
$(this).parent().siblings('li').children('ul:visible').slideUp('fast')
.parent('li').find('a').removeClass('accordionExpanded');
return true;
});
});
</script>

you can save the current open menu item in a cookie $.cookie('menustate')
similar: How to remember last state with Jquery?

The same way you manage state when passing data from page to page:
Querystring
Cookies
Form post / hidden field
Ajax to and from the server

I'll assume you dont like any of the previous answers since none of them have been accepted and present you with a less "correct" way of doing it. Before I get flamed to death, this is just my attempt at doing it with pure js/jq. You could parse out the URL (http://example/subsite) and select whichever piece is relevant (for the sake of ease, lets assume /subsite is what you want).
$(document).ready(function(){
var pathname = window.location.pathname;
var splitpath = pathname.split("/");
$("#nav-" + splitpath[1] + "").children().class('current')
});
Build your ID's into something like <li id=nav-subsite> and use the parsed out URL to build a selector for the correct tab/li/whatever. Is it weird? Sure, but I figured I'd throw in my $.02

This is not easily doable in JavaScript alone.
Either the server sets the accordionExpanded CSS class correctly when the page is reloaded (directly into the source HTML). This would require the server knows what <li>s the user had clicked on, naturally.
Or you avoid reloading the page at all and do partial page updates through AJAX calls. This is what most "modern" websites do.
Or you do what Glennular suggests and save state info to a cookie.
Your choice.

I'm not sure what your menu is supposed to be doing exactly, but if it's a nav menu, you could add a brief bit of markup to your body element for each base page:
<body class="home"> <!-- for homepage -->
<body class="about"> <!-- for about page -->
<body class="etc"> <!-- for etc. -->
And have jQuery look for this marker and make a decision on how to handle the list tree once the page loads based on which page it is. It wouldn't require setting any cookies, and so long as they have JS enabled (which every user should at this point), everything's kosh magosh.