Jump to content

Replace HTML in wordpress

xmrflipflop

By xmrflipflop
in JavaScript

Recommended Posts

xmrflipflop Newbie

xmrflipflop

Posted
Posted

This is a bit confusing and I'll try word it as best as I could.I have a list of quotes on a wordpress blog in the form of a list in HTML

<li>"Quote A asdlfkjawslfjalkwebjlaksjr"</li><li>"Quote B asldfkjawoeijfasldk"</li><li>"Quote C alsikjfiobjawsejlras"</li>

I would like to use javascript to create a quote rotation function. Right now, I am using

<script type="text/javascript"><!-- hidenumquotes = 2;var quotes = new Array(numquotes);quotes[0]="Quote A asdlfkjawslfjalkwebjlaksjr";quotes[1]="Quote B asldfkjawoeijfasldk";quotes[2]="Quote C alsikjfiobjawsejlras";var rand = Math.floor(Math.random()*numquotes);document.write(quotes[rand]);// --></script>

If I use this, every time I add a new quote to my wordpress page/post, I have to add it to the javascript function on the sidebar. Thus I am seeking a way to use javascript to extract the data from the post (through permalink perhaps?) Then replace the <li> with quote[0] etc... Or perhaps use a new script.Sorry I am really clueless about javascript, all helps will be appreciated. =]

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

if its the only list on the page, you could try using getElementsByTagName, get all the list items returned to you in an array, and then do something like this

<script type="text/javascript"><!-- hidevar quotesList = document.getElementsByTagName("<li>");var numquotes = (quotesList.length - 1);var rand = Math.floor(Math.random()*numquotes);document.write(quotesList[rand]);// --></script>

Link to comment
Share on other sites
xmrflipflop Newbie

xmrflipflop

Posted
  • Author
Posted
if its the only list on the page, you could try using getElementsByTagName, get all the list items returned to you in an array, and then do something like this
<script type="text/javascript"><!-- hidevar quotesList = document.getElementsByTagName("<li>");var numquotes = (quotesList.length - 1);var rand = Math.floor(Math.random()*numquotes);document.write(quotesList[rand]);// --></script>

Ohh I'll give this a go, but what if its not on same page? Like I want the quote rotation to be used on the sidebar. Any ideas?
Link to comment
Share on other sites
xmrflipflop Newbie

xmrflipflop

Posted
  • Author
Posted
If it's not on the same page, then you'll need to fetch the page which contains them using AJAX and parse the result.http://w3schools.com/ajax/
Hey thanks but could you provide an example that I can modify or something? I am really clueless when it comes to JS. And the previous script
<script type="text/javascript"><!-- hidevar quotesList = document.getElementsByTagName("<li>");var numquotes = (quotesList.length - 1);var rand = Math.floor(Math.random()*numquotes);document.write(quotesList[rand]);// --></script>

returns "undefined" even when it's on the same page as the list...

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

You have to run the script thescientist gave you after the page loads, by putting it in a function and binding that to the window's load event. Also, you'll have to modify the contents of the quote element (say you give it and id of "quote"), so it should be:

document.getElementById("quote").innerHTML = quotesList[rand].innnerHTML;

Link to comment
Share on other sites
xmrflipflop Newbie

xmrflipflop

Posted
  • Author
Posted

I'm sorry but I really have no clue when it comes to JS. Could someone edit on my codes so I can see how it works? Along with AJAX and all...This is the quote page lets call it root/quotes/index.html

<!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" /><title>Untitled Document</title></head><body><li>"Quote 1"</li><li>"Quote 2"</li></body></html>

Then on a separate page/sidebar

<!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" /><title>Untitled Document 2</title></head><body><script type="text/javascript"></script></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

this still wont work as the main problem is that in scientists example, it includes the angle brackets when it should just be tag namevar quotesList = document.getElementsByTagName("<li>");should bevar quotesList = document.getElementsByTagName("li");and that is what is causing the 'underfine' error

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
this still wont work as the main problem is that in scientists example, it includes the angle brackets when it should just be tag namevar quotesList = document.getElementsByTagName("<li>");should bevar quotesList = document.getElementsByTagName("li");and that is what is causing the 'underfine' error
doh :)
Link to comment
Share on other sites
xmrflipflop Newbie

