• 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

    • "What's that? Microsoft recommends Intel CPUs? My next computer must have Intel then." - Nobody
    • Apple warns Australia against joining EU in mandating iPhone app sideloading by David Uzondu Apple has issued a warning to Australia, essentially telling the country not to follow the European Union's lead in making iPhone app sideloading a requirement. This communication comes as the Australian federal government considers new rules that could force Apple to open up its iOS ecosystem, much like what happened in Europe with recent legislation. Since iOS 17.4 and iPadOS 18, users in the EU have been able to get apps from outside the official App Store, a direct consequence of the DMA designating Apple as a "gatekeeper". The Australian government floated a proposal in a paper released late last year. The paper suggested "designating" digital platforms like Apple's App Store. Being designated this way means these platforms would have to follow new rules intended to keep them from limiting competition. The government pointed to Apple's in-app payment system, which usually comes with a commission, and the lack of sideloading as likely targets for regulation. Right now, apps like Netflix and Spotify can't let users subscribe through their iOS apps without giving Apple a big cut, and they're not even allowed to tell users where to find a better deal. Apple, in its response to this Australian paper, stated that Australia should not use the EU's Digital Markets Act "as a blueprint". The company's core argument is that the changes mandated by the EU's DMA, which came into full effect in March 2024, introduce serious security and privacy risks for users. Apple claims that allowing sideloading and alternative app stores effectively opens the door for malware, fraud, scams, and other harmful content. The tech company also highlighted specific concerns from its European experience, alleging that its compliance there has led to users being able to install pornography apps and apps that facilitate copyright infringement, things its curated App Store aims to prevent. Apple maintains that its current review process is vital for user protection, and that its often criticized 30% commission applies mainly to the highest earning apps, with most developers paying a lower 15% rate or nothing. It is worth noting that Apple's implementation of DMA requirements in the EU, which includes a "Core Technology Fee" for apps distributed outside its store, has already drawn scrutiny from European Commission officials who question if these measures truly comply with the DMA's idea of keeping the market fair. The Australian government has not yet detailed its next steps in this process, and the Treasury still needs to publish the full submissions to its proposal paper, including Apple's complete arguments. Source: The Guardian
    • Oh the Chinese crybabies who couldn't accept the fact that they lost GOTY to Astro Bot? Not interested
    • Download this SQL Essentials For Dummies eBook (worth $10) for free by Steven Parker FOR DUMMIES is a trademark of John Wiley & Sons, Inc. A right-to-the-point guide on all the key topics of SQL programming SQL Essentials For Dummies is your quick reference to all the core concepts of SQL—a valuable common standard language used in relational databases. This useful guide is straightforward—with no excess review, wordy explanations, or fluff—so you get what you need, fast. Great for a brush-up on the basics or as an everyday desk reference, this book is one you can rely on. Strengthen your understanding of the basics of SQL Review what you've already learned or pick up key skills Use SQL to create, manipulate, and control relational databases Jog your memory on the essentials as you work and get clear answers to your questions Perfect for supplementing classroom learning, reviewing for a certification, and staying knowledgeable on the job, SQL Essentials For Dummies is the convenient, direct, and digestible reference you've been looking for. Claim your complimentary eBook worth $10 for free, before the offer ends on June 17. How to get it Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last! Download the SQL Essentials For Dummies eBook (worth $10) for free Offered by Wiley, view other free resources The below offers are also available for free for a limited time: Winxvideo AI V3.0 Lifetime License for PC ($69.95 Value) FREE – Expires 6/8 Aiarty Image Enhancer for PC/Mac ($85 Value) FREE – Expires 6/8 Solutions Architect's Handbook, Third Edition ($42.99 Value) FREE – Expires 6/10 AI and Innovation ($21 Value) FREE – Expires 6/11 Unruly: Fighting Back when Politics, AI, and Law Upend [...] ($18 Value) FREE - Expires 6/17 SQL Essentials For Dummies ($10 Value) FREE – Expires 6/17 Continuous Testing, Quality, Security, and Feedback ($27.99 Value) FREE – Expires 6/18 VideoProc Converter AI v7.5 for FREE (worth $78.90) – Expires 6/18 Macxvideo AI ($39.95 Value) Free for a Limited Time – Expires 6/22 The Ultimate Linux Newbie Guide – Featured Free content Python Notes for Professionals – Featured Free content Learn Linux in 5 Days – Featured Free content Quick Reference Guide for Cybersecurity – Featured Free content We post these because we earn commission on each lead so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. Other ways to support Neowin The above deal not doing it for you, but still want to help? Check out the links below. Check out our partner software in the Neowin Store Buy a T-shirt at Neowin's Threadsquad Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: An account at Neowin Deals is required to participate in any deals powered by our affiliate, StackCommerce. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through the branded deals site.
    • No one is surprised. It goes both ways. Warhammer remake is not on the PS5, but Xbox/PC and Game Pass day 1 and it is NOT a Microsoft owned game (Sega). 100% Microsoft money deal. Timed of course. Sega wins because they get the Microsoft money now then when the deal ends they get the much larger PS audience to make money from. As far as Black Myth is concerned, the Chinese gaming platform market is very much PC then PS then everything else. Consoles were banned in China for years, then allowed and the PS is the console of choice. The release of Black Myth actually saw a PS5 console sale spike because of Chinese gamer's buying PS5's just to play this game. With the ever shrinking Xbox console market I can see a point where 3rd party games try to get Sony exclusive money because the ROI for Xbox console versions of those games is a shrinking endeavor.
  • Recent Achievements

    • One Month Later
      MoyaM earned a badge
      One Month Later
    • One Month Later
      qology earned a badge
      One Month Later
    • One Year In
      Frinco90 earned a badge
      One Year In
    • Apprentice
      Frinco90 went up a rank
      Apprentice
    • Week One Done
      theevergreentree earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      448
    2. 2
      +FloatingFatMan
      247
    3. 3
      snowy owl
      234
    4. 4
      ATLien_0
      202
    5. 5
      Xenon
      146
  • Tell a friend

    Love Neowin? Tell a friend!