We Keep Coding

Javascript Conditional Statement Based on Cookie Value

I'm using cookies to scroll to different sections of a given page. The cookies are saved fine. Only one cookie can exist at a given time. I can see them in the application as they should be. However, there is an issue with my conditionals where only the last if statement runs.
jQuery(document).ready(function ($) {
var internetcsomagcookie = null;
var csomagcookie = "true";
var triocsomagcookie = null;
var tvcsomagcookie = null;
if ((csomagcookie = "true")) {
document.getElementById("csomag").scrollIntoView();
}
if ((triocsomagcookie = "true")) {
document.getElementById("trio").scrollIntoView();
}
if ((internetcsomagcookie = "true")) { document.getElementById("internet").scrollIntoView();
}
if ((tvcsomagcookie = "true")) {
document.getElementById("tv").scrollIntoView();
}
});
#internet,#trio,#tv,#csomag {height:1000px;}
#internet {background:blue;}
#tv {background:red;}
#csomag {background:green;}
#trio {background:orange;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="csomag"></div>
<div id="trio"></div>
<div id="internet"></div>
<div id="tv"></div>
The issue is, that after creating any of the cookies (except for the last one - tvcsomagcookie), whenever I load the page where I want the scrolltoview to happen on, it jumps to the last ID in the code (basically the last if statement executes that scrolls to #tv), despite the tvcsomagcookie returning 'null'. So it runs when it should not.

If statements were originally posted with = (which is for assignment) instead of == for comparison. Updating this inside the code fixed the issue.

JQuery why does .offset() not return value?

Hi i get a JS error in my browser inspector. But i dont understand whats wrong with my Jquery code. And why he consider this variable as undefined ... Could someone help me ?
The code works well; but i would prefer to remove the error:
Uncaught TypeError: varposlist is undefined
This is my js code:
$(function(){
var pane = $('.scroll-pane');
pane.jScrollPane({
});
var api = pane.data('jsp');
if(typeof localStorage!='undefined') {
//Get var from local storage
var menu = sessionStorage.getItem("menu");
var yposistock_rule = sessionStorage.getItem("yposistock_rule");
//Check menu view mode
if(menu == "arbo") {
// defined top from a#on anchor
var varposchapter = $('a#on_menuchapter').offset();
//add - 285 to put at same level than title
var vartop1 = varposchapter.top -285 -yposistock_rule;
if(scrollauto_rule == "oui") {
sessionStorage.removeItem("yposistock_rule");
};
api.scrollTo(0, vartop1);
return false;
}
else{
// defined top from a#on anchor
var varposlist = $('a#on_menulist').offset();
//add - 285 to put at same level than title
var vartop2 = varposlist.top -285 -yposistock_rule;
if(scrollauto_rule == "oui") {
sessionStorage.removeItem("yposistock_rule");
};
api.scrollTo(0, vartop2);
return false;
}
}
});
Any idea ? Thanks a lot.

The only thing I can think of is this line:
$('a#on_menulist').offset();
The # selects the element with the same ID. Unless you have an element with id=on_menulist, this code cannot find the id which then cannot find the offset.

Write on html on load

I have created a function who tracks on which slide I am currently on and display the result
e.g. If I am on slide 2 of 3 it will display 2/3
my problem is that right now it is set to do that every time I click the forward arrow but it displays nothing on page load.
$('.forward').click(function() {
var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
var count = $("#slider").children().length - 2;
$("#bottom-image").html(current + "/" + count) ;
});
I am trying to find out how to execute this function on page load and where to put it in my code. I am currently learning Javascript through Codecadamedy so I have a basic knowledge of Javascript but I am not enough fluent right now to figure this one out.
Here is a link to the current non working code : http://www.soleilcom.com/metacor_dev/our-plants.php

It looks like you are using jQuery. To execute a function on DOM load in query, do this:
$(document).ready(function() {
/* your code */
});
In your case, that would be:
$(document).ready(function() {
$('.forward').click(function() {
var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
var count = $("#slider").children().length - 2;
$("#bottom-image").html(current + "/" + count) ;
});
});
For things like most event handlers, and most other things, initializing at DOM load is good enough. If your code needs to take account for rendered elements or rendered heights, use $(window).load() instead. (In your case DOM load is fine).
Note that this will just establish the click handler at load time. To also run it once, you can do it automatically by either calling the function yourself or triggering a click. To call it yourself, first define another function. The use the function in both the click handler and in one immediate call:
$(document).ready(function() {
var forward = function() {
var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
var count = $("#slider").children().length - 2;
$("#bottom-image").html(current + "/" + count) ;
}
$('.forward').click(forward);
forward();
});
Or to trigger it yourself, just define the click handler and trigger a click programatically:
$(document).ready(function() {
$('.forward').click(function() {
var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
var count = $("#slider").children().length - 2;
$("#bottom-image").html(current + "/" + count) ;
}).click();
});

It looks like you are using jQuery, so you would use this:
$(document).ready(function(){
// Code here
});
Or, you can use the shortcut:
$(function(){
// Code here
});
Read more about this on the jQuery website

If you give the function a name, then you can use it multiple times:
$(document).ready(function() {
// Bind to click event
$('.forward').click(forwardSlide)
// Execute function on page load
forwardSlide();
});
function forwardSlide() {
var current = $('#slider').data('AnythingSlider').currentPage; // returns page #
var count = $("#slider").children().length - 2;
};
Is this what you're looking for?

How do i call a spcific jquery function form within another function?

I have the following code which is not working
jQuery
jQuery(window).bind("load", function() {
function effects(content_name,active_name)
{
// switch all tabs off
$(active_name).removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(content_name).slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
}
$("a.tab_1").click(function () {
var content_name = '.content_a';
var active_name = 'a.tab_1.active';
effects(content_name,active_name);
});
$("a.tab_2").click(function () {
var content_name = '.content_b';
var active_name = 'a.tab_2.active';
effects(content_name,active_name);
});
$("a.tab_3").click(function () {
var content_name = '.content_c';
var active_name = 'a.tab_3.active';
effects(content_name,active_name);//create effects with the content
});
});
Its a set of tab groups upto 8 in number. Writing individual functions will have an adverse effect on loading time.
Answer 2 hours later:
Thank you all for pointing out the "effetcs" mistake in the code.
The other mistake was I was doing was not passing "$(this)" as a parameter into the called function "effects".
I Have adjoined the link where the necessary changes are done and the code works.
[jsfiddle] http://jsfiddle.net/phyGS/2/

Replace effetcs with effects at the first block, and replace every occurrence of
effects(content_name,active_name);
with
effects.call(this, content_name, active_name);
This call method assigns a new value to the this property of function effects.

Javascript error: Object Required in ie6 & ie7

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.