Archive

Posts Tagged ‘HTML’

CodeSlayer2010’s Code: jQuery Fancy Paragraph Styling (manila background, rounded-rectangle, drop-shadow, orange border)

screenshot of Eric CodeSlayer2010 Hepperle's jsfiddle jQuery -- fancy paragraph tag style 01

Jsfiddle Screenshot (07/13/13)

I wrote this jQuery in about 5 minutes. It is really simple, but amazingly powerful at the same time. The purpose of this is to instantly style paragraph tags. Here are the style parameters:

Background color: Manila (light beige-ish/yellow)
Border color: Orange
Drop-shadow: Yes
Rounded-rectangle: Yes

I want to make the code easily available to everyone, so I’ve provided the jQuery here in case you want to quickly add this style to your project. Cheers.

-CodeSlayer2010

/* Add manilla background, rounded-rect, orange border,
 & shadow to paragraphs.
 (Press F12 in your browser to see the results)

 @Creator: Eric Hepperle (CodeSlayer2010)
 @Date: 07/13/13
 @Version: 1.0

 @Purpose: Puts a fancy style on paragraph <P>
 tags to make them 'pop'.

 @Updates:
 07/13/13
 8:30 - Created initial code.

*/

console.clear()

$('p').css({
 'border': 'solid #FFB819 3px',
 'border-radius':'15px',
 'box-shadow': '10px 10px 5px #888888',
 'background-color':'#FFFBCC',
 'padding':'15px'
});
Advertisements

HTML Table Building: 30+ Beautiful Examples and Useful Javascripts

November 12, 2012 1 comment

Zemanta Puts Unwanted HTML Comments In Pre-Formatted PHP Code (Sourcecode) In WordPress Posts

April 9, 2012 4 comments

PROBLEM:

I  have recently determined through trial and error and process of elimination that Zemanta is responsible for adding extraneous HTML comments to my pre-formatted (with “pre” tags) PHP code that I have placed between “sourcecode” tags to activate WordPress.com’s built in programming code syntax highlighting.

Here is a screenshot (fig 1.) that demonstrates the problem:

codeslayer2010 blog with zemanta extraneous html comment errors

fig. 1

See, all that green is what commented my code out and made it so it doesn’t display correctly.

I am not totally sure Zemanta is to blame, but it seems the most likely culprit.  Here’s why:

  1. Identified 3 possible suspects: Zemanta, WordPress.com proofreading, and pasting pre-formatted code in Visual view instead of HTML view.
  2. Disabled Zemanta and retested –  problem remained.
  3. With Zemanta disabled, disabled proofreading as well.  No change.
  4. With Zemanta and proofreading disabled, went Edit>HTML View.  In each instance where I had posted code, deleted all the code from in between “sourcecode” tags.
  5. Re-copied and pasted code from each original PHP file.  Re-tested: Worked!  Syntax highlighting works properly now.  Made multiple edits to both code and text, updated and viewed the post — Good to go every time.
  6. Re-enabled Zemanta, made a test edit, saved and previewed the new post.  Everything is messed up again!  This is why I think Zemanta is the issue.

SOLUTION:

The solution I have come up with is this.

  1. If you want to use Zemanta, do so before adding any preformatted code or sourcecode tags.  Always turn Zemanta off when you are done using it.
  2. DO NOT, (under any circumstances) have Zemanta enabled if you have preformatted PHP code in your blog.  Chances are, Zemanta will mess your code up and you will have to re-paste your code again.  During my tests, I have had to paste all my sourcecode from scratch 3 times and let me tell you — it gets very tedious and wastes valueable time.
  3. Always paste sourcecode in HTML view only.

These are my recommendations based on my personal experience with this issue.  I’d love to hear from anyone else who is having similar issues.  Please let me know if this solution worked for you!

– CodeSlayer2010

Testing WordPress’s Code Syntax Highlighting

December 4, 2011 1 comment

(12/04/11)

TEST 1:

This example introduces a bit of test code we are calling ‘CODE SNIPPET A’. It uses the ‘sourcecode’ tag and has no language attributes or parameters.

Code Snippet A

		<form id="form1">
			<div>
				<input id="btnShowMessage" type="button" value="show message" />
				<div id="divMessage" style="background-color: yellow;">THIS IS THE MESSAGE</div>
			</div>
		</form>
	

NOTE: When you are in your dashboard editing your post you will not be able to see the syntax highlighting. Don’t freak out. Do a save and ‘preview’ and everything should be just fine.

TEST 2:

This is snippet A except now we have added the language=’html’ attribute.

	<form id="form1">
		<div>
			<input id="btnShowMessage" type="button" value="show message" />
			<div id="divMessage" style="background-color: yellow;">THIS IS THE MESSAGE</div>
		</div>
	</form>

TEST 3:

Well that’s all good for plain old html. But, what if our code is from a scripting language, such as PHP, that alternates back and forth between html and the script code? In that case, you could use something like

	

Code Snippet B

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script type="text/javascript">
		  $(document).ready(function(){
			 nameOutput = jQuery('#nameOutput');
			 nameOutput.css({'background':'yellowgreen'});
			 jQuery('body').css({
				'background':'#A66900',
				'font-family':'comic sans ms',
			 });
			 nameOutput.wrap('<span style="color:purple;">');
			 jQuery('#wrap').addClass('centered');
			 jQuery('#wrap').css({
				'background':'#F2B449',
			 })
		  });
		</script>
		<style type="text/css">
		  /****** COLORS *******
			 #A66900 // brown
		   */
		  .centered {
			margin: 0 auto;
			width: 66%;
		  }
		</style>
	<div id="wrap">
		<?php echo "Welcome to " . 'hell'; ?>
		<br />
		<?php

		  echo "<pre>";
		  print_r($_SERVER);
		  echo "</pre>";

		  $model = new stdClass();
		  $model->smurf = 'Papa';
		  echo "my smurf = " . $model->smurf;

		  $model->_name = isset($_POST['userName']) ? $_POST['userName'] : '[not defined!]';
		  echo "<pre>";
		  print_r($model);
		  echo "</pre>";
		?>
		<H1>THIS PAGE IS CURRENTLY UNDER CONSTRUCTION AND TESTING</H1>

		<form id="main" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
		<input type="text" name="userName" value="Enter Your Name" />
		<input type="submit" name="submit" />

		<div id="nameOutput" name="nameOutput">
		  <?php if(isset($_POST['userName'])) echo stripslashes($_POST['userName']); ?>

		</div>
	<div id="content"></div>
	</div>