Textpattern CMS

#1 2014-12-02 22:34:54

Derekstaff

Member

Registered: 2014-10-23

Posts: 28

Wraptag and ID

Is it possible to add an ID to an html element created with a wraptag attribute? I want to create a main navigation menu using the following form

<nav id="main-nav">
	<a class="nav-collapse" href="#nav" id="nav-collapse">Menu</a>
    <txp:section_list wraptag="ul" class="nav" break="li" />
    <p><txp:search_input /></p>
</nav>

I would like to add an ID to the UL this creates, for the purpose of scripting (specifically, a JavaScript script to toggle the menu UL display when at small/mobile screen sizes). But I can’t see how I’d do that.

#2 2014-12-02 22:57:46

GugUser

Member

From: Quito (Ecuador)

Registered: 2007-12-16

Posts: 1,473

Re: Wraptag and ID

For which UL?

This <a class="nav-collapse" href="#nav" id="nav-collapse">Menu</a> isn’t an UL, an here, <txp:section_list wraptag="ul" class="nav" break="li" />, you can work with the class.

Or, you do it like this:

<ul id="your-id">
<txp:section_list break="li" />
</ul>

#3 2014-12-02 23:40:37

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,595

Website

Re: Wraptag and ID

And you could also direct your javascript to use .nav or #main-nav ul instead of the id.

---

TXP Builders – finely-crafted code, design and txp

#4 2014-12-03 02:05:22

Derekstaff

Member

Registered: 2014-10-23

Posts: 28

Re: Wraptag and ID

The Javascript tutorial I’m following gives the UL both a class and an ID, and seems to use them separately.

window.onload = function() {
	var collapse = document.getElementById('nav-collapse');
	var nav = document.getElementById('nav');
	//toggle class utility function
	function classToggle( element, tclass ) {
		var classes = element.className,
			pattern = new RegExp( tclass );
		var hasClass = pattern.test( classes );
		//toggle the class
		classes = hasClass ? classes.replace( pattern, '') :
		classes + ' ' + tclass;
		element.className = classes.trim();
	};
	classToggle(nav, 'hide');
	classToggle(collapse, 'active');
	collapse.onclick = function() {
		classToggle(nav, 'hide');
		return false;
	}
}

I’m just becoming familiar with Javascript, so I’m not sure the syntax for changing it from getElementById to calling it by #main-nav ul.

#5 2014-12-03 06:20:23

Derekstaff

Member

Registered: 2014-10-23

Posts: 28

Re: Wraptag and ID

Any recommendation on how to change the function so that it calls on #main-nav ul or the class instead of the ID?

#6 2014-12-03 09:00:39

trenc

Plugin Author

From: Malmö

Registered: 2008-02-27

Posts: 572

Website GitHub

Re: Wraptag and ID

What’s wrong with GugUser’s solution?

---

Weblog | 32fthome

#7 2014-12-03 09:06:54

trenc

Plugin Author

From: Malmö

Registered: 2008-02-27

Posts: 572

Website GitHub

Re: Wraptag and ID

var nav = document.getElementsByClassName('nav');

getElementsByClassName() does not work on IE8 and below.

Or you could simply throw some jQuery on it. It’s made for these issues.

Last edited by trenc (2014-12-03 09:07:21)

---

Weblog | 32fthome

#8 2014-12-06 21:01:44

Derekstaff

Member

Registered: 2014-10-23

Posts: 28

Re: Wraptag and ID

I did some playing around with it, and it looks like I was able to get it to work with GugUser’s solution. Thanks so much for all the help, everyone!