Create Up/Down Triangle for Sorting?

Is there a way to make a Triangle Symbol pointing Up and Down, respectively?

I want these to use next to a Column Heading for sorting purposes…

Thanks,

Debbie

A quick search for “css triangles” and Bingo, over a million results.

This one was top of the list:

I already saw that, BUT I asked this question in the HTML Forum because I thought there might be an HTML symbol I could use - like the ampersand…

Your suggestion sure seems like a lot of code and effort for just a triangle.

Plus, I need my PHP code to be able to easily toggle between an Up Triangle and Down Triangle, and I’m not sure how I’d do that with your CSS suggestion…

Sincerely,

Debbie

You could use unicode characters ▲ and ▼ if you like. If your pages are served as UTF-8 you can just copy chose characters and insert them. Otherwise, use the character references ▲ and ▼ or ▲ and ▼ respectively.

Those are exactly the characters that I was looking for!

How would I know that??

What are all of those characters?

Sincerely,

Debbie

You can check the encoding that your server is sending out in your browser’s dev tools. For example, in the Network panel of the Chrome dev tools, click on the page and you’ll see your resosponse headers, which will include something like this:

Content-Type:text/html; charset=UTF-8

What are all of those characters?

They are the Unicode references for those characters. So, paste ▲ into a .html file and open it in your browser and you’ll see the up arrow:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>

<p>[COLOR="#000000"]&#96[/COLOR]50;</p>
			
</body>
</html>

Here we go:


<?php
  $title='Toggle Up and Down Arrows';
  if( ! isset($_SESSION) ):
    session_start();
  endif;
  $_SESSION['toggle'] = isset($_SESSION['toggle'] ) ?  $_SESSION['toggle']  : FALSE;
  $_SESSION['toggle'] = ! $_SESSION['toggle'] ;
  $toggle     = $_SESSION['toggle']  ? '«'  :  '»';
  $direction = $_SESSION['toggle']  ? 'UP'  :  'DOWN';
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  lang="en" xml:lang="en">
<head>
  <title><?=$title;?></title>
  <style type='text/css'>
 .invert {
    -webkit-transform: rotate(90deg);   
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    display:inline-block;
}
a {text-decoration:none; padding:0.22em 0.42em;}
a:hover {background-color: pink;}
</style>
</head>
<body>
  <h1>
    <a href="/index.php" title='going <?=$direction;?>'>
       <b class='invert'>
            <?=$toggle ;?>
      </b>        
      <?=$title;?>
    </a>
  </h1>
</body>
</html>

Special Note - Version 001:
This has been tried, tested and works fine. No doubt it can be optimised if and only if there is sufficient viewers to warrant changes :slight_smile:
Otherwise, next problem please :slight_smile:

If you want to do it dynamically (i.e. without reloading the page), you’ll have to use JavaScript to toggle between them.

I’ve just a small presumption that the up/down’s are for sorting of a list (as the title of this topic says). :wink:
In that case the down or up will be triggered by an onclick (triggering also the sorting), and is waiting for another click to toggle upside down again. So indeed javascript will be the most efficient way, I think.

  • In case only a hover-state is needed (for a dropdown menu or something like that), css is sufficient for the change.

@John_Betong: Next problem please? - [U]Can I Use [I]transform[/I][/U] - not for IE8 and before … (:

=======
More special characters
For who is wondering if there are more of these special characters: yes! There are lists with ten thousands of it ([U]see here[/U] or [URL=“http://wjsn.home.xs4all.nl/htmlcodes.htm”][U]here[/U]). :smiley:
They cover also all non-Latin alphabets, like Greek, Braille, Chinese, Cyrillian etc. etc.; and mathematic characters, figures, etc.etc.
For instance:

[INDENT][INDENT]The & #931; (without space): Σ
The & #10283; (without space):
The & #20001; (without space):
The & #1049; (without space): Й
The & #1769; (without space): ۩
The & #8800; (without space):
The & #1792; (without space): ܀
The & #3664; (without space):
The & #9733; (without space):
The & #9658; (without space):
The & #9668; (without space):
The & #10048; (without space):
The & #10053; (without space):
The & #10163; (without space):
The & #10705; (without space):
The & #11027; (without space): especially made for the [U]followers[/U] of the [URL=“http://en.wikipedia.org/wiki/GR_footpath”][U]GR[/U]'s . :wink:
[/INDENT][/INDENT]

  • With the “font”-size they can be adapted to smaller or bigger. :slight_smile:
  • The UTF-8 charset is always safe.
  • Some characters aren’t always displayable: they need a special country/language setting of the computer, or special fonts, or maybe something else.

I opened up FireBug on this page, and looked at the HTML, and saw this…


<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">

So I guess that means that SitePoint is not being displayed as UTF-8 in my browser??

I am not understanding how you are supposed to dictate how a page is displayed…

Do you set this on the Server?

Or is this something dealing with each webpage?

Or is this an issue with my browser? (Because I obviously didn’t code SitePoint’s website!!)

Right now I’m on my old MacBook and using MAMP.

But what happens when I upload my code to my VPS?

This part of the conversation is new to me and not making any sense… :-/

Sincerely,

Debbie

I thought I established this in the past…

No JavaScript!!! :wink:

Debbie

Try this:

http://www.johns-jokes.com/downloads/sp-b/doubledee/index.php

No JavaScript and simplified CSS so inverse not required.

Oh ok, I didn’t realise.
Just out of interest: why not?

Short answer: It gets on my nerves, and “I” associate it with poor planning and bloated webpages. (Not here to debate that in this thread, though!!)

:wink:

Debbie

Interesting, but not exactly what I wanted.

Here are my full requirements…

1.) No JavaScript

2.) No Cookies (except for Session Cookie)

3.) No additional “Sort Order” variable in URL (i.e. Must be done behind the scenes using Session variable)

