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.
Related
I'm developing some webpage which based on html5. On my page I want to have some nav and container with selected content. But I don't want reload page after click on menu position.
At first I thought about placed whole content on site, hide some of them and show after click.
very simple example of this
But there are a lot of content which is hidden and I'm not sure is this a good idea.
Then I think about include a content from .html files by javascript and placed them on site, but my little research tells me this is very bad practice. Some article.
Also this is small, and simple page and I don't want to use any backend technologies.
So, my question is: What is the best practise for doing this?
Any help would be appreciated.
I am not sure what the best way is but I recommend using jQuery's .load() along with jQuery's .ajaxSetup().
First, use .ajaxSetup() so you can cache future ajax requests.
$.ajaxSetup({
cache: true
});
Then, bind a .click() event that uses .load().
Here is the code from my example...
HTML:
<ul id="nav">
<li id="first">first</li>
<li id="second">second</li>
<li id="last">last</li>
</ul>
<ul id="contents">
<li id="content1">first</li>
<li id="content2">second</li>
<li id="content3">last</li>
</ul>
JAVASCRIPT:
$(document).ready(function(){
$.ajaxSetup({
cache: true
});
$('#nav>li').click(function(){
var url = 7;
index = $(this).index();
url += index;
$('#content' + (index + 1)).load('http://fiddle.jshell.net/dirtyd77/jUEEd/' + url + '/show/');
});
});
DEMO:
http://jsfiddle.net/dirtyd77/jUEEd/13/
Hope this helps and let me know if you have any questions!
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>
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.
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.
Can any one tell me how can i implement a auto slider/scroller in my web page. The slider should show dynamic data from a database. (Ex : Hot jobs tab in the plipl.com site's home page (www.plipl.com) . Is there any easy way to do this with jQuery ?
The following is nothing special, just quickly tried it. There's 2 div's that it continously switches between, hopefully give you a head start. You could use the same idea and load content into div's via AJAX.
Code snippet:
css:
div{width:100px;height:100px;}
#container{overflow:hidden;border:1px solid black;}
#left{background:red;float:left;}
#right{background:green;float:right;}
jScript:
$(function() {
//Call scrollContent function every 3secs
var timerUp = setInterval(scrollContent, 3000);
function scrollContent(){
//Toggle top between 100 and 0
var top = $("#container").scrollTop() == 0 ? 100 : 0;
$("#container").scrollTop(top);
}
});
markup:
<div id="container">
<div id="left">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div id="right">
<ul>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
</ul>
</div>
</div>
yes. this is easy.
grab your data from the database. lets say its a list of HotJob objects, each object containing some String fields. Convert each object to a JSON object (which is a hash). Make a list of these JSON objects. use your web framework X to print out the JSON.
Use jquery's getJSON to grab the JSON object. Iterate over each HotJob and write out the information.
Google for "jquery json scroller" and find something that supports JSON out of the box. this does:
http://www.logicbox.net/jquery/simplyscroll/flickr.html
sure, its images, but you can modify it to support text.
jCarousel is a jQuery carousel plugin that supports dynamic content. Although there are no JSON-driven examples on his website, it is easy enough to implement using jQuery's default AJAX functionality.
This is the most robust and customizable carousel I have found thus far for jQuery.
Or if you don't want to use plugins you could use jQuery's AJAX functionality to load in the data, have a div with overflow:hidden and populate it with the data loaded in, only showing a section at a time.
You could then use the setInterval() function to change the $("#container").scrollTop(xx) to move the next set of information into view at a set interval. You could scroll it in or have it popup suddenly, up to you but fairly easy using jQuery.