Opacity option in the CSS is showing errors when validated

☆ A M B ☆
1,231 Posts

AugmentBLU Reply #1, 18 years, 4 months ago

I have another 2 questions...

The opacity option in the CSS is showing errors when validated.

124 Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0
124 Parse Error opacity=0)
124 Property -moz-opacity doesn't exist : 0

How could I sort that out to be valid? Also the loading and close images are under the search box as I have used a fieldset to make the search valid.

<?php
/*
templates.inc.php - for AjaxSearch 1.7.1
Created by: KyleJ ([email protected])
Created on: 01/22/07
Description: Templates used to display AjaxSearch form/results
*/
$asTemplates = array(
  //Template for output of all search elements
  'layout' => '
  [+as.form+]
  [+as.intro+]
  [+as.results+]',
  //Form Template
  'form' => '
   <form [+as.formId+]action="[+as.formAction+]" method="post">
[color=red]<fieldset style="border:0px">  [/color] 
   <label for="ajaxSearch_input">
        <input id="ajaxSearch_input" type="text" name="search" value="[+as.inputValue+]"[+as.inputOptions+] />
      </label>
      <label for="ajaxSearch_submit">
        <input id="ajaxSearch_submit" type="submit" name="sub" value="[+as.submitText+]" />
      </label>[color=red]</fieldset>[/color]
    </form>',
  //Template for each search result
  'result' => '
    <div class="[+as.resultClass+]">
      <a class="[+as.resultLinkClass+]" href="[+as.resultLink+]" title="[+as.longtitle+]">[+as.pagetitle+]</a>
      [+as.description+]
      [+as.extract+]
    </div>',
  //Template for results container when ajax search is not enabled or for more results page
  'no_ajax_outer' => '
    [+as.resultInfo+]
    [+as.paging+]
    <div id="ajaxSearch_resultListContainer">
      [+as.results+]
    </div>
    [+as.paging+]',
  //Template for wrapper around result description, placed in template 'result' placeholder '[+as.description+]'
  'descriptionWrapper' => '
    <span class="[+as.descriptionClass+]">[+as.description+]</span>',
  //Template for wrapper around extract, placed in template 'result' placeholder '[+as.extract+]'
  'extractWrapper' => '
    <div class="[+as.extractClass+]"><p>[+as.extract+]</p></div>',
  //Template for more results link with ajax search
  'ajax_more_results' => '
    <div class="[+as.moreClass+]">
      <a href="[+as.moreLink+]" title="[+as.moreTitle+]">[+as.moreText+]</a>
    </div>',
  //Template for no results message
  'noResults' => '
    <div class="[+as.noResultClass+]">
      [+as.noResultText+]
    </div>',
  //Template for wrapper around paging links
  'pagingLinksOuter' => '
    <span class="ajaxSearch_paging">
      [+as.pagingText+]
      [+as.pagingLinks+]
    </span>',
  //Template for each paging link
  'pagingLinks' => '
    <a href="[+as.pagingLink+]">[+as.pagingText+]</a>[+as.pagingSeperator+]',
  //Template for current page paging link
  'pagingLinksCurrent' => '
    [+as.pagingText+][+as.pagingSeperator+]',
  //Template for result info, i.e. 15 results found for 'MODx'
  'resultsInfo' => '
    <p class="ajaxSearch_resultsInfo">[+as.resultInfoText+]</p>',
  //Template for intro message
  'introMessage' => '
    <p class="ajaxSearch_intro" id="ajaxSearch_intro">[+as.introMessage+]</p>',
);

?>

which makes the close and loading images appear under the search box and validates.

How ever if i do...

<?php
/*
templates.inc.php - for AjaxSearch 1.7.1
Created by: KyleJ ([email protected])
Created on: 01/22/07
Description: Templates used to display AjaxSearch form/results
*/
$asTemplates = array(
  //Template for output of all search elements
  'layout' => '
  [+as.form+]
  [+as.intro+]
  [+as.results+]',
  //Form Template
  'form' => '
[color=red] <fieldset style="border:0px">  [/color] 
  <form [+as.formId+]action="[+as.formAction+]" method="post">

   <label for="ajaxSearch_input">
        <input id="ajaxSearch_input" type="text" name="search" value="[+as.inputValue+]"[+as.inputOptions+] />
      </label>
      <label for="ajaxSearch_submit">
        <input id="ajaxSearch_submit" type="submit" name="sub" value="[+as.submitText+]" />
      </label>
    </form>[color=red]</fieldset>[/color]',
  //Template for each search result
  'result' => '
    <div class="[+as.resultClass+]">
      <a class="[+as.resultLinkClass+]" href="[+as.resultLink+]" title="[+as.longtitle+]">[+as.pagetitle+]</a>
      [+as.description+]
      [+as.extract+]
    </div>',
  //Template for results container when ajax search is not enabled or for more results page
  'no_ajax_outer' => '
    [+as.resultInfo+]
    [+as.paging+]
    <div id="ajaxSearch_resultListContainer">
      [+as.results+]
    </div>
    [+as.paging+]',
  //Template for wrapper around result description, placed in template 'result' placeholder '[+as.description+]'
  'descriptionWrapper' => '
    <span class="[+as.descriptionClass+]">[+as.description+]</span>',
  //Template for wrapper around extract, placed in template 'result' placeholder '[+as.extract+]'
  'extractWrapper' => '
    <div class="[+as.extractClass+]"><p>[+as.extract+]</p></div>',
  //Template for more results link with ajax search
  'ajax_more_results' => '
    <div class="[+as.moreClass+]">
      <a href="[+as.moreLink+]" title="[+as.moreTitle+]">[+as.moreText+]</a>
    </div>',
  //Template for no results message
  'noResults' => '
    <div class="[+as.noResultClass+]">
      [+as.noResultText+]
    </div>',
  //Template for wrapper around paging links
  'pagingLinksOuter' => '
    <span class="ajaxSearch_paging">
      [+as.pagingText+]
      [+as.pagingLinks+]
    </span>',
  //Template for each paging link
  'pagingLinks' => '
    <a href="[+as.pagingLink+]">[+as.pagingText+]</a>[+as.pagingSeperator+]',
  //Template for current page paging link
  'pagingLinksCurrent' => '
    [+as.pagingText+][+as.pagingSeperator+]',
  //Template for result info, i.e. 15 results found for 'MODx'
  'resultsInfo' => '
    <p class="ajaxSearch_resultsInfo">[+as.resultInfoText+]</p>',
  //Template for intro message
  'introMessage' => '
    <p class="ajaxSearch_intro" id="ajaxSearch_intro">[+as.introMessage+]</p>',
);

