0
У меня есть страница, в которой используются как Fisheye, так и Bootstrap Jquery. Теперь Fisheye не работает, когда используется Bootstrap. Я пытался использовать: noConflict();Как избежать множественных столкновений jqueries
Но, похоже, это не помогает. Возможно, я поместил его неправильно? Ниже приведен мой полный код страницы. Обращайтесь за консультацией. Спасибо заранее.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="side_style.css" type="text/css">
<script src="menuv2.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<link href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/bootstrap-modal.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<style>
.left {
height: 100%;
//opacity: 0.5;
background: rgba(0, 0, 0, 0.3);
border-top: 3px solid #ccc;
border-bottom: 3px solid #ccc;
border-right: 3px solid #ccc;
position: relative;
float: left;
width: 16%;
color: #fff;
}
.right {
height: 100%;
background: rgba(0, 0, 0, 0.3);
border-top: 3px solid #ccc;
border-bottom: 3px solid #ccc;
border-left: 3px solid #ccc;
position: relative;
float: right;
width: 16%;
}
.middle {
height: 100%;
background: rgba(0, 0, 0, 0.3);
border-top: 3px solid #ccc;
border-bottom: 3px solid #ccc;
border-right: 3px solid #ccc;
border-left: 3px solid #ccc;
position: relative;
float: left;
margin-left: 3em;
//margin-right: 1em;
// left:20%;
width: 60%;
}
.ontop {
position: relative;
top: 2.7em;
right: 1.6em;
}
.onmiddle {
position: relative;
top: 12.7em;
right: 1.6em;
}
</style>
</head>
<body style="background-image: url(bg/6.jpg);background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;background-size: cover;" width="100%" height="100%">
<div class="left">
<aside>
<img src="hooha_images/logo_small.png" class="expand">
</aside>
<aside style="padding-top: 20%;" class="ontop">
<?php include ('sidebar.php'); ?>
</aside>
<aside>
<aside>
<?php include('bottom_left.php');?>
</aside>
</div>
<div class="middle">
<h1>This is the Superstar page </h1>
</div>
<div class="right">
<div class="responsive"> <aside style="position: relative;float: right;">
<a data-toggle="modal" href="#responsive">Register</a> | <a data-toggle="modal" href="#responsive">Login</a>
<aside>
<div id="responsive" class="modal hide fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Register</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span6">
<h4>Kindly fill up your details</h4>
<p>Name:
<input type="text" class="span12" />
</p>
<p>Email
<input type="text" class="span12" />
</p>
<p>Password
<input type="text" class="span12" />
</p>
</div>
<div class="span6">
<h4>More Info</h4>
<p>Detail 1
<input type="text" class="span12" />
</p>
<p>Detail 2
<input type="text" class="span12" />
</p>
<p>Detail 3
<input type="text" class="span12" />
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$.noConflict();
$(document).ready(
function() {
$('#dock2').Fisheye({
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment: 'left',
valign: 'bottom',
halign: 'center'
}); //added semicolon
}
);
</script>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="js/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script type="text/javascript">
$(function() {
$.fn.modalmanager.defaults.resize = true;
$('[data-source]').each(function() {
var $this = $(this),
$source = $($this.data('source'));
var text = [];
$source.each(function() {
var $s = $(this);
if ($s.attr('type') === 'text/javascript') {
text.push($s.html().replace(/(\n)*/, ''));
} else {
text.push($s.clone().wrap('<div>').parent().html());
}
});
$this.text(text.join('\n\n').replace(/\t/g, ' '));
});
prettyPrint();
});
</script>
</body>
</html>
Я попытался добавить jQuery.noConflict(); внутри того же сценария Fisheye, но это не имеет никакого значения. Где моя ошибка? –