Javascript dialog nonsense - javascript

I want a button on my page that will display a dialog asking for text and another button (to submit the information to email) onClick. I cannot get the dialog to show. I adapted an existing example on jsFiddle that displays the dialog onCreate; however, I need the dialog to be displayed when I click a button.
So here it is:jsFiddle
I believe the problem lies in the function call.
<p>Question</p>
This is the start of my HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My title ยท stuff</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/prettify.css" rel="stylesheet">
<link href="css/flat-ui.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.ico">
<style>
.containerx {
background-color: #1abc9c;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: scroll;
}
.imag{
padding-left:10px;
padding-top:10px;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/bootstrap-switch.js"></script>
<script src="js/flatui-checkbox.js"></script>
<script src="js/flatui-radio.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="bootstrap/js/google-code-prettify/prettify.js"></script>
<script src="js/application.js"></script>
<script>
function showDialog(){
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'center'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"Send question": function() {
$(this).dialog("close");
}
}
});
}
</script>

You need to select No wrap option in jsFiddle (http://jsfiddle.net/3d7QC/1952/) otherwise showDialog is local function to that scope (in which jsFiddle puts it).
In case of your own page - don't forget to include jquery-ui.

My best guess is that jQuery UI is not loaded when the function is run. You'll need to move the jQuery UI script to be right after jQuery.
While you're at it, you could load the rest of your scripts before the inline one as well.

Related

Images not aligning as I want with slick slider

I am trying to create this for a website I am building from scratch.
This is a grid with different images being on the same line, and we could slide them on the left in order to see the one that are hiddens (you can see here that there are more pics outside the frame):
So I made some researches and found about Slick slider, which I tried to use but couldn't get a good result of.
This is my HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hestia - Accueil</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!--Slick slider-->
<div class="slider-villes">
<img src="images/accueil/paris-1772x900.jpg" alt="paris">
<img src="images/accueil/nice-1772x900.jpg" alt="nice">
<img src="images/accueil/marseille-1772x900.jpg" alt="marseille">
<img src="images/accueil/lyon-1772x900.jpg" alt="lyon">
<img src="images/accueil/bordeaux-1772x900.jpg" alt="bordeaux">
<img src="images/accueil/ajaccio-1772x900.jpg" alt="ajaccio">
<img src="images/accueil/toulouse-1772x900.jpg" alt="toulouse">
</div>
<!--Slick slider-->
<!--Scripts-->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript" src="js/slick.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slider-villes').slick({
infinite: true,
cssEase: 'linear',
swipe: true,
arrows: true,
variableWidth: true
});
});
</script>
<!--Scripts-->
</body>
</html>
And here is my CSS:
.slider-villes {
display: flex;
overflow-x: scroll;
}
.slider-villes img {
width: 20% !important;
height: 20%;
object-fit: cover;
}
And it looks like this:
So there are my pictures, I can slide them, but they will always keep their position to the very left of the screen and they do not seem to be willing to stay close together...
I don't really know what to do at this point... I hope someone will be able to help me.
Thanks.
by removing the css rules for ".slider-villes" and modifying
that of ".slider-villes img" by:
.slider-villes img {
height: 150px;
width:auto;
object-fit: cover;
padding: 20px 0 20px 40px;
}
and putting this script:
$(document).ready(function() {
$('.slider-villes').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
variableWidth: true
});
I get this result.

How to register dynamicaly loaded content (e. g. classes)

