In my website there are "boxes" that open when you click on the song name, but I would like to make the one that is open to close when you click on another song name. So just one box would be open at the time. The code that invokes boxes to appear is just below. Does anyone know the solution how i could achieve that ? P.S with image it would be a lot more understandable but I am not allowed to add images.
<script type="text/javascript">
var showOrHide = true;
function parodyti (a) {
$(function () {
$("#nauj-" + a).slideToggle('slow', function () {})
})
};</script>
You can the jquery concept to do it . Jquery provides you with the method .toggle() to work it out . An example code will be like this :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>
This will toggle on button press between the two strings Good Bye and Hello .
Use .click(function() to achieve your task.
Refer Jquery toggling the element one at a time link for your reference.
This may help you : http://jsfiddle.net/fd46R/
Its just a sample for your reference.
$(function(){
$('ul.child').hide();
$('ul.parent a.slide').click(function(){
$('ul.child').slideUp('slow');
$(this).next().find('a').show();
if( $(this).next().is(':hidden') ) {
$(this).next().slideDown('fast');
}
return false;
});
});
Related
I made this really basic startup page in HTML that has images that reference websites. Is there a way to add a loader after the user clicks on the image then the loader goes away when the website comes up? I am trying to give users something to look at while a website loads. Below is a sample href line that I use.
<img border="0" alt="Image" src="logo.gif">
I found this onclick script online but I do not know how to add it to my startup page. Can anyone help me put these together? Where should I place the line 'onclick="myFunction()?"'Thank you!
onclick="myFunction()"
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>
Here is an example of something you need,.
A loader will be displayed when you click on the button, and disappears after the website loads.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var myVar;
$( "#myDiv" ).click(function() {
myFunction(this);
});
function myFunction(div) {
$("#loader").toggle();
$(div).toggle();
}
});
</script>
</head>
<body>
<a id="myDiv" href="https://Website.com">Click me</a>
<div id="loader" style="display:none;background:green;padding:150px">This is a loader</div>
</body>
</html>
Here is a working DEMO
You may refer to the following link, it properly explains, how it is too be done.
http://blog.teamtreehouse.com/learn-asynchronous-image-loading-javascript
I'm confused on how this set of code is suppose to select the button by pressing the "g" on the keyboard:
Any help on this?
Concept of keypress in jquery
$(selector).keypress(function)
You may follow http://www.k68.org/wp-content/uploads/2010/11/Key_Codes.htm
Use this code :
<html>
<head>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).keypress(function(event){
if(event.which == 103) {
//Your Code
}
})
})
</script>
</body>
</html>
As i can read your provided code image will work.
it has one problem which trap all event of this element which is not right based on description of provided example.
their should be $('.btn').toggleClass("btn-like")
Have an anchor tag, trying to click it from the javascript but not responding, while loading the page it should go to next.php without click anchor tag manually.how can I archive this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-2.0.3.js"></script>
<script type="text/javascript">
alert("hai");
$(document).ready(function() { $('#about').click(); });
</script>
</head>
<body>
<div>
click here
</div>
</body>
</html>
Use $('selector')[0], as $('selector') returns a jQuery object, so $('selector').click() will fire the click handler, while $('selector')[0].click() would fire the actual click.
$(document).ready(function () {
$('#about')[0].click(); //$('#about').get(0).click();
});
Demo
You can not use javascript to fire click event
It should use
<script type="text/javascript">
$(document).ready(function() {
document.location.href='/next.php'
});
</script>
Here is the code that can help you
$(document).ready(function() {
$(document).ready(function() {
$('a').trigger('click');
});
})
function abc() {
alert("");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me not
If you want the recommended way then use this inside $(document).ready
window.location="where ever you want to go";
If you want the page to go to next.php without clicking then place the window.location directly into $(document).ready(function() { });
Click() function is used when you want to trigger click event. ie. when you want to trigger some action when anchor tag is clicked.
<script>
alert("hai");
$(document).ready(function() {
window.location = 'next.php'; //If you wish the page to automatically go to next page on page load.
$('#about').click( // If you wish to do something clicking anchor
function(){
alert("Hello");
});
});
</script>
$(document).ready(function() { $('#about').trigger('click'); });
Updated:
$(document).ready(function() { $('#about')[0].click(); });
I am using a script to make tables in html sortable. The script is here- http://www.kryogenix.org/code/browser/sorttable/. I want the text which sorts the html table to be clicked automatically when the i loaded. The autoclick script i am using is this-
<head>
<script LANGUAGE='javascript'>
function autoClick(){
document.getElementById('sort').click();
}
</script>
</head>
<body onload="autoClick();">
<table><tr><th><p id="sort">Click here to sort the table</p></th>...
The problem is that this is not working and i am confused that why this isnt working.
--------------------EDIT------------------
Sorry for this but actually i was typing something wrong in the body onload statement. Thus the script i was using was correct.
Where have you defined your event?
Because I see juste one function in your onload.
Below, a little example which work fine:
<html>
<head>
<script type='text/javascript'>
var init = function()
{
document.getElementById('test').addEventListener('click', function() {
alert('Auto test is ok');
}, false);
};
function autoClick(){
document.getElementById('test').click();
}
</script>
</head>
<body onload="init(); autoClick();">
<button id="test">Test</button>
</body>
</html>
It's always safer to use Jquery library. Just include the latest Jquery library on your header section of the page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
and this function Should solve your issue:
$("#sort").live('click');
I think you missed the class name in the table
Please add your table tag with class name called "sortable".
I have jquery issue, Kindly see my jquery code:
$(document).ready(function(){
$(".toggle_container").show();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
My .toggle_container is shown always its good, But I want to close it first time, when page load. Can you please provide me any solution?
I dont want to use $(".toggle_container").hide(); function for this problem because when i click on href then .toggle_container should not hide, It should open.
Regards.
You can just add attribute
style="display:none"
to your element .toggle_container.
Then on first call of $(document).ready it will be shown.
The full test example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
</script>
</head>
<body>
<h2 class="trigger">Toggle</h2>
<div class="toggle_container" style="display:none">Container</div>
</body>
</html>
Note: there`s no $(".toggle_container").show(); on $(document).ready
remove the
$(".toggle_container").show();
from your $(document).ready function.
in html part add style="display:none" for the toggle_container div.
check the #HCK s reply. he is clearly mentioned it..
Once the document gets loaded, a alert box will be prompted "page loaded".
$(document).ready(function(){
alert('page loaded'); // alert to confirm the page is loaded
$('.divClassName').hide(); //enter the class or id of the particular html element which you wish to hide.
});