Develop Reference

working with multiple javascripts

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

jQUery Dialog Box when Clicking Navigation Bar Link not Working

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>

conflict between Jquery slider html5 animation and cycle

is the header html5 sometimes works and sometimes not at one glance with the cycle slider. Both use Jquery and I think there must be a mistake. In Chrome console gives me the following:
Uncaught TypeError: Object #<Object> has no method 'okToLaunchComposition' head_edgePreload.js:5
edgeCallback head_edgePreload.js:5
(anonymous function) head_edgePreload.js:2
t head_edgePreload.js:2
d head_edgePreload.js:2
I.b.onreadystatechange.b.onload head_edgePreload.js:2
I head_edgePreload.js:2
(anonymous function)
Here you have the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BLOG</title>
<script src="<?php $_SERVER['DOCUMENT_ROOT']?>/galeria/jquery.min.js"></script>
<link href="<?php $_SERVER['DOCUMENT_ROOT']?>/estilo-pagina-css.php" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php $_SERVER['DOCUMENT_ROOT']?>/galeria/jquery.cycle.all.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#slider1').cycle({
fx: 'fade', //'scrollLeft,scrollDown,scrollRight,scrollUp',blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp,scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,turnUp,turnDown,turnLeft,turnRight,uncover,ipe ,zoom
speed: '600',
timeout: '700000000',
next: '#next',
prev: '#prev',
pager: '#thumb',
pauseOnHover: true, // if you hover pauses the slider
startClockOnMouseOut: true, // if clock should start on MouseOut
manualAdvance: true,
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + slide.src + '" width="43" height="29" /></li>';
}
});
});
</script>
<script language="javascript">
/**
* Adobe Edge DOM Ready Event Handler
*/
jQuery.noConflict();
jQuery(window).ready(function() {
jQuery.Edge.initialize(symbols);
});
/**
* Adobe Edge Timeline Launch
*/
jQuery(window).load(function() {
jQuery.Edge.play();
});
</script>
<style type="text/css">
#contenedor {
width: 900px;
margin: 0 auto;
height: 100%;
background-color: #000000;
}
</style>
<link href="<?php $_SERVER['DOCUMENT_ROOT']?>/galeria/estilo-galeria.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera" >
<object id="EdgeID" type="text/html" width="900" height="167" data-dw-widget="Edge" data="<?php $_SERVER['DOCUMENT_ROOT']?>/head/Assets/head.html">
</object>
</div>
<div id="botonera"><?php include($_SERVER['DOCUMENT_ROOT']."/botonera.php"); ?></div>
<div id="sombra-galeria-botonera"><?php include($_SERVER['DOCUMENT_ROOT']."/galeria/botonera-galeria.php"); ?></div>
<div id="para-contenido"></div>
<div id="centro_galeria"><?php include($_SERVER['DOCUMENT_ROOT']."/galeria/includes/piragua.php"); ?>
</div>
<div id="para-contenido2"><?php include($_SERVER['DOCUMENT_ROOT']."/galeria/presentacion-galeria.php"); ?></div>
<div id="separador"><img src="<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/separador.png" /></div>
<div id="sha-do">
</div>
<div id="pie"><?php include($_SERVER['DOCUMENT_ROOT']."/pie.php"); ?></div>
</div>
</body>
</html>
The page example:
http://bolivar.uphero.com/

Error in jquery Dialog when used with jquery tablesorter pager JavaScript runtime error: Object doesn't support property or method 'dialog'

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>

Why do I have to evoke the flowplayer twice?

This is totally odd.......
Here is my code:
HTML
<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">Test</a>
JAVASCRIPT
$(document).ready(function () {
flowplayer('a.video', {
src: '/swf/flowplayer.commercial-3.2.7.swf',
clip: {
autoPlay: false,
autoBuffering: true
}
});
})
Above examaple doesn't work, the player does not get created in the DOM. But below example does (all I am doing is calling the flowplayer twice).....?!
HTML
<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">Test</a>
JAVASCRIPT
$(document).ready(function () {
flowplayer('a.video', {
src: '/swf/flowplayer.commercial-3.2.7.swf',
clip: {
autoPlay: false,
autoBuffering: true
}
});
flowplayer('a.video', {
src: '/swf/flowplayer.commercial-3.2.7.swf',
clip: {
autoPlay: false,
autoBuffering: true
}
});
})
Why?

Try and remove the Test description of your hyperlink and it should work:
<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">**Test**</a>
Try to move the script at the bottom of the page. It's one of the best practices
This is my sample and it works:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Set default value</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.2.6.min.js"></script>
</head>
<body>
<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px"></a>
<script type="text/javascript">
$(document).ready(function () {
flowplayer('a.video', {
src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
clip: {
autoPlay: false,
autoBuffering: true
}
});
})
</script>
</body>
</html>

I ran into this issue recently when I had a play icon inside the anchor tag. I ended up emptying the anchor tag HTML on click in order to fix this issue. Sample code below.
HTML:
<a id="videoPlayer" class="videoPlayer" href="[VIDEO_URL]" style="background-image: url(VIDEO_THUMB_URL);">
<img src="/images/icon_video_play.png" width="40" height="40" alt="View video" />
</a>
CSS:
a.videoPlayer {
display: block;
width: 480px;
height: 270px;
text-align: center;
cursor: pointer;
}
a.videoPlayer img {
margin-top: 115px;
border: 0px;
}
Javascript:
$(document).ready(function () {
$("a.videoPlayer").click(function (e) {
// Empty anchor tag to avoid having to click twice
$(this).empty();
flowplayer("videoPlayer", "/flash/video/flowplayer.swf");
e.preventDefault();
});
});