xmrflipflop

Posted
  • Author
Posted

I don't get it.. e_e; What am I doing wrong?

<!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" /><title>Untitled Document</title></head><body><li>"Quote 1"</li><li>"Quote 2"</li><script type="text/javascript"><!-- hidevar quotesList = document.getElementsByTagName("li");var numquotes = (quotesList.length - 1);var rand = Math.floor(Math.random()*numquotes);document.write(quotesList[rand]);// --></script></body></html>

That gave me... "Quote 1""Quote 2"[object HTMLLIElement]

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

remove the -1 you need the correct number of 2 so the random number generator will give you 0 to 1. You now have the random li, but what you need now it the text within it, this is where innerHTML comes in.<script type="text/javascript"><!--//var quotesList = document.getElementsByTagName("li");var numquotes = (quotesList.length);var rand = Math.floor(Math.random()*numquotes);document.write(quotesList[rand].innerHTML);// --></script>

Link to comment
Share on other sites
xmrflipflop Newbie

xmrflipflop

Posted
  • Author
Posted

Thanks, this works perfectly. 

<script type="text/javascript"><!--//var quotesList = document.getElementsByTagName("li");var numquotes = (quotesList.length);var rand = Math.floor(Math.random()*numquotes);document.write(quotesList[rand].innerHTML);// --></script>

But what about AJAX as suggested earlier. I've read through the w3schools guide for AJAX but I couldn't get it working... Say the quote page is at http://blog.com/quotes.html my script in <head> would be

<script type="text/javascript">function loadXMLDoc(){if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)	{	document.getElementById("sidebar").innerHTML=xmlhttp.responseText;	}  }xmlhttp.open("GET","http://blog.com/quotes.html",true);xmlhttp.send();}</script>

If I call the function loadXMLDoc() in <body> onload, the result returns the whole page of quotes.html, and I don't know how to call through the sidebar.

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

You'll have to use some sort of pattern matching to pull out the quotes from the HTML page, for example with regular expressions. Or you could try retrieving the responseXML and accessing the quotes through the DOM.http://www.w3schools.com/jsref/jsref_obj_regexp.asphttp://www.w3schools.com/ajax/ajax_xmlfile.asp

Link to comment
Share on other sites
xmrflipflop Newbie

xmrflipflop

Posted
  • Author
Posted

Is there a way to define the script to extract from a specific portion of the page? Like if I put

<div id="box"><li>quotes</li><li>quote</li></div>

then through javascript is there a way to:document.getElementsByTagName("li");within:document.getElementById("box");or something along this line?

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

just to clear this up, the quotes will be on 'http://blog.com/quotes.html', now wordpress uses different php pages for different areas of page, but all of these are included in the whole entirety when the page is loaded yes!So does the sidebar appear on all pages with random quote, or just the quotes page?if it is just the quotes page you can use 

<div id="box"> <li>"Quote 1"</li> <li>"Quote 2"</li> <div>  <script type="text/javascript"> <!--//window.onload = function(){ var quotesParentContainer = document.getElementById("box"); var quotesList = quotesParentContainer.getElementsByTagName("li"); var numquotes = (quotesList.length); var rand = Math.floor(Math.random()*numquotes); document.write(quotesList[rand].innerHTML);} // --> </script>

//OR to target sidebar id ref

<div id="show_rand_quote"></div> <script type="text/javascript"> <!--//  window.onload = function() { var quotesParentContainer = document.getElementById("box"); var quotesList = quotesParentContainer.getElementsByTagName("li"); var numquotes = (quotesList.length); var rand = Math.floor(Math.random()*numquotes);document.getElementById("show_rand_quote").innerHTML = quotesList[rand].innerHTML; } // --> </script>

If on other pages, it will have to look at the list of quotes from an xml file or an included php (these would be where you add new quotes and they in turn would be displayed on the quotes page), which has the quotes listed to produce the random quote for the sidebar. Then use ajax to retrieve the result.Edit : added window.onload as don't know if all element with required id reference have been loaded yet! for option 2 especially

Link to comment
Share on other sites
xmrflipflop Newbie

xmrflipflop

Posted
  • Author
Posted

@dsonesukThe script works but I am trying to make it appear for other pages as well on the sidebar. Right now I'm trying it out on a test page, but it doesn't seem to work the way I want it to... I think, the bolded part is the problem, but I am trying to make it get the quotes from a specific div id of the ajax/xml response. Or is it not possible to code it this way?

<!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" /><title>Untitled Document</title><script type="text/javascript">function loadXMLDoc(){if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)	{	var myquotes = xmlhttp.responseText;	var quotesParentContainer = myquotes.getElementById("quotebook");	var quotesList = quotesParentContainer.getElementsByTagName("li");	var numquotes = (quotesList.length);	var rand = Math.floor(Math.random()*numquotes);	document.getElementById("show_rand_quote").innerHTML = quotesList[rand].innerHTML;	}  }xmlhttp.open("GET","quotes.html",true);xmlhttp.send();}</script></head><body onload="loadXMLDoc()"><div id="show_rand_quote"><p>asdfasdf</p></div></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

the simplist way to do this is to use an xml file with list of quotes.quotes.xml

<?xml version="1.0" encoding="ISO-8859-1"?><quotelist>	<quoteitem>		<quote>Quote 1</quote>	</quoteitem>	<quoteitem>		<quote>Quote 2</quote>		</quoteitem>	<quoteitem>		<quote>Quote 3</quote>	</quoteitem></quotelist>

then use javascript to search for required containers for all the quotes, or single random quote, if they are found search through xml file and show relative information.quotes.js

// JavaScript Document function ajaxRequest() { var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; //activeX versions to check for in IE if (window.ActiveXObject)	 { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)	  for (var i=0; i<activexmodes.length; i++)		{		   try			{			return new ActiveXObject(activexmodes[i]);			   }		   catch(e)			{				//suppress error			   }		  }	 }	 else if (window.XMLHttpRequest) // if Mozilla, Safari etc		  return new XMLHttpRequest();	 else		  return false;}var mygetrequest=new ajaxRequest()if (mygetrequest.overrideMimeType) mygetrequest.overrideMimeType('text/xml')mygetrequest.onreadystatechange=function(){ if (mygetrequest.readyState==4){  if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){   var xmldata=mygetrequest.responseXML; //retrieve result as an XML object   var quoteentries=xmldata.getElementsByTagName("quoteitem");   var output='';      numquotes=quoteentries.length;      var rand = Math.floor(Math.random()*numquotes);   if(document.getElementById("all_quotes"))		   {		output='<ul>';		   for (var i=0; i<quoteentries.length; i++)			{			output+='<li>';			output+=quoteentries[i].getElementsByTagName('quote')[0].firstChild.nodeValue;			output+='</li>';			   }		   output+='</ul>';		document.getElementById("all_quotes").innerHTML=output;		   }			if(document.getElementById("show_rand_quote"))		{			output='';		 for (var i=0; i<quoteentries.length; i++)			 {			   if(i==rand)				   {				output+=quoteentries[i].getElementsByTagName('quote')[0].firstChild.nodeValue;				}		   document.getElementById("show_rand_quote").innerHTML=output;			   }		}  }  else{   alert("An error has occured making the request");  } }}mygetrequest.open("GET", "quotes.xml", true);mygetrequest.send(null);

html

<!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" /><title>Untitled Document</title><script type="text/javascript" src="quotes.js"></script><style type="text/css"></style></head><body><h3>Random Quotes</h3><div id="show_rand_quote"><p>default quote 1</p></div><h3>ALL Quotes</h3><div id="all_quotes"><p>Error! javascript disabled or xml file can't be found</p></div></body></html>

I'll leave it to you whether you use the complete ul list, or use the ul as id referenced container to dump only the <li>...</li> tag (just comment out output+='<ul>' and output+='</ul>').

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...