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>
Related
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.
I want to run progressbar animation with scroll.
But it runs several times instead of once
Excuse me if it's not correct.
Please help me.
My code is:
<div class="demo-5" data-percent="80">
<script>
$(document).ready(function(){
$(document).scroll(function(){
$('.demo-5').percentcircle({
animate : true,
diameter : 100,
guage: 3,
coverBg:'#fff',
bgColor: '#efefef',
fillColor: '#8BC163',
percentSize: '48px',
percentWeight: '50px'
});
});
});
</script>
progressbar
</div>
A scroll event triggered every time a user scrolls to a different place in the element. In practice, it'll be triggered once for a smooth scrolling action, however if the scroll is 'jerky' or several small scrolls are made, this will trigger a number of times.
Check this,
I haven't tested yet, but I hope it works,
$(document).ready(function(){
$(document).scroll(function(){
$('.demo-5').fadeIn(200);
$('.demo-5').percentcircle({
animate : true,
diameter : 100,
guage: 3,
coverBg:'#fff',
bgColor: '#efefef',
fillColor: '#8BC163',
percentSize: '48px',
percentWeight: '50px'
});
setTimeout(function()
{
$('.demo-5').fadeOut(1000);
}, 500);
});
});
This code is suppose to center the element, it works perfectly on resize but not when DOM is first ready. I have to resize the window to get desired results. I can't figure out what was causing this...It is the same function.
$(document).ready(center);
$(window).on('resize', center);
function center(){
$('#vid').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : -$('#vid').width()/2,
'margin-top' : -$('#vid').height()/2
});
}
If you test this in Firefox, whether by scrolling or clicking the text box, everything works fine, but in the other browsers I've listed the text box jumps to the bottom before the animation starts.
Not sure what's causing this to happen or how to fix it, any ideas?
http://coreytegeler.com/gl/
function stickyStuff(){
var half_height = $(window).height()/2+8;
$('#check1').sticky({
'offset' : half_height,
'mode' : 'animate',
'speed' : 500,
'onStick' : function() {
$('#front-title-wrap').animate({ 'top': '50px' });
}
});
$('#check2').sticky({
'offset' : 55,
'onStick' : function() {
$('#front-nav-wrapper').css({'position' : 'fixed','top': '55px', 'opacity' : '1' });
}
});
Not sure it causes the problem, you are including the same sticky js file twice. normal version and min version.
Remove one and test again?
Your script
<script type="text/javascript" language="javascript" src="http://coreytegeler.com/gl/js/jquery.sticky.js"></script>
<script type="text/javascript" language="javascript" src="http://coreytegeler.com/gl/js/jquery.sticky.min.js"></script>
I use fancybox for my website to enlarge my pictures. What I want is to make a sort of zoom function.
When the fancybox is open and I click on the image in the fancybox I want to increase the width of the fancybox
I tried something like
Markup:
<div style="display:none;">
<div id="view_invoice" style="height:950px; width:663px;">
<div class="process"><img src="../../images/progress.gif" /></div>
<div id="showInvoice" style="position:absolute;"></div>
</div></div><a id="get_invoice" href="#view_invoice" style="display:none;">link</a>
jQuery:
$('.table_content_results table').click(function()
{
$('#showInvoice').html('');
var invoiceDir = $(this).attr('dir');
var invoiceId = $(this).attr('id');
$.ajax({
type: "POST",
url: "includes/get_pdf.php",
data: "INVOICE_ID="+invoiceDir,
complete: function(data)
{
$('#showInvoice').html(data.responseText);
}
});
$("#get_invoice").fancybox(
{
'overlayOpacity' : 0.6,
'overlayColor' : '#000',
'titlePosition' : 'inside',
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'easingIn' : 'swing',
'padding' : 10,
'autoDimensions' : true
}
).trigger('click');
});
$("#showInvoice").click(function()
{
$("#view_invoice").animate({ width: 1000 });
$("#showInvoice").width(1000);
$("#showInvoice").children('img').animate({ width: 1000 });
$('#fancybox-wrap').width(1000);
$.fancybox.center();
});
This works but not properly. The size of the fancybox increase but the position is not at the center of my screen so i tried to fix that with $.fancybox.center(); but that didnt work.
The second thing is that the div where the image is in dont increase width so I get some scrollbars. I tried to fix that with $("#showInvoice").width(1000); but I still get the scrollbars instead of a div with a width of 1000px.
So I hope that someone can help me with this.
Thanks in advance!
You can try resizing the window after all.
$(window).resize();