I've been given a design to build that uses a tabbed navigation structure, which I've built thus far using jQuery UI's tabs plugin.
So far, so good. Alas, I'm trying to style the tabbed element itself such that the currently selected tab (li.ui-tabs-selected) has a white background and the two other tabs have a green background -- but, and here's the sticky part, each has a different shade of green.
Put another way:
I have three list elements, all with class .ui-state-default. The selected one is given the extra class .ui-tabs-selected and is white; the unselected ones are two shades of green, with the lighter shade always further to the left, and no two tabs the same colour (i.e., one each of white, dark green and light green), regardless of which is selected. How do I make the non-selected tabs two different colours when they both have the same classes?
Thanks!
So, what you need is this:
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs ul li').each(function(count) {
$(this)
.removeClass('tab0 tab1 tab2 tab3 tab4')
.addClass('tab' + abs(ui.index - count));
}
});
The class tab0 is for the selected tab, tab1 for the one next to it, and so on.
What this does is every time a tab is selected, remove all classes from the li and add one based on the (ui.index - count). This is 0 if ui.index = count (the selected tab is the one we are currently handling), 1 if the distance is 1, and so on.
Related
I implemented material paginator and the number of items per page and buttons(next and previous) are hided by the global backgroud color. I have attached 2 images and global background color of one of them is deactivated and can see the number of pages and buttons(next and previous).
I need to keep the background color and make visible the number of items per page and next and previous buttons.
I did read few releted articles and made few changes for example,
::ng-deep my-style-class {
background-color: unset;
}
All of them were not worked.
Can you please give me a suggestion to make visible number of pages and next, previous buttons without disabing the global background color.
The reason why it's not working is that this code is expecting a class called mat-paginator and mat-icon-button.
::ng-deep .mat-paginator .mat-icon-button
{
background-color: YourColor;
}
This is the Example UI.
So, the results I want:
Accordion (expand/collapse) blue circled sections, and level 1 (##level1) to be the title and closed all the time when we scroll down or click on, it should expand and get active on whatever line we are.
And when we scroll, it should inactive state as usual, but when we come to the 2nd section, the first stay there and 2nd expands auto and that happens to that too.
Also, I want the content to be shown only for the expanded section when we go at the end, there should be previous and next section title and link. which will lead us to that, but the page should stay the same.
This is on the roadmap for implementation as part of the brand new Material for MkDocs Insiders: https://squidfunk.github.io/mkdocs-material/insiders/#prairie-fire
This problem could not be only for the WordPress cms, but also any other page.
I need assistance using the WordPress storefront theme/woocommerce via styling specific page children.
There are three categories in the navigation tab for someone to hover over where a dropdown list will occur for each tab with different pages/items related to the category being hovered over.
All the pages within each tab/category on the nav bar should have a different background.
Example: If I hover over a nav tab "shoes" a drop down list will show different several shoe brand: Nike, Adidas, Sketchers. All the pages that are on the Shoe tab should have the same background color of red.
Another nav tab might be Hats whereon after hovering a drop-down list of several hat brands show. All the pages in that hat tab should have the same background color of blue because it is of the hat tab.
I do not see any html tags in the DOM with specific classes to put css so all page elements will get the same effect.
Example:
.container .hats {
background: blue;
}
There are no elements where I can apply the styles to. if I just used .container, then all pages will get the same color.
Any help?
EDIT
My bad, I was not specific in my question.. It is not changing the nav background colors ex: but when the user clicks on a specific brand "nike" under the main tab "shoes", the page that that gets loaded into the browser will display products of nike in a red background.
I found another post which helped in changing the specific CSS.
Change CSS when the current URL contains a certain string
Using JavaScript, you are able to search for specific parts of the url.
If the URL contains the term or index you want, you can make changes the elements on the documents.
<script type="text/javascript">
$(document).ready(function () {
if (window.location.href.indexOf("hats") > -1) {
$(".site-content").css("background-color", "red");
} if (window.location.href.indexOf("shoes") > -1) {
$(".site-content").css("background-color", "green");
}});
</script>
The downside I noticed was that the page does not update the specified css immediately but a small delay is seen between the background color change.
Alternatively, you can use plain css targeting the product class in the body for each item. It will be tedious if you had a lot of pages, but the provides no delay in changing the background colors from default to the set value.
In PebbleJS, can you colour menu items individually? As far as I know, you can only colour the entire menu.
An example of what I would like to do would have the first menu item green, the second blue, the third yellow and so on.
A menu is a type of Window that displays a standard Pebble menu on the screen of Pebble.
Just like any window, you can initialize a Menu by passing an object to the constructor or by calling accessors to change the properties.The properties available on a Menu are:
sections Array [] A list of all the sections to display.
backgroundColor Color white The background color of a menu item.
textColor Color black The text color of a menu item.
highlightBackgroundColor Color black The background color of a
selected menu item. highlightTextColor Color white The text color of a selected menu item.
A menu contains one or more sections.The properties available on a section are:
items Array [] A list of all the items to display.
title string ‘’ Title text of the section header.
backgroundColor Color white The background color of the section
header. textColor Color black The text color of the section header.
Each section has a title and contains zero or more items. An item must have a title. Items can also optionally have a subtitle and an icon.
So from the docs it looks like the menu only allows for entire menu coloring, however you can include multiple sections in a menu, and each section can define its own colours, although this may mean you'd have a menu made up of multiple single items each with their own title, effectively doubling the size of the menu simply to get different colours in there. It looks like you can have a section with a title and zero items, so perhaps the section itself could act as the menu item.
You'll have to play around with that.
I'm realy new to css and jquery and I need help for my project.
I have 3 buttons: disadvantage - average - advantage and I need to make this buttons to work like radio buttons so if I click on disadvantage this button change background color and other butons lose colors if was clicked on him. and disadvantage button get red backrground color.
If I click on average button, this button must get yellow color and other lose color if was clicked on him before
-If I click on average button this button must get green background color and other buttons to lose color. so like radio buttons
BUt I try to do that based on #ID's
$('#price_quality_adv').css('background-color','#C90');
$('#reliability_adv').css('background-color','#C90');
http://jsfiddle.net/EC44Z/5/
please help. sorry for my english
THANKS!
Seems to be a scope issue of some kind, not sure if it is exclusive to jsFiddle environment. When I make this change, it is fixed (for the advantage button at least)
setQuality = function(qulaity, type_rating, name)
Fiddle: http://jsfiddle.net/EC44Z/8/
There are still some other issues however, the code is a little complex. It is better to do something like...
HTML
advantage
CSS
.button{ /* styles for all buttons */ }
.selected{ /* styles for selected button */ }
JS (jQuery)
$("#button_advantage").on('click',function(){
$(this).addClass('selected')
$(this).siblings().removeClass('selected')
})
Summary
The code should be separated, so it is easier to maintain, works well in various environments, and gets good search ranking etc...
HTML is for content, and should be marked up as such, with appropriate classes to group similar items, and unique id for relevant elements.
CSS is for style, and all styles should be kept together there where possible.
JS is for dynamic functionality, so in this case, adding a class, so that the style changes.