Spiga

How to use ternary operator in javascript?

November 06, 08 by Gabi Solomon

The ternary operator will accept three operands and is used to assign a certain value to a variable based on a condition. The syntax is condition ? result1 : result2;

So if the the condition is evalued as true the result1 is runned else result2.

Example:

PLAIN TEXT
JavaScript:
  1. <script language=javascript>
  2. var x=3;
  3. (x == 3) ? y="true" : y="false";
  4. document.write(y);
  5. </script>

This will print out: true

Pretty simple, cheers.

Tabs without JavaScript

June 19, 08 by Gabi Solomon

Today i found an interesting article about Tabs without JavaScript. Turns out you can do a tabbing system without needing to use JavaScript, only by CSS and standard (X)HTML. The downside is that you won't get styling on the active tab to indicate that it is active.

Here is the code:

PLAIN TEXT
CSS:
  1. div.tabcontainer {
  2.  width: 500px;
  3.  background: #eee;
  4.  border: 1px solid #000000;
  5. }
  6. ul.tabnav {
  7.  list-style-type: none;
  8.  margin: 0;
  9.  padding: 0;
  10.  width: 100%;
  11.  overflow: hidden;
  12. }
  13.  
  14. ul.tabnav a {
  15.  display: block;
  16.  width: 100%;
  17. }
  18.  
  19. ul.tabnav a:hover {
  20.  background: #ccc;
  21. }
  22.  
  23. ul.tabnav li {
  24.  float: left;
  25.  width: 125px;
  26.  margin: 0;
  27.  padding: 0;
  28.  text-align: center;
  29. }
  30.  
  31. div.tabcontents {
  32.  height: 290px;
  33.  background: #ccc;
  34.  overflow: hidden;
  35.  border-top: 1px solid #011;
  36.  padding: 3px;
  37.  
  38. }
  39.  
  40. div.tabcontents div.content {
  41.  float: left;
  42.  width: 100%;
  43.  height: 102%;
  44.  overflow-y: auto;
  45. }
  46.  
  47. div.tabcontents div.content h2 {
  48.  margin-top: 3px;
  49. }

PLAIN TEXT
HTML:
  1. <div class="tabcontainer">
  2.  <ul class="tabnav">
  3.   <li><a href="#tab1">Tab 1</a></li>
  4.   <li><a href="#tab2">Tab 2</a></li>
  5.   <li><a href="#tab3">Tab 3</a></li>
  6.   <li><a href="#tab4">Tab 4</a></li>
  7.  </ul>
  8.  <div class="tabcontents">
  9.   <div class="content" id="tab1">
  10.    <h2>Tab 1</h2>
  11.   </div>
  12.   <div class="content" id="tab2">
  13.    <h2>Tab 2</h2>
  14.   </div>
  15.   <div class="content" id="tab3">
  16.    <h2>Tab 3</h2>
  17.   </div>
  18.   <div class="content" id="tab4">
  19.    <h2>Tab 4</h2>
  20.   </div>
  21.  </div>
  22. </div>

Demo page

Javascript Confirm Delete

June 14, 08 by Gabi Solomon

On all my projects there was at least one delete buton or a diferent action that would be irevocable. And many times during the developing phase i forgot to put a method of preventing clicking that link by mistake. Of course you can do a confirmation page from php that would be better since it will not depend on the user having javascript activated, but during the developing phase it is better to put a simple javascript confirm even if you will develop a php confirmation page. This will save some load of the server if the user has javascript activated, and save the user some time. Also it is best to always have a confirmation method since many times the user is in a hurry to click and might click the worng button.

There are 2 methods of doing a javascript confirm.

Using a separate function

PLAIN TEXT
HTML:
  2. function confirmDelete(delUrl) {
  3.   if (confirm("Are you sure you want to delete")) {
  4.     document.location = delUrl;
  5.   }
  6. }
  7. </script>
  8.  
  9. <a href="javascript:confirmDelete('delete.page?id=1')">Delete</a>

Confirming directly in the link

PLAIN TEXT
HTML:
  1. <a href="delete.page?id=1" onclick="return confirm('Are you sure you want to delete?')">Delete</a>

I have gotten my slef used to use the last method on all my delete buttons even if i develop a confirmation page later on. It prevents even me from clicking the delete button by mistake :) .

I hope this has been of some help to you.

Cheers

How to Reload the Page With JavaScript

June 08, 08 by Gabi Solomon

There are a few ways you can reload a page with javascript. I will post them all below, and for demonstration i will put them as button onclick action.

Using location.reload

PLAIN TEXT
HTML:
  1. <input onclick="window.location.reload()" type="button" value="Reload Page" />

Using history method

PLAIN TEXT
HTML:
  1. <input onclick="history.go(0)" type="button" value="Reload Page" />

Using location.href

PLAIN TEXT
HTML:
  1. <input onclick="window.location.href=window.location.href" type="button" value="Reload Page" />