:target pseudoclass follow-up - css

I have a follow up for the question answered on this link:
ckecked element number in :nth-child css rule
The answer is just what I'm looking for but I can't figure out how to set the first Tab as default when the page loads? In the above link it is said that: "you may call the page with the hash #section1". Can anyone perhaps show me how to do this in code? I have been trying for a long time but can't seem to make this work.
Thanks a lot in advance!

In pure-CSS solution involving :target, you anyway need JS to go to URL with corresponding hash (e.g. location.hash = 'content1').
It's generally more flexible to show all tabs by default (incl. when JS is disabled), and hide/show/switch tabs with JS.

The people that suggested "you may call the page with the hash #section1" refer to the URL: if your page is http://www.yoursite.com/yourpage simply navigate to http://www.yoursite.com/yourpage#content1 (content1 because is the id of the first section in the example you provided).
Personally I don't like this solution because it's not flexible and maintainable but nevertheless it works for your simple example.
I'd go for a js based solution: at the begin I'd show only the first section and on click I'd hide all and show only desired one.
Check this (HTML + CSS + JS with jQuery).
HTML:
The same you provided.
CSS:
section { display: none }
section:first-of-type { display: block; }
JS:
$('a').click(function(){
$('section').hide();
$($(this).attr('href')).show();
});
Of course you don't need jQuery to do this but it was faster to write for me :)
Let me know if this was useful.

Related

Switch background colors between active/inactive tabs

I'm migrating my site from Bootstrap to Tailwind 3 and, in the process, built-in solutions (Dropdown, Tabs, Accordion...) needed to be replaced with alternatives. The section I'm working on right now is a custom Comments Editor I created.
I'll leave a link to what Tailwind's Playground generated for me in a CodePen because the code is longer than the maximum number of allowed characters here. The decision to create a Pen is only because in the Playground it doesn't work as the anchors open in new windows/tabs.
Anyway, the code that really matters, what makes the tabs work, is this one:
[data-target] {
scroll-margin-top: 10rem;
}
[data-target]:last-of-type + [role="tabpanel"], :target + [role="tabpanel"]{
display: flex;
}
[role="tabpanel"], :target ~ [data-target]:last-of-type + [role="tabpanel"]{
display: none;
}
As the title says, I'm looking for a way to change the background-color of the tabs, hinting to the User which one is currently active.
To accomplish that, I would need to switch Tailwind's bg-color-0 with bg-color-100 and take border-b-color-0 out of the once active tab and give it to the new one. But I don't know if I can do that only with CSS.
Not add/remove the classes per se, only their corresponding styles
I've seen a lot of implementations of Pure CSS Tabs, and all of them used hidden <input> fields. Though this implementation doesn't use them, I've added and named them accordingly, but I could only target them with CSS if the User clicked exactly where they're positioned (top-left of the tabs) instead of any part of them.
I'm aware I'll eventually have to add JS to switch the ARIA attributes, but is the basic functionality possible to be accomplished with CSS only? If not, is there an alternative implementation with which I could?
Thank you for your time :)

How to apply the font style to filtered column header?

I have kendo grid in application,and its have filterable true option.my requirment is when we apply the filtering to columns,column header font style will be changed to italic..How to do it?If any one have idea about this please tell me..
I personally have not used kendo grid, but I quickly tried the demo here,
and found that it adds "k-state-active" class to the <a> element inside the <th> element.
However, the header text is not inside the <a> element. What you need is a parent selector which current CSS does not support.
So as far as i know, this is NOT possible in pure CSS
You need some javascript. Here is a possible solution using jQuery:
// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
setTimeout(function() {
// first make all headers normal, then make the filtered column header italic
$('th.k-header.k-filterable').css('font-style', 'normal').filter(
':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
}, 100);
})
setTimeout is used because "k-state-active" class is added only after the data is filtered. Again, I'm not familiar with kendo grid, so I do not know if there is a way to provide a callback method to the filter. You may want to investigate on that because that 100 ms delay may not be long enough if you have a huge dataset.
My apologies for jQuery specific solution. Ah... I can't do anything without jQuery. Shame.
But hopefully this was helpful to you! Let me know if you need any further help.
This is possible with one CSS line:
.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}
No need to use java script.

