/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] ‘reversed’ attribute control possible?

Copy linkTweet thisAlerts:
Apr 27.2017

Currently you can list the numbers in ascending and descending order.

[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> HTML5 page </title>
</head>
<body>
<ol id=”incOrder”>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ol>

<ol id=”decOrder” reversed>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ol>

<script>
// Control of ‘reversed’ attribute in both <ol> elements.
// Dynamic possible using ID of the elements???
</script>

</body>
</html>
[/code]

Is it possible to control the insertion of the ‘reversed’ attribute dynamically?
I don’t know what the JS would look like to insert the ‘reversed’
into the id=”incOrder” element.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumApr 27.2017 — Seems to be too easy to me as you are an experienced user: Do you mean this:
[CODE] <ol id="incOrder">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ol>
<button id="togglebutton">Toggle order</button>
<script>
togglebutton.addEventListener("click", function () {
if (incOrder.hasAttribute("reversed")) {
incOrder.removeAttribute("reversed");
} else {
incOrder.setAttribute("reversed", true);
}
});
</script>[/CODE]
Copy linkTweet thisAlerts:
@rootApr 27.2017 — HTML 5 has support for the REVERSED attribute, it still supports the start="" attribute,
[code=html]<ol reversed>
<li>List item one</li>

<li>List item two</li>

<li>List item three</li>

<li>List item four</li>

<li>List item five</li>

</ol> [/code]
will produce a list which starts at 5 and counts down to 1 but it does not alter the List item listing values, so you will get a list like 5. List item one
4. List item two
3. List item three
2. List item four
1. List item five

You can also use CSS to alter the running order of any list thats numbered.

I suspect that you are looking for the list contents to be reversed in running order?
Copy linkTweet thisAlerts:
@JMRKERauthorApr 27.2017 — Thanks 'Sempervivum', that's exactly what I was looking for.

I knew about the 'setAttribute' to set the value,

but did not remember the 'removeAttribute' function.

I had been trying to use setAttribute with the true/false setting only.

I already have a function to reverse the order of the contents of the list.

It does not change the numbered display at all.

I only wanted to change the numbered display order (when/if desired).

Thanks '.' also. I did not realize the start value would also show in reversed order.

Appreciate the information from all. ?
Copy linkTweet thisAlerts:
@KeverApr 27.2017 — You should be aware that the 'reversed' attribute isn't supported by IE and the current version of Edge. If you want to support them, you can make use of the 'value' attribute.
&lt;ol id="myList"&gt; <br/>
&lt;li value="1"&gt;List item one&lt;/li&gt; <br/>
&lt;li value="2"&gt;List item two&lt;/li&gt; <br/>
&lt;li value="3"&gt;List item three&lt;/li&gt; <br/>
&lt;li value="4"&gt;List item four&lt;/li&gt; <br/>
&lt;li value="5"&gt;List item five&lt;/li&gt; <br/>
&lt;/ol&gt;

&lt;script&gt;
var list = document.getElementById('myList');
list.addEventListener('click', reverseList);

function reverseList(){
var i, items = this.getElementsByTagName('li');
for(i = items.length - 1; i &gt;= 0; i--){
this.appendChild(items[i]);
}
};
&lt;/script&gt;
×

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...