Zur Zeit wird gefiltert nach: Web Programming
Filter zurücksetzen

Update zum gestrigen Update Bug von Ubuntu :-)

Wir können uns freuen, das Team von Ubuntu hat schnell reagiert und es gibt ein aktualisiertes Update, mit dem auch die korrekten Pfad-Angaben in open_basedir in der php.ini wieder funktionieren!

Danke!

Ubuntu PHP Update 5.3.2-1ubuntu4.6 open_basedir Problem

Heute haben wir einige Sicherheitsupdates für Ubuntu 10.04 LTS installiert. Darunter war auch das PHP Update 5.3.2-1ubuntu4.6. Schade nur, dass diese Update einen Bug enthält der einen Fehler bei der open_basedir Direktive verursacht.

PHP Warning:  Unknown: open_basedir restriction in effect. File(/var/www/virtual/verzeichnisXY/index.php) is not within the allowed path(s): (/var/www/virtual/verzeichnisXY/:/var/www/virtual/verzeichnisXY/phptmp/:/usr/share/php/) in Unknown on line 0


Zum Glück war relativ klar, worum es sich handelt und da auch andere mit dem PHP Update von Ubuntu Probleme hatten, ließ sich ein Workaround für das open_basedir Problem finden. Besonders ärgerlich an dem PHP open_basedir-Bug ist dann auch noch, dass er in Debian bereits im November behoben wurde, wie ein Kommentator im Bug-Tracker feststellt.

Wenn man die php.ini bearbeitet und bei allen Verzeichnissen den slash am Ende entfernt, geht wieder alles. Allerdings ist das natürlich nicht die perfekte Lösung, alternativ könnte man auch die vorherigen Pakete wieder einspielen, die die Sicherheitslücken enthalten, aber dafür muss die php.ini nicht bearbeitet werden.

Das Entfernen des Slash sorgt für ein Problem, dass ein mögliches Sicherheitsrisiko darstellt und daher sollte möglichst bald nach dem der Bug im Update behoben wurde, dieser fehlende Slash wieder ergänzt werden. Zu Details über diese open_basedir-Sicherheitseinstellungen für PHP am besten im Manual nachlesen.

 

Javascript Galleria and IE6, 7 and 8 compatibility

As requested by a few posters at getsatisfaction.com I will post my effort to make Galleria from galleria.aino.se compatible with IE 6 today and give a few hints to problems with IE 7 and IE 8. For those who run the classic theme I am sorry, we needed only a lightbox theme so far so thats what I will describe below.

I think all the Javascript code included in Galleria runs in IE 6. The one big problem is the themes and their CSS code. I managed to get it working in IE 6, but there are still a few small visual glitches, e. g. transparent PNGs. If it really disturbs you you can fix it easily. Our policy regarding IE 6 is to support it so far, that the site is readable and usable, but we will overlook some minor design problems as we hope more and more people start using good browsers.


Here is the Galleria with our theme, click on one of the images to open the Galleria Lightbox:

Fixes for IE 7 and 8

This part is needed to fix displaying and loading errors in IE 7 and 8. 

As far as I debugged the issue the theme CSS loading code does not work well in IE7 and 8. My solution was to load the CSS of the theme from the HTML file. To do this you need to follow these steps:


  1. Edit the theme .js file and comment the css line out like below::

    //css: 'galleria.[THEMENAME].css',



  2. Include the css file in the HTML file of your page:

    < link rel="stylesheet" type="text/css" href="[PATH_TO_GALLERIA]/themes/[THEMENAME]/galleria.[THEMENAME].css" />



  3. Patch galleria to load the theme without css,
    original code (in my galleria version this code appears around line 1343):

    if (obj.css) {
    var css;
    proto.loop(proto.getElements('script'), function(el) {
    var reg = new RegExp('galleria.' + obj.name.toLowerCase() + '.js');
    if(reg.test(el.src)) {
    css = el.src.replace(/[^\/]*$/, "") + obj.css;
    proto.loadCSS(css, function() {
    G.theme = theme;
    jQuery(document).trigger( G.THEMELOAD );
    });
    }
    });
    if (!css) {
    G.raise('No theme CSS loaded');
    }
    }
    return theme;

    Add the lines at the end:

    if (obj.css) {
    var css;
    proto.loop(proto.getElements('script'), function(el) {
    var reg = new RegExp('galleria.' + obj.name.toLowerCase() + '.js');
    if(reg.test(el.src)) {
    css = el.src.replace(/[^\/]*$/, "") + obj.css;
    proto.loadCSS(css, function() {
    G.theme = theme;
    jQuery(document).trigger( G.THEMELOAD );
    });
    }
    });
    if (!css) {
    G.raise('No theme CSS loaded');
    }
    } else { //########### EDIT HERE ###########
    G.theme = theme;
    jQuery(document).trigger( G.THEMELOAD );
    }
    return theme;

