I was just playing around with this plugin called jBox.js and came across a few new options. It's a pretty customizeable plugin. The option I am talking about is adjustDistance.
The documentation says, you can pass in an integer or object, like so:
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 15,
left : 15,
right : 50
}
});
});
I did that , but I don't see any difference in the way my tooltip is rendered, made a FIDDLE HERE.
The documentation describes this option as follows:
Distance to the window edge when adjusting should start. Use an object
to set different values, e.g. {top: 50, right: 20, bottom: 5, left:
20}
But I don't quite understand its usage. Can anybody explain?
If we give adjustDistance say 10, the tooltip will try to adjust(reposition) itself when any of window's edge is within 10px distance of the tooltip. You can give custom values for different edges of window as well.
This examples will make it clear:
Example 1:
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 15,
left : 15,
right : 50
}
});
});
Example 2 (changing value for adjustDistance bottom):
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 150,
left : 15,
right : 50
}
});
});
For both of them, try clicking on button to open tooltip and then resize the window shrinking from bottom such that tooltip needs to readjust.
Related
I have HichChart with subTitle. I want to style it, that one part of this text was on left and another on right side.
I've tried to do this using inline css and turn on html for subTitle.
Sample what I have
subtitle: {
text: '<b>This is</b> <span style="float : right !important;text-align: right !important;">the subtitle</span>',
floating: true,
align: 'left',
x: 100,
y: 60,
useHTML : true
}
But this doesn't help.
It is not optimal , but you can overwrite the css style like this fiddle
#container .highcharts-container .highcharts-subtitle {
width:calc(100% + -120px); /*customize this to your needs*/
}
Hope it helps
I added a right position to the subtitle so that it has a full width, otherwise your float does nothing, the only thing i don't understand is why i have to add the left position with the same value as x so that the "subtitle text" doesn't end up outside the chart.
this what i added
style: { "right":"10px", "left": "100px" }
if you want more margin to the right, just increase the right property
full fiddle here http://jsfiddle.net/h70sj57r/4/
and this is how it look like if i don't add the left position(again i have no ideea what calculations it does so that you need to add this) http://jsfiddle.net/h70sj57r/5/
I have draggable objects inside of a div. I'm trying to figure out how to allow a user to click a button and move the objects to an exact point on the screen (Even if they've dragged the object to a new location)
Any way to animate an object to the top of the screen regardless of where the object starts? (See working JSFiddle) Thanks!
I've been trying the code below but I cannot get it to work correctly.
var json = [
{'x' : '200' , 'y' : '200'},
];
function initPage() {
$.each(json, function() {
$("#point").animate({
left: this.x,
top: this.y
},
"linear");
});
}
https://jsfiddle.net/unppstma/15/
Add another function to the onclick event on your button, with something like this:
function moveToTop(){
$('#draggable1, #draggable2').animate({
"position": "absolute",
"top" : "0"
})
}
I have a number of divs positioned absolutely on a background image.
On the page will also be some buttons. When those are clicked different variables will trigger, shrinking and growing these divs.
Here is the javascript I'm currently using...
$(document).ready(function() {
var title = 1;
$(".button1").click(function() {
title = 1;
});
$(".button2").click(function() {
title = 2;
});
$(document).click(function(e) {
console.log(title);
if (title==1){
$('.london').animate({ backgroundColor:'green', width:'50', height:'50' }, 300);
} else if (title==2){
$('.london').animate({ backgroundColor:'red', width:'40', height:'40' }, 300);
}
});
});
As they are absolutely positioned they are scaled from the corner they are positioned with.
see an example here.
What I need to do is shrink and grow these divs from their center point. The only solutions I've seen seem overly complicated.
I guess I could add a negative margin of half the divs width in the jQuery to counteract this? I'll try that if there are no better solutions
Thanks for any help.
bboybeatle, your "negative margin of half the divs width" idea is spot on, and not at all difficult to implement. Just include the required marginTop and marginLeft settings in the two animations.
$(function() {
var cssMap1a = {
backgroundColor: 'green'
};
var cssMap1b = {
width: 50,
height: 50,
marginTop: -10,
marginLeft: -10
};
var cssMap2a = {
backgroundColor: 'red'
};
var cssMap2b = {
width: 30,
height: 30,
marginTop: 0,
marginLeft: 0
};
$(".button1").click(function () {
$('.london').css(cssMap1a).animate(cssMap1b, 300);
});
$(".button2").click(function () {
$('.london').css(cssMap2a).animate(cssMap2b, 300);
});
});
And here's a fiddle. Fiddles are not difficult to set up. Hopefully this will help you next time you need to ask a question here.
As you will see :
"London" and the buttons are moved to a better position for demo purposes
The colour changes are separated out as separate css maps. They didn't work in the fiddle when included in the animation maps. jQuery needs a plugin to animate colours.
Thanks very much for that #Roamer-1888, I actually used some variables to make it slightly easier to apply the margin. I will remember that technique of putting multiple css properties in a variable..
Heres a snippet of my code I ended up using...
londonMargin = london/2 - london;
$('.london').animate({ width:london, height:london, marginLeft:londonMargin, marginBottom:londonMargin }, 300);
Just for fun I put together a little FIDDLE that has a function to which you pass an element name, the x and y coordinates of the center, and it will position the element in the larger element.
JS
var myelement = $('.boxdiv');
var myelement2 = $('.boxdiv2');
putmycenter( myelement, 90, 90 );
putmycenter( myelement2, 160, 280 );
function putmycenter (element, x, y)
{
var boxdivxcentre = element.width()/2;
var boxdivycentre = element.height()/2;
var boxdivposx = (x - boxdivxcentre);
var boxdivposy = (y - boxdivycentre);
element.css({
"top" : boxdivposy + 'px',
"left" : boxdivposx + 'px'
});
}
I'm new to Javascript/Jquery so go easy!
I've created what will be an HTML facebook tab, with some images and applied a hover effect so that they expand as the mouse hovers over. This seems to work fine in Chrome but in Firefox and IE it's glitchy and the animation seems to run repeatedly unless the cursor is dead centre over the image.
I've tried adding "stop()" in there but either it doesn't work or I'm putting it in the wrong place (probably the latter). If anyone has any suggestions I would be very grateful!
<script>
$(document).ready(function() {
$('.circle').hover(function() {
$(this).animate({
'position' : 'relative',
'width' : 120,
'height' : 120,
'border-radius' : 60,
'margin' : 20,
'top' : 0,
});
}, function() {
$(this).animate({
'position' : 'relative',
'width' : 100,
'height' : 100,
'margin' : 25,
'top' : 10,
});
});
});
</script>
Full example available here:
http://careers.dept.shef.ac.uk/Facebook/FacebookTab.html
Thanks in advance.
You can use e.stoppropagation() function to stop bubbling.
Eg.stoppropagation
<div id="noStop">
<span>This one doesn't stop bubbling</span>
<ul></ul>
</div>
<div id="stop">
<span>This one stops bubbling</span>
<ul></ul>
</div>
I have a site that displays items, 12 items per page and I can paginate through the pages using jquery. On the same page I implemented a the tooltip feature with qTip.
Hovering over the items some information appear. That works until I use the paginator to go to the next page.
The pagination reloads the content. But it has the same structure as when I refresh the page.
Here's my code:
$(document).ready(function() {
$(".cornerize").corner("5px");
$('a#verd').live('click', exSite);
$("a.tp").live('click', thumpsUp);
$("a#next").click(getProgramms);
$("a#previous").click(getProgramms);
$("a#page").each(function() {
$(this).click(getProgramms);
});
$('a.ppname[rel]').each(function(){
$(this).qtip( {
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
}
});
});
});
The html/dom does not change:
<a class="ppname" rel="link" href="#">...</a>
qTip takes from every a.ppname the rel value end loads the content.
This is happening because new elements are not automatically "qTiped" when they are loaded after page load. For regular events, you would have to use .live() instead of .bind().
This has been solved before (judging from the comment): Problem with qTip - Tips not showing because elements load after the script.
The correct way to do it is (from that answer):
$('a.ppname[rel]').live('mouseover', function() {
var target = $(this);
if (target.data('qtip')) { return false; }
target.qtip({
overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
show: {
ready: true // Needed to make it show on first mouseover event
},
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
});
target.trigger('mouseover');
});