Link on load

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
fwof1056
Forum Newbie
Posts: 1
Joined: Mon Oct 21, 2013 6:42 pm

Link on load

Post by fwof1056 »

I programmed my page to have 3 links. As you click each link, it pulls up the html page that goes with it. However, upon loading the page at the start, there is nothing there but the link buttons. It isnt a horrible thing, cause they just need to click the link button to pull up each page, but I would rather have 1 of the pages already be visible upon page load without having to click a link. What code can I add to my script to be able to do this?

Code: Select all

<!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" />
<meta content="en" http-equiv="Content-Language">
<meta content="Fish Without Feet Web & Graphic Design has set up this page to display its portfolio of raster, vector, website, and mutimedia pieces.  Our hope is that prospective clients or employers may seek to hire us." name="description">
<meta content="FWOF Design, FWOF, Fish Without Feet, Web Design, Website, Graphic, Graphic Design, t-shirt, illustration, Javascript, flash, animation, developer, Christian, God, Jesus " name="keywords">
<title>Fish Without Feet Graphic & Web Design</title>

<link href="fwof.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {   
      $('#gallery a').lightBox();
 }); //end document ready
</script>

<script type="text/javascript">
$(document).ready (function() {          
       $('#graphicdesign').click(function() {
               $('#loadedContent').load('graphicdesign.html');
       });
       
       $('#digitalcolors').click(function() {
               $('#loadedContent').load('digitalcolors.html');
       });
	   
	   $('#shirtsnswag').click(function() {
               $('#loadedContent').load('shirtsnswag.html');
       });
}); //end document ready
</script>



<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<style>

<style type="text/css">
#gallery ul {
	list-style: none;
}
#gallery ul li {
      display:inline;   
}
#gallery ul img {
	border: solid #e2643c;
	border-width: 5px;
	padding: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 8px;
	margin-left: 8px;
}
</style>

</head>

<body onload="MM_preloadImages('images/home_btnhover.png','images/about_btnhover.png','images/illustration_btnhover.png','images/cred_btnhover.png','images/graphic_btnhover.png','images/contact_btnhover.png','images/Web_btnhover.png')">
<div class="container"> <a href="index2.html"><img src="images/FWOFGDTrans2.png" width="948" height="233" alt="fwof logo" /></a>
<div class="header"><div class="btn_bx1st"><a href="index2.html"><img src="images/home_btn.png" alt="Home" name="home" width="237" height="237" id="home" onmouseover="MM_swapImage('home','','images/home_btnhover.png',1)" onmouseout="MM_swapImgRestore()" /></a></div><div class="btn_bx"><a href="about.html"><img src="images/about_btn.png" alt="About FwoF" name="about" width="237" height="237" id="about" onmouseover="MM_swapImage('about','','images/about_btnhover.png',1)" onmouseout="MM_swapImgRestore()" /></a></div><div class="btn_bx"><a href="graphics.html"><img src="images/graphic_btn.png" alt="Graphic Design" name="graphic" width="237" height="237" id="graphic" onmouseover="MM_swapImage('graphic','','images/graphic_btnhover.png',1)" onmouseout="MM_swapImgRestore()" /></a></div><div class="btn_bx"><a href="web.html"><img src="images/Web_btn.png" alt="Web and Multimedia" name="web" width="237" height="237" id="web" onmouseover="MM_swapImage('web','','images/Web_btnhover.png',1)" onmouseout="MM_swapImgRestore()" /></a></div><div class="btn_bx"><a href="illustrations.html"><img src="images/illustration_btn.png" alt="Illustrations" name="illustration" width="237" height="237" id="illustration" onmouseover="MM_swapImage('illustration','','images/illustration_btnhover.png',1)" onmouseout="MM_swapImgRestore()" /></a></div><div class="btn_bx"><a href="testimonials.html"><img src="images/cred_btn.png" alt="Testimonials" name="credits" width="237" height="237" id="credits" onmouseover="MM_swapImage('credits','','images/cred_btnhover.png',1)" onmouseout="MM_swapImgRestore()" /></a></div><div class="btn_bx"><a href="contact.html"><img src="images/contact_btn.png" alt="Contact FwoF" name="contact" width="237" height="237" id="contact" onmouseover="MM_swapImage('contact','','images/contact_btnhover.png',1)" onmouseout="MM_swapImgRestore()" /></a></div></div> 

  <div class="content">
    <div class="content2">
    <a href="javascript:void(0)" id="graphicdesign">Graphic Design</a> |
     <a href="javascript:void(0)" id="digitalcolors">Digital Colors</a> |
     <a href="javascript:void(0)" id="shirtsnswag">Shirts & Swag</a></div>
     <div class="content3"><div id="loadedContent"></div></div>
   

	
		

		
			
            

	<br />
     <p>    
     
    </div>
  </pre>
     <h1>&nbsp;</h1>
  <div class="footer">
    <p>&copy; Fish Without Feet Graphic & Web Design</p>
    <!-- end .footer --></div>
<!-- end .container --></div>

</body>
</html>
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Link on load

Post by requinix »

Code: Select all

<div id="loadedContent"></div>
That's where the content shows up. If you want something there to begin with then put something there to begin with.

Assuming you're using PHP you can

Code: Select all

<div id="loadedContent"><?php readfile("graphicdesign.html" /* or whichever */); ?></div>
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Link on load

Post by Christopher »

Or add one of these lines to your $(document).ready function:

Code: Select all

               $('#loadedContent').load('graphicdesign.html');
               $('#loadedContent').load('digitalcolors.html');
               $('#loadedContent').load('shirtsnswag.html');
(#10850)
Post Reply