Hover div jquery - javascript

Here is my script :
<body>
<div id ="mainCategory" class='fade'>
Category</div>
<div id="divSubCategory">
Category1
<br />
Category2
</div>
<script type="text/javascript">
$("div").hover(
function () {
$(this).append($("#divSubCategory").html());
},
function () {
$("#divSubCategory").remove();
}
);
$("#divSubCategory.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });
</script>
</body>
I want to show and hide divSubCategory on mainCategory hover. But it doesn't work. What should I add?

$(document).ready(function(){
$('#mainCategory').bind('mouseenter', function() {
$('#divSubCategory').fadeIn();
});
$('#mainCategory').bind('mouseleave', function() {
$('#divSubCategory').fadeOut();
});
});

Ok dude the problem is that you're using .html(). This copies the inner html (not the outer <div id="divSubCategory"></div> bit too... just the bit in the middle.
Because of this, when you do $('#divSubCategory').remove() its removing the actual div in the HTML, not the HTML you've moved into the div above.
Assuming you have display: none on #divSubCategory you will see the text from that div get appended to the first div, then when you mouse-out it will not go away (although the second (hidden) div will get deleted).
Anyway the way around this is to use clone(). I'll do a fiddle for you:
http://jsfiddle.net/fZZu5/1/
I also fixed your fades for you.
EDIT: This moves the div#divSubCategory into the div#mainCategory before showing it and then removes it completely from there when you mouse-out - this is what I assumed you wanted to do from your code. Nicks just shows and hides it where it is. Depending on what you want, both these answers are correct. :)

This is the 100% working with your requirement:
Check this: http://jsfiddle.net/ZWqnk/8/

Wrap your code inside the document.ready() function
$(document).ready(function(){
// Your code here
});

Related

Activate hover action on a certain word

Okay, so this is something that has already been done so I know it's possible. What I'd like is that, when the user hovers the mouse on some word defined by the wordHoverAssign() function, something would get activated.
So, in a more concise manner: When the page is loaded the text I love potatoes! shows up on screen, created with HTML. Then the function wordHoverAssign("potatoes") is executed. What should happen then, when I hover the word potatoes, is that an alert message would pop up with, for example, this message You hovered the word!.
Is this possible? How would I go about doing it? I'd really like it if I didn't have to use any more frameworks/plugins. I'm using jQuery by the way.
Thank you.
My code so far (if you don't feel like setting it up):
wordHoverAssign("potatoes");
function wordHoverAssign(theWord) {
//code here
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I love potatoes!</p>
The following allows you to assign different function to any word inside the #content div. The associated function is called only when the specific word is hovered.
<div id="content">
I love potatoes!<br/>
She loves something else<br/>
The potatoes coming again.
</div>
<script>
window.wordsAssigned = {};
function wordHoverAssign(word,func){
wordsAssigned[word] = func;
}
wordHoverAssign('potatoes',function(){
alert('Patatoes hovered!');
});
wordHoverAssign('something else',function(){
alert('something else!');
});
$(function(){
var content = $('#content');
var html = content.html();
for(var word in wordsAssigned){
html = html.replace(new RegExp(word,"gm"),'<span onmouseover="wordsAssigned[\''+word+'\']()">'+word+'</span>');
}
content.html(html);
})
</script>
As per your need :contains('text') suits you better. see example:
wordHoverAssign("potatoes");
function wordHoverAssign(theWord) {
$( ":contains("+theWord+")" ).hover(function(){
alert("Hover happend");
})
}
Here is Updated DEMO
But above code will alert twice because of hover event also bind with body, so my suggestion is use special tag. See following snippet:
wordHoverAssign("potatoes");
function wordHoverAssign(theWord) {
$( "p:contains("+theWord+")" ).hover(function(){
alert("Hover happend");
})
}
Another DEMO for hover in p tag. It won't work on body hover.

jquery dialog not appearing on click

I have a span that I want to create a jquery dialog on when it is clicked.
I have included this in the header:
<script type="text/javascript">
$(document).ready(function () {
$('#quote_dialog').click(function () {
$('#quote_dialog_open').dialog('open');
return false;
});
});
</script>
The following is the span (havent included content):
<span id="quote_dialog">
content
</span>
And the div is just a box on the screen:
<div id="quote_dialog_open">
content
</div>
I assume I need to hide the div using CSS? Will jQuery make it popup as opposed to just appearing?
Nothing is happening at present when the span is clicked.
Firstly, Make sure you are also including the relevant jquery UI...
Secondly, look at this fiddle, it shows you the solution.
$(document).ready(function () {
// next add the onclick handler
$("#quote_dialog").click(function() {
$("#dialog").dialog();
return false;
});
});
http://jsfiddle.net/k0nzhtLw/
Hope it helps :)
wild guess, your problem is the typo, change
$('#quote_dialog_oepn').dialog('open');
to
$('#quote_dialog_open').dialog('open');

Loading second div behind first div. then hiding first div

Current Implementation:
two divs at same place, div1 display:block, div2 display:none
on tab click, Jquery hides one in 2000ms and shows other div.
Problem:
I dont want user to feel like 2nd div loaded after tab clicked.
I want user to feel that second div was there when first div disapeared.
Current Code:
div1.hide('fade', 2000, function() {
div2.show();
});
I need something like:
div2.show(); //behind div1
div1.hide('fade', 2000);
but this shows both divs on screen for 2 seconds which I dont want to.
Please help.
You need to code something like this
$(document).ready(function(e) {
$(".tab2").on("click",function(){
$(".div2").stop(true,true).slideUp(function(){
$(".div1").stop(true,true).slideDown();
});
})
$(".tab1").on("click",function(){
$(".div1").stop(true,true).slideUp(function(){
$(".div2").stop(true,true).slideDown();
});
})
});
Put your class or id name on which you want to click instead of .tab
Here is demo of full tab pane: fiddle
You can use stop() to block the queueing of animations, like so:
$('#click').click(function() {
$("#div1").stop().fadeTo(2000, 0);
$("#div2").stop().fadeTo(2000, 1);
});
Here's a jsFiddle
What you are looking for sounds like 2 div's behind each other, using z-index. You just put them in the same place, give the one in the back a lower z-index and then fadeOut the top one. This way the second one will actually be there already and you don't need the show() or fadeIn(). Example here
Here's a little bit sexier way than loading the second div later. stack the divs, then fade out the top one and hide it with the animation callback when it's done. (or, use fadeOut as BenMann suggests for the same result.)
Example fiddle
<div id='container'>
<div id='divFront'>some content on top, click for other content</div>
<div id='divBack'><br />some other content underneath</div>
</div>
$('#divFront').click(function(){
$('#divFront').animate({"opacity":"0"}, 2000, "swing", function(){
$('#divFront').hide();
});
});
thank you for your support sir, I have aceived it by using the comments of everyone. Have a look bro http://jsfiddle.net/bhailogee/CA7Bu/3 thanks
$(document).ready(function(e) {
$(".tab1").on("click",function(){
prepare($(".div2"),$(".div1"));
$(".div1").hide('slide', 2000,function(){
clean($(".div2"),$(".div1"));
$(".div2").show();
});
})
$(".tab2").on("click",function(){
prepare($(".div1"),$(".div2"));
$(".div2").hide('slide', 2000,function(){
clean($(".div1"),$(".div2"));
$(".div1").show();
});
})
function prepare(showdiv,hidediv){
showdiv.css('position','absolute');
hidediv.css('position','absolute');
showdiv.css('z-index','1');
hidediv.css('z-index','2');
showdiv.css('display','block');
hidediv.css('display','block');
}
function clean(showdiv,hidediv){
showdiv.css('z-index', '');
hidediv.css('z-index', '');
}
});

Toggle the nearest content when click on anchor using jQuery

I have a content structure like this:
Click me.
<p class="hidden_content">This content is toggleable.</p>
Click me.
<p class="hidden_content">This is a different section.</p>
Click me.
<p class="hidden_content">This section is also different.</p>
I have already discovered how to make this work with one section, but how can I make it so that when I click on a toggle_button it opens only the nearest hidden_content class.
$('a.toggle_button').click(function() {
$(this).next('p.hidden_content').toggle();
}
http://api.jquery.com/next/
Simply try
$("a").click( function(){
$(this).next('p').toggle();
});
Working Demo
It's easy with JavaScript but you could also stay with plain CSS with the :target selector --
Click me.
<p id="hiddenContent1" class="hidden_content">This content is toggleable.</p>
<style>
.hidden_content{
display:none;
}
.hidden_content:target{
display:block;
}
</style>
Here's a Fiddle
This will toggle the following div, and stop the page returning to the top:
$('a.toggle_button').click(function(e) {
e.preventDefault();
$(this).next('p.hidden_content').toggle();
}
Use the jQuery .next() selector
$(".toggle_button").on("click", function () {
$(this).next(".hidden_content").toggle();
});

.hover not working when used with .html

I am trying to do a simple image rollover with jQuery, but this code is not working:
HTML:
<div class="secondcircle" id="circleone">
<p>
<img src="/../ex/img/group1.png">
</p>
</div>
JS:
$("#circleone").hover(
function () {
$(this).html("<p><img src=\"/../ex/img/group2.png\"></p>");
},
function () {
$(this).html("<p><img src=\"/../ex/img/group1.png\"></p>");
}
);
The mouse enter event fires just fine, but none happens when the mouse leaves.
Moreover, the code works fine with simpler actions - the example in the jQuery docs of appending a span then removing it works just fine.
Why would the html not be working? I've been stuck on this for ages.
Update: Nearly every answer/comment suggests just replacing the image source, and while this works perfectly (thanks!) sometimes I do need to change the HTML (such as to change text). This was just one example. Sorry, I should have better specified that in the question.
Instead of replacing your entire HTML is is a better idea to just change the source of the image.
$("#circleone").hover(function () {
$(this).find('img').attr("src","/../ex/img/group2.png\");
},
function () {
$(this).find('img').attr("src","/../ex/img/group1.png\");
}
);
It works if you adjust it so it just replaces the img, like this:
http://jsfiddle.net/7etUU/
I think the main issue is your div being a block element that spans 100% of the width, then the contents get replaced on hover which removes the content, so it flashes.
Why not do this with CSS?
#circleone {
background-image:url('FirstImageURL');
}
circleone:hover{
background-image:url('SecondImageURL');
}
Totally stole this from this question.
I think your div is taking 100% width. Try adding a "float:left" CSS property. Like this...
.secondcircle{
float : left;
}
I noticed something weird when testing this. His original method does not work until I added a border around the parent div, then it works just fine.
Anyone know why that might be?
jsFiddle
/*UNCOMMENT ME AND I WILL WORK
#circleone
{
border: 1px solid #000;
}*/
You do not need to replace the whole HTML with hover event. If your goal is to change the image on hover, use the attr method instead http://api.jquery.com/attr/:
HTML
<div class="secondcircle" id="circleone">
<p>
<img id="img1" src="http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg" />
</p>
</div>
jQuery
$("#circleone").hover(
function () {
$("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg', 'alt':'MyAlt1' });
},
function () {
$("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg', 'alt':'MyAlt2' });
}
);
Working JsFiddle here: http://jsfiddle.net/TBMxm/1/
Also, this is better from performance and best practice point of view.
Update1
jQuery Code if you want to use HTML method:
var originalContent = $('#circleone p').html();
$("#circleone").hover(
function () {
$('#circleone p').html('<img src="http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg"/>');
},
function () {
$('#circleone p').html(originalContent);
}
);
Working sample using HTML: http://jsfiddle.net/TBMxm/3/

Categories

Resources