i have this javascript code:
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
it is possible to add a toggle speed effect for show and hide?
Adding Effect to you code will result you to add more code line for Browsers Compatibility.
I suggest you to use jQuery, It will save you lot of time developing and testing.
Related
I want to make button witch run function (Price List filter) after new page is loaded. How to do that (in Javascript)?
Let's say I have button like this:
var faceButton = document.getElementById('faceButton');
faceButton.addEventListener('click', function () {
window.location.href = '/pricelist.html';
window.onload = function () {
facePrizes();
}
});
function facePrizes(){
document.getElementById('nose').style.display = 'block';
document.getElementById('eyes').style.display = 'block';
document.getElementById('arm').style.display = 'none';
document.getElementById('leg').style.display = 'none';
}
After clicking on faceButton I want to go to prizes.html file and run facePrizes() after page it's load
So I manage to find a solution :)
I've added querystring to link -> if link is correct run function
Working code:
var faceButton = document.getElementById('faceButton');
faceButton.addEventListener('click', function () {
window.location.href = '/pricelist/?face';
});
if (window.location.href == "http:/example.com/pricelist/?face") {
facePrizes();
}
function facePrizes(){
document.getElementById('nose').style.display = 'block';
document.getElementById('eyes').style.display = 'block';
document.getElementById('arm').style.display = 'none';
document.getElementById('leg').style.display = 'none';
}
I would like to add a button or link to appear on browser pop up window that makes a servlet request to get data. But the javascript that handles this should when an error occurs show the link or button on that window. Otherwise remain hidden.
function showErrorOnStart()
{
document.getElementById("video").innerHTML = "<p>This file is of
unsupported type. Please download the file</p>";
aud.style.visibility = "hidden";
vid.style.display = "none";
function myFunction() {
var x = document.getElementById("buttonLink");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
<button id="buttonLink" type="button"
style="display:none;" onclick="myFunction()">DownLoad</button>
I have no idea what I'm doing and would like someone to guide me to get this done correctly. Basically this function is called when an error occurs and displays a suitable message, but this time I want to include a link/button that this window will display which a user can then click and it will return a video stream.
PROTIP: As I always say to newbies, indentation is a must. Your code is bad indented and things like that can lead to code misunderstanding, hence to errors.
As far as I can tell, you code is fine BUT when I clean your indentation, you have one function defined inside another function:
function showErrorOnStart() {
document.getElementById("video").innerHTML = "<p>This file is of unsupported type. Please download the file</p>";
aud.style.visibility = "hidden";
vid.style.display = "none";
function myFunction() {
var x = document.getElementById("buttonLink");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
This is a perfect example of why good indentation is a must.
The scope where myFunction can be reached is showErrorOnStart contents, so anything outside showErrorOnStart can't access myFunction. You must define it outside:
function showErrorOnStart() {
document.getElementById("video").innerHTML = "<p>This file is of unsupported type. Please download the file</p>";
aud.style.visibility = "hidden";
vid.style.display = "none";
}
function myFunction() {
var x = document.getElementById("buttonLink");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
With this it should work as expected (as long as where you define the function is the global scope, not inside another function).
I had a javascript Function showHide(shID) , which is a function to hide div or show content after clicked "read more" . Here is my Fiddle : http://jsfiddle.net/Garfrey/5xf72j4m/8/
As you see when user click on it and show more content , but I just need to hide once , means when the user come back to visit my page and the hidden content is still showing. So that I need to add JQuery cookie , but what I wrote was wrong and it's not working .I'am new in Javascript . Do anyone know how to fix it ? thanks in advance , I really need help .
here my code for function :
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
if($.cookie("example")=='1') {
function showHide(shID) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
} else {
$.cookie("example", "1");
}
});
</script>
You can't define a function inside jQuery's ready function without doing something like this
var showHide;
$(function() { // Document ready
showHide = function(sh) {
//Insert function code here
};
});
I think in your case you might be better off defining the function outside of the ready function then binding it to the button's onclick handler dynamically.
I also added a data-showhide attribute to the button to pass the variable into the showhide function onclick.
function showHide() {
var shID = $(this).data("showhide"); // Use lower case only in data
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
} else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
$(function() {
$("#example-show").on("click", showHide);
});
<a href="#" id="example-show" class="showLink" data-showhide="example">
The cookies can be set to specific values in the showHide function. The ready handler can then query the cookie and determine whether or not to show or hide the div.
This fiddle shows this in action http://jsfiddle.net/e52hxosb/19/
i have this function which i define inside HEAD:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js">
function live() {
$.get("http://mydomain.com/script.php", function(data){
var timer = data;
var elm = document.getElementById("live");
if (timer == 1){
elm.style.display = 'block';
} else{
elm.style.display = 'none';
}
});
}
</script>
and then i do a loop like this at the very end of my document:
<script type="text/javascript">
setInterval(live,10000);
</script>
but i get an error saying live is not defined. Why is that? Could you please tell me what im doing wrong?
Thank you.
Put your code in an separate <script> tag. As soon as a <script> tag has a src attribute, any content of that tag is ignored in favor of the given resource. so just do this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function live() {
$.get("http://mydomain.com/script.php", function(data){
var timer = data;
var elm = document.getElementById("live");
if (timer == 1){
elm.style.display = 'block';
} else{
elm.style.display = 'none';
}
});
}
</script>
I've this code:
function divHideShow(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "none")
{
div.style.display = "block";
}
else
{
div.style.display = "none";
}
}
How to make it wait 2 seconds when executing div.style.display = "block"; ?
Thanks
You can use the function setTimeout to wait for a specified time (in milliseconds) before running some code.
function divHideShow(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "none")
{
setTimeout(function () {
div.style.display = "block";
}, 2000);
}
else
{
div.style.display = "none";
}
}
It might be worth considering adding and removing a class rather than setting the style directly. You can then handle all styles using CSS which helps with maintainability (and you can use CSS3 animations to fade/grow/shrink things in and out too).
This answers you question: the second parameter of setTimeout takes milliseconds so, 2000 milliseconds= 2 seconds
function divHideShow(divToHideOrShow)
{
var div = document.getElementById(divToHideOrShow);
if (div.style.display == "none")
{
setTimeout(function(){div.style.display = "block";},2000);
}
else
{
div.style.display = "none";
}
}
If you need fadeIn or fadeOut effects you better consider using jquery library:
You need to include jquery library in order this to be working.....
function divHideShow(divToHideOrShow)
{
var time=600; //milli seconds alter this for changing speed
$("#"+divToHideOrShow).fadeToggle(time);
}