We Keep Coding

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');

Use JQuery to auto slide between images - with my html

I have this html code:
<div class="slider" id="mySlider" >
<div class="slide-group">
<div class="slide">
<img src="images/image1.jpg">
</div>
<div class="slide">
<img src="images/image2.jpg">
</div>
<div class="slide">
<img src="images/image3.jpg">
</div>
</div>
</div>
After every div with class slide there's the img as you can see above.
Using jquery, how can I get it to auto slide between images?

You can use setInterval() to cycle through the slides.
Set it so after x time move to the next slide
The snippet below isn't functioning completely properly, but it gives you a general idea
$(document).ready(function(){
window.setInterval(nextSlide, 1000);
});
function nextSlide() {
var $cur = $('.slide.active');
var $next = $cur.next();
if(!$next) $next = $('.slide-group').children()[0];
console.log($next);
$cur.removeClass('active');
$next.addClass('active');
}
.slide {
display: none;
}
.slide.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slider" id="mySlider" >
<div class="slide-group">
<div class="slide active">
SLIDE 1
</div>
<div class="slide">
SLIDE 2
</div>
<div class="slide">
SLIDE 3
</div>
</div>
</div>

Jon Raasch's simple jquery slideshow is the absolute classic, in my opinion. I've seen it used on many sites.
http://jonraasch.com/blog/a-simple-jquery-slideshow
His example uses a fade, but you can change it to a slide or even Ken Burns it easily enough.

http://www.dwuser.com/education/content/creating-a-jquery-image-scroller/
is just one example of tutorials for image scrollers using jquery.
Just google "jquery image scroller" then if you have further issues come back and see us :)

Single function to toggle multiple divs inside other divs individually

I have some divs in my page, and each one of them has got a content I want to toggle via jQuery.
This is actually how my code looks like:
$('.my_div').click(function() {
$( ".my_div_B" ).slideToggle( "slow" );
});
$('.my_div2').click(function() {
$( ".my_div_B2" ).slideToggle( "slow" );
});
$('.my_div3').click(function() {
$( ".my_div_B3" ).slideToggle( "slow" );
});
and so on... of course it's not the best way to do that, repeating the name of the divs always in the same part of code.
HTML pattern:
<div class="my_div">
<img />
<img />
<div class="my_div_B">text</div>
</div>
How can I make it shorter without opening ALL my divs clicking on $('this')?
- ps. I know there are some similar questions, but the answers seem to be specific for that markup.

You can check if div has specific class value like:
//select div with class attribute starts with my_div
$('div[class^="my_div"]').click(function() {
//find child element div with class start my_div_B
$(this).children("div[class^='my_div_B']").slideToggle("slow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_div">
<img src='http://placehold.it/200x100' />
<img src='http://placehold.it/200x100' />
<div class="my_div_B">text</div>
</div>
<div class="my_div2">
<img src='http://placehold.it/200x100' />
<img src='http://placehold.it/200x100' />
<div class="my_div_B2">text</div>
</div>

jQuery Rotate Function Img Selecting

I'm trying to use jQuery to rotate an image 90 degrees upon click on my div.
Why doesn't it work?
Here's my HTML ...
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
.. and here's my jQuery ;
jQuery(document).ready(function() {
jQuery(".class1").click(function()
{
jQuery(this).find('img').rotate({animateTo:-90})
});
});
If it helps,
http://code.google.com/p/jqueryrotate/wiki/Examples
NOTE: I need the code to FIND the first image...not just get the image by id, then rotate it.

According to #Abdullah Jibaly post and look at comment. I think you miss something like
<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
And here is an example to rotate at first image http://jsfiddle.net/oamiamgod/BeUBF/2/

Your code looks fine as is, I'd guess that the plugin is not being loaded or something else outside the given context went wrong.
To get the first img you can use:
jQuery(this).find('img').first().rotate({animateTo:-90})

// according to use it
<div class="class1">
<div class="class2">
<img src="https://www.google.com/images/srpr/logo3w.png">
<img src="https://www.google.com/images/srpr/logo3w.png" >
</div>
</div>
<button id='test'>click</button>
<script>
jQuery(document).ready(function() {
var setvalue=90;
jQuery("#test").click(function() {
jQuery('.class1').find('img').rotate({
animateTo: setvalue
});
setvalue=setvalue+90;
});
});
</script>
https://code.google.com/p/jqueryrotate/wiki/Examples

fisrt letter of class name should not be a number, change them to class1 and class2 instead and add quotation marks for animateTo value:
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
$(document).ready(function() {
$(".class1").click(function(){
$(this).find('img').rotate({animateTo: "-90"})
});
});

try it
<div class="class1">
<div class="class2">
<img id="whatever">
</div>
</div>
jQuery(document).ready(function() {
jQuery(".class1").click(function()
{
$("#whatever").rotate(90);
});
});