Where to put slideDown() in javascript function - javascript

I'm trying to add slideDown('400') in this javascript. But dont know where to put it.
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
Iv'e tried this, but it does not work:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none')
e.slideDown('400').style.display = 'block';
else
e.style.display = 'none';
}
</script>

If you really need to keep inline with the syntax you already have, try this:
$(e).slideDown('400')...
Prior to the change above, you were attempting to call a jQuery function on a standard DOM element, it has no knowledge of what slideDown is as it's not a jQuery object.
NOTE: I would have a good read of the jQuery docs if I were you. Getting the element by ID in this way presents problems already solved by the jQuery library. It seems you're not fully embracing what it's capable of.
You could, instead, have:
var e = $('#' + id);
e.slideDown(400);

Related

It closes DIV on second click, why?

I have a javascript function which should close the div on click. However, it works on the second click. How can I avoid that ?
JavaScript
function showhide(id) {
var e = document.getElementById(id);
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
HTML
<div id="foota123">
Content
<div onclick="showhide('foota123')" class="iks">X</div>
</div>
e.style refers to the style attribute of the div (style="..."). First time through, there is no style attribute on the div. The condition is false and the code sets a style attribute of:
<div style="display: block">
The second time through, the if condition is true, and the style of the block is set to "none". So it disappears.
Your code does not handles the computed style on the element, hence on first click the element is still in display:block.
Try this with jQuery:
function showhide(id) {
$('#'+id).toggle();
}
$.toggle() will show the element if it is hidden else hide.
The style property is empty by default; for example:
var e = document.createElement('div');
e.style.display; // ""
Simply reversing the condition should fix that:
function showhide(id) {
var e = document.getElementById(id);
e.style.display = e.style.display == 'none' ? 'block' : 'none';
}
Try this, if you want straight javascript, the jQuery answer is better though :)
function showhide(id) {
var e = document.getElementById(id);
if( e.style.display!=='none' ) e.style.display = 'none';
else e.style.display = 'block';
}
<div id="foota123">
Content
<div onclick="showhide('foota123')" class="iks">click me</div>
</div>
It works for me.
Html code
<div id="foota123">
Content
</div>
<div onclick="showhide('foota123')" class="iks">X</div>
Script
<script type="text/javascript">
function showhide(id) {
var e = document.getElementById(id);
if(e.style.display == 'block'){
e.style.display = 'none';
}
else{
e.style.display = 'block';
}
}
</script>
OR style="block" is also a better option.

Trying to make a timed text come out

So I am trying to use javascript to make a timed text appear.
The following code Im using is this
<body>
<script type="text/javascript">
(function toggle_visibility(id) {
setTimeout (var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
,1000);
</script>
<a onclick="test('foo');"><b><u>Click to view</b></u></a><div id="foo" style=display:none;>TEXT</div>
This script is not working, but how can I make it work?
Problems:
function name is toggle_visibility not test
There are syntax error in your function
Even HTML has problems
JavaScript
function toggle_visibility(id) {
setTimeout(function () {
var element = document.getElementById(id);
if (element.style.display == 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none'
};
}, 1000);
};
HTML
<a onclick="toggle_visibility('foo');" href="#"><b><u>Click to view</u></b></a>
<div id="foo" style=display:none;>TEXT</div>
Demo

external links not working html/javascript

I have created a click to show option on one of my client's website. Which is working perfectly there.
Its respective code is given below.
<style>
a{padding:0;margin:0;color:#009cbb;font-weight:bold;text-decoration:none;}
</style>
<p>
<div>Welcome</div>
<div id="welcome" style="display:none;">This is test</div>
<div>Focus</div>
<div id="focus" style="display:none;">This is test2
</div>
<div>Cataracts</div>
<div id="cataracts" style="display:none;">This is test2
</div>
</p>
<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>
When i link test1 from an external page Its should display test1 and keep close the other 2 but the problem is when I click on the link it shows all of them as closed.
The linking code is
Read More >
Kindly help me when someone click on Read more it displays the welcome message as open and others as closed.
Thanks
Try this - tested in IE8, Chrome32 and Fx 24 on windows
Live Demo
Live Demo With Hash
function toggle_visibility(link) {
var id = link.hash.substring(1);
var obj = document.getElementById(id);
if (obj) obj.style.display = obj.style.display == "block"?"none":"block";
return false;
}
window.onload=function() {
var id = location.hash?location.hash.substring(1):"";
if (id) document.getElementById(id).style.display="block";
}
using this format on each link (which should also be refactored to be unobtrusive)
onclick="return toggle_visibility(this);"
Please note the (this)
HA I finally figured out what you want!
So you want the element to be opened on page load if the link ends with #element_id.
Your script tag currently:
<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>
Change it to:
<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';
}
var parts = window.location.split('#'),
hash = '';
if (parts.length > 1) {
hash = parts[1];
}
if (hash !== '') {
toggle_visibility(hash);
}
</script>
EDIT:
window.location.hash is apparently supported everywhere. You might want to use that instead of string.split()
Though I did not clearly understand your problem, I have modified your function based on my assumptions.
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block' || e.style.visibility == 'visible') {
e.style.display = 'none';
e.style.visibility = "hidden";
} else {
e.style.display = 'block';
e.style.visibility = 'visible';
}
}
Please let us know what are the modifications you find needed.
FIDDLE
window.onload = function(){
toggle_visibility(window.location.hash.substring(1));
}

