strangely, I find it difficult to bind jquery's onclick event handler to this fiddle. I don't even know what I'm doing wrong. The html is as follows:-
<ul>
<li><a id="tooltip_1" href="#" class="tooltip" >Trigger1</a><li>
<li><a id="tooltip_2" href="#" class="tooltip" >Trigger2</a><li>
<li><a id="tooltip_3" href="#" class="tooltip" >Trigger3</a><li>
</ul>
<div style="display: none;">
<div id="data_tooltip_1">
data_tooltip_1: You can hover over and interacte with me
</div>
<div id="data_tooltip_2">
data_tooltip_2: You can hover over and interacte with me
</div>
<div id="data_tooltip_3">
data_tooltip_3: You can hover over and interacte with me
</div>
</div>
styled this way:-
li {
padding: 20px 0px 0px 20px;
}
with a jquery like this:-
$(document).ready(function() {
$('.tooltip[id^="tooltip_"]').each
(function(){
$(this).qtip({
content: $('#data_' + $(this).attr('id')),
show: {
},
hide: {
fixed: true,
delay: 180
}
});
});
});
you check out the fiddle page I created:- http://jsfiddle.net/UyZnb/339/.
Again, how do I implement a jquery modal-like appearance to it so the tooltip becomes the focus?
Working Demo: using mouse over and out: http://jsfiddle.net/swxzp/ or using click http://jsfiddle.net/rjGeS/ ( I have written a small JQuery/ Css / Opacity demo)
Update: Working sample with trigger 1, 2 & 3: http://jsfiddle.net/HeJqg/
How it works:
It has 2 divs i.e. background which is used to make rest page become grey-ish like modal and second div large which will act as a placeholder for the toolTip so thta you can close and open it in any event you want even though the background is grey.
Rest feel free to play around with the code, hope it helps the cause :)
Code
$('.tooltip_display').click(function() {
var $this = $(this);
$("#background").css({
"opacity": "0.3"
}).fadeIn("slow");
$("#large").html(function() {
$('.ttip').css({
left: $this.position() + '20px',
top: $this.position() + '50px'
}).show(500)
}).fadeIn("slow");
});
$('.note').on('click', function() {
$('.ttip').hide(500);
$("#background").fadeOut("slow");
$("#large").fadeOut("slow");
});
$("#large").click(function() {
$(this).fadeOut();
});
CSS
.ttip {
position: absolute;
width: 350px;
height: 100px;
color: #fff;
padding: 20px;
-webkit-box-shadow: 0 1px 2px #303030;
-moz-box-shadow: 0 1px 2px #303030;
box-shadow: 0 1px 2px #303030;
border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
-o-border-radius: 8px 8px 8px 8px;
background-image:-moz-linear-gradient(top, #F45000, #FF8000);
background-image: -webkit-gradient(linear, left top, left bottom, from(#F45000), to(#FF8000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F45000', endColorstr='#FF8000', GradientType=0);
background-color:#000;
display: none
}
.contents {
font-size: 15px;
font-weight:bold
}
.note {
font-size: 13px;
text-align:center;
display:block;
width: 100%
}
#background{
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 1;
}
#large {
display: none;
position: absolute;
background: #FFFFFF;
padding: 0px;
z-index: 10;
min-height: 0px;
min-width: 0px;
color: #336699;
}
HTML
<span class="tooltip_display">Trigger</span>
<div id="large">
<div class="ttip">
<div class="contents">Here goes contents...</div>
<span class="note">(click here to close the box)</span>
</div>
</div>
<div id="background"></div>
Image of working demo:
Related
I have the following situation see this fiddle: https://jsfiddle.net/rmt70fjw/
In this example there are 2 buttons where only one of them (register-trigger) triggers a popup to open. The other button login-trigger doesn't do this. This situation together with the HTML is a given, and cannot be changed. Be aware that the popup generator is more complex, than just the click on hide example here.
What I am trying to do is that login-trigger opens as well the popup via the register-trigger button and hides the registration form and shows the login form. And for the register-trigger button the other way around. Currently they arrive in a loop because of the popup trigger.
How do I do this? See fiddle with below jQuery attempt and problem.
jQuery
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is the current attempt
jQuery('.login-trigger, .register-trigger').click(function(e){
if(e.currentTarget == '.register-trigger'){
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
} else {
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
jQuery('a.register-trigger').trigger('click');
}
});
You could just add the .register-trigger class to your login button aswell in that case. That will trigger all events of your plugin on the login button click. If you then need some special logic like hiding the register form add some Event handler for your login-trigger
$('.login-trigger').addClass('register-trigger');
// PLUGIN CODE START
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// PLUGIN CODE END
jQuery('.register-trigger').click(function(){
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
});
jQuery('.login-trigger').click(function(e){
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
});
body { background-color: #ddd; }
p { width: 100%; }
.popup {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
right: 0;
margin: 0 20%;
width: auto;
height: 66%;
background-color: #fff;
border: 1px solid #e4e4e4;
border-radius: 5px;
}
.hide { display: none; }
form {
margin: 0.5rem;
display: inline-flex;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.3);
width: 300px;
height: 300px;
text-align: center;
}
#close {
position: absolute;
top: 0;
left: -1.75rem;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.25);
border-radius: 5px 0 0 5px;
background-color: white;
padding: 0.5rem;
transition: 0.3s all;
}
.btn-wrapper {
display: flex;
justify-content: center;
position: absolute;
bottom: 1rem;
right: 0;
left: 0;
}
a {
width: 200px;
margin: 0 1rem;
line-height: 1.4;
text-align: center;
font-size: 1.2rem;
padding: 0.5rem;
background-color: #eee;
color: #333;
border-radius: 0.5rem;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.25);
transition: 0.3s all;
}
a:hover, #close:hover {
background-color: #fff;
cursor: pointer;
box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="popup hide">
<form class="login-form">
<p style="padding:1rem 3rem;text-align:center;">This is the login form</p>
</form>
<form class="register-form">
<p style="padding:1rem 3rem;text-align:center;">This is the registration form</p>
</form>
<div id="close">X</div>
</div>
<div class="btn-wrapper">
<a class="register-trigger">Register</a>
<a class="login-trigger">Log In</a>
</div>
</body>
Here is the code of jQuery which will work for you!
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is to
jQuery('.login-trigger').click(function(e){
jQuery('.popup').removeClass('hide');
jQuery('.login-form').removeClass('hide');
jQuery('.register-form').addClass('hide');
});
jQuery('.register-trigger').click(function(e){
jQuery('.popup').removeClass('hide');
jQuery('.register-form').removeClass('hide');
jQuery('.login-form').addClass('hide');
});
Ok, if i understood correctly, it should work like this. Alert should pop up with both buttons.
jQuery('.register-trigger').click(function(){
jQuery('.popup').removeClass('hide');
});
jQuery('#close').click(function(){
jQuery('.popup').addClass('hide');
});
// above is a given, cannot be changed
// below is to
$('.login-trigger, .register-trigger').click(function(e){
$('.popup').removeClass('hide');
if(e.currentTarget == $('.register-trigger').get(0)){
alert("test");
$('.popup .register-form').removeClass('hide');
$('.popup .login-form').addClass('hide');
}
else
{
$(".register-trigger").trigger('click');
$('.popup .login-form').removeClass('hide');
$('.popup .register-form').addClass('hide');
}
});
I have used belwo the code for show the details when hover but the div is moving to left side but bioinfo is not show so can you please guide?
how to implement this in jquery.
in html file
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info"> </div>
</div>
<div class="bioinfo">
<h2>Details of the image initially it should hide</h2>
</div>
</li>
</ul>
in css file
css file
.ch-grid li .person-profile nav ul li {
display: inline-block !important;
height: 56px !important;
margin: 0px !important;
width: 36px !important;
}
.ch-img-1 {
background-image: url(../images/image.png);
}
.bioinfo {
display: none;
background: rgba(246,246,246, 0.8);
font-size: 10px;
padding: 15px 3px 3px 3px;
text-align: justify;
}
In Jquery
$('.ch-grid > li').hover(function() {
$(this).animate({ marginRight: 120 });
$(this).children('.bioinfo').show();
}, function() {
$(this).animate({ marginRight: 0 });
$('.bioinfo').hide();
});
how to show the bioinfo when hover.
If you simply want to show .bioinfo on hover, see
FIDDLE
You shouldn't need any jQuery to do this- but I see you are using an animation which you may want to incorporate into the CSS. You can toggle hover behaviour by using the :hover pseudo class in CSS.
CSS
.bioinfo {
display: none;
max-height: auto;
max-width: 220px;
overflow: hidden;
border-radius: 10px;
box-shadow: rgba(108, 108, 108, 0.5) 5px 5px 5px;
border: 2px solid #ccc;
position: absolute;
z-index: 100;
/* background: #eeeded; f6f6f6*/
background: rgba(246, 246, 246, 0.8);
font-size: 10px;
padding: 15px 3px 3px 3px;
text-align: justify;
}
li:hover .bioinfo {
display:block;
}
Except for broken tags, Your code is fine. Keeping your markup same, remove right: -150px; from class bioinfo and change top:150px to top:0in you css and it works just fine.here is WORKING CODE
Have a left fixed pane in my page & a variable right pane which is composed of several changing divs.
I want on the button click on the left pane. The required right pane div show show & other divs should be hidden.
http://jsfiddle.net/shivang/guvr4/2/
This is what I've achieved so far. But its not working can anyone help me with this.
Html
<div id="container">
<!-- Left Layout div starts -->
<div id="left_layout">
<table>
<b></b>
<br><br>
<tr></tr><br>
<br></br>
<tr><button name="1">1</button></tr>
<br></br>
<tr><button name="2">2</button></tr>
<br></br>
<tr><button name="3">3</button></tr>
<br></br>
<tr><button name="4">4</button></tr>
<br></br>
<tr><button name="5">5</button></tr>
<br></br>
<tr><button name="6">6</button></tr>
<br></br>
<tr><button name="7">7</button></tr>
</table>
</div><!-- Left Layout Div ends -->
<div id="center_layout">
<div id="right_layout">Right Layout</div>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
<div id="6">6</div>
<div id="7">7</div>
</div><!-- Center Layout div ends -->
</div><!-- End of Container div -->
CSS
html, body {
background: #FFFFFF;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: auto; /* when page gets too small for container min-width/height */
}
#container {
background: #FFFFFF;
min-height: 670px;
min-width: 600px;
position: absolute;
top: 50px; /* margins in pixels */
bottom: 50px; /* could also use a percent */
left: 50px;
right: 50px;
}
.pane {
display: none; /* will appear when layout inits */
}
#left_layout{
background: #FFFFFF;
position: absolute;
top: 30px; /* margins in pixels */
bottom: 30px; /* could also use a percent */
left: 20px;
/* right: 10px; */
min-height: 18px;
min-width: 250px;
/* box-shadow: 10px 10px 5px #888888;
border: 1px; */
/* -moz-border-radius: 8px;
border-radius: 8px; */
-webkit-box-shadow: 0 0 5px 2px #F8F8F8;
-moz-box-shadow: 0 0 5px 2px #F8F8F8;
box-shadow: 0 0 5px 2px #F8F8F8;
background: #ffffff;
border: 1px solid #ababab;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
#center_layout{}
#center_layout div{
display: none;
background: #F8F8F8;
position: absolute;
top: 30px; /* margins in pixels */
bottom: 30px; /* could also use a percent */
left: 287px;
right: 30px;
min-height: 18px;
min-width: 865px;
/* box-shadow: 10px 10px 5px #888888; */
/* -moz-border-radius: 8px;
border-radius: 8px; */
-webkit-box-shadow: 0 0 5px 2px #F8F8F8;
-moz-box-shadow: 0 0 5px 2px #F8F8F8;
box-shadow: 0 0 5px 2px #F8F8F8;
background: #ffffff;
border: 1px solid #ababab;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
JavaScript
$(document).on('click', function() {
$('#center_layout div').hide();
var target = '#' + $(this).html();
$(target).show('slow');
});
Try:
$(document).on('click','button', function() {
$('#center_layout div').hide();
var target = '#' + $(this).text();
$(target).show('slow');
});
Updated fiddle here.
Maybe you should try this:
$('button').on('click', function() {
$('#center_layout div').hide();
$('#' + $(this).attr('name')).show('slow');
});
Fiddle: http://jsfiddle.net/guvr4/4/
BTW the id attribute should not be just a numeric value.
If you want to create an event with the buttons only, try this:
$('button').on('click', function() {
$('#center_layout div').hide();
var target = '#' + $(this).html();
$(target).show('slow');
});
The updated fiddle is here, I hope this is what you are looking for.
I would put the reference ID in a data-show="" attribute on the button,
Here's button HTML
<tr><button name="3" data-show="3">3</button></tr>
Here's the js
$(document).on('click', function() {
$('#center_layout div').hide();
var target = '#' + $(this).data('show');
$(target).show('slow');
});
I have a problem when I'm using jQuery's(jQuery1.9.1) animate method.
Here is my code in jsfiddle: http://jsfiddle.net/AySas/3/
I want to make the div wider using the relative percentage, ie:
html:
<div id="h_divCenter">
<div id="h_divIETodos" >
<div id="h_divIIEodoList" class="quadContent">
<ul id="h_ulIETodoList">
<li>itemC 3</li>
</ul>
</div>
</div>
css:
#h_divCenter {
position:absolute;
top:0;
left:20px;
right:100px;
bottom:0;
margin: 5px;
background: #0FF;
}
.quadContent {
position: absolute;
top: 41px;
bottom: 2px;
padding: 1px 1% 2px 1%;
width: 98%;
}
#h_ulIETodoList,#h_ulIUTodoList,#h_ulUETodoList,#h_ulUUTodoList {
width: 100%;
height: 100%;
list-style-type: none;
overflow: auto;
}
#h_divIETodos {
position: absolute;
margin: 2px;
top: 0;
left: 0;
right: 50%;
bottom: 50%;
color: #DE3C3C;
border: 1px solid #DE3C3C;
-webkit-box-shadow: 0px 0px 10px #DE3C3C;
-moz-box-shadow: 0px 0px 10px #DE3C3C;
box-shadow: 0px 0px 10px #DE3C3C;
}
javascript:
$('#btnTest').on("click", function(){
$("#h_divIETodos").animate({
right: "+=20%"
},500);
});
And this div has a absolute position and I have set the top,right,bottom,left properties of css. It works fine in chrome. But in firefox, you can see the right edge of the div cannot move by "20%". Has someone else encountered with the similar problem before? I really appreciate your help. Many thanks!
You can work with calculated pixels instead. Works as expected.
jsFiddle Demo
$('#btnTest').on("click", function(){
$("#h_divIETodos").animate({
right: "+=" + ($(this).parent().width() * 0.2) + "px"
},500);
});
I am trying to get a tooltip for each portion on a location map. Using the code below, I am getting the tool tip for as many portions as I want. But the next step is to give a link in each tooltip and it should open another which has more information.
Please suggest if I can do something in my code. Note: It should not be involve manually adding divs, divs should just be added as my tooltips are added (using variables).
<style>
body {
text-align: center;
font: 13px Arial,Helvetica;
}
/* Relative positioning*/
#wrapper {
position: relative;
margin: 10px auto 20px auto;
border: 1px solid #fafafa;
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
box-shadow: 0 3px 3px rgba(0,0,0,.5);
}
/* Hide the original tooltips contents */
.pin {
display: none;
}
/* Begin styling the tooltips and pins */
.tooltip-up, .tooltip-down {
position: absolute;
background:url(mapimg.png);
width: 26px;
height: 15px;
}
.tooltip-down {
background-position: 0 -52px;
}
.tooltip {
display: none;
width: 180px;
cursor: ;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 12px;
left: 140px;
z-index: 999;
margin-left: -125px;
padding:15px;
color: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 3px 0 rgba(0,0,0,.7);
-webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7);
box-shadow: 0 3px 0 rgba(0,0,0,.7);
background: #fff1d3;
background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90));
background: -webkit-linear-gradient(top, #fff1d3, #ffdb90);
background: -moz-linear-gradient(top, #fff1d3, #ffdb90);
background: -ms-linear-gradient(top, #fff1d3, #ffdb90);
background: -o-linear-gradient(top, #fff1d3, #ffdb90);
background: linear-gradient(top, #fff1d3, #ffdb90);
}
.tooltip::after {
content: '';
position: absolute;
top: -10px;
left: 50%;/*
margin-left: -90px;
border-bottom: 10px solid #fff1d3;
border-left: 10px solid transparent;
border-right :10px solid transparent;*/
}
.tooltip-down .tooltip {
bottom: 12px;
top: auto;
}
.tooltip-down .tooltip::after {
bottom: -10px;
top: auto;
border-bottom: 0;
border-top: 10px solid #ffdb90;
}
.tooltip h2 {
font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
margin: 0 0 10px;
}
.tooltip ul {
margin: 0;
padding: 0;
list-style: none;
}
#pop1, #pop2 {
display:none;
width: 180px;
cursor: ;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 12px;
left: 140px;
z-index: 999;
margin-left: -125px;
padding:15px;
color: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #fff1d3;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function(){
// set the wrapper width and height to match the img size
$('#wrapper').css({'width':$('#wrapper img').width(),
'height':$('#wrapper img').height()
})
//tooltip direction
var tooltipDirection;
for (i=0; i<$(".pin").length; i++)
{
// set tooltip direction type - up or down
if ($(".pin").eq(i).hasClass('pin-down')) {
tooltipDirection = 'tooltip-down';
}
else {
tooltipDirection = 'tooltip-up';
}
// append the tooltip
$("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
<div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\
</div>");
}
// show/hide the tooltip
$('.tooltip-up, .tooltip-down').mouseenter(function(){
$(this).children('.tooltip').fadeIn(100);
}).mouseleave(function(){
$(this).children('.tooltip').fadeOut(100);
})
});
</script>
<div id="wrapper">
<img width="920" height="450" src="image.jpg" alt="World continents">
<div class="pin pin-down" data-xpos="280" data-ypos="110">
tooltip 1 <br>
<b>Area:</b> 24 sft<br>
<b>block:</b> 2 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin" data-xpos="280" data-ypos="135">
<b>Area 2</b><br/>
Area: 17 sft<br/>
Population: 382,000,000
</div>
<div class="pin pin-down" data-xpos="280" data-ypos="158">
<b>Area 3</b><br/>
Area: 10<br/>
<b>Population:</b> 731,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin" data-xpos="280" data-ypos="180">
<strong>Area 4</strong><br/>
Area: 30<br/>
Population: 1,022,011,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="280" data-ypos="206">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="750" data-ypos="310">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
<div class="pin pin-down" data-xpos="850" data-ypos="310">
<strong> tooltip 5 </strong><br/>
Area : 43,820,000<br/>
Population: 3,879,000,000 Click here for more info(need to give link here for new pop div..for all other tooltips)
</div>
</div>
This will add a div after an anchor once the anchor is clicked, if the anchor is clicked again the div will be removed:
$('a').click(function()
{
var currTag = $(this);
if (currTag.next('div').attr('name'))
{
currTag.next('div').remove();
}
else
{
currTag.after("<div name='details'>Here's more information</div>");
}
});