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>
Related
I am trying to build a new application using Blazor and I am facing a weird issue. The "onload" jquery scripts are not applied even though the breakpoint is fired.
Let's take an example, here is my setup:
_Host.cshtml:
#page "/"
#namespace DentalOffice.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Dento - Dentist & Medical HTML Template">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>DentalOffice</title>
<!-- Favicon -->
<link rel="icon" href="./img/core-img/favicon.ico">
<!-- Core Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<!-- jQuery js -->
<script src="/js/jquery.min.js"></script>
<!-- Popper js -->
<script src="/js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="/js/bootstrap.min.js"></script>
<!-- All js -->
<script src="/js/dento.bundle.js"></script>
<!-- Active js -->
<script src="/js/default-assets/active.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Index.razor:
#page "/"
<!-- Preloader -->
<div id="preloader">
<div class="preload-content">
<div id="dento-load"></div>
</div>
</div>
active.js:
(function($) {
var dento_window = $(window);
// *******************************
// :: 1.0 Preloader Active Code
// *******************************
dento_window.on('load', function() {
$('#preloader').fadeOut('1000', function() {
$(this).remove();
});
});
})(jQuery);
If I run this page as plain HTML it works as expected and the loader disappears. Inside Blazor component is behaving very strange. If I set a breakpoint in active.js on line: $(this).remove();, the breakpoint is hit but the change is not updated on the UI (the preloader is not removed).
However, if I manually trigger remove from the console like this ($('#preloader').remove()), it works.
What could be wrong here?
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 know there are enough and more questions on this topic, but none of them seem to fix up my problem. I am new to jquery and was trying it out for my code. It just doesn't seem to get up and running. I have tried changing the order in which the script occurs with other scripts, I have checked for the directory in which my jquery file resides, I have tried to use both the CDN version and the downloadable one. Nothing seems to work.
this is the head of my html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Draft1</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style1.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
<link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
i have put jquery at the end of the body of my html
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery-1.11.3"></script>
<script>
$(document).ready((function) {
$("div").css("border", "3px solid red");
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
In this code I have put the jquery code with the html code itself. I have tried another version by putting the code in a separate file and running it, that doesnt work either.
Any help is much appreciated
I think there's a typo where you add the jquery tag. the file name should end in the extension .js so probably something like this:
<script src="./js/jquery-1.11.3.js"></script>
Try
Change <script src="./js/jquery-1.11.3"></script> to <script src="//code.jquery.com/jquery-1.11.3.js"></script>
Change $(document).ready((function) { to $(function(){ or $(document).ready(function(){
Your jquery script src is missing the .js extension
Try this:
<script>
$(document).ready(function($) {
$("div").css("border", "3px solid red");
});
</script>
Put jQuery in the head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Draft1</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style1.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" >
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet">
<link href="./font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(document).ready((function) {
$("div").css("border", "3px solid red");
});
</script>
</head>
I'm currently using BigVideo.js to show my vid as a background; however, there are multiple select forms showing under my video.
They're coming from the vjs-tracksettings class, such as 'window-color vjs-tracksetting'. Not all of vjs-tracksettings needs to be turned off though, as it includes the video as well.
I have a hunch that to turn it off, I need to turn off certain Component Options (https://github.com/videojs/video.js/blob/master/docs/guides/options.md), but I'm not sure how to do it through BigVideo. Also, my hunch is that it is within Control Bar (https://github.com/videojs/video.js/blob/master/docs/guides/components.md).
Or it has something to do with textTrackDisplay.
Any light would help!! I've been stuck on this for awhile.
(Also, I put all the js files in the header. I know you're supposed to put it at the end of the body tag, but for some reason, it doesn't work there.)
EDIT: I've attached a picture of what it looks like in the comments
I've attached my html here. If any css/js files are needed, let me know!
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Include src files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')</script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="bower_components/imagesloaded/imagesloaded.pkgd.min.js"></script>
<!-- BigVideo -->
<script src="bower_components/video.js/dist/video-js/video.js"></script>
<script src="bower_components/BigVideo.js/css/bigvideo.css"></script>
<script src="bower_components/BigVideo.js/lib/bigvideo.js"></script>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Page Title</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div id="hello" >
<script type="text/javascript">
$(function() {
var options = {
controls: false,
doLoop: true,
useFlashForFirefox: false,
poster: "initialVid.png",
}
var BV = new $.BigVideo(options);
BV.init();
BV.show([
{ type: "video/webm", src: "forest_ski.webm"},
{ type: "video/mp4", src: "forest_ski.mp4"}
]);
});
</script>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Nevermind, i've solved the issue. its because i wasnt referring to bigvideo.css as a css file. if anyone ever runs across this, that's your problem!
I'm using javascript to control a modal for a log in and registration page.
However I cant seem to get the javascript to fire.
Here is the header for my page:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site </title>
<link rel="icon" href="myfavicon.ico" type="image/x-icon">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Landing Page CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- jQuery - UI CSS - Both v 1.11 and 2.1 -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<!-- Starts all the Javascript-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax.js"></script>
<!-- Javascript for the admin page -->
<script src="js/sb-admin-2.js"></script>
<!-- jQuery - Both v 1.11 and 2.1 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap Validator-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
<!-- The Validator for the forms-->
<script src="js/validator.js"></script>
<!-- My Custom Javascript functions-->
<script src="js/mymain.js"></script>
My Login Function are held within the /js/mymain.js script. I also have the following call to the login function in a document.ready() within the <head> of this page.
$('#loginBtn').click(function(e){
alert('cliked');
e.preventDefault();
login();
});
The problem is that the alert given above is not firing, which suggests that there is something broken in the javascript, but I cant work out what it is.
All the Modals are as per the Bootstrap site, and are ID'd appropriately. Its just a problem with the Javascript/Jquery.