Toon posts:

[JS] Opera & Safari probleem

Pagina: 1
Acties:

maandag 1 december 2008 14:31

Acties:
  • 0 Henk 'm!
  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19

imp4ct

Topicstarter
Ik ben gisteren bezig geweest om het Clean Calendar script aan te passen naar mijn eigen stijl.

Nu is dit eigenlijk na "vele uren" :) zeer goed gelukt, maar 'k zit nog met een klein probleempje. Het script wilt enkel werken in Opera & Safari wanneer ik van de "actie" knop, waarmee de kalender zich opent een <input type="text"> is, orgineel is het een <input type="images"> en met IE 6.0, IE 7.0 & FF werkt het allemaal prima.

Weet er iemand hoe'k dit het beste kan oplossen?
'k Heb al andere tags proberen te gebruiken en onclick events maar niets schijnt te werken.

Online voorbeeld : link
Soure code : source

Als je de source op je eigen hosting wilt draaien, gewoon zip file uitpakken en alles uploaden in een folder

PHP: index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Clear Calendar by Maarten Tibau - Orignal code by Marc Grabanski (marcgrabanski.com)</title>
<link rel="stylesheet" href="CORE/css/reset.css" type="text/css">
<link rel="stylesheet" href="CORE/css/calendar.css" type="text/css">
<!--[if IE 7]><link rel="stylesheet" href="CORE/css/calendar_ie7.css" type="text/css"><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="CORE/css/calendar_ie6.css" type="text/css"><![endif]-->
</head>
<body>
<div id="container">
  <h1>Clean Calendar</h1>
  <h4>Orignal code by Marc Grabanski (marcgrabanski.com)</h4>
  <h4>Current version coded by Maarten Tibau</h4>
  <div id="frm">
    <select id="calendarD">
      <?
        for($x=1;$x<=31;$x++)
        {
          if($x == date('j'))
            echo '<option value="'.$x.'" SELECTED>'.$x.'</option>';
          else
            echo '<option value="'.$x.'">'.$x.'</option>';
        }
      ?>
    </select>
    <select id="calendarM">
      <?
        $months = Array('January','February','March','April','May','June','July','August','September','October','November','December');  
      
        for($x=0;$x<=11;$x++)
        {
          if($x == date('n')-1)
            echo '<option value="'.$x.'" SELECTED>'.$months[$x].'</option>';
          else
            echo '<option value="'.$x.'">'.$months[$x].'</option>';
        }
      ?>
    </select>
    <select id="calendarY">
      <?
        for($x=2025;$x>=1900;$x--)
        {
          if($x == date('Y'))
            echo '<option value="'.$x.'" SELECTED>'.$x.'</option>';
          else
            echo '<option value="'.$x.'">'.$x.'</option>';
        }
      ?>
    </select>
    <input type="image" src="images/calendar.jpg" class="calendarSelectDate">
    <div id="calendarDiv"></div>
  </div>
</div>
<script src="CORE/js/calendar_en.js" type="text/javascript"></script>
</body>
</html>


JavaScript: calendar_en.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263

/*This script is based on the Pop-Up Calendar Built from Scratch by Marc Grabanski - MarcGrabanski.com*/
/*Many thanks to Marc Grabanski for the original source code*/

/*The changes to the JavaScript source code are done by Maarten Tibau - Webtrix.be*/
/*The source files can be found at this address: http://www.devtrix.be/calendar/calendar_source.zip*/