?>

The images appear beside the search box but does not validate. Any ideas? Thanks

Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
AugmentBLU - MODX Partner

BLUcart - MODX Revolution E-Commerce & Shopping Cart

1,717 Posts

coroico Reply #2, 18 years, 4 months ago

Regarding Opacity look at http://www.w3schools.com/Css/css_image_transparency.asp or for a full information at http://www.mandarindesign.com/opacity.html
As opacity isn’t still a standard, I haven’t any solution. I prefer deliver an AS version which run with many browsers than provide validated css pages.

623 Posts

cbaone Reply #3, 18 years ago

Is there any way to solve this on a case by case basis? Can we stop the JS from injecting that style="" into the div so the CSS will validate? I don’t want to change the core, but it would be nice to disable that style injection of the <div id="ajaxSearch_output">. Any thoughts?

The MODx has you...
Utah Web Design

1,717 Posts

coroico Reply #4, 18 years ago

This issue is registered as ADDON-18 : this code (filter:alpha (opacity=0);-moz-opacity:0.) is not valid CSS.

To solve it and get a validated page for CSS 2.1 do as follow:

1/ Edit the file classes/ajaxSearch.inc.php
replace line 33:

define('OUTPUT_ID','<div id="ajaxSearch_output" style="opacity:0;filter:alpha(opacity=0);-moz-opacity:0.;" ></div>'); // output id

by

define('OUTPUT_ID','<div id="ajaxSearch_output" ></div>'); // output id

2/ Edit the file js/ajaxSearch.js
move the line 78:

var s = $('ajaxSearch_output');

just before the line 47.

Then add the line

s.setStyle('opacity', '0');

just after the line 47

After modification your code should be:

  var s = $('ajaxSearch_output');
  s.setStyle('opacity', '0');

I have done these updates on the incoming version 1.8.1, you could check that now the pages of version 1.8.1 are valided by the W3C CSS validator. Then now you get:

W3C CSS Validator results for http://www.modx.wangba.fr/index.php?id=196 (CSS level 2.1)
Congratulations! No Error Found.

Tested with Firefox 2.0, IE6, Safari 3.1, Opera 9.26 under XP.

Thanks to Akots who has suggested to use JavaScript rather HTML to initialise the style and avoid an error with the CSS validator.
Find enclosed the two files patched with these corrections.

☆ A M B ☆
1,231 Posts

AugmentBLU Reply #5, 18 years ago

Nice stuff! Only problem I have now is the ajax search is conflicting with a javascript I use to create rounded corners for my main Divs so I disabled the ajaxSearch. I do like the ajax effect a lot though.

Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
AugmentBLU - MODX Partner

BLUcart - MODX Revolution E-Commerce & Shopping Cart

1,717 Posts

coroico Reply #6, 18 years ago

Under Firefox and Firebug (extension) what is the js message regarding the conflict with your other js ?

☆ A M B ☆
1,231 Posts

AugmentBLU Reply #7, 18 years ago

Firebug doesn’t give off any issues... it just ends up reloading the page I am on with no search results.

I’ll leave it up on my site and you can see if you manage to work out the issue? It’s no big deal if you can’t but I do like the ajax look.

www.rossco-designs.com

I’m using this call

[!AjaxSearch? &ajaxSearch=`1` &tplLayout=`asTpl` &moreResultsPage=`72` &showMoreResults=`1`!]

If you look at the scrip on my site, that’s what it’s conflicting with. If I take that script out the ajax function works again. If I enable the ajax search mode the corners script still works so I can only assume it’s mootools?

assets/js/rounded_corners_lite.inc.js

Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
AugmentBLU - MODX Partner

BLUcart - MODX Revolution E-Commerce & Shopping Cart