LinkBack URL
About LinkBacksI should preface this by saying that I am by no means a Web Designer ... I'm just trying to build a site for myself and have taken on the challenge of not using Wordpress. Essentially, I am trying to find a jquery function that can open links (of htmls from my own server) from my ul nav bar in a specified div tag (preferably the same div) -- i want this to work more or less like an iframe. I first attempted this by trying to learn php but was too overwhelmed. I have read on several forums this is possible using javascript. And have even found an example doing essentially what i want: http://www.dynamicdrive.com/dynamici...jaxcontent.htm
But i am still having issues getting the link to open in the div -- in the html below the div is id'd #container
<body>
<div id="page_effect" style="display:none;">
<BR>
<div id="a1-title"><FONT SIZE="6" COLOR="#382D2C" FACE="Arial Black"><b>mytitle</b>
</div>
<BR>
<div id="nav">
<ul>
<li class="everything"><a href="https://pupilpath.nvskedula.com">current</a></li>
<li class="everything"><a href="https://pupilpath.nvskedula.com">past</a></li>
<li class="everything"><a href="blacktempl.html" class="ajaxLink">text</a></li>
<li class="everything"><a href="CV.html" target="_self">bio</a></li>
<li class="everything"><a href="kameraden.html" target="iframe-container">kameraden</a></li>
<li class="everything"><a href="https://pupilpath.nvskedula.com">inflammatio</a></li>
</ul>
</div>
<BR>
<div><video id="a8-video" class="everything" width="540" height="380" controls="controls"> <video src="caughtmapping1940.mp4" type="video/mp4" />
</video></div>
<div id="content" class="ajaxLink" style="border-style: none><p>this needs to work</p>
</div>
</ body>
*********************
And here is the Jquery I am working with (it's the last function):
$(document).ready(function(){
$('#page_effect').fadeIn(1500);
});
$(document).ready(function() {
var eT=0;
$('.everything').hide().each(function() {
$(this).delay(eT).fadeIn('slow');
eT += 200;
});
$('.everything').click(function() {
$('.everything').stop(true,true).fadeIn();
});
});
$(document).ready(function(){
$('a.ajaxLink').click(function(){
var url = $(this).attr('href');
$('#container').empty().load(url);
});
return false;
});
If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.
Results 1 to 4 of 4
-
Jun 12th, 2012, 06:23 PM #1Junior Member
- Join Date
- Jun 2012
- Posts
- 2
- Member #
- 31979
-
Jun 12th, 2012 06:23 PM
-
Jun 12th, 2012, 06:25 PM #2Junior Member
- Join Date
- Jun 2012
- Posts
- 2
- Member #
- 31979
sorry - i should mention the "text" li tag in the ul is the link i have been fiddling with to get this to work .. just ignore the other nav buttons
-
Jul 01st, 2012, 02:58 PM #3Senior Member
- Join Date
- Mar 2011
- Location
- Oklahoma City
- Posts
- 3,141
- Member #
- 27197
- Liked
- 959 times
Ron Roe
Web Developer
"If every app were designed using the same design template, oh wait...Bootstrap."
-
Jul 02nd, 2012, 04:17 PM #4Junior Member
- Join Date
- Jul 2012
- Location
- Leicester
- Posts
- 27
- Member #
- 32160
Make sure you have jQuery on your site and use this function:
function loadPage(page_url,div_id){
$.ajax({
url
age_url,
success:function(data){
$("#" + div_id).html(data);
}
});
}
I've just written this quickly and havn't tried it but im pretty sure it works.
Then your links would look something like this:
<a href="javascript:loadPage('page.html','loader_div' );">Page</a>
Hope I helped
Reply With Quote
Remove Ads
Posting Permissions
Search tags for this page
how to open a website url in div tag using jquery
,jquery ajax open page
,jquery hide div open with link
,jquery open link in div
,jquery open url using ajax
,open link in div
,open link in div content ajax
,open link to div using php ajax
,open url ajax jquery
,open website link with jquery in div
Click on a term to search for related topics.
