I have the following code which works fine in all browsers including Firefox:
var top;
var imageHeight;
function upFunction() {
top = parseInt($(".feature img").css("top"));
imageHeight = $(".feature img").height();
if (top > (imageHeight - 335) * -1) {
$(".feature img").css("top", top - 1 + "px");
$("#topPos").val(top - 1);
}
};
$(document).ready(function() {
$("a#up").mousedown( function(e) {
e.preventDefault();
upFunction();
timeoutId = setInterval( upFunction, 100 );
}).bind('mouseup mouseleave', function() {
clearInterval(timeoutId);
});
});
However there's obviously something else in my page which is causing this not to work in firefox and I can't work it out.
Is there any way I can fond out what's causing it to break without removing everything from the page to find out what it is?
EDIT:
OK, with the help of Jai's answer, it appears that a small tweak to my code makes it work in Firefox. Here's what I did:
function upFunction() {
var top = parseInt($(".feature img").css("top"));
var imageHeight = $(".feature img").height();
if (top > (imageHeight - 335) * -1) {
$(".feature img").css("top", top - 1 + "px");
$("#topPos").val(top - 1);
}
};
and remove the 2 variables from the global scope. Not sure why it made a different but it did.
Try these fixed variable declarations:
function upFunction() {
var img = $(".feature img"),
top = parseInt(img.css("top"));
if (top > (335 - img.height())) {
img.css("top", top - 1 + "px");
$("#topPos").val(top - 1);
}
};
$(document).ready(function() {
var timeoutId;
$("a#up").mousedown( function(e) {
e.preventDefault();
upFunction();
timeoutId = setInterval( upFunction, 100 );
}).bind('mouseup mouseleave', function() {
clearInterval(timeoutId);
});
});
On your actual question: Debug your script via inspecting it in the developer tools (Firebug).
You should try this one:
function upFunction(top, imageHeight) {
if (top > (imageHeight - 335) * -1) {
$(".feature img").css("top", top - 1 + "px");
$("#topPos").val(top - 1);
}
}
$(document).ready(function() {
var top = parseInt($(".feature img").css("top"));
var imageHeight = $(".feature img").height();
$("a#up").mousedown( function(e) {
e.preventDefault();
upFunction(top, imageHeight);
timeoutId = setInterval(function(){
upFunction(top, imageHeight);
}, 100);
}).bind('mouseup mouseleave', function() {
clearInterval(timeoutId);
});
});
Don't use top as a var name in global scope, it's already used.
Try typing console.log(top) or alert(window.top) into your browser's console for reference.
Related
I am creating a splitscrolling website and it's working great. But i have one problem, when the user stops scrolling it fires a function called alignWhenIdle and what this does is align the columns so they become "one".
Now that is working nicely but i can't seem to target a specific part of the column that aligns. let's say when the number 2 column aligns ( see image ) i want to be able to fire an animation. I tried using a callback but that fires a function every time the columns are aligned.
This is my JS:
(function ($) {
var top = 0;
var contentHeight, contents, totalHeight;
var locked = false;
var timeout;
var align = function () {
var pos = (top + $(window).scrollTop());
var snapUp = 0 - (pos % contentHeight) < (contentHeight / 2);
var multiplier = snapUp
? Math.ceil(pos / contentHeight)
: Math.floor(pos / contentHeight);
var newTop = contentHeight * multiplier;
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200);
locked = false;
};
var reset = function () {
contentHeight = $('.right').height();
contents = $('.right > .content').length;
totalHeight = contentHeight * (contents - 1);
top = (0 - totalHeight);
};
var scrollRight = function () {
$('.right').css('top', (top + $(window).scrollTop()) + 'px');
};
var alignWhenIdle = function (delay) {
clearTimeout(timeout);
timeout = setTimeout(align, delay);
};
$(document).on('ready', function () {
reset();
scrollRight();
});
$(window).on('scroll', function () {
locked = true;
scrollRight();
});
$(window).on('mouseup', function (e) {
if (locked) {
align();
}
});
$(window).resize(function () {
locked = true;
reset();
scrollRight();
alignWhenIdle(300);
});
$(window).on('mousewheel', function (e) {
alignWhenIdle(300);
});
$(window).on("keyup", function (e) {
alignWhenIdle(300);
});
})(jQuery);
http://jsfiddle.net/ev3B8/
Any help is much appreciated,
Cheers
See http://jsfiddle.net/5T9Y8/
Scroll till the column 2 and see result...
In the method align I've added a callback:
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
$(".animate").animate({ marginLeft: "200px" },300);
});
Works well, did you need exactly that?
EDIT
You should just check for some condition.
E.g. based on this solution Check if element is visible after scrolling you can build this:
$('html, body').animate({ scrollTop: newTop + totalHeight }, 200, function(){
if (isScrolledIntoView(".animate")) $(".animate").animate({ marginLeft: "200px" },300);
});
See updated solution here http://jsfiddle.net/5T9Y8/1/
This is only one way, I'm really sure there is a way to do it even better. E.g. you can calculate the current elements which are shown and then just find the things only inside of them.
I tried using a callback but that fires a function every time the columns are aligned.
Use one method for functioning only once instead of on.
I am making a simple carousel image gallery. Currently I have two images and I would like the gallery to loop back to the first image after the last and I cannot figure out how to get this functionality working plus my previous and next button have stopped working for some reason. My jq/js skills are lacking and would appreciate any help to get this working. Here is my jsfiddle of my code [1]: http://jsfiddle.net/jsavage/kGAxa/39/
$(document).ready(function () {
if (jQuery("#gallery").length) {
// declare variables
var totalImages = jQuery("#gallery > li").length,
imageWidth = jQuery("#gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery("#gallery-wrapper").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery("#gallery").width(totalWidth);
jQuery("#gallery-prev").click(function () {
if (jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")) {
jQuery("#gallery").animate({
left: "+=" + imageWidth + "px"
});
}
return false;
});
jQuery("#gallery-next").click(function () {
if (jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")) {
jQuery("#gallery").animate({
left: "-=" + imageWidth + "px"
});
}
return false;
});
}
});
Tested your fiddle, javascript works well, only css is missing the following attributes:
#gallery-wrapper {
position:relative;
}
#gallery {
position:absolute;
}
And the code also needs to be executed within
$(window).load();
instead of $(document).ready(); event handler to work correctly.
http://jsfiddle.net/kGAxa/42/
i would like to know how i can manipulate the inview.js script that the moment when its fired is not at first pixels in viewport, and the last when the element is going out but rather for example 50pixels later or earlier.
the script of inview.js is
(function ($) {
function getViewportHeight() {
var height = window.innerHeight; // Safari, Opera
var mode = document.compatMode;
if ( (mode || !$.support.boxModel) ) { // IE, Gecko
height = (mode == 'CSS1Compat') ?
document.documentElement.clientHeight : // Standards
document.body.clientHeight; // Quirks
}
return height;
}
$(window).scroll(function () {
var vpH = getViewportHeight(),
scrolltop = (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop),
elems = [];
// naughty, but this is how it knows which elements to check for
$.each($.cache, function () {
if (this.events && this.events.inview) {
elems.push(this.handle.elem);
}
});
if (elems.length) {
$(elems).each(function () {
var $el = $(this),
top = $el.offset().top,
height = $el.height(),
inview = $el.data('inview') || false;
if (scrolltop > (top + height) || scrolltop + vpH < top) {
if (inview) {
$el.data('inview', false);
$el.trigger('inview', [ false ]);
}
} else if (scrolltop < (top + height)) {
if (!inview) {
$el.data('inview', true);
$el.trigger('inview', [ true ]);
}
}
});
}
});
// kick the event to pick up any elements already in view.
// note however, this only works if the plugin is included after the elements are bound to 'inview'
$(function () {
$(window).scroll();
});
})(jQuery);
all credits go to here
my attemp was to add a value to offset top top = $el.offset().top + 50, which works! but how can i change the value for the bottom up?
thanks ted
I'd recommend using http://imakewebthings.com/jquery-waypoints/
Which you can call like so to achieve your desired effect at 10% from the bottom:
$('.flyIn').waypoint(function() {
$(this).removeClass('hidden');
$(this).addClass('animated fadeInUp');
}, { offset: '90%' });
function run_battle() {
if(battlenow.length>0) {
var div = document.getElementById('show_battle');
$("#show_battle").animate({ scrollTop: $("#show_battle").prop("scrollHeight") - $('#show_battle').height() }, 100);
var attempt = battlenow.shift();
div.innerHTML += attempt;
$("#show_battle").animate({ scrollTop: $("#show_battle").prop("scrollHeight") - $('#show_battle').height() }, 100);
setTimeout("run_battle()",800);
}
}
This is what I have so far. It works great in firefox. Yet in Chrome, it doesn't work at all. I'm using Jquery 1.7.1, So that's why I'm using .prop instead of .attr.
The battlenow array is like this.
battlenow.push('Alan hit Joe<br><br>');
battlenow.push('Joe fainted<br><br>Battle Over');
If that helps any.
Thank you.
Here's the code that I use that works in all browsers to scroll to a particular element. This code scrolls the minimal amount to get the element on screen, you might want something different. Note the check for webkit browsers:
(function($) {
$.fn.scrollMinimal = function() {
var cTop = this.offset().top;
var cHeight = this.outerHeight(true);
var windowTop = $(window).scrollTop();
var visibleHeight = $(window).height();
if (cTop < windowTop) {
$(jQuery.browser.webkit ? "body": "html")
.animate({'scrollTop': cTop}, 'slow', 'swing');
} else if (cTop + cHeight > windowTop + visibleHeight) {
$(jQuery.browser.webkit ? "body": "html")
.animate({'scrollTop': cTop - visibleHeight + cHeight}, 'slow', 'swing');
}
};
}(jQuery));
Called like:
$('#actions').scrollMinimal();
I am having below issue when trying to brows the site through navigation,
http://nickylurie.com.au/Temp/index.php
as you can see left hand site image some time load some time aren't,
i am you using below code to change the image when going through to different page,
var pic = new Image();
pic.src = "images/homeLargeImg.jpg";
and below is the my backend code.
var RHigh=$('#RightPane').height()
var windHigh=$(window).height()
$(pic).hide().load(function()
{
//debugger;
$(this).fadeIn();
var marginT=(windHigh/100*5)
var imgH = (marginT+windHigh)
$("#LeftPaneImage").html("<img id='triquibackimg' src='"+pic.src+"' style='"+windHigh+"'/>")
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width()+10);
resize()
})
$(window).bind('resize', function()
{
resize()
});
function resize()
{
RHigh=$('#RightPane').height()
windHigh=$(window).height()
if( RHigh < windHigh)
{
$("#triquibackimg").css("height",$(window).height());
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width());
//----------------Right Pane vAlign--------------
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", $("#LeftPane").width());
$(this).css("position", "absolute");
});
};
})(jQuery);
$(document).ready(function() {
$("#RightPane").vAlign();
//$("#RightPane").hAlign();
});
}
else
{
$("#triquibackimg").css("height",(RHigh+150));
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width());
// if ($(window).height()>800){
// $("#RightPane").css("position",'relative');
// }
// else{$("#RightPane").css("margin-top",60)}
}
}
can some one please advice about this?
Thanks
Offtopic: I wanted to comment on this questions, because I don't have the answer (yet), its lame that I must have a repetation of 50 to comment..
Ontopic:
What are you trying to achieve and what is the problem?
When I try to view your website, all the large images on the left are loading (mac, chrome), I checked all pages..
They do load very slow..
Why do you want to insert the image by javascript and not simply by a img tag?