I have 3 fancy box slide shows in ►this page◀
1 in the portraits.
2 in the porthole.
3 coming from the anything slider itself.
The anything slider is in a ul - but I don't want previos and next buttons to show on that one.
Since they all use the same CSS, I can't just hide them. So I would imagine I would have to do it in the javaScript... But I can't find anything in the documentation.
Do any of you have any ideas?
Thank you.
Remove the rel attribute from the links that you don't want to have next/prev buttons
remove or hide previous next functionality from fancybox
.ui-widget-overlay
{
opacity: 0.9 !important;
background: none repeat scroll 0 0 #111111 !important;
}
.fancybox-prev span, .fancybox-next span
{
/* .... */
visibility: hidden !important;
}
.fancybox-next
{
z-index:-999 !important;
}
.fancybox-prev
{
z-index:-999 !important;
}
Related
I am using DataTables and it is working marvelously. As it works now when you click on the column header (anywhere on the header) it sorts. And toggles between ascending and descending. But the request now is to have two distinct buttons one that would sort ascending and the other that would sort descending respectively, instead of having the whole header be the active trigger.
Do I have to append to each header and add my own buttons or is there something built into datatables that i am missing.
If i do have to add my own buttons, i'd love being pointed in the right direction.
Thanks a million!
well if the point here is just change the default icons for sorting you can just overwrite this classes
.sorting_asc {
background: url("my_custom_image_asc") no-repeat scroll right center transparent;
}
.sorting_desc {
background: url("my_custom_image_desc") no-repeat scroll right center transparent;
}
Unfortunately there is no builtin functionality for this in jquery dataTables. But it is very easy to implement. Here are the steps :
1) Remove the default header icons, in 1.10.x use this CSS
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
background: none;
}
2) Remove white-space wordwrap and ugly outlines as well
th {
white-space: nowrap;
outline: none;
}
3) Create a class that style the buttons
.sort-btn {
padding: 0px;
float: right;
font-size: 10px;
}
4) After you have initialised the dataTable, cycle through the <th>'s. For each, unbind the default click event, add .asc and .desc buttons, and inject events for ordering the column ascending or descending for each button :
$('#example th').each(function(index, th) {
$(th).unbind('click');
$(th).append('<button class="sort-btn btn-asc">▲</button>');
$(th).append('<button class="sort-btn btn-desc">▼</button>');
$(th).find('.btn-asc').click(function() {
table.column(index).order('asc').draw();
});
$(th).find('.btn-desc').click(function() {
table.column(index).order('desc').draw();
});
});
5) The result looks like this :
demo -> http://jsfiddle.net/wyLzgjv5/
The Pinterest Widget Builder allows for flexibility in creating a widget to place on your site. I added one on this page, but there appears to be a limit to the width you can set for the widget. For example I set the width to 1170, but it is only displaying at 1111px.
Here is the code:
<a data-pin-do="embedUser" href="http://www.pinterest.com/rouvieremedia/" data-pin-scale-width="180" data-pin-board-width="1170">Follow Pinterest's board Pin pets on Pinterest.</a>
This is a Bootstrap site and I would really like to be able to make this widget responsive as well. I tried applying css styling to the widget just to see if I could impact it using this. Alas, no luck.
div.container > span.PIN_1407891215996_embed_grid.PIN_1407891215996_fancy {
border: 5px solid red;
}
Any suggestions for interacting with this element would be appreciated. Then I can apply some additional styling.
Wrap your widget in a container, e.g. #pinterest-container, and add the following styles:
#pinterest-container > span {
width: 100% !important;
overflow: hidden;
}
#pinterest-container > span > span > span > span {
min-width: 0;
}
The first one overrides width which is otherwise fixed, making it responsive. The second one deals with an issue where the last column is not displayed if the widget is very narrow.
The width of the widget depends on a number of factors:
The width of the enclosing element: you can't exceed that width
A multiple of the data-pin-scale-width + padding: the width of the widget won't pad right. It'll be exactly the size of the multiple of the items inside + small padding left and right, and the padding between the items
And given the above, the data-pin-scale-width obviously
So if you want an exact width of 1200, try the data-pin-scale-width="195". That should do it, assuming the enclosing element is larger.
Here's a solution I came up with: http://pastebin.com/kXVDWUu8
I suggest including the following style:
#pin-container > span {
box-shadow: none !important;
width: 100%;
overflow: hidden;
}
To make the Pinterest widget responsive, this is the solution that worked for me. Taken from here.
CSS
#pinterest-container {
display: flex;
}
#pinterest-container a {
flex: 1;
}
I've been having difficulty changing the active colour of an icon in my tabpanel item in Sencha Touch 2.2. I've tried lots of variations of CSS and SASS but have not managed to change it. The CSS I have tried:
.x-tabbar.x-docked-bottom .x-tab-active {
color: #000000;
background-color: #000000;
}
.x-tab-active {
background-color: #000000;
color: #000000;
}
I've also tried setting the active colour in SASS, but this doesn't seem to work either. The only bit of CSS that seems to have that blue in it is this bit:
.x-tabbar-light .x-tab-active .x-button-icon::before {
color: #1da2ff;
}
...but when I try setting that to black, nothing happens! Anyone have any ideas how I can change it??
EDIT: I tried the first suggestion changing the CSS to this:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #000000;
}
...but this is what I see:
Applying color: #1da2ff; to the :before pseudo-element is the right thing.
The reason why it doesn't work for you is that the rule get overridden by another one with a more specific selector:
.x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon:before {
color: #50b7ff;
}
This is the exact situation where using !important is appropriate and not shameful:
.x-button-icon:before {
color: #1da2ff !important;
}
You have the right idea by selecting the icon, which is a span, and not the wrap, which is a div.
The div wrap .x-tab-active has a background color that decides the background of the active box. The icon has an image mask so background color or background-image gradient will determine the color of the icon. There is an additional span that wraps the text, like "x-button-label, for which a color style will change its color.
For changing the color of the icon try:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #1da2ff;
}
Thanks a lot, it was enough to add this in my CSS:
.x-tabbar-light.x-docked-bottom .x-tab-active .x-button-icon:before {
color : #000;
}
There was no need to add !important for me as I was using the new base theme for ST 2.2, but your solution worked great!
:-)
I have a little menu that should expand to reveal the HTML below, which is hidden at present.
Following jQuery:
$('.mobileMenu').click(function(e) {
$(this).toggleClass('arrowDown').next().slideToggle('slow');
});
This piece of code works great on this page (click the "hide" feature on the left col)
However I need to utilise the same feature with my menu for "mobile width".
If you resize your browser down to 320 or so and go here you'll see the menu is just +menu (bit smashy at the mo but working). Click it, and the menu does expand to show the links, but they are hanging over the main content area.
All divs in the navigation div are display:block but they still don't push the main div down. I want the entire green navigation div to expand with it's content.
You have a fixed height on the navigation div of 60px and menuWrapper at 30px. You need to make this relative.
change your css from
#rightCol {
width: 72.5%;
float:right;
}
#leftCol
{
width: 25%;
float:left;
}
to
#rightCol {
width: 72.5%;
display:inline-block;
}
#leftCol
{
width: 25%;
display:inline-block;
}
it should work. I have tested this on chrome
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!