jQuery hover only works one time - javascript

I am fairly new to jQuery, but I feel like I have a pretty decent grasp on it. Or at least this part of it. I've been through quite a few tutorials on jQuery, but I've never run into this problem before.
I want to hover on an image and have it reveal a small paragraph beside it. I have written this jQuery that does exactly what I want it to do, except it only works once. Hovering over the image reveals the description paragraph, and moving outside the image hides it again, but then hovering won't do anything. Any ideas why this might be?
$(document).ready(function(){
$('#novelDescrip').hide();
$('#barDescrip').hide();
$('.novel').hover(function(){
$('#novelDescrip').fadeIn('slow', 1);
},
function(){$('#novelDescrip').hide();}
);
$('#barminder').hover(function(){
$('#barDescrip').fadeIn('slow', 1);
},
function(){$('#barDescrip').hide();
});
});

This should explain the use of toggle as well as the link Jorge posted.
How do I check if an element is hidden in jQuery?
Here are a few methods to get you started with the jQuery toggle function:
$('.click').click(function() {
$('.target').toggle();
});
$('.click').click(function() {
$('.target').slideToggle();
});
$('.click').click(function() {
$('.target').fadeToggle();
});
The slide and fade are used to give the toggle a slide or fade out effect.
You can also use the following attributes for different things:
$('element:hidden')
$('element:visible')
Or you can do the same with is:
$(element).is(":hidden")
$(element).is(":visible")
Answer to your question: since you didn't post your html I can't test anything for you, but I'd recommend following the tutorials stated above or changing hide() to show() at some parts of your code.
Hope that helps.

Related

Fade in one div, fade out all other divs, by clicking a link

I am trying to create a webpage. The three top menu buttons open each new submenus. In the submenus I have buttons that need to open one div and close the others.
I have kind of successfully figured how to do that but the way I implemented it is very inefficient and I want to make it better. I found this http://jsfiddle.net/n53qg/ from stackoverflow which is pretty much what I want to do but for some reason can't get it to work. Even if I straight out copy paste all the HTML, CSS and JS to their respective files, linked the css and js + jquery to the HTML, it doesn't work. I'm baffled.
This is the way I implemented this: http://jsfiddle.net/mk92jtgz/6/ It takes a lot of work to add new divs so I need a way to close all the others in a simpler way.
EDIT: I'd like to understand why I can't get the copy-pasted code from jsfiddle to work in my own files. I would also respect some guidance on how to achieve what I have done in a more efficient way.
$("#button1").click(function() {
$("#menu2").fadeOut("slow", function() {
$("#menu3").fadeOut("slow", function() {
$("#menu1").fadeIn("slow");
});
});
$("#button1").css("background-color", "white");
$("#button3").css("background-color", "#f6c54e");
$("#button2").css("background-color", "#f6c54e");
currentDay();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Tooltips not working

OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!
I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});
Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)

Hide next Div with class name being used multiple times?

I'm getting myself really confused trying to hide the next Div with a class of .video on a page. I'm trying to have it so a later div on the page with the same class isn't effected by an input button element and only the next div with the class of ".video" after the button, if that makes sense.
I currently have it so all the div's are being effected, I've tried to use .next and .find, but for the life of me, I can't get it to work, I've tried googling around for a solution, but all seem to be not quite exactly what I need, perhaps I google'd the wrong thing, I'm not sure, but hopefully someone can provide some form of answer for me here so my mind can finally be at ease!
So this is the page currently
As you can see, the button hides/shows the elemnt as it should... but it effects the later element also.
I'm not really sure how to go about writing a script usign jQuery so the later one isn't effected... I've rattled my brain, but perhaps it's so late at night (or morning, rather!) that I just can't comprehend it in my drowzy state...
Hopefully one of you will be able to tell me what to do.
The script I'm currently using can also be found here
I appreciate any help, thanks.
try with this:
$(document).ready(function(){
$('.showhide').click(function(){
$(this).parent().next('.video').toggle();
//------^^^^^^^^^^^^^------------------------added to find the video of the parent's next
if($('.video').is(':visible')){
$('.showhide').attr('value','Hide Video');;
} else {
$('.showhide').attr('value','Show Video');;
}
});
});
i used your html in the fiddle,
see the fiddle: http://jsfiddle.net/8h7hP/

facebook homepage like pull down div

after logging on to facebook, there is a downward arrow symbol after home tab. On clicking it shows a div (?) which just appears on the existing content and on another click it disappears.
How can I make exactly such a thing?
Edit:
I followed this link from TheBlackBenzKid. One thing is clear, on clicking on the button, just 2 divs are toggled.
But AFAIK toggle takes place on mouse click. so the 'click' event should be there in the jquery code.
1) But I didn't find it. where is that?
2)there is some css that makes it possible for the menu to appear on a place without dislocating the existing content there( from the demo this is not visible, but it does happen actually). What is that css code?
There are so many ways to do these things: thefinishedbox.com/files/freebies/dropdown-gui/index.html this is a nice one that already comes with simple clean CSS look and feel
This is how i wouldve done it, but its a pretty basic solution.
div id="arrowid">▼</div>
<div id="dropdownbox" style="display:none;">Dropdownbox</div>
<script type="text/javascript">
$(document).ready(function() {
$('#arrowid').click(){
$('#dropdownbox').toggle();
});
});
</script>
this one does'nt support outside clicks, it just shows and hides when clicking the arrow. Hope it helps!
You can use .slideToggle() to achieve this effect, if you are using jQuery.
Use it to display or hide the matched elements with a sliding motion.
.slideToggle( [duration] [, easing] [, callback] )
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
callback: A function to call once the animation is complete.

Scrolling effect with the destination highlighted with jQuery

I found an anchor plugin for jQuery, and its demo site is at http://www.position-relative.net/creation/anchor/.
I am developing a FAQ page on a website where a list of questions are followed by a list of answers. I could use the scroll effect to move down to the corresponding answer when a user click a question. But I also want the answer is highlighted in some ways or others so that a user can get focused on the answer.
I would like to achieve the effect. Also, if you know any other plugin to do this, please let me know.
As you invoke the anchor plugin using:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
you could also bind your own function that does the highlighting as so:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate().click(function() {
$('.highlight').removeClass('highlight');
$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
});
});
This requires that you have this kind of structure:
Anchor link
...
<a name="foobar"></a>
<div>The content you want to highlight</div>
And in CSS, you just define how you want the highlighted part to look like:
.highlight {
background: #ffc;
}
The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.
You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.
I'd use jquery.scrollTo personally, to highlight it is pretty simple, just use .toggleclass() on the span/div that wraps the answer.

Categories

Resources