Develop Reference

bootstrap blocking jquery function

i need to use slideDown function from jQuery, which requires the content to be animated to be put under class " .hide ",
for .hide I had this in my custom css :
.hide {
display: none;
}
which conflicted with Bootstrap css as it contains :
.hide {
display: none !important;
}
thus when i linked both these stylesheets, slideDown was'nt working, then i tried diffrent variations of .hide in both files, finally removing .hide from my custom css file completely worked,
so my ques is why does .hide in custom css affect the results when the properties defined in Bootstrap ".hide" and custom css ".hide" are exactly same except having " !important " in addition which (i guess, please correct if i am wrong) implies that custom selector would be given preference?
i am trying to share the working version of my code using codepen, but i dont know why my code still does'nt wrok on codepen : http://codepen.io/anon/pen/RaGJwE

The !important is always very strong. It could just be bypassed if you use a display: block !important; afterwards.
The simpliest way would be to not use the "hide" or "hidden" classes which are targeted by bootstrap. Just change the class to "hideit" or something else like in this updated fiddle:
http://codepen.io/anon/pen/MyjXOv

CSS Hover being de-activated

I am displaying a page of thumbnails, which if you hover over them, their description is displayed.
for this I am using a span element with CSS
.thumb:hover .thumbText {
display: inline-block ;
}
This works fine initially.
But as this needs to work on a touch device and touch does not have hover, I added a button to show all descriptions.
This also works fine, but once I have used the Button Toggle, Description my javascript function has somehow disabled the CSS hover and I can not work out why.
var CaptionsOff = true;
function toggleCaptions() {
if (CaptionsOff) {
/* Turn Captions ON */
$('.thumbText').css("display", "inline-block")
$("#btnCaption").html("Hide Thumb Captions");
CaptionsOff = false;
} else {
/* Turn Captions OFF */
$('.thumbText').css("display", "none")
$("#btnCaption").html("Show Thumb Captions");
CaptionsOff = true;
}
The site is
http://mclportal.net/wcit/June26.html

That Javascript code adds the CSS to a style attribute on the element. For example:
<span style="display:none">Caption</span>
Style attributes take priority over CSS files. To change this, modify your CSS script like this:
.thumb:hover .thumbText {
display: inline-block !important;
}
This code means that the display from the CSS is used, rather than from the attribute.
Also, you are missing semicolons.
Hope this helps.
Alternatives:
Toggle a class
$(".buttonCaption").toogleClass("showCap")
.thumb:hover .thumbText, .showCap {
display: inline-block;
}
Set the display to nothing, rather than none. Assumes that the captions are have display:none as default in CSS. Other two solutions are probably better than this.
$('.thumbText').css("display", "");

Add !important to your class rule. The .css() method adds the style to element's "style" attribute which has higher priority.
.thumb:hover .thumbText {
display: inline-block!important ;
}

Setting inline style to $('.thumbText') in toggleCaptions() overrides the stylesheet. Toggle a class instead of setting inline styles.

add this in else with your code::$('.thumbText').removeAttr("style");

CSS Tab Control - How do I show only the first div?

Okay...I know there are already loads of Pure CSS Tab Controls out there...
Here is my HTML
<div class="tabs">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div id="tabPage1">
<p>
Hello World
</p>
</div>
<div id="tabPage2">
<p>
Goodbye World
</p>
</div>
<div id="tabPage3">
<p>
Another World, somewhere far, far away!
</p>
</div>
</div>
Here is my CSS
.tabs > div {
display: none;
}
.tabs > div:target {
display: block;
}
There's no styling for this example as I'm only concerned with the behavior.
You can try it here...http://jsfiddle.net/rcrdC/
How do I get it to display the first div until an anchor is clicked?
How do I get it to leave the displayed div...displayed, even when I change the anchor to something else (i.e. #tabPage4)...if that makes sense?

from here , you can make the last one be display at the beginning with like this (working example)
.tabs > div:target ~ div:last-child,
.tabs > div{
display: none;
}
.tabs div:last-of-type,
.tabs > div:target {
display: block;
}
Just move the first tabpage to be the last.

This is an interesting challenge. Unfortunately, I don't believe the intended result can be achieved (purely) with CSS.
We can show the first div easily enough using:
div:first-of-type { display: block; }
But I don't know of a way to select our previously :targeted divs without using JavaScript.
Here I've set up some jQuery to apply class .active on any div with an id that equals that of a clicked anchor href. From there we can override display: none; on divs of that class with some simple CSS:
$('li a').each(function () {
$(this).click(function () {
var active = $(this).attr('href');
$(active).addClass('active');
});
});
And here's the related CSS:
div:first-of-type, div:target { display: block; }
div { display: none; }
.active { display: block; }
And a working example: http://jsfiddle.net/fjKUw/1/

showing the first tab on load should not be that hard. You can use the :first-of-type pseudo class. Something like this:
.tabs > div{
display: none;
}
.tabs > div:first-of-type,
.tabs > div:target {
display: block;
}
The second question is a bit harder. The first tab will be shown again as soon as your target moves to an anchor outside the tabs. http://jsfiddle.net/rcrdC/4/ You need some way to preserve state. The 'real life' solution would be to add a few lines of javascript to achieve this, as suggested already by #StuartKershaw.
If you insist on going fully css, you could use a (hidden) radio button to preserve the state. It is a bit hacky (inputs are not meant for that) and you would have to change your markup a bit, but it should be feasible.
An example of what I mean can be found here: http://jsfiddle.net/rcrdC/5/
Note that I placed some hidden radio buttons between the tabs. I replaced the links to the tabs by labels that reference those radio's. Then I use a combination of the :checked and the + selector to make things work. And the tab that is visible on load is the one with checked attribute.
Again, this is not the way I would recommend. You are adding to your markup, with the sole purpose of achieving a certain layout, which should be the task of your css. Also the stuff you need to add is far from semantically correct...

conflict between the same class or id of multiple css files

Is there any way to stop the conflict between same class or id of multiple css files. As I am explaining below for better understanding:
There is a master web page which has several <div> but there is a <div class"dynamic"> which always reload the contents including css files. Let's suppose if any class of master page has the same name to reloaded elements' class while properties are different. Then how should I handle this to stop the conflict.
master.html
<html>
<head> //attached master.css file here </head>
<body>
<div class="myClass"> </div>
<div class="dynamic"> /* often reload elements by ajax */ </div>
</body>
</html>
master.css
.myClass { height: 100px; width: 150px; background : red;}
.dynamic { height: 200p; width: 200px; }
now i am showing the reloaded html elements & css files into dynamic div of master page
reloaded tag line by ajax : <div class"myClass"> </div>
reload.css
.myClass{height: 30px; width: 25px; background: yellow; }
Now as you can see there are two classes with same name but different properties. Then how should I stop the confliction?
#Edit Thanks everyone for your support & time but my problem is different here.
the dynamic reloaded contents & css files are streaming from the client/user machine while master html page & it's css streaing directly from server.
so whatever the contents loads in dynamic div, it's coming from client side (e.g. tag lines & css, js). in that case i am not able to handle the css file which is just reloaded by ajax() so i think it can be sort out using js/jQuery fn().

You could apply the cascading rules of the CSS:
In your case, div.myClass inside div.dynamic should override div.myClass belongs to the body.
you adjust the reload.css rules to
.dynamic .myClass{height: 30px; width: 25px; background: yellow; }
The cascading rules which are applied when determine which rules should apply to html div could be referenced here
Updated 11.23
As the OP only have control over master.css, the above solution won't work. Thus, I suggest use child selector to limit the CSS rules to only the outer div.myClass. Modify the rule in your master.css to:
body > .myClass {...}
This rule will only apply to the .myClass which is the child of body. It leaves the spaces of styling for inner .myClass div.

Option 1: A more specific selector
.dynamic .myClass { }
This selector selects the .myClass element that is a descendent of .dynamic.
.dynamic > .myClass { }
This selector selects the .myClass element that is a direct child of .dynamic.
Option 2: Inline CSS
<div class="dynamic">
<div class="myClass" style="background-color: yellow;"></div>
</div>
Option 3: Use a different class.
UPDATE
If you want to avoid the previous defined property to be overwritten by a later defined value, you can use the !important syntax.
.myClass { background-color: red !important; } /* Sets the property to red */
.myClass { background-color: yellow; } /* Property is NOT overwritten */
If I understand your question correctly, this should sort it.
So you should add !important to the properties that seem to be overwritten.

div.myclass { ble ble }
div.main div.myclass { ble ble }
<body>
<div class="myclass"></div>
<div class="main><div class="myclass"></div></div>
</body>

Whichever css class of the same name is loaded last will overwrite anything set by the earlier class. However, if you use an inline style attribute this will always take precedence over anything set by the css file (so using an inline style is one option).
You could also use different style names or clarify your style with tag names div.myClass or id's #myDiv.myClass.

Applying css with javascript overrides hover link style?

I have some JavaScript which is changing an image correctly but once it has been called, my a:hover CSS code no longer works.
Looking with firebug the following JavaScript creates this css rule:
element.style {
background-image:url(/content/images/side_partnershipsOver.png);
}
document.getElementById('partnerships').style.backgroundImage = "url(/content/images/side_partnershipsOver.png)";
How can I apply the JavaScript and not have the a:hover code overriden by the element.style rule?

As far as I know setting the element.style.backgroundImage is essentially the same as using an inline style.
<style type="text/css">
a { background: blue; }
a:hover { background:green; }
</style>
<a href="#" style="background:red;">link<a>
Unfortunately the inline style always wins. In the above sample the link will always be red. As Daniel White said jQuery would be very useful here. Although you may be able to get around this issue in two ways.
One, Generate the style using javascript to write a style tag
document.write("<style type='text/css'>#partnerships { background-image:url(/content/images/side_partnershipsOver.png);}</style>");
or two, Manually setup mouseenter/mouseleave events to handle your hover style
Update
or three, as pointed out by KevinUK, use the !important css tag to override the inline style set.
<style type="text/css">
a { background: blue; }
a:hover { background:green !important; }
</style>
<a href="#" style="background:red;">link<a>

I was also frustrated about this CSS js style gap so I build
methods to apply style from js with a CSS string
elm.jCSS(cssText);elm.jCSSPseudo(cssText,pseudoElt)