We Keep Coding

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.

Switch between css files (onclick) javascript

I have a simple function of switching between two different css files by clicking on the button on site. The css is replaced with another when I click once. But when I click for the second time, the first css does not resume. So in other words, I need that clicking on one and the same button, I have changing of theme css (e.g. blue and green and vice versa). I tried tens of variants, but I'm new to JS and have some difficulties with that.
Here is my code
function switchTheme() {
let css = document.getElementById('css_file').href = "css/style.css";
if (css) {
return document.getElementById('css_file').href = "css/green-theme.css";
}
}
let changeButton = document.querySelector(".change_theme");
changeButton.addEventListener('click', switchTheme);

The reason is simple: You don't have proper code to switch back. It should look more like this (not tested):
var currentState = true;
function switchTheme() {
if (currentState) {
document.getElementById('css_file').href = "css/green-theme.css";
}
else{
document.getElementById('css_file').href = "css/style.css";
}
currentState = !currentState;
}
let changeButton = document.querySelector(".change_theme");
changeButton.addEventListener('click', switchTheme);
The problem is that you always set it to the normal theme and then back to the green theme which makes no sense to do because that changes nothing. What you want to do is save if you currently use the normal theme, if that's the case, then you enable the green theme, otherwise the normal one. currentState = !currentState means that you set current state to its opposite value, so true if it was false and false if it was true.
What your old code did was this:
function switchTheme() { //Button was pressed
let css = document.getElementById('css_file').href = "css/style.css";//Set the
//current theme to the normal one. Because it's css = href = "style", you set css to "style" (I think, or maybe just true because it's a valid operation, so don't quote me on that)
if (css) { //If css contains something true, this code is executed.
//Note that css is always "[...]style", so it's always a non-empty string which is true
return document.getElementById('css_file').href = "css/green-theme.css"; //Then set the style to green - this always happens so you can essentially delete every other line and nothing would change.
}
}

Here, try this code:
function switchTheme() {
let css = document.getElementById('css_file').href;
if (css == "css/style.css" ) {
return document.getElementById('css_file').href = "css/green-theme.css";
}
else {
return document.getElementById('css_file').href = "css/style.css";
}
}
let changeButton = document.querySelector(".change_theme");
changeButton.addEventListener('click', switchTheme);

The operator a=b doesn't check the equality but just affect b to a so document.getElementById('css_file').href = "css/style.css" is not doing what you suppose.
To check something use ===:
function switchTheme() {
const file = document.getElementById('css_file')
let isStyle = file.href === "css/style.css"
let path
if (isStyle) {
path = "css/green-theme.css"
} else {
path = "css/style.css"
}
file.setAttribute('href', path)
}
let changeButton = document.querySelector(".change_theme");
changeButton.addEventListener('click', switchTheme);
<button class="change_theme">
change_theme
</button>
<a id="css_file" href="css/style.css"></a>

Using 'onclick' in html for a javascript function only working once

Very briefly, I'm trying to create a way to slide out a div and make it visible by clicking a button on the webpage. I have the css and the layout looking correct and the animation runs once but then doesn't work again.
this is the full js file
var button1Toggle;
var button2Toggle;
var button3Toggle;
button1Toggle = false;
function slideOutFunc() {
if (button1Toggle == false) {
document.getElementById('fade-in1').style.left = '0';
document.getElementById('fade-in1').style.opacity = '1';
button1Toggle = true;
} else {
document.getElementById('fade-in1').style.left = '-33vw';
document.getElementById('fade-in1').style.opacity = '0';
button1Toggle = true;
}
}
<button id="clickApply" class="applyButton" onclick="slideOutFunc()"><a>Apply</a></button>
this is the html portion that calls the function
Any help understanding why it only works once would be appreciated.

Both conditions in sildeOutFunc set buttonToggle to true

Seemingly correct way to trigger Javascript function via link, not working

