I have an issue that's driving me bonkers.
Im using a _Layout.cshtml file with Scripts rending on top.
from _Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- CSS Start -->
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<!-- CSS End -->
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!-- Javascript Start -->
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<script src="~/Scripts/customJS.js"></script>
<!-- Javascript End -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
All scripts works like a charm, except one thing. I'm using a code in a webgrid that displays data on hover using popover()
from customJS.js
$(function () {
$('[data-toggle="popover"]').popover()
})
Every thing work well, untill i use webgrid paging or sorting, then the code breaks an i need to reload the page to make it work. Now to the kicker, if i place all scripts on the bottom the popover works while paging and sorting but my jquery-ui dialogs breaks and won't display, plus i get jquery undefined errors.
I have spent some time now searching and trying different solutions with no correct result in sight. What am i doing wrong?
Here is the code for the popover call also
FileGrid.Column("Description", style: "width-20", format: #<button role="button" tabindex="0" class="btn btn-success btn-block" data-toggle="popover" title="File Information" data-content="#item.Description" data-trigger="focus"><i class="fa fa-book"></i> View file Description</button>),
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 made a webpage that inputs user's feedback using a form. On successful submit I display a thank you message on the same page, for which I'm using javascript.
The code executes well when I put the javascript on the same page. However, when I tried to separate the script onto a file (in a test webserver), it stopped executing.
Can you please help?
Relevant codes are mentioned below:
Head Element
<head>
<meta charset="utf-8" />
<!-- For proper rendering and touch zooming in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/logo.ico" />
<title><?= htmlspecialchars($title) ?></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="../javascript/submit-logic.js"></script>
</head>
First 2-3 lines of the javascript function:
$(function ()
{
$('form').submit(function (e)
{
e.preventDefault();
Detailed code (HTML, CSS, Javascript) can be found in my codepen (this is working as expected) : http://codepen.io/abbor123/pen/YGwVXg
Javascript folder is placed outside the Public folder and has 755 permission.
Edit 1:
File Tree Screenshot:
Console Error Screenshot: (submit-logic.js is the name of my javascript file. The URL mentioned on hovering over this link is: /javascript/submit-logic.js:1 )
The javascript code page is available at the following URL:
https://gist.github.com/abor123/3193eb399c3f973be453ae9a8fcc0ce5
Move your javascript folder into public_html. As Quentin commented, your server likely isn't set up to serve any files outside public_html.
I am building my site using MaterializeCSS (http://materializecss.com/)
I am wondering how can I trigger the Wave/Ripple effect manually to certain control , for example:
"Trigger the wave/ripple effect of certain button."
The MaterializeCSS team stands that they use a port of the "Waves.js" javascript library (http://fian.my.id/Waves/) , but when I try to use the commands, errors appear in the browser console.
Can someone point me out here?
Code used as example:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<title>My website title</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
Waves.ripple('#but_1');
});
</script>
<a id="but_1" class="waves-effect waves-light btn">button</a>
</body>
</html>
According to the MaterializeCSS TEAM ...
"Waves is an external library that we've included in Materialize to
allow us to create the ink effect outlined in Material Design"
... and according to Waves docs ....
Waves.ripple(elements, options) Create a ripple effect in HTML element
programmaticaly.
(http://fian.my.id/Waves/#api)
So in the Browser Console I get this error:
Uncaught TypeError: Waves.ripple is not a function
I found a Solution !!!
Steps:
Download the latest version of Waves.js , link https://github.com/fians/Waves/releases
Open the file named "materialize.js" from the materializeCSS files
Once opened, try to find the section that starts with something like ...
;/*!
* Waves v0.6.4
* http://fian.my.id/Waves
*
* Copyright 2014 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/
;(function(window) {
'use strict';
var Waves = Waves || {};
var $$ = document.querySelectorAll.bind(document);
// Find exact position of element
function isWindow(obj) {
return obj !== null && obj === obj.window;
}
That section belongs to the Waves library embedded inside materializeCSS .... Replace all that section of code with the new code of Waves.js .... how? .... COPY the code of the latest version of Waves.js, and replace (PASTE) inside the Waves SECTION inside materialize.js
Now ... inside your HTML file you should have something like this (check the comments)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--ADD the CSS from materializeCSS -->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- Add the file "materialize.js" ... the one you just modified -->
<script type="text/javascript" src="js/materialize.js"></script>
<!-- Add the CSS from Waves.js -->
<link type="text/css" rel="stylesheet" href="waves/waves.css" media="screen,projection"/>
<!-- DO NOT ADD the Waves.js
<script type="text/javascript" src="wave/waves.js"></script>
-->
<title>Your site</title>
</head>
<body>
<script type="text/javascript">
function clickbut() {
//Now you can use the Waves.ripple function!!!
Waves.ripple('#but_1');
};
$(document).ready(function() {
//Initialize the Waves module
Waves.init()
});
</script>
<h2 class="left-align"><i class="left-align medium material-icons">touch_app</i>My website Header</h2>
<button onclick="clickbut()">click me</button>
<a class="waves-effect waves-light btn ">button</a>
<a id="but_1" class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
</body>
</html>
If you click the "click me" button ... the ripple effec will be played in the #but_1 button
I have always added waves-effect as a class to the button. It triggers on the button click.
<a class="waves-effect waves-light btn">button</a>
This is from the first button example on the materialize css website.
Buttons on MaterializeCSS
If it says the Waves.ripple function does not exist, try bringing in the Waves.js script from a CDN.
None of the above answers worked for me. Played around with this and managed to get it to trigger using the following
Waves.attach('#refresh', ['waves-light']);
Waves.ripple('#refresh');
I've just created this theme with the jquery mobile theme rooler, and included it in my page like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themename.min.css" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div class="container" data-role="page" data-theme="a">
<div class="title" data-role="header">Title</div>
<div class="box" data-role="content">
Content
</div> <div class="footer" data-role="footer">
Some other content
</div>
</div>
</body>
</html>
But the default theme is displayed:
The chrome console isn't reporting any errors.
What could be the problem?
Move your theme which I'm presuming is themename.min.css below jquery.mobile-1.4.5.min.css. The way themes work in CSS is usually by overriding selectors, such as class names. If two stylesheets apply styles to the same selector, the last defined instance is the one that's used. Currently, you're defining your theme and overriding it with the main jQuery theme. Reverse the order and your problem should be fixed. Below would be an optimal loading scenario.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="themename.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
For CSS:
Load the default jQuery Mobile Theme
Load the jQuery Mobile Icon overrides
Load your custom theme `thememain.min.css`
In addition, it's wise to move the JavaScript below the CSS files. CSS Files are downloaded in parallel whereas JavaScript files are usually downloaded and parsed one at a time.
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.