I'm trying to set up a jQuery Dialog box from clicking a list element in my navigation bar. I have the code working for a separate project when clicking a canvas element but it wont work for this application. My code is as follows:
Clickable Div in Nav-Bar List:
<nav id="nav_bar">
<ul>
<li><a class="fancypdf" href="img/resume.pdf">Resume</a></li>
<li><a>Youtube</a></li>
<li class="contact" style="cursor:pointer;">Contact</li>
</ul>
</nav>
Div that Should Show up in Dialog Box:
<div class='dialog'>
Hello
</div>
jQuery:
<script>
$(function(){
$(".contact").click(function(event){
$(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>
My "imports":
http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"> </script>
<script type="text/javascript" src="js/libs/fancybox-2.1.4/jquery.fancybox.pack.js"> </script>
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox.css">
Here is all of my main script tags:
<script>
$(".fancypdf").click(function(){
$.fancybox({
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
}
}); //fancybox
return false;
}); //click
</script>
<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script>window.jQuery || document.write('<script src="js/libs/jquery- 1.7.1.min.js"><\/script>');</script>
<!-- FancyBox -->
<script src="js/fancybox/jquery.fancybox.js"></script>
<script src="js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow : function(){
this.title = this.title + " - " + $(this.element).data("caption");
}
});
}); // ready
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeShow : function(){
this.title = $(this.element).data("caption");
}
});
});
</script>
<script>
var jquery = jQuery.noConflict();
jquery(function(){
jquery(".contact").click(function(event){
console.log("clicked");
jquery(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>
It looks like you forgot to include jQuery UI or the order of jQuery and jQuery UI loaded are wrong.
Your code is working fine.
Tested in jsBin
Just make sure all js are included properly:
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Related
I am working on upgrading our website from Bootstrap 3 to Bootstrap 4. I have a JQuery dialog that no longer works when I change to Bootstrap 4- the content of the dialog is not displayed. The buttons in the JQuery dialog definition are, but nothing else. Any ideas are appreciated!
Bootstrap 3 dialog:
Bootstrap 4 dialog:
var themedialog = $("#theme-change-form").dialog({
autoOpen: false,
height: 'auto',
width: 450,
modal: true,
buttons: {
"Update Theme": updateTheme,
Cancel: function() {
themedialog.dialog("close");
}
},
close: function() {
$('.subtheme-button').removeClass('active');
$('.subtheme-button.selected').addClass('active');
}
});
//Open dialog when change logo link clicked
$('#change-theme').on("click", function() {
themedialog.dialog('open');
});
function updateTheme() {
console.log('theme udated');
}
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.usebootstrap.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<div hidden id="theme-change-form">
<div>
<h3>Air</h3>
<button class='subtheme-button' data-pkSubThemeID='3'>Acid Precipitation</button>
</div>
<!--more buttons here in the same format as above-->
</div>
<button id="change-theme">Change Themes</button>
Thank you!
Remove the hidden attribute on the dialog element. Bootstrap has CSS that sets display: none on elements with that attribute, and it doesn't seem necessary anyway. Your browser's document inspector is a great tool for seeing things like that.
var themedialog = $("#theme-change-form").dialog({
autoOpen: false,
height: 'auto',
width: 450,
modal: true,
buttons: {
"Update Theme": updateTheme,
Cancel: function() {
themedialog.dialog("close");
}
},
close: function() {
$('.subtheme-button').removeClass('active');
$('.subtheme-button.selected').addClass('active');
}
});
//Open dialog when change logo link clicked
$('#change-theme').on("click", function() {
themedialog.dialog('open');
});
function updateTheme() {
console.log('theme udated');
}
body {
padding: 30px;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.usebootstrap.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<div id="theme-change-form">
<div>
<h3>Air</h3>
<button class='subtheme-button' data-pkSubThemeID='3'>Acid Precipitation</button>
</div>
<!--more buttons here in the same format as above-->
</div>
<button id="change-theme">Change Themes</button>
I want to hide a large number of images on the html page. While using fancybox-thumbnail to show there are other images to view. Goal is to have the page look clean and not cluttered with a bunch of images. But it's not working, not sure if it's something conflicting or does this idea not work and I HAVE to show the other images on the page.
HEAD Tags:
<link rel="stylesheet" href="js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script>$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
BODY Tags:
<a class="fancybox-thumb" rel="fancybox-thumb" href="images/art/3pk.jpg">
<div class="imgconcept"></div></a>
<div class="hidden">
<a class="fancybox-thumb" rel="fancybox-thumb" href="images/art/clcfashnb.jpg"><img src="images/art/clcfashnb.jpg" alt="" /></a>
</div>
EDIT:
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script>$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
DEMO
The problem was actually straight forward. You were missing two vital libraries for the thumbnails to work.
jquery.fancybox-thumbs.js
jquery.fancybox-thumbs.css
That's all there was to it.
Your code was good.
$(".fancybox-thumb").fancybox({
prevEffect: 'none',
nextEffect: 'none',
helpers: {
title: {
type: 'outside'
},
thumbs: {
width: 50,
height: 50
}
}
});
I have a project with some javascripts. One image viewer, a carrousel, some toggle and now I need to make a pop-up form.
But when I insert the javascript for pop-up... is stop working.
How can I make all work? or any hint to help me create a pop-up form (instead of this I use now).
Thanks in advance
this is the script in header
<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="css/bootstrap-lightbox.min.css">
<link rel="stylesheet" href="css/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="css/owl-carousel/owl.theme.css">
<script type="text/javascript">
$( document ).ready(function() {
$(".toggleControl").click(function(){
$(this).siblings(".toggleDiv").slideToggle(1000);
$(this).children().children( ".collapse-expand" ).toggleClass( "collapse-ico" );
$(this).children().children( ".collapse-expand" ).toggleClass( "expand-ico" );
});
}); //document.ready end
</script>
<script src="js/popjs.js"></script>
<link rel="stylesheet" href="popupwindow.css">
<script src="popupwindow.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#newsletter').click(function (e) {
e.preventDefault();
$('#modal-content').popUpWindow({
action: "open", // open or close
modal: true, // modal mode
size: "large", // large, medium or large
buttons: [{
text: "x",
click: function () {
this.close();
}
}]
});
});
});
</script>
this is the script in footer
<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
<script src="js/okzoom.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("#owl-example").owlCarousel({
items : 4
})
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#pro-img-carousel').carousel({
interval: 10000
})
$('#carousel-pro-img').carousel ({
interval:8000
})
});
</script>
<script type="text/javascript">
$(function(){
$('.example').okzoom({
width: 100,
height: 100,
border: "1px solid black",
shadow: "0 0 5px #000"
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
});
</script>
<script>
$(document).ready(function() {
function random(owlSelector){
owlSelector.children().sort(function(){
return Math.round(Math.random()) - 0.5;
}).each(function(){
$(this).appendTo(owlSelector);
});
}
$("#owl-demo").owlCarousel({
navigation: true,
navigationText: [
"<img src='images/left.png' alt='' class=''>",
"<img src='images/right.png' alt='' class=''>"
],
beforeInit : function(elem){
random(elem);
}
});
});
</script>
At first, you included jquery 3 times, bootstrap 2 times.
One time will be enought.
Since you are using Bootstrap, will be good to use this http://getbootstrap.com/javascript/#modals
I have a Admin screen in Area = "PrivateCEQRApplication". I am using Jquery table sorter (http://tablesorter.com/docs/) and jquery dialog (https://jqueryui.com/dialog/#default) in that page. I am using MVC4 and razor.
My view is
#model CEQRApplication.Areas.PrivateCEQRApplication.Models.CEQRUser
#{
ViewBag.Title = "AdminPage";
Layout = "~/Views/Shared/_LogoutLayout.cshtml";
}
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/jquery-ui.css")" />
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (event) {
$(".tablesorter")
.tablesorter({
widthFixed: true,
cssChildRow: "expand-child",
widgets: ["zebra"],
headers: { 0: { sorter: false } }
, onRenderHeader: function () {
this.wrapInner("<span></span>");
}
, debug: false
})
.tablesorterPager({
positionFixed: false,
container: $("#pager")
})
.bind('pagerChange', function () {
$('.expand-child td').hide();
});
$('.buttonsAddUser').click(function (event) {
$("#editResult").dialog({
title: 'Add User',
autoOpen: false,
resizable: false,
height: 500,
width: 650,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load('#Url.Action("AddUser", "Admin")');
},
close: function (event, ui) {
$(this).dialog('close');
}
});
$("#editResult").dialog('open');
return false;
});
});
</script>
my button and div for rendering dialog
<td style="padding-left:30px;">
<div class="buttonsAddUser">
<img src="#Href("~/Content/themes/base/Images/add-users.png")" style="height: 2.0em; width: 3.0em; vertical-align:middle; display:inline-block; cursor:pointer;" id="AddRow" alt="Add User" title="Add User" />
Add New User
</div>
</td>
<div id="editResult" title="Edit User">
</div>
Now the issue is when i use these script only on the page and remove table sorter
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/jquery-ui.css")" />
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
dialog works
and when i use these script only on the page and remove dialog
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
sorter works
but if i put the j-query script for both sorter and dialog dialog throws the error
**
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'**
I am using tablesorter.js which is dependent on jquery.js file. Modal dialog is also dependent on jquery-1.9.1.js. Since 2 jqueries can't be on the same template how can I get both tablesorter.js and jquery dialog to work together? is there any way i can resolve this issue I will really appreciate the help.
Also, I am not very clear on the concept of bundling. So if i want to bundle the scripts shown above how will i do it.
Thanks
You have 2 versions of jQuery loaded (1.9.1 and latest).
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
jQuery UI is loaded after the first one, and is attached to that instance of jQuery. When you load the second jQuery, you're essentially throwing out the first one along with any plugins attached to it.
Pick one version of jQuery that works with both jQuery UI and the sorter, and make sure the jQuery script the first of the scripts you load, and both the dialog and sorter should work. For example...
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
--- Update ---
Since it appears that you need different versions of jQuery... one for jQuery UI (1.9.1) and one for the sorter (1.4.x, in jquery-latest.js), you're going to have to do something like this...
<script src="#Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script type="text/javascript">
$oldJQuery = $.noConflict();
// $ is now 1.9.1, $oldJQuery is the first jQuery that was loaded ("latest")
</script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
Anywhere where you need to access the table sorter plugin, you need to use $oldJQuery, otherwise just use $...
<script type="text/javascript">
$(document).ready(function (event) {
$oldJQuery(".tablesorter")
.tablesorter({
widthFixed: true,
cssChildRow: "expand-child",
widgets: ["zebra"],
headers: { 0: { sorter: false } }
, onRenderHeader: function () {
this.wrapInner("<span></span>");
}
, debug: false
})
.tablesorterPager({
positionFixed: false,
container: $("#pager")
})
.bind('pagerChange', function () {
$('.expand-child td').hide();
});
$('.buttonsAddUser').click(function (event) {
$("#editResult").dialog({
title: 'Add User',
autoOpen: false,
resizable: false,
height: 500,
width: 650,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load('#Url.Action("AddUser", "Admin")');
},
close: function (event, ui) {
$(this).dialog('close');
}
});
$("#editResult").dialog('open');
return false;
});
});
</script>
<link rel="stylesheet" type="text/css" href="jquery-tooltip/jquery.tooltip.css"/>
<script type="text/javascript" src="jquery-tooltip/jquery.tooltip.js"></script>
<div id="baby" title="My tootip">The text</div>
<script type="text/javascript">
$(function(){
$('#baby').tooltip({
track: true,
delay: 0,
showURL: false,
showBody: " - ",
extraClass: "pretty",
fixPNG: true,
opacity: 0.95,
left: -120
});
});
</script>
The files are found, and they are not 404.
Can't confirm your problem. Your code copy/pasted works just fine
Demo http://jsbin.com/iwojo3