|
JavaScript - 2 Sliders Conflicting On The Same Page
Hi there,
Having a problem on a clients website incorporating two js sliders in the same page. The scripts before editing were the TinySlider and TinyFader from http://forum.leigeber.com/ The parsers in Internet Explorer, Firefox and Chrome cannot seem to differentiate between the two scripts, although I tried altering various defined names for script control it didn't make much difference. The problems are the controls of the first slider operate the second and only the second slider works. Also, I'm getting validation errors (document type does not allow element "li" here; missing one of "ul", "ol" start-tag) where the showroom (second) script content lies. Not sure if this is related or not but either way if I try to fix it the only working slider is broken. Here is the testing url. http://www . bellsdomestics.co.uk/testing/index . html Can anyone point me in the right direction? Thanks. Similar TutorialsHi there. I've been working on how to use the AnythingSlider (Github) And I have a problem, when I want to use 2 or more sliders on the same page. I want to change the green navigationpanels, and they should be different on each slider: When I have one slider I use this: Code: <script type="text/javascript">
var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'];
function formatText(index, panel) {
return slider1[index - 1] || index;
}
</script>
But when I have more sliders, I can't use this: Code: <script>
$(function(){
var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'],
slider2 = ['jul', 'aug', 'sept', 'Quote #3', 'Image #3'];
$('#slider1').anythingSlider({
navigationFormatter : function(index, panel){
return slider1[index - 1] || index;
}
});
$('#slider2').anythingSlider({
navigationFormatter : function(index, panel){
return slider2[index - 1] || index;
}
});
});
</script>
It somehow conflicts with the slider.js I think. I'll post the HTML and the slider.js in the next two replies. Will you check it out and help me find the fault? Thanks Hi guys, I'm working on a site where I need to use javascript for two things on the same page: a slideshow and an inquiry form (more specifically, a popup calendar on the inquiry form). The problem is, I can't get them to work simultaneously. Whichever script is at the bottom of the head section is the one that works. So right now, the calendars are working just fine and the slideshow is not. If I move the slideshow script to the bottom of the head, it works perfectly but the calendars refuse to pop up. This is the test site if you need to see exactly what I'm referring to (username: testsite, password: enter) It seems that whichever script is placed on the bottom of the head section is overriding the other. Both scripts are from independent sources, so I have no idea what needs to be done here. Any help would be greatly appreciated! From my current head section, this is the bit that's required for the slideshow: Code: <link rel="stylesheet" type="text/css" href="images/slideshow/css/slideshow.css" media="screen" />
<style type="text/css">.slideshow a#vlb{display:none}</style>
<script type="text/javascript" src="images/slideshow/js/mootools.js"></script>
<script type="text/javascript" src="images/slideshow/js/visualslideshow.js"></script>
And this is the part that's required for the calendars: Code: <script type="text/javascript">
function go()
{
location=document.forms[0].gowhere.value;
}
</script>
<script type="text/javascript">
var a = new Image(); a.src = 'menu1.jpg';
var b = new Image(); b.src = 'menuhover1.jpg';
var c = new Image(); c.src = 'menu2.jpg';
var d = new Image(); d.src = 'menuhover2.jpg';
var e = new Image(); e.src = 'menu3.jpg';
var f = new Image(); f.src = 'menuhover3.jpg';
var g = new Image(); g.src = 'menu4.jpg';
var h = new Image(); h.src = 'menuhover4.jpg';
</script>
<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{
if (form.salutation.value == "") {
alert( "Please enter your salutation." );
form.salutation.focus();
return false ;
}
if (form.first_name.value == "") {
alert( "Please enter your first name." );
form.first_name.focus();
return false ;
}
if (form.last_name.value == "") {
alert( "Please enter your last name." );
form.last_name.focus();
return false ;
}
if (form.email.value == "") {
alert( "Please enter your email address." );
form.email.focus();
return false ;
}
if (form.country.value == "") {
alert( "Please enter your country of residence." );
form.country.focus();
return false ;
}
if (form.indate.value == "") {
alert( "Please enter your check-in date." );
form.email.focus();
return false ;
}
if (form.outdate.value == "") {
alert( "Please enter your check-out date." );
form.email.focus();
return false ;
}
if (form.elements['00NA000000269Gz'].value == "") {
alert( "Please enter the no. of bedrooms requested." );
form.elements['00NA000000269Gz'].focus();
return false ;
}
if (form.elements['00NA000000269H4'].value == "") {
alert( "Please enter the no. of adults." );
form.elements['00NA000000269H4'].focus();
return false ;
}
if (form.elements['00NA000000269H9'].value == "") {
alert( "Please enter the no. of children." );
form.elements['00NA000000269H9'].focus();
return false ;
}
return true ;
}
//-->
</script>
<style type="text/css">
@import "css/jquery.datepick.css";
/* Or use these for a ThemeRoller theme instead
@import "themes16/southstreet/ui.all.css";
@import "css/ui-southstreet.datepick.css";
*/
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript">
$(function() {
// $.datepick.setDefaults({useThemeRoller: true});
$('#indate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});
$('#outdate').datepick({dateFormat: 'd-M-yy', onSelect: showDate, minDate: new Date()});
});
function showDate(dateStr, date) {
if (this.id == 'indate') {
$('#outdate').datepick('option', 'minDate', date);
var dateString = date;
var myDate = new Date(dateString);
$('#00NA000000268NL').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())
}
else {
$('#indate').datepick('option', 'maxDate', date);
var dateString = date;
var myDate = new Date(dateString);
$('#00NA000000268NQ').val((myDate.getMonth()+1) + "/" + myDate.getDate() + "/" + myDate.getFullYear())
}
}
//function showDate(date) {
// $('#00NA000000268NQ').datepick.minDate = new Date(date);
// $('#00NA000000268NL').val(date)
//}
function showDate2(date) {
// $('#00NA000000268NQ').val(date)
}
</script>
Any ideas? Do you need me to post links to or codes from the js files or stylesheets? Anything more that I can provide to get this resolved, just let me know. Thanks in advance! Ok so the following code is basically the style of form I would like to have on my website. I was wondering however how you make the options on a sliding scale. So all the visitor has to do is slide the button along a scale to get their answer. I would basically like something found on stylepilot.com on their dna generator or like something on wonga.com (stupid adverts!!!!). Any help or pointing in the right direction would be great. <?php print_r($_POST); ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <script type="text/javascript"> function setOptions(chosen){ var selbox = document.formName.table; selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new Option('No database selected',' '); } if (chosen == "1") { selbox.options[selbox.options.length] = new Option('first choice - option one','oneone'); selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo'); } if (chosen == "2") { selbox.options[selbox.options.length] = new Option('second choice - option one','twoone'); selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo'); selbox.options[selbox.options.length] = new Option('second choice - option three','twothree'); selbox.options[selbox.options.length] = new Option('second choice - option four','twofour'); } if (chosen == "3") { selbox.options[selbox.options.length] = new Option('third choice - option one','threeone'); selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo'); } } </script> <form name="formName" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <select name="optone" size="1" onchange="setOptions(document.formName.optone.options[document.formName.optone.selectedIndex].value);"> <option value=" " selected="selected"></option> <option value="1">First Choice</option> <option value="2">Second Choice</option> <option value="3">Third Choice</option> </select> <select name="table" size="1"> <option value=" " selected="selected">No database selected</option> </select> <input type="submit" /> </form> </body> </html> Similiar to that of CBS.com or AOL.com when you visit them on the iphone. Something that responds to the swipe gesture within the iphone. I've been searching google, but mobile web resourses are far and few. Also tried to check out their source and it only shows it as one long line of text, not ideal for trying to read code. Good morning all. I am looking to have multiple image sliders (javascript / jquery) on one page. I have built the framework and have gotten one slider to work. However, when adding in another slider, I have only confused the situation. Below is the html and css. Let me know where I've gone wrong here. Will I need another set of css classes for each slider? How do I call a second slider? Thanks! The html/javascript 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" />
<link media="screen" type="text/css" link rel="stylesheet" href="style.css" />
<link media="screen" type="text/css" link rel="stylesheet" href="stylework.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-scroller.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-lightbox.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-lightbox.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-scroller.min.js"></script>
<title>idigify</title>
</head>
<body>
<div class="main">
<div class="container">
<div class="header">
<ul class="nav">
<ul>
<div class="allbuttons">
<div class="navabout"><li>about</li></div>
<div class="navwork"><li>work</li></div>
<div class="navcontact"><li>contact</li></div>
</div><!--end of all buttons-->
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of header-->
<div class="headeraboutme">the work</div>
<div class="sitemainfeature">
<div class="aboutme_text">
<h2>Just for Fun</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Ads/Advertising</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller2">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Logos</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Billboards</h2>
<div class="workslider_billboard">
</div><!--end of workslider-->
<h2>Business Cards</h2>
<div class="workslider_businesscard">
</div><!--end of workslider-->
<h2>Resumes</h2>
<div class="workslider_resume">
</div><!--end of workslider-->
<h2>Sales Pieces</h2>
<div class="workslider_salespiece">
</div><!--end of workslider-->
</div><!--end of about me text-->
</div><!--end of site main feature-->
<div class="worksplash"></div><!--end of background splash-->
</div><!--end of container-->
</div><!--end of main-->
<div class="footercontainer">
<ul class="nav">
<ul>
<div class="navabout"><li>about</li></div>
<div class="navwork"><li>work</li></div>
<div class="navcontact"><li>contact</li></div>
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of footer container-->
<script type="text/javascript">
$(document).ready(
function() {
//initialize scroller
$(".container").wtScroller({
num_display:3,
slide_width:240,
slide_height:180,
slide_margin:1,
button_width:25,
ctrl_height:15,
margin:1,
auto_scroll:false,
delay:4000,
scroll_speed:1000,
easing:"",
auto_scale:true,
move_one:false,
ctrl_type:"scrollbar",
display_buttons:true,
display_caption:true,
mouseover_caption:false,
caption_align:"bottom",
caption_position:"inside",
cont_nav:true,
shuffle:false
});
//initialize lightbox for scroller
$("a[rel='scroller']").wtLightBox({
rotate:true,
delay:4000,
transition_speed:600,
display_number:true,
display_dbuttons:true,
display_timer:true,
display_caption:true,
caption_align:"bottom",
cont_nav:true,
auto_fit:true,
easing:""
});
}
);
</script>
</body>
</html>
the css Code: .wt-scroller{
position:relative;
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}
.wt-scroller .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}
.wt-scroller .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}
.wt-scroller .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}
.wt-scroller .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.wt-scroller .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}
.wt-scroller .outside{
background-color:#222;
}
.wt-scroller .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}
.wt-scroller .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller .next-btn{
float:right;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}
.wt-scroller .index,
.wt-scroller .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller .index-hl{
background-position:-7px 0;
cursor:default;
}
/*start of scroller2 */
.wt-scroller2{
position:relative;
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}
.wt-scroller2 .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}
.wt-scroller2 .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}
.wt-scroller2 .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}
.wt-scroller2 .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.wt-scroller2 .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}
.wt-scroller2 .outside{
background-color:#222;
}
.wt-scroller2 .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}
.wt-scroller2 .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller2 .next-btn{
float:right;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller2 .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller2 .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller2 .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller2 .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}
.wt-scroller2 .index,
.wt-scroller2 .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller2 .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller2 .index-hl{
background-position:-7px 0;
cursor:default;
}
/*end of scroller2 */
Hi All, I am new to html and javascript. I am doing a webpage where i need to get the value from a slider and send it across the from client to server side. I need to inform the server side about the value (done) and also update the sliders's value after a submission button. Anyone have any idea how to do the latter part. Here is my code. Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="js/range.js"></script>
<script type="text/javascript" src="js/timer.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<p>Current Value:</p>
<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1"/>
</div>
<form name="hMess" action="" onsubmit="return convertURL(this);"> <input name="w" type="number" id="h-value" onchange="s.setValue(parseInt(this.value))"> <input name="1" id="1" type="submit" value="Update"></form>
<script type="text/javascript">
var s1 = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s1.onchange = function ()
{
document.getElementById("h-value1").value = s1.getValue();
};
var a=document.getElementById("h-value1").value
s1.setValue(a);
var locate = window.location
document.hmess.burns.value = locate
var text = document.hmess.burns.value
function delineate(str)
{
theleft = str.indexOf("=") + 1;
theright = str.indexOf("&");
return(str.substring(theleft, theright));
}
</script>
body>
</html>
Thanks in advance. Hi guys I have to scripts on my page and they work fine on their own but when i put them together one stops working ?? One is the colorbox script and the other toggles some hidden content. Any ideas why they wont work on the same page ? This is whats in my head section and the start of the body section Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../../js_files/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../js_files/jquery.tools.min.js"></script>
<!--[if lt IE9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="../../colorbox/colorbox.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../../colorbox/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='slides']").colorbox({transition:"none", width:"70%", height:"70%", scalePhotos:false});
});
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
$(function() {
$("#tabs").tabs("#tabscontent section", {
effect: 'fade',
fadeOutSpeed: 0,
fadeInSpeed: 400
});
});
</script>
Hi there, I am having trouble getting two javascript's to work at the same time. I am creating a long page that uses anchor links and the jquery.js to scroll the page to these. I am also trying to use lightbox.js to generate a 'contact us' form in a lightbox. Each function works stand alone but not when combined. The head of my html looks like this... Quote: <!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>Acudrill | Specialists in Diamond Core Drilling and Sawing</title> <meta name="keywords" content="acudrill, core diamond drilling, diamond sawing, chasing, lintel installation and erection, " /> <meta name="description" content="Acudrill - Specialists in Diamond Core Drilling and Sawing" /> <meta name="Creation Design and Communication Ltd" content="Acudrill" /> <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen,projection"/> <link rel="stylesheet" type="text/css" href="css/text.css" media="screen,projection"/> <link rel="stylesheet" type="text/css" media="all" href="css/901_12_25.css" /> <!-- JavaScript --> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> <script type="text/javascript" src="jquery.js"></script> <script> function goToByScroll(id){ $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); } </script> </head> The prototype.js and lightbox.js work fine together but the scrolling (jquery.js) does not. When removing the prototype.js and lightbox.js the jquery.js functions. I'm sure I'm just confusing everyone but I hope you can see what I mean. The functions are to run when selecting from the navigation... Quote: <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="javascript:void(0)" onClick="goToByScroll('1')">Home</a></li> <li><a href="javascript:void(0)" onClick="goToByScroll('2')">Services</a></li> <li><a href="javascript:void(0)" onClick="goToByScroll('3')">Case Studies</a></li> <li><a href="contact.html" class="lbOn">Contact</a></li> <li><a href="#"><orange>Acublog</orange></a></li> </ul> </div> You can see how each link should scroll to a section of the page, apart from contact that should bring up a lightbox. Hope some one can help me with this. Thanks, p.s I have read this article but this has not helped as the scripts do not include 'onLoad" Hey, I've been trying to make two javascript files kiss and make up in my web site code. I tried the "noconflict" function, but either I did it wrong, or it didn't work out. Here is the page with the conflict. Help? hey all, I'm using a js script for horizontal scrolling as well as a little script that changes the class of a tag when it's clicked, but the latter doesn't work with the horizontal scrolling script. not really sure why, i'm pretty new to javascript, any help would be awesome.. here's the horizontal scrolling: http://code.google.com/p/wplatformer...5e4d03a48bfc07 and the onclick change: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='selected'; Lst=obj; } /*]]>*/ </script></head> <body> <style type="text/css"> #nav .selected { opacity:1.00;} </style> <div id="nav"> <a href="#home" id="hlink" onClick="CngClass(this);" style="margin-left:130px">home</a> <a href="#foamo" class="flink">foamo</a> <a href="#book" class="blink">book</a> <a href="#portfolio" class="plink">portfolio</a> <a href="#contact" class="clink">contact</a> </div> </body> I have some kind of conflict in my Javascript he http://www.SonomaCountyFamilyLaw.com Drop down menu pops up when one scrolls over "Family Law," but rollover images do not load on other menu items as they should I am relatively new to Javascript; would much appreciate any assistance. Thank you kindly.... Here is the code in question: Code:
<script type="text/javascript">function mmLoadMenus() {
if (window.mm_menu_0514172011_0) return;
window.mm_menu_0514172011_0 = new Menu("root",298,24,"Arial, Helvetica, sans-serif",14,"#FFFFFF","#020056","#3C3A7D","#FFFFFF","left","middle",5,0,100,-5,7,true,true,true,5,true,true);
mm_menu_0514172011_0.addMenuItem("DIVORCE","location='divorce.html'");
mm_menu_0514172011_0.addMenuItem("CUSTODY","location='custody.html'");
mm_menu_0514172011_0.addMenuItem("ADOPTION/GUARDIANSHIP","location='adoption.html'");
mm_menu_0514172011_0.addMenuItem("PRIVATE JUDGING & SETTLEMENTS","location='private.html'");
mm_menu_0514172011_0.hideOnMouseOut=true;
mm_menu_0514172011_0.bgColor='#FFFFFF';
mm_menu_0514172011_0.menuBorder=1;
mm_menu_0514172011_0.menuLiteBgColor='#FFFFFF';
mm_menu_0514172011_0.menuBorderBgColor='#434089';
mm_menu_0514172011_0.writeMenus();
} // mmLoadMenus()var switchTo5x=false;
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
menu_02_over = newImage("assets/menu_02-over.jpg");
menu_06_over = newImage("assets/menu_06-over.jpg");
menu_08_over = newImage("assets/menu_08-over.jpg");
menu_10_over = newImage("assets/menu_10-over.jpg");
menu_12_over = newImage("assets/menu_12-over.jpg");
menu_14_over = newImage("assets/menu_14-over.jpg");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher:'04ce05ad-19c3-4812-98d3-7e46a3d579db'});</script>
<script language="JavaScript" src="mm_menu.js" type="text/javascript"></script>
</head>
<body onload="preloadImages();">
<script language="JavaScript1.2" type="text/javascript">mmLoadMenus();</script>
Im pretty sure I have some javascript conflicts on my site. Can any one offer advice on how to correct this. Heres a link to a page where there are problems. Every time I refresh that page in IE8 it loads differently - sometimes it loads OK and others it stops loading before the end - a symptom of the js problems I believe? http://tinyurl.com/ocqsmv I'm trying to get a javascript lightbox and a background image resize script to work on the same webpage but one's causing the other to work incorrectly. If anyone can help combine the 2 into a working script it would be hugely appreciated: <!-- BG script --> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script type="text/javascript" src="supersized.2.0.js"></script> <script type="text/javascript"> $(function(){ $.fn.supersized.options = { startwidth: 640, startheight: 480, vertical_center: 1, slideshow: 0, }; $('#supersize').supersized(); }); </script> <!-- lightbox script --> <script type="text/javascript" src="imagezoom.js"></script> <script type="text/javascript" src="mootools-1.2.4-core-yc.js"></script> <link href="imagezoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> window.addEvent("domready", function() { initImageZoom(); }); </script> Hi All, I have been racking my brain over this the last few days, and am hoping I can get help with an issue I am having. The website i am working on is using Wordpress as a CMS. I created a custom splash page that features 3 tabs that operate using CSS/Javascript to show and hide content in DIVs. One of those DIVs contains the login form to the rest of the site, and is housed in a sub-DIV generated by short code from a plugin. I am no expert with JavaScript, but understand that its code displays a given div while hiding the others, by telling the active div to Code: display:block; and the inactive ones to Code: display:none; . The problem is that the div that contains the login form, which has a plugin-generated div within it, is being hidden, so that when the page is loaded, everything appears, but when you click the other tabs and return to it, it disappears. You can see what I mean by going to http://le-raq.com/test/tab. For whatever reason, the sub div is being told to Code: display:none; (as verified by Firebug). Any idea of what code i can put in to stop this? Im banging my head against a wall here. Here is the code to the site as reviewed in Firebug: Code: <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>LE-RAQ.com | Independent Street/ Urban Wear</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://le-raq.com/home.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://le-raq.com/site/wp-content/themes/theunstandard/cufon-yui.js" type="text/javascript"></script>
<script src="http://le-raq.com/site/wp-content/themes/theunstandard/League_Gothic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#plink', {hover: true});
Cufon.replace('.links', {hover: true});
Cufon.replace('#slink', {hover: true});
</script>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=160852
function show_visibility(IDS){
hide_visibility();
document.getElementById(IDS).style.display = 'block';
}
function hide_visibility(){
var sel = document.getElementById('lnks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
}
</script>
</head>
<body>
<div id="maindivbox">
<div id="leftbox">
<script type="text/javascript"><!--
var img = new Array();
img.push("http://www.le-raq.com/indeximages/SplashLEFT2.png");
img.push("http://www.le-raq.com/indeximages/splashslide2.png");
var num = 1;
for(i=0;i<num;i++) {
rand = Math.floor(Math.random()*img.length);
document.write("<img src=\"" + img[rand] + "\" />");
}
//--></script>
<br><br>
<center><iframe src="http://www.facebook.com/plugins/like.php?href=facebook.com/pages/le-raqcom/148545595176936&layout=standard&show_faces=true&width=450&action=like&font=segoe+ui&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></center>
<br><center><p style="font-family:'Arial Black', Gadget, sans-serif; font-size:9px;">Copyright © 2010 LE-RAQ.com, a division of <a href="http://nxtlvl-media.com">NXTLVL Media, LLC</a> - All Rights Reserved</p></center>
</div>
<div id="rightboxtop" align="left">
<img src="http://www.le-raq.com/smlogo.png" style="margin-top:10px;"></img>
</div>
<div id="middlerightbox" >
<div style="width:100%; height:30px; margin-bottom:10px;"" align=center>
<p id="slink" style="margin-top:10px;"> <a href="#login" onclick="show_visibility('logintab')" class="tab">LOGIN</a> | <a href="#subscribe" onclick="show_visibility('subscribe')" class="tab">SUBSCRIBE</a> | <a href="#howitworks" onclick="show_visibility('howitworks')" class="tab">HOW</a></p>
</div>
<div id='lnks' style="margin-top:35px;">
<!--LOGIN/REGISTER-->
<DIV id="logintab" style="margin: 20px 20px; display: block;">
<li><h2>Welcome, Administrator</h2>
<div class="login" id="theme-my-login1">
<div class="tml-user-avatar"><img alt='' src='http://0.gravatar.com/avatar/c6cdbf9cbd96c836560d6031fc24027d?s=50&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G' class='avatar avatar-50 photo' height='50' width='50' /></div>
<ul class="tml-user-links"><li><a href="http://le-raq.com/test/wp-admin/">Dashboard</a></li>
<li><a href="http://le-raq.com/test/wp-admin/profile.php">Profile</a></li>
<li><a href="http://le-raq.com/test/?action=logout&_wpnonce=d9d35f125f">Log out</a></li>
</ul>
</div></li>
</DIV>
<!--END LOGIN/REGISTER-->
<!--Subscribe-->
<DIV id="subscribe" style="margin: 20px 20px; display: none;">
<P id="plink" style="margin-top: 20px; margin-left: 10px; color:#FFFFFF;"> SIGN UP FOR OUR FREE PRE-LAUNCH<BR>NEWSLETTER, AND GET FIRST DIBS ON THE<BR>HOTTEST APPAREL AND DEALS!!<br><br>JOIN NOW AND YOU CAN ALSO EARN UP TO $15*!!</P>
</DIV>
<!--END Subscribe-->
<!--Howitworks-->
<DIV id="howitworks" style="margin: 20px 20px; display: none;">
</DIV>
<!--END Howitworks-->
</div>
</div>
<div id="rightboxbottom">
<p style="font-family:'Arial Black', Gadget, sans-serif; font-size:9px; margin-top:10px;">*<strong>THE FINE PRINT</strong>: Offer available to only the first 1,500 Subscribers. Earn $10 in store credit for signing up with LE-RAQ.com and an extra $5 in store credit for inviting a friend, to a limit of $15 store credit. Offer may end without notice.<br><br>
PRIVACY NOTICE: Your privacy is important to us. Therefore, we will not sell or rent your information to anyone else for any reason.<br> QUESTIONS?: Contact <a href="mailto: info@le-raq.com">info@le-raq.com</a> </p>
</div>
</div>
<script src="chrisdomroll.js">
/****************************************************
* DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
****************************************************/
</script>
</body>
</html>
<!-- Dynamic Page Served (once) in 0.749 seconds -->
Thanks in advance!! I am an amateur web designer and could really use your help. I'm working on a test page right now (http://www.piscatawayacres.com/test.html). I'm trying to have 3 effects going on at the same time, but due to my inexperience with Javascript (I, in fact, copied and pasted most of it), I can't get them to work. To complicate things, my test page works to a certain extent, but when I copy and paste the coding to other pages (like alpacas.html, sheep.html, goats.html, etc.) it ceases to work. I have no idea why it does this. The 3 effects I want to have work: 1. Javascript rollover buttons. 2. A Javascript slideshow--the square picture above the buttons should be changing. 3. I want the image and the buttons to follow the user down the page as they scroll. For some reason though, the buttons (on the couple of pages they work at all) cease to work except at the very top of the page or the very bottom, but not in between. I've been struggling with this obstacle for a long time, so I would greatly appreciate any help someone could give. Thanks so much for your help. PAC P.S. I want to emphasize that some of the coding works on the test.html page, but WON'T work when I copy and paste it elsewhere. I can only assume it is because of conflicts with the coding. I know my coding is not flawless.... Hello, I'm sure someone on this site is familiar with Lightforms AJAX contact forms. I've downloaded one and am attempting to integrate with my current Contact page. Lightform comes with 3 external .js sheets one of which is formcheck.js. While Lightform has sufficiently functioning and nicely styled JS which checks for valid inputs in the text fields, I would also like to add watermark text in a few of the text fields. I pretty much had what I wanted on my own form until I tired to mix it as inline code with with Lightform Contact form. Here is the mixtu Code: <input id="name" name="name" type="text" class="validate['required','length[3,-1]','nodigit']" size="20" value="Mr., Ms., Pastor..."onBlur="if(document.getElementById('name').value=='') {document.getElementById('name').value='Mr., Ms., Pastor...'};" onfocus="document.getElementById('name').value=''"; />
Perhaps someone can tell me why my watermark effect won't happen anymore. thanks for your time. I am adding a Facebook Like button to my website using their JavaScript SDK. Everything looks good in Firefox, but in Internet Explorer 8 I'm getting a page error, and after the Like button is pressed, it produces a white box underneath, obscuring the next several lines (despite adding a height parameter). The error message says: Message: Object doesn't support this property or method XFBML Line: 16 Char: 2517 Code: 0 URI: http://static.ak.facebook.com/connec.../Connect/XFBML I experimented with a blank page http://www.positivelyfeminine.org/re.../cd/blank1.htm and everything looked fine until I added the Intense Debate code. So, I think there is some kind of conflict between the Facebook and the Intense Debate code but can't figure out where. Any suggestions would be appreciated! Hello everyone, I've been scratching my head over this one for quite a while. I'm having trouble running two different scripts on my site- one named accordion and the other named lightbox. I think that it might because of a similar behavior in both the scripts (and if I had to guess I'd say maybe its preload.) I'd appreciate any help/questions. The page that I'm having the problem with is he http://lehdesigns.com/bearpaws.html And here are the codes.. Lightbox Code: LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
overlayOpacity: 0.8, // controls transparency of shadow overlay
animate: true, // toggles resizing animations
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest)
borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable
// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
}, window.LightboxOptions || {});
// -----------------------------------------------------------------------------------
var Lightbox = Class.create();
Lightbox.prototype = {
imageArray: [],
activeImage: undefined,
// initialize()
// Constructor runs on completion of the DOM loading. Calls updateImageList and then
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
this.updateImageList();
this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10;
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1;
this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
// If animations are turned off, it will be hidden as to prevent a flicker of a
// white 250 by 250 box.
var size = (LightboxOptions.animate ? 250 : 1) + 'px';
// Code inserts html at the bottom of the page that looks similar to this:
//
// <div id="overlay"></div>
// <div id="lightbox">
// <div id="outerImageContainer">
// <div id="imageContainer">
// <img id="lightboxImage">
// <div style="" id="hoverNav">
// <a href="#" id="prevLink"></a>
// <a href="#" id="nextLink"></a>
// </div>
// <div id="loading">
// <a href="#" id="loadingLink">
// <img src="images/loading.gif">
// </a>
// </div>
// </div>
// </div>
// <div id="imageDataContainer">
// <div id="imageData">
// <div id="imageDetails">
// <span id="caption"></span>
// <span id="numberDisplay"></span>
// </div>
// <div id="bottomNav">
// <a href="#" id="bottomNavClose">
// <img src="images/close.gif">
// </a>
// </div>
// </div>
// </div>
// </div>
var objBody = $$('body')[0];
objBody.appendChild(Builder.node('div',{id:'overlay'}));
objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
Builder.node('div',{id:'outerImageContainer'},
Builder.node('div',{id:'imageContainer'}, [
Builder.node('img',{id:'lightboxImage'}),
Builder.node('div',{id:'hoverNav'}, [
Builder.node('a',{id:'prevLink', href: '#' }),
Builder.node('a',{id:'nextLink', href: '#' })
]),
Builder.node('div',{id:'loading'},
Builder.node('a',{id:'loadingLink', href: '#' },
Builder.node('img', {src: LightboxOptions.fileLoadingImage})
)
)
])
),
Builder.node('div', {id:'imageDataContainer'},
Builder.node('div',{id:'imageData'}, [
Builder.node('div',{id:'imageDetails'}, [
Builder.node('span',{id:'caption'}),
Builder.node('span',{id:'numberDisplay'})
]),
Builder.node('div',{id:'bottomNav'},
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
)
)
])
)
]));
$('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this));
$('outerImageContainer').setStyle({ width: size, height: size });
$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));
$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));
$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
var th = this;
(function(){
var ids =
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose';
$w(ids).each(function(id){ th[id] = $(id); });
}).defer();
},
//
// updateImageList()
// Loops through anchor tags looking for 'lightbox' references and applies onclick
// events to appropriate links. You can rerun after dynamically adding images w/ajax.
//
updateImageList: function() {
this.updateImageList = Prototype.emptyFunction;
document.observe('click', (function(event){
var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
if (target) {
event.stop();
this.start(target);
}
}).bind(this));
},
//
// start()
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
//
start: function(imageLink) {
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
// stretch overlay to fill page and fade in
var arrayPageSize = this.getPageSize();
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });
this.imageArray = [];
var imageNum = 0;
if ((imageLink.rel == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}
// calculate top and left offset for the lightbox
var arrayPageScroll = document.viewport.getScrollOffsets();
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
var lightboxLeft = arrayPageScroll[0];
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
this.changeImage(imageNum);
},
//
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//
changeImage: function(imageNum) {
this.activeImage = imageNum; // update global var
// hide elements during transition
if (LightboxOptions.animate) this.loading.show();
this.lightboxImage.hide();
this.hoverNav.hide();
this.prevLink.hide();
this.nextLink.hide();
// HACK: Opera9 does not currently support scriptaculous opacity and appear fx
this.imageDataContainer.setStyle({opacity: .0001});
this.numberDisplay.hide();
var imgPreloader = new Image();
// once image is preloaded, resize image container
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},
//
// resizeImageContainer()
//
resizeImageContainer: function(imgWidth, imgHeight) {
// get current width and height
var widthCurrent = this.outerImageContainer.getWidth();
var heightCurrent = this.outerImageContainer.getHeight();
// get new width and height
var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
// scalars based on change from old to new
var xScale = (widthNew / widthCurrent) * 100;
var yScale = (heightNew / heightCurrent) * 100;
// calculate size difference between new and old image, and resize if necessary
var wDiff = widthCurrent - widthNew;
var hDiff = heightCurrent - heightNew;
if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
// if new and old image are same size and no scaling transition is necessary,
// do a quick pause to prevent image flicker.
var timeout = 0;
if ((hDiff == 0) && (wDiff == 0)){
timeout = 100;
if (Prototype.Browser.IE) timeout = 250;
}
(function(){
this.prevLink.setStyle({ height: imgHeight + 'px' });
this.nextLink.setStyle({ height: imgHeight + 'px' });
this.imageDataContainer.setStyle({ width: widthNew + 'px' });
this.showImage();
}).bind(this).delay(timeout / 1000);
},
//
// showImage()
// Display image and begin preloading neighbors.
//
showImage: function(){
this.loading.hide();
new Effect.Appear(this.lightboxImage, {
duration: this.resizeDuration,
queue: 'end',
afterFinish: (function(){ this.updateDetails(); }).bind(this)
});
this.preloadNeighborImages();
},
//
// updateDetails()
// Display caption, image number, and bottom nav.
//
updateDetails: function() {
// if caption is not null
if (this.imageArray[this.activeImage][1] != ""){
this.caption.update(this.imageArray[this.activeImage][1]).show();
}
// if image is part of set display 'Image x of x'
if (this.imageArray.length > 1){
this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show();
}
new Effect.Parallel(
[
new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })
],
{
duration: this.resizeDuration,
afterFinish: (function() {
// update overlay size and update nav
var arrayPageSize = this.getPageSize();
this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
this.updateNav();
}).bind(this)
}
);
},
//
// updateNav()
// Display appropriate previous and next hover navigation.
//
updateNav: function() {
this.hoverNav.show();
// if not first image in set, display prev image button
if (this.activeImage > 0) this.prevLink.show();
// if not last image in set, display next image button
if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
this.enableKeyboardNav();
},
//
// enableKeyboardNav()
//
enableKeyboardNav: function() {
document.observe('keydown', this.keyboardAction);
},
//
// disableKeyboardNav()
//
disableKeyboardNav: function() {
document.stopObserving('keydown', this.keyboardAction);
},
//
// keyboardAction()
//
keyboardAction: function(event) {
var keycode = event.keyCode;
var escapeKey;
if (event.DOM_VK_ESCAPE) { // mozilla
escapeKey = event.DOM_VK_ESCAPE;
} else { // ie
escapeKey = 27;
}
var key = String.fromCharCode(keycode).toLowerCase();
if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
this.end();
} else if ((key == 'p') || (keycode == 37)){ // display previous image
if (this.activeImage != 0){
this.disableKeyboardNav();
this.changeImage(this.activeImage - 1);
}
} else if ((key == 'n') || (keycode == 39)){ // display next image
if (this.activeImage != (this.imageArray.length - 1)){
this.disableKeyboardNav();
this.changeImage(this.activeImage + 1);
}
}
},
//
// preloadNeighborImages()
// Preload previous and next images.
//
preloadNeighborImages: function(){
var preloadNextImage, preloadPrevImage;
if (this.imageArray.length > this.activeImage + 1){
preloadNextImage = new Image();
preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
}
if (this.activeImage > 0){
preloadPrevImage = new Image();
preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
}
},
//
// end()
//
end: function() {
this.disableKeyboardNav();
this.lightbox.hide();
new Effect.Fade(this.overlay, { duration: this.overlayDuration });
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
},
//
// getPageSize()
//
getPageSize: function() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
return [pageWidth,pageHeight];
}
}
document.observe('dom:loaded', function () { new Lightbox(); });
Hey! I'm working on a website that has the bubble navigation jquery script in it, but every time I combine it with another jquery script, it kind of goes bonkers. Right now, I'm trying to combine it with this circular image slider, here are the tutorials from the two scripts I'm using: http://tympanus.net/codrops/2010/04/...n-with-jquery/ http://www.baijs.nl/tinycircleslider/ And here's my script so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiny Carousel: A lightweight jQuery plugin</title>
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
<!--[if lte IE 6]>
<style type="text/css">
/* Internet Explorer 6 PNG transparency fix */
#rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-rotatescroll.png", sizingmethod='scale'); }
#rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-thumb.png", sizingmethod='scale'); }
</style>
<![endif]-->
<script type="text/javascript" src="example/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="example/js/jquery.tinycircleslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
});
</script>
<title>Awesome Bubble Navigation with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Awesome Bubble Navigation with jQuery" />
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#fff url(images/bg_scoot1.png) no-repeat top left;
}
.title{
width:548px;
height:119px;
position:absolute;
top:300px;
left:250px;
background:transparent url(title.png) no-repeat top left;
}
a.back{
background:transparent url(back.png) no-repeat top left;
position:fixed;
width:150px;
height:27px;
outline:none;
bottom:0px;
left:0px;
}
#content{
margin:0 auto;
}
</style>
</head>
<body>
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><a href="http://www.baijs.nl"><img src="example/images/hdr3.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr2.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr1.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr4.jpg" /></a></li>
<li><a href="http://www.baijs.nl"><img src="example/images/hdr5.jpg" /></a></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
<div id="content">
<a class="back" href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery"></a>
<div class="title"></div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>User</h2>
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Properties</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Home</h2>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Shop</h2>
<ul>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Orders</a></li>
<li><a href="#">Offers</a></li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Photos</h2>
<ul>
<li><a href="#">Gallery</a></li>
<li><a href="#">Prints</a></li>
<li><a href="#">Submit</a></li>
</ul>
</div>
<div class="item fav">
<img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Love</h2>
<ul>
<li><a href="#">Social</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Comments</a></li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
</script>
</body>
</html>
|
|||||||