So I've created a dynamic scroll that worked in jsfiddle --> http://jsfiddle.net/9zXL5/39/
var movelist = document.getElementById('movelist');
function yHandler() {
var contentHeight = movelist.scrollHeight;
var yOffset = movelist.clientHeight;
var y = yOffset + movelist.scrollTop;
if (y >= contentHeight) {
movelist.innerHTML += '<div class ="newData">yooooo</div>';
}
}
movelist.onscroll = yHandler;
but it had uncaught errors such as yHandler not being defined. So I fixed the errors by placing var movielist=.. and movielist.onscroll = yHandler; inside my $(document).ready. The errors are gone, but now content won't load when my scroll hits the bottom as seen --> http://jsfiddle.net/9zXL5/40/
$(document).ready(function() {
var movelist = document.getElementById('movelist');
movelist.onscroll = yHandler;
});
function yHandler (){
var contentHeight = movelist.scrollHeight;
var yOffset = movelist.clientHeight;
var y = yOffset + movelist.scrollTop;
if(y >= contentHeight){
movelist.innerHTML += '<div class ="newData">hey look at me</div>';
});
}
}
and I cannot figure out why. I would really appreciate it if someone explained to me why this is so.
You have several errors in your fiddle:
You where not loading jQuery
You had several syntax errors
Here is a working fiddle: http://jsfiddle.net/9zXL5/42/
It helps if you use a console (chrome/devtools or FF/firebug) to spot the errors and correct them. In your case, you had closing parentheses and brackets here:
movelist.innerHTML += '<div class ="newData">hey look at me</div>';
}); // <-- remove the );
} // <-- remove this line
You had a number of JavaScript syntax errors in that jsFiddle, caused by:
not loading jQuery,
having an unnecessary bracket and semi-colon ();) after your function declaration and having an additional, unmatched closing curly-brace (}) also after that function declaration.
If you haven't already I'd highly suggest you install, or start using, a JavaScript debugger. If you use Firefox, I'd personally suggest using Firebug. In Internet Explorer and Chrome the built-in developer tools can be accessed using the F12 key.
Here's an updated jsFiddle.
Related
I am stuck with a problem and I cannot figure out what the cause is, I have created a small js script that modifies a table element, but every time it does I see flickering of the elements, I checked the HTML elements and there is no white space or whatsoever.
Short video: https://i.imgur.com/86RODJL.mp4
Is it possible an css property that causes this behavior ?
Tried to troubleshoot by inspecting the html elements for white space or similar.
JS function:
function correctOrderQtyMinus(element) {
var elementTR = element.parentNode.parentNode.parentNode;
var totalExBTW = document.getElementById('totalExBTW');
var totalBtw = document.getElementById('totalBtw');
var btwAmount = document.getElementById('btwAmount');
if(document.getElementById('checkoutForm')) {
if(element.parentNode.querySelector('#productQty').value > 1) {
var newAmount =+ parseFloat(elementTR.querySelector('#productPriceTotalBtw').innerText) - parseFloat(elementTR.querySelector('#productPriceWithBtw').innerText);
elementTR.querySelector('#productPriceTotalBtw').innerText =+ newAmount.toFixed(2);
totalExBTW.innerText =+ (parseFloat(totalExBTW.innerText)- parseFloat(elementTR.querySelector('#productPriceExBtw').innerText)).toFixed(2);
totalBtw.innerText =+ (parseFloat(totalBtw.innerText) - parseFloat(elementTR.querySelector('#productPriceWithBtw').innerText)).toFixed(2);
btwAmount.innerText = parseFloat(totalBtw.innerText - totalExBTW.innerText).toFixed(2);
totalBtw.innerText = parseFloat(totalBtw.innerText).toFixed(2);
totalExBTW.innerText = parseFloat(totalExBTW.innerText).toFixed(2);
elementTR.querySelector('#productPriceTotalBtw').innerText = parseFloat(elementTR.querySelector('#productPriceTotalBtw').innerText).toFixed(2);
} else {
console.log('Cannot go less than 1');
}
}
event.preventDefault();
}
On this page: https://www.airsyspro.com There is a script for a stick header that seems to have an infinite loop that is causing thousands of errors in the console. Any ideas on how to fix this issue?
You'll see in the console that it appears on lines 2216 and 2245. JS is not my expertise, thanks in advance.
if ($('.hpg-sticky-bar').length) {
$('.hpg-sticky-bar').addClass('original').clone().insertAfter('.hpg-sticky-bar').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
}
It can be as simple as the example here above
I think that the problem is this:
var orgElementPos = $('.original1').offset();
There is not a single element with class 'original'.
The var orgElementPos is null.
Also check this:
$('.msb-sticky-bar').addClass('original1')
the class msb-sticky-bar is misssing.
I have written some code with jquery works in firefox, safari and ie9. But chrome does not like it. No obvious msgs in chrome console coming up. I am hitting a wall hopefully someone can shed some light. Script just show/hides some tooltips. Any ideas?
fiddle here, changed code still no change to behaviour.
http://jsfiddle.net/qAfwJ/
$(document).ready(function(){
//custom toolTip Written by CASherwood but not working in ie9/chrome
var ShowId;
var id;
var contentholder = $(".contentBox");
var toolTip = $(".info");
var idHashString = '#info';
var idString = 'id';
function showToolTip(name, id){
id = name + id;
$(id).fadeIn(1000);
}
function hideToolTip(name, id){
id = name + id;
$(id).fadeOut(1000);
}
$(toolTip).mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
$(contentholder).mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
});
There are a few things here,
You are setting a variable var toolTip = $(".info");
And then using this same variable to add a function to it.
What you are doing here is actually
$($(".info")).mouseover(
Instead of
var toolTip = $(".info");
toolTip.mouseover(
Also you might consider using
jquery.hover(handlerIn(eventObject) , handlerOut(eventObject) );
http://api.jquery.com/hover/
Ok one thing I'm noticing here is that you are wrapping some elements twice with the jQuery selector.
var contentholder = $(".contentBox");
$(contentholder).mouseleave(function(){
...
});
Basically what evaluates to is this -
$($(".contentBox"))
That doesn't look too good and I'm not too sure if it would work as expected. Even if it does, the issues of cross browser compatibility might come into play and I believe this is what you are experiencing. If you have already captured the element and are not just storing the selectors as strings, then there is no need to wrap the element again with the $ syntax.
var contentholder = $(".contentBox");
contentholder.mouseleave(function(){
...
});
When you are constructing selectors from strings and variables, you should do so in a similar way to this -
var elementId = 'the_elements_id';
$('#'+elementId).on('click',handler);
I'd start by changing
$(toolTip).mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
$(contentholder).mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
to
toolTip.mouseover(function(){
ShowId = $(this).attr(idString);
showToolTip(idHashString, ShowId);
});
contentholder.mouseleave(function(){
ShowId = $(this).find('.info').attr(idString);
hideToolTip(idHashString, ShowId);
});
since your toolTip and contentholder variables are already jquery objects.
I'm not sure and haven't tested it, but what if you try to move the two functions (showToolTip() and hideToolTip()) before or after the $(function(){});
The might get seen as inner functions of some sort instead of global functions and that might be a thing.
I have this script that positions a div's background in proportion with the window size:
// JavaScript Document
var jQNC = jQuery.noConflict();
jQNC(document).ready( function () {
setPunchMargin()
jQNC(window).resize( function () {
setPunchMargin();
});
});
function setPunchMargin() {
var windowWidth = jQNC(window).width();
if (windowWidth <= 980) {
var margin = 0;
} else {
var margin = Math.round((windowWidth - 980) / 2);
}
jQNC('.punch').css('background-position', margin + 'px 320px');
}
It works like a charm on my local machine, but when uploading it to the server i get jQuery is undefined and on the jquery library i get unexpected token error.
Can you tell me what is wrong here?
Thank you,
Radu.
You have jQuery included two times;
<script language="javascript" src="http://punchid.com/test/wp-content/themes/punch/js/jquery-1.6.1-min.js" type="text/javascript"></script>
And here;
<script type='text/javascript' src='http://punchid.com/test/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
The latter is an older version, I'd suggest removing that one from the code - But double check everything still works correctly afterwards.
This looks like you are not uploading or referencing jQuery correctly. Try using an absolute reference to a Jquery CDN like: http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
(where 1.5.1 is the version of Jquery you'd need).
I have a javascript function (epoch calendar) which displays a calendar when focus is set on certain text boxes. this works fine in ie8, ff (all versions as far as I can test), opera etc but doesn't work in ie7 or previous.
If i have it set up in a blank html test page it will work so I'm fairly sure it's a conflict with my css (provided to me by a designer).
I've traced the error to these lines of code -
Epoch.prototype.getTop = function (element) //PRIVATE: returns the absolute Top value of element, in pixels
{
var oNode = element;
var iTop = 0;
while(oNode.tagName != 'BODY') {
iTop += oNode.offsetTop;
oNode = oNode.offsetParent;
}
return iTop;
};
Epoch.prototype.getLeft = function (element) //PRIVATE: returns the absolute Left value of element, in pixels
{
var oNode = element;
var iLeft = 0;
while(oNode.tagName != 'BODY') {
iLeft += oNode.offsetLeft;
oNode = oNode.offsetParent;
}
return iLeft;
};
More specifically, if i remove the actual while loops then the calendar will display OK, just that its positioning on the page is wrong?
EDIT
Code below which sets 'element'
<script type="text/javascript">
window.onload = function() {
var bas_cal, dp_cal, ms_cal;
dp_cal = new Epoch('epoch_popup', 'popup', document.getElementById('<%=txtDateOfDiag.ClientID%>'));
dp_cal = new Epoch('epoch_popup', 'popup', document.getElementById('<%=txtDOB.ClientID%>'));
};
</script>
Note: I am using asp.net Master pages which is why there is a need for the .ClientID
EDIT
A further update - I have recreated this without applying css (but including the .js file provided by the designer) the code still works fine which, there must be some sort of conflict between the CSS and my JavaScript?
That would lead me to believe that the tagName does not match, possibly because you have it in upper case. You might try while(!oNode.tagName.match(/body/i)) {
what happens if you add a line of debug code like this:
var oNode = element;
var iLeft = 0;
alert(oNode);
This might give different results in different browsers; I think it may be NULL for IE.
You may want to have a look at the code that provides the value of the 'element' parameter to see if there's a browser-dependant issue there.