Javascript toggle (one at a time)

Im looking for a simple way to only have one div open at a time. Im using an accordian style vertical navigation and when I click on one, it displays the div below, when I click on another, it does the same. I would like the previous div to hide again when I click on a different nav link.
This is the javascript im using to get it to open and close:
<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>
Is there something else I can add that will close the div if another is opened?
A very simple way would be to just keep track of the previously opened element:
(function() { // using an IIFE to prevent polluting the global namespace
var opened_element = null;
window.toggle_visibility = function(id) {
var e = document.getElementById(id);
if (opened_element && opened_element !== e) {
opened_element.style.display = 'none';
}
if(e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
opened_element = e;
};
}());
Give them all the same class. Hide them all by classname and show the one you clicked on with the id passed.
The best way is to:
Use CSS to hide all of your DIVs
When you want to display one; add a
class to your open div called "active" or whatever
Then apply css to
that class with display: block or what ever.
As Jason said in his comment you can do this with jQuery or you can do it without.
jQuery will provide animation support and easier manipulation of classes.
jQuery Toggle Class
Since you're not using JQuery, I assume you want a Javascript answer, you can do this by giving your divs some unique classname like "menudiv", then appending something like the following to your function:
var menu_divs = document.getElementsByClassName("menudiv");
for ( var i = 0; i < menu_divs.length; i++ ) {
if ( menu_divs[i] != e )
menu_divs[i].style.display = 'none';
}

Set focus on a div in a javascript function

So I have a javascript function that displays the div that I am hiding, I am wondering how I then setfocus on the div so it goes down right to it on the page. I say setfocus because I have tried it earlier but it didnt work. Here is the function and the idea of focusing that i have.
<script>
function toggle_travelarea(id) {
var e = document.getElementById(id);
document.getElementById("canada").style.display = 'none';
document.getElementById("asia").style.display = 'none';
document.getElementById("australia").style.display = 'none';
document.getElementById("newzealand").style.display = 'none';
document.getElementById("africa").style.display = 'none';
document.getElementById("usa").style.display = 'none';
document.getElementById("samerica").style.display = 'none';
document.getElementById("europe").style.display = 'none';
e.style.display = 'block';
document.getElementByClassName('slidedeck').focus()
}
</script>
area i want to set focus to!
<div class="slidedeck">
Actually thought this didnt work but used an href to the anchor div id and then an onclick for the function and it worked properly. Thanks for the input everyone
I'm afraid you have to do a bit with math and use scrollTo.
Here's example -> http://jsbin.com/epozur/4
Basically:
HTML
<div id="hidden">
</div>
<button id="show">show</button>
JS
var btn = document.getElementById('show'),
hidden = document.getElementById('hidden');
btn.addEventListener('click', function () {
hidden.style.display = 'block';
scrollTo(0, hidden.offsetTop);
});
That should give you idea how to go further.
mz

Categories

Resources