I currently have a tooltip that popups away from the image. However, I cannot seem to get clicking working concurrently with hovering. What I'd like to achieve is to have the popup stay visible when the user clicks the image and disable it when the user clicks outside the popup box, however, it would be visible if the user has the hovers in the image and hidden when the user hovers out of the image. I'm not quite sure how to tackle this.
http://jsfiddle.net/BZ4M7/
HTML
<div class="tooltip">
<div class="description"> Here is the big fat description box</div>
</div>
CSS
.tooltip {
border: 1px #333 solid;
width:200px;
height:200px;
background-image:url('http://mathworld.wolfram.com/images/gifs/sqtripic.gif');
}
.description {
display:none;
position:absolute;
border:1px solid #000;
width:400px;
height:400px;
left: 50%;
top: 50%
background: #000000;
}
JS
$(".tooltip").mouseover(function() {
$(this).children(".description").show();
}).mouseout(function() {
$(this).children(".description").hide();
});
var isShown;
$(".tooltip").mousedown(function() {
if (isShown == false){
$(this).children(".description").show();
isShown = true;
}
}).mousedown(function() {
if (isShown == true){
$(this).children(".description").hide();
isShown = false;
}
});
Any help would be appreciated! :)
Thanks!
After making the following additions/changes to your CSS:
.tooltip {
position: relative;
}
.description {
left: 102%;
}
and the following changes to your JS/jQuery:
$(".tooltip").mouseenter(function (e) {
$(this).children(".description").show();
}).mouseleave(function() {
if (isShown === false) {
$(this).children(".description").hide();
} else {
e.preventDefault();
}
});
isShown = false;
$(".tooltip").click(function (e) {
if (isShown === true) {
e.preventDefault();
$('.description').hide();
isShown = false;
} else {
$(this).children('.description').show();
isShown = true;
}
});
I think this accomplishes what you're after, except hiding .description by click outside of .tooltip. There ISN'T anything there to click on at the moment.
Here's a fiddle: http://jsfiddle.net/BZ4M7/1/
Related
I am building small private projects to learn jquery and currently I am stuck.
The Goal is to click a button and then my menu and my main content area should resize; when I click again it should resize itself back to normal.
The first part does work but the second part "jumps" down - I do not know why.
Here is my JSFiddle: https://jsfiddle.net/ne1mb706/1/
HTML:
<div><button id="show_hide_button">click me</button></div>
<div id="some_box"></div>
<div id="some_other_box"></div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#some_box {
background: #fc0;
width: 25%;
height: 100px;
float:left;
}
#some_other_box {
background: #0cf;
width: 75%;
height: 100px;
float:left;
}
JQuery 3.4.1:
var collapsed = false;
$('#show_hide_button').click(function() {
if(!collapsed){
$('#some_box').animate({width: '0%'});
$('#some_other_box').animate({width: '100%'});
} else {
$('#some_box').animate({width: '25%'});
$('#some_other_box').animate({width: '75%'});
}
collapsed = !collapsed;
});
Thanks for any help :)
You must start with the visible one to animate work properly:
var collapsed = false;
$('#show_hide_button').click(function() {
if(!collapsed){
$('#some_box').animate({width: '0%'});
$('#some_other_box').animate({width: '100%'});
} else {
$('#some_other_box').animate({width: '75%'});
$('#some_box').animate({width: '25%'});
}
collapsed = !collapsed;
});
I'm trying to create a sidebar toggle which would change a couple of things in the CSS but I can't quite get it to work.
I have a DIV which is currently changing it's input on hover from SITENAME.COM to MENU. I want the div #site-name to toggle the sidebar on the left.
The DIV #site-name is inside a container/wrapper DIV called #body.
It toggles correctly, but it will not reset the body margin back to 0. After opening the sidebar, the wrapper div keeps the margin set by the open function.
I haven't coded for a while so any help would be appreciated.
<div id="site-name" onclick='openNav();'>MAN&WOLF.MEDIA</div>
<script type="text/javascript">
$(document).ready( function()
{
var cart_visible = false;
$('#site-name').on('click', function()
{
if ( cart_visible )
$('#mySidebar').css('margin-left', '-250px');
else
$('#mySidebar').css('margin-left', '0px');
$('#body').css('margin-left', '0px');
cart_visible = !cart_visible;
});
});
</script>
You did not set the margin-left attribute to #body when opening up the side bar.
if ( cart_visible ) {
$('#mySidebar').css('margin-left', '-250px');
$('#body').css('margin-left', '0px');
} else {
$('#mySidebar').css('margin-left', '0px');
$('#body').css('margin-left', '250px');
}
I think the problem is that you didn't wrap your else block in brackets. So the line: $('#body').css('margin-left', '0px'); is called whether you're opening or closing the menu.
$(document).ready(function() {
var cart_visible = false;
$('#site-name').on('click', function() {
if (cart_visible) {
$('#mySidebar').css('width', '0');
$('#body').css('margin-left', '0');
} else {
$('#mySidebar').css('width', '250px');
$('#body').css('margin-left', '250px');
}
cart_visible = !cart_visible;
});
});
body {
margin: 0;
}
#body {
background-color: lightblue;
height: 100vh;
}
#mySidebar {
width: 0px;
height: 100vh;
background-color: coral;
margin-left: -250px;
position: absolute;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body">
<div id="site-name">MAN&WOLF.MEDIA</div>
<div id="mySidebar">
Sidebar content
</div>
</div>
Got a problem with my slide in menu. Check the my JSfiddle here.
At the moment the slide-in menu closes, whenever clicked on everything else than the menu itself. The problem is, that the menu closes, when i click the text. I would like to perhaps list more ID's inside the same function, something like this;
if(isOpened && e.target.id!='slide-in,text')
My script:
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.id!='slide-in') {
$("#slide-in").removeClass("active");
isOpened = false;
$("#button").show();
} else if(!isOpened && e.target.id=='button'){
$("#slide-in").addClass("active");
isOpened = true;
$("#button").hide;
}
});
Thank you!
You can use an array and indexOf
['slide-in', 'text'].indexOf(e.target.id) === -1
Might I suggest that you add a class to the elements you don't want it to apply to?
!$(this).is('.someClass')
instead of checking for all the ids, check for existence of parent with id as slide-in
if(isOpened && e.target.id!='slide-in') {
if(!$(e.target).parents('#slide-in').length) {
$("#slide-in").removeClass("active");
isOpened = false;
$("#button").show();
}
}
check this fiddle
#slide-in {
position: fixed;
z-index: 10;
top: 0;
width: 300px;
height: 100%;
background-color: #eee;
border-right: 10px solid #ccc;
display:none;
}
and add this inside the .js
$(document).ready(function(){
$("#button").click(function(){
$("#slide-in").show(300);
})
$("#slide-in").click(function(){
$(this).hide(300);
});
});
and if you want more real use this.
in your css change this class like this
#slide-in {
position: fixed;
z-index: 10;
top: 0;
width: 0px;
height: 100%;
background-color: #eee;
border-right: 10px solid #ccc;
display:none;
}
for your js
$(document).ready(function(){
$("#button").click(function(){
$("#slide-in").animate({width: "300px"});
});
$("#slide-in").click(function(){
$(this).animate({width: "0px"});
});
});
I'm trying to make the header fade out, then slide back in when you scroll past 100px, but the function fires every time you scroll anywhere past that point.
I don't want that to happen, I want it so that the function fires only once when you scroll past it and if you scroll again, even if you're past that point, nothing happens.
Check out my fiddle: http://jsfiddle.net/bazzle/6ykyjm0p/2/
Thanks in advance.
<header>
<div class="top">
This is the header
</div>
This is the point function should work.
</header>
html {
height: 200%;
}
header {
background-color: blue;
color: white;
width: 100%;
height: 300px;
}
.top{
height: 100px;
width: 100%;
border-bottom: 1px solid white;
display: block;
}
var stickyheader = function(){
if ($(window).scrollTop() > 100) {
$('header').hide(50, function(){
$(this).slideDown(1000);
});
}
else {
}
};
$(window).on('scroll',function(){
stickyheader();
});
Hi you can use a global variable as a flag to prevent the script from firing.
var flag = 0;
var stickyheader = function() {
if ($(window).scrollTop() > 100) {
if (flag == 0) {
$('header').hide(50, function() {
$(this).slideDown(1000);
flag = 1;
});
}
} else {
}
};
$(window).on('scroll', function() {
stickyheader();
});
html {
height:200%;
}
header {
background-color:blue;
color:white;
width:100%;
height:300px;
}
.top {
height:100px;
width:100%;
border-bottom:1px solid white;
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="top">This is the header</div>This is the point function should work.</header>
You can also reset flag = 0; in the else case if you want the code to execute everytime the user scroll beyond the point.
Hope this help.
I am trying to make a div containing an iframe appear/disappear when a checkbox is selected/unselected.
Here is a quick demo http://jsfiddle.net/bhS9T/
$(function () {
$("input[type='checkbox']").change(function () {
switch (this.id) {
case 'video':
if ($(this).is(':checked')) {
$(".video").css("visibility", "visible");
} else {
$(".video").css("visibility", "hidden");
}
break;
};
});
.video {
position: absolute;
visibility: hidden;
display:block;
background-color: blue;
border: solid red 8px;
padding: 30px;
background-image: none;
}
In safari the video disappears with the div, which is great. However, in chrome the video remains. Can anyone help?
Changing to .show() / .hide() works.
$(function () {
$("input[type='checkbox']").change(function () {
switch (this.id) {
case 'video':
if ($(this).is(':checked')) {
$(".video").show();
} else {
$(".video").hide();
}
break;
};
});
});
See: http://jsfiddle.net/corey_rothwell/kA2G6/