I have a small tabbed navigation setup using CSS. When hovering over the tabs the colour changes, great. However when i click a tab and it navigates to the corresponding page, i would like that tab (the active tab?) to remain highlighted, indicating the current page.
I am currently doing this by using a class (.currenttab ) and then using this class in each HTML file. I am not using:
active
Is there a way for me to use active, rather than using a class in each individual HTML file, or is what i am doing correct?
Thank you in advance.
What you are doing is correct. The :active pseudo selector means something else - the event of activating a control (ie, the time between a user presses the mouse button and releases it).
Using a class to signify the selected item is the way to go.
It's far from ideal, but if you give every page and every tab an id, you can define the highlighting in css instead of html. I ran across a full explanation while looking up the active attribute:
Highlighting Current Page With CSS
A site I designed with this technique (pages, not tabs)
Here are some more examples brainjar Demo
More from Brainjar
Related
I am making a small CMS with Vue-Router and Firebase. The CMS has a section with the post list. When the user press the button to create new post, open a child component with the editor.
When the user saves the post, the child leaves and returns to the post list. I would like the added row to have a color highlight applied with CSS for a few seconds.
I know how to do the highlight effect with CSS class but I do not know how to apply that CSS class only to that new row with VueJS. Do you give me any suggestions or ideas?
Thanks in advance.
Simply your question: do sth in parent when sth has been handled in child component.
See vm.$emit
I apologize if the title was not clear enough. I am working on a project where a user can design a page (something like Wix). I am continuing on a project left in-complete by some developer. The sequence of action is.
The user clicks on a link which adds an element on the page (e.g. textElement, picture, slider...)
There is an edit button for each element. Clicking which opens a dialog box.
On the dialog box there are sliders and color picker drawn using Kendo-UI. Using them the user can change the style settings for the element (e.g Font-Color, BG-Color, Font Size...)
What I want now is to apply/show the changes live on that element. I have the id available for each element. I can bind each of the style selectors and apply the changes live to the text element. But that does not seem the right choice as in future we might add another style selector in the dialog box, and that would mean adding the code for binding this new selector.
What I wanted to know was that is there an alternate or preferably easy way to do this?
Regards
Share some code with the basic idea that you follow, cause it's not getting clear what you did. It sounds like you can use the MVVM framework feature to help you for that.
when user clicks on Add button, then a pop up button will be opened with certain form elements (like textinput, date field, text area).. When i used 'TAB' inside this form,it is not working. I found in couple of Questions / forums that we need to create an instance of FocusManager and then bring/activate focus for the pop up. But still i didn't see the tab working inside the form. In order to tab order working inside a pop up, what steps we need to follow.
I tried using focusmanager and property like tabfocusenabled, tabenabled and also added taborder inside each form element. But no luck.
Iam using Flash Builder 4.5 and using spark components for development.
Is there any workaround for this problem?
Thanks in Advance,
Regards
Srinivasan
Thanks for all your responses.
Finally the issue has been solved by one of my colleague. Problem is , the form has been loaded inside Horizontal accordion (flexlib HACCORDION). So inorder to draw focus inside the accordion to child elements, we need to add 'hasFocusableChildren="true"' for the HAccordion (horizontal accordion component). Adding this property solves the tab order problem.
I have also pasted the code below:
I need on my form ordinary widgets (e.g. buttons) do not react on mouse clicks but NOT to be disabled (it change look to grayed one -- not good).
I wonder is there some neat small hack for this?
You could stick in an event filter and filter out the mouse events before passing the remaining events on for processing, but I'm not sure that not giving the user a visual clue that certain elements are effectively disabled is such a good idea.
You could try using style sheets to control how the disabled mode of the buttons in your form get styled. Unfortunately I'm not sure exactly how to do that but you could have a look at the style sheet docs to get you started.
In my flex app I have custom tooltips on buttons that hide and show based on user context.
The problem that I dealing with is that when I call my showTips() function I only want to show tooltips on the buttons that visible in the view. So buttons that on a un-selected tab (tabNavigator) should not show the tooltips.
For some reason all tooltips are showing.
Is there a way to detect if a button is not in current view, like on a un-selected tab?
If you gave us some code I could check this out, but would this work?
if(button.parent.visible) { showTip(button);}
Instead of custom coding for each button, make use your tabnavigator's creation policy is set to "auto".
Check this link for more details
http://livedocs.adobe.com/flex/3/html/help.html?content=layoutperformance_05.html