var popUpCal = 
{calendarId: 'calendarDiv', inputClass: 'calendarSelectDate',

  init: function () 
  {
    var x = getElementsByClass(popUpCal.inputClass, document, 'input');
    var y = document.getElementById(popUpCal.calendarId);
    // set the calendar position based on the input position
    for (var i=0; i<x.length; i++) 
    {
      x[i].onfocus = function () 
      {
        popUpCal.selectedMonth = document.getElementById('calendarM').value;
        popUpCal.selectedYear = document.getElementById('calendarY').value;
        popUpCal.selectedDay = document.getElementById('calendarD').value;
        setPos(this, y); // setPos(targetObj,moveObj)
        y.style.display = 'block';
        popUpCal.drawCalendar(this); 
        popUpCal.setupLinks(this);
      }
    }
  },
  
  drawCalendar: function (inputObj) 
  {
    var html = '';
    var weekDays = new Array('M','T','W','T','F','S','S');
    var daysInMonth = getDaysInMonth(popUpCal.selectedYear, popUpCal.selectedMonth);
    var startDay = getFirstDayofMonth(popUpCal.selectedYear, popUpCal.selectedMonth);
    var numRows = 0;
    var printDate = 1;
    var today = document.getElementById('calendarD').value;
    var thisMonth = document.getElementById('calendarM').value;
    var thisYear = document.getElementById('calendarY').value;
    
    html += '<div class=closeselectdate><a id="closeCalender"><img src="images/close.gif" width="11" height="11" alt="close" title="Close the calendar"></a></div>';
    html += '<div id="selectdate"><ol id="linksTable" class="scroll">';
    html += '<li class="prevnext"><a id="prevMonth"><img src="images/prev.gif" width="15" height="17" alt="prev" title="Go to the next month"></a></li>';
    html += '<li class="title">'+getMonthName(popUpCal.selectedMonth)+' '+popUpCal.selectedYear+'</li>';
    html += '<li class="prevnext"><a id="nextMonth"><img src="images/next.gif" width="15" height="17" alt="next" title="Go to the previous month"></a></li>';
    html += '</ol>';
    html += '<ol id="calendar" class="days"><ol class="name">';
  
    for (var j=0; j<weekDays.length; j++) 
    {
      html += '<li>'+weekDays[j]+'</li>';
    }
  
    if(startDay != 7) 
    {
      numRows = Math.ceil(((startDay+1)+(daysInMonth))/7); // calculate the number of rows to generate
    }
  
    // calculate number of days before calendar starts
    if(startDay != 7) 
    {
      var noPrintDays = startDay + 1; 
    } 
    else 
    {
      var noPrintDays = 0; // if sunday print right away    
    }
    // create calendar rows
    html += '</ol>';
    for (var e=0; e<numRows; e++) 
    {
      html += '<ol class="week">';
      // create calendar days
      for (var f=0; f<7; f++) 
      {
        if((printDate == today) && (popUpCal.selectedYear == thisYear) && (popUpCal.selectedMonth == thisMonth) && (noPrintDays == 0)) 
        {
          html += '<li class="selected">';
        } 
        else 
        {
          html += '<li class="day">';
        }
        if(noPrintDays == 0) 
        {
          if(printDate <= daysInMonth) 
          {
            html += '<a>'+printDate+'</a></li>';
          }
          printDate++;
        }
        else
        {
          html += '&nbsp;</li>';
        }
        if(noPrintDays > 0) noPrintDays--;
      }
      html += '</ol>';
    }
    html += '</ol></div>';
  
    // add calendar to element to calendar Div
    var calendarDiv = document.getElementById(popUpCal.calendarId);
    calendarDiv.innerHTML = html;
    // close button link
    document.getElementById('closeCalender').onclick = function () 
    {
      calendarDiv.style.display = 'none';
    }
    // setup next and previous links
    document.getElementById('prevMonth').onclick = function () 
    {
      popUpCal.selectedMonth--;
      if(popUpCal.selectedMonth < 0) 
      {
        popUpCal.selectedMonth = 11;
        popUpCal.selectedYear--;
      }
      popUpCal.drawCalendar(inputObj); 
      popUpCal.setupLinks(inputObj);
    }
    document.getElementById('nextMonth').onclick = function () 
    {
      popUpCal.selectedMonth++;
      if(popUpCal.selectedMonth > 11) 
      {
        popUpCal.selectedMonth = 0;
        popUpCal.selectedYear++;
      }
      popUpCal.drawCalendar(inputObj); 
      popUpCal.setupLinks(inputObj);
    }
  }, // end drawCalendar function
  
  setupLinks: function (inputObj) 
  {
    // set up link events on calendar table
    var y = document.getElementById('calendar');
    var x = y.getElementsByTagName('a');
    for (var i=0; i<x.length; i++) 
    {
      x[i].onmouseover = function () 
      {
        if(this.parentNode.className != 'selected')
          this.parentNode.className = 'hover';
      }
      x[i].onmouseout = function () 
      {
        if(this.parentNode.className != 'selected')
        this.parentNode.className = 'day';
      }
      x[i].onclick = function () 
      {
        document.getElementById(popUpCal.calendarId).style.display = 'none';

        popUpCal.selectedDay = this.innerHTML;      
        document.getElementById('calendarD').selectedIndex = popUpCal.selectedDay-1;
        document.getElementById('calendarM').selectedIndex = popUpCal.selectedMonth;
        document.getElementById('calendarY').selectedIndex = 2025-popUpCal.selectedYear;
      }
    } 
  }
}

