• 0

Help needed in Javascript


Question

HI all I am having trouble getting a javascript to work as I want it.

The code is as follows:

function oc(a) {
	var o = {};

	for(var i=0;i<a.length;i++) {
		o[a[i]]='';
	}

	return o;

	// USE: if( name in oc(['bobby', 'sue','smith']) ) { ... }
}

function toggle() {
	var tagarray = document.getElementsByTagName("div");
	var padding = document.getElementById('padding');
	var arguments = arguments;

	for(var x=0; x<tagarray.length; x++) {
		var tagname = tagarray[x].getAttribute("id");

		if (tagname in oc(arguments) == true) {
			var tag = document.getElementById(tagname);

			if (tag.style.display == "") {
				tag.style.display = "none";
				padding.style.display = "";
			} else {
				tag.style.display = "";
				padding.style.display = "none";
			}
		} else {
			// tagname.style.display = "";
		}
	}

	for(var i=0; i<arguments.length; i++) {
		// alert(arguments[i]);
	}
}

the oc function is to search for a string in an array I found.

I want to call the script like this:

onclick="java script:toggle('products','content'); return false;"

The call is not restricted to how many items 1 or 10...

What it has to do is toggle the display css for a div to hide/show content. by using multiple names in the onclick I should be able to toggle 2 items at once.

Also to avoid conflict I would like the div id's to have an operating extension as in:

products_toggle == toggle

products_show == force display: ; if it isn;t already

products_hide == force display: none; if it isn;t already

I am going nuts on trying to get this to work. I have had it work half way there but not all features at once. The code above opens and closes the items but doesn't close all others that are open. each div will be a content panel and the reason for the multiple id's is so I can open a page panel and then show the relevant sub content on that page. For example I might call about_open, contact this should force open the about panel and show a contact form. the using about_open, privacy it should open about panel if not already and show the privacy content while closing all other div's.

If needed I can abbreviated each toggled div with a name as in id="about_content", id="contact_content" etc.

Please help me.

Link to comment
https://www.neowin.net/forum/topic/631537-help-needed-in-javascript/
Share on other sites

19 answers to this question

Recommended Posts

  • 0

var arguments = arguments;

What are you doing with that line?

You might be interested in jQuery, it is a javascript framework which augments the standard javascript objects with additional ones, so you could probably achieve the above effect in much fewer lines:

function toggle() {
	for (int i = 0; i < arguments.length; i++) {
		$(arguments[i]).toggle();
	}
}

You should be able to call it simply with: toggle("first", "second", "third"); etc.

  • 0

Sorry to be a pain but I don't think I want to use jQuery for just one script. if I was going to use more scripts I would.

The

var arguments = arguments;

is what I have read I must do. arguments is the array of items from the function call, and I have to declare it. I wanted the arguments array to be called arguments.

If its wrong fix it. Im no javascirpt expert. in fact this is the first time I have actually written anything in javascript.

  • 0

jQuery will become very useful if you plan to go into full Web 2.0 development (which according to your other thread, it is planned).

Remove this

var arguments = arguments;

as it is not required, and may be causing your browser to abort the script

  • 0

It may not be required but its definetly not aborting the script. As I said before it works, partly.

And your reading my other post? Got any thoughts about that?

My main issue is not only am I a perfectionist, I believe in opensource and accesability (ie API, plugins etc for customization and integration), I also hate writing the same code over and over again, and I like simple clean minimalistic code. I also would like to write using standards as in standard code, formatting, structure etc. for example if I am doing a menu in a web page I'll use a list. hey I even made an accordion style website once using ONLY <ul>. Never used it just did it to see if I can get the structure to work as <ul> not <div>.

So any help on that would be handy. The script above is also not for the site on the other post. thats a different thing all together.

  • 0

Well, a non-jQuery function could work as follows:

function toggle() {
	for (var i = 0; i &lt; arguments.length; i++) {
		var obj = document.getElementById(arguments[i]);
		obj.style.display = (obj.style.display == "none") ? "block" : "none";
	}
}

Called as "java script: toggle('one', 'two', 'three');".

I have attached an example html document.

test.htmlFetching info...

  • 0

Sorry to be a pain, but there is not consistancy with your test page. click randomly on the links and the same links give different results.

The link to the page I am going to use it on is here: http://eangulus.homeip.net/clients/eangulu....com/index6.php