Why? My “Pretty URL” is long enough as it is!

4.) Clicking on a Column Heading should sort by that Column and change the Sort Order, however, simply refreshing the page should NOT change the Sort Order

Why? Image if every time you refreshed your Gmail or Yahoo Mail - to check for new messages - the Sort Order changed?! :eek:

This last requirement makes things trickier!!

I’m scratching my head now trying to come up with a solution that meets all four requirements above…

Sincerely,

Debbie

P.S. Looks like this thread just went from HTML to PHP!!! :lol: (BTW, mods, I was just responding to John’s comments…)

It’s really the site’s server that set the encoding. This is what SP puts out:

It happens to be the same as what’s placed in the <head> in the HTML, but if it were different, the server version would win out. (I gather the main reason to have it in the <head> of the document is for when you are viewing pages offline.)

I am not understanding how you are supposed to dictate how a page is displayed…

Do you set this on the Server?

Yes. If you don’t like the encoding your server puts out, then you can change it. It’s most likely to be UTF-8 these days, though, which is what it should be.

But what happens when I upload my code to my VPS?

If your remote server puts out a different encoding, there’s a small chance things might change a bit on your site, so it’s good to make sure your local server mirrors the settings on the remote server (encoding, PHP versions etc.)

Looks like this thread just went from HTML to PHP!

Your original question implied the use of JS or PHP (for sorting etc.), but JS is the standard way to go, whether you like it or not. But obviously it can be done with PHP.

Fair enough.
The bloated pages reputation is also not entirely undeserved.

Here are my full requirements…

  1. No JavaScript
  2. Clicking on a Column Heading should sort by that Column and change the Sort Order, however, simply refreshing the page should NOT change the Sort Order
  3. No additional “Sort Order” variable in URL (i.e. Must be done behind the scenes using Session variable)
  4. No Cookies (except for Session Cookie)
  • No javascript > is not the problem, everything can be done by php.
  • The fundamental problem is that there has to be a memory-setting (during the session) for the column sorting order.
  • I think it’s impossible to change the Session Cookie during a session, but I’m not sure; please correct me if I’m wrong!
  • You don’t want an adapted URL.
  • Then 2 things are remaining:
    [LIST=1]
  • Set the memory-bit client-side (with a php-cookie) > but you don’t want that.
  • Set the memory-bit server-side.
    [/LIST]

The memory-bit cannot be in the page itself: then it’s lost when refreshed or after visiting another page.
So I think the only escape is to make a “memory-page” on the server, outside the page of the table.
I guess that could be a temporary database, but don’t know how to build that.

Anyway: one cookie and the problem is solved! :slight_smile:


It’s a “functional cookie”: these are mostly allowed by cookie laws, that will not be a problem.
The only thing is then: visitors with disabled cookies; they have to sort again at each visit of the page. But I guess there is almost nobody with totally browser-disabled cookies: 80.45296% of the websites shouldn’t work for them.

Try this:

http://www.johns-jokes.com/downloads/sp-b/doubledee/index.php

Please test this new super-dooper version and see if all your requirements are satisfied. Take my word for it, JavaScript is NOT included :slight_smile:

Sorry, that sample doesn’t work when I try it.

I decided to remove this requirement…

3.) No additional “Sort Order” variable in URL (i.e. Must be done behind the scenes using Session variable)

The good news is that I figured everything out last week, and all of my Requirements were met, and the end result looks awesome. (Plus, there is No JavaScript!!) :slight_smile:

Thanks for trying to help.

Sincerely,

Debbie