I have several images that I applied jQuery tooltip effect on..it works, but the problem is that irrespective of the image i click the tooltip only displays at the top of the page.
Is there a way I can make the tooltip appear beside each image that is clicked.
The jQuery I have so far looks like this :
$('.image').hover(function () {
$('.tooltip').fadeIn(1000);
}, function () {
$('.tooltip').fadeOut(1000);
});
$('.tooltip').css({
top: e.pageY,
left: e.pageX
})
CSS
.tooltip {
display: none;
height: auto;
position: absolute;
background-color: #D1C585;
color: black;
border: 2px solid rgba(128, 0, 32, 0.3);
padding: 5px;
border-radius: 5px;
font-family: actor;
}
HTML
<img src="image.jpg" class="image">
It needs to have position: absolute and its parent has to be position: relative. Inside the hover function do:
$('.tooltip').css({
top: e.pageY,
left: e.pageX
})
It all depends on where the location of the tooltip node is located. However, you can get the fixed position of the image by grabbing and adding all the offsetLeft/offsetTop of all the element and it's parents. For example.
$('.image').hover(function() {
var e = this,top=0,left=0;
while(e){
top+=e.offsetTop;
left+=e.offsetLeft;
e=$(e).parent();
}
$(this).css({position:'fixed',top:top+"px",left:left:left+"px"});
$('.tooltip').fadeIn(1000);
}, function() {
$('.tooltip').fadeOut(1000);
});
I did not test this code. However, I hope this points you in the right direction. You can then use the size of the image(offsetHeight and offsetWidth) to position the tooltip around the image.
Here is an example using jquery ui, see jquery ui tooltip for documentation
HTML
<img src="http://img262.imageshack.us/img262/68/sahara4rs.jpg" title="tyre">
Javascript
$(document).tooltip({
track: true,
show: {
effect: "fade",
delay: 1000
},
hide: {
effect: "explode",
delay: 250
}
});
On jsfiddle
Related
I'm trying to highlight the background of the slider using the low track (left background of slider) and right track (right side of slider) using bootstrap-slider.
I would like my slider to only reveal a yellow background when the slider moves to the left or right. Similar to how this slider example reveals a black background:
https://jsfiddle.net/leongersen/9hyfv0bw/11/
So far the code below is what I have:
https://jsfiddle.net/jimmyt1001/96zj2wnf/9/
#slider12a .slider-track-high, #slider12c .slider-track-high {
background: green;
}
#slider12c .slider-selection {
background: yellow;
}
<input id="ex12c" type="text"/><br/>
$("#ex12c").slider({
id: "slider12c",
min: 0,
max: 40,
range: false,
value: 20 });
Let's do more or less like the example you posted.
You can create a div (let's call its class middleTrack) with two elements (.left and .right) absolutely positioned inside it that will have the yellow background.
Then, position them and create a function called using the method .on(slide, middleTrackFunction) that will apply a calculated width relative to the tracker situation. Run it once to apply from the beginning. Also, hide .slider-selection element somehow to prevent it from invading the new trackers.
jQuery:
$("#ex12c").slider({
id: "slider12c",
min: 0,
max: 40,
range: false,
alue: 20
}).on('slide', middleTrackFunction);
$(".slider-track").prepend("<div class='middleTrack'><div class='left'></div><div class='right'></div>");
function middleTrackFunction() { // call whenever slide happens
var halfWidth = $('.middleTrack').width() / 2;
var leftWidth = $('.slider-selection').width();
var rightWidth = $('.slider-track-high').width();
$('.middleTrack .right').width(leftWidth - halfWidth);
$('.middleTrack .left').width(rightWidth - halfWidth);
}
middleTrackFunction(); // run at least once
CSS:
#slider12a .slider-track-high, #slider12c .slider-track-high {
background: transparent;
}
.middleTrack div {
position: absolute;
height: 100%;
top: 0;
background: yellow;
}
.middleTrack .left {
right: 50%;
}
.middleTrack .right {
left: 50%;
}
.slider-selection {
z-index: -1;
}
I am trying to make a 'top bar' extend to reveal a series of links.
To do this, I have chosen jQuery and some research reveals I should toggle this.
Following many failed events at manipulating the class of the 'top bar', I have tried a different approach - see: http://jsfiddle.net/SQHQ2/2408/
The HTML:
<div id='topbar'>toggle me</div>
Toggle
The CSS:
#topbar {
background: orange;
color: white;
height: 60px;
text-align:center;
}
The jQuery:
$(".menu").click(function() {
$("#topbar").toggle(function() {
$("#topbar").animate({
height: 165
}, 200);
}, function() {
$("#topbar").animate({
height: 60
}, 200);
});
});
When I try this code, it simply hides the top bar in an animated manner.
Could you help me to achieve a solution that, on the click of a link with class '.menu', will extend the 'top bar' DIV from a height of 60px to a height of 160px, to reveal the hidden links?
I welcome solutions achieved by alternative means, so long as they work :)
Best wishes for the new year and TIA.
Another approach to consider is to keep all your CSS and JavaScript separate. Here's an example of what I mean:
HTML
<div id='topbar'>toggle me</div>
Toggle
CSS
#topbar {
background: orange;
color: white;
text-align:center;
}
.short {
height: 60px;
}
.tall {
height: 160px;
}
JavaScript
$(".menu").click(function() {
$('#topbar').toggleClass('short', 'tall');
});
The idea is to keep your styles in your CSS and then toggle the classes you want applied.
.toggle
is a handler in jQuery, that toggles on click (that is why your bar toggles when you click it)
$(".menu").toggle(function() {
$("#topbar").animate({
height: 165
}, 200);
}, function() {
$("#topbar").animate({
height: 60
}, 200);
});
should work just fine.
$(".menu").toggle(function() {
$("#topbar").animate({
height: 165
}, 200);
}, function() {
$("#topbar").animate({
height: 60
}, 200);
});
Maybe you can add an attribute to your a tag to keep the state (expanded/not-expanded). And instead of toggle just use it to animate your top bar
HTML
<div id='topbar'>toggle me</div>
<a expanded="0" href="javascript:void(0);" class="menu">Toggle</a>
JS
$(".menu").click(function() {
var thisObj = this;
var expanded = parseInt($(thisObj).attr("expanded"));
if (expanded){
$("#topbar").animate({height:60},200, function(){
$(thisObj).attr("expanded", "0");
});
} else {
$("#topbar").animate({height:160},200, function(){
$(thisObj).attr("expanded", "1");
});
}
});
I've an image that will be moving up and down in an animation loop and it’s shadow element will shrink and enlarge accordingly. This will create an effect like the object is suspending in air. I’d attached a reference image in the following link -
http://s28.postimg.org/k3mioxzel/sample_image.jpg
I’d made the image moving up and down through jQuery with the following code and its working fine.
$(document).ready(function () {
$('#myImg').load(function(){
setInterval(function(){
$('#myImg').animate({'marginTop':"-=35px"},"slow");
$('#myImg').animate({'marginTop':"+=35px"},"slow");
},1000/30);
});
});
But I can’t enlarge or shrink the shadow element along with the image movement. I’d created the shadow element in CSS code. Please help me in this.
#oval {
width: 226px;
height: 50px;
background: #d8b54c;
top: 50%;
left: 50%;
position: absolute;
margin-top: 150px;
margin-left: -113px;
-moz-border-radius: 226px / 50px;
-webkit-border-radius: 226px / 50px;
border-radius: 226px / 50px; }
This will do the trick, modify the width/height/marginTop and marginBottom increments/decrements as needed: (Working Example)
$(document).ready(function () {
$('#myImg').load(function(){
setInterval(function(){
$('#myImg').animate({'marginTop':"-=35px"},"slow");
$('#myImg').animate({'marginTop':"+=35px"},"slow");
},1000/30);
setInterval(function(){
$('#oval').animate({'width': "-=10px",'height': "-=10px",
'marginTop': "+=5px", 'marginLeft': "+=5px"
}, "slow");
$('#oval').animate({'width': "+=10px", 'height': "+=10px",
'marginLeft': "-=5px",'marginTop': "-=5px"
}, "slow");
}, 1000 / 30);
});
i had added a drag and move div to my website, i am using common header for each pages.
my drag and move div code as follows:
Script:
<script type="text/javascript">
$(function() {
$( "#draggable" ).draggable();
});
</script>
Div:
<div class="student_avatar_header" id="draggable" title="Drag and Move...">
Some texts...
</div>
CSS:
.student_avatar_header {
width: 100px;
height: 100px;
position: absolute;
left: 10px;
top: 20px;
border-radius: 250px;
z-index: 9998;
box-shadow: 2px 2px 12px #008abc;
cursor: move;
}
this drag and move function working fine, what my question is i had added this draggable Div to my header so it will appear even visit any pages my website, i just want to set a cookie function or what possible for remember last position where it dragged. for example now i am here home page, i just drag my div to page bottom, but when i go to about page this div appear not previous position, its appear default position. i need it display previous position even i visit any pages my website,
NOTE: my website have above 35 pages.
any idea.?
thanks...
Have a look on the following code :
$("#draggable").draggable({
stop: function(event, ui) {
$.cookie("elementIDCookie", ui.position);
}
});
To re-position the element when the user returns:
$("#draggable").css( { "left" : $.cookie("elementIDCookie").left, "top" : $.cookie("elementIDCookie").top });
How to make custom jquery tooltip appear as multiple line that adjusts to fixed width? So it not go in one long line (if 'title' attribute is very long). Because Now if I write long 'title' attribute, tooltip is displayed on one long line and it does not matter what width is set to tooltip element.
My code to get better understanding of what I'm asking:
http://jsfiddle.net/8XttH/
jquery code:
$(document).ready(function() {
$("body").append("<div class='tip'></div>");
$("p[title]").each(function() {
$(this).hover(function(e) {
$().mousemove(function(e) {
var tipY = e.pageY + 16;
var tipX = e.pageX + 16;
$(".tip").css({'top': tipY, 'left': tipX});
});
$(".tip")
.html($(this).attr('title'))
.stop(true,true)
.fadeIn("fast");
$(this).removeAttr('title');
}, function() {
$(".tip")
.stop(true,true)
.fadeOut("fast");
$(this).attr('title', $(".tip").html());
});
});
});
Set a max-width on the tool tip box?
max-width: 100px;
Also set the height to auto so it increases as needed
height: auto;
The text will then wrap to the next line.
See this fiddle
Use this css
div.tip{
position: absolute;
top: 100px;
left: 100px;
width:100px;
border: 2px solid #FF0000;
background-color: #FF9999;
display: none;
padding: 3px;
}
Fiddle: http://jsfiddle.net/8XttH/2/