On my design there is also a div id="padding" that has to be hidden whenever one of the pages is open. Only one page to be open at a time. but the submenu content in each page is the reason for the multiple id need. this way I can use the toggle in a similar fashion for the sub links to change between contetn. and then I can call for example aboutus, will opn aboutus div with about us contetn as default, but click on contact in the bottom footer and it should open aboutus and show the contact form div instead.

At this stage I have each content area id's and the padding id and also the sample contetn under products has the id="content". THere will be more but I have put in enough for testing.

Anyway going to bed now so I will talk in the morning.

  • 0

OK I understand now what your code does.

But I do have some more questions.

How can I search for all elements with an id ending in "_toggle" and have that in an array, then I should be able to go thru each array element and match against the arguments. If it doesn't match close the tag, if it does I want to then search for the ending of the called tag (_open _close or _swap etc) and either open or close according to that answer.

  • 0

Well, unless your planning to increase the number of expanding sections, you could probably get away with an array based function:

function open(id) {
	var layers = ['one','two','three','four','five'];
	for (var i = 0; i &lt; layers.length; i++) {
		var obj = document.getElementById(layers[i]);
		if (obj) {
			if (layers[i] == id) 
				obj.style.display = "block";
			else
				obj.style.display = "none";
		}						
	}
}

  • 0

Ok, final version:

function open(parent, child) {
	var parents = ['one', 'two'];
	for (var i = 0; i &lt; parents.length; i++) {					
		var parentObj = document.getElementById(parents[i]);
		if (parentObj) {
			if (parents[i] == parent) 
				parentObj.style.display = "block";
			else
				parentObj.style.display = "none";
		}	
	}

	var children = document.getElementsByTagName("div");
	for (var j = 0; j &lt; children.length; j++) {
		if (children[j].id.indexOf("_child") &gt; 0) {
			var childId = child + "_child";
			if (children[j].id == childId)
				children[j].style.display = "block";
			else
				children[j].style.display = "none";
		}
	}
}

With an attachment:test.html

  • 0

LOL, you've been watching my page.....

Thank you so much for that last script. Have another look, its working as I want it too now, (only first 2 links under products are setup atm). I also add in the padding.

I know it was getting complicated but I was trying to learn javascript, and I was really only converting the steps in my head to paper so to speak.

Oh and I apologize. the script samples always worked, it was my practice code that was cause the crash. as soon as I deleted all my stuff it work a treat.

