Thoughts on Design » Coding http://www.jamischarles.com/blog Thoughts on Web Design and Front-end Coding. Served up Monthly by Jamis Charles Fri, 03 Jul 2009 00:24:58 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 How to getElementsByClassName in JavaScript and manipulating those http://www.jamischarles.com/blog/how-to-execute-a-function-in-javascript-without-calling-it/ http://www.jamischarles.com/blog/how-to-execute-a-function-in-javascript-without-calling-it/#comments Mon, 26 Nov 2007 13:19:06 +0000 jamis http://www.bluebreeze.net/blog/?p=24 What if you wanted all of your elements on the page that have the same class=”" to behave the exact same way. Well, with a little JavaScript, this is possible, thanks to Netlobo.com:

Note: You must add the following onload event to your body tag: < body onload=”loadClassNames()”>

<script language="javascript" type="text/javascript">

//function that allows us to get the elements by a class name,

document.getElementsByClassName = function(clsName){

	var retVal = new Array();
	var elements = document.getElementsByTagName("*");

	for(var i = 0;i < elements.length;i++){
		if(elements[i].className.indexOf(" ") >= 0){
			var classes = elements[i].className.split(" ");

			for(var j = 0;j < classes.length;j++){
				if(classes[j] == clsName){
					retVal.push(elements[i]);
				}
			}

		}else if(elements[i].className == clsName){
			retVal.push(elements[i]);
		}
	}
	return retVal;
}

function loadClassNames(){
	//this method only works for event handlers

	var classNames= document.getElementsByClassName('test2');

	for (var i = 0; i < classNames.length; i++){
		classNames[i].onmouseover = function(){
			alert(this.id);
		}

	}
}

</script>

The first function simply adds the capability of getting an element by class name, which is not inherently possible with JavaScript. Now, what the 2nd function does, is the following. If you add loadClassNames() as an “onload” function to the body tag, when the page loads, the function will get all of the elements with a class name of ‘test2′, and assign a new “mouseover” event. In this case, it will create a popup that displays the id of the element.

]]> http://www.jamischarles.com/blog/how-to-execute-a-function-in-javascript-without-calling-it/feed/ 0 Find x and y position of an element using JavaScript http://www.jamischarles.com/blog/find-x-and-y-position-of-an-element-using-javascript/ http://www.jamischarles.com/blog/find-x-and-y-position-of-an-element-using-javascript/#comments Thu, 01 Nov 2007 16:50:15 +0000 jamis http://www.bluebreeze.net/blog/?p=27 Ever needed to find the x or y coordinates of an element on a page? Well, thanks to this script from quirksmode it’s possible.

 

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}
var elemToFind = document.getElementById('div1');

var elemCoords = findPos(elemToFind);

So now, elemCoords holds both the x and the y. Since findPos() returns an array, to access the x or y by itself do the following:

// elemCoords[0] or elemCoords[1] for the x and y values, respectively
alert(elemCoords[0]);
]]> http://www.jamischarles.com/blog/find-x-and-y-position-of-an-element-using-javascript/feed/ 0 How to write a CSS rule that will affect every element: http://www.jamischarles.com/blog/how-to-write-a-css-rule-that-will-affect-every-element/ http://www.jamischarles.com/blog/how-to-write-a-css-rule-that-will-affect-every-element/#comments Thu, 25 Oct 2007 16:28:52 +0000 jamis http://www.bluebreeze.net/blog/?p=25 Sometimes there’s a need to reset all of the margins on a page, or you simply want something specifically applied to each element without having to count on inheritances to do the job. The solution: “*” or “universal selector”. This seems familiar from other languages right? Well, it should be. It simply means “everything” in a selected area.

The following will apply a gray background to every element on a page.

* {
    background-color: #eee;
}

What if you want to get more specific?
With this code, everything within the div with the id=”wrapper” will have a gray background.

div#wrapper * {
    background-color: #eee;
}

Obviously any properties can be used here. Enjoy.

]]> http://www.jamischarles.com/blog/how-to-write-a-css-rule-that-will-affect-every-element/feed/ 1 How to add 5 full WordPress posts on an external html page http://www.jamischarles.com/blog/how-to-add-5-full-wordpress-posts-on-an-external-html-page/ http://www.jamischarles.com/blog/how-to-add-5-full-wordpress-posts-on-an-external-html-page/#comments Sat, 25 Aug 2007 13:26:53 +0000 jamis http://www.bluebreeze.net/blog/?p=18 Upon popular request I’ve decided to add another tutorial, similar to the previous one, on how to add several full blog posts on an external page.

Well, here it is, and I’ll try to explain everything clearly.

Say you have a homepage that is not run by WordPress, and you just have your blog in the /blog/ directory or something like that. Yet you STILL want to display an excerpt 5 (or any number) of your most recent full posts from your WordPress blog on your home page.

1) Here’s the code you will want to write in BEFORE the Doctype (so the very first of your HTML):

<?php
//db parameters
$db_username = '###';
$db_password = '###';
$db_database = '###';

$blog_url = 'http://www.jamischarles.com/blog/'; //base folder for the blog. Make SURE there is a slash at the end

//connect to the database
mysql_connect(localhost, $db_username, $db_password);
@mysql_select_db($db_database) or die("Unable to select database");

//get data from database -- !IMPORTANT, the "LIMIT 5" means how many posts will appear. Change the 5 to any whole number.
$query = "Select * FROM wp_posts WHERE post_type='post' AND post_status='publish' ORDER BY id DESC LIMIT 5"; 

$query_result = mysql_query($query);
$num_rows = mysql_numrows($query_result);

//close database connection
mysql_close();

// html page starts after ?>
?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
</head>

2) Now, the text in the body will be a little bit different. Continuing where we left off…
Now, the problem here, is that we have dynamically generated content. That means we write a loop that goes through each table row in the database, gets the title, date, and text, then spits out on the html, and goes to the next row of the database and does the same thing again.

So if we use a div with same id, it’ll show that div up 5 times, each time with a different post. This is not acceptable, because it is not valid code, and could mess up the CSS. So we have to give it a class to be valid, or use tables. For this example we’ll use divs.

<body>

<?php

//start a loop that starts $i at 0, and make increase until it's at the number of rows
for($i=0; $i< $num_rows; $i++){ 

//assign data to variables, $i is the row number, which increases with each run of the loop
$blog_date = mysql_result($query_result, $i, "post_date");
$blog_title = mysql_result($query_result, $i, "post_title");
$blog_content = mysql_result($query_result, $i, "post_content");
//$blog_permalink = mysql_result($query_result, $i, "guid"); //use this line for p=11 format.

$blog_permalink = $blog_url . mysql_result($query_result, $i, "post_name"); //combine blog url, with permalink title. Use this for title format

//format date
$blog_date = strtotime($blog_date);
$blog_date = strftime("%b %e", $blog_date);

//the following HTML content will be generated on the page as many times as the loop runs. In this case 5.
?>

</body>
<div class="post"></div>

		<span class="date">  <?php echo $blog_date; ?>:</code></span><br /><hr /> 

		<a href="http://www.bluebreeze.net/blog"><?php echo $blog_title; ?></a><br /><br />

		<?php echo $blog_content; ?> <br /><br />

                <a href=”<?php echo $blog_permalink; ?>”>This Article</a> <br />
		<a href="http://www.bluebreeze.net/blog">More Articles </a>
<?php
} //end the for loop
?>
]]> http://www.jamischarles.com/blog/how-to-add-5-full-wordpress-posts-on-an-external-html-page/feed/ 78 How to add recent WordPress post exceprts on an external html page http://www.jamischarles.com/blog/how-to-add-recent-wordpress-posts-on-an-external-html-page/ http://www.jamischarles.com/blog/how-to-add-recent-wordpress-posts-on-an-external-html-page/#comments Fri, 25 May 2007 13:42:07 +0000 jamis http://www.bluebreeze.net/blog/?p=11 *** Update (Apr 4 08): I added a line of code that should strip out all HTML tags and formatting. So the resulting excerpt should only be text

Related Post: How to display 5 full posts…

Say you have a homepage that is not run by WordPress, and you just have your blog in the /blog/ directory or something like that. Yet you STILL want to display an excerpt from your recent post on your home page.

The solution? Use PHP and MYSQL to directly fetch the content from the WordPress database without even using WordPress.

1) Here’s the code you will want to write in BEFORE the Doctype (so the very first of your HTML):

<?php
//db parameters
$db_username = '###';
$db_password = '###';
$db_database = '###';

$blog_url = 'http://www.jamischarles.com/blog/'; //base folder for the blog

//connect to the database
mysql_connect(localhost, $db_username, $db_password);
@mysql_select_db($db_database) or die("Unable to select database");

//get data from database
$query = "Select * FROM wp_posts WHERE post_type='post' AND post_status='publish' ORDER BY id DESC LIMIT 1"; 

$query_result = mysql_query($query);
$num = mysql_numrows($query_result);

//close database connection
mysql_close();

//assign data to variables
$blog_date = mysql_result($query_result, 0, "post_date");
$blog_title = mysql_result($query_result, 0, "post_title");
$blog_content = mysql_result($query_result, 0, "post_content");
//$blog_permalink = mysql_result($query_result, 0, "guid"); //use this for 'p=11' format

$blog_permalink = $blog_url . mysql_result($query_result, 0, "post_name"); //combine blog url, with permalink title. Use this for title format

//format date
$blog_date = strtotime($blog_date);
$blog_date = strftime("%b %e", $blog_date);

//how many characters should be shown?
$maxchars = 135;

//strip out the html tags, such as images, etc...
$blog_content = strip_tags($blog_content);

//cut down the size of the post to 135 characters
$blog_content = substr($blog_content, 0, $maxchars);
$blog_content = $blog_content . "...";

// html page starts after ?>
?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
</head>

2) Find the “wp-config.php” file and the first three lines or so should contain your database name, user name, and password. Enter those in your file where I have ### for the db parameters. Just copy the names as shown in below. Do NOT CHANGE the “wp-config.php file”. WordPress will stop working if you do.

<?php
// ** MySQL settings ** //
define('DB_NAME', 'my_wordpress');    // 'my_wordpress' is the name of the database
define('DB_USER', 'my_user');     // 'my_user' is your MySQL username
define('DB_PASSWORD', 'my_password'); // 'my_password' is the password

3) Rename the file you are using to .php

4) Find a spot in your html where you want to display your date, title, and post excerpt. For example:

 
<div id="myId">< ?php echo $blog_date; ?>:

< ?php echo $blog_title; ?> 

< ?php echo $blog_content; ?>
 

<a href="<?php echo $blog_permalink; ?>">More </a>
</div>

The above code will display the following:

May 25:
Show only the titles on the Archive Pages

Thanks to www.spiritfolk.com for this one. 1) Open up /wp-content/themes/default/archive.ph…

More

]]> http://www.jamischarles.com/blog/how-to-add-recent-wordpress-posts-on-an-external-html-page/feed/ 84