Solved

Simple javascript question.  How to use javascript inbetween <p> and <h> tags

Posted on 2008-06-10
2
282 Views
Last Modified: 2010-04-21
So i have some javascript that is using jquery to call up the contents of  .txt file on my server.

The only problem is that the function ends up in a class

How can i call up this class to use inbetween the <p> and <h> tags of my choosing throughout the page

without messing up the formating layed out in the css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Dream Chasers</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.djmichaelray.com/dreamchasers/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $.get("art.txt", function(data){
                $('.articleone').text(data);
        });
});
$(document).ready(function() {
        $.get("headline1.txt", function(data){
                $('.headlineone').text(data);
        });
});
$(document).ready(function() {
        $.get("headline2.txt", function(data){
                $('.headlinetwo').text(data);
        });
});
$(document).ready(function() {
        $.get("article2.txt", function(data){
                $('.articletwo').text(data);
        });
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
	<div id="logo">
		<img src="images/dbanner.jpg" width="890" height="160"/>
    	</div>
    <br />
</div>
<div id="menu">
	<ul>
		<li class="current_page_item"><a href="la.html">Home</a></li>
		<li><a href="scene.html">The Scene</a></li>
		<li><a href="photos.html">Photos</a></li>
		<li><a href="videos.html">Videos</a></li>
        <li><a href="aboutus.html">About</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>
</div>
 
<div id="page">
	<div id="ads"><a href="#"><img src="images/ad160x600.gif" alt="" width="160" height="600" /></a></div>
	<div id="content">
		<div class="post">
			<div class="title">
			  <h2 class="headlineone"></h2>
				<p><small>by <a href="#">Michael Ray</a></small></p>
			</div>
            <div class="entry">
            <img src="images/artpic1.jpg" alt="" width="120" height="120" class="left"/>
            <div class="articleone">
         	 </div>
         </div>
         <br />
         <br />
         <p class="links"> <a href="#" class="more">Read More</a></p>
         
      </div> 
		
	<div class="post">
			<div class="title">
				<h2><a href="articles/top_three/article_two.html"><div class="headlinetwo"></div></a></h2>
				<p><small>by <a href="#">Michael Ray</a></small></p>
			</div>
            <div class="entry">
            <a href="articles/top_three/article_two.html"><img src="images/artpic2.jpg" alt="" width="120" height="120" class="left"/></a>
            <div class="articletwo">
         	 </div>
         </div>
         <br />
         <br />
         <p class="links"> <a href="articles/top_three/article_two.html" class="more">Read More</a></p>
         
      </div> 
    </div>
	<div id="sidebar">
		<ul>
			<li id="categories">
				<h2>Night Life Planner</h2>
				<ul>
					<li><a href="#">Monday</a> (1) </li>
					<li><a href="#">Tuesday</a> (4) </li>
                    <li><a href="#">Thursday </a></li>
                    <li><a href="#">Friday </a></li>
                    <li><a href="#">Saturday </a></li>
                    <li><a href="#">Sunday </a></li>
				
                    
				</ul>
			
                      <h2>On The List</h2>
                      <ul>
                        <li><a href="#">Style Guide</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">Club Etiquette</a></li>
                        <li><a href="#">HotSpot Watch</a></li>
                        <li><a href="#">On The Rise</a></li>
                      </ul>
                    </li>
            
		</ul>
	</div>
</div>
<div id="footer">
	<p class="legal">
		&copy;2007 Dream Chasers. All Rights Reserved.
	</p>
	
 </div>
</div>
<!-- end footer -->
</body>
</html>

Open in new window

0
Comment
Question by:djmichaelray
2 Comments
 
LVL 18

Accepted Solution

by:
Pawel Witkowski earned 500 total points
ID: 21757338
I would advice for you to change class fill to element fill. So name elements where you want to put content, like:

<p id="herePutSomeContent">

</p>

And then use function with hash ('#') to point to this element, like this:

$(document).ready(function() {
        $.get("headline2.txt", function(data){
                $('#herePutSomeContent').text(data);
        });
});
0
 

Author Closing Comment

by:djmichaelray
ID: 31465835
Really well thought out Great solution
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
AJAX, If No returns don't let the AJAX Call run again 2 21
Javascript 2 28
message Alert on an empty search 10 23
Bootstrap 3 - Style a dropdown 1 15
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question