I created few unordered lists and a search bar above them. Now I want that as soon as I enter any letter (which is already existing in my list with the letter begining in it) in the search bar it should highlight the whole word or the line. I wrote code for them but its not working. I am following this tutorial
index.php class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p><input id="search" type="text"/></p>
<ul id="names">
<li>cat girl</li>
<li>dog man</li>
<li>rat kid</li>
<li>bird boy</li>
</ul>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/select.js"></script>
</body>
</html>
select.js class:
$(document).ready(function(){
$('#search').keyup()(function(){
var search=$(this).val();
$("#names li:contains('"+search+ "')").addClass('highlight');
});
});
style.css class
ul{
list-style:none;
margin:0;
padding:0;
}
.highlight{
background-color: blue;
}
You messed up your closure.
.keyup()(function() is wrong.
Try it like this:
$(document).ready(function () {
$('#search').keyup(function () {
var search = $(this).val();
$("#names li:contains('" + search + "')").addClass('highlight');
});
});
Demo: http://jsfiddle.net/qZ7XS/
Update, you should also read this: http://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/
Related
I am trying to use Fomantic ui "toast". How can i provide z-index to the setting of the Toast?
I have tried this 'it works normally but not on the site i am working on'
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body')
.toast({
message: 'I am a toast, nice to meet you !'
});
});
</script>
</head>
<body>
</body>
</html>
Give id to your body and handle via CSS like below.
#yourID {
background-color:rgba(255, 0, 0, 0.4);
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#yourID')
.toast({
message: 'I am a toast, nice to meet you !'
});
});
</script>
</head>
<body id="yourID">
</body>
</html>
Note: work with id , not with class.
The z-index for toast is given by the toast-container which already got z-index:9999 by default.
You can override this according to your needs (check your sites code for the highest z-index and add 1) by
.ui.toast-container {
z-index: 999999;
}
Every toast inside this container will inherit the z-index. To be even more sure you might add the z-index for every single toast as well
.ui.toast-container .toast-box {
z-index:999999;
}
I am using select2 in my project. As per design, I am removed the search box in selectbox2, but after removed search box, keyboard select option not works. Could any one help me to fix this. - Thanks
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
</head>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<body>
<div>Skills</div>
<select id="skills" style="width: 200px">
<option>html</option>
<option>css</option>
<option>js</option>
</select>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('#skills').select2({
minimumResultsForSearch: Infinity
});
});
</script>
</body>
</html>
JS Bin: http://jsbin.com/kipuzet/edit?html,output
Instead of
$('#skills').select2()
use
$('#skills').select()
That should work.
I cannot get this piece of code to work outside of jsfiddle. I dont understand why it doesn't work from my local server.
http://jsfiddle.net/gHb9F/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<style type='text/css'>
a, a:visited { color:black }
a.link.active { color:blue; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$('a.link').click(function() {
$('a.link').removeClass('active');
$(this).addClass('active');
});
});
});//]]>
</script>
</head>
<body>
Link 1
Link 2
</body>
</html>
What am I doing wrong?
probably you are not including correctly the jquery link into your html, try to add this line into your head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
So I have the following index.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="public/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="public/js/main.js"></script>
</body>
main.js
(function($){
// Object declarations goes here
var FormLoanView = Backbone.View.extend({
tagName: 'div',
template: _.template('<p class="text-uppercase">Uppercased text.</p>'),
initialize: function(){
var data = this.$el.html(this.template())
$('body').html(data)
}
})
$(document).ready(function () {
var LoanView = new FormLoanView({
});
});
})(jQuery);
I am trying to create <p class="text-uppercase">Uppercased text.</p> and append it to the body in my index.html. It does return the p element, but the bootstrap styles don't kick in because "Uppercased text." does not return with uppercase letters. Anyone know why this is happening? Can bootstrap classes not be using in _.template?
It looks like your bootstrap.css isn't included properly. Try using the CDN or fixing the relative path of the css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="public/js/main.js"></script>
</body>
Here's an example using only the CSS: https://jsfiddle.net/9nm5f0x9/
You don't need to include the bootstrap JS file as another commenter stated.
I tried putting the exact .html and .js codes online and hosting it myself.
I want to replicate this example: http://www.codecademy.com/courses/javascript-intermediate-en-txGOj/0/2?curriculum_id=50ecb9bedc5e3250c40000c6
You can view my code at www[dot]whatsgucci[dot]com/cloudstalk.html
Here's thee code I used:
HTML:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stalkstyle.css"/>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="stalkscript.js"></script>
</head>
<body>
<ul id="results">
</ul>
</body>
</html>
CSS:
#results {
color: #000000;
font-weight: bold;
font-family: cursive;
}
JS:
SC.initialize({
client_id: '5e3fe3759c70fe637cb15bab22e238e0'
});
$(document).ready(function() {
SC.get('/tracks', { genres: 'festival trap' }, function(tracks) {
$(tracks).each(function(index, track) {
$('#results').append($('<li></li>').html(track.title + ' - ' + track.genre));
});
});
});
But nothing ends up appearing
Where exactly did you add
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
your example is currently broken with out adding jquery. you have to add jquery above the soundcloud sdk import like this:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="stalkstyle.css"/>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="stalkscript.js"></script>
</head>
<body>
<ul id="results">
</ul>
</body>
</html>
you can see your working example here:
http://runnable.com/UzetnvwmO3pX9Eiq/code-academy-how-to-make-this-soundcloud-api-example-to-work-irl
Include Jquery library in your code
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>