I've spent numerous hours trying to figure out how to get this slider to use li's with background images rather than img's.
The reason for this is that I intend to use the slider for Wordpress & many Wordpress themes apply their own css properties to images (such as 'max-width') which will often break the slider. I would appreciate if anyone could check out the following scripts and change it to work with li's :) I've been trying myself but for some reason all it would do is load forever never showing any images..
Here is the script:
http://pastebin.com/8J9uwRtZ
In the meantime I will continue to try figure this out myself. I would appreciate if anyone could help me out.
Here is a test site with an example of the slider not working with the theme 'Thematic' which applies a 'max-width' of 100% to images & an example of a theme which doesn't (hence the slider works perfectly). FYI removing the max-width from 'Thematic' & other themes fixes the slider everytime so this is definitely the problem; hence why I wish to use li's instead of img's.
http://www.matthewruddy.com/demo/ <- not working
http://www.matthewruddy.com/demo/?preview=1&template=twentyten&stylesheet=twentyten&TB_iframe=true <- working
Thanks to anyone who can help! Matthew.
As akonsu said, your best bet is applying a specific image style to the lof class. The default style defined by the themes image.css file only gets applied for.. you guessed it.. default images. Properly redefining it in the lof class will overwrite that rule and use the new style. If your browser still doesn't seem to be picking it up, throw a big fat !important to the end of the style rule and everything except IE6 will pick it up just fine.
Max-width is only applied to images with no other specific rules present, hence "cascading" style sheets. CSS rules marked !important take precedence over other rules for the same type. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence. ie:
p { color: blue !important; }
.container h3 { do stuff }
.container p { color: red; }
In every browser except IE6 the font color for all paragraph elements will be blue as long as your doctype is properly set and your not getting tossed into quirks mode. However, doing something like this:
p { color: blue; }
.container p { color: red !important; }
Will show a red font color for all paragraph elements in the container only, for all browsers. This works because even if IE6 doesn't understand the !important rule, it still fully understands cascading rules and will apply the style based on what was last defined.
So in your case, the following rule works just fine and fixes your display problems in IE:
ul.lof-main-wapper li img { max-width: none !important; }
Related
I have a CSS conflict going on with a major plugin in my wordpress site. The plugin maker found it handy to add !important declarations throughout all their styling sheets. From a developer's perspective; this is a disaster. In their defense they want to cover all themes that are using !important declarations, so it looks consistent. I do not agree, so I need a solution.
What happens is that my premium theme, who's not using those declarations, cannot override the styling. I have some solutions to remove certain classes by jQuery.
But there is a problem which cannot be resolved by removing classes. For example, the anchor:hover is default as border: none !important by the plugin. But I would like to see is that the anchor:hover border option is actually applied via the theme settings. The applied CSS is this (be aware that the .plugin class is not applied in the anchor, just from a CSS file):
.plugin a { border: none !important; }
Is there any way I can disable certain class combinations from the DOM? I'm happy to have this done with php or jQuery. Something like: .plugin is not applied to anchor I have no idea how to resolve this.
Surely this is just a case of overwriting the css with a better specified css line.
For example if the code is:
.plugin a::hover { border: none !important; }
You can overwrite this by doing:
body .plugin a::hover { border: 1px solid grey !important; }
Because you have added the element body to your css line it adds extra specificity meaning it overwrites the plugins css. You unfortunately have to use !important, as !important throws regular specificity ruling out the window (bad plugin creator).
More on css specificity here
Do you need any of the styles provided by the plugin? If not then it might be worth looking at dequeueing the plugin styles altogether and just adding your own styles where the theme doesn't cover it.
If you find out the registered name of the stylesheet (should be in the style tag) you can dequeue it with something like:
function remove_push_plugin_styles() {
wp_dequeue_style( 'plugin-stylesheet' );
}
add_action( 'wp_print_styles', 'remove_pushy_plugin_styles', 1000 );
You aren't able to edit an iframe's content, true. But the iframe's itself still belongs to your page, and you can edit the attributes. I just tested and was able to do something similar to:
var i = $('div.item iframe');
// Did the selector work?
console.log(i.length);
i.removeAttr('width');
i.removeAttr('height');
That being said, using !important in this situation is not bad. If you're worried about CSS maintenance, leave a comment that the !important is overriding the element's attributes. !important is often demonized, but in this case it is a valid use to increase the specificity of your CSS.
The advantage of doing it in CSS is that it will apply before your JavaScript is loaded, so you won't get a split second of those attributes and styles applying before the JavaScript removes the styles.
I have a code that i can only edit the CSS and the JS. The problem is that the page loads a default css that cannot be altered but you can run an alternative css and JS to add content to a page and modify the css. So i guess the css that is loaded overrides the default one. But the problem is that you can't just say
a:hover {
background-color: red;
}
You would have to reset background color with none and add underline and stuff.
so how can i tell my css to put my *:hover important over any else and remove the default hover?
The css may be too nested. Adding an !important tag would help. But it's more semantic to follow the train of elements. Right click the element you want to style. When you're looking at the editor, you'll see the specificity on the right side (where the css is) and then you can copy the selector they have. Using this selector should allow you to overwrite any styles necessary.
Far top right of the image. The .container is the overall class used here. In some cases you may see something like. (From Foundation)
.top-bar-section li:not(.form) a:not(.button)
Add following in your CSS and make sure you load it after default CSS.
a:hover {
background-color: NONE !important;
}
Using Javascript
$('body').append('<style>a:hover { background-color: none !important; }</style>');
Here is my site: http://stage.samkeddy.com/
It's responsive using a couple media queries and a mobile menu button powered by javascript.
Here is the javascript for the menu button:
function toggleMenu () {
if (menuIsVisible == false) {
collapsibleMenu.style.height = 'auto';
content.style.paddingTop = '290px';
menuIsVisible = true;
}
else {
collapsibleMenu.style.height = '0';
content.style.paddingTop = '80px';
menuIsVisible = false;
}
}
so you can see that I need to adjust the padding at the top of the content div, in order to offset the menu
But if resize to the mobile size, open the menu, and then resize back to the desktop size, the padding isn't fixed by the media query, because there's still an inline style from the javascript. I tried making the padding on the desktop version !important, but it the padding still doesn't change when resized, even though according to this !important beats inline.
You can test for yourself by opening the size (how it should look), resizing to a mobile width(the nav will disappear, and you will see the menu button), clicking the menu button (leave the menu open), then resize the site back to a desktop width. You will see the padding is still there. If you inspect it, you can see the original padding is crossed out in favor of the inline style.
I know this would be possible by monitoring the width with javascript and setting the padding then, but I really don't want to do that, and don't think I should have to.
EDIT: solved
First, I should have been adding classes, rather than adding CSS with my javascript.
Then I assumed that putting !important outside of a media query would make it only show up on desktop, but it took over all media queries. So placing just this in a query made it work. Note that if I was using 2 separate menus (mobile/desktop), I wouldn't need this, but since it was fixed and the #content needed padding, it had to be done. But using this technique you can also use only a single menu, but doing the height for the menu this way. I've demonstrated the technique in a codepen: http://codepen.io/anon/pen/JFvay
Adding this code to your stylesheet should solve the problem, I just tried this on your website using the Developer Tools and it's working:
#media only screen and (min-width: 643.2px) {
#content {
padding-top: 80px !important;
}
}
Although I'd strongly recommend you to create a separate navigation menu for mobile devices and resort to using #media-queries to display it.
Your problem at heart is that you're mixing CSS and in-line styles. As a general rule, avoid placing specific CSS properties directly on elements, whether in HTML, by using element.style.<property> =, or via jQuery's .css() feature. Instead, you should define the properties you want as CSS rules, using classes:
#collapsible-menu { height: auto; }
#content { padding-top: 290px; }
#someelt.menu-visible #collapsible-menu { height: 0; }
#someelt.menu-visible #content { padding-top: 80px; }
where someelt is some higher-level ancestor element. Then, your JS becomes simply
function toggleMenu() {
document.getElementById('someelt').classList.toggle('menu-visible');
}
If you are targeting browsers which do not support classList (see CanIUse), jQuery provides its own version of class toggling.
CSS is not an imperative language, but if you want, you can think of the #someelt.menu-visible part of the last two rules above as a kind of if statement: "If menus are visible, then shrink collapsible-menu to zero height", etc. In this metaphor of CSS as a kind of programming language (which it is), the presence of the menu-visible class of #someelt could be thought of as a kind of boolean "variable", I suppose. Most likely, you will no longer need a corresponding variable in your JS.
Anyway, the advantage of this is that people looking at your code can see all your CSS-related logic just by looking at the CSS file, instead of having to look at both CSS and JS, and you can change CSS-related things in just one place.
I'm using a basic fade slider for a few testimonials on a site I'm working on, and the text is fading from one to another just fine. However as soon as the 'latest text' loads, the weight increases. I have checked my CSS and removed all weight classes. Any idea what could be causing this? Example of work is here: http://theapsgroup.org/slide.html
In your css you can overwrite these properties so you don't have to change the javascript.
Identify the element that is having the font weight appplied and try this.
theculprit{
font-weight:400 !important;
}
Important will force this rule to override other rules but must be applied to the correct offending element.
Alternatively Try
I suspect the issue is not font-weight but the way Safari renders this font. Try Arial Font see if it persists.
This might help:
html { -webkit-font-smoothing: antialiased; }
Hope someone can help me, I have an index.php setup and in the head I have a sideshow script set and this runs on all pages, and then in the portfolio.html (loads inside the index.php file when that page is called up) I have a gallery script.
My problem is when I click on a gallery image it opens up but behind this "header gallery" ...
image of what the problem is:
#pjumble is right about wanting to change the z-index. The problem you're having is probably related to the CSS Selectors priority.
When defining a CSS format you can write the selector statement in 3 basic ways and mix and match these as you please for advance selector definitions. Here are the 3 basic ways,
1.
Class's Looks something like this.
.class1
{
color:blue;
font-size: 24px;
background-color:red;
}
this is the Lowest priority
2.
ID's Looks something like this.
#id1
{
color:yellow;
font-size: 12px;
}
This is medium priority
3.
Tag's look something like this.
Div
{
color:green;
}
This one gets highest priority. This always seems counter intuitive to me. If I define and ID level format you think that would have priority over the one for that Tag name but it doesn't.
Here's and example of what I'm talking about.
So for an element like this
<Div id="id1" class="class1">
Text
</div>
The "Text" here is going to have a red background because "class1" is the only definition with a background-color.
But both "id1" and "class1" have definitions for font-size so the class definition is ignored and the id one is used making "Text" 12px.
Then all three definitions have "color" defined and the winner is "Div" making "Text" green.
so when you write your set up like this,
#lightbox a z-index of 100, .gallerylayer has a z-index of 1000
you have the right idea but your definition for ".gallerylayer" is a class and if the tag or id of that section of code has z-index defined, your class definition of z-index = 1000; will be ignored.
Just to make sure the definitions not ignored I'd give the tag that has class='gallerylayer' in it and add a id='somethingUnique' attribute and use that to define the z-index rule.
But the best way to check this is to use Firefox with the Firebug add-on and use the element selecting tool to see what styles are being apply and which are begin ignored on your page.
For more on selectors try looking here it should give you all the documentation you'll need.
hope this helps.