Jump to content

Components without js


Recommended Posts

  • Moderators

I came across the following site http://youmightnotneedjs.com/

which features some great components built with only css and html, and no js in sight.

 

Because these components are stand-alone, not part of some massive monolithic library (and no confusing javascript either), it's easy to use them in visual projects.

 

One way of doing this is to just put a w3panel on a form and put the html-code in the innerhtml attribute of the panel

then add the css code to the 'custom CSS' file (or alternatively add all css code in code using the 'browserapi.Document.styleSheets[0].insertRule' syntax)

 

The first component on the 'you might not need js' website is a slider which looks like this when used in a SMS project

component code here

Link to post
Share on other sites

Hi Nico,

 

What does this do in your TSlider's InitializeObject method?

Panel1.CSSClasses.Clear;
Panel1.CSSClasses.Add('slide');

I have heard of assigning styles through the StyleClass property, but never seen it done that way.

 

 

 

 

I came across the following site http://youmightnotneedjs.com/

which features some great components built with only css and html, and no js in sight.

 

Because these components are stand-alone, not part of some massive monolithic library (and no confusing javascript either), it's easy to use them in visual projects.

 

One way of doing this is to just put a w3panel on a form and put the html-code in the innerhtml attribute of the panel

then add the css code to the 'custom CSS' file (or alternatively add all css code in code using the 'browserapi.Document.styleSheets[0].insertRule' syntax)

 

The first component on the 'you might not need js' website is a slider which looks like this when used in a SMS project

component code here

Link to post
Share on other sites
  • Moderators

the CSSClasses.Add procedure ends up being processed by 'w3_AddClass(THandle; String);' in the SmartCL.System unit

 

setting the styleclass attrib ends up being processed by 'w3_setAttrib(THandle; String;)' in the same unit

 

in this case the effects are the same but not sure at the moment where in the rtl the code is which manages that

Link to post
Share on other sites
  • Moderators

The difference is that setting the styleClass attribute sets the link to a single css class, while the cssClasses.Add mechanism allows for a cascade of styles, ie 

 

  cssClasses.add(class1 class2 class3)

or

  cssClasses.Add(class1);

  cssClasses.Add(class2);

  etc

 

when more than 1 css class is assigned, the browser merges these classes (cascades) 

Link to post
Share on other sites

interesting......merges?   So a control can have two styles applied at the same time?   Wonder what the precedence is? i.e. what overrides what when the two are applied.

 

i.e.

.class1{
background-color: blue;
}


.class2{
background-color: red;
}

does the color then become red?

background-color: red;

Link to post
Share on other sites
  • Moderators

see f.i. here  :

 

Example:

<div class="baz bar foo">

 

.foo {
color: blue;
border: 1px solid green;
}

.bar {
color: black;
border-color: orange;
}

.baz {
color: red;
margin: 10em;
}

 

All three classes are applied to the element. First, .foo, then .bar, then .baz. The element will have the following properties, which are the result of merging the above rules:

color: red; # from .baz
border-color: orange; # from .bar
border-style: solid; # from .foo
border-width: 1px; # from .foo
margin: 10em; # from .baz

 

(Note that rule precedence is actually a little more complex than that and depends on the specificity of the selector, but the above goes for equally specific selectors.)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...