jQuery/Javascript scope, maybe variable scope conflict - javascript

I am trying to code a menu bar for my site in JS - the problem I'm having is that I am using a variable as a 'which category is unfolded' switch, and it does not seem to register. Firebug seems to tell me it's not defined, and or stays zero.
var navOpen = 0;
$(function() {
///////////bunch of other functions here
//When designWork is clicked
$(".designwork").click(function(){
switch(navOpen)
{
case 0:
$(".navsub:hidden",this).slideDown("slow");
navOpen = 1; break;
case 1:
break;
case 2:
$("div.artProjects .navsub").slideUp("fast");
$(".navsub:hidden",this).slideDown("slow");
navOpen = 1; break;
default:
break;
}
});
//When artProjects is clicked
$(".artprojects").click(function(){
switch(navOpen)
{
case 0:
$(".navsub:hidden",this).slideDown("slow");
navOpen = 2; break;
case 1:
$("div.designWork .navsub").slideUp("fast");
$(".navsub:hidden",this).slideDown("slow");
navOpen = 2; break;
case 2:
break;
default:
break;
}
});
});
For a reason that is probably obvious, but I'm not seeing it, both menus open when clicked in the manner they should, but they do not close the other menu... help me out here, what am I missing?

$("div.designWork .navsub") should be $("div.designwork .navsub")
and
$("div.artProjects .navsub") should be $("div.artProjects .navsub")
capitals ...

Well, I think it has to do with the fact that in both cases you refer to ".navsub:hidden" without specifying precisely which navsub you really mean. You probably want to add either div.designWork or div.artProjects in front of it to specify which menu should slidedown.

Related

How can I add a active class to a svg path?

I want to add a active class so that whenever I click on a path it will be active until I click the other one. The minimal way of doing this would be appreciable. I already made this svg clickable using jquery. . Here is my jquery code-
$(document).ready(function () {
$('#mySVG').load("bd-map.html", function () {
$("#bd-map").click(function (evt) {
switch (evt.target.id) {
case "panchagarh":
$('#info').load('info.html #panchagarh') //loading data from info.html
break;
case "bandarban":
$('#info').load('info.html #bandarban') //loading data from info.html
break;
case "comilla":
$('#info').load('info.html #comilla')
break;
case "sylhet":
$('#info').load('info.html #sylhet')
break;
}
});
});
})
This should do it, assuming the element you want the class added to is an SVG that lives inside the #bd-map container. The trick is that you're either clicking on the path or text element, so you have to sniff for tagName and then react accordingly. The path to the path from the text element is $(evt.target).parent().prev('path') (keeping things in jQuery)
$("#bd-map").click(function(evt) {
$("#bd-map").find('path').removeClass('active');
let targ = evt.target.tagName === 'path' ? $(evt.target) : $(evt.target).parent().prev('path');
console.log(targ.attr('id'))
targ.addClass('active')
switch (targ.attr('id')) {
case "panchagarh":
$('#info').load('info.html #panchagarh') //loading data from info.html
break;
case "bandarban":
$('#info').load('info.html #bandarban') //loading data from info.html
break;
case "comilla":
$('#info').load('info.html #comilla')
break;
case "sylhet":
$('#info').load('info.html #sylhet')
break;
}
});

going to next or previous frame in javascript

So I am a bit new to javascript and I am looking to create a switch statement for keyboard functions relating to my animation. So if I were to click backspace it stops the animation, and when I click enter it resumes etc. That works but im also trying to get it to advance to the next frame or the previous frame when i click the left or right key, and it isn't entirely working. Sorry this is my first post but any suggestions or help would be great!
var roote = this;
addEventListener("keydown", controlBox);
function controlBox(evt){
switch(evt.keyCode){
case 8:
roote.box.stop();
break;
case 13:
roote.box.play();
break;
//previous frame
case 37:
roote.box.prevFrame();
break;
//next frame
case 39:
roote.box.nextFrame();
break;
}
}
var theFrame = document.getElementsByTagName("frame")[0];
var frameNumb = parseInt(theFrame, 10);
function prevFrame(){
roote.gotoAndStop((frameNumb) -1);
}
function nextFrame(){
roote.gotoAndStop((frameNumb) +1);
}
var myFrame = roote.currentFrame();
case 37:
roote.gotoAndStop(myFrame + 1); //go to next frame
break;
case 39:
roote.gotoAndStop(myFrame - 1); //go to previous frame
break;
answered my own question, was overthinking it.

localStorage, options data in selectmenu disappear when changing page