Inline code to start Galleria (change to your needs)

  1. <script type="text/javascript" src="fileadmin/templates/js/galleria/jquery.js"></script>
  2. <script type="text/javascript" src="fileadmin/templates/js/galleria/galleria.js"></script>
  3. <link rel="stylesheet" type="text/css" href="fileadmin/templates/js/galleria/themes/jnw-lightbox/galleria.jnw-lightbox.css" media="screen" />
  4.  
  5. <script type="text/javascript">
  6. $(document).ready(function() {
  7.  
  8. loadTheme();
  9. startGalleryDelayed();
  10. });
  11.  
  12. function loadTheme() {
  13. Galleria.loadTheme('fileadmin/templates/js/galleria/themes/jnw-lightbox/galleria.jnw-lightbox.js');
  14. }
  15.  
  16. function startGalleryDelayed () {
  17.  
  18. var i = 0;
  19. $(".csc-textpic").each(function () {
  20. $(this).addClass("galleria"+i);
  21. $(".galleria"+i).galleria({
  22. data_config: function(img) {
  23. // img is now the image element
  24. // the function should return an object with the new data
  25.  
  26. image = ($(img).parent().attr('href')+'');
  27. var startToken = "index.php?eID=tx_cms_showpic&file=";
  28. var endToken = "&width=";
  29. imageSrc = unescape(image.substring(image.indexOf(startToken)+startToken.length,image.indexOf(endToken)));
  30.  
  31.  
  32. return {
  33. image: imageSrc,
  34. description: $(img).parent().next().text()
  35. }
  36. }
  37.  
  38. });
  39. i++;
  40. });
  41.  
  42.  
  43. }
  44. </script>

Now to IE6: CSS styles

IE 6 does not know the "position: fixed" style. So I changed all this to "position: absolute" only for IE 6 using the star hack (see galleria.jnw-lightbox.css, at the end).

This works now, but our lightbox shows up on top of the page, even if we scrolled down before and may not be visible. I used an ugly hack for this: As soon as the lightbox opens, I set the scroll position to 0. And when the user closes the light box, I scroll to the position I saved before. These changes can be found in galleria.jnw-lightbox.js at line 94 and line 139/140.

Thats all, and here are all files including the patched theme and Galleria:

galleria-lightbox-ie6.zip

It is still not very beautiful in IE 6 because the transparent PNGs are not working, but this can easily fixed by converting them to GIFs or using the IE 6 PNG fix.

EDIT: Updated CSS and ZIP file. There still was a problem with height in IE 6. The key to get Galleria themes running in IE6 is avoiding "position:fixed" and setting width and height for all elements surrounding the gallery. This includes the elements html and body, set width and height for them to 100%!

To get the Lightbox working on this page I had to set a fixed height for the stage. Depending on the surrounding layout it may work with height:100% as well, as you can see here: http://www.niederwald.de/en/conferences/conference-rooms.html

And excuse the layout bugs in IE 6 on this page, our policy for our website is to maintain functionality and readability for IE 6 users, but we will not spend our time to fix all design glitches. The site linked above is a customer site. As the target audience of that site includes a significant fraction of IE 6 users IE 6 is 99% supported there.

Hope this helps all brave fighters against IE 6!

05.02.2010
20:48

Activating Autocompleter in script.aculo.us when entering a field (on Focus)

Weiterer Text

Autocompletion is a very useful AJAX feature: it allows the user to enter common values in fields very fast. By default, autocomplete activates after you type in the first letter. If you only have a few values in the autocomplete list, this is not very useful. Better would be to show the autocomplete list as soon as the user enters the field (the field is becomes focus).

For example we may have a field named color and would like to propose only a few values to the user. Because autocomplete starts after typing the first letter, the user will never see all suggestions we provide for the field. It would be more useful to provide a list of colors instantly when the user enters the field. By default this does not work with script.aculo.us. The script.aculo.us autocompleter offers the option minChars. But this parameter can not be set to 0, because 0 is evaluated as Boolean false and triggers the default value which is 1.

Example:

new Ajax.Autocompleter('DocumentJournalTitle', 'DocumentJournalTitle_autoComplete',
'/autoComplete/journal_title',
{minChars:0, frequency:0.1});

This does not work as expected: Autocomplete is still triggered after typing the first character.

I developed a short work around:

Set minChars to -1, this evaluates to true and is smaller or equal to 0:

<input name="journal_title" type="text" id="DocumentJournalTitle"
autocomplete="off" value="" />
<script type="text/javascript">
new Ajax.Autocompleter('DocumentJournalTitle', 'DocumentJournalTitle_autoComplete',
'/autoComplete/journal_title',
{minChars:-1, frequency:0.1});
</script>

This still does not work as expected. Why? The autocompleter only listens for keypress events. When the user enteres the field, the autocompleter is not activated. So we need to fire the event manually. This works this way:

<input name="journal_title" type="text"
onFocus="doFireEvent(this,&#039;keydown&#039;);"
id="DocumentJournalTitle" autocomplete="off" value="" />
<script type="text/javascript">
function doFireEvent(elem,event){
// IE
if (document.createEventObject){
var e = document.createEventObject();
return elem.fireEvent('on'+event,e)
}
// firefox and others
else{
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !elem.dispatchEvent(e);
}
}
new Ajax.Autocompleter('DocumentJournalTitle', 'DocumentJournalTitle_autoComplete',
'/Entwicklung/StudyBase/documents/autoComplete/journal_title',
{minChars:-1, frequency:0.1});
</script>

And now the autocomplete box will show as soon as the field gets focused :-)