My JS Accordion is acting goofy - it jumps all over the place

I am trying to implement a js accordion I found and I'm having problems with it. The titles are supposed to cleanly slide up to the top of the page and drop the content below. That is not what is happening. There is some obvious jumpiness going on when you look at it. It's not smooth at all. I don't know much about js so please explain your answers carefully. Thanks so much!
http://imip.rvadv.com/accordion.html
EDIT:
After replacing the js with the default file from the site I got it from, nothing changed. Here is a jsfiddle for it
http://jsfiddle.net/imakeitpretty/ruwjn/
Check this: http://jsfiddle.net/luissanchezm86/ruwjn/4/
The problem wasn't the .js, and you don't have to write it all on jsfiddle, since it's JQuery UI, you can simple check it to include it, if it's another external .js, use it as a resource, check fiddle's documentation for that.
Besides that, the other problem was your CSS markup, you had a lot of duplicated classes in that fiddle, it was a bit of a mess.
The main problem with the jumping was the:
.st-accordion ul li.st-open > a{
margin-top: 70px;
}
I just commented that margin-top: 70px;, and it fixed 75% of the problem, I recommend you to use the css that I arrange on the jsfiddle.
Hope it helps you!
UPDATE
Now, if you want to scroll all the way up like http://jsfiddle.net/luissanchezm86/ruwjn/5/ you need to make the body higher on height:
body {
height: 2000px;
}
After looking at your code, you appear to be using this plugin:
http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/
If you go to that page, it has the javascript options you need to control the animation speeds, as well as a working example which is more smooth than yours.

Highlighting the "current" textbox on a web form

