Open links on index page within the index page?
I was wondering how I would go about opening a open within the index.html page like in the div layer
I have a 4 column site and for the middle of the index.html I wanna open pages
so it kinda looks like below.
HTML Code:
------------------------------------
| |
| Header |
------------------------------------
|------||--------------------------|
| NAV || |
| | | Middle |
| | | |
| | | |
| | | |
-------- | |
| NAV | | |
| | | |
| | | |
| | | |
| | | |
| | | |
------------------------------------
| FOOTER |
------------------------------------
I wanna open the links in the NAV to the middle but without using iframes or using php
Re: Open links on index page within the index page?
This is what you're looking for.
http://www.w3schools.com/Ajax/Default.Asp
JavaScript will fill in the actual page and render it once it is read, and you're using AJAX to make a call to the server to get the actual page.
Re: Open links on index page within the index page?
Well Obviously Saddly this is useless as there is no exsample to learn from I learn from seeing a source not from reading, Im a Hands on kinda person Im see if I can ask some place else who will give me a hand and not a link to a site I was already aware of before I posted here half the sites on google I looked at its just not what im looking for
Re: Open links on index page within the index page?
Here's a bare bones sample... Please view the source and I'll go over the important bits...
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
This includes the jQuery Javascript framework. Google hosts a copy of it for developers to include, or you can download it from the jQuery site and host it on your own site. I highly recommend it for anything complex in Javascript.
Code:
<ul id="myNav">
...
<div id="myDiv">
These IDs are important because you'll use them to assign event listeners to the links, and the area to swap out the content when it switches.
Then the real work horse here is the bit of Javascript at the end.
This is simply the jQuery equivalent of "do the stuff in here when the page is finished loading."
Code:
$("ul#myNav a").click(function(){
This uses the CSS identifier "ul#myNav a" (all a elements inside of the ul with id of "myNav") to get your relevant links, and assign an event handler for when someone clicks on them.
Code:
var getPage = $(this).attr("href");
$(this) refers to the link that was clicked, and .attr("href") gets the value of it's href attribute.
Code:
$.get(getPage,"",function(data){
This does an AJAX request to the page you identified in the previous line (the variable getPage). The "" is where you would put data you want to send to the page you're retrieving, but you don't need that in this case, so it's a blank string. The function(data) is a callback function for when your request is complete...
Code:
$("div#myDiv").html(data);
This is your callback function. It takes the data you got (from function(data)), which in this case is the content of the page that was linked to, and places it inside of the div with id "myDiv."
This is here to prevent normal execution of your links (or else the browser will just load the page instead of letting your AJAX work).
And that's that. Ask away.
Re: Open links on index page within the index page?
SambaNeko great help but im using div class layers and not a div id layer
the other problem is I have index.html and the rest of the pages are .htm :P
I was looking for what I want and to give a better I deal is I was looking for a Dynamic content but the way my layout is its complex to get what I want just right without modding the layout
the div's are a class not a ID and my main page is a index.html the rest of the pages are .htm
Re: Open links on index page within the index page?
I love how I was presumed to know all this from the oodles of information and actual samples of your own code that you provided. The point of giving an example is so that you can adapt it to your needs, not that it already perfectly meets your needs. But, to answer what can be phrased in a positive light as "your questions"...
You can change the links to whatever you want: page1.html, etc. are just examples. It doesn't matter if your real pages are .htm, .php or whatever.
With jQuery, these selectors:
Code:
$("ul#myNav a")
$("div#myDiv")
...use any valid CSS selection to get the element(s) you want. If your div has a class name of "layer," change the selector to:
Re: Open links on index page within the index page?
Heres part of the html.
HTML Code:
<div class="container">
<div class="main">
<div class="header">
<div class="title">
<h1>Logo</h1>
</div>
</div>
<div class="content">
<div class="item">
<h1>Porttitor posuere</h1>
<div class="descr">Jun 13, 2006 by Vulputate</div>
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<cite>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</cite>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.
</p>
</div>
<div class="item">
<h1>Adipiscing</h1>
<div class="descr">Jun 11, 2006 by Laoreet</div>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>
<ul>
<li>Tristique</li>
<li>Aenean</li>
<li>Pretium</li>
</ul>
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>
</div>
<div class="item">
<h1>Interdum</h1>
<div class="descr">May 24, 2006 by Lectus</div>
<p>Praesent nisi sem, bibendum in, ultrices sit amet, euismod sit amet, dui. Donec varius tincidunt nisi. Ut ut sapien. Integer porta. Fusce nibh. Curabitur pellentesque, lectus at <a href="index.html">volutpat interdum</a>, sem justo placerat elit, eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie. Nullam semper massa eget ligula. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque a nibh quis nunc volutpat aliquam</p>
<code>margin-bottom: 12px;
font: normal 1.1em "Lucida Sans Unicode",serif;
background: url(img/quote.gif) no-repeat;
padding-left: 28px;
color: #555;</code>
<p>Eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie.</p>
</div>
</div>
<div class="sidenav">
<h1>Something</h1>
<ul>
<li><a href="index.html">pellentesque</a></li>
<li><a href="index.html">sem justo</a></li>
<li><a href="index.html">sociis natoque</a></li>
<li><a href="index.html">convallis</a></li>
</ul>
<h1>Another thing</h1>
<ul>
<li><a href="index.html">consequat molestie</a></li>
<li><a href="index.html">sem justo</a></li>
<li><a href="index.html">semper</a></li>
<li><a href="index.html">sociis natoque</a></li>
</ul>
<h1>Third and last</h1>
<ul>
<li><a href="index.html">sociis natoque</a></li>
<li><a href="index.html">magna sed purus</a></li>
<li><a href="index.html">pellentesque</a></li>
<li><a href="index.html">tincidunt</a></li>
</ul>
<h1>Search</h1>
<form action="index.html">
<div>
<input type="text" name="search" class="styled" /> <input type="submit" value="" class="button" />
</div>
</form>
</div>
This will give you an ideal of how the source looks its why im having a problem with ajax :(
Re: Open links on index page within the index page?
Soooo it looks like what you need to do is change the Javascript like so:
Code:
<script type="text/javascript">
<!--
$(function(){
$("div.sidenav a").click(function(){
var getPage = $(this).attr("href");
$.get(getPage,"",function(data){
$("div.content").html(data);
});
return false;
});
});
//-->
</script>
I mean it seems like the only problem you're saying is that the selectors don't match your markup, so all you need to do is adjust the selectors, as above. I'll repeat that any valid CSS selector - anything you could use to apply styles in a CSS file - can be used as a selector.
Re: Open links on index page within the index page?
Dude You are the bomb man the bomb! Code works like a charm just what I was looking to do.
Thank You man,
Re: Open links on index page within the index page?
Small problem thou seems if I have
Code:
<script type="text/javascript">
<!--
$(function(){
$("div.sidenav a").click(function(){
var getPage = $(this).attr("href");
$.get(getPage,"",function(data){
$("div.content").html(data);
});
return false;
});
});
//-->
</script>
It will technically has to load from div.sidenav thing is I can't load like downloads page within its page like have a download link be clicked on and then it opens the link like programs where the downloads are :cry:
Since I the downloads page dont have div.sidenav in it, It cant file div.sidenav to load for the div.content.
Re: Open links on index page within the index page?
@ BlackMagic,
Does this work?
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
$(function(){
$("ul .sidenav a").click(function(){
var getPage = $(this).attr("href");
$.get(getPage,"",function(data){
$("div.content").html(data);
});
return false;
});
});
//-->
</script>
</head>
<body>
<ul class="sidenav">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
<div class="content">
<p>Initial Content of the Div.</p>
</div>
</body>
</html>
Re: Open links on index page within the index page?
Quote:
Originally Posted by
BlackMagic
Since I the downloads page dont have div.sidenav in it, It cant file div.sidenav to load for the div.content.
That's alright, because you can also use the jQuery selector to select multiple types of elements, just like with CSS.
If you were writing a CSS file and you wanted to have the sidenav links look the same as - for example - a link with the class "otherLink", then you would make a declaration like this:
Code:
div.sidenav a,
a.otherLink{
/*CSS styles go here*/
}
Once again, jQuery's selector is just like the CSS selector:
Code:
$("div.sidenav a, a.otherLink").click(function(){
This will assign the click event to both links in your sidenav div, and links with the "otherLink" class. Now, this probably doesn't match your markup again, but you can either add a class to the links, or use a different CSS selector that's appropriate.
Re: Open links on index page within the index page?
Quote:
Originally Posted by
SambaNeko
That's alright, because you can also use the jQuery selector to select
multiple types of elements, just like with CSS.
If you were writing a CSS file and you wanted to have the sidenav links look the same as - for example - a link with the class "otherLink", then you would make a declaration like this:
Code:
div.sidenav a,
a.otherLink{
/*CSS styles go here*/
}
Once again, jQuery's selector is just like the CSS selector:
Code:
$("div.sidenav a, a.otherLink").click(function(){
This will assign the click event to
both links in your sidenav div, and links with the "otherLink" class. Now, this probably doesn't match your markup again, but you can either add a class to the links, or use a different CSS selector that's appropriate.
Thats not going to work real well if I
Code:
div.sidenav a,
a.otherLink{
/*CSS styles go here*/
}
because I think if I add the a.otherlink with my sidenav CSS its going to load the otherLink using the same size as the sidenav is which is only 200px
Anyway I can like PM you the source and so you can get en ideal of the problem im having?
See this is an ideal of the downloads page
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div class="content">
<div class="item">
<p>Downloads</p>
<p>Bleh Bleh Bleh</u></p>
<b><p>Downloads 2</p></b>
<a href="seethedownload2.htm">View Page</a>
</div>
</div>
</body>
</html>
There is no div layer to call them to.
If you wanna see the source i can pm you it.
