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

Assign divs the same height (responsive)

I have several divs, that should have the same height, if the screen size is above a certain width.
I thought its a good idea to use a class .sameheight as selector to create a "global working function". Next I would assign another class, to pair the divs, that should have the same height, like so:
.sameheight-01
.sameheight-01
.sameheight-02
.sameheight-02
.sameheight-02
I have several issues, that prevent me from writing my own script, as I have not enough skills in javascript/jQuery:
How can I make it a responsive function, not just set the height once after loading (using window.resize)?
How can I target .sameheight and search for other classes, without writing the same line multiple times (.hasClass(sameheight-01).hasClass(sameheight-02), etc.)?
How can I make this scalable? (Imagen I have twenty groups with ten different media queries)
I have created a JS Fiddle Demo to illustrate my problem.

How far back do you have to support?
Because this could be solved using display:flex;
.row-sameheight {
display: flex;
display: -webkit-flex;
display: -moz-box;
width: 100%;
}
Here's a JS Fiddle

this you could achieve using CSS itself
#media (min-width:500px){
.sameheight {
min-height:100px;
}
}
or
if u want to do through js/jq, refer the modification of fiddle code
http://jsfiddle.net/qj3ntsjs/11/ or
http://jsfiddle.net/qj3ntsjs/17/

Codepen and JSFiddle have different results with same code?

I am trying to learn some tab Javascript by studying Codepen examples, but every time I paste the code to another place, it all changes. To show you what I mean, I took the html, css, and JS from this pen and pasted it directly to a JSFiddle, which got me a broken result.
http://codepen.io/todd01925/pen/awGzD
http://jsfiddle.net/PJu8b/
...
thanks for the help

It's because in codepen you can use LESS and on jsfiddle you can't ;)
Only LESS allow to nested css.
Fixed code: http://jsfiddle.net/PJu8b/2/
So instead of:
.tabs {
li { ...}
a { ...}
do:
.tabs li {...}
.tabs a {...}

Hide a specific H2 id using javascript or CSS

We're looking into Zendesk for our support site but it's not very customizable. I'm trying to remove specific text from the page using their widgets function (which can be created in javascript or css).
I'm trying to hide the following h2 tag while displaying the page:
<h2 id="search_box">Knowledge Base & Forums</h2>
I've tried the following CSS:
.search_box {
display: none;
}
But it doesn't seem to work. I'm not great with either CSS or javascript and I also don't know exactly when these widgets run, but I assume I'm doing something wrong in terms of accessing the element on the page.
I've been able to hide the text using the following combination of Javascript and CSS codes, but it doesn't do what I need because it will hide any part of the page that has the text in it:
Javascript:
$j('h2:contains(Knowledge Base & Forums)').addClass('forumtitle');
CSS:
.forumtitle {
display: none;
}
Thanks for any help!

#search_box {
display: none;
}
. is for classes, # is for ids

Try using in your CSS:
#search_box {
display: none;
}

Your CSS is off - to hide an id `search_box your CSS would be
#search_box {
display: none;
}
Note the # for id - . is for classes.

If you wish to use jQuery you can try this...
$(document).ready(function(){
$("h2").each(function(){
if(trim($(this).html()) == "Knowledge Base & Forums") {
$(this).hide();
}
});
});

Try document.getElementByID("search_box").style.visibility = 'hidden'; in Javascript

How can I have my links display a little transparent box on a:hover?

I'd like to display a little tooltip similar to this:
That little black box appears when I put my mouse over it. How can I achieve this? Is it using jQuery or MooTools or what?
Thanks from this beginnig web designer!

I think you can do it with CSS, no need for Javascript.
The black box (the tooltip) can be an absolutely positioned child with display: none by default, and on :hover you can show it.
Here is a little demo.
Example CSS:
.tooltipped { position: relative; }
.tooltip { display: none; position: absolute; width: 100%; left: 0; top: 35px; }
.tooltipped:hover .tooltip { display: block; }
for the HTML (which remains readable without CSS!):
<div class="tooltipped">3 <span class="tooltip">acorns remaining</span></div>​
This method will work in every modern browser and IE >= 7. IE6 only supports the :hover selector on links, so you need to use an a element if you want to support it (or find a different workaround).

This is done through JavaScript. I would recommend using the jQuery framework, as there are a load of different jQuery Tool Tip plug-ins ready for you to use.
For example.

Definitely looks like Tipsy, a jQuery plugin I used.

With jQuery, assuming you had a div properly formatted like thus: (notice this is an extremely simple example. I'm not defining the classes to properly format the elements or anything like that)
3
and
<div class="onmouseoverpopup parent">
<div class="onmouesoverpopup arrowontopmiddle"></div>
<div class="onmouesoverpopup text">Acorns remaining</div>
</div>
You might do something like this
$(document).ready( function() {
$(".acornsremaining").hover( function() {
$(".onmouseoverpopup.parent").show();
}, function() {
$(".onmouseoverpopup.parent").hide();
});
});