We Keep Coding

How to add background color only to scroll the menu?

I have this page:
link
CODE HTML:
<div class="content-menu">
<div class="navbar navbar-inverse bs-docs-nav" role="banner" id="menu-top">
<div class="navbar-header">
//some code html
</div>
</div>
</div>
the top menu id want to add to scroll CSS class which is presented below
CODE CSS:
.bg-scroll{
background: red;
}
I tried to use the JS code below
CODE JS:
$(window).scroll(function() {
$("#menu-top").addClass("bg-scroll");
});
Can you tell me please what is wrong?code is quite simple ... the scroll function works smoothly but do not add the respective class
Thanks in advance!

The code you have should work, you probably just have an issue with css selector specificity.
ID based CSS selectors like #menu-top have a higher precedence than Class based CSS selectors like .bg-scroll
Try making your CSS selector for .bg-scroll more specific:
#menu-top.bg-scroll { background: red; }
Or to be more reusable:
.navbar.bg-scroll { background: red; }
Using !important will also work but is generally considered a bad practice because it can make debugging more difficult:
.bg-scroll { background: red !important; }
Read more about best practices: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

How to display a div when hovering over another div

Here my first div shows an image. If you mouse hover on the image then it should show another div named hdiv.
Here $pitem[6] return data from database with php for loop.
CODE
<div class="pcimga">
<div class="pcimg"><img src="Portfolio_Image/'.$pitem[6].'" class="pcimg" /></div>
<div class="hdiv" style="display:none;">
<span class=" butnn"><a data-toggle="modal" href="#myModal'.$pitem[0].'">View</a>
</div>
</div>

Try this
$('.pcimga').hover(function() {
$(this).find('.hdiv').show();
}, function(){
$(this).find('.hdiv').hide();
});
Check it here JsFiddle

try this...
.pgimga:hover~.hdiv
{
display:block;
}
let me know if you want any further guidance..

Try this in CSS. You need to use !important to override the inline style "display:none"
.pcimg:hover+.hdiv
{
display:inherit !important;
}

You can do it with pure CSS:
1. When .hdiv is next to .pcimg
.pcimg:hover+.hdiv{
display:block !important;
}
Fiddle
2. When there is gap between .hdiv and .pcimg
.pcimg:hover~.hdiv{
display:block !important;
}
Fiddle
Note : Internal styles have higher priority than External styles.So for giving External styles more priority !important is needed

You can do it like this with onmouseover and onmouseout events using jquery:
<div class="pcimga">
<div class="pcimg"><img onmouseover='$(".hdiv").show();' onmouseout='$(".hdiv").hide();' src="Portfolio_Image/'.$pitem[6].'" class="pcimg" /></div>
<div class="hdiv" style="display:none;">
<span class=" butnn"><a data-toggle="modal" href="#myModal'.$pitem[0].'">View</a>
</div>
</div>
if you have multiple instances of this block, all of the images will be visible though. to distinguish which one is hovered you can send hideDiv(this) and get which image hovered to show appropriate image.

CSS Negate: Displaying specific elements in a hidden Element?

Assume we have an element that is similar to this
<div id="navigation">
<div class="nav-block-1">....</div>
<div class="nav-block-2">....</div>
This is the offer
Report
</div>
Now I want to hide all the elements including the textelements but not the nav-block-2, so is there a way through which I can do this? Something like using CSS negation?
I tried using
#navigation :not(.nav-block-2) {
display:none;
}
but this seems to negating even the elements inside nav-block-2? Am I doing something wrong here? Any ideas?

Maybe not what you want but here's what i'd do.
#navigation * {
display:none;
}
#navigation a {
display:inline;
}
EDIT:
As it says in the comments in your question, I think it's difficult to do a :not when there's no tag around the text.

Try this
#navigation div:not(.nav-block-2) {
display:none;
}
<div id="navigation">
<div class="nav-block-1">Div 1</div>
<div class="nav-block-2">Div 2</div>
This is the offer
Report
</div>

Use this:
#navigation > *:not(.nav-block-2) {
display:none;
}
However, you can't hide single text nodes. You will need to put the "This is the offer" in a paragraph or at least in a <span> tag to hide it, or you would need to hide the whole #navigation which inevitable contains the .nav-block-2.

how does accordion works?

