I use the below code in my page
<link type="text/css" rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
<script src="galleria/galleria-1.2.9.min.js"></script>
<script src="galleria/plugins/history/galleria.history.min.js"></script>
<script type="galleria/themes/classic/galleria.classic.min.js"></script>
<div id="galleria">
<img src="./test/1_1.jpg">
<img src="./test/1_2.jpg">
<img src="./test/1_3.jpg">
</div>
<script>
Galleria.run('#galleria');
</script>
I get this error
Init failed: Galleria could not find the element "#galleria"
I don't understand where the problem is. Please suggest me.
have you tried adding a theme - I suppose it requires one. The ones declared at the top might not be doing the trick.
Put this right above your Galleria.run code..
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
</script>
Related
I'm sure this has been asked before but the solutions i found can't work in my case...
(One thing to know: I'm a complete beginner with java/android)
as the title says I'm trying to display a javascript alert as a toast but all the solutions i found use the WebChromeClient and the OnJsAlert problem is, im using WebViewClient and i have overridden a lot of it's stuff... some stuff that the chrome one doesn't support... So, my question is: Is it somehow possible to get the javascript alerts from a page so i can handle them with the normal WebViewClient? Thanks!
Here's a sample code that will work in your html page
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
function clickFunction() {
M.toast({html: 'I am a toast!'});
}
</script>
<body>
<a onclick="clickFunction()" class="btn">Toast!</a>
</body>
Reference: https://materializecss.com/toasts.html
I suggest you use this light and simple ToastMaker library which is only 1KB in size.
$('#mybutton').click(()=>{ToastMaker("This is a toast notification!")});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">
<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>
<button id="mybutton">Show Toast</button>
Check documentation for more examples.
I'm developing a web app with Spring Boot, Bootstrap 4 and Thymeleaf.
I want to show a bootstrap alert, and then, it hides automatically after seconds (just like a "sucessfully" notification).
I have found a lot of solutions, but all of then need JavaScript. When I tried to use JS on my project, it doesn't work.
I use a default template, which is used in the others views through layout:decorate="~{default}". In this default template, I have the Bootstrap link and scripts:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
...
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
If a put in any view the following code, it does nothing.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{default}">
<head>
...
</head>
<body class="text-center">
<div layout:fragment="content">
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
Purchase
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500)
.slideUp(500, function () {
$("#successalert").slideUp(500);
});
});
});
</script>
...
</div>
</body>
NOTE: This is just an example to check that JS doesn't work. I takes it from this post.
When I run this code, the alert is showed, but it never disappears. I have tried with a lot of scripts and never work.
Could be a compatibility version problem?
Hi I think this post address your problem:
Why does jQuery throw the error `fadeOut is not a function'?
In this line <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> you use the slim version of Jquery not the full-one, this prompt when I click to "Add to Wishlist" link" a TypeError in the Firefox develloper tool console.
TypeError: $(...).fadeTo is not a function, this means that the Jquery javascript object $("#success-alert") doesn't have attached a fadeTo function.
You can get the full minified version here: https://code.jquery.com/
Snippet from https://code.jquery.com
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
PS: If you don't need SRI you can remove integrity and crossorigin attributes.
I am attempting to get jQuery waypoints to work and I am doing a very basic example and it won't display the window alert that I am attempting to show when scrolled to. I was watching a video of this and I had exactly what the guy had, so I am not sure why it isn't working for me.
Any ideas of why this not initiating?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section>
<img src="images/big-smile-face.png" class="dipper" alt="">
</section>
<script src="js/waypoints.js"></script> <!-- js/waypoints.js file -->
Javascript - js/waypoints.js file
$(document ).ready(function(){
var $dipper = $('.dipper');
$dipper.waypoint(function () {
alert('waypoint!');
});
});
What browser are you using? There might be some issue there. It seems to be working fine for me and I am not getting any errors.
I'm working with a blog and I wanted to place a JQuery scroll bar into my div box for the main content area. I'm kind of new to JS but I think I missed something. The devs provided a script but I don't believe its correct. Just a side note: all the libraries are loaded before the script so I don't believe that's where the problem is. Here is what I current have (MINUS all the Sql crap):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../css/Styles.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="BKlayer2">
<img src="../Images/BKlayer2.png" />
<div class="InnerContent1">
<img src="../Images/innerContent1.png" />
</div>
<div class="innerContent2">
<img src="../Images/innerContent2.png" />
</div>
<div class="Feedback">
<img src="../Images/Feedblockbk.png" />
</div>
<div id="blog_Posts">
<?php do { ?> Updated on: <?php echo $row_displayBehaviors['formatted']; ?><br />
<br />
<?php echo $row_displayBehaviors['title']; ?>
<br />
<br />
<?php echo $row_displayBehaviors['blog_entry']; ?>
<p> </p>
<?php } while ($row_displayBehaviors = mysql_fetch_assoc($displayBehaviors)); ?>
</div>
<?php
mysql_free_result($getArchives);
mysql_free_result($displayBehaviors);
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".blog_Posts").mCustomScrollbar();
theme:"light"
});
})(jQuery);
</script>
</body>
</html>
I changed .content to .blog_Posts because that's the div box I'm trying to apply this too. I checked all other css and additional info to make sure .content was not referenced anywhere else.
After uploading scripts and all other relevant information to my server, I checked in firebug to find out the problem.
Now firebug is giving me this error:
TypeError: $(...).mCustomScrollbar is not a function
[Break On This Error]
$(".blog_Posts").mCustomScrollbar();
I think firebug said it better than I could. I didn't see a function defined here. I'm not exactly sure what the function would be if it has to be included.
It sounds to me like you haven't included the jQuery plugin script.
mCustomScrollbar is not a part of jQuery, you'll need to reference the plugin.
This sounds like the plugin you are talking about, include the script reference from there:
http://manos.malihu.gr/jquery-custom-content-scroller/
I figured it out. Just if anyone wants to know:
I did it by working backwards on the demo script and figuring it out. Basically what I didn't do was have the CSS lined up and I also didn't have the scripts in the correct directories.
As for the proper script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<!-- custom scrollbars plugin -->
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".body,.content").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
basically I added in the .body in and changed .content so it corresponded to my main styles sheet. You really don't need any css on your page other than this:
<style>
body>.mCustomScrollBox>.mCSB_scrollTools{top:2%; height:96%;}
</style>
That's the key I was missing.
I have following code:
function iAgree(){
alert("Hello");
jQuery('#openAccount').hide();
jQuery('#submitDetails').show();
}
I am calling it using:
<div class="openAccWraper">
<div class="openAccDetail"> </div>
<div class="questionContact">
<input type="checkbox" name="iAgree" id="iAgree" value="1" />
</div>
</div>
<img src="img/btnSubmitDet.png" border="0" />
I am getting following error:
Uncaught TypeError: object is not a function
I think the problem may be with the iAgree being id as well, and IIRC some (all?) browsers define the global named same as id (if it is possible as identifier). So, iAgree() tries to call DOM object, which obviously fails; and it also explains why renaming solves it.
To check if this is the case put onclick="alert(iAgree); iAgree();" and see if it alerts function or InputElement.
I think the problem is that your code is not being loaded onto the page properly. If you wrap your function code in the head or the body tag of your html, your code should work. e.g.
<body>
<!-- html -->
<!-- load your script at the bottom of the body -->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function iAgree(){
alert("Hello");
.........
}
</script>
</body>
Or
<body>
<!-- html -->
<!-- load your script at the bottom of the body-->
<script src="jquery.js" type="text/javascript"></script>
<script src="iAgree.js" type="text/javascript"></script>
</body>
Here's a minimal working fiddle http://jsfiddle.net/SZYH3/2/.