I have sort of an imagemap, which is basically a lot of absolutely positioned divs, which, when clicked, will show or hide a tooltip. Looks pretty great, apart from the fact, that it doesn't always "work". It sounds silly, but some times I will have to click a couple of times to trigger the event. Maybe I'm just not clicking hard enough? ;)
Markup
<div class="container">
<img src="img.png" />
<div class="trigger"
<div class="tooltip">
Awesome tooltip is awesome!
</div>
</div>
</div>
Style
.container {
width:100px;
height:100px;
position:relative; }
img {
position:relative; }
.trigger {
width:50px;
height:50px;
position:absolute;
top:50px;
left:50px; }
.tooltip {
width:100px;
height:20px;
position:absolute;
top:35px;
left:35px;
display:none; }
Javascript
$(".trigger").toggle(function () {
$(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
}, function () {
$(this).children(".tooltip").fadeOut(200);
});
The markup and CSS is simplified, but imagine I have several tooltips over the image. When I open one tooltip, all others should be closed. I'm guessing this is where things go wrong, but I can't see the error.
In a similar function on the same site, I've semi-dynamically added some IDs, and hide all that is :not(ID), but I just can't believe that should be necessary.
EDIT:
Behold, a Fiddle: http://jsfiddle.net/CfYRv/
change your javascript to something like
$(".trigger").click(function () {
$(".tooltip").fadeOut();
$(this).children(".tooltip").fadeIn();
});
Gah! Need to finish my homework, but long answer short: toggle doesn't work here because you toggle a submenu but then click another. this hides the first submenu, but it's still considered open (it was only hidden). Thus you need to click it twice to open it... I hacked together an alternative but it's not the best code. It'll at least give you an idea what needs done:
http://jsfiddle.net/uj2A4/
$(".trigger").click(function () {
if($(this).hasClass("active"))
$(".tooltip",this).fadeOut(200);
else {
$(this).children(".tooltip").stop(true, true).fadeTo(200, 0.9);
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
}
$(this).toggleClass("active");
$(this).siblings(".trigger").removeClass("active");
});
Rather than toggle, let's use click: http://jsfiddle.net/CfYRv/3/
This assigns the "active" tooltip a css class "ttactive". Clicking on "some trigger" will fade out every active tooltip, and activate the one you just clicked. If the one you just clicked was the active one, all it does is fade that one out.
You could probably still use toggle this way:
$(".trigger").click(function () {
$(this).children(".tooltip").stop(true, true).toggle();
$(this).siblings(".trigger").children(".tooltip").stop(true, true).fadeOut(200);
});
Related
I have imported jQuery and Bootstrap in my HTML page already.
Anyhoo, I wanted to toggle a dropdown menu once I click on the little menu image.
Here's how I hide my menu dropdown:
.menu {
height:150px;
width:155px;
background-color:black;
border-radius:5px;
position:absolute;
top:-10px;
left:100%;
padding-left:0;
}
.menu-active {
position:absolute;
top:35px;
left:60%;
}
To make it responsive, I first tried addClass (menuBtn is the button image and I got):
$('.menuBtn').click(function(){
$('.menu').addClass('menu-active');
})
Which works pretty smooth, though it's always ignored if I added time like addClass('menu-active', 1000), but this is a minor problem! I want to make it toggle, so I tried to change it to toggleClass:
$('.menuBtn').click(function(){
$('.menu').toggleClass('menu-active');
})
Even when I intended to bypass toggle and just use if like:
function menuDropdown(){
$('.menuBtn').on('click', function(){
if($('.menu').hasClass('menu-active')){
$('.menu').removeClass('menu-active');
}else{
$('.menu').addClass('menu-active');
});
}
Both of these don't work, the website just ignored them thoroughly.
I know bootstrap does have a simpler way to do this, I just wanna see what can I write on my own.
Here is one way to solve the problem. Create an ID and use that to refer to your menu instead of trying to use the menu class:
HTML:
<div id="toggler" class="menu">Menu Example</div>
<button type="button" class="menuBtn">Click me</button>
JQuery:
$('.menuBtn').click(function () {
$('#toggler').toggleClass('.menu-active menu');
});
Notice how the above toggles both the .menu-active and the .menu class based off of the #toggler ID.
A working example: http://jsfiddle.net/gratiafide/vubsv2pt/12/
I have seen these on many sites. Basically, I'm creating a portfolio and I have a number of divs (squares in grid format) showing screenshots of my projects. I want to be able to hover over each project with my mouse which will in turn slide in a previously hidden div revealing specific information about that particular project.
Basically, I am looking for something simple like this: http://iamyuna.com/
Notice if you hover over each shape (i.e. project), it quickly "unwraps" to reveal another image underneath. This may be a bad example since what I want is for the description to show up instead of another picture. However, I love how quickly it unwraps to show the hidden content.
Below is how my html is laid out. Would it be possible to implement something similar for my own work? If you guys can help me get started on this or suggest keywords to start with (I've been searching for a tutorial for hours but can't find one), I'd really appreciate it. Thank you.
<article class="project" data-id="248">
<div class="project-mask">
<div class="thumbnail">
<img src="image.jpg">
<div class="description">
<h2>Title</h2>
<p>Description</p>
</div>
</div>
</div>
</article>
Vary basic implementation:
$('.thumbnail').hover(function () {
$('.description', this).stop().animate({
bottom: 0
}, 200);
}, function () {
$('.description', this).stop().animate({
bottom: -100
}, 200);
});
Demo: http://jsfiddle.net/LAkmA/
You could do this just in CSS with something like this:
.thumbnail img { display:block; }
.thumbnail div.description { display:none; }
.thumbnail:hover img {display:none; }
.thumbnail:hover div.description {display:block; }
<script type="text/javascript">
$(".thumbnail img").hover(function(){ $(".description").css("display", "block"); }, function(){ $(".description").css("display", "none");});
</script>
Note : this is done using jQuery and you need to set .description's display to none
also it would be much better to use IDs instead of classes and that would be something like :
<script type="text/javascript">
$("#IMG1").hover(function(){ $("#DESC1").css("display", "block"); }, function(){ $("#DESC1").css("display", "none");});
</script>
and then you can turn that into a function etc.
PS: Again this uses jQuery so you need to implement it in the head section (preferably) and before this code anyway
I've seen some very similar questions floating around but haven't been able to find the answer I'm looking for. I've already determined a work-around but would like to know the proper way to perform the task.
What I desire is to click the button and have the active state stay persistent. The next click will toggle the state and that is desired. What I really need to know is how to address the uiButton:active state.
HTML:
<input type='button' class='uiButton' id='testbutton' value='testValue'>
CSS:
.uiButton{
background-color: red;
}
.uiButton:active{
background-color:blue;
}
Javascript/jQuery:
$('.uiButton').click(function() {
$(this).toggleClass(//active state);
});
You should create an active class
CSS
.uiButton:active, .active {
background-color:blue;
}
JS
$('.uiButton').click(function() {
$(this).toggleClass("active");
});
:active is a css pseudo-class. You want .active which is the class that's being added to the element.
You can't trigger a css pseudo selector like :active. The only option I know ist to simulate this
.uiButtonActive {
background-color:blue;
}
Check out the working JSFIDDLE DEMO
You want the button to keep the active class after it's clicked? (not sure if you want to allow to be untoggled (red) again?).. Anyways...
CSS:
.uiButton {
background-color: red;
}
.uiButton-active, .uiButton:hover {
background-color: blue;
}
Then....:
$('.uiButton').unbind('click').click(function() {
$(this).attr('class', 'uiButton-active');
});
I have a pretty specific request. I have been looking through some other posts, but can't find a definitive answer on this, so help is appreciated.
I'm looking to get a jQuery tooltip that when hovered is a normal tooltip with the text centered. However, when you click the element, the tooltip widens to the left (the text would remain centered so it'd be appear to be moving left as the tooltips center moved left) and a dropdown menu slides out beneath the tooltip. I am still on the fence on whether or not the widening is going to be necessary, but I want the ability to have the dropdown on click.
Any and all help with this would be greatly appreciated. Thanks!
EDIT*** I have written some code that I can't really get to work. Right now I'm just trying to work it out with divs, hoping I can replace the "toolTip" div with a tooltip shape instead of just a box, but I want to get things working before I worry about that. Any help on the following code is appreciated. Thanks!
I apologize in advance for the lack of some indentation and stuff, I don't know why my code doesn't ever copy/paste well into here.
HTML:
<div id="wrapper">
<div class="topIconNew">
</div>
<div class="topTip">
</div>
<div class="topDrop">
</div>
</div>
CSS:
div#wrapper {
margin:0 auto;
width:100%;
height:100%;
position:relative;
top:0;
left:0;
}
.topIconNew {
background-color:red;
border:solid 1px #444444;
width:20px;
height:20px;
position:fixed;
top:50px;
left:450px;
cursor:pointer
}
.topTip {
background-color:#d3d3d3;
border:solid 1px #444444;
width:80px;
height:20px;
position:fixed;
top:70px;
left:450px;
}
.topDrop {
background-color:#ffffff;
border:solid 1px #555555;
width:100px;
height:300px;
position:fixed;
top:90px;
left:450px;
}
jQuery
$(document).ready(function() {
// tooltip hover
$("div.topIconNew").hover(
function(){
$("div.topTip").show();
}
);
//tooltip widening and dropdown menu
$("div.topIconNew").click(
function(){
//permanent tooltip
$("div.topTip").show();
},
function(){
//widen tooltip
$("div.topTip").animate({width:200},"fast");
},
function() {
//show dropdown
$("div.topDrop").slideDown(300);
}
);
$("div.wrapper").click(
function(){
//hide dropdown (hide simultaneously)
$("div.topDrop").hide();
}
function(){
//hide tooltip (hide simultaneously)
$("div.topTip").hide();
{
);
});
Any and all help is greatly appreciated. Thanks!
Assuming from scratch I'd first build
A dropdown menu class that can be absolutely positioned
A tooltip class that can be absolutely positioned
It would be important for these classes to be self contained e.g. the dropdown should handle all bind events etc... First I'd hook up a hover element over whatever triggers the tooltip then position the tooltip and set the text. I'd then attach an onClick event to the same item and inside that I'd:
Flag the tooltip as "hover out no longer destroys it" (probably use an external click on the document instead)
Run an animate on the tooltip object that both sets the x position to x-200 (for instance) and also sets the width to with+200 (.animate({x: '-=200', width: '+=200'}))
I'd attach an event listener on animate so at the end of the animation I then attach the dropdown relative to the tooltip
If you code them separately it should be easy to tie them all together. You really just have to focus on the main evens in such a system:
Mouseover on item for tooltip
Mouseout on item for tooltip
Click on item to fly out tooltip and flag for permanence
Attaching the dropdown
Responding to dropdown events
I'm trying to get buttons to appear when hovering over an image. The following works:
jQuery('.show-image').mouseenter(function() {
jQuery('.the-buttons').animate({
opacity: 1
}, 1500);
}).mouseout(function() {
jQuery('.the-buttons').animate({
opacity: 0
}, 1500);
});
However, when moving from the image to the button (which is over the image), the mouseout/mouseenter is triggered, so the buttons fade out then fade back in (the buttons have the same class as the image, otherwise they just stay faded out). How can I prevent this from triggering? I've also tried the above code using jQuery's hover; same results. Here's a detail of the image showing the button with opacity 1 (because I'm over the image):
http://i.stack.imgur.com/egeVq.png
Thanks in advance for any suggestions.
The simplest solution is to put the two in the same parent div and give the parent div the show-image class.
I like to use .hover() to save a few key strokes. (alll hover does is implement .mouseenter() and .mouseleave(), but you don't have to type them out)
Additionally it's very imporant to fade $(this).find(".the-buttons") so that you only change the button in the hovered over div otherwise you would change all of the .the-buttons on the entire page! .find() just looks for descendants.
Finally, .animate() will work, but why not just use .fadeIn() and .fadeOut()?
JS:
jQuery(function() { // <== Doc ready
jQuery(".the-buttons").hide(); // Initially hide all buttons
jQuery('.show-image').hover(function() {
jQuery(this).find('.the-buttons').fadeIn(1500); // use .find() !
}, function() {
jQuery(this).find('.the-buttons').fadeOut(1500); // use .find() !
});
});
Try it out with this jsFiddle
HTML: - Something like this
<div class="show-image">
<img src="http://i.stack.imgur.com/egeVq.png" />
<input class="the-buttons" type="button" value=" Click " />
</div>
CSS: - Something like this. Yours will likely be different.
div {
position: relative;
float:left;
margin:5px;}
div input {
position:absolute;
top:0;
left:0; }
Put the image and the button in the same div, then put the mouseover/mouseout events on the div. Than whether your mouse is over either the button or the image, it will still be over the div.
Also I am not sure if mouseenter(...).mouseout(...) will work. I always use hover(..., ...)