We Keep Coding

Target an image in Jquery

I need to target just the image, the only problem is is that the image is set as a background on the class "hero1project3".
I need it to stay in this class, is there a way in my jquery that I can tell just the image to blur for example ".hero1project3 img"
HTML:
<div class="hero1project3">
<div class="blur">
</div>
<div id="hero1titleproject1">
<h1>Information Design: <br>Zumerset Cyder Appl's.</h1>
</div>
Jquery:
$(document).scroll(function(){
if($(this).scrollTop() >0){
$('#hero1titleproject1').css({'webkit-filter':'blur(5px)', 'filter':'blur(5px)'});
} else {
$('#hero1titleproject1').css({'webkit-filter':'', 'filter':''});
}
});
CSS:
.hero1project3 {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../Information_Design_Zumerset_Project3_hero.jpg);
background-position:50%;
background-size:cover;
transition:all .5s
}
div.project.project3img2 {
background-color: rgb(255,255,255);
}

Using img as a selector means you are trying to select an img tag underneath hero1project3, which does not exist since you are using a background image set via CSS to .hero1project3.
See this answer to know how to blur a background image: How to apply a CSS 3 blur filter to a background image

How to add `scroll` bar to a `div`, when its height as `auto`

In my container, there is multiple childrens, one of the 'div' getting appended by content in that.
when the total height of the container(parent) overflows, i would like to add the scroll bar to the div
is it possible to do by css?
here is the html :
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Js :
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
jsfiddle
UPDATE
I don't want to put the over-flow to container, if so my footer will hide. i require my user need to see the add button always. I can't put my button out side of the container again there would be multiple content in to the container
UPDATE
I find a solution by js is it possible to made without using `js'?
jsSolution

Yes, it is possible to do in CSS. Simply add this CSS rule to #container:
overflow-y:scroll;
Alternatively add this to show the scroll bar only when necessary:
overflow-y:auto;

http://jsfiddle.net/doesfmnm/2/
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
.content{
border:1px solid red;
height:300px;
width:200px;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Adding a little more explanation to what #Guy3000 said. You're appending (adding after) into an element with the class 'content'. Let's consider what that means for the parent .container class. By adding content into a div inside of the parent, your parent will need to either grow to compensate for the added content, or it will need to have a y-axis scroll that permits content longer than the height of the container.
This means you can approach the dilemma you're facing by adding height to the container element, or you can keep a fixed height on the container and have a frame with a y-axis scroll bar contain the added content.

Here is the solution i find :
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">
<div class="content"></div>
</div>
<div class="misc"><button>Add</button></div>
</div>
css :
#container { width: 300px; height: 300px; border:1px solid red;display:table;}
#up { background: green;display:table-row;height:0; }
#down { background:pink;display:table-row; overflow-y:auto}
.misc {
display:table-row;
background:gray;
height:30px;
}
.content {
overflow:auto;
height:100%;
}
Live
js solution :
http://jsfiddle.net/doesfmnm/4/

JQuery tabs not switching

I am having an issue with my script that I always use to switch tabs. I am using jquery elsewhere on my page so the library is working. Just will not switch?
Here is my demo:
Fiddle
Here is the code, really not sure why it is failing?
<div id="buttons">
<ul>
<li id="intro" class="selected">Link1</li>
<li id="teachers">Link2</li>
<li id="learners" class="last">Link3</li>
</ul>
</div>
<div id="introcontent" >
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" >
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" >
<p>sdlkhfskldfjhlksdjflksdj/a>.</p>
</div>
#buttons{
float:right;
left:-50%;
position:relative;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
margin-top:96px;
font-size:18px;
}
.light #buttons ul {
margin-top:80px;
}
#buttons li{
float:left;
position:relative;
height:38px;
line-height:38px;
margin-right:47px;
border-top:2px solid #E6E8E8;
cursor:pointer;
}
#buttons li.last{
margin-right:0px;
}
#buttons li.selected{
color:#FF5500;
border-top:2px solid #FF5500;
}
#introcontent, #teacherscontent, #learnerscontent {
padding-top:200px;
margin-bottom:180px;
}
#teacherscontent, #learnerscontent {
display:none;
}
// Change tab class and display content
$('#buttons').on('click', function (event) {
event.preventDefault();
$('#introcontent').removeClass('#teachersoontent');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).fadeIn();
});
$('.tabs-nav a:first').trigger('click'); // Default

So there were quite a few reasons why the code in your fiddle wasn't working.
It was looking for an href to know which div to display, but there weren't any.
I updated your HTML like so, adding a common class to all the divs that would display content, to make it easier to manipulate them as a group:
<div id="introcontent" class="tabContent">
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" class="tabContent">
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" class="tabContent">
<p>sdlkhfskldfjhlksdjflksdj.</p>
</div>
And amended the JavaScript to work with the new class on the content, and not to worry about href properties.
// Change tab class and display content
$('#buttons li').on('click', function (event) { // this lets you click on any li element inside #buttons
$(".selected").removeClass('selected'); // remove the selected class wherever it may be
$(this).addClass('selected'); // add the selected class to the clicked element
$(".tabContent").hide(); // hide all the elements with the class tabContent (added above)
$("#" + $(this).prop("id") + "content").show(); // show the content we want, by taking the ID of the list element and concatenating it into a string that will match the id of one of the content divs
});
$('#buttons li:first').click(); // You can trigger a click event like this
Here is the updated fiddle.
http://jsfiddle.net/YH3f4/2/

javascript setting width dimensions changes element location

I'm trying to adjust the width of a div that is centred using JavaScript when a menu button is clicked, but when I do the width changes ok but it sets the element about 20px downwards too. This created a large empty gap above contentSectionLeftSide.
Here's what I've got:
function setButtonH(e){
var item = e;
var items = ["menu_item1","menu_item2","menu_item3","menu_item4"];
if(e==items[1])
{
document.getElementById("contentSectionLeftSide").style.width="600px";
document.getElementById("contentSectionRightSide").style.width="300px";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
else {
document.getElementById("contentSectionLeftSide").style.width="45%";
document.getElementById("contentSectionRightSide").style.width="45%";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
}
HTML
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1'), menuGo(1)">
Home
</div>
<div id="menu_item2" onclick="setButtonH('menu_item2'), menuGo(2)">
Interests
</div>
<div id="menu_item3" onclick="setButtonH('menu_item3'), menuGo(3)">
Creations
</div>
<div id="menu_item4" onclick="setButtonH('menu_item4'), menuGo(4)">
Bio
</div>
</nav>
#contentSectionLeftSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}
#contentSectionRightSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}

I think I have a handle on the situation now, and recreating your code locally I did notice a small gap above the left content section.
The problem is that because your divs' content are (probably) resulting in different div heights, the display: inline-block CSS declaration is causing them to be vertically aligned to each other at the bottom baseline, so all you need to do is tell the CSS to align them vertically to the top.
I constructed the left- and right-hand side content areas like this, below the HTML you provided:
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1')">Home</div>
<div id="menu_item2" onclick="setButtonH('menu_item2')">Interests</div>
<div id="menu_item3" onclick="setButtonH('menu_item3')">Creations</div>
<div id="menu_item4" onclick="setButtonH('menu_item4')">Bio</div>
</nav>
<div id="contentSectionLeftSide">Left side content!</div>
<div id="contentSectionRightSide">
Right side content!<br />
There's a little more content in here!
</div>
I also removed the menuGo(#) function from the onClick's, as I didn't know where that functionality went. Side note: be careful here, as in your code above it reads (for example):
onclick="setButtonH('menu_item2'), menuGo(2)"
Where it should be:
onclick="setButtonH('menu_item2'); menuGo(2)"
Which could yield problems down the line.
However, back to the solution, all you need to do is add the line vertical-align: top; to each of your content areas' style declarations, and they'll be aligned to the top, effectively:
#contentSectionLeftSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
#contentSectionRightSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
Here's a working fiddle for you to see it in action. Hope this helps, good luck and keep coding! :)

Using javascript to display text on top of an image on mouse over

I am new to javascript and would like to have an image that is fully displayed but when you mouse over the image text appears over the top in a div tag and fades the image in the background.
This is my attempt however poor and it is not working.
<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>
<script>
function fadeImg(obj) {
obj.style.opacity=0.5;
obj.filters.alpha.opacity=50;
}
function viewObj(obj1, obj2) {
fadeImg(obj1);
obj2.style.opacity=1;
bj2.filters.alpha.opacity=100;
}
</script>
<div>
<img id='img1' src="../images/index/square/posingS.jpg" onmouseover='viewImg(this, txt1)'/>
<div id='txt1' class='image_box_text' >This is image box one</div>
</div>
Thanks in advance.

This should get you started.
<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>
<script>
function fadeImg(obj) {
obj.style.opacity=0.5;
}
function viewObj(obj1, obj2_name) {
var obj2 = document.getElementById(obj2_name);
fadeImg(obj1);
obj2.style.opacity=1;
}
</script>
First, you cannot simply call an object by an id as you did in viewObj. You must do a document.getElementById on its id. Next you will have to check if filters exists (it only does in IE). A better way to do this is to make .faded and .hidden classes in your stylesheet and have the hover event trigger the adding and removal of them.
Here's this code in action: http://jsfiddle.net/WpMGd/