Alright, so I've been reading and reading and ready about how to run some simple Javascript code when a link has been clicked, but no matter what I try, I can't seem to get it to work!
The idea is that when my link is clicked, it will change color and fill a variable, then when it is clicked again it is to change to another color and return the var back to the state it was (effectively resetting the first click)
Can anyone tell me where I am going wrong here?
Here is my Javascript code:
window.onload = function() {
document.getElementById("atonal").onclick = function() {
var categoryLink=new Array();
var counter;
categoryLink[0] = "empty";
categoryLink[1] = "empty";
categoryLink[3] = "empty";
counter = "0";
if (categoryLink[0]=="empty") {
categoryLink[0] = "atonal";
counter = counter + 1;
stylesheet.insertRule("#atonal {color: #FFFFFF}", 0);
}
if (categoryLink[0]=="atonal") {
categoryLink[0] = "empty";
counter = counter - 1;
stylesheet.insertRule("#atonal {color: #474747}", 0);
}
return false;
}
}
And my HTML:
antonal sound

There are two identical syntax errors in this code; FireBug or equivalent would have showed these to you:
if (categoryLink[0}=="empty") {
That } ought to be a ], of course. Fix those, and your code will work -- or at least, your onclick will be registered and invoked when you expect.

The comments about window.location = "http://www.google.com/"; are correct.
But also, you have a syntax error in your last 2 IF statements:
if (categoryLink[0}=="empty") {
Should be:
if (categoryLink[0]=="empty") {
http://jsfiddle.net/Ekxbu/

Get control properties with javascript in firefox

I'm trying to access control's properties and although it works great in IE6, in FF3, it fails. I'm doing:
alert(document.getElementById(gridViewCtlId).style.display);
alert(document.getElementById(gridViewCtlId).style);
And the first one shows a blank popup while the second shows 'undefined'.
I do
alert(document.getElementById(gridViewCtlId).id);
and I get the proper ID of the box along with:
alert(document.getElementById(gridViewCtlId));
and I get that in an HTML table.
This works perfectly in IE but not FF. What do I need to do to get this functioning?
Edit: gridViewCtlId is defined as:
var gridViewCtlId = '<%=GridView.ClientID%>';
Here is the full code:
var itemVisible= '<%=ItemVisible.ClientID%>';
function onGridViewRowSelected(rowIdx)
{
alert(document.getElementById(gridViewCtlId).style.display);
alert(document.getElementById(gridViewCtlId).style);
if (document.getElementById(gridViewCtlId).disabled == false)
{
alert("hi1");
var selRowCCA = getSelectedRow(rowIdx);
if (curSelRow != null)
{
alert("hi2");
var previousRow = getSelectedRow(previousRowIndx);
var CountIdx = previousRowIndx % 2;
if (document.getElementById(itemVisible) == null)
{
if (CountIdx == 0)
{
alert("hi");
previousRow.style.backgroundColor = 'Silver';
}
else
{
previousRow.style.backgroundColor = 'White';
}
}
}
if (null != selRow)
{
alert("new");
previousRowIndx = rowIdx;
curSelRow = selRow;
selRow.style.backgroundColor = 'Red';
}
}
}
It's pretty much an onClick where I have to call that function to turn it back to its original color (using alternating color rows). IE, this works fine. If i do the first alert
alert(document.getElementById(gridViewCtlId).disabled);
I would get either true or false.
The reason it's like this is because someone is going to enter something in a text box and the first gridview is going to populate depending on whats in that textbox. Then when someone selected something in the first gridview, that gridview is going to become disabled and then populate a second. So i'm having an issue checking for the disabled part of the gridview.

<div id="test">
</div>
<script type="text/javascript">
var gridViewCtlIdCCA = 'test';
alert(document.getElementById(gridViewCtlIdCCA).style);
</script>
Alerts [object CSSStyleDefintion] in Firefox 2 and 3.
If .style where undefined, .style.display would produce an error, not alert an empty dialog (unless you are capturing window.onerror).
Can you create an SSCCE that demonstrates the problem. More information about SSCCE available here.