So I'm trying to make a menu open system on my site. But every time I click the div to activate the toggle I get this "toggle_visibility is not defined".
I've tried putting the script in the head and in the footer but still does not work. Suggestions?
Here's the site if you want to test it: Link
This is the javascript I'm using:
<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>
Here's the HTML
<div class="user-image" href="#" onclick="toggle_visibility('menu-options');">
<img src="http://chocobento.x10.mx/wp/wp-content/uploads/2015/09/1-300x300.jpg" width="180" height="180" alt="itslino" class="avatar avatar-180 wp-user-avatar wp-user-avatar-180 alignnone photo">
</div>
<div id="menu-options">
Test</br>
Test 2
</div>
The problem is that your script is already in js file, so you not have to put your code in <script></script> tag. This tag is use when you write your js code directly in a html page. That say, your menu.js file shall content:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
NOTE: browser developer web tool is useful to debug your code and generally you can use it by pressing f12 in your browser ( especially in firefox or chrome). See here an example for your site’s home page: [[IMG]http://i57.tinypic.com/dcvcyp.png[/IMG]]
Remove <!-- from your script by either deleting that line or commenting it out as you did with --> like this:
<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're calling the script on a JavaScript Page (someFile.js):
Then remove these lines: <script type="text/javascript"> and </script> and leave it as:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
Related
I'm following this tutorial: https://www.w3schools.com/jquery/jquery_css.asp for a homework question.
The vanilla JS to be replaced with jQuery looks like:
document.getElementById('menu-signin').addEventListener('click', function() {
document.getElementById('blanket').style.display = 'block';
document.getElementById('signin-box').style.display = 'block';
});
document.getElementById('menu-join').addEventListener('click', function() {
document.getElementById('blanket').style.display = 'block';
document.getElementById('join-box').style.display = 'block';
});
document.getElementById('blanket').addEventListener('click', function() {
document.getElementById('blanket').style.display = 'none';
document.getElementById('signin-box').style.display = 'none';
document.getElementById('join-box').style.display = 'none';
});
document.getElementById('cancel-signin-button').addEventListener('click', function() {
document.getElementById('blanket').style.display = 'none';
document.getElementById('signin-box').style.display = 'none';
document.getElementById('join-box').style.display = 'none';
});
document.getElementById('cancel-join-button').addEventListener('click', function() {
document.getElementById('blanket').style.display = 'none';
document.getElementById('signin-box').style.display = 'none';
document.getElementById('join-box').style.display = 'none';
});
I tried including the CDN which did not work so downloaded jQuery non-minified version into folder js and put this in the <head></head>:
<script src="js/jquery-3.5.1.js"></script>
My jQuery to replace the above vanilla JS is:
<script>
//show signin on click
$(document).ready(function()){
$("#menu-signin").click(function()){
$("#blanket").css("display", "block")
$("#signin-box").css("display", "block")
}
}
$(document).ready(function()){
$("#menu-join").click(function()){
$("#blanket").css("display", "block")
$("#join-box").css("display", "block")
}
}
//hide blanket on click
$(document).ready(function()){
$("#blanket").click(function()){
$("#blanket").css("display", "none")
$("#signin-box").css("display", "none")
$("#join-box").css("display", "none")
}
}
//hide on cancel
//hide blanket on click cancel
$(document).ready(function()){
$("#cancel-signin-button").click(function()){
$("#blanket").css("display", "none")
$("#signin-box").css("display", "none")
$("#join-box").css("display", "none")
}
}
//hide blanket on click cancel
$(document).ready(function()){
$("#cancel-join-button").click(function()){
$("#blanket").css("display", "none")
$("#signin-box").css("display", "none")
$("#join-box").css("display", "none")
}
}
</script>
It will not show the blanket and modals for sign in nor join.
I'm guessing you haven't looked at your console for errors.
You don't need to include ready around everything, its just needed to wrap once.
However, the actual error that you will see is you are missing the end ) for the clicks, and for the ready. Instead that ) was added after function instead of after the end }.
I also updated your function to include the jquery functions for hide/show.
$(document).ready(function(){
$("#menu-signin").click(function(){
$("#blanket").show()
$("#signin-box").show()
});
$("#menu-join").click(function(){
$("#blanket").show()
$("#join-box").show()
});
$("#blanket").click(function(){
$("#blanket").hide()
$("#signin-box").hide()
$("#join-box").hide()
});
$("#cancel-signin-button").click(function(){
$("#blanket").hide()
$("#signin-box").hide()
$("#join-box").hide()
});
$("#cancel-join-button").click(function(){
$("#blanket").hide()
$("#signin-box").hide()
$("#join-box").hide()
});
});
I want to create a menu where there is just title and a view more link is provided.
If that link is clicked it should open a hidden div and that view more should change to show less or close. And if I click that the div should close again.
So far I have this.
Title 1 View More
<div id="title1_div">
Some Information
</div>
<style>
#title1_div{
display:none;
}
</style>
<script>
function showdiv()
{
document.getElementById('title1_div').style.display = 'block';
}
</script>
This only provides the on click show division. How can I close that div on clicking.
Any help would be appreciated.
Please see this example at JSFiddle: https://jsfiddle.net/eo4cysec/
You just check if the property is set to block, if so you set it to none, else you set it to block. So you have a toggling logic in it.
if(document.getElementById('title1').style.display == 'block') {
document.getElementById('title1').style.display = 'none';
} else {
document.getElementById('title1').style.display = 'block';
}
To set the text to View Less you need the reference of the clicked tag, you pass it as parameter like this:
View More
Then you have the chance to use this parameter and set the innerHTML of it, which is the text that is displayed. So the final function will look like this, where e is now the reference on the a-tag:
function showdiv(e) {
if(document.getElementById('title1').style.display == 'block') {
e.innerHTML = 'View More';
document.getElementById('title1').style.display = 'none';
} else {
e.innerHTML = 'View Less';
document.getElementById('title1').style.display = 'block';
}
}
Please check out this fiddle:
https://jsfiddle.net/g7ry88h7/
Simple function. Call it on click and it'll handle the hide/show:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
Here is a working example.
function showdiv(el) {
if (el.innerHTML == "View More") {
document.getElementById('title1').style.display = 'block';
el.innerHTML = "Show Less";
} else {
document.getElementById('title1').style.display = 'none';
el.innerHTML = "View More";
}
}
#title1 {
display: none;
}
Title 1
<div id="title1">
Some Information
</div>
View More
$('a').click(function () {
$(this).next('div').stop(true, true).slideToggle("fast");
if($(this).html() == 'View More'){
$(this).html('View Less');
} else {
$(this).html('View More');
}
}),
I have this code that shows and hides two divs when "onmouseover".
function hide_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
}
What I want is: when I do the mouseover it hides the div permanently and when I go over again it won't show anymore.
http://codepen.io/anon/pen/XmXjmx
THANKS!
You can just remove any code that sets e.style.display to block.
function hide_visibility(id) {
var e = document.getElementById(id);
e.style.display = 'none';
}
http://codepen.io/anon/pen/ojbzbK
You could just set the html code to blank like so:
$(document).ready(function() {
$( "#item" ).mouseover(function() {
$( "#item" ).html(""); //Set html contents of #item to empty
});
});
Of course you will not be able to unhide this content again as you have removed the html code. This will not matter though if there will not be a need for the element to be made visible again.
Can anyone suggest me how to hide a div if the form state is invalid??
Actually my requirement is like this:-
I need to display some success bar while page loading & then I want to hide this div if the form state is invalid when the user clicks on submit button.I have tried this, which worked previously but somehow our UI is changed. So, when i try to integrate this code with new UI, its not working.
<div class="addUser_success">
</div>
<button class="addUser_button" type="submit" onclick="hideDiv()"></button>
Script Code:-
function hideDiv()
{
if (document.getElementById) {
document.getElementById('addUser_success').style.display = 'none';
}
Also i used Jquery, but doesn't work at all
My Jquery code:-
$(document).ready(function ()
{
$(".addUser_button").click(function ()
{
alert("hai1");
$(".addUser_success").hide();
});
});
Any code snippets please????
I think it's
div.style.display = 'none';
and
div.style.display = 'block';
Try this:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
Just realised that my site does not work in IE correctly. It works perfectly in Chrome and Firefox. In IE the problem is, the elements effected by javascript, just aren't appearing. I have Javascript enabled, so I don't know how its any different from the other browsers.
It's when I'm using the toggle_visibility function:
function toggle_visibility_1(id) {
var e = document.getElementById(id);
if(e.style.display = 'inline')
e.style.display = 'none';
}
function toggle_visibility_2(id) {
var e = document.getElementById(id);
if(e.style.display = 'none')
e.style.display = 'inline';
}
The website is here: http://www.dillonbrannick.com/
of course, there won't be a noticeable problem unless in IE and if in IE it may not be obvious, so hopefully I've described well enough.
So It seems that I somehow fixed the problem works just as it should see here if you want: http://testerwebby.tumblr.com/ So I don't know what I did, but I'll soon have it rolled out to my website, Thanks for all the help.
You're performing assignment, not comparison:
// Sets the value of display
if ( e.style.display = 'none' )
You should be using == (value) or === (value and type) to test equality:
// Tests the value of display
if ( e.style.display == "none" )
If all you want to do is toggle between inline and none, the following would perform that better:
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display === "none") ? "inline" : "none" ;
}
Demo: http://jsbin.com/uyawop/edit#javascript,html