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());
Related
I am using this as a template for JS which selects proper nav using JQuery, with this API reference.
My current code:
index.php
<html>
<head>
<title>ChillSpot Alpha 1.2.3</title>
<link rel="stylesheet" type="text/css" href="common/style.css">
<script type="text/javascript" src="common/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="background.js"></script>
<script type="text/javascript" src="common/navHighlight.js"></script>
<script type="text/javascript"> $( document ).ready( getImage );</script>
<script type="text/javascript"> $( document ).ready( setNavigation );</script>
</head>
<?php
include 'common/header.html';
?>
//More code, snipped from example: not relevant
common/navHighlight.js
<!--
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".menuList a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').removeClass('tab');
$(this).closest('li').addClass('tab selected');
}
});
}
//-->
common/header.html
<div class="menu">
<ul class = "menuList">
<li class="tab">Home</li>
<li class="tab">Communications</li>
<li class="tab">ChillCraft</li>
<li class="tab">Forum</li>
<li class="tab">Updates</li>
<li class="tab">About</li>
</ul>
</div>
<div class="content">
... this isnt working. What is different in my situation that causes the example to fail? All "li" elements end up with class "tab", none have "tab selected".
I'm not sure if this is actually what's wrong, but I do notice that the href's in their example all start with / while yours do not. Relative pathing could be why yours isn't working.
So if you change your html to this you might be fine:
<div class="menu">
<ul class = "menuList">
<li class="tab">Home</li>
<li class="tab">Communications</li>
<li class="tab">ChillCraft</li>
<li class="tab">Forum</li>
<li class="tab">Updates</li>
<li class="tab">About</li>
</ul>
</div>
My approach on these cases is as follows:
Add a unique id to each of your tabs (in addition to the class you already have)
On each specific file (index.php, common.php, forum.php, etc) create an object with your selected tab:
var selected = $('#forumTab');
Execute a function where you ensure to be removing the active class from all tabs and add it only to your current tab:
$('.tab').removeClass('active');
selected.addClass('active');
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.
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();
});
I am trying to create tooltips with the value of the tooltip pulled from the id attribute of each element. I have the first one firing off but I cannot get how to make the function continue to the next element matching the $("ul li)" in the test case below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello SO</title>
</head>
<body>
<ul>
<li id="label-1">1</li>
<li id="label-2">2</li>
<li id="label-3">3</li>
<li id="label-4">4</li>
</ul>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
var LabelData = $("ul li").attr("id");
var LabelContainer = $("li");
LabelContainer.html('Label Name:'+LabelData);
});
</script>
</body>
</html>
[And... heres the fiddle]
Try this:
$(function(){
$("ul li").each(function(){
var LabelData = $(this).attr("id");
var LabelContainer = $(this);
LabelContainer.html('Label Name:'+LabelData);
});
});
You can achieve your goal using following code snippet:
$(function(){
$("ul li").each(function(){
$(this).html($(this).attr('id'));
});
Here is DEMO.
I use jquery draggble function for unorderd list (ul) and face a problem of getting the order of items after it changed and setting the order ofter page is loaded.Suppose we have the following code :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$(".block").sortable({
axis: 'y',
update: function(event, ui) {// order changed
var order = jQuery(this).sortable('toArray');
// send this order to index.php and store it in db
}
});
});
</script>
</head>
<body>
<ul class="block" type="none">
<li id = "one">1</li>
<li id = "two">2</li>
<li id = "three">3</li>
<li id = "four">4</li>
<li id = "five">5</li>
</ul>
</body>
and the second file is
<html>
<head>
<script>
$('.secondblock').sortable({axis:'y'});
// get order from index.php and set it to .secondblock
</script>
</head>
<body>
<ul class="secondblock" type="none">
<li id = "one">1</li>
<li id = "two">2</li>
<li id = "three">3</li>
<li id = "four">4</li>
<li id = "five">5</li>
</ul>
</body>
</html>
Are there any possible solutions?
If you don't want to use that solution on the link I've commented, you can use this, much simpler:
function reorder(orderArray, elementContainer)
{
$.each(orderArray, function(key, val){
elementContainer.append($("#"+val));
});
}
orderArray: an array containing all ids in the order you want ( exactly what sortable( "toArray") returns)
elementContainer: is the jQuery object which contains your sortable items.
A working example here:
http://jsfiddle.net/ecP5k/1/