• 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

    • No operating system works well with programs that modify its interface. There will always be bugs, whether it's MacOS or Linux. Windows too, you'll only suffer from bugs using this crap software.
    • KDE brings UI improvements, bug fixes and more to Plasma 6.4 as stable release draws near by David Uzondu With less than a month to the release of Plasma 6.4, the KDE dev team has shared what it has been working on in the latest issue of its weekly roundup. The update shows a heavy focus on user interface polish and a whole slew of bug fixes as the June 17 release date gets closer. The team has pushed a number of UI refinements for the upcoming version. On the System Settings page for Wi-Fi, the network list can now be fully navigated with a keyboard. KDE also disabled the ability to drag and drop displays on top of one another in the monitor settings. This was done because it could create unsupported arrangements that triggered a cascade of strange bugs throughout the system. Waking up a sleeping computer by pressing the power button no longer causes the bizarre logout screen to appear after you unlock it, which is a relief. Alignment issues in the settings page for the Digital Clock widget were also resolved. The list of bug fixes for 6.4 is extensive. The development team has fixed the most common crash affecting the System Monitor and squashed another one related to a divide-by-zero error. For users with multiple monitors, a long-awaited fix has landed that prevents windows from disappearing when the screen they are on gets disconnected. Even the humble Sticky Notes widget received attention; it will no longer freeze the Plasma shell if you place it on a very thick panel. Discover, the software center, also had a bug patched that caused it to crash if closed too quickly after launch. Here's the full list of improvements: Putting a Sticky Note widget on a very thick panel can no longer cause Plasma to freeze; now, you can use a thick panel with a sticky note on it as a notes sidebar. Fixed the most common System Monitor crash. Fixed another crash in System Monitor, this time a divide-by-zero. Fixed a case where xdg-desktop-portal-kde could crash after you choose a video source to start streaming. Fixed a bug that caused Discover to crash if you close it immediately after it launched. Fixed multiple subtle bugs with the screen chooser widget and OSD that caused it to do the wrong thing on rotated screens or when mirroring screens. Fixed a bug that caused the System Settings’ search field not to be focused properly when pressing Ctrl+F while any UI elements in a settings page already had focus. Fixed the root cause of multiple issues involving windows disappearing when you disconnect the screen they’re on. Clicking a button on a desktop widget that opens a menu no longer inappropriately makes the widget enter Widget Edit Mode. Files with a # or ? character in their name or full path are no longer unexpectedly missing from the history lists in Kicker/Kickoff/etc launchers. Fixed a bug that caused the screen chooser window to sometimes not appear as expected when OBS was launched. Fixed a bug that caused tiled windows on a multi-screen setup to lose their tiling settings when the system went to sleep and woke up again. The "Move window to [activity]" feature now works properly when invoked from the Task Manager widget. Fixed a bug in the Kicker Application Menu that caused keyboard navigation not to work if the popup opened with an item under the pointer. In the Overview effect’s grid view, dragging windows tiled on one virtual desktop over to a different virtual desktop now keeps them tiled as expected. The focus may be on the imminent 6.4 release, but work on what comes next never really stops. Looking ahead, development on Plasma 6.5 is already well underway. Just last week, the KDE team brought several performance improvements to Plasma 6.5.0. This week, the team fixed a nagging bug that sometimes caused the Networks widget to think a hotspot was still enabled after disconnecting from Wi-Fi. On the features side, the System Settings' Fonts page now prevents you from breaking your system entirely by setting fonts below 4pt. In addition to that, switching time spans in the Info Center’s energy page now features smooth graph animations. Performance-wise, kwriteconfig should also be faster, allowing changes you made to the keyboard layout using the tool to reflect immediately.
    • Display Driver Uninstaller (DDU) 18.1.1.4 by Razvan Serea Display Driver Uninstaller (DDU) is a utility for completely removing AMD/NVIDIA/INTEL graphics drivers and related packages from your system, attempting to eliminate all leftovers (including registry entries, folders and files, driver store). Though AMD/NVIDIA/INTEL drivers can usually be removed via the Windows Control Panel, this uninstaller tool was created for situations where standard uninstall fails, or when you need to fully remove NVIDIA or ATI graphics card drivers. After using this driver cleaner, your system will behave as though it’s the first time you’re installing a new driver—similar to a fresh Windows installation. As with all such tools, we recommend creating a restore point beforehand, allowing you to undo changes if issues arise. If you're having trouble installing an older or newer driver, try it—there are reports that it resolves such problems. Recommended usage: The tool can be used in Normal mode but for absolute stability when using DDU, Safemode is always the best. Make a backup or a system restore (but it should normally be pretty safe). It is best to exclude the DDU folder completely from any security software to avoid issues. You do NOT need to uninstall the driver prior using DDU. Requirements: .NET Framework 4.8 Compatible with Windows 7, 8, 8.1, 10, and 11 (32-bit or 64-bit) Note: Using on Insider Preview builds is at your own risk. Display Driver Uninstaller (DDU) 18.1.1.4 changelog: Intel: Added NPU presence detection before removing shared DLL files (these were previously left to prevent potential NPU-related issues). Intel: Added optional NPU removal Improved "Extension" driver removal process. Updated several translations. Download: Display Driver Uninstaller 18.1.1.4 | 1.7 MB (Freeware) Download: DDU Portable | 1.2 MB Links: Display Driver Uninstaller Home Page | Screenshot | Forum Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • That is what I also think to a point. How is 26 necessarily different than just another iteration like 18, 19, 20, etc? At first I think it would be better for Apple to use 2026, 2027, and then maybe truncate it to just 28, 29, and so on. Granted, I also think it makes more sense to use the year when it was released (2025 or 25), not 26/2026. Maybe Apple's thinking is as stated by Aditya that the bulk of a release being the current release is during the following year (2026, for example) after it is released (2025, for example). There are other examples of these sorts of things. In the NBA, the season has always started in the Fall and ends in the Spring. When the season ends is how the season is named. So, this is the 2025 NBA season and the Pacers and Thunder are playing to be the 2025 NBA Champions. The NFL starts in the Fall and the end of the season is always in the beginning of the next year as well. The Super Bowl was played on February 9, 2025, but that was the end of the 2024 NFL season. So, contrary to the NBA, the NFL names it season based on when it starts, not when it ends. Maybe that is because more of the NFL season is played at the end of the year (2024 in the most recent example) whereas most of the NBA season is played in the first half of the following year (2025 in the current example).
  • Recent Achievements

    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      snowy owl
      252
    3. 3
      +FloatingFatMan
      251
    4. 4
      ATLien_0
      228
    5. 5
      +Edouard
      191
  • Tell a friend

    Love Neowin? Tell a friend!