I have a data entry web app where the control that has focus is given a yellow background color (and when the user navigates away, it turns back to white). The script to do this came from I-don't-know-where, and it breaks in IE7 causing all sorts of problems, like drop downs not working (the script was designed to work on textboxes and drop downs, or at least it was implemented with that in mind), and it works in ie6.
Some of my users have been switched to Ie7 without my being informed, and the rest will go to ie7 at some future time. So, I'd like to implement a friendlier solution. I really like jquery and am already using it on the app for a variety of things. Also, it has been suggested that cross browser support may/will eventually be important on the intranet.
What I would prefer to avoid is manually adding a bunch of onblur="SomeMethod()" (or something similar) to the controls (There must be 600+ in the app). In fact, if I tell my boss this he's probably going to throw something at me.
I am already using JQuery in the application. Where it is used function calls are explicit, and are all called in onblur.
Currently, I am of the mind to do something like this:
$(document).ready (function(
$(':text').focus(function()
{
//Do Highlighting
}
$(':text').blur(function()
{
//Good bye highlighting
}
)
Am I on he right track? Is onblur my best option? Is there a better way?
the other onblur functions show/hide child fields based on the value of the parent. I realize I am not providing code, but am I setting myself up for any conflicts?
Use jQuery's blur() and focus() methods.
Also, I think you mean to REMOVE highlighting with your blur function (blur means the user has clicked off of the element in question). Use focus() to turn on the highlighting.
$(document).ready (function() {
$(':text').focus(function() {
$(this).addClass('highlight');
});
$(':text').blur(function() {
$(this).removeClass('highlight');
});
});
There seems to be a workaround that makes the :focus pseudo-class work in IE6/7. I haven't used it myself but I think it's quite a established solution:
http://www.xs4all.nl/~peterned/csshover.html
With 600+ elements, a scriptless workaround is probably preferable, especially if older clients are involved.
$('textarea, input:text').focus(function() {
$(this).addClass('hilite');
}).blur(function() {
$(this).removeClass('hilite')
});
.hilite {
border: 2px solid gray;
}
blur/focus will work for you. If you're able, at some point, to move all your users all the way to IE8 you can also accomplish the desired effect with CSS:
input[type=text]:focus {
background-color: lightyellow;
}
This doesn't answer your question, but is an alternative... jQuery Tools Expose will apply an overlay to all elements outside your input box thus forcing the user to focus on the input. It's a nice feature and the plugin is very lightweight. I also posted some coding that does the same thing in this answer in case you don't want to use a plugin.
There is a free widget library for this task: Focus highlight widget.

Tool for generating CSS skeleton?

My HTML is all marked up, ready to make it rain CSS. The problem is that I have to go back and find out what all my id and class names are so I can get started. What I need is a tool that parses my HTML and spits out a stylesheet with all the possible elements ready to be styled (maybe even with some defaults). Does such a tool exist?
I have a poor man's version of this I have used in the past... this requires jquery and firebug...
<script type="text/javascript">
$(document).ready(function() {
$('*[#id]').each(function() {
console.log('#' + this.id + ' {}');
});
$('*[#class]').each(function() {
$.each($(this).attr('class').split(" "), function() {
console.log('.' + this + ' {}');
});
});
});
</script>
it gives you something like this:
#spinner {}
#log {}
#area {}
.cards {}
.dialog {}
.controller {}
if you want them in "natural" page order instead...
<script type="text/javascript">
$(document).ready(function() {
$('*').each(function() {
if($(this).is('[#id]')) {
console.log('#' + this.id + ' {}');
}
if($(this).is('[#class]')) {
$.each($(this).attr('class').split(" "), function() {
console.log('.' + this + ' {}');
});
}
});
});
</script>
I just load the page with that script in there, then cut and paste the results out of firebug... then obviously, remove the script :)
you'll need to remove the dups manually or just toss in some simple dup checking logic with a map or array or something.. one for IDs and one for classes.
When I first saw this, I thought "Great question! Neat answer, danb!"
After a little thought, I'm not so sure this is a good idea. It's a little like generating event handlers for all controls in an ASP.NET page, or generating CRUD procedures for all tables in a database. I think it's better to create them as needed for two reasons:
Less clutter from empty style declarations
Less temptation to misuse (or underuse) CSS by writing everything at the class level rather than using descendant selectors like (#navigation ul li a).
http://lab.xms.pl/css-generator/ seems to fit the description.
I agree with Jon, but I don't see a problem* with doing what the OP wants. Using the script provided, you'd know all of your classes and ids. While working on your CSS, you should be deciding if you need to use each of them. At the end, or at the point that you feel like you have a good handle on what you're doing, run it through an optimizer / compressor so it removes unused ids and classes.
*Operating assumption: You either didn't write the original HTML or you wrote it and later decided that "gosh CSS would be really nice here now, I wish I would have started with it." :-)
Not that it isn't a sensible question with a sensible answer, but it implied to me the kind of unnecessarily marked-up HTML that people create when they don't understand positional selectors: the kind of code where everything has a class and an id.
<div id="nav">
<ul id="nav_list">
<li class="nav_list_item">
<a class="navlist_item_link" href="foo">foo</a>
</li>
<li class="nav_list_item">
<a class="navlist_item_link" href="bar">bar</a>
</li>
<li class="nav_list_item">
<a class="navlist_item_link" href="baz">baz</a>
</li>
</ul>
</div>
you can remove everything except the id on the div and still be able to style everything there by its position; and obviously, the script won't show you all those possible selectors, will it?
In other words, a narrow focus on CSS as something done to classes and ids is a concern.
This blog entry references to something similar to what you need here.
It contains a link to a Perl script called 'stylizator.pl'. This script parses the html to look for possible CSS elements and outputs them to a file.
Another way to approach this is to standardise the id and class names you use in your HTML according to some sort of naming convention.
I disagree with Jon. While this solution can be used poorly in the way he describes, it does not necessarily mean it will. Any wise developer or designer is going to take the script generated css classes and pull only what is really needed into the css file.
The solution still solves the OP's question.
I've made a generator which makes the html and css for you = https://www.andy-howard.com/css-skeleton-screen-generator/
Not much else to say really, it utilises the :empty selector in css.

Resources