Response title
This is preview!
noConflict problem (again...newbie)
in Using jQuery
•
13 years ago
Hello everyone!
I am pretty much "fresh off the boat" when it comes to jQuery...I too like many others am trying to use both jquery-1.3.2.js along with prototype.js (as well as two other js files, called effects.js and lightwindow.js). I have read and attempted to implement the techniques to get the noConflict function to solve my conflicts with the $ used in both.
I have created a user login that clears the internal labels (this uses the jquery-1.3.2.js file) and lightwindow to create a modual window gallery (this uses prototype.js, effects.js, and lightwindow.js) The lightwindow javascript files can be found at http://www.stickmanlabs.com/lightwindow/#download
I have tried placing the code:
...below my js includes. I then went about trying to change all the "$()" to "jQuery()" inside the function that uses the jQuery.js file. I don't know if this is the only place I have to change the "$()" or if I need to go into the protoype.js file or jquery-1.3.2.js files (etc) and change things there too.
Thus I am going to include my code/markup without any of the "$()" changes.
I would so greatly appreciate anyone's help and look forward to learning more on this forum and contributing as I learn (and become more competent).
Thanks in advance.
I am pretty much "fresh off the boat" when it comes to jQuery...I too like many others am trying to use both jquery-1.3.2.js along with prototype.js (as well as two other js files, called effects.js and lightwindow.js). I have read and attempted to implement the techniques to get the noConflict function to solve my conflicts with the $ used in both.
I have created a user login that clears the internal labels (this uses the jquery-1.3.2.js file) and lightwindow to create a modual window gallery (this uses prototype.js, effects.js, and lightwindow.js) The lightwindow javascript files can be found at http://www.stickmanlabs.com/lightwindow/#download
I have tried placing the code:
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
...below my js includes. I then went about trying to change all the "$()" to "jQuery()" inside the function that uses the jQuery.js file. I don't know if this is the only place I have to change the "$()" or if I need to go into the protoype.js file or jquery-1.3.2.js files (etc) and change things there too.
Thus I am going to include my code/markup without any of the "$()" changes.
I would so greatly appreciate anyone's help and look forward to learning more on this forum and contributing as I learn (and become more competent).
Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lorem Ipsum</title>
<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/lightwindow.css" />
<!-- JavaScript -->
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body>
<!-- Javascript used for the user login. This uses the jquery-1.3.3.js file-->
<script type="text/javascript">$(document).ready(function() {
var focusEvent = function() {
if(this.type == 'text') {
var html = $(this).clone().wrap('<span></span>').parent().html();
html = html.replace(/type=("|')?text("|')?/, 'type="Password"');
var $newPwdBx = $(html);
$(this).replaceWith($newPwdBx);
$newPwdBx.removeClass('readOnly');
$newPwdBx.val('');
$newPwdBx.focus();
$newPwdBx.blur(blurEvent);
}
};
var blurEvent = function() {
if(this.value == '') {
var html = $(this).clone().wrap('<span></span>').parent().html();
html = html.replace(/type=("|')?Password("|')?/, 'type="text"');
var $newTxtBx = $(html);
$(this).replaceWith($newTxtBx);
$newTxtBx.addClass('readOnly');
$newTxtBx.val('Password');
$newTxtBx.focus(focusEvent);
}
};
$("#password").focus(focusEvent);
});
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
function clearText(field){
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
<form id="userLogin" method="post" name="loginform" action="https://my.atlanticmetro.net/index.php">
<div>
<input name="login" size="20" type="text" value="Username" id="username" tabindex="1" onFocus="clearText(this)" onBlur="clearText(this)"/>
</div>
<div>
<input name="pass" size="20" type="text" value="Password"id="password" tabindex="2" class="readOnly" />
</div>
<button name="submit" type="submit" class="orangeButtons">Login</button>
<a href="quote.php"><button type="submit" class="orangeButtons">Request Quote</button></a>
</form>
<!-- BEGIN LGA1: NEW YORK, NY GALLERY -->
<div class="page-body">
<a href="gallery/LGA1/DSC_3328.jpg" class="lightwindow page-options" rel="Data Centers[LGA1: New York, NY]" title="LGA1: New York, NY" caption="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></a>
<a href="gallery/LGA1/DSC_3340.jpg" class="lightwindow hidden" rel="Data Centers[LGA1: New York, NY]" title="LGA1: New York, NY" caption="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></a>
<a href="gallery/LGA1/DSC_3366.jpg" class="lightwindow hidden" rel="Data Centers[LGA1: New York, NY]" title="LGA1: New York, NY" caption="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></a>
<!-- END LGA1: NEW YORK, NY GALLERY -->
<!-- BEGIN NJ3: NORTH BERGEN, NJ GALLERY -->
<a href="gallery/NJ3/DSC_3208.jpg" class="lightwindow page-options" rel="Data Centers[NJ3: North Bergen, NJ]" title="NJ3: North Bergen, NJ" caption="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></a>
<a href="gallery/NJ3/DSC_3262.jpg" class="lightwindow hidden" rel="Data Centers[NJ3: North Bergen, NJ]" title="NJ3: North Bergen, NJ" caption="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></a>
<a href="gallery/NJ3/DSC_3267.jpg" class="lightwindow hidden" rel="Data Centers[NJ3: North Bergen, NJ]" title="NJ3: North Bergen, NJ" caption="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></a>
<!-- END NJ3: NORTH BERGEN, NJ GALLERY -->
</div>
</body>
</html>
1