the following javascript code is working in FF and Chrome but in an any versions of IE. There does not appear to be any obvious errors I can find.
Any help will be appreciated.
<script type="text/javascript">
// hide/expose search_by2 to/from dates
function hide_search_by2(that){
selected_value = that.options[that.selectedIndex].value;
if(selected_value == 'vehicles_sales.nodate'){
document.getElementById("search_by2_from_row").hidden=true;
document.getElementById("search_by2_to_row").hidden=true;
} else {
document.getElementById("search_by2_from_row").hidden=false;
document.getElementById("search_by2_to_row").hidden=false;
}
}
</script>
What is hidden?
Set display to none if you want to hide an element.
hide
document.getElementById("search_by2_from_row").style.display = "none";
show
document.getElementById("search_by2_from_row").style.display = "inline"; //or "block"
or visibility
hide
document.getElementById("search_by2_from_row").style.visibility = "hidden";
show
document.getElementById("search_by2_from_row").style.visibility = "visible";
Related
document.getElementById("SameDifferent").addEventListener('click',function () {
start(game.SameDifferent);
document.getElementById("instructions").innerHTML = "Press S for 'same' and D for 'different'";
} );
So right now, when I click toggle the function to start the game, I have instructions appear by changing the innerHTML in my html file. I want two buttons to pop up instead, however, that say "Same" and "Different". I'm almost a complete beginner at HTML/Javascript, so not sure how to do this. I can make the button appear constantly, but I am confused on how to toggle it in the js file.
Any help would be appreciated. Thanks!
You can try to set the button to hidden like below:
document.getElementById("button1").style.display = "none";
To show:
document.getElementById("button1").style.display = "";
Hi consider this HTML:
<button onclick="toggle()">Click Me</button>
<div id="tggle">
This is my DIV element.
</div>
It displays a button (toogle), that shows the div with ID tggle, here's the javascript to toggle it:
function toggle() {
var x = document.getElementById("tggle");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I struggling with very basic thing
I am trying to make this side-nav appear and disappear with JavaScript. The code below only activates the nav bar but doesn't deactivate it. Tried all options but I don't know how to call function to close nav-bar.
Thank you
HTML
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<!-- Use any element to open the sidenav -->
<span id="MyElement">×</span>
JS
<script type="text/javascript">
function changeClass() {
document.getElementById("mySidenav").style.width = "250px";
}
window.onload = function() {
document.getElementById("MyElement").addEventListener('click',changeClass);
}
</script>
</body>
</html>
You can't have to objects with the same ID (use name instead?)
You have a typo in else if with comparator mark and another in the next line with assingment mark.
Since in menu.style.width == "-250px" you would be assigning value to -250 (menu.style.width == "0px) would never pass and it would keep assigning value -250 whenever someone clicks the button, but that fails, because you have a typo in your assingment mark.
Width cannot be negative
Is let compatable with your browser?
Have you considered using display:none and display:block (or whatever display you have)?
function toggleMenu() {
var menu = document.getElementById('mySidenav');
if (menu.style.display == "none")
menu.style.display = "inline-block"; //block
else
menu.style.display = "none";
}
window.onload = function() {
document.getElementById("MyElement").onclick = toggleMenu;
}
your else statement section seems to have the comparator (==) and assignment (=) the wrong way around :
} else if (menu.style.width = "250px") {
menu.style.width == "-250px";
}
looks like it should be
} else if (menu.style.width == "250px") {
//setting a negative width will immediately break the toggle logic.
//just set it to 0px.
menu.style.width = "0px";
}
Full example :
function changeClass() {
var sidenavElement = document.getElementById("mySidenav");
if(sidenavElement.style.width == "0px")
{
sidenavElement.style.width = "250px";
}
else
{
sidenavElement.style.width = "0px";
}
}
window.onload = function() {
document.getElementById("MyElement").addEventListener('click',changeClass);
}
#mySidenav
{
overflow:hidden;
height:100px;
background:green;
}
<div id="mySidenav" style="width:0px">
HELLO I AM SIDENAV
</div>
<button id="MyElement">toggle it</button>
There is many problem in your code, you have 2 elements inside your DOM with same ID as mentioned by Marek Maszay.
Your else statement should use == in condition and = for assignation.
Last thing, you should not use width property to display or not an element there is a display property in css
<html>
<body>
<div id="mySidenav" class="sidenav">
<span class="closebtn" id="MyElement">×</span>
<span id="menu">
About
Services
Clients
Contact
</span>
</div>
<!-- Use any element to open the sidenav -->
<span id="MyElement2">×</span>
<script type="text/javascript">
function toggleMenu() {
let menu = document.getElementById('menu');
if (menu.style.display == "") {
menu.style.display = "none";
} else if (menu.style.display == "none") {
menu.style.display = "";
}
}
window.onload = function() {
document.getElementById("MyElement").addEventListener('click',toggleMenu);
}
</script>
...
</body>
</html>
When display value is "", it take the default display value of an element, when its value is none the element is not displayed.
Here is your code modified.
EDIT
For some reason changing width to 0px doesn't hide the element. Element change from line to column, it seem that the browser try to fill element with content and put at least one word per line.
Seem like other people on web are having same problem.
I am writing the source code to show/hide divs. If I try to show a new div, however, it is hidden behind the currently shown div.
Here is what I built: http://talkbox.co.il/text.htm
If you try to show 'options' and then 'notific' (or vice versa), you will see that it sometimes doesn't work so well. You will need to click twice for it to work. Why isn't it working so well?
I think maybe the update of this.isMenuOptionsOpen = false; this.isMenuNotificOpen = false; is causing it. How can I fix this?
This is the full source:
<script>
this.isMenuOptionsOpen = false;
this.isMenuNotificOpen = false;
function menuOptions() {
if (this.isMenuOptionsOpen == false) {
document.getElementById('menuOptions').style.display = 'block';
this.isMenuOptionsOpen = true;
document.getElementById('menuNotific').style.display = 'none'; // close another menu if open
}
else {
document.getElementById('menuOptions').style.display = 'none';
this.isMenuOptionsOpen = false;
}
}
function menuNotific() {
if (this.isMenuNotificOpen == false) {
document.getElementById('menuNotific').style.display = 'block';
this.isMenuNotificOpen = true;
document.getElementById('menuOptions').style.display = 'none'; // close another menu if open
}
else {
document.getElementById('menuNotific').style.display = 'none';
this.isMenuNotificOpen = false;
}
}
</script>
<!-- buttons to show/hode the divs-->
options <br>
notific
<!-- end buttons to show/hode the divs -->
<!-- divs to show/hide -->
<div id='menuOptions' style='width:100px; height:100px; background-color:green; display:none; position:relative; color:black;'>menu options</div>
<div id='menuNotific' style='width:100px; height:100px; background-color:yellow; display:none; position:relative; color:black;'>menu notific</div>
<!-- end divs to show/hide -->
When you open Options then Notific, isMenuOptionsOpen is still set to TRUE, so when you ask to open it, your function try to close it and set isMenuOptionsOpen to FALSE, and finaly a second click open it.
You need to set isMenuOptionsOpen to FALSE when you open Notific.
I have 4 divs that hide and unhide with JavaScript by clicking the menu on the top of the page. I have got this:
<script type="text/javascript">
function showHide(d) {
var onediv = document.getElementById(d);
var divs= ['content1', 'content2', 'content3', 'content4'];
for (var i = 0; i < divs.length; i++) {
if (onediv != document.getElementById(divs[i])) {
document.getElementById(divs[i]).style.display = 'none';
}
}
onediv.style.display = 'block';
}
</script>
Now I want to add the an effect that when you show a new div it comes rolling in from the top, like this "http://www.templatemonster.com/demo/48152.html". Can you do this with JavaScript or do I need jQuery? If I need to make use of jQuery which one must i use?
You can achieve this using jQuery's $show(), $hide() and $toggle() methods.
Adding a parameter of milliseconds will cause a delay.
$toggle(500);
Yes for effects you will nedd jQuery. Just replace
document.getElementById(divs[i]).style.display = 'none';
onediv.style.display = 'block';
with
document.getElementById(divs[i]).slideUp();
onediv.slideDown();
Call your ( showHide(d) ) function on document ready.
Hi you can use JQuery slide down method for this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(document.getElementById(d)).slideDown();
});
</script>
Essentially what I am trying to do is create a website that has all of its content on the home page but only has some of the content visible at any one time. The way I read to do this is through toggling visibility.
The problem I am having is that: Assume the home page, when you first visit the website is blank (the way I want it to be). Lets say you click on the "about us" link. All of a sudden the about us section becomes visible (the way I want it to be). Now the problem that I have come across is when I know lets say click on the "products" link, I want the "products" content to become visible and the "about us" content to become invisible again. (Essentially creating the illusion of opening a new page within the same page).
Here is the code I have come up with so far. I can make certain div elements visible and invisible (onclick) but I can't figure out how to make sure only one div element is visible at any one time.
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>
The links to make the JavaScript work looks like this:
< href="#" onclick="toggleVisibility();">About
< href="##" onclick="toggleVisibility1();"> Products
here is another, simple function
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
if you click here, #foo will change visibility
<div id="foo">blablabla</div>
Without jQuery, you would want to do something like this:
<style type="text/css">
.content {
display: none;
}
#about {
display: block;
}
</style>
<script type="text/javascript">
function toggleVisibility(selectedTab) {
// Get a list of your content divs
var content = document.getElementsByClassName('content');
// Loop through, hiding non-selected divs, and showing selected div
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
}
</script>
About
Products
<div id="about" class="content">About stuff here</div>
<div id="products" class="content">Product stuff here</div>
Example here: http://jsfiddle.net/frDLX/
jQuery makes this much easier, but if you are beginning with JavaScript, sometimes you want to see the programmatic code, so you can tell what is going on.
This is exactly what jquery makes easier. Take this very simple example of what you're trying to achieve:
<style type="text/css">
.section {
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(newSection) {
$(".section").not("#" + newSection).hide();
$("#" + newSection).show();
}
</script>
About
Products
<div id="about" class="section">about section</div>
<div id="products" class="section">products section</div>
Simple solution is like this:
<script type="text/javascript">
function toggleVisibility(divid) {
if (divid="about"){
document.getElementById("about").style.visibility = "visible";
document.getElementById("products").style.visibility = "hidden";
}
else if (divid="products")
{
document.getElementById("products").style.visibility = "visible";
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
< href="#" onclick="toggleVisibility('about');">About
< href="##" onclick="toggleVisibility1('products');"> Products
use CSS display: property
element disappear
document.getElementById("products").style.display = "none";
element appear and is displayed as block (default for div)
document.getElementById("products").style.display = "block";
I posted sample code here: jQuery: menus appear/disappear on click - V2
PS
Here you can find nice examples about differences between display and visibility: http://wiw.org/~frb/css-docs/display/display.html