i'm building a website and i had a plugin working fine.
But when i tried to insert it into my website it stop working. After some test i noticed it's happening after a load the content with ajax. Searching here, i saw a similar question and the solution was to use the .on() event with Jquery. I did that, but stilldoesn't work.
What am i doing wrong? (i'm new to jquery, don't understand that much)
Here is what i have:
HTML:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<ul id="list">
<li>Home</li>
<li>Split</li>
<li>Contact</li>
</ul>
<div id="content"><!-- content ajax -->
</div><!-- /content ajax -->
<script src="js/classie.js"></script>
<script src="js/cbpSplitLayout.js"></script>
</body>
script.js (load the page)
$(document).ready(function(){
$('#content').load('content/home.php');
$('#list').on( 'click', 'a', function() {
console.log('log confirm');
var page = $(this).attr('href');
$('#content').load('content/' + page + '.php');
return false;
});
});
And the plugin i'm trying to run is a external plugin: Split Layout.
I got it from this website here: http://tympanus.net/codrops/2013/10/25/split-layout/
And this is a pastebin to it's js script: http://pastebin.com/yfJXGR8f
Is JQuery library included in the pages called by AJAX ? That could be the solution simply include
<script src="js/jquery.js"></script>
on your AJAX pages' <head> tag
Related
Hi while learning html and css I got the idea of adding an scroll to top arrow to my page, I found an solution and adapted it to my project, but the javascript part is not working as I thought and I really don't know how to fix this.
I have following html-code for the arrow:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta information -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Page</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="./css/styles.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght#200;300;400&display=swap" rel="stylesheet">
<!-- Scripts for Webfonts and Icons -->
<script src="https://kit.fontawesome.com/9dfc4870d4.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- custom js-->
<script type="text/javascript" src="./js/script.js"></script>
</head>
<body>
<i class="fas fa-chevron-up"></i>
//more elements...
</body>
</html>
and this is the javascript code which is located in the script.js file
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
$('#return-to-top').click(function() {
$('body,html').animate({
scrollTop : 0
}, 500);
});
The fadeIn/fadeOut functions are executed correctly on my page but when I click the link nothing is happening or at least it's not jumping to the top of the page.
But if I use the internal script-element to place the code at the end of the body section of my html file it does all work correctly, but why isn't the click working as intended if I place this code in a external file is it because of loading order in the html file?
You can use the defer attribute on your script to defer execution until the body loads:
<script type="text/javascript" src="./js/script.js" defer></script>
I am struggling to use toast message on my website which may be visible on the click of a button. here is the code below.
<html>
<head>
<link rel="stylesheet" href="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Snackbar / Toast</h2>
<button onclick="updateit()">Show Snackbar</button>
<script src="https//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function updateit(){
toastr.success('button clicked');
}
</script>
</body>
</html>
Even adding event listener calling in function script did not work for me.
I am using the below library which suggested me to use external scripts and style as have been used in the code above.
https://codeseven.github.io/toastr/
I am a novice, please help me out with this.
Also, if you can help me out figuring out how can I directly get it done on WordPress, it would be highly appreciable.
Try This code... There are some small mistakes.. I fixed... Check this..
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Snackbar Toast</h2>
<button onclick="updateit()">Show Snackbar</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
function updateit(){
toastr.success('button clicked');
}
</script>
</body>
</html>
I'm not really sure why this is not working but I have an MVC View that I want to display the current date/time/seconds on the page. I've put the javascript in the "Scripts/script.js" file. I then added the following at the bottom of the MVC View.
#section scripts {
<script src="~/Scripts/script.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setDateTimer();
});
</script>
}
Thing is when I run it something is causing an error. Unfortunately at the moment I can't see the actual error message because of the way they have the site configured any error just takes you to a generic error page. I do know it has something to do with the code above because removing it cause the page to work.
For testing purposes I even removed all but simple javascript code in the file but that still doesn't work. Right now this is all that is in my script.js file.
function setDateTimer() {
var today = new Date();
}
I know the name of the of the .js file in the code is correct because I just dragged and dropped it to the page from the solution explorer.
Here is most of my _Layout page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>
Layout page doesn't have a place to render the section you can change it like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
#RenderSection("scripts",true)
</body>
</html>
I have used mobile.js. In my apps using phonegap for developing app
Please check my code
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="cordova.js"></script>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//some js code here
}
</script>
</head>
<body>
Login
</body>
</html>
login.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
alert("Hello");
</script>
</head>
<body>
Login form here..
</body>
</html>
My page fliping perfectly but When I will going index.html to login.html by clicking of Login link in index.html page my JavaScript alert not working.
use
$( function() {
alert('Hello');
});
I guess this type of js script injection into HTML is not supported by Cordova. You need to do the logic in the index.js script.
Also if you wish to perform a alert you can use the apache cordova plug-in for notifications (you can get it via project config --> plugins).
I have a page that uses jquery and is working perfectly. The JQuery is located inside two files: control.js and lightgallery.js. The minute I add in AngularJS all of my jquery stops working. I need to find a way to have my jquery work without learning how to rewrite all of the functions in angular. Any suggestions?
None of the html I've added with the ngInclude is using angular. It's just simple html.
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>H</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="/assets/common/css/split.css">
<link rel="stylesheet" href="/assets/common/css/control.css">
<!-- JQUERY -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/assets/common/js/bootstrap.min.js" type="text/javascript"> </script>
<script src="/assets/common/js/control.js" type="text/javascript"></script>
<!-- ANGULAR -->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body id="home">
<div ng-include="'../assets/includes/left-panel.html'"></div>
<!-- / START TEMPLATE -->
<div ng-include="'../assets/includes/template.html'"></div>
</body>
</html>
Here is what is happening:
Your jQuery code probably runs on document ready:
$(function(){
//your initialization code here
});
The problem is that the elements in your templates that your jQuery plugins are targeting are not yet added to the DOM when this function runs. This is because Angular has not yet inserted these templates into the DOM.
You can verify this by removing the ng-includes and replacing them with the markup contained in the templates themselves (bypassing ng-include).
This is a classic "mistake" when using Angular along with jQuery plugins.
The only "correct" way to integrate jQuery plugins with Angular is to wrap the plugins in a directive.