The Page executes javascript notification (Noty Plugin) again and again (almost every second). (Platform is : Wordpress)
It happens only on post pages post page example except homepage Homepage link and other pages.
The Original Code Of Javascript notification added in header is
<link rel="stylesheet" type="text/css" href="http://cdn.frkmusic.info/static/buttons.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.frkmusic.info/static/animate.css"/>
<script src="http://cdn.frkmusic.info/static/jquery-1.7.2.min.js"></script>
<!-- noty -->
<script type="text/javascript" src="http://cdn.frkmusic.info/static/js/noty/packaged/jquery.noty.packaged.min.js"></script>
<script type="text/javascript" src="http://cdn.frkmusic.info/static/notification_html.js"></script>
<script type="text/javascript">
function generate(type, text) {
var n = noty({
text : text,
type : type,
dismissQueue: true,
layout : 'topRight',
closeWith : ['click'],
theme : 'relax',
maxVisible : 10,
animation : {
open : 'animated bounceInLeft',
close : 'animated bounceOutRight',
easing: 'swing',
speed : 500
}
});
console.log('html: ' + n.options.id);
}
function generateAll() {
generate('alert', notification_html[0]);
}
$(document).ready(function () {
setTimeout(function() {
generateAll();
}, 500);
});
</script>
Try clearing the timeout... not tested though :-/
var timeout = null;
function generate(type, text) {
var n = noty({
text : text,
type : type,
dismissQueue: true,
layout : 'topRight',
closeWith : ['click'],
theme : 'relax',
maxVisible : 10,
animation : {
open : 'animated bounceInLeft',
close : 'animated bounceOutRight',
easing: 'swing',
speed : 500
}
});
clearTimeout(timeout);
console.log('html: ' + n.options.id);
}
function generateAll() {
generate('alert', notification_html[0]);
}
$(document).ready(function () {
timeout = setTimeout(function() {
generateAll();
}, 500);
});
Related
I am using the below code to show data on my web page with some animate effect
.done(function (response) {
$(".loadig-overlay").hide();
$('#Container').toggle('slide', {
direction: 'left'
}, 250, function () {
$("#Container").html(response);
$('#Container').toggle('slide', {
direction: 'right'
}, 250);
});
})
The #container html gets replaced by that received in the response but the animate effect is not applied
$('#Container').toggle('slide', {
direction: 'left'
}, 500, function () {
$("#Container").html('abc');
$('#Container').toggle('slide', {
direction: 'right'
}, 500);
});
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<div id="Container">
</div>
It appears that everything is okay with your script. Only thing which comes to my mind is that element containing 'Container' is too small so you don't see the effect. Or maybe you've been playing with z-index of neighbouring elements?
I have a custom alert ui setup for jquery-ui, but for some reason my close button doesn't close the window. Below is my code. I am attempting to utilize the override alert() with jQuery UI as mentioned in this link. Any assistance is appreciated.
https://andrewensley.com/2012/07/override-alert-with-jquery-ui-dialog/
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type ="text/javascript">
window.alert = function (message) {
$(document.createElement('div'))
.attr({ title: 'Invoice Information', 'class': 'alert' })
.html(message)
.dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
buttons: {
OK: function () {
$(this).dialog("close");
}
},
close: function () { $(this).remove();}
});
};
</script>
I solved my issue by simply moving my renders and script links to my header and moving my JS script to the body.
I try to use Velocity.js to do an menu button animation. The code worked well using jQuery but now I'm trying to do it using JavaScript ES6 only and I got an error.
My HTML content is this one :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Hamburger 2</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<hc-hamburger role="button">
<a class="McButton" data="hamburger-menu">
<b></b>
<b></b>
<b></b>
</a>
</hc-hamburger>
<script src="velocity.min.js"></script>
<script src="hamburger.js"></script>
</body>
</html>
And my JavaScript content :
'use strict';
class HCHamburger extends HTMLElement {
get menuButton() {
if (!this._menuButton) {
this._menuButton = this.querySelector("[data=hamburger-menu]");
}
return this._menuButton;
}
get bar() {
if (!this._bar) {
this._bar = this.querySelectorAll('b');
}
return this._bar;
}
attachedCallback() {
this.menuButton.addEventListener('click', _ => {
this.menuButton.classList.toggle("active");
let McBar1 = this.bar[0];
let McBar2 = this.bar[1];
let McBar3 = this.bar[2];
if (this.menuButton.classList.contains("active")) {
McBar1.velocity({ top: "50%" }, {duration: 200, easing: "swing"});
McBar3.velocity({ top: "50%" }, {duration: 200, easing: "swing"})
.velocity({rotateZ:"90deg"}, {duration: 800, delay: 200, easing: [500,20] });
this.menuButton.velocity({rotateZ:"135deg"}, {duration: 800, delay: 200, easing: [500,20] });
} else {
this.menuButton.velocity("reverse");
McBar3.velocity({rotateZ:"0deg"}, {duration: 800, easing: [500,20] })
.velocity({ top: "100%" }, {duration: 200, easing: "swing"});
McBar1.velocity("reverse", {delay: 800});
}
});
}
}
document.registerElement('hc-hamburger', HCHamburger);
When I click on my button I have this error : Uncaught TypeError: McBar1.velocity is not a function
As I said before this code worked with jQuery with a classic selector :
var McBar1 = $('b:nth-child(1)');
I think I have an issue when I get my McBar1 content because when I log it I juste have <b></b> and no the entire object...
We have to use jQuery to get the selection, querySelector is not enough.
I'm using FancyBox 2.1.5.
I need a fullscreen ad (html) to be shown on homepage after it loads and closing this ad with 2 options: standard with user' click and auto hiding if no action during 15 seconds.
First task is not a problem with:
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
But how to set a counter and autohide?
I'm thinking of following:
$(document).ready(function() {
$('.fancybox').fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
$('.fancybox').fancybox({
afterShow: function(){
setTimeout( function() {$.fancybox.close(); },15000);
},
afterClose: function(){
clearTimeout( );
},
});
});
Is this correct?
Thanks in advance for your help!
I think you should rather do
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
},
afterClose: function () {
clearTimeout();
}
});
});
See JSFIDDLE
EDIT :
As properly pointed out by djdavid98, clearing time out on afterClose callback is redundant.
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
}
});
});
See updated JSFIDDLE
You can use the delay and click function together on page load to exe.c and then fadeout after 15 seconds
How made JavaScript cohesion work? Lets me explain better: I have my index page that call models forms with jquery dialogs, but I don't want put all javascript in index page, instead I want the jquery separate for page.
Model form
This work
INDEX PAGE
#section Scripts
{
<link href="#Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready
(
function () //<--I dont want this function here
{
Alert1();
}
$(".Create").live
(
"click", function (e) {
var url = $(this).attr('href');
$("#dialog-view").dialog
(
{
title: 'Create new User',
autoOpen: false,
resizable: false,
height: 600,
width: 600,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(this).load(url);
},
buttons:
{
"Cancel": function ()
{
$(this).dialog("close");
},
"Save": function ()
{
$(this).dialog('close');
}
},
close: function (event, ui) {
$(this).dialog('close');
}
}
);
);
function Alert1() //<--I dont want this function here
{
alert("Star!");
}
</script>
}
How should work
INDEX PAGE
#section Scripts
{
<link href="#Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready
(
$(".Create").live
(
"click", function (e) {
var url = $(this).attr('href');
$("#dialog-view").dialog//<--Only opening dialogs
(
{ ....
);
</script>
}
And model forms with you specifics javascripts
#section Scripts
{
<link href="#Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready
(
function ()
{
Alert1();
}
);
function Alert1()
{
alert("Star!");
}
</script>
}
Actually, when I made it the model javascript don't work.
I'm using Entity-framework, thanks for everything.
SOLUTION
<script type="text/javascript">
$(document).ready
(
function ()
{
Alert1();
}
);
function Alert1()
{
alert("Star!");
}
</script>
Just remove the section "Scripts" {} from the Model file. You must have the renderSection("scripts") method only called within the Index page, which will only render the scripts files when the Index page loads and ignore any new script loaded.
<script type="text/javascript">
$(document).ready
(
function ()
{
Alert1();
}
);
function Alert1()
{
alert("Star!");
}
</script>