Develop Reference

JQuery scrollTop Function Not Working Onclick a Tag

I want when I click on a tag its scroll me down to mydiv with animation I tried but my code didn't work please check this and help me out
<a id="myButton" >CLICK ME</a>
<div class="oneDiv">yyy</div>
<div id="mydiv">xxx</div>
.oneDiv {
background-color:orange;
height:800px;
width:100%;
}
#mydiv {
background-color:green;
width:100%;
height:200px;
}
$(function)(){
$("#myButton").on("click", function(){
$("html body").animate({"scrollTop":$("#mydiv").offset().top},1000);
return false;
});
});

You have a syntax error near $(function)(){ There should not have any closing parenthesis after function keyword. Following code is working.
$(function(){
$("#myButton").on("click", function(){
$("html body").animate({"scrollTop":$("#mydiv").offset().top},1000);
return false;
});
});

How to make two div clickable by using one click?

I have two div and I want to open these two div in new tab by using one click.
<div id="google">This is Google.</div>
<div id="youtube">This is YouTube.</div>

Something like this should do that
$('a').on('click', function(e) {
e.preventDefault();
$('a').each(function() {
window.open(this.href, '_blank');
});
});
Here's a demonstration using a button

Add 'target=_blank' to in <a> tag .
This is Google.</div>
This is YouTube.</div>

Use javascript for both
<script>
$('#googel,#youtube').click(function()
{
// your commands...
})
</script>

Without javascript, it's not possible to open two links in two different tabs on one click. So my suggestion is to wrap those divs in a parent div and do some javascript.
var wrapper = document.getElementById('wrapper');
wrapper.onclick = function(){
window.open('http://google.com', '_blank');
window.open('http://youtube.com', '_blank');
};
#wrapper{
cursor: pointer;
}
#wrapper:hover{
background-color: #0ff;
}
<div id="wrapper">
<div id="google">This is Google.</div>
<div id="youtube">This is YouTube.</div>
</div>

As you can try this:
$("#google, #youtube").click("Do your work");
For more:
Reference-1 & Reference-2

About click or hover functions

We have a code, when you click the icon, a div appears.
We want to make it appear when hover on icon, not click.
How can we do it?
This code is in my Wordpress theme's footer section.
It needs a change to work like i want. Code is this:
<script type="text/javascript">
$(document).ready(function(){
var searchi = 0;
$("#social-medias").click(function(){
$("#medias-icons").slideToggle("fast");
if ( searchi == 0 ){
$(this).addClass("searchAct1");
searchi = 1;
}else{
$(this).removeClass("searchAct1");
searchi = 0;
}
});
});
</script>

instead of .click(function() { //code here; }); use .mouseover(function() { //code here; });
then to get it to undo, use .mouseout(function() { //reverse code here; });

I see these elements are nested, so you can achieve this using only styles
.a{
color:blue;
}
.a .b{
color:red;
}
.a:hover .b{
color:green;
HTML:
<div class="a">
a
<div class="b">
b
</div>
</div>
Following this example, you can override nested classes behaviour(e.g. display:none/block) when cursor is over it's parent (hover)

scroll to the sibling element on click

Please take a look at this FIDDLE that shows and hides the text in a container on click . What I'm trying to do is that when I click open the first hidden text and then scroll down to click open another one, I want it to scroll back to the sibling image of that opened text to keep it in view. How can I find the sibling element and scroll to it on click?
This one is not valid.
$('.slider2').click(function(e) {
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
HTML:
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
..............
JS:
$('.slider2').click(function(e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
$('.internal').hide();

You've at least a couple of problems here
$(this).closest('.imageclass') doesn't select the image that is previous sibling of <a>
even if you get your desired image, the moment your scrolling code runs, the image has not placed itself to its final position.
using $(document.body) to scroll the window (I'm doubtful about it myself)
Below code selects the right image element, gets the scrolltop at right moment, and scrolls the html, body using working syntax.
$(function () {
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
var imageposition = $('.imageclass', $(this).closest('.container'));
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal', function () {
$('html, body').animate({scrollTop: $(imageposition).offset().top})
});
}
});
$('.internal').hide();
});

There's a bit of a problem with how your scrolling function works because the position of the active .container alters in relation to other containers(when active and inactive state).
Also, you should not be looking for the closest position but for its parent element.
Please take a look at my code: CSS
.slider2 {
margin:40px;
}
.internal p {
padding:5px;
}
.internal h3 {
text-align:center;
}
.container {
position: relative;
}
You might need to look for a way, to detect the height of an inactive container since I made mine as a static value.
JS:
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
var containerHeight = 205;
var containerIndex = $(this).offsetParent().index();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var scrollPosition = containerHeight * containerIndex;
$('body').animate({
scrollTop: scrollPosition
}, 'fast');
});
$('.internal').hide();

jQuery toggle help

Currently, clicking on the h2 tag toggles the div with slideToggle. However, I'm trying to also fade in and out the .hint_text_heading that exists within the h2 tag. So, originally, what I tried to do at least, I am adding an .active class to the h2 tag thats open, then fading in the .hint_text_heading. However, I can't get .hint_text_heading to fade out when I close the div.
Any suggestions? Thanks!
html
<h2 class="collapsible_head">This is a title.<span class="hint_text_heading">This is a hint.</span></h2>
<div>
This is the toggled content.
</div>
jquery
$(document).ready(function(){
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
}).next().hide();
});
UPDATE/
Here's an example in jsFiddle. As you can see, the div toggles, and the hint text fades in, however, when the div is hidden, the hint text remains. I am trying to get that to fade out:
http://jsfiddle.net/UGHgx/

I think this is what you are wanting:
CSS:
span.hint_text_heading { display: none; }
jQuery:
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
//$(this).toggleClass('active');
$('span.hint_text_heading', this).fadeToggle();
}).next().hide();

How about this:
$(function(){ /* shorthand for $(document).ready(function(){ */
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
$('h2:not(.active) span.hint_text_heading').fadeOut();
}).next().hide();
});
Edit:
I would also recommend removing $('span.hint_text_heading').hide(); and just putting display:none; as a style, this is extra javascript where it isn't needed.

Do you want this;
$(document).ready(function(){
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).children('.hint_text_heading').fadeOut().end().next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
}).next().hide();
});
If not, please comment me and I'll try to give you solution.

Well, the quick and dirty solution:
http://jsfiddle.net/CpVSC/12/
$('span.hint_text_heading').hide();
$('h2.collapsible_head').click(function() {
$(this).next().slideToggle('slow');
if($(this).hasClass('active')){
$('.hint_text_heading').fadeOut();
}else{
$('span.hint_text_heading',this).fadeIn();
}
$(this).toggleClass('active');
}).next().hide();

Working code (tested):
$(document).ready(function() {
$('h2.collapsible_head').click(function() {
$('h2.active span.hint_text_heading').hide();
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
$('h2.active span.hint_text_heading').fadeIn();
}).children().hide().end().next().hide();
});
Here's the fiddle:
http://jsfiddle.net/UGHgx/3/

I will go with animation callbacks.
Example: http://jsfiddle.net/X99Z6/