Why does javascript work fine here: Fiddle
But not when I save it and wrap javascript in script html tags inside body tags, and then open in a browser. Checkboxes don't respond and all columns are shown in browser, whereas some columns should be hidden by default.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>čezožinski odnosi</title>
<link rel="stylesheet" type="text/css" href="timeline.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script>
$(document).ready(function() {
if($("#opt1").is(":checked")){
$("#col1").show();
$(".data1").show();
}else{
$("#col1").hide();
$(".data1").hide();
}
if($("#opt2").is(":checked")){
$("#col2").show();
$(".data2").show();
}else{
$("#col2").hide();
$(".data2").hide();
}
if($("#opt3").is(":checked")){
$("#col3").show();
$(".data3").show();
}else{
$("#col3").hide();
$(".data3").hide();
}
if($("#opt4").is(":checked")){
$("#col4").show();
$(".data4").show();
}else{
$("#col4").hide();
$(".data4").hide();
}
$("#opt1").live('click', function() {
if($("#opt1").is(":checked")){
$("#col1").show();
$(".data1").show();
}else{
$("#col1").hide();
$(".data1").hide();
}
});
$("#opt2").live('click', function() {
if($("#opt2").is(":checked")){
$("#col2").show();
$(".data2").show();
}else{
$("#col2").hide();
$(".data2").hide();
}
});
$("#opt3").live('click', function() {
if($("#opt3").is(":checked")){
$("#col3").show();
$(".data3").show();
}else{
$("#col3").hide();
$(".data3").hide();
}
});
$("#opt4").live('click', function() {
if($("#opt4").is(":checked")){
$("#col4").show();
$(".data4").show();
}else{
$("#col4").hide();
$(".data4").hide();
}
});
});
</script>
</head>
It seems that you have not included jquery.js file in to your example, in the reference JSFiddle example they have included jQuery 1.7.2,
<script>
$(document).ready(function() {
</script>
to run above code jquery file should be included into your document.
You are referring Jquery 1.11+, and using $("#opt4").live(..)
Live is depricated on Jquery 1.7+
use $("#opt4").on() instead. (use .on wherever you used .live)
see this is working.
Related
I use the below code to destroy the editor instance.
editor.destroy();
After this, I try to initialize CKEditor and set content using the below code.
CKEDITOR.replace('editor1');
CKEDITOR.instances['editor1'].setData("MY HTML DATA");
But when I am doing like this only the empty HTML page is Shown.
How can I do this in a Correct Way?
If i understand you correctly, following fiddle will help you in initializing and destroying ckeditor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
</head>
<body>
<div name="editor1">TEST CONTENT</div>
<button id="toogleEditor">
TOOGLE EDITOR
</button>
</body>
</html>
Here is the JS
var editorInstance;
document.getElementById('toogleEditor').addEventListener('click',function() {
if (CKEDITOR) {
if (editorInstance) {
editorInstance.destroy();
editorInstance = undefined;
} else {
editorInstance = CKEDITOR.replace('editor1');
editorInstance.setData("MY HTML DATA");
}
}
})
Fiddle
Operations you have described require time to complete thus please use events to control when editor gets created and destroyed:
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#event-instanceReady
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR.html#event-instanceDestroyed
var editor = CKEDITOR.replace( 'editor1', {
language: 'en'
});
// Recreate editor after it has been destroyed
CKEDITOR.on( 'instanceDestroyed', function() {
CKEDITOR.replace('editor1');
} );
// Set editor data after it has been created
CKEDITOR.on( 'instanceReady', function( evt ) {
evt.editor.setData("MY HTML DATA");
} );
I've wanted to attach click event to an object not yet added to the DOM like here.
I've used a code from the answer but nothing happens when I click anything.
Here's my HTML:
<html>
<head>
<script src="resources/js/components/jquery/jquery-3.1.1.min.js"></script>
<script src="file.js"></script>
</head>
<body>
asl;kdfjl
<div id="my-button">sdgdf</div>
</body>
</html>
JavaScripts are in those location and I can see them in Sources tab in Chrome.
My file.js has content exactly copy-pasted from jsfiddle:
$('body').on('click','a',function(e){
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$('body').on('click','#my-button',function (e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
As your code is in the head tag, you need to use a DOM ready wrapper to ensure your code executes after the DOM has rendered elements.
The jsfiddle doesn't have it because the fiddle is set to run the code onload already.
$(function(){
$('body').on('click','a',function(e){
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$('body').on('click','#my-button',function (e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
});
Your code working with snippet .Better use with document.ready.Post you js after document.ready .And change the selector document instead of body
$(document).ready(function() {
$(document).on('click', 'a', function(e) {
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$(document).on('click', '#my-button', function(e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
asl;kdfjl
<div id="my-button">sdgdf</div>
This question already has answers here:
Javascript - arrow functions this in event handler?
(4 answers)
Closed 5 years ago.
Background
I'm just giving jQuery a go and for an hour, I could not hide an element using $([selector]).hide([milliseconds]), which in my sample code, is called when I click the element, in this case the anchor tag <a>. But I got it working in the end, but I don't understand why so. The only change I needed to make using the function keyword, instead, so this:
Note: Examples used this not "a", see edits
event => {
$(this).hide(2000);
}
into this
function(event){
$(this).hide(2000);
}
Question
Why does using function work and using an 'arrow' function doesn't? Is there a difference between the two?
My source code, for testing:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
a.test{
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!--<script src="https://code.jquery.com/jquery-1.10.2.js"></script>-->
</head>
<body>
jQuery
<script>
// $(document).ready(function () {
// // $("a").click(event => {
// // alert("Thanks for visiting!");
// // //prevents the opening of the link (what are the default events of other events types?)
// // event.preventDefault();
// // //Special Effects - http://api.jquery.com/category/effects/
// // });
// });
$("a").click(function(event){
event.preventDefault();
$( this ).hide(2000);
});
$("a").addClass("test");
</script>
</body>
</html>
Arrow function does not create a new scope tethered to this. So, to get around this, just use a normal function (like bellow). Alternatively, you could do $(event.currentTarget).hide(2000); inside your arrow function.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
a.test{
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!--<script src="https://code.jquery.com/jquery-1.10.2.js"></script>-->
</head>
<body>
jQuery
<script>
$("a").click(function(event) {$(this).hide(2000)});
$("a").addClass("test");
</script>
</body>
</html>
This may be a really dumb question but I'm having trouble including a jquery plugin in my code.
The plugin I'm referring to is: http://davidlynch.org/projects/maphilight/docs/
I want to mimic something very similar to the following:
http://jsfiddle.net/keith/PVpgK/
But when I copy the code over, I keep getting error messages saying "maphilight is not a function"
How do I use a jquery plugin in my code? Thank you
$(function() {
//using the jquery map highlight plugin:
//http://davidlynch.org/js/maphilight/docs/
//initialize highlight
$('.map').maphilight({strokeColor:'808080',strokeWidth:0,fillColor:'00cd27'});
//hover effect
$('#maplink1').mouseover(function(e) {
$('#map1').mouseover();
}).mouseout(function(e) {
$('#map1').mouseout();
}).click(function(e) { e.preventDefault(); });
// initialize tabbing
$(".tabs area:eq(0)").each(function(){
$(this).addClass("current");
});
$(".tab-content").each(function(){
$(this).children(":not(:first)").hide();
});
//map clicks
$(".tabs area").click(function(){
//This block is what creates highlighting by trigger the "alwaysOn",
var data = $(this).data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
//there is also "neverOn" in the docs, but not sure how to get it to work
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
});
You need to include the link to jquery in your html header.
1) Download jquery from jQuery.com
2) Link to downloaded file in your header
Like so:
<head>
...
<script src="/path/to/jquery-1.11.3.min.js"></script>
...
</head>
As the previous answer. But put them in the bottom of the body tag.
<html>
<head>
</head>
<body>
<script src="../path/to/jquery-1.11.3.min.js"></script>
<script src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
</body>
</html>
you need to add the following to the header of your html code
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js">
</script>
I am having a problem with my code, which is a mix of jquery and plain javascript. I use jquery to show and hide some divs and the js to refresh a div by loading a page inside the div. The plain js code doesn't work as is, but if I delete the jquery code it works fine.
My code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ton plans</title>
<link href="template/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#refresh').fadeOut().load('last_post.php').fadeIn();
}, 10000);
</script>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
//no conflict jquery
jQuery.noConflict();
//jquery stuff
(function($) {
$(document).ready(function()
{
$("#bott_div").click(function() {
$("#div_profile").show(['fast'])
})
$("#page").click(function() {
$("#div_profile").hide(['fast'])
})
})
})
(jQuery);
</script>
</head>
There is a conflict between the jQuery code and the plain javaScript that is preventing it from working properly. I would require help identifying the problem.
Change the order of the first two scripts -- like this
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#refresh').fadeOut().load('last_post.php').fadeIn();
}, 10000);
</script>
There is a "(" in front of your function in jQuery code. Encapsulate code in a
$(document).ready(function() {
$("sampleSelect").click(function() {
//code
}
});