How can I call a Javascript function test() as below for the onselect event (upon selection of menu item) of a menu item as for my below code?
I have always worked on OnClick event in button but I have no idea about OnSelect events for the menuitems, how to call a function onselection of menuitem.
Can anyone suggest how can my code below work and call my function test() (code 1) on selection of menu item named Log Report as in code-2?
<ul>
<li>Log Report</li>
</ul>
Code-1
<script>
function test() {
window.open("www.google.com");
}
</script>
Code-2
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test screen</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
$(function() {
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 230px; }
</style>
</head>
<body>
<ul id="menu">
<li>Database</li>
<li>Log
<ul>
<li>Log Report</li>
</ul>
</li>
</html>
To not create a function for every li, suggest the use of data attribute
<ul id="menu">
<li>Database</li>
<li>Log
<ul>
<li data-page="www.google.com">Log Report</li>
</ul>
</li>
</ul>
Then pass it in the function
$('#menu li').click(function(){
test($(this).data('page'));// which will give "www.google.com" if clicked on the Log Report
}
function test(url){
window.open = url;
}
I think you looking for this
$("#menu").on("click", "li", function(event){
test();
console.log('clicked');
});
Hope this helps...
More info DEMO JSFiddle
As you are using jQuery UI Menu Widget, Use select event, it is triggered when a menu item is selected.
$('#menu').menu({
select: function (event, ui) {
test();
}
});
Another way is
$("#menu").on("menuselect", function (event, ui) {
test();
});
Use click event
$("#menu li").click(function(){
test();
});
Related
I'm doing some exercises to practice my JQuery but i can't manage to find the solution with this. I just want to hide the first element of the list when it's clicked.
I've tried this:
JS
$(document).ready(function(){
$("li.oculta").click(function(){
$(this).hide();
});
});
<html>
<head>
<style>
p{
background-color: #AA55AA;
}
</style>
<script src="/jquery-2.1.1.js"></script>
</head>
<body>
<ul class='list1'>
<li class="oculta">Taco</li>
<li>Jamón</li>
<li>Queso</li>
</ul>
<ul class='list2'>
<li class="oculta">Coke</li>
<li>Leche</li>
<li>Té</li>
</ul>
</body>
</html>
But i can't figure out why isn't working. Any ideas?
Use on('click',function(){... instead of .click(function(){...
$(document).ready(function(){
$("li.oculta").on('click',function(){
$(this).hide();
});
});
jsfiddle
Very simple error, the code is all right, but you forgot to import jQuery.
$(document).ready(function(){
$("li.oculta:first-of-type").click(function(){
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style>
p{
background-color: #AA55AA;
}
</style>
<script src="/jquery-2.1.1.js"></script>
</head>
<body>
<ul class='list1'>
<li class="oculta">Taco</li>
<li>Jamón</li>
<li>Queso</li>
</ul>
<ul class='list2'>
<li class="oculta">Coke</li>
<li>Leche</li>
<li>Té</li>
</ul>
</body>
</html>
Once an li is clicked I want to load a separate html page with content on the main index page.
HTML
<nav>
<ul>
<li>Planet 1</li>
<li>Planet 2</li>
<li>Planet 3</li>
<li>Planet 4</li>
</ul>
</nav>
So once one of the links is clicked I want the jquery to load the content on the same page.
$(document).ready(function(){
// load("location-to-your-file", function(){})
//var indexCatch = $('ul li').click(function(){ alert($(this).index()); });
$("li").click(function(){
$("main").load("tab-1.html", function(){
// Instead of creating another selector combining it from $(this).hide()
// $($(this).hide()).fadeIn(1000);
// you can chain the methods:
$(this).hide().fadeIn(1000);
});
});
Its working for me,
save this file example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Include</title>
</head>
<body>
<input type="text" id="txt_name">
<a id="link" href="#">Click Test Link</a>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$("#link").on('click',function(){
value=$("#txt_name").val();
window.location = "tab-1.php?txt_value="+value;
});
</script>
</body>
</html>
save this file tab-1.php
<b><i>Hello : <?php echo $_GET['txt_value']; ?></i></b>
You're problem is probably the fact that you are using <a> tags
you don't need them
<nav>
<ul>
<li data-href="tab-1.html">Planet 1</li>
<li data-href="tab-2.html">Planet 2</li>
<li data-href="tab-3.html">Planet 3</li>
<li data-href="tab-4.html">Planet 4</li>
</ul>
</nav>
$(document).ready(function(){
$("li").click(function () {
$("main").load(this.dataset.href, function(){
$(this).hide().fadeIn(1000);
});
});
});
Here we get the value of that specific link href attribute, and inject it into the load function
NOTE: As I can't show a demo of it using fiddle or S.O code panel, here is a DEMO showing how this code works
$(document).ready(function () {
$("nav a").each(function () {
$(this).click(function (e) {
e.preventDefault();
var href = $(this).attr("href");
$("main").load(href).hide().fadeIn(1000);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav>
<ul>
<li>Planet 1
</li>
<li>Planet 2
</li>
<li>Planet 3
</li>
<li>Planet 4
</li>
</ul>
</nav>
<main></main>
I have this code in HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="cars_menu">
<li>Audi
<ul>
<li class="highlight">A4</li>
<li>A6</li>
<li>A3</li>
<li>A5</li>
</ul>
</li>
<li>Volkswagen
<ul>
<li>Golf IV</li>
<li>Golf VI</li>
<li>Golf V</li>
<li>Jetta</li>
</ul>
</li>
<li>BMW
<ul>
<li>E36</li>
<li>E60</li>
<li>E70</li>
<li>Z4</li>
</ul>
</li>
</ul>
</body>
</html>
CSS code:
.highlight {
color: red;
}
And my script file:
$( "ul.cars_menu li" ).click(function() {
$( this ).toggleClass( "highlight" );
});
Anyone know, how to change the color of AUDI, if I click on A4, A6 it should set the color of A4 AND AUDI to red and if for example I click on GOLF IV it needs to change of Volkswagen and GOLF IV to red and so on.
Anyone could help me with this? Appreciate, guys :)
Please change the html code to
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="cars_menu">
<li>Audi</li>
<li>
<ul class="model">
<li>A4</li>
<li>A6</li>
<li>A3</li>
<li>A5</li>
</ul>
</li>
<li>Volkswagen</li>
<li>
<ul class="model">
<li>Golf IV</li>
<li>Golf VI</li>
<li>Golf V</li>
<li>Jetta</li>
</ul>
</li>
<li>BMW</li>
<li>
<ul class="model">
<li>E36</li>
<li>E60</li>
<li>E70</li>
<li>Z4</li>
</ul>
</li>
</ul>
</body>
</html>
Jquery code to
$( "ul.model li" ).click(function() {
$( this ).parent().removeClass( "highlight" );
$( this ).toggleClass( "highlight" );
$( this ).parent().parent().prev('li').toggleClass( "highlight" );
});
Hope it will works!!!.
you need to wrap your jQuery in a :
$(document).ready(function() {
$('ul.cars_menu li').click(function() {
$( this ).toggleClass( "highlight" );
});
});
Reason for this - you need to wait for the DOM to finish loading before you can set the events on the elements further down the page...
$(document).ready event is when the DOM is finished loading & can be manipulated...
Editing to include js fiddle with some examples on how this can be done:
http://jsfiddle.net/7gdzLgam/
The answer on how to target parent elements using jquery that was the original question still applies to example above.
You should be able to use .parent() for this.
Something like:
$( this ).parent().toggleClass( "highlight" );
you can check the value of the li clicked by doing
$( "ul.cars_menu li" ).click(function() {
if ($( this ).text() == 'A4'){
//change css
}
});
The DOM elements will not be created when the js file is downloaded. Your javascript is correct but either you need to include your
<script src="script.js"></script>
at the end of body tag so that it will work.
This is because when the javascript is loaded it checks for the dom element which you have specified in the js file. It will not be able to find the element since the dom is not completely created. So it just neglects it.
Or else wrap the javascript inside
$(document).ready(function(){
//Your code here
});
so that js will not be executed unless the dom elements are created.
I have 5X5 text box with letters that randomly change every few seconds. I figured out how to make the box selectable. Now I want to be able to retrieve the letter that's appearing within the box at the time that I click. I'm new to coding, but after researching, I thought I could combine the .click function with the .text() function. I add a tag and tried to print the clicked letter within it. It's not working. I'm I using the .text() function incorrectly? I haven't used it before so I'm not sure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>LetterTouch</title>
</head>
<link rel = "stylesheet" type="text/css" href="gameboard.css">
<!-- <link href="scripts/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css"/>-->
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#squares").selectable();
});
var nIntervId;
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
function changeLetters() {
nIntervId = setInterval(boardGen, 1500);
}
function boardGen() {
$('li').each(function (i, e) {
$(e).text(letters.charAt(Math.floor(Math.random() * letters.length)));
})
}
$( "li" ).click(function() {
$( this ).text();
$( "p" ).html( );
});
changeLetters();
</script>
<body>
<ol id="squares">
<li class="A1"></li>
<li class="A2"></li>
<li class="A3"></li>
<li class="A4"></li>
<li class="A5"></li>
<li class="B1"></li>
<li class="B2"></li>
<li class="B3"></li>
<li class="B4"></li>
<li class="B5"></li>
<li class="C1"></li>
<li class="C2"></li>
<li class="C3"></li>
<li class="C4"></li>
<li class="C5"></li>
<li class="D1"></li>
<li class="D2"></li>
<li class="D3"></li>
<li class="D4"></li>
<li class="D5"></li>
<p> H </p>
</body>
</html>
Might be this is what you are trying to do http://jsfiddle.net/jogesh_pi/X24s9/
$("document").ready(function() {
$("#squares").selectable();
$( "#squares" ).on('click', 'li', function() {
var txt = $( this ).text();
$("p").html(txt);
});
});
Just pass the text of that clicked li element as the parameter of html() function gonna be run on behalf of the p tag.
Try,
$("#squares li").click(function() {
$("p").html($(this).text());
});
And also your html seems invalid, please try to close that <ol> tag
Since you're inserting the characters inside the li, you will want to use .text() to pick them up.
e.g.
$( "li" ).click(function() {
$( "p" ).html($(this).text());
});
what this does is that I took the html content of the li - referenced by $(this).text(), and assigned that to be the content of the p element. How .html() works is that placing a string parameter in it assigns that to its html content.
Simply use the .text() property.
$("p").html($(this).text());
when we click on sub menu parent menu should highlight. Please check my Javascript code. I am unable to get the result.Here i got the results only main menu highlighted. Please help me.Thanks in advance
<html>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active{
background: #4FA9E4; color:#FFF;
}
<ul id="id">
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
You forgot to close the style tag which is what caused the problem. Also I added some other tags you forgot like doctype and head tags. Validate your document http://validator.w3.org/ and you won't get problems like these anymore.
<!doctype html><html><head><title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {console.log(this.href);
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active{
background: #4FA9E4; color:#FFF;display:block;
}
</style>
</head><body>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body></html>
Something like this?
HTML:
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
JS:
$(function(){
$('#cssmenu li').click(function() {
if ($(this).hasClass('has-parent')){
var parent = $(this).closest('.has-sub');
parent.attr('class', 'active');
}
});
});
Styles:
.active{
background: #4FA9E4; color:#FFF;
}
Please see this fiddle.
add click function
$('#cssmenu a').unbind('click').click(function(){
$(this).addClass("active");
return false;
});
Sample here