category specific css for different browsers

[eVelt]

I'm on it
:)

[eVelt]

it's late for me now, but i got it working (sort of)
i modified the "includes/modules/attributes.php"
at the class attribImg i added the id of the option and id of the value

from

<div class="attribImg">

becomes like this

<div class="attribImg is3-31">

so now we can delete the swatch_wrapper and style each image individually and globally because i use classes not IDs,
so you can give a style to all "attribImg" and you can target one specifically by "is3-31", is stands for image style

no more empty wrappers :)

(still working to delete all un-necessary clearer brakes )

not a big improvement but still a hack
ill upload the new includes/modules/attributes.php tomorrow (god willing)

[niccol]

Just to catch up...

The original code is:

<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<br class="clearBoth" />

So, is the only problem with:

<?php
if ($options_attributes_image[$i] != '') {
?>
<div id="attribute-image-<?php echo $new4 ?>">
<?php echo $options_attributes_image[$i]; ?>
</div>
<?php
}
?>
<br class="clearBoth" />

that there are empty divs appearing? And that there is a <br> that alters the formatting?

If so as Glenn says edit attributes php to get rid of the pesky "\n" and edit attributes.php to get rid of the <br> if you don't need it in your configuration. It there for a reason but there are other ways of creating the formatting.

Glenn's solution is more general, and therefore better. My solution is just a few lines of code and no new files. It's just a matter of choice.

[eVelt]

your are missing the point

the whole problem is the formatting- and styling of the all different options,
your solution is more readable, glens is more better since your way will out put the same id for "my object" and "MyOpject"
or the use of special characters. the only problem is the swatches and comments

so my hack will just add a class to each swath while leaving the attribImag in its place, so styling will be more versatile.

the empty divs is a Small do do, and it will be eliminated since its no longer needed, the clearer is a bigger problem because its necessary if you use image swathes; but is laying in the way if you do not need a swath, and will be inserted again and again and again

the application of a specific class to each option or attrib-swatch is a good start.
just think of a js mouseOver function to swap a image while on that div, the possibilities are endless if you can pin-point each to its own let alone the styling ability that is not possible w/o this hack

[niccol]

<div class="attribImg is3-31">

This provides a unique identifier for that element. No other element can have that identifier.

That's what an ID is. A class is applied to many elements potentially on the same page. A ID is unique. It's a minor point. There is no reason why a class cannot hold a unique element. It's just that that is what an ID is for so its good programming to use an ID for that..

Also, in javascript (not using a library like jQuery or Mootools) it is much easier to access a particular element if it has an ID. (And even with jquery, for instance, if you access an element by class jQuery is smart enough to know that this might not be the only one of that type so it creates an array of possibilities.) The javascript for this is getElementById(). There isn't a getElementByClass. That's why most javascript programmers like to have unique IDs for an element.

getElementById tends to be the base of most image swapping scripts.

[eVelt]

thanks, i did not know that
the reason why i thought of doing it with classes is because its easy to add it inside an a existing class (class="clas1 clas2") and it will validate nicely, ids however can not contain two values in one element (or so i think)
i'll rethink it :)

[gjh42]

<div class="attribImg" id="is3-31"> gets both kinds of useful identifiers in good order, so would be the best solution of all (and only takes a few more characters in the code).

[niccol]

Thanks for that, Glenn. I laughed out loud about the 'few extra characters' . Perhaps I am just the smallest bit anal and pernickety about that I don't think four characters is going to effect the load speed of a zen cart page too much, eh?

@evelt you can have one id and as many classes as you want. What Glenn says is the best arrangement and will let you access the element in javascript with getElementById('ElementID') or in jQuery (which allows you easily to make the transitions nicer) as $('#elementID') but does involve loading jQuery which comes in at about 25k when minimised which is a whole lot more than a couple of characters in a script!

[eVelt]

hi glenn, niccol, thanks for all your help :)
i appreciate your time

i tested the Flexible attributes add on on 1.3.9
works fine (i added it in my template_default)

i modified the /includes/modules/attributes.php at 13 places
i attached a zip containing the modified file :)

here is a link to a test shop using flexible_attributes + the added ids to the images :)
Warning! not tested thoroughly -use only on test sites

http://www.evelt.com/web_design_labo...&products_id=2

i did not edit anything on attributes comments due to lack of time
I'll do it shortly and test it as well

[gjh42]

Looks like it should work. I have a suggestion for easier code maintenance: instead of editing 13 lines throughout the file, add one line at the end to insert the id after the class:

                $options_wrapper_id[] = 'wAttrib-' . $products_options_names->fields['products_options_id'];//gjh42
                //following line in place of 13 line edits above
                $tmp_attributes_image = str_replace ('class="attribImg"','class="attribImg" id="is-'.$products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"',$tmp_attributes_image);//gjh42 20100716
                // attributes images table
                $options_attributes_image[] = trim($tmp_attributes_image);
                $products_options_names->MoveNext();
              }