We Keep Coding

Hovering effect on image in jQuery/javascript

Before helping, I am aware CSS is much easier, but please do not give CSS solutions as I was told to only touch the .js file.
I am not sure what is wrong here in my code as I've searched online and this is what I believe I should have in my code, however my image isn't having the opacity and duration effect at all that I intended it to have.
Here is part of the HTML that is involved with the javascript:
<div id="content">
<div id="myCols" class="container">
<div class="col1">
<img src="images/boxImage1.jpg" class="imageCS"/>
</div>
<div class="col2">
<img src="images/boxImage2.png" class="imageCS"/>
</div>
<div class="col3">
<img src="images/boxImage3.jpg" class="imageCS"/>
</div>
</div>
</div>
Here is the javascript that I have keyed in:
$(document).ready(function()
{
$("imageCS").hover(function()
//hover over opacity 30% at 0.5 sec
$(this).stop().animate({opacity: "0.3"}, "0.5");
),
function()
(
//hover out opacity 100% at 1 sec
$(this).stop().animate({opacity: "1"}, "1");
)
});
I am not sure what is wrong as the effect isn't even taking place.

. is missing in your element selection and you can use mouseover and mouseout.
$('.imageCS').mouseover(function(){
$(this).css('opacity','.2');
}).mouseout(function(){
$(this).css('opacity','1');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/350x150" class="imageCS"/>
If you want to Use the hover see the following snippet:
$('.imageCS').hover(
function () {
$(this).css('opacity','.2');
},
function () {
$(this).css('opacity','1');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/350x150" class="imageCS"/>
Calling $( selector ).hover( handlerIn, handlerOut ) is shorthand for:
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
Check Documentation Here.

Add number to end of div with jQuery

I'm using jQuery to create a simple addClass on hover. Hovering over a #science-panel-number div triggers a class of .active to be added to an #iphone-screen-number div.
Here is my jQuery:
$('#science-panel-1').hover(function(){
$('#iphone-screen-1').addClass('active');
},function(){
$('#iphone-screen-1').removeClass('active');
});
$('#science-panel-2').hover(function(){
$('#iphone-screen-2').addClass('active');
},function(){
$('#iphone-screen-2').removeClass('active');
});
$('#science-panel-3').hover(function(){
$('#iphone-screen-3').addClass('active');
},function(){
$('#iphone-screen-3').removeClass('active');
});
My HTML:
<div class="col-md-4">
<div id="science-panel-1" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-2" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-3" class="science-panel__item">
Content goes in here!
</div>
</div>
<div class="col-md-4">
div id="iphone-screen-1" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
div id="iphone-screen-2" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-3" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-4" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-5" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-6" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
</div>
<div class="col-md-4">
<div id="science-panel-4" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-5" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-6" class="science-panel__item">
Content goes in here!
</div>
</div>
This feels like a lot of code to do the same script. Is there a way to have one piece of script that can add the numbers it self? As #science-panel-1 will always link to to #iphone-screen-1 and so on.

This will do what you need. Just apply the handlers to elements whose ID begins with science-panel-, which should cover all of them...
$("[id^=science-panel-]").hover(function() {
// get the corresponding iphone-screen element id
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).addClass("active");
},function() {
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).removeClass("active");
});

I recommend changing the markup to include the data you need to drive the script:
<div data-target="#iphone-screen-1" id="science-panel-1" class="science-panel__item">...</div>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
This allows you to select all the science panel items at once:
$('.science-panel__item')
and perform the exact same script on each of them:
$('.science-panel__item').hover(function () {
$($(this).data('target')).addClass('active');
// ^^^^^^^^^^^^^^^^^^^^^^
// use the data-target attribute as a selector
}, function () {
$($(this).data('target')).removeClass('active');
});
If you change the attribute and the selector, you'll have a reusable feature you can apply to any element:
$('[data-hover-target]').hover(function () {
$($(this).data('hoverTarget')).addClass('active');
}, function () {
$($(this).data('hoverTarget')).removeClass('active');
});

I'd firstly ask if the active class is strictly necessary? Can what you want be achieved with CSS if it is for styling only by using the :hover pseudoclass?
If you do need the .active class for some reason, I would change the markup to be a little more generic so that all the science panels had a CSS class of .science-panel and all the iphone screens had a class of .iphone-screen. Then you could simplify the JS to look like
$('.science-panel').on('mouseenter mouseleave', function(e) {
$(this).find('.iphone-screen').toggleClass('active', e.type === 'mouseenter');
});
This will find the .iphone-screen inside of the .science-panel that you hover over and toggle the class to on if the mouse enters and off when the mouse leaves it.
edit: I see you've updated your answer to include your markup, this answer was assuming that your iphone-screens were nested in the science-panels so this won't necessarily work for you if you don't/can't nest your markup

jQuery .click() not working, while other jQuery functions do

I'm trying to create a Greasemonkey userscript that will click on one of the divs on the page. They don't refer to a link, more likely a JS/Ajax function, but I can't tell if that is true. So the problem is that this script does nothing. Jquery functions like .remove() work, but .click() does not. What exactly is wrong? I tried searching questions on this topic, but none seemed to help.
Code on page:
<div style="display: block;" class="oitm">
<div class="item">
<img class="smallimg" src="">
</div></div>
<div style="display: none;" class="oitm">
<div class="item">
<img class="smallimg" src="">
</div></div>
My code:
$( document ).ready(function() {
var reqItem = $('.oitm[style*="display: block"]');
$(reqItem).click();
});
Please note, that
reqItem.click();
does not work as well.
Upd: there is also a jquery code, but it's placed outside of the elements I posted above (#offer.left is an element where a clicked item is supposed to show up after it's clicked).
<script>
$("#offer").on( "click", ".item", function() {
if ($('#offer .left').children().size() < 9) {
$(this).parent().appendTo('#offer .left');
}
});
</script>

Your code works as expected: http://jsfiddle.net/5zddqx28/ .
JS:
$( document ).ready(function() {
$('.oitm[style*="display: block"]').click(function() {
alert('clicked');
});
var reqItem = $('.oitm[style*="display: block"]');
$(reqItem).click();
});
Make sure you put onclick listener before your .click(); call.

Your code works fine:
<div style="display: block;" class="oitm">
<div class="item">Top Div
<img class="smallimg" src="">
</div>
</div>
<div style="display: none;" class="oitm">
<div class="item">Bottom Div
<img class="smallimg" src="">
</div>
</div>
$( document ).ready(function() {
var reqItem = $('.oitm[style*="display: block"]').click();
$(reqItem).on('click',function(){ alert('I was clicked'); });
$(reqItem).click();
});
https://jsfiddle.net/7xnLoumt/

A selector that looks at the style attribute only works for browsers that format the style in exactly that way, or leaves the attribute in the original format when the code is parsed. You can use the :visible selector to find the visible elements:
var reqItem = $('.oitm:visible');

Traversing divs selectively with jQuery

I currently traverse my divs to create the illusion of separate pages using jQuery like this:
function nextForm() {
$(".Page:visible").hide( ).next( ".Page" ).show( );
}
function prevForm() {
$(".Page:visible").hide( ).prev( ".Page" ).show( );
}
This is my main page where all the content is loaded:
<div class="Page" id="DealerInfo" style="display: block;">
<script>$( "#DealerInfo" ).load( "formPages/DealerInfo.php" );</script>
</div>
<div class="Page" id="AdditionalLocations" style="display: none;">
<script>$( "#AdditionalLocations" ).load( "formPages/AdditionalLocations.php" ); </script>
</div>
<div class="Page" id="OwnerInfo" style="display: none;">
<script>$( "#OwnerInfo" ).load( "formPages/OwnerInfo.php" );</script>
</div>
This is just a small snippet of the main page. Now what I am looking to accomplish is; If a certain field on the form is equal to "1" I want to skip the AdditionalLocations div but if it is greater than "1" then I want it to show the "AdditionalLocations" div. I have tried using nextUntil('#OwnerInfo') but it will still display the AdditionalLocations div. Can anyone dive me a solution to this?
Here is a jsfiddle

add a .not("#AdditionalLocationss") selector, and you must if else

Count divs and add jquery to expand and collapse Text

I hope someone can help. There are 3 divs with employee-block class in the html code included. I would like to add javascript/jquery code to expand/collapse anything after the 2nd div (or employee-block div). This is my html:
<div class="employee-block">
<img alt="test" title="test" src="/images/42.png" /><div class="employee-details"><span class="red strong">TEST</span><br /><p>test description</p></div>
</div>
<div class="bottom"></div>
<div class="employee-block">
<div class="employee-details"><span class="red strong">support#.net</span><br /><p>testing description</p></div>
</div>
<div class="bottom"></div>
<div class="employee-block">
<img alt="test" title="test" src="/images/42.png" /><div class="employee-details"><span class="red strong">TEST</span><br /><p>test description</p></div>
</div>
<div class="bottom"></div>
I have this jquery code, but not sure how to plug it in. In my example html code I only want to hide/show the 3rd employee-block div, so really anything more than 2 because there could be more than 2:
<script type="text/javascript">
$(document).ready(function () {
$('div.view').hide();
$('div.slide').click(function () {
$('div.view').slideToggle(400);
return false;
});
});

Your question is not very clear for me, but look at this code:
$('a.createSomeButton').click( function() {
if ( ! $('#IwillCollapse').length ) {
$('.employee-block:gt(1)').wrap('<div id="IwillCollapse" />');
}
$('#IwillCollapse').slideToggle();
return false;
});

This should help you get on your way. There's many different ways to achieve what you want but this might be the easiest to grasp. http://jsfiddle.net/jSZxp/1/
var employeeBlocks = $('.employee-block').slice(2); //returns all after the first 2
employeeBlocks.addClass('hidden'); //attach the hidden class
$('button').on('click', function(){
employeeBlocks.toggle('hidden'); //toggles the hidden class
});