I have a problem. When i load external data and i will use jquery events on that data - this is not working because the DOM does not know this. The event-delegation works perfect. I only want to know how to make the <div class="dialog"> original </div> loaded from source.txt known to the DOM or another solution to access the external data through the jquery Event. When I use the line div class="dialog"> original </div> in the Main document all works fine.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
iframe{
overflow:hidden;
}
</style>
<script>
$( function() {
$( ".dialog" ).dialog({
autoOpen: false,
width:700,
height:700,
show: {
},
hide: {
}
});
$(document).on("click","#link",function(){
$("#include").load("http://www.damago.de/dev/source.txt");
});
$(document).on( "click","#opener", function() {
$( ".dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="include"></div>
<a id="link" href="#">Include the source.txt with the code</a>
</body>
</html>
source.txt
<div class="dialog"> original </div>
<button id="opener">This is the text of the dialog</button>

Why is jQuery not working with Bootstrap 4 alpha 6?

I am attempting to use jQuery and it is giving me various errors. I tried shuffling different script tags around, but had no success. Here is some code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<style>
/*some css here*/
</style>
<!--a bunch of HTML here-->
<script>
if(jQuery){
alert('yes');
}
$(window).load(function(){
$('.intro').fadeIn(500, function(){
$(".welcomeSize").fadeIn(500);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
I get an error saying that jQuery is undefined. If I put the jquery CDN before my script, I get this error:
Uncaught TypeError: a.indexOf is not a function
at r.fn.init.r.fn.load (jquery.min.js:4)
at newsite.html:129
Is there something I am missing?
Your problem is not related with bootstrap, you are adding jQuery dependent script before it's loaded. Add your script after jQuery and use $(document).ready(), .load() is deprecated. https://api.jquery.com/load-event/
.intro{
width: 200px;
height: 200px;
background: purple;
display: none;
}
.welcomeSize{
width: 200px;
height: 200px;
background: violet;
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JQuery+Bootstrap</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="intro">
</div>
<div class="welcomeSize">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
if(jQuery){
console.log('yes');
}
$(document).ready(function(){
$('.intro').fadeIn(500, function(){
$(".welcomeSize").fadeIn(500);
});
});
</script>
</body>
</html>
</body>
</html>
you have to import jquery before write any code using jquery so what you have to do is
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
// then your code goes here
the second thing for Uncaught TypeError: a.indexOf is not a function
you should use $(window).on('load', function() { ... });
instead of
$(window).load(function() { ... });
load, .unload, and .error, deprecated since jQuery 1.8, are no more.
Use .on() to register listeners.
Note that you've been using the jQuery commands before linking the script. The script tag which source(src) attribute is pointing to Google CDN must come before the jQuery command.

Open modal dialog onClick with JavaScript doesn't work

I know, this problem is postet here already in 236 variants. But even when I try to use those I understand, I don't get the correct behavior with my script. I have the following code (HTML and JS):
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var dialog, form
dialog = $('div#infoDialog').dialog({
autoOpen: false,
height: 600,
width: 500,
modal: true
});
$('#showInfos').click(function(e) {
e.preventDefault();
dialog.dialog('open');
});
});
</script>
</head>
<body>
<div id="infoDialog" title="Eventinfos">
Testeintrag
</div>
<button id="showInfos"><img src="images/apoa.gif" /></button>
<img src="images/apoa.gif" />
</body>
</html>
The button works fine as intended, but the "a href..." doesn't work at all. I already tried all alternatives I could think of, like dont use img's or try a # instead of the javascript: void(0) or like not use a variable dialog but always name it directly, but none worked. In the examples nearly the same code should worked fine. What did I do wrong?
I believe the problem is that both "buttons" are using the same ID. Either change the ID of one of them or switch them both to use classes (or some other selector).
IDs must be unique.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var dialog, form
dialog = $('div#infoDialog').dialog({
autoOpen: false,
height: 600,
width: 500,
modal: true
});
$('.showInfos').click(function(e){
e.preventDefault();
dialog.dialog('open');
});
});
</script>
</head>
<body>
<div id="infoDialog" title="Eventinfos">
Testeintrag
</div>
<button class="showInfos"><img src="images/apoa.gif" /></button>
<img src="images/apoa.gif" />
</body>
</html>
use class="showInfos" instead id="showInfos" and in js
$('.showInfos').click(function(e) {
e.preventDefault();
dialog.dialog('open');
});
find the jsbin here

javascript runtime error object doesn't support property or method 'tabs'

Whenever i load my page this error got hit.
My code is:
<head runat="server">
<title>Jai Jinendera</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/selectivizr-min.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css">
<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/all-in-one-min.js"></script>
<script src="js/setup.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel.js" type="text/javascript">
$(window).load(function () {
$('.flexslider').flexslider();
});
$(function () {
$('#work').carouFredSel({
width: '100%',
scroll: 1,
auto: false,
pagination: false,
prev: '.prev_item',
next: '.next_item'
});
$("#work").touchwipe({
wipeLeft: function () { $('.next_item').trigger('click'); },
wipeRight: function () { $('.prev_item').trigger('click'); }
});
});
$(window).load(function(){
$('#demo-side-bar').removeAttr('style');
});
</script>
<style type="text/css">
.demobar {
display:none;
}
#demo-side-bar {
top:53px!important;
left:90%!important;
display:block!important;
}
</style>
</head>
It says error in client/js/setup.js-line 10 column 5
and 10th line of setup.js is
$('.tabs').tabs({ fx: { opacity: 'toggle', duration: 'fast'} });
I see two problems in your <script> declarations:
You have included jquery.min.js twice, once from a location on your server and once from Google's CDN. Remove the latter. (Or remove the former and move the latter up to replace it.)
A <script> element should either reference an external script or contain content of its own, but not both.
You need to move the code out of your jquery.carouFredSel.js script element:
<script src="jquery.carouFredSel.js" type="text/javascript"></script>
...and then include that code in a new script element:
<script>
$(window).load(function () {
...
</script>
P.S. I don't know what you have in all-in-one-min.js, but it clearly isn't actually all in one or you wouldn't need the other scripts.

Categories