Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have this code to work as character limiter for CKEditor, but its old and i dont know why does not work when i use Jquery librarie in the same web site
window.onload = function() {
CKEDITOR.instances.aqui.on( 'key', function() {
var str = CKEDITOR.instances.aqui.getData();
var regex = /(<([^>]+)>)/ig
, result = str.replace(regex, "");
if (result.length > 50) {
CKEDITOR.instances.aqui.setData(str);
}
} );
};
i want to update the code to use Jquery, but i dont know to much of jquery and i think if i use this function (replace, remove or text that) it will be more usefull
The code works if you dont add the Jquery library.
If you are using CKEditor, you may need the jQuery Adapter to make it work.
You will need include source files like this on your header
<script src="jquery.js"></script>
<script src="ckeditor.js"></script>
<script src="adapters/jquery.js"></script>
Please see details here
You are overwriting the windows.onload event handler and that should be the cause of your problem.
Try instead the following change in your code:
// previous
window.onload = function() { /* your code here */ };
// suggestion
$( document ).ready(function() { /* your code here */ });
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm working on my personal website and have implemented a preloader.
After adding a second div to my website, I noticed I can scroll during the page loading. I dunno about you but I find that ugly and disturbing.
Here is a quick video. (I use chromeOS)
Video
I really couldn't find anything on this because I think I was the only one with this problem. I'm not sure, however.
I used $(window).on("load",function(){$(".loader-wrapper").fadeOut("slow");}); as well
Here is the code (Github Repo)
Anyways, that's all I got.
Thanks in advance.
You can add by default a class to your body the class should be as follows.
// CSS
.no-scroll {
overflow: hidden;
}
<body class="no-scroll">
Once your script has completed or your function finishes you just call
document.body.classList.remove('no-scroll');
Make sure to add the following section at the end of your page.
<script type="text/javascript">
(function(){
function onReady() {
document.body.classList.remove('no-scroll');
}
if ( document.readyState === 'complete' ) {
onReady();
} else {
document.addEventListener('DOMContentLoaded', onReady);
}
})();
</script>
Or you can do it with jQuery
// Make sure this code is the last piece of code in your HTML.
$(window).on("load", function() {
document.body.classList.remove('no-scroll');
});
PS: Additionally to that consider the unlike scenario when someone does not have JavScript enabled so you add a default behavior. Take a look at <noscript> tag.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've got a jQuery script included in my MasterPage's <head> tags that runs whenever a link is pressed in the navbar. (I've made it trigger on any anchor tag.)
So I was thinking: since it triggers on any anchor tag it would also trigger on anchor tags that are in segment files (files that contain a little HTML and are inserted using AJAX) but it doesn't.
The only way to get it to work is to include the JavaScript file into all the segment pages.
example:
mainpage:
<br>
html
<br>
head<br> script src="script.js"/script<br>/head
<br>
body
div class="container"/div
All the partial html files are loaded into the container.
So one would think they also share the same <head> as the full page still contains that same header.
But the scripts don't work?
ps: to the unclear what i'm asking report: apparently some people understood me, thanks a lot to those who did :)
You will have to delegate the event to all current and future anchor elements using a particular version of on():
$(function() { // dom-ready
$(document).on('click', 'a', function(e) {
// handle click
});
})
If you load content dynamically then events won´t be hooked. Use "on" event instead of "click".
It would be something like:
$( "a" ).on( "click", function() {
alert( $( this ).text() );
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
The following code does not work on jsFiddle even when have set the correct Framework and extension, i.e. jquery 1.7.2 and no-wrap in body.
HTML Code
Name:<input data-bind="value: name" />
<p>Hello, <span data-bind="text: name"></span></p>
<button data-bind="click: changeName">Change Name</button>
Javascript Code
$(function () {
var viewModel = {
name: ko.observable("bob"),
changeName: function () {
this.name("steve");
}
};
ko.applyBindings(viewModel);
});
Make sure you have included jQuery as well as KnockoutJS library while creating your JSFiddle. One of them will be in external resources section on left sidebar because JSFiddle does not provide feature to include both at one go in frameworks and extensions section..
http://jsfiddle.net/yLcqd06q/1/
$(function(){
var viewModel = {
name: ko.observable("bob"),
changeName: function () {
this.name("steve");
}
};
ko.applyBindings(viewModel);
});
Tip for you : Always mention the error you get in console while posting such questions :-)
Hope that helps..
Peace, RP
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have an external javascript that I need to run on a button click. How would I go about doing that?
<script type='text/javascript' src='http://tracking.somedomain.com/include.js?
domain=www.somedomain.com'></script>
<script type='text/javascript' >
if(typeof sWOTrackPage=='function')sWOTrackPage();
</script>
I need this to run on the click of an html button. Any suggestions?
Pure JavaScript:
document.getElementById('theIDofYourButton').onclick = function() {
//your code here
}
jQuery:
$('#theIDofYourButton').click(function() {
//your code here
});
You can use addEventListener():
// Assuming the button has an id of 'btn':
var btn = document.getElementById('btn');
btn.addEventListener("click", function()
{
// Your code.
//
});
If you need support for older browsers, check out the older way to register event listeners.
try something like this:
HTML:
<input type="button" value="Do" id="doer" />
JS:
document.getElementById("doer").onclick = function() {
if(typeof sWOTrackPage=='function') sWOTrackPage();
}
The latter Javascript isn't practice-perfect, but that's not really the point here.
If you have any questions about how this was done, please ask away in the comments
Simplest answer. Use the onclick attribute on your HTML button
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I found this bit of code and it works great for preloading, but it totally clogs the page load initially. I've been trying for hours to get this thing to run only after the page is loaded with no success. I've been using one image, "big_image.jpg" (8MB) to test it out. As is, everything preloads using the below code, including the large file. Anytime I attempt to get it to pre-load after the document is ready, it fails. I've even tried other code that purports to do what I want, but they all fail - once the page loads, none will keep loading the really big image. Whats up with that?
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['picture.jpg','background.jpg','vertical.jpg','big_image.jpg']).preload();
Since you found the answer based on my help:
It seems that you are using jQuery. You can wrap the function call inside a ready function: Specify a function to execute when the DOM is fully loaded.
function loadImages(){
var img1 = "http://farm3.staticflickr.com/2826/11581275325_d61be12908_h.jpg"
var markup = "<h3>Images after pageload</h2>"+"<img src='"+img1+"' />";
$("#images").html(markup);
}
$( document ).ready(function() {
// Handler for .ready() called.
loadImages();
});
You may take a look at my codepan example