how to hide and show sidenavbar in javascript [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 1 year ago.
Improve this question
javascript
as see in the js code I m trying the method but I'm struggling to do it js code is not working as well smoothly what I want to write this code and run I m so stuck lots of time to try
var menu = document.getElementById('menu');
var sidenav = document.getElementById('sidenav');
sidenav.style.right = "-300px";
menu.onclick = function () {
if (sidenav.style.right = "-300px")
sidenav.style.right = "0px"
}
else {
sidenav.style.right = "-300px"
}`enter code here`

You need to use == instead of =, and the else need to be inside the function
var menu = document.getElementById('menu');
var sidenav = document.getElementById('sidenav');
sidenav.style.right = "-300px";
menu.onclick = function () {
if (sidenav.style.right == "-300px")
sidenav.style.right = "0px"
else
sidenav.style.right = "-300px"
}
When you use = you change the variable at the left term to the value of the right term, when you use == you check if the terms at each side are equals.

First off, whatever element you want to move needs to have a css position attribute. For example
#sidenav {
position: relative
}
Also here is a rewrite of your code
var menu = document.getElementById('menu');
var sidenav = document.getElementById('sidenav');
sidenav.style.right = "-300px";
menu.onclick = function () {
if (sidenav.style.right == "-300px") {
sidenav.style.right = "0px"
}
else {
sidenav.style.right = "-300px"
}
Note the curly brace that was in front of your if statement

Related

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

How to change image on click [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
So I want to change an image onClick and change it back oClick.
This is my current code, but for some reason it doesn't work. I can't find out what's wrong with it.
var newsrc = "suspects.png";
var newsrc = "questionmark.png";
function changeImage() {
if ( newsrc == "suspects.png" ) {
document.images["img"].src = "/images/suspects.png";
document.images["img"].alt = "suspects";
newsrc = "questionmark.png";
}; else {
document.images["img"].src = "/images/questionmark.png";
document.images["img"].alt = "questionmark";
newsrc = "suspects.png";
};
};
I´m pretty sure it´s good like this... Why doesn´t it work?
Toggle a image only checking the source
function toggle(){
var img=document.getElementById('img');
img.src=img.src=='url1'?'url2':'url1';// needs to be the full url.
}
Regarding you code:
you define newsrc 2 times and so the first one is lost.newsrc is always "questionmark.png"
}; else{
should be
}else{
and
if you have suspects set then you want questionmark if clicked, and not suspects.so invert the if content.
should be
if suspects then questionmark else suspects
you have
if suspects then suspect else questionmark.
DEMO
http://jsfiddle.net/SLkHu/
Remove extra semicolons ; in your code
It should be
function changeImage() {
if ( newsrc == "suspects.png" ) {
document.images["img"].src = "/images/suspects.png";
document.images["img"].alt = "suspects";
newsrc = "questionmark.png";
} else {
document.images["img"].src = "/images/questionmark.png";
document.images["img"].alt = "questionmark";
newsrc = "suspects.png";
}
}

If a checkbox is checked or unchecked - code optimization - jquery [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
So I have a jquery "checkbox checked/unchecked" function working well. This is a checkbox for turning on or off a particular URL parameter - BUT I believe this code could be written a lot tighter. Does anyone have any suggestions?
$('#mapControl').live('click', function(){
var thisUrl = $(location).attr('href');
if($(this).is(':checked')) {
var lastFour = thisUrl.substr(thisUrl.length - 4);
var param;
if (lastFour == 'com/') {param='?mapControl=true'} else {param='&mapControl=true'}
thisUrl=thisUrl+param;
} else {
$('#urlParam').val(thisUrl);
if (thisUrl.indexOf('?mapControl=true') >= 0){
thisUrl=thisUrl.replace('?mapControl=true','');
} else if (thisUrl.indexOf('&mapControl=true') >= 0){
thisUrl=thisUrl.replace('&mapControl=true','');
}
}
$('#urlParam').val(thisUrl);
});
Try to avoid jQuery as much as you can for example
$('#mapControl').live('click', function(){
// you can directly read window location href attribute
var thisUrl = window.location.href;
var urlParamObj = $('#urlParam');
// instead of $(this).is(':checked') YOU can write *this.checked === true*
if(this.checked === true) {
var lastFour = thisUrl.substr(thisUrl.length - 4);
var param;
if (lastFour == 'com/') {param='?mapControl=true'} else {param='&mapControl=true'}
thisUrl=thisUrl+param;
} else {
urlParamObj.val(thisUrl);
/* if you are sure that your location may have "?mapControl=true" OR "&mapControl=true"you don't have to write code to check string directly replace
*/
thisUrl=thisUrl.replace('?mapControl=true','');
thisUrl=thisUrl.replace('&mapControl=true','');
}
// you don't have to write $('#urlParam') 2 times create a object and refer it again and again
urlParamObj.val(thisUrl);
});

Javascript onclick not running [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I want a link, when clicked, to execute a javascript function.
Here is the javascript:
<script type="text/javascript">
function changeStyle() {
var header = document.getElementbyId("header");
var container = document.getElementbyId("container");
header.style.display = "block";
container.style.marginLeft = "auto";
}
</script>
Here is the HTML:
<span>&#9776</span> MENU
Currently, when the link is clicked, nothing happens. How would I make it so that the javascript actually changes the styles when I want it to?
EDIT:
Here is new code:
Javascript:
$('#selector').click(function() {
var header = document.getElementById("header");
var container = document.getElementById("container");
header.style.display = "block";
container.style.marginLeft = "auto";
})
HTML:
<span>&#9776</span> MENU
Use the onclick attribute, not the href :
<span>&#9776</span> MENU
A better idea would be to not use inline javascript
<span>&#9776</span> MENU
<script type="text/javascript">
var a = document.getElementById('menu');
a.onclick = function() {
var header = document.getElementById("header");
var container = document.getElementById("container");
header.style.display = "block";
container.style.marginLeft = "auto";
}
</script>
FIDDLE
Note: the script must be placed after the elements

Windows 8 app dev JavaScript - Show/Hide Div in JavaScript Code

I'm trying to show or hide divs based on user settings in a Windows 8 app. I have 2 divs in my html file:
<div id="fillBlank"><p>Fill in the Blank area</p></div>
<div id="multipleChoice"><p>Multiple choice area</p></div>
In the JavaScript file I have:
var answerStyle = "mc";
function showArea() {
if (answerStyle == "mc") {
// Multiple choice
multipleChoice.visible = true;
fillBlank.visible = false;
} else if (answerStyle == "fb") {
// Fill in the blank
multipleChoice.visible = false;
fillBlank.visible = true;
}
}
This doesn't work. Any suggestions? Thanks in advance.
One way to do this in JavaScript is to use the style property:
var fillBlank = document.getElementById("fillBlank");
fillBlank.style.display = "none";
Setting style.display to "" will make it visible using what ever the display time the element currently has set.
You're very close!
var answerStyle = "mc";
function showArea() {
if (answerStyle == "mc") {
// Multiple choice
multipleChoice.style.visibility ='visible';
fillBlank.style.visibility = 'hidden';
} else if (answerStyle == "fb") {
// Fill in the blank
multipleChoice.style.visibility = 'hidden';
fillBlank.style.visibility = 'visible';
}
}

Categories