I'm not asking how to show/hide content upon click.
All I want to know is how by placing 2 divs, one on top the other, I can get the effect that by clicking on the bottom div, it "closing" the upper div. that's all. Not exactly accordion, but this is enough for my situation.
I tried to achieve this by animating the upper div height to 0, after clicking the bottom div. It works but not smoothly enough. and IE browsers didn't like it:
JQUERY
$('#BottomDiv').click(function() {
$('#UpperDiv').animate({ height: '0px' }, "slow");
});
in the markup side, both divs are position - relative:
HTML
<div id="UpperDiv" style="height:190px; width:100%; margin-top:80px; position:relative">
</div>
<div id="BottomDiv" style="width:100%; position:relative; z-index:10; float:left;" >
</div>
So I was just curious maybe there is a better way to achieve this, like jQuery accordion does it. Smooth and works for all browsers.

Assuming a structure such as:
<div id="accordionWrapper">
<div id="UpperDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
<div id="MiddleDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
<div id="BottomDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
</div>​
Then I'd suggest:
$('#accordionWrapper .accordionSlides').click(
function(){
var cur = $(this);
cur.siblings().children().not('h2').slideUp(); // hides
cur.find('p').slideToggle(); // shows
});​
JS Fiddle demo.
References:
children().
click().
find().
not().
slideToggle().
slideUp().

Does this help ?
Markup:
<div id="UpperDiv" style='background:red;height:200px;'>
</div>
<div id="BottomDiv" style="background:Gray;height:200px;">
</div>
Javascript:
$('#BottomDiv').click(function() {
$('#UpperDiv').slideUp("slow","linear");
});

$('#BottomDiv').click(function() {
$('#UpperDiv').css("display", 'none');
});
The simple solution is above, however, more elegant would be to define a css class such as:
.invisible
{
display: none;
}
and you can make something invisible by using the addClass function and you can remove this class by using removeClass from the tag to make it visible again.

How to select two links at once? (i.e. Title & Image)

i'm wondering how to achieve this kind of thumbnail gallery...
http://cargocollective.com/saintea
like when you roll over the thumbnail,
it gives an highlight effect to the title at the same time even though they are two separate elements.
I could make them as one file, but the reason why I want to have them separate is to assign
different effects :) !
can someone please lend me a hand?
thank you so much for reading this post !!!
have a great day !

It's just two <div>s in a link tag. But block elements in inline elements aren't valid, so you could better use <span> elements in a link tag like this:
HTML:
<a href="#">
<span class="one">text</span>
<span class="two">something else</span>
</a>
a:link span, a:visited span {
display: block; /* <-- for example */
color: blue;
}
CSS:
a:hover span.one {
color: yellow;
}
a:hover span.two {
color: orange;
}

As the other answers indicate, you could do it with both javascript and CSS. The page uses javascript and the framework jQuery to do it.
I made a demo of how it can be done both ways: here.
Given the following HTML:
<a href="#" id="theLink">
<img id="theImage" src="http://dummyimage.com/100x50/000/fff&text=Some+image" />
<span id="theText">Some text</span>
</a>
You can either do it with jQuery (this is roughly how that page does it):
$("#theImage").hover(
function() {
$(this).fadeTo("fast", 0.7);
$("#theText").addClass("hover");
},
function() {
$(this).fadeTo("fast", 1);
$("#theText").removeClass("hover");
}
);
where the class hover styles the text.
Here, you are telling jQuery to fire one function when you hover over the image, and another function when you hover out of the image. $("this).fadeTo sets the opacity of the image, while $("#theText").addClass.. well, it adds the class to theText.
(ofcourse, you don't need jQuery to do this, it's just very handy to use such a framework because it abstracts away much of the work)
Or with CSS:
#imagelink:hover img {
/* See http://www.quirksmode.org/css/opacity.html for opacity */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
#imagelink:hover span {
background-color: #66E8FF;
}
Here we're telling the browser that when we hover over the link with the id imagelink, the contents inside the link of type img should have an opacity of 70%, while elements of the type span should have a different background color.

It's perfectly acceptable to wrap just about any elements within a single anchor element. Most browsers already support this, and w/ HTML5 it's actually preferred. So I would just do:
<a href="#">
<img src="image.jpg" width="" height="" alt="" >
<p>Description of the image</p>
</a>
a:hover img { }
a:hover p { }

I'd do it the following way:
<img src="image.gif"
onmouseover="change image style, then change getElementById('comment') style"
onmouseout="change all back"/>
<span id="comment">some text</span>