I have this code that writes entered phone numbers into defined options of a selectmenu, the problem is when i go back or quit the app the data are deleted and the list is empty. I can't find out why and how to fix this...
var flag_beneficiary_account_number=false;
var beneficiary_account_number;
if ( $('#beneficiary_number').val().length > 2 ) {
beneficiary_account_number=$('#beneficiary_number').val();
flag_beneficiary_account_number=true;
} else {
beneficiary_account_number = $('#Beneficiary_number_select').find(":selected").html();
flag_beneficiary_account_number=false;
}
if(flag_beneficiary_account_number){
if(localStorage.getItem("Beneficiary_number_select1")!=beneficiary_account_number &&
localStorage.getItem("Beneficiary_number_select2")!=beneficiary_account_number &&
localStorage.getItem("Beneficiary_number_select3")!=beneficiary_account_number){
var select_counter = parseInt(localStorage.getItem("select-counter"));
var select_option = select_counter%3;
select_counter = select_counter+1;
localStorage.setItem("select-counter",select_counter);
switch (select_option){
case 0:
localStorage.setItem("Beneficiary_number_select1",beneficiary_account_number);
$('#Beneficiary_number_select1').val(beneficiary_account_number);
$('#Beneficiary_number_select1').html(beneficiary_account_number);
break;
case 1:
localStorage.setItem("Beneficiary_number_select2",beneficiary_account_number);
$('#Beneficiary_number_select2').val(beneficiary_account_number);
$('#Beneficiary_number_select2').html(beneficiary_account_number);
break;
case 2:
localStorage.setItem("Beneficiary_number_select3",beneficiary_account_number);
$('#Beneficiary_number_select3').val(beneficiary_account_number);
$('#Beneficiary_number_select3').html(beneficiary_account_number);
break;
default:
break;
}
}
}
I was editing your question when you finally added the cordova tag. Things became clear so you need to remember that in cordova, to get the localStorage to work, use it this way
// To store
window.localStorage.setItem("Beneficiary_number_select2", beneficiary_account_number);
//and to access the value, use
window.localStorage.localStorage
.getItem("Beneficiary_number_select2");
instead localStorage.getItem("Beneficiary_number_select2")

Jssor refreshing .gif

I'm trying to load gif images into a jssor slider via code, but didn't work with my code and i don't know why.
The purpose is that each image refreshes when shown, cause the gif animation is not a loop, i have to do it this way.
Thanks in advance, here i put the code that is changing the images:
The variables wich will contain the images...
var imagen1 = new Image();
var imagen2 = new Image();
var imagen3 = new Image();
imagen1.src = "./1.gif";
imagen2.src = "./2.gif";
imagen3.src = "./3.gif";
And the code to change them...
function OnSlidePark(slideIndex, fromIndex) {
switch (slideIndex) {
case 0:
$('#i1').attr('src', imagen1.src);
break;
case 1:
$('#i2').attr('src', imagen2.src);
break;
case 2:
$('#i3').attr('src', imagen3.src);
break;
}
}
By the way, the sources and the Id's are working correctly
Will the following codes work?
function OnSlidePark(slideIndex, fromIndex) {
switch (slideIndex) {
case 0:
$('#i1').attr('src', '');
$('#i1').attr('src', imagen1.src);
break;
case 1:
$('#i2').attr('src', '');
$('#i2').attr('src', imagen2.src);
break;
case 2:
$('#i3').attr('src', '');
$('#i3').attr('src', imagen3.src);
break;
}
}

JavaScript function not respoding at first click

I have this on HTML:
<script type="text/javascript" src="./scripts/changeImage.js"></script>
<img id="myimage" onclick="changeImage()" src="./images/avatars/1.png"/>
This is the function
var cc=0;
function changeImage(){
if(cc==-1){
cc=0;
document.getElementById('myimage').src="./images/avatars/1.png";
} else if (cc==0){
cc=1;
document.getElementById('myimage').src="./images/avatars/2.png";
} else if (cc==1){
cc=2;
document.getElementById('myimage').src="./images/avatars/3.png";
} else if (cc==2){
cc=0;
document.getElementById('myimage').src="./images/avatars/4.png";
}
}
I must click 2 times to change the image. I tried some tricks but nothing.
i must click 2 times to change the image ...
At a guess, I'd say that cc starts out being -1, and so you follow this branch through your code:
cc=0;
document.getElementById('myimage').src="./images/avatars/1.png";
Since that's setting the same path that's already on the image, nothing changes. But then cc is 0, so the second click follows the next branch.
BTW, this is what switch statements are for:
function changeImage() {
switch (cc) {
case -1:
document.getElementById('myimage').src = "./images/avatars/1.png";
break;
case 0:
document.getElementById('myimage').src = "./images/avatars/2.png";
break;
case 1:
document.getElementById('myimage').src = "./images/avatars/3.png";
break;
case 2:
document.getElementById('myimage').src = "./images/avatars/4.png";
break;
}
cc = cc == 2 ? 0 : cc + 1;
}
Or a map:
var imageMap = {
-1: "./images/avatars/1.png",
0: "./images/avatars/2.png",
1: "./images/avatars/3.png",
2: "./images/avatars/4.png"
};
function changeImage() {
document.getElementById('myimage').src = imageMap[cc];
cc = cc == 2 ? 0 : cc + 1;
}
In both of the above, I've replicated the logic of your if/else series, but note that the logic of your if/else series never lets you get back to 1.png.
Also note that I'm assuming the real image paths are more complex, because otherwise you'd just want to key off the fact that you have 1.png, 2.png, etc.

Categories