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
Related
I`m not sure, maybe this question is already answered or there is some similar, but i hope that this will be the easiest way for me, to figure out this problem.
So i have this code in my "head" tag:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#fb_man").click(function() {
$.fancybox.open([
{
href : 'both.jpg',
title : 'My title'
}, {
href : 'front.jpg',
title : '2nd title'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
And this one in my body:
<a id="fb_man" href="javascript:;"><img src="img/eyey.png"></a>
I want to open a gallery of 2 images (both.jpg and front.jpg) on click on eyey.png, but i get this error:
Uncaught TypeError: $.fancybox.open is not a function
How can i solve this error ?
just change this part from
$.fancybox.open([
to
$.fancybox([
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>
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>
I am new to jQuery and I am trying to use the dialog function.
When I am looking at the demo (animated.html) provided with the jquery.ui, I have tried to insert an huge image inside the dialog box.
It works well when inserting the following code, it restricted the size of dialog box.
However when I removed the stylesheet (jquery.ui.all.css and demos.css) ref from the demo, the dialog box now are not under restriction and show the whole image without scroll bar in the dialog box.
(And hence the parent contain scroll bar now, which is not favorable)
Which subject in style sheet enable to set the size of dialog box?
For the first time:
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../ui/jquery.ui.effect-fade.js"></script>
<script src="../../ui/jquery.ui.effect-explode.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
maxWidth:400,
maxHeight: 300,
width: 400,
height: 300,
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
For the second time:
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../ui/jquery.ui.effect-fade.js"></script>
<script src="../../ui/jquery.ui.effect-explode.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
maxWidth:400,
maxHeight: 300,
width: 400,
height: 300,
overflow: 'auto',
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
I've just downloaded the nailthumb project from http://www.garralab.com/nailthumb.php but I cant call this function from asp.net mvc 3 of js.
the functions in the examples are called as follow:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({
width:100,height:100,method:'resize',fitDirection:'top left'});
});
</script>
I've tried:
<script type="text/javascript">
$(document).ready(function () {
$('#nailthumb-container').nailthumb({
width: '100',
height: '100'
});
});
</script>
The js file loads but I cant figure out how to call this functions.
Any Ideas?
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.nailthumb.1.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.nailthumb.1.1.css" type="text/css"></script>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<style type="text/css" media="screen">
.square-thumb {
width: 150px;
height: 150px;
}
</style>
<div class="nailthumb-container square-thumb">
<img alt='' src='#Url.Action("Show", "ConsultorioImagenes", new { id = Model.ID})' />
</div>
You're using the id selector (#) when you're assigning it a class.
This line:
<div class="nailthumb-container square-thumb">
..assigns the nail-thumb-container class. You need to use the class selector (.) in your jQuery call:
<script type="text/javascript">
$(document).ready(function () {
$('.nailthumb-container').nailthumb({
width: '100',
height: '100'
});
});
</script>
You have <div class="nailthumb-container square-thumb">
and $('#nailthumb-container').nailthumb({
It should be $('.nailthumb-container').nailthumb({