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';
}
Related
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.
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';
}
Any idea why this function isn't working? I have a jsfiddle here http://jsfiddle.net/hoodleehoo/8wxwe9rd/
Here's the function I have:
$("#answer").on('input',function(e){
if(e.target.value === ''){
// Textarea has no value
document.getElementById('hotpages1').style.display = 'block';
document.getElementById('hotpages2').style.display = 'none';
} else {
// Textarea has a value
document.getElementById('hotpages1').style.display = 'none';
document.getElementById('hotpages2').style.display = 'block';
}
});
The goal is to have a div change it's display style based on whether the textarea is typed in. If the text is deleted and the text area is again blank it should toggle back to what it was originally.
UPDATE:
Okay, I forgot to put the jquery in the jsfiddle which I picked up on right after I posted this, but that didn't fix the issue on my page. After a ton of trial and error it turns out the function needs to be placed after the form, not before or inside. After moving the function to the bottom of the page it works beautifully!
You forgot to reference jQuery in the fiddle.
I changed the event to keyup, input also works. input's a newer event, consult the compatibility table.
$("#answer").on('keyup', function (e) {
var hot1 = document.getElementById('hotpages1'),
hot2 = document.getElementById('hotpages2');
if (e.target.value === '') {
hot1.style.display = 'block';
hot2.style.display = 'none';
} else {
hot1.style.display = 'none';
hot2.style.display = 'block';
}
});
http://jsfiddle.net/8wxwe9rd/5/
click: function(event, data) {
$('#clicked-state')
.text('You clicked: '+data.name);
if (data.name == "VA") {
$('#va').toggle();
}
else {
$('#va').style.display = 'none';
}
}
});
I have the above, the idea is if a different state is clicked, div id VA will hide. Currently you click 'VA' and div VA is toggled, but when you click a different state div VA still stays, it needs to hide!
Wrong!
$('#va').style.display = 'none';
try
$('#va')[0].style.display = 'none';
or
$('#va').get(0).style.display = 'none';
or
$('#va').hide();
something.style.display = 'none';
...is the vanilla JavaScript way.
$('something').hide();
...is the jQuery way.
If you prefer the vanilla JS way, you can get the first element of the jQuery object which will allow you to use style.display, because it casts it to a DOMElement.
$('something')[0].style.display = 'none'; // Cast to DOMElement rather than using a jQuery object