Hi guys i have this jquery code which i searched on the net. im new to jquery. the code need to click the button to execute. my question is how is the code to execute this jquery on page load.
<button id="notification-trigger" class="progress-button">
<span class="content">Show Notification</span>
<span class="progress"></span>
</button>
<script>
(function() {
var bttn = document.getElementById( 'notification-trigger' );
// make sure..
bttn.disabled = false;
bttn.addEventListener( 'click', function() {
// simulate loading (for demo purposes only)
classie.add( bttn, 'active' );
setTimeout( function() {
classie.remove( bttn, 'active' );
// create the notification
var notification = new NotificationFx({
message : '<div class="ns-thumb"><img src="img/user1.jpg"/></div><div class="ns-content"><p>Welcome, Nixxx!</p></div>',
layout : 'other',
ttl : 6000,
effect : 'thumbslider',
type : 'notice', // notice, warning, error or success
onClose : function() {
bttn.disabled = false;
}
});
// show the notification
notification.show();
}, 1200 );
// disable the button (for demo purposes only)
this.disabled = true;
} );
})();
</script>
i want something like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}
</script>
</body>
</html>
please help thanks!
(Edited i include the button that needs to click before the script execute.) i want this code to execute everytime i load/refresh the page and not by clicking the button. thanks for the help!
Please use the following code. It works the same as the onload() function of Vanilla Javascript.
<script>
// $(function(){}); Wrapper acts as the document.ready of vanilla javascript
$(function(){
//call myfunction() onload;
myFunction();
//functions to execute goes in here
function myFunction() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
//call button action instead of click
btnFunction();
}
var bttn = document.getElementById( 'notification-trigger' );
bttn.disabled = false;
function btnFunction() {
classie.add( bttn, 'active' );
setTimeout( function() {
classie.remove( bttn, 'active' );
var notification = new NotificationFx({
message : '<div class="ns-thumb"><img src="img/user1.jpg"/></div><div class="ns-content"> <p>Welcome, Nikko Zabala!</p></div>',
layout : 'other',
ttl : 6000,
effect : 'thumbslider',
type : 'notice', // notice, warning, error or success
onClose : function() {
bttn.disabled = false;
}
});
notification.show();
}, 1200 );
};
});
</script>
use :
<script>
$(document).ready(function(){
myFunction()
// put your code here;
});
function myFunction() {
// your code
}
function btnFunction(){
// your code
}
</script>
Related
<div class="circle done">
<span class="label">1</span>
my code is above
I want to change 1 into a tick if div has "done" class
How do I do that ?
$(document).ready(function() {
$(".done span.label").html("your tick html");
});
Use this on your body tag:
<body onLoad="tick()">
And add this in your javascript
function tick(){
var labeltext = $('.label').val();
if (labeltext == "1"){
$('.done').text("✓");
}else{}
};
$( document ).ready(function() {
console.log( "ready!" );
const el = $(".circle");
if (el.hasClass('done')) {
$( "span.label" ).html('done');
}
});
This is done with jQuery, you first wait for the DOM to load, once it has. Then check if 'done' class is applied to the element if it is then change content of the span tag.
This should do it...
$(document).ready(function (){
$(".done").next("span").html("✔");
}
);
My JS / jQuery skills aren't great - and I'm having trouble with the following:
jQuery(document).ready(function($) {
// if element exists
if ($('.myelement').length > 0) {
// insert html back button
$( '.myelement' ).append( "<button onclick="goBack()">Go Back</button>" );
// back function
function goBack() {
window.history.back()
}
}
)};
I'm trying to achieve the following.
if .myelement HTML class exists
then insert back button html
Appreciate the help.
There are multiple syntax problems in your script...
Apart from that the method GoBack() is declared in a closure scope, so in the onclick="" attribute handler it won't be available
jQuery(function ($) {
var $el = $('.element');
if ($el.length) {
//create button
$('<button />', {
text: 'Go Back',
click: function () {
window.history.back();
}
}).appendTo($el); //append to .element
}
});
try this...
jQuery(document).ready(function($) {
if ($('.myelement').length > 0) {
$( '.myelement' ).append( '<button onclick="goBack()">Go Back</button>' );
}
});
var goBack=function() { window.history.back() }
Try this:
jQuery(document).ready(function($) {
// if element exists
var container = $('.myelement');
if (container.length > 0) {
// insert html back button
var backButton = $('<button></button>').text('Go Back').appendTo(container);
backButton.on('click', function(){
window.history.back()
});
}
)};
I have this simple javascript function:
<script type="text/javascript">
var popup = '0';
if(popup == '0') {
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
popup = '1';
});
});
}
</script>
<button class="button">Test</button>
I want the function to alert only on the first click but it keeps working although I changed the value of popup to 1
What you need is .one() function. It makes sure the code is triggered only once for you.
Docs: http://api.jquery.com/one/
Docs example:
$( "#foo" ).one( "click", function() {
alert( "This will be displayed only once." );
});
Write the code as follows:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
popup = '1';
}
});
});
</script>
Once your click listener is set, your previous if statement's location wasn't executed anymore. Only the code inside the on click function.
Alternatively, you can unbind the onClick listener instead of setting popup = '1'. Try the following:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
//unbinds *all* listeners previously registered on "document"
$(document).unbind('click');
});
});
</script>
Much cleaner, and as Mathletics has mentioned, cleans unnecessary callbacks from memory.
Try:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
}
popup = '1';
});
});
</script>
You had a function that was setting popup to 1 but was never checking its value again. This way it gets checked and should work properly.
How would I create a Toggle button with snap.js found here https://github.com/jakiestfu/Snap.js the usage section is very brief and I don't understand. Here is some code I came up with. I am new to javascript and any help is appreciated.
<script src="js/snap.min.js"></script>
<script>
var snapper = new Snap({
element: document.getElementById('content')
});
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
</script>
</head>
<body>
<button id="myToggleButton">Menu</button>
<div id="content">
This is a menu
</div>
You need to get the button element before adding click listener on it. Also, markup for id attribute is wrong on the button.
<script src="js/snap.min.js"></script>
<script>
var snapper = new Snap({
element: document.getElementById('content')
});
// Get the button
var myToggleButton = document.getElementById('myToggleButton');
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
</script>
</head>
<body>
<button id="myToggleButton">Menu</button>
<div id="content">
This is a menu
</div>
EDIT: Updated the answer to use document.getElementById rather than jQuery.
It looks like there's an error in your JavaScript (unless you've omitted some code.)
var snapper = new Snap({
element: document.getElementById('content')
});
// you need to grab a reference to this node before you can add the event listener
var myToggleButton = document.getElementById('myToggleButton');
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
addEvent(document.getElementById('toggleButton'), 'click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
I am writing an small code to run on CKEditor document click event, but its not working. My code is,
var element = CKEDITOR.document.getById( 'Editor_TextArea' );
element.on( 'click', function( ev )
{
//mycode
alert('ok');
}
);
Can anyone help me..
That CKEDITOR.document.getById( 'Editor_TextArea' ); is not giving any values for me..
So i used the below code and its works well.
CKEDITOR.instances['Editor_TextArea'].on('contentDom', function() {
this.document.on('click', function(event){
//your code
alert('Click Event');
});
});
This will work emailTemplateBody is name of textarea field.
var editor = CKEDITOR.instances.emailTemplateBody
editor.on('contentDom', function () {
var editable = editor.editable();
editable.attachListener(editable, 'click', function () {
console.log("click event");
});
});
editor.editable().on('click', function (event) {
//YOUR CODE GOES HERE
});