// Add calendar event that has wide browser support
if(typeof window.addEventListener != "undefined")
  window.addEventListener("load", popUpCal.init, false);
else if(typeof window.attachEvent != "undefined")
  window.attachEvent("onload", popUpCal.init);
else 
{
  if(window.onload != null) 
  {
    var oldOnload = window.onload;
    window.onload = function (e) 
    {
      oldOnload(e);
      popUpCal.init();
    };
  }
  else
    window.onload = popUpCal.init;
}

// Functions Dealing with Dates
function formatDate(Day, Month, Year) 
{
  Month++; // adjust javascript month
  if(Month <10) Month = '0'+Month; // add a zero if less than 10
  if(Day < 10) Day = '0'+Day; // add a zero if less than 10
  var dateString = Day+'/'+Month+'/'+Year;
  return dateString;
}

function getMonthName(month) 
{
  var monthNames = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
  return monthNames[month];
}

function getDayName(day) 
{
  var dayNames = new Array('Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday')
  return dayNames[day];
}

function getDaysInMonth(year, month) 
{
  return 32 - new Date(year, month, 32).getDate();
}

function getFirstDayofMonth(year, month) 
{
  var day;
  day = new Date(year, month, 0).getDay()-1;
  return day;
}

//Common Scripts
function getElementsByClass(searchClass,node,tag) 
{
  var classElements = new Array();
  if(node == null) node = document;
  if(tag == null) tag = '*';
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
  for (i = 0, j = 0; i < elsLen; i++) 
  {
    if(pattern.test(els[i].className)) 
    {
      classElements[j] = els[i];
      j++;
    }
  }
  return classElements;
}

//Position Functions
function setPos(targetObj,moveObj) 
{
  var coors = findPos(targetObj);
  moveObj.style.position = 'absolute';
  moveObj.style.top = coors[1] + 'px';
  moveObj.style.left = coors[0]+22 + 'px';
}

function findPos(obj) 
{
  var curleft = curtop = 0;
  if(obj.offsetParent) 
  {
    curleft = obj.offsetLeft
    curtop = obj.offsetTop
    while (obj = obj.offsetParent) 
    {
      curleft += obj.offsetLeft
      curtop += obj.offsetTop
    }
  }
  return [curleft,curtop];
}

[ Voor 100% gewijzigd door imp4ct op 01-12-2008 14:34 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

dinsdag 2 december 2008 12:01

Acties:
  • 0 Henk 'm!

Verwijderd

Je voegt nu een onfocus toe.. Is het niet zo dat dat niet altijd werkt als je dit event niet van tevoren al hebt toegekend, ie
HTML:
1

<input type="image" onfocus="function() { }" src="images/calendar.jpg" class="calendarSelectDate">

Waarom eigenlijk geen onclick?

[ Voor 5% gewijzigd door Verwijderd op 02-12-2008 12:02 ]

woensdag 3 december 2008 06:29

Acties:
  • 0 Henk 'm!
  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19

imp4ct

Topicstarter
Verwijderd schreef op dinsdag 02 december 2008 @ 12:01:
Je voegt nu een onfocus toe.. Is het niet zo dat dat niet altijd werkt als je dit event niet van tevoren al hebt toegekend, ie
HTML:
1

<input type="image" onfocus="function() { }" src="images/calendar.jpg" class="calendarSelectDate">

Waarom eigenlijk geen onclick?
Wel zoals vanboven in m'n post staat, werkt dus de onClick event niet, 'k heb dit al geprobeerd. 'k Heb ook jou voorbeeld eens geprobeerd, maar zonder succes.

[ Voor 6% gewijzigd door imp4ct op 03-12-2008 06:33 ]

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

woensdag 3 december 2008 11:13

Acties:
  • 0 Henk 'm!
  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 22-09 16:31

Bosmonster

*zucht*

ik mis een form-tag (waarom dan uberhaupt een input type=image gebruiken, wat een submitknop is feitelijk :?)

[ Voor 70% gewijzigd door Bosmonster op 03-12-2008 11:14 ]

donderdag 4 december 2008 18:04

Acties:
  • 0 Henk 'm!
  • imp4ct
  • Registratie: November 2003
  • Laatst online: 06-09 22:19

imp4ct

Topicstarter
Bosmonster schreef op woensdag 03 december 2008 @ 11:13:
ik mis een form-tag (waarom dan uberhaupt een input type=image gebruiken, wat een submitknop is feitelijk :?)
Wel, meestal wordt zo'n calendar ding ook wel gebruik in een form. Maar bij dit is het gewoon om het te laten zien.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq