I am doing a course on DOM Event manipulation.
I am trying to make a todolist where the color of the li changes when I hover on it.
My problem is that the color changes when I click on the element and not when I hover on it. Thank you in advance.
I have the following js:
var lis = document.querySelectorAll("li");
for(var i = 0; i < lis.length; i++){
lis[i].addEventListener("mouseover", function(){
this.classList.add("selected");
});
lis[i].addEventListener("mouseout", function(){
this.classList.remove("selected");
});
lis[i].addEventListener("click", function(){
this.classList.toggle("done");
})
}
.done {
text-decoration: line-through;
opacity: 0.5;
}
.selected {
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Todo List Demo</title>
<link rel="stylesheet" type="text/css" href="todos.css">
</head>
<body>
<ul>
<li>Wash cat</li>
<li>Feed Cat</li>
<li>Feed cat to dog</li>
</ul>
<script type="text/javascript" src="todos.js"></script>
</body>
</html>
Html part:
<ul>
<li onmouseenter="enter(0)" onmouseout="out(0)">Milk</li>
<li onmouseenter="enter(1)" onmouseout="out(1)">Eggs</li>
<li onmouseenter="enter(2)" onmouseout="out(2)">Fruits</li>
</ul>
Js:
function enter(x) {
document.getElementsByTagName('li')[x].style.color = "red"
}
function out(y) {
document.getElementsByTagName('li')[y].style.color = "black"
}
By The way I just tested the code and It worked! :)
Related
I am trying to make from an array of scrambled sentences unordered lists to apply sortable JS in the following format
<ul id="sortable" class="div3">
<li id = 'number'> </li>
<li id="1" class="ui-state-default">The</li>
<li id="2" class="ui-state-default">piano</li>
<li id="3" class="ui-state-default">play</li>
<li id="4" class="ui-state-default">I</li>
</ul>
<script>
So far I have come up with the following which does not give the correct format
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>my array to list attempt</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
li {
list-style:none;
display: inline;
}
</style>
</head>
<body>
<script>
function makeQuest() {
var quest=['I play piano the can', 'tired I am', 'are seven there week in a days'];
for (var i=0; i< quest.length; i++){
document.write('<ul class ="div3">')
document.write('<li id = "number">' + (i + 1) + ' '+ '</li>')
for (var j=0; j < quest[i].length; j++){
document.write('<li>' + quest[i][j] + '</li>')
document.write('</ul>')
}
}
};
$(function makeSort() {
$( ".div3" ).sortable({
items: "li:not(#number)"
});
$( ".div3" ).disableSelection();
});
</script>
<script>
makeQuest()
makeSort()
</script>
</body>
</html>
I am not a programmer : just trying to make a language tutor for personal use. Thank you for any help
This is working for me, and is sortable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>my array to list attempt</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
li {
list-style:none;
display: inline;
}
</style>
</head>
<body>
<ul id="sortable" class="div3">
<li id = 'number'> </li>
<li id="1" class="ui-state-default">The</li>
<li id="2" class="ui-state-default">piano</li>
<li id="3" class="ui-state-default">play</li>
<li id="4" class="ui-state-default">I</li>
</ul>
<script>
$(function makeSort() {
$( ".div3" ).sortable({
items: "li:not(#number)"
});
$( ".div3" ).disableSelection();
});
</script>
</body>
</html>
I have problems referencing an element in app-drawer with JS.
As long as my function is referencing an element outside of app-drawer, there is no problem. But whenever I want to change an element inside app-drawer, I am getting an 'undefined' TypeError for it.
I have made a reduced bin here.
Steps to reproduce issue
Click on caron(icon). Here you can see that a list appears.
Click on the text click to toggle drawer to toggle the drawer
You'll notice another caron in the drawer.
When you click on caron in drawer a similar list should appear, but it does not. Instead there's an error in the console.
<!doctype html>
<head>
<meta charset="utf-8">
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="iron-media-query/iron-media-query.html">
<link rel="import" href="app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="app-layout/app-drawer/app-drawer.html">
<link rel="import" href="app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="app-layout/app-header/app-header.html">
<link rel="import" href="app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
</head>
<body>
<dom-module id="x-foo">
<template>
<style>
app-drawer {
background-color: green;
color: blue;
}
span {
font-size: 2rem;
color: green
}
span:last-of-type {
position: relative;
font-size: 3.5rem;
top: 1.5rem;
left: .5rem;
color: red
}
#headerList,
#drawerList {
display: none;
}
h1 {
color: orange
}
h2 {
color: blue;
}
</style>
<iron-media-query query="max-width: 1024px" query-matches="{{smallScreen}}"></iron-media-query>
<app-drawer-layout drawer-width="300px" fullbleed force-narrow>
<app-drawer swipe-open opened="false">
<div class="drawer-contents">
<template is="dom-if" if=[[smallScreen]]>
<h2>(this is app-drawer)</h2>
<span>tap the glyph inside app-drawer:</span>
<span on-tap="tapGlyph1">ˇ</span>
<ul class="myList" id="drawerList">
<li>Austria</li>
<li>Switzerland</li>
<li>Slovenia</li>
</ul>
</template>
</div>
</app-drawer>
<app-header-layout>
<app-header>
<app-toolbar main-title>
<h1 drawer-toggle>click to toggle drawer</h1>
</app-toolbar>
<h2>(this is app-header)</h2>
<span>tap a glyph inside app-header:</span>
<span on-tap="tapGlyph2">ˇ</span>
<ul id="headerList">
<li>Australia</li>
<li>Switzerland</li>
<li>Slovenia</li>
</ul>
</app-header>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'x-foo',
tapGlyph1: function() {
this.$.drawerList.style.display = "block";
},
tapGlyph2: function() {
this.$.headerList.style.display = "block";
}
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Problem is not app-drawer but dom-if. Elements/Markups inside dom-if or dom-repeat are generated dynamically and thus cannot be accessed using hash by id. In order to access them one need to use $$ selector which is equivalent to querySelector. You can read about it here
Changing code with
this.$$('#drawerList') should solve your issue
I've created a simple "helloworld" web component, in that I put a "button" tag and I want that button to be clicked by triggering it but i'm unable to trigger it. What am I doing wrong?
Here is my code for "Index.html" file in which i've called my Own component and values for my button:
<!doctype html>
<html>
<head>
<title>First Polymer component</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="bower_components/lib/jquery-1.11.2.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap-theme.css" />
<script src="bootstrap_theme/js/bootstrap.js"></script>
<link rel="import" href="hello-world.html">
<script>
var button_data = [{
"name": "litrary vocabulary",
"span_id": "mostbasic",
"description": "This is a sample description about litrary vocabulary"
}, {
"name": "no contractions",
"description": "This is a sample description about no contractions"
}];
window.addEventListener('WebComponentsReady', function(e) {
var element = document.querySelector('hello-world');
element.buttonsdata = button_data;
});
</script>
</head>
<body>
<hello-world> </hello-world>
<script>
$('.answerButtons').trigger("click");
function k12() {
window.open("http://www.w3schools.com");
}
</script>
</body>
</html>
And the 2nd file contain code for my web component:
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<style>
p {
color: red;
}
</style>
<template>
<template is="dom-repeat" items="{{buttonsdata}}" as="button_data">
<button type="button" class="btn btn-info answerButtons" onclick = "k12()">{{_getButtonName(button_data)}} </button>
</template>
<p>This is my first own component </p>
<p>This is my first ....... </p>
<p>Kumaran is IDIOT </p>
</template>
<script>
Polymer({
is: 'hello-world',
_getButtonName: function(buttondata) {
return buttondata.name;
}
});
</script>
</dom-module>
button_data should be a property in hello-world
onclick should be on-click for Polymer binding https://www.polymer-project.org/1.0/docs/devguide/events.html
I am having lots of problem accessing any objects from a Yahoo Boss YQL Json Response data. I used this YQL Console for Boss Search Tables.
Here is what I have done:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20boss.search%20where%20service%20%3D%22images%22%20AND%20count%3D%221%22%20AND%20q%3D%22iphone6%22%20AND%20ck%20%3D%20%22MYCONSUMER_KEY%22%20AND%20secret%3D%22MYCONSUMER_SECRET%22%3B&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
(function showPix()
{
$.getJSON(url, function (data)
{
console.log(data);
var myObj = data.results.bossresponse.images.results.result.clickurl;
$.each(myObj, function ()
{
$('#pix').append(this);
});
});
})();
</script>
</head>
<body>
<div id="pix">
</div>
<button onclick="showPix();">run</button>
</body>
</html>
The console.log(); gives me one object that contains the image, but I cannot manage to show the image on the screen. And it tells me that showPix is undefined. Any help would be greatly appreciated. TIA
I figured this out as follows:
<html>
<head><title>YQL and RSS: Yahoo Top News Stories</title>
<style type='text/css'>
#results{ width: 40%; margin-left: 30%; border: 1px solid gray; padding: 5px; height: 200px; overflow: auto; }
</style>
<script type='text/javascript'>
// Parses returned response and extracts
// the title, links, and text of each news story.
function top_stories(o){
var items = o.query.results.item;
var output = '';
var no_items=items.length;
for(var i=0;i<no_items;i++){
var title = items[i].title;
var link = items[i].link;
var desc = items[i].description;
output += "<h3><a href='" + link + "'>"+title+"</a></h3>" + desc + "<hr/>";
}
// Place news stories in div tag
document.getElementById('results').innerHTML = output;
}
</script>
</head>
<body>
<!-- Div tag for stories results -->
<div id='results'></div>
<!-- The YQL statment will be assigned to src. -->
<script src='https://query.yahooapis.com/v1/public/yql?q=select%20title%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22&format=json&callback=top_stories'></script>
</body>
I'm using jQuery 1.4.2 for a fixed bar on my site that scrolls with the site as you scroll.
But I'm also using 1.6.1 for a facebook thing I'm doing, and when I add them together, the bar breaks and the facebook thing works, but when I add the noConflict in, the bar works, but the facebook breaks, so if you could look at my code, and help me?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="themes/default/jx.stylesheet.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict();
</script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
mc$(document).ready(function() {
mc$("#floating-bar").jixedbar();
});
</script>
<style type="text/css">
body {
margin: auto;
background-image: url(template.png);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<div id="floating-bar">
<ul>
<li title="Home"><img src="icons/home.png" alt="" /></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Around The Web"><img src="icons/network.png" alt="Share" />
<ul>
<div id="fb-root"></div>
<!-- USE 'Asynchronous Loading' version, for IE8 to work
http://developers.facebook.com/docs/reference/javascript/FB.init/ -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '209445949091775',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<li><a id="share_button" href="#"><img src="icons/facebook.png" title="Facebook" /> Facebook</a></li>
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'Atomic Star Studios',
link: 'http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829',
picture: 'http://www.atomicstarstudios.com/logo.jpg',
caption: 'http://www.atomicstarstudios.com/',
description: 'This is the content of the "description" field, below the caption.',
message: 'Visit Atomic Star Studios for excellent prices on great printg and professional design! We Have All Your Marketing Needs!!!'
});
});
});
</script>
<li><img src="icons/twitter.png" title="Twitter" /> Twitter</li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title"Top Pages">Top Pages
<ul>
<li title="About"><img src="icons/info.png" alt="About" /></li>
<li title="Products"><img src="icons/blogs.png" alt="Products" /></li>
<li title="Portfolio"><img src="icons/block.png" alt="Portfolio" /></li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<div class="text-container">Like us on Facebook!</div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829&layout=button_count&send=true&show_faces=false&width=100&action=like" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:30px;" allowTransparency="true"></iframe>
Follow #atomstars
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<span class="jx-separator-left"></span>
<ul>
<li title="Facebook"><img src="icons/facebook.png" alt="" /></li>
<li title="Twitter"><img src="icons/twitter.png" alt="" /></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Chat with us Live!"><img src="http://www.atomicstarstudios.com/livezilla/image.php?id=04&type=inlay"></li>
</ul>
<span class="jx-separator-right"></span>
</div>
</body>
</html>
There are two problems with your code.
First, you should call the noConflict in-between both jQuery requests, not after the second one. You need to load the modules you need with each version of jQuery with the version so that when you call noConflict, references to the plugins are moved with it. You should also add "true" to noConflict so that all references to jQuery are removed before loading the second one:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
For more information, see the jQuery.noConflict documentation.
With that said, you should really consider find a way to not have to do this. It is not an elegant way to use jQuery.
TO ANSWER #TGR: Try this for yourself and you'll see for yourself that my solution works perfectly fine:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jixedbar.googlecode.com/svn/trunk/src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
alert('jQuery ' + mc$.fn.jquery + ': ' + ( typeof mc$.fn.jixedbar ));
alert('jQuery ' + jQuery.fn.jquery + ': ' + ( typeof jQuery.fn.fixedbar ));
});
</script>
<title>6367968</title>
</head>
<body>
<p>6367968</p>
</body>
</html>
The first alert will show "jQuery 1.4.2: function" while the second one will show "jQuery 1.6.1: undefined".
load jQuery 1.4
load all plugins which need to use 1.4
use noConflict
load jQuery 1.6
The problem is that jQuery plugins tend to be written this way:
(function($) {
// plugin code using $ for jQuery calls
})(jQuery)
i. e. they have an internal copy of whatever window.jQuery was at the time the plugin loaded, and you cannot change that afterwards.
update: a little more detail on how noConflict works (was too long for the comments). When you load jQuery, it creates an object containing all its functions and data, and sets window.$ and window.jQuery to that object. The old value of window.$ and window.jQuery is saved in the object.
When you call noConflict, it restores the saved value (by default for $; if you call it with true, also for jQuery). This is useful if you had something in those variables before loading jQuery, and don't want it to be overwritten. E.g. if you loaded things like this:
load jQuery 1.6
load jQuery 1.4
call noConflict(true)
then the first step would put jQuery 1.6 into $ and jQuery, the second would overwrite them with 1.4, and noConflict would restore $ and jQuery to the 1.6 version.
But since you load 1.4 first, and call noConflict between the two, the old value for $ and jQuery which is restored is undefined, which is not particularly useful, and will be overwritten by 1.6 anyway, so the noConflict call does not do anything useful beyond returning the value of $ which then can be stored by some other name ($mc in this case). var $mc = $; would work just as well for that.
As for the plugins, the auto-executing function copies the value of window.jQuery at the moment the plugin is loaded, and it does not matter at all what happens to window.jQuery afterwards:
window.jQuery = 'foo';
(function($) {
window.fun = function () {
console.log($);
}
})(jQuery);
window.jQuery = 'bar';
fun(); // will log 'foo'