I don't know why and how, but my jQuery code appears to be firing twice on any event.
Here's a part of my code:
commmon.js:
$(document).ready(function() {
$(".fpbtn-one").click(function() {
console.log("Click recorded!"); // Gets logged twice on click
$(this).parent().next().slideToggle();
});
// The rest of the code...
});
$(window).load(function() {
console.log("Setting up slides"); // Gets logged 2 on page load
// These get initialized twice
$("#div-1").responsiveSlides({
auto: true,
pager: true,
pause:true,
nav: false,
timeout: 3000,
speed: 500,
maxwidth: 482,
namespace: "transparent-btns"
});
$("#div-2").responsiveSlides({
auto: true,
pager: false,
pause:true,
nav: false,
speed: 2000,
maxwidth: 320,
});
});
HTML:
<!doctype html>
<html lang="en">
<head><link href="/assets/css/jquery.qtip.css" rel="stylesheet" type="text/css" />
<link href="/assets/custom/themes/1st-formation-theme/theme.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/efControl.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/assets/script/jquery/jquery.qtip.js"></script>
<script type="text/javascript" src="/assets/script/jquery/plugin.efiling.full.js"></script>
<meta charset="utf-8" /><script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function a(b,c,d){function e(f){if(!c[f]){var g=c[f]={exports:{}};b[f][0].call(g.exports,function(a){var c=b[f][1][a];return e(c?c:a)},g,g.exports,a,b,c,d)}return c[f].exports}for(var f=0;f<d.length;f++)e(d[f]);return e}({"4O2Y62":[function(a,b){function c(a,b){var c=d[a];return c?c.apply(this,b):(e[a]||(e[a]=[]),void e[a].push(b))}var d={},e={};b.exports=c,c.queues=e,c.handlers=d},{}],handle:[function(a,b){b.exports=a("4O2Y62")},{}],YLUGVp:[function(a,b){function c(){var a=m.info=NREUM.info;if(a&&a.agent&&a.licenseKey&&a.applicationID){m.proto="https"===l.split(":")[0]||a.sslForHttp?"https://":"http://",g("mark",["onload",f()]);var b=i.createElement("script");b.src=m.proto+a.agent,i.body.appendChild(b)}}function d(){"complete"===i.readyState&&e()}function e(){g("mark",["domContent",f()])}function f(){return(new Date).getTime()}var g=a("handle"),h=window,i=h.document,j="addEventListener",k="attachEvent",l=(""+location).split("?")[0],m=b.exports={offset:f(),origin:l,features:[]};i[j]?(i[j]("DOMContentLoaded",e,!1),h[j]("load",c,!1)):(i[k]("onreadystatechange",d),h[k]("onload",c)),g("mark",["firstbyte",f()])},{handle:"4O2Y62"}],loader:[function(a,b){b.exports=a("YLUGVp")},{}]},{},["YLUGVp"]);</script>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<link href="/assets/custom/files/favicon.ico" rel="shortcut icon" />
<link href="/assets/custom/images/system/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="/assets/custom/images/system/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
<link href="/assets/custom/images/system/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
<meta content="" name="description" />
<meta content="" name="keywords" />
<meta content="NOINDEX, NOFOLLOW" name="ROBOTS" />
<title>Some title</title>
<link href="/assets/custom/files/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/assets/custom/files/css/base.css?=v1" rel="stylesheet" type="text/css" />
<link href="/assets/custom/files/css/font-awesome.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link rel="stylesheet" href="/assets/custom/files/css/font-awesome-ie7_min.css">
<![endif]-->
<script type="text/javascript" src="/assets/custom/files/js/adobe-type.js"></script>
</head>
<body>
<!-- BODY STUFF IN HERE (REMOVED) -->
<script type="text/javascript" src="/assets/custom/files/js/jquery-mmenu-min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/jquery-anystretch-stand-min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/common.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/modernizr.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/responsiveslides_min.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/socialmedia.js"></script>
<script type="text/javascript" src="/assets/custom/files/js/jquery_atooltip_min.js"></script></div>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-4.newrelic.com","licenseKey":"204ccc8db2","applicationID":"1825150","transactionName":"YVNVYBACWxFTWxFcWVgZYkYLTFwMVl0dG0ZeRg==","queueTime":0,"applicationTime":187,"ttGuid":"","agentToken":"","userAttributes":"","errorBeacon":"jserror.newrelic.com","agent":"js-agent.newrelic.com\/nr-361.min.js"}</script></body>
</html>
What could be the reason?
Could it be that your code was manipulating the element that the code was loading into?
This answer may be the reason why it was happening:
jQuery $(document).ready () fires twice
Try putting the stuff in the body inside divs.
example. <div id = "menu"><script type="text/javascript" src="/assets/custom/files/js/jquery-mmenu-min.js"></script> </div>
I hope that works. :)
be careful for beginning use good practice when calling jquery :
!function( $ ) {
your code
}( jQuery )
like that you avoid conflict...
Then be careful when adding js script in html, you can add it twice, for example you call one js in a html file, ok but in the js you load in callback for example another page with the js inside, it will call twice your code.... i had the same probleme before with a recursive call, the js never stop to call it !!
in the main page it is better if your js will be called in several files otherwise you have to debug it....
moreover you don't paste all your code we can't help you, we can just tell in my opinion.... not a good advices often...
May be you have included your script file commmon.js twice. Check your references to it in your code.
It might be event bubbling. Use event.preventDefault(), it will prevent the default event from occuring or event.stopPropagation() will prevent the event from bubbling up.
$(document).ready(function() {
$(".fpbtn-one").click(function(event) {
event.stopPropagation();
console.log("Click recorded!"); // Gets logged twice on click
$(this).parent().next().slideToggle();
});
// The rest of the code...
});
The simplest explanation is that you have included the common.js twice by mistake.
Look into individual scripts and see if you have referenced common.js on top of your main file.
Your relevant code is required, but from the snippets above; try putting all the codes in the document ready method.
Related
I'm struggling my head for 5 hrs to get out of this issue, I've put some <script> tags in the index.html file that resides in the public folder.
I want them to execute after the Browser has rendered the HTML completely, I know this is very basic question, but the problem is, I'm converting an HTML template to React, and it heavily uses animations, which I can't afford to write in react again from start. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Galaxy App</title>
<!--CSS-->
<link href="asset/css/icofont.min.css" rel="stylesheet" />
<link href="asset/css/linearicons.min.css" rel="stylesheet" />
<link href="asset/css/magnific-popup.min.css" rel="stylesheet" />
<link href="asset/css/animsition.min.css" rel="stylesheet" />
<link href="asset/css/bootstrap.min.css" rel="stylesheet" />
<link href="asset/css/swiper.min.css" rel="stylesheet" />
<link href="asset/css/styles.css" rel="stylesheet" />
<link href="asset/css/main.css" rel="stylesheet" />
<link href="asset/css/homepage.css" rel="stylesheet" />
<!--Theme CSS-->
<link href="asset/css/theme.css" rel="stylesheet" />
<link href="asset/css/responsive.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="asset/js/polyfill.min.js"></script>
<script src="asset/js/jquery.min.js"></script>
<script src="asset/js/jquery.viewport.min.js"></script>
<script src="asset/js/jQuerySimpleCounter.min.js"></script>
<script src="asset/js/jquery.magnific-popup.min.js"></script>
<script src="asset/js/animsition.min.js"></script>
<script src="asset/js/isotope.pkgd.min.js"></script>
<script src="asset/js/bootstrap.bundle.min.js"></script>
<script src="asset/js/rellax.min.js"></script>
<script src="asset/js/swiper.min.js"></script>
<script src="asset/js/smoothscroll.js"></script>
<script src="asset/js/svg4everybody.legacy.min.js"></script>
<script src="asset/js/TweenMax.min.js"></script>
<script src="asset/js/TimelineLite.min.js"></script>
<script src="asset/js/typed.min.js"></script>
<script src="asset/js/vivus.min.js"></script>
<script src="asset/js/main.js"></script>
<!-- Theme JS -->
<script src="asset/js/theme.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="asset/js/cutsom.js"></script>
</body>
</html>
I manually checked by logging the document.getElementById() in the last script, and it returns undefined/null because at that time the HTML is not rendered completely, even though I've put the scripts at the end of file.
it works if I add setTimeout in my script, and it captures the elements perfectly.
So what should I do to only load all the scripts when my HTML has been rendered completely.
One way to accomplish this is to emit an Event from React.
Add this to your main react component:
useEffect(() => {
const event = new Event('rendered')
document.dispatchEvent(event)
}, [])
Listen for the event on the page:
<script>
document.addEventListener('rendered', function() {
// start animation
}, false)
</script>
I am trying to run a function as soon as the user lands on the page. I have the following head section:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="Resources/css/normalize.css">
<link rel="stylesheet" type="text/css" href="Resources/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="Resources/css/animate.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function sayOK() {
alert('ok');
}
window.onload = sayOK;
</script>
</head>
Why doesn't sayOK() run?
Your sample code ran fine in testing. You can try moving your script to the footer, just before your closing body tag.
jQuery offers a good onload mechanism, and if you want cross-browser reliability, that would be where I start. Don't reinvent the wheel.
https://learn.jquery.com/using-jquery-core/document-ready/
This is a portable way of running your code as soon as the page is loaded:
function documentReady (cb) {
if (document.readyState !== 'loading') {
cb();
} else {
document.addEventListener('DOMContentLoaded', cb);
}
}
documentReady(function () {
// YOUR CODE GOES HERE
});
It works. Try try to create a separate file, for example ok.html, and open it in any browser. It should show the message.
I have this code, but all that happens when I move my slider is that the functions will restart. I want the function to update with the value of the slider position.
Edit: here is the entire page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
<title>sliding</title>
<link rel="stylesheet" href="assets/components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/components/bootstrap/dist/css/bootstrap-theme.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script src="assets/js/simple-slider.js"></script>
<link href="assets/css/simple-slider.css" rel="stylesheet" type="text/css" />
<link href="assets/css/simple-slider-volume.css" rel="stylesheet" type="text/css" />
<script src="assets/js/timbre.js"></script>
</head>
<body>
<div class="app container">
<!-- start building -->
<script>
var x=200;
function sin(){T("sin", {freq:x, mul:0.5}).play();}
$('#slider').on('change', function(){
x = $(this).val();
});
</script>
<button onclick="sin()"></button>
<input type="text" data-slider="true" data-slider-range="1,000" id="slider">
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script src="assets/components/jquery/jquery.min.js"></script>
<script src="assets/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/index.js"></script>
</body>
</html>
According to the jQuery Simple Slider docs on getting slider values, the event you need to bind to is a custom event called slider:changed, not the standard DOM change event.
If you modify
$('#slider').on('change', function(){
x = $(this).val();
});
to
$('#slider').on('slider:changed', function(evt, data){
x = data.value;
});
you should be able to copy the new value of the slider to your global variable.
I download html Template. In master page I put HTML code. All query library was included. After build mvc project I don't see scroll images. But in usual html it's perfect work. I think it's because on master page I use tag: $(document).ready(function () {. So. The Html code on master page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="/Content/reset.css">
<link rel="stylesheet" type="text/css" media="screen" href="/Content/grid.css">
<link rel="stylesheet" type="text/css" media="screen" href="/Content/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="/Content/slider.css">
<link href='http://fonts.googleapis.com/css?family=Passion+One:400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
<script src="/Scripts/jquery-1.7.min.js"></script>
<script src="/Scripts/jquery.easing.1.3.js"></script>
<script src="/Scripts/tms-0.4.1.js"></script>
<script>
$(document).ready(function () {
$('.slider')._TMS({
show: 0,
pauseOnHover: false,
prevBu: false,
nextBu: false,
playBu: false,
duration: 1000,
preset: 'fade',
pagination: true, //'.pagination',true,'<ul></ul>'
pagNums: false,
slideshow: 8000,
numStatus: false,
banners: 'fade', // fromLeft, fromRight, fromTop, fromBottom
waitBannerAnimation: false,
progressBar: false
});
})
</script>
</head>
The script tms-0.4.1.js starts with this code:
/* jQuery based image slider
/* TMSlider 0.4.1 */
;(function($){
$.fn.TMSlider=$.fn.TMS=$.fn._TMS=function(o){
return this.each(function(){
var th=$(this),
In browser I see error:
TypeError: $(...)._TMS is not a function
progressBar: false
In fact usual HTML perfect work with out error. Can you help me fix it?
You need to include jquery above this:
<script src="/Scripts/tms-0.4.1.js"></script>
Place:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Unless you already have and you didnt show us in your code.
REVISION:
I also don't see a closing semi colon at the end of your document.ready function.
Using the plugin from: Famspam's Facebox
however I seem to be encountering some issues getting it to open. The following is my head contents:
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Prepotence</title>
<link rel="stylesheet" href="style2.css" type="text/css"/>
<script src="/src/jquery.js" type="text/javascript" charset="utf-8"></script>
<link href="/src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : '/src/loading.gif',
closeImage : '/src/closelabel.png'
})
})
</script>
</head>
And whenever I attempt to open anything with code similar to:
Link
Absolutely nothing shows up, at all.
$(function(){
$('a[rel*=facebox]').facebox({
loadingImage : '/src/loading.gif',
closeImage : '/src/closelabel.png'
});
});
I've checked it and it's working fine, you can change both $ to jQuery if you're using other frameworks $-related :)
Cheers
G.