Sorry to be a pain in the ass, but is it hard to make the parent items toggle? If it is don't worry cause I was looking at dropping that feature anyway.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • XnView Shell Extension 4.2.0 by Razvan Serea XnView Shell Extension is a powerful Windows Explorer add-on that enhances file management by providing quick image previews, thumbnails, and context menu tools without launching XnView. It supports over 500 image formats including RAW (CR2/NEF), WebP, HEIC, TIFF, and vector formats (PSD/SVG), allowing users to resize, convert, edit, and optimize images directly from the right-click menu. The lightweight integration streamlines workflows, enabling batch processing, metadata viewing (EXIF/IPTC), and seamless format conversion—ideal for photographers, designers, and casual users who need efficient file handling. Beyond basic previews, the extension offers advanced features like image rotation, format adjustments, and plugin support. Its intuitive interface ensures fast access to editing tools while maintaining system performance. XnView Shell Extension key features: 500+ Format Support – Opens and converts RAW, WebP, HEIC, TIFF, PSD, SVG, and more Batch Processing – Convert, resize, or rename multiple images at once Lossless JPEG Editing – Rotate, flip, and adjust without quality loss Metadata Preservation – Retains EXIF, IPTC, and XMP data during conversions Advanced Compression – Customize JPEG quality, PNG optimization, and WEBP settings Color Management – Handles ICC profiles, bit-depth (8/16/32-bit), and CMYK-to-RGB conversion PDF & GIF Support – Extract images from PDFs or create animated GIFs High-Speed Previews – Fast thumbnails and image previews in Windows Explorer Right-Click Actions – Quick access to resize, rotate, and convert without opening apps Plugin Extensibility – Add support for niche formats like DDS, HDR, or DICOM Download: XnShell 64-bit | Portable 64-bit | ~10.0 MB (Freeware) Download: XnShell 32-bit | Portable 32-bit | ~3.0 MB Links: XnView Shell Extension Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Another win for EU users? Ads in WhatsApp won't be coming this year by David Uzondu You might have heard that ads are making their way to WhatsApp after years of the company promising it would never happen. If you are in the EU (lucky you), you won't be seeing ads until 2026 at the earliest. A new report from POLITICO confirms that Meta, which owns the messaging service, has informed Ireland's privacy regulator that the new advertising model will not roll out in the European Union for quite some time, even as it appears elsewhere in the coming months. This is not some charitable act, of course. The delay gives European regulators time to scrutinize the plan, which involves using ad preferences from linked Facebook and Instagram accounts to target users. This situation follows a pattern of other "wins" for EU users, like the changes in iOS 17.4 that finally enabled sideloading. This opened the door for alternative app stores and the (temporary) return of games like Fortnite to iPhones in the region. Similarly, we are seeing Microsoft finally back off from shoving Edge down the throats of EU users, all thanks to the Digital Markets Act. This legislation has put pressure on big tech companies to operate more "fairly" within the bloc, leading to changes that users everywhere else can only dream of for now. These regulations are precisely what companies like Apple hate. Remember, Apple has issued a warning to Australia, telling the country not to follow Europe's lead on these matters because it would create massive security and privacy risks. Apple argues that its control over the ecosystem keeps users safe, so any attempt to break that open is dangerous. The Irish Data Protection Commission will be meeting with WhatsApp to discuss the matter further. According to Commissioner Des Hogan, they plan to discuss the ad model with other European data protection authorities to gather any collective concerns. Commissioner Dale Sunderland noted that discussions with the company are "still early days", and it is too soon to identify what, if any, specific "red line issues" might exist with Meta's advertising plans. For now, Europeans can continue using their ad-free messenger, while the rest of the world prepares for the inevitable.
    • Welcome to Neowin!
    • Idiots never imagine their insane actions troubling everyone.  
    • Photo Variants 2.3 by Razvan Serea Photo Variants is an all-in-one photo editor for Windows. Quickly cull, import, and edit your images with powerful tools. Enjoy full layer support, precise retouching features, and a wide range of filters and color adjustments. Create multiple versions of a photo instantly with presets, or design from scratch using vector graphics and advanced editing options. Free for personal and commercial use. Photo Variants key Features: Advanced Adjustment Tools: Provides precise control over image modifications. ​ Extensive Filter Collection: Offers over 99 photo filters to apply various effects. ​ Animated Photo Effects: Enables the addition of dynamic elements to images. ​ Automatic Face Retouching: Includes features for enhancing facial features automatically. ​ Support for Multiple Formats: Compatible with over 100 graphic formats, including RAW and PSD files, allowing users to open, edit, and save in these formats. ​ Drawing and Transformation Tools: Facilitates freehand drawing, erasing, filling, cropping, resizing, rotating, and flipping images. Photo Variants supports a wide array of image formats, making it a versatile tool for all your editing needs. Key supported formats include: Raster Formats: .jpeg, .jpg, .png, .bmp, .gif, .tiff, .webp, .ico, .pcx. Camera RAW: .crw, .cr2, .dng, .nef, .raf, .arw, .orf, .x3f, .raw. Professional Formats: .psd, .ai, .svg, .tga, .pdf, .pcl. Specialized Formats: .dicom, .dcm, .heic, .heif, .avif, .exr, .dds. Other: .wmf, .emf, .xps, .jpeg2000 (.jp2)...etc... With support for these formats, Photo Variants offers seamless editing and flexibility for photographers, designers, and creatives. Photo Variants 2.3 changes: New effects for layers. New shapes and options for brushes. Download: Photo Variants 2.3 | 70.5 MB (Freeware) View: Photo Variants Home page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      Wayne Robinson earned a badge
      Week One Done
    • One Month Later
      Karan Khanna earned a badge
      One Month Later
    • Week One Done
      Karan Khanna earned a badge
      Week One Done
    • First Post
      MikeK13 earned a badge
      First Post
    • Week One Done
      OHI Accounting earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      688
    2. 2
      ATLien_0
      265
    3. 3
      Michael Scrip
      204
    4. 4
      +FloatingFatMan
      170
    5. 5
      Steven P.
      144
  • Tell a friend

    Love Neowin? Tell a friend!