We Keep Coding

trying to use jQuery switchClass to create a reveal animation

I'm trying to get an element to change its class to one with a different height attribute to make a reveal effect. I'm just getting an error which says uncaught type error undefined is not a function.
html -
<div id="rollup" class="header-container">
<header class="wrapper clearfix">
<h1 class="title"></h1>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</header>
<p class="btnRetract">
see more
</p><!--end div retract -->
</div><!--end div rollup-->
Javascript -
$(".btnRetract").on("click", function() {
var $content = $("#rollup");
switchClasses($content);
     
return false;
 
function switchClasses($content){
if($content.hasClass("header-container")){ 
$content.switchClass("header-container", "header-container-retracted");
}
else {
$content.switchClass("header-container-retracted", "header-container");
}
}
CSS -
.header-container {
border-bottom: 20px solid #e44d26;
height: 90vh;
position:relative;
}
.header-container-retracted {
border-bottom: 20px solid #e44d26;
height: 20vh;
position:relative;
}

That's because switchClass is not a function defined by the jQuery plugin. It is actually part of the jQuery UI framework. However, if you need to "switch" classes using the jQuery plugin you can use either toggleClass, removeClass and addClass. Furthermore, you can even use animate to customise the transitions between property values

You dont need a switchClass function (doesnt exist anyway and is causing your error)
You can use answer from squint or.if you dont want to check.for the existence of one of the classes you can do this all in one line:
$content.removeClass('header-container').addClas('header-container-retracted');

As others have pointed out, it would be easier to use the jQuery toggle method, but there are other issues as well with your Javascript and CSS. Here's a working demo that you can use as an example.
Demo
Javascript:
$(".btnRetract").on("click", function() {
$("#rollup").toggleClass('header-container-retracted');
});
That's all you need for the click handler if you're using the built in toggleClass method. It accepts one string as an argument, which is the name of the class that you want to toggle. You can also have a comma separated list of two class names, wherein it will toggle between the two classes, but in this case, you don't need to swap the classes. You simply want to add or remove your .header-container-retracted class, because your .header-container class has all of your base styles in it. The .header-container-retracted class only has to contain the properties you want to override in the base styles and as long as it is AFTER your base .header-container class in your stylesheet, the normal cascading behavior of CSS will ensure that its properties will override the base properties.
CSS:
.header-container {
position: relative;
border-bottom: 1.5em solid #e44d26;
height: 85vh;
overflow: hidden;
margin: 0;
padding: 0;
-webkit-transition: height 1s ease;
transition: height 1s ease;
background-color: white;
padding: 1em;
}
.header-container-retracted {
height: 3.5em;
}
So, in your CSS, you don't need to repeat any of your styles in the .header-container-retracted. Note also, that I added overflow: hidden to the base styles. Without this, your content "inside" the header-container element would just spill out and be visible when the header-container was "retracted". Also, I add some transitions to give the opening and closing a nice smooth animation. The transitions will not be supported in IE8 or IE9, but they will not prevent the opening/closing of the element. As #Leo pointed out, if the animation is important to you in IE8/IE9 browsers, you can use jQuery's animate method to handle the transitions instead.
Finally, you'll note in the demo that I set your .btnRetractelement absolute positioning. Because you're using relative heights, you need to ensure that your toggle button is always visible. On a very small viewport, 20vh would be so small that it would obscure the button and make it impossible to expand the header-container.

Bootstrap 3 Dropdown Animate/ Easing

I spent hours to figure out what JavaScript function or CSS3 rules is making the smooth Dropdown function in This Demo but I couldnt figiure it out.
Then I tried to create my own slideToggle as:
$(function() {
$('.selectopt').click(function() {
$(this).next('.dropdown-menu').slideToggle(500);
});
});
which is not as good as the above mentioned demo and there are some issue with it as it just slide down and up the .dropdown-menu ONLY if user clicks on the top of .selectopt and it doesn't care about losing focus or selected options!.
Considering all of these can you please let me know what is making the smooth slide and fade presentation of the .dropdown-menu in the demo? Thanks

It's "fancy" fading using transition of 0.25s. on
dropdown-menuclass.
The demo you mentioned is using external resources
looking at the code
$("select[name='herolist']").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'});
you can see that it's using .selectpicker() which is coming from Bootstrap select plugin. The object passed {style: 'btn-primary', menuStyle: 'dropdown-inverse'} contains only css classes to style the dropdown menu which are contained in Flat UI CSS. When the code is executed the underlying HTML is changed to
Class dropdown-menu contains the following rules
.dropdown-menu {
background-color: #f3f4f5;
border: none;
display: block;
margin-top: 8px;
opacity: 0;
padding: 0;
visibility: hidden;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.25s;
transition: 0.25s;
}
Conclusion: It's "fancy" fading using transition of 0.25s.

There's a whole bunch of external resources in the fiddle:
bootstrap.min.css
bootstrap.min.js
flat-ui.css
bootstrap-select.min.css
bootstrap-select.js
As far as I can see, flat-ui.css is responsible for the fancyness.
I'd recommend adding all the external resources from the fiddle and when you're done with the dropdowns, try removing each one to see if any of them aren't used. In the fiddle they are all requered.

Prevent css interact in a div

I am doing a code that do some js injection of code in page, with JQuery. But in my input that i get in some pages modify it, I am putting all important attributes and define them as !important, but it's impossible to put all the attributes in all the tags.
Someone know how to disable all other css inside a div?
Solution I think:
I found a solution but i don't want to use it. Its eliminate al css from the page, while i am injecting the code after using that code I eliminate my css and code and apply the original code from the webpage
Thanks

If you're using that many !importants you're doing it wrong.
The solution to this problem is to properly organize your css. Important stuff last, because it overrides what was previously styled. Also use your selectors wisely. Example:
<a class="link">Link</a>
.
a:link { color: red; }
.
.
.
.link { color: green !important; } // Nop
a.link { color: green; } // Yup

If you override everything it will work with normal CSS rules on every page. Not what you were hoping for, but it is a solution.
css:
#myInsertDiv {
color: blue;
padding: 0;
margin: 0;
background: white;
border: 0px;
/* etc you have to restyle EVERY possible value */
}
html:
<div id="myInsertDiv"></div>
The main issue is you have to style every attribute, and reset everything else to a default value.
Or you can insert all the style information into the style attribute on the div, but that is probably doing it wrong too.

If I got you right you can use jQuery for modifying CSS properties on any elements of the page (huh), using something like this $('.Myclass').css('color','#ff0000')
And more about selectors in jQuery - http://api.jquery.com/category/selectors/

remove / reset inherited css from an element [duplicate]

This question already has answers here:
How to reset/remove CSS styles for a specific element or selector only
(17 answers)
Closed last month.
I know this question was asked before, but before marking it as a duplicate, I want to tell you that my situation is a little different from what I found on the internet.
I'm building and embedded script that people can put it on their sites. This script creates a div with a certain width/height and some information in it.
My problem is that some websites declare styles for div that are inherited by my div as well.
for example:
div{
background-color:red;
}
so if I don't set any background color to my div, it will show red even if I don't want that.
The only solutions I come along is to overwrite as many css proprieties, this way my div will show exactly as I want.
The problem with this solution is that there are too many css proprieties to overwrite and I want my script to be as light as it can be.
So my question is if you know another solution to my problem.
It can be in css/javascript /jQuery.
Thanks

"Resetting" styles for a specific element isn't possible, you'll have to overwrite all styles you don't want/need. If you do this with CSS directly or using JQuery to apply the styles (depends on what's easier for you, but I wouldn't recommend using JavaScript/JQuery for this, as it's completely unnecessary).
If your div is some kind of "widget" that can be included into other sites, you could try to wrap it into an iframe. This will "reset" the styles, because its content is another document, but maybe this affects how your widget works (or maybe breaks it completely) so this might not be possible in your case.

Only set the relevant / important CSS properties.
Example (only change the attributes which may cause your div to look completely different):
background: #FFF;
border: none;
color: #000;
display: block;
font: initial;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
word-spacing: normal;
z-index: auto;
Choose a very specific selector, such as div#donttouchme, <div id="donttouchme"></div>. Additionally, you can add `!important before every semicolon in the declaration. Your customers are deliberately trying to mess up your lay-out when this option fails.

You could try overwriting the CSS and use auto
I don't think this will work with color specifically, but I ran into an issue where i had a parent property such as
.parent {
left: 0px;
}
and then I was able to just define my child with something like
.child {
left: auto;
}
and it effectively "reset" the property.

Technically what you are looking for is the unset value in combination with the shorthand property all:
The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case. It can be applied to any CSS property, including the CSS shorthand all.
.customClass {
/* specific attribute */
color: unset;
}
.otherClass{
/* unset all attributes */
all: unset;
/* then set own attributes */
color: red;
}
You can use the initial value as well, this will default to the initial browser value.
.otherClass{
/* unset all attributes */
all: initial;
/* then set own attributes */
color: red;
}
As an alternative:
If possible it is probably good practice to encapsulate the class or id in a kind of namespace:
.namespace .customClass{
color: red;
}
<div class="namespace">
<div class="customClass"></div>
</div>
because of the specificity of the selector this will only influence your own classes
It is easier to accomplish this in "preprocessor scripting languages" like SASS with nesting capabilities:
.namespace{
.customClass{
color: red
}
}

Try this: Create a plain div without any style or content outside of the red div. Now you can use a loop over all styles of the plain div and assign then to your inner div to reset all styles.
Of course this doesn't work if someone assigns styles to all divs (i.e. without using a class. CSS would be div { ... }).
The usual solution for problems like this is to give your div a distinct class. That way, web designers of the sites can adjust the styling of your div to fit into the rest of the design.

As long as they are attributes like classes and ids you can remove them by javascript/jQuery class modifiers.
document.getElementById("MyElement").className = "";
There is no way to remove specific tag CSS other than overriding them (or using another element).

you may use this below option.
<style>
div:not(.no_common_style){
background-color:red;
}
</style>
now , if their any place where you do not want to apply default style you can use 'no_common_style' class as class.
ex:
<div class="no_common_style">
It will not display in red
</div>

From what I understand you want to use a div that inherits from no class but yours. As mentioned in the previous reply you cannot completely reset a div inheritance. However, what worked for me with that issue was to use another element - one that is not frequent and certainly not used in the current html page. A good example, is to use instead of then customize it to look just like your ideal would.
area { background-color : red; }

One simple approach would be to use the !important modifier in css, but this can be overridden in the same way from users.
Maybe a solution can be achieved with jquery by traversing the entire DOM to find your (re)defined classes and removing / forcing css styles.

Webkit scrollbar dynamic styling

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?

There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/

Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript

If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.

i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image

For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.

You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.

you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/