Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts

    Advanced toggler

    Hi

    I am trying to make a toggler. ITs an advanced toggler in that it updates multipe elements. I want to use on fixed area of the page as a holder for 8 individual elements. each element has help information relating to sections on the page. When a user clicks the help button of an section the relevent help element will be diplayed in the fixed area at the same time any other help elements that are shown will be hidden.

    I created a script that uses a string array of element IDs. It cycles through each ID and if it is shown it hides it. At the end it toggles the elemnt thqat is to be shown.

    Here is the troublesome script

    Code:
    function show_el(obj) {
    	var els=new Array("el_headline","el_description","el_author","el_keywords","el_site","el_content","el_lead","el_article");
    	var i;
    	for (i=0;i<=10;i++)
    	{
    	if 
    		var el = document.getElementById(els[i]);
    		if ( el.style.display != 'none' ) {
    			el.style.display = 'none';
    		}
    	}
    	
    	var el = document.getElementById(obj);
    	el.style.display = '';
    	}

    Here is the code for the entire page.

    Code:
    <!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>
    <title>Jamies Website News article system</title>
    <!-- tinyMCE http://tinymce.moxiecode.com
    // TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL.
    // Jamies Website News article system, written by Tim Golding as a news system for Jamies Computer Club
    // all code other than the TinyMCE codes are thefore owned by Jamie's Computer Club.  
    -->
    <link rel="stylesheet" type="text/css" href="styles/input_page.css" />
    <script language="javascript" type="text/javascript" src="./jscripts/tiny_mce/tiny_mce.js"></script>
    <script language="javascript" type="text/javascript">
    	tinyMCE.init({
    		theme : "advanced",
    		mode : "exact",
    		elements : "lead,article",
    		save_callback : "customSave",
    		content_css : "example_advanced.css",
    		extended_valid_elements : "a[href|target|name]",
    		plugins : "table",
    		theme_advanced_buttons3_add_before : "tablecontrols,separator",
    		//invalid_elements : "a",
    		theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
    		//execcommand_callback : "myCustomExecCommandHandler",
    		debug : false
    	});
    
    	// Custom event handler
    	function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {
    		var linkElm, imageElm, inst;
    
    		switch (command) {
    			case "mceLink":
    				inst = tinyMCE.getInstanceById(editor_id);
    				linkElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "a");
    
    				if (linkElm)
    					alert("Link dialog has been overriden. Found link href: " + tinyMCE.getAttrib(linkElm, "href"));
    				else
    					alert("Link dialog has been overriden.");
    
    				return true;
    
    			case "mceImage":
    				inst = tinyMCE.getInstanceById(editor_id);
    				imageElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "img");
    
    				if (imageElm)
    					alert("Image dialog has been overriden. Found image src: " + tinyMCE.getAttrib(imageElm, "src"));
    				else
    					alert("Image dialog has been overriden.");
    
    				return true;
    		}
    
    		return false; // Pass to next handler in chain
    	}
    
    	// Custom save callback, gets called when the contents is to be submitted
    	function customSave(id, content) {
    		alert(id + "=" + content);
    	}
    	
    	
    	function show_el(obj) {
    	var els=new Array("el_headline","el_description","el_author","el_keywords","el_site","el_content","el_lead","el_article");
    	var i;
    	for (i=0;i<=10;i++)
    	{
    	if 
    		var el = document.getElementById(els[i]);
    		if ( el.style.display != 'none' ) {
    			el.style.display = 'none';
    		}
    	}
    	
    	var el = document.getElementById(obj);
    	el.style.display = '';
    	}
    	
    </script>
    <!-- /tinyMCE -->
    
    </head>
    <body>
    <div class="main">
    <h1>Jamies Website News article system. </h1>
    
    <!-- Form with textare element with width: 100% -->
    <form method="post" action="example.php">
    
    
    <strong>HEADLINE:</strong><br />
    <input type="textbox" size="76" name="headline"><a href="#" onclick="show_el('el_headline');"><img src="images/q_mark.jpg" /></a><p /> 
    
    <strong>DESCRIPTION:</strong><br />
    <textarea name="description"  style="width:500px;" rows="3"></textarea><a href="#" onclick="show_el('el_description');"><img src="images/q_mark.jpg" /></a><p />
    
    <strong>AUTHOR:</strong><br />
    <input type="textbox" size="32" name="author"><a href="#" onclick="show_el('el_author');"><img src="images/q_mark.jpg" /></a><p />
    
    <strong>KEYWORDS:</strong><br />
    <input type="keywords" size="76" name="keywords"><a href="#" onclick="show_el('el_keywords');"><img src="images/q_mark.jpg" /></a><p />
    
    <strong>SITE:</strong><br />
    <SELECT NAME="site">
    	<OPTION SELECTED> commercial
    	<OPTION> social
    </SELECT<a href="#" onclick="show_el('el_site');"><img src="images/q_mark.jpg" /></a>&nbsp;<p />
    
    <strong>CONTENT TYPE:</strong><br />
    <SELECT NAME="content">
    	<OPTION SELECTED> news article
    	<OPTION> tutorial
    </SELECT><a href="#" onclick="show_el('content');"><img src="images/q_mark.jpg" /></a>&nbsp;<p />
    
    <strong>LEAD:</strong><br />
    <textarea name="lead" style="width:500px;" rows="15">
    </textarea><a href="#" onclick="show_el('el_lead');"><img src="images/q_mark.jpg" /></a>
    <br />
    <noscript><p style="font-size:1;"><b>Javascript must be enabled to use the controls on this feild.</b></p></noscript>
    
    <STRONG>ARTICLE:</STRONG><br />
    <textarea name="article" style="width:500px;" rows="15">
    </textarea><a href="#" onclick="show_el('el_article');"><img src="images/q_mark.jpg" /></a>
    <br />
    <noscript><p style="font-size:1;"><b>Javascript must be enabled to use the controls on this feild.</b></p></noscript>
    <p><input type="submit" name="submit" value="Submit"></p>
    </form>
    <br />
    </div>
    
    <div id="help">
    <strong>
    	<div id="el_headline">
    	<p>
    	A meaningfull headline or title that gives an indication to the content of the news article.
    	</p>
    	</div>
    	<div id="el_description">
    	<p>
    	A small description describing what the article is about. Usually no more than a few sentences. This
    	will be used by internet search engines to index your page. 
    	</p>
    	</div>
    	<div id="el_author">
    	<p>
    	Your name or the name of the author of this news article.
    	</p>
    	</div>
    	<div id="el_keywords">
    	<p>
    	Commer seperated Keywords to aid with search each individual keyword should be seperated by a commer. These
    	will be used by internet search engines to index your page. 
    	</p>
    	</div>
    	<div id="el_site">
    	<p>
    	The website this article is to be uploaded to. Is it for the commercial web site or is it for the social website.
    	</p>
    	</div>
    	<div id="el_content">
    	<p>
    	The type of article that this article is wheather it be a news article or a web tutorial. Click on the down arrow at end of text box to 
    	make your choice.
    	</p>
    	</div>
    	<div id="el_lead">
    	<p>
    	The lead is the first part of the story that will be continued in the article. On the website a read more link 
    	will be present that when clicked will take the user to the rest of the story. please ensure that the lead fits
    	inside the box and any additional text to go in the article text area.<p />
    	Generally the site uses Arial as its default font and is size ?? and is best to leave the font size and type 
    	face alone to compliment the rest of the site.
    	</p>
    	</div>
    	<div id="el_article">
    	<p>
    	This is the the rest of the article and should follow on directly from the lead section (not including).
    	This can be as long as is required.  Again the site uses Arial as is default type face and font size ?? and 
    	it is best to leave these alone in this article to compliment the rest of the site.
    	</p>
    	</div>
    </strong>
    </div>
    
    </body>
    </html>
    You can not say you know how to do something, until you can teach it to someone else.

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by timgolding View Post
    Hi

    I am trying to make a toggler. ITs an advanced toggler in that it updates multipe elements. I want to use on fixed area of the page as a holder for 8 individual elements. each element has help information relating to sections on the page. When a user clicks the help button of an section the relevent help element will be diplayed in the fixed area at the same time any other help elements that are shown will be hidden.

    I created a script that uses a string array of element IDs. It cycles through each ID and if it is shown it hides it. At the end it toggles the elemnt thqat is to be shown.
    Are you saying that you don't understand the error messages displayed in the console?

  • #3
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Quote Originally Posted by Arty Effem View Post
    Are you saying that you don't understand the error messages displayed in the console?
    No nothing of the sort. Do you know what a toggler is?
    You can not say you know how to do something, until you can teach it to someone else.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •