I tried to add a function to the selectable jquery ui dynamically. I tried to generate the selectable list dynamically and assigned an function to it. The alert message from myFUnction should popped up when I clicked the list, but for some reason it only works in Firefox. The alert is not popping out in chrome or IE. Any idea why is it not working on chrome or IE?
cheers,
<html>
<head>
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$document.ready(function() {
$("#myButton").button();
});
function generate(){ //generate a selectable list
$content=$("<ol id='selectable'>");
for (a=0;a<3;a++)
{
$content.append("<li class='ui-widget-content' onclick='myFunction()'>item"+a+"</li>");
}
$content.append("</ol>");
$("#myList").append($content);
$( "#selectable" ).selectable();
}
function myFunction()//simple alert msg
{
alert("Hello World!");
}
</script>
</head>
<body>
<div id='myList'/>
<div id='myText'/>
<button id="myButton" onClick="generate()">Generate List</button>
</body>
</html>
I see several problems with your code.
1: Where is $document declared? I think you meant
$( document )
2: You should never declare variables in global-space from with-in your functions.
$content=$("<ol id='selectable'>");
Declares $content in the global scope not inside the function as you probably meant to do.
var $content=$("<ol id='selectable'>");
Note the keyword "var".
3: Don't use inline events in your HTML, bind the events via JavaScript http://api.jquery.com/on/
4: I'd advise you to use jslint or jshint to check your JS-code for these types of errors.
Related
I am trying to add a floating top button in Dreamweaver. As it will be used on many pages, I want the script to be in a separate .js file. I am admittedly a complete amateur and this is my first time using javascript.
HTML code includes:
<link href="common.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="common.js"></script>
<button onclick="topFunction()" id="TopBtn" title="Go to top">Top</button>
My common.css file includes:
#TopBtn {
display: none;
position: fixed;
bottom: 1.25em;
right: 1.5em;
z-index: 99;font-size: 1em;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 1em;
border-radius: .5em;
opacity: 0.5;
}
#TopBtn:hover {
background-color: #555;
opacity: 1;
}
and my common.js file includes:
//Get the button
var mybutton = document.getElementById("TopBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
But it just doesn't work!! It works just fine with the script all in the HTML file, but not when linked to as separate .js. Any help welcome.
Here is a working snippet of your code, comments have been added where necessary. Run it to see the code in action.
//Get the button
var mybutton = document.getElementById("TopBtn");
//Declare body and html as vars
//Some browsers apply scroll to body, and others apply scroll to html so we are getting both
var body = document.body
var html = document.documentElement;
// When the user scrolls down 20px from the top, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if ( body.scrollTop || html.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top
function topFunction() {
body.scrollTop = 0;
html.scrollTop = 0;
}
#TopBtn {
display: none;
position: fixed;
bottom: 1.25em;
right: 1.5em;
z-index: 99;font-size: 1em;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 1em;
border-radius: .5em;
opacity: 0.5;
}
#TopBtn:hover {
background-color: #555;
opacity: 1;
}
body {
height: 2000px;
width: auto;
background-color: blue;
color: white;
overflow: scroll;
}
<div onscroll="scrollFunction();">
Scroll the page
</div>
<button onclick="topFunction()" id="TopBtn" title="Go to top">Top</button>
Additionally, in your coding environment, you can import scripts into your HTML file in a format similar to the below:
<!DOCTYPE html>
<HTML>
<head>
<!-- import additional CSS along with other meta data, etc.. in the head -->
<link href="common.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Everything else that makes the body of your document can go within the body tags -->
<button onclick="topFunction()" id="TopBtn" title="Go to top">Top</button>
<script type="text/javascript" src="common.js"></script>
</body>
</html>
You're trying to get your button by ID before the button exists in the page. As you're loading your script before your button.
Couple of options:
Move your script to the bottom of the page just before closing <html> tag
Add defer to your script tag inside your HTML
Put your getElementByID call inside a DOMContentLoaded event.
An example of option 3:
var mybutton; // declare variable outside the callback to keep in the global scope.
document.addEventListener('DOMContentLoaded', function(){
mybutton = document.getElementById("TopBtn");
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery/jquery.js"></script>
<style type="text/css" rel="stylesheet">
#btn {
background: green;
color: #fff;
padding: 15px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<script>
$(() => {
$("#btn").click(() => {
if ($("#btn").hasClass("green")) {
$("#btn").css("backgroundColor", "red");
}
else if ($("#btn").hasClass("red")) {
$("#btn").css("backgroundColor", "green");
}
});
});
</script>
<button id="btn">Button</button>
</body>
</html>
I want the button to change its color either to red if it's green or to green if it's red. So I use toggleClass() to implement that.
Question: why doesn't it work?
It is almost certainly working but there are no CSS rules for the class "background" in the code you posted. The function is for adding/removing an entry from the class list of an element, not for directly manipulating style object properties.
If you do switch from .toggleClass() to .css(), you'll find that switching a property from one value to another immediately will have no visible effect. The browser will effectively ignore the first update.
Your are change class name using toggle not the rule within the class. But you can iverride it by adding inline style, like:
$("#btn").css("background", "red");
$(() => {
$("#btn").click(function () {
const bgColor = this.style.backgroundColor;
$(this).css("backgroundColor", bgColor === 'green' ? "red" : "green");
});
});
#btn {
color: #fff;
padding: 15px;
font-size: 24px;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" style="background-color:green;">Button</button>
It is perfectly correct to use the .toggleClass() method...
But the argument is a string of space separated classnames.
And, of course, you have to define those class rules in your style sheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--script src="../jquery/jquery.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css" rel="stylesheet">
#btn {
/*background: green;*/
color: #fff;
padding: 15px;
font-size: 24px;
font-weight: bold;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<script>
$(() => {
$("#btn").click(() => {
$("#btn").toggleClass("red green");
});
});
</script>
<button id="btn" class="green">Button</button>
</body>
</html>
I am creating a window pop up using Kendo, however, this window should only be shown when the user has clicked the button. The code that is shown to you makes the window automatically open when the web page is requested. i have done some research but found nothing, Any ideas?
More info: This is going to be used for a form and going to have a signature pad inside so when the pad (window) has been signed the cell in the table (The click here to sign) shall be replaced with the signature.
.cshtml,
<style>
#example {
min-height: 500px;
}
#undo {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.armchair {
float: left;
margin: 30px 30px 120px 30px;
text-align: center;
}
.armchair img {
display: block;
margin-bottom: 10px;
}
.k-window-content a {
color: #BBB;
}
.k-window-content p {
margin-bottom: 1em;
}
##media screen and (max-width: 1023px) {
div.k-window {
display: none !important;
}
}
</style>
<table>
<tr>
<td>
<div id="example">
<div id="window">
<H1>This is the window</H1>
</div>
<span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to sign</span>
<div class="responsive-message"></div>
</div>
</td>
</tr>
</table>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
var myWindow = $("#window"),
undo = $("#undo");
undo.click(function () {
myWindow.data("kendoWindow").open();
undo.fadeOut();
});
function onClose() {
undo.fadeIn();
}
myWindow.kendoWindow({
width: "600px",
title: "About Alvar Aalto",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center().open();
});
</script>
I now have this button:
Click here to open the window.
and this function:
$("#open").click(function (e) {
myWindow.data("kendoWindow").open();
});
However it does not open the window?
The window is opening right away because you are explicitly telling it to open right away:
myWindow.kendoWindow({
....
}).data("kendoWindow").center().open();
myWindow.kendoWindow({ == turn myWindow into a Kendo Window
.data("kendoWindow") == get a reference to that Kendo Window
.center().open() == center it on screen(still hidden) and OPEN it.
Remove the .center().open() from your intitialization code and have it only on the button click.
https://dojo.telerik.com/#Stephen/uXeJe
Is there anyway to remove an annoyance clickable Ads body link?
Example:
$('#test').ready(function(){
$( 'body' ).click( function ( e ) {
if ( this === e.target ) {
window.location = 'http://www.google.com/';
}
});
});
body { background: #f00; margin: 0px; padding: 0px; width:100%; height:1000px; cursor: pointer; }
<html>
<head>
<title>
test
</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
</head>
<body>
</body>
</html>
Thank you.
You can remove all event listeners form an element by assigning its outerHTML to itself.
var body = document.body;
body.outerHTML = body.outerHTML;
But there is not way to remove one anonymous listener alone.
I am new to HTML/CSS/JavaScript/Jquery/
I have an array of div tags which are represented as boxes. I would like to change the colour of the boxes when I hover over them but I am not sure how to access each div tag and change its properties.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script3.js"></script>
<body>
<div class="wrapper">
</div>
</body>
</head>
</html>
CSS:
body
{
background:#000;
}
.square
{
display: table-cell;
vertical-align: middle;
text-align: center;
border:2px solid #73AD21;
height: 2.5rem;
width: 2.5rem;
background-color: white;
}
Javascript/Jquery:
$(document).ready(function() {
for(i=0; i<16; i++) {
$('.wrapper').append('<div class="line">');
for(j=0; j<16; j++) {
$('.wrapper').append('<div class="square">'+j+'</div>');
}
$('.wrapper').append('</div>');
}
/*$('.wrapper').hover(function()) {
$(this).css("background","#F00");
}*/
});
When I add the commented lines in Javascript/Jquery section, the whole webpage becomes black.
When I add the commented lines in JavaScript/jQuery section, the whole webpage becomes black.
That's because there is a syntax error. When this occurs, none of the .square elements are being appended, which is exactly why you are seeing a blank page.
The .hover() method expects two functions as parameters (a hover-in, and hover-out callback). Therefore it seems like you want the following:
Example Here
$('.wrapper .square').hover(function() {
$(this).css("background", "#f00");
}, function() {
$(this).css("background", "#fff")
});
However, you can do this with pure CSS using the :hover pseudo-class. You don't actually need jQuery for this.
Example Here
.square:hover {
background-color: #f00;
}
There is some syntactical error in your code on commented lines.
This is correct one
$(document).ready(function() {
for(i=0; i<16; i++) {
$('.wrapper').append('<div class="line">');
for(j=0; j<16; j++) {
$('.wrapper').append('<div class="square">'+j+'</div>');
}
$('.wrapper').append('</div>');
}
$('.square').hover(function() {
$(this).css("background","#F00");
},function(){
$(this).css("background","#fff");
});
});
WORKING FIDDLE
Hope you want this...
$(document).ready(function() {
for(i=0; i<16; i++) {
$('.wrapper').append('<div class="line">');
for(j=0; j<16; j++) {
$('.wrapper').append('<div class="square">'+j+'</div>');
}
$('.wrapper').append('</div>');
}
$('.wrapper').on('hover','.square',function() {
$(this).css("background","#F00");
});
$('.wrapper').on('mouseleave','.square',function() {
$(this).css("background","#FFF");
});
});
body
{
background:#000;
}
.square
{
display: table-cell;
vertical-align: middle;
text-align: center;
border:2px solid #73AD21;
height: 2.5rem;
width: 2.5rem;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script3.js"></script>
<body>
<div class="wrapper">
</div>
</body>
</head>
</html>
That is because you have a syntax error on this line
$('.wrapper').hover(function()) {
$(this).css("background","#F00");
}
You are closing the hover function before you call the $(this).css function so the "this" that is being selected is the body. It should be:
$('.square').hover(function() {
$(this).css("background","#F00");
}, function() {
$(this).css("background","#FFF");
});