|
JavaScript - Javascript Lightbox And Animation Header
I can get the lightbox to work perfectly fine, and I love how seamlessly it works, I however am running some more java script on my page and am running into some problems. When I apply the lightbox it takes away the functionality of my other script, and I am not sure why this is so.
I am using 2.04 version of lightbox: http://www.huddletogether.com/projects/lightbox2/ Here is the other script that is getting either turned off or overridden, I'm not quiet sure. <script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 3750); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script> I am assuming there is some conflict with either an onload..or something I'm really not sure I would greatly appreciate your help. Similar TutorialsHi, I created JavaScript animation and the picture after animation finished disappear. Could anyone tell me or point me how to resolve this kind of issue? I tested it in IE as well as Firefox.. I could send the code but it is quite long for posting, but the screenshots from before and after animation is finished are as below. thanks in advance for any help. trotsky Hi, I will really appreciate if someone could take a look at my code below and inform me where I'm going wrong, because I can't seem to tell. The instructions a -the file starts with the text "Avalon Books" on the left edge of the page. -the text moves to the center of the page. -After the text reaches the center, the image file kids.jpg appears -Every two seconds thereafter, the image file is swapped with the next image file in the stack (there are 3 images in total). I am only posting the few relevant functions where the problem could be. All the other functions are working properly. I am new to JavaScript so any help will be really appreciated. Thank you This is the main file: Code: function placeObjects(){
var W = (0.5)*winWidth(); //gets the width of user's browser.
placeIt("avalon",0,0); //placeIt function is working fine.
placeIt("kids",W-75,100);
placeIt("fiction",W-75,100);
placeIt("nfiction",W-75,100);
setZ("kids",3); //setZ function is below.
setZ("fiction",2);
setZ("nfiction",1);
moveAvalon();
}
function moveAvalon(){
var x = xCoord("avalon");
if(x <= (W-125)){
shiftIt("avalon", 10, 0);
setTimeout("moveAvalon()",50);
}
else swapImages(); //if x is greater than W-125
}
function swapImages(){
showIt("kids");
showIt("fiction");
showIt("nfiction");
setTimeout("swapIt(kids,fiction,nfiction)",2000); //syntax could be wrong here?
}
</script>
</head>
<body onload="placeObjects()"> //calls the first function on load.
...............
</body>
</html>
and here is the second file that contains all the functions (I am posting 2 of those functions): Code: function setZ(id, z){
var object=document.getElementById(id);
object.style.zIndex="z";
}
function swapIt(id1, id2, id3){
var object1=getObject(id1);
var object2=getObject(id2);
var object3=getObject(id3);
var z1;
var z2;
var z3;
object1.style.zIndex="z1";
object2.style.zIndex="z2";
object3.style.zIndex="z3";
object1.style.zIndex="z3";
object2.style.zIndex="z1";
object3.style.zIndex="z2";
}
Hi, I have beginner skills using JS and, with alot help, have developed a script for an animation of a white noise pattern (TV screen noise). I need to use the animation in an eLearning educational lesson. The animation works OK but the sharpness of the animated pixels is poor (for example, looks blurry in FF). I wonder if someone can suggest a way to sharpen the animation? This would be a big help. The CSS simply creates a 640 x 640 canvas: canvas{ border:1px solid black; height:640px; width:640px; } The JS for the animation follows: (function(){ var viewbmd, px = [], timer, itsNoisy, stage, random = Math.random ; init(); function init(){ stage = document.querySelector("canvas"); viewbmd = stage.getContext("2d"); itsNoisy = true; stage.onclick = manageNoise; initNoise(); timer = setInterval(onTick, 50) } function initNoise(){ var array = [], d, val; for (var i = 0; i < 255; i++) { array[i] = 0xffffff * (i % 2); } for(i = 0; i < 6400; i++){ d = random()*256|0; val = array[d]; viewbmd.fillStyle = "rgb(" + val + ", " + val + ", " + val + ")"; viewbmd.fillRect(i%80, ((i)/80)|0, 8, 8); } px = viewbmd.getImageData(0, 0, 80, 80); } function onTick(){ flipSomePixels(160); viewbmd.putImageData(px, 0, 0); } function flipSomePixels(howMany/*:int*/){ for (var i = 0; i < howMany; i++){ var pxidx = (Math.random()*(px.data.length/4))|0; for(var j = 0; j < 3; j++){ px.data[pxidx*4+j] = !px.data[pxidx*4+j] ? 255 : 0; } } } function manageNoise(){ itsNoisy ? clearInterval(timer) : timer = setInterval(onTick, 50); itsNoisy = !itsNoisy; } })(); Any help appreciated. Kind Regards, saratogacoach Hi guys, I have a little experience in Javascript and would like to learn a bit more etc. I am currently working for a company which wants me create / find a image scroller using javascript and jquery. I found one which seems very suitable... I have customized the CSS and have coded it all up... The problem i'm having is that the image scroller is scrolling 3 images at a time. I would like it to scroller one at a time whilst showing all the images... Example scroller: [ pic 1] [pic 2] [pic 3] [pic 4] after scroll [pic 2] [pic 3] [pic 4] [pic 1] after next scroll [pic 3] [pic 4] [pic 1] [pic 2] and so forth. If you look at this code you will see what I mean... please help me learn and please help me complete this... im sure its just a little adjustment... but me not being too great at javascript... it makes me feel like im shooting in the dark. Thanks alot Code: <style type="text/css" media="screen">
<!--
body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; }
#textbanner {width:168px; height:118px; float:left;}
.infiniteCarousel {
width: 618px;
position: relative;
}
.infiniteCarousel .wrapper {
width: 618px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
height: 115px;
margin: 0 0px;
position: relative;
top: 0;
border: 1px solid #E1E1E1;
}
.infiniteCarousel ul a img {
border: 0px solid #666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.infiniteCarousel .wrapper ul {
width: 625px; /* single item * n */
list-style-image:none;
list-style-type:none;
margin:0;
padding:0px 0px 0px 4px;
position: absolute;
top: 0px;
left: 0px;
}
.infiniteCarousel ul li {
display:block;
float:left;
padding: 0px 0px 0px 0px;
height: 85px;
width: 206px;
}
.infiniteCarousel ul li img {
-webkit-transition: border-color 20ms;
}
.infiniteCarousel ul:hover li img {
border-color: #666;
}
.infiniteCarousel ul:hover li:hover img {
border-color: #000;
}
.infiniteCarousel ul li a img {
display:block;
}
.infiniteCarousel .forward {
background-position: 0 0;
right: 0;
}
.infiniteCarousel .back {
background-position: 0 -72px;
left: 0;
}
.infiniteCarousel .forward:hover {
background-position: 0 -36px;
}
.infiniteCarousel .back:hover {
background-position: 0 -108px;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
(function () {
$.fn.infiniteCarousel = function () {
function repeat(str, n) {
return new Array( n + 1 ).join(str);
}
return this.each(function () {
// magic!
var $wrapper = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapper.find('> ul').width(9999),
$items = $slider.find('> li'),
$single = $items.filter(':first')
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapper.innerWidth() / singleWidth),
currentPage = 1,
pages = Math.ceil($items.length / visible);
/* TASKS */
// 1. pad the pages with empty element if required
if ($items.length % visible != 0) {
// pad
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
// 2. create the carousel padding on left and right (cloned)
$items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li');
// 3. reset scroll
$wrapper.scrollLeft(singleWidth * visible);
// 4. paging function
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 1000, function () {
// if page == last page - then reset position
if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
page = 1;
} else if (page == 0) {
page = pages;
$wrapper.scrollLeft(singleWidth * visible * pages);
}
currentPage = page;
});
}
// 6. bind the back and forward links
$('a.back', this).click(function () {
gotoPage(currentPage - 1);
return false;
});
$('a.forward', this).click(function () {
gotoPage(currentPage + 1);
return false;
});
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
// THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
$(this).bind('next', function () {
gotoPage(currentPage + 1);
});
});
};
})(jQuery);
$(document).ready(function () {
// THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
var autoscrolling = true;
$('.infiniteCarousel').infiniteCarousel().mouseover(function () {
autoscrolling = false;
}).mouseout(function () {
autoscrolling = true;
});
setInterval(function () {
if (autoscrolling) {
$('.infiniteCarousel').trigger('next');
}
}, 500);
});
</script>
</head>
<body>
<div id="textbanner"><img src="http://i46.tinypic.com/2r423yc.jpg" alt="" width="168" height="117" /></div>
<div class="infiniteCarousel">
<div class="wrapper">
<ul>
<li><a href="www.google.com"><img src="http://i49.tinypic.com/eu4x81.jpg" alt="" width="202" height="116" /></a></li>
<li><img src="http://i49.tinypic.com/2ex8ttw.jpg" alt="" width="202" height="116" /></li>
<li><img src="http://i45.tinypic.com/2gy0pkz.jpg" alt="" width="202" height="116" /></li>
</ul>
</div>
</div>
</body>
</html>
I am making a website for school and have made a lightbox that works perfectly in all NEW browsers. Only, they use internet explorer 7. Because of this, the lightbox doesnt work properly, and instead sticks the the side of the screen, doesnt dim the background and simply doesnt work. Is there a different lightbox that will work for IE7? and how can i make a rule to only show it for browsers older than IE9? (I know of the html 'if lt ie9' rule if that helps) Thanks. Code: <?
session_start();
if(!session_is_registered(myusername)){
header("location:index.php");
}
?>
<?php
//users data query
$sesusername = $_SESSION['myusername'];
$sespassword = $_SESSION['mypassword'];
include_once("scripts/connect.php");
$memberquery = mysql_query("SELECT * FROM members WHERE username='$sesusername' AND password='$sespassword'");
while($row = mysql_fetch_assoc($memberquery)){
$id = $row['id'];
$photo = $row['profile_picture'];
$name = $row['name'];
$username = $row['username'];
$joined = $row['date_joined'];
$password = $row['password'];
$email = $row['email'];
$freinds = $row['friends'];
}
?>
<?php
//friends data
$friendsquery = mysql_query("SELECT * FROM members");
while($row = mysql_fetch_assoc($friendsquery)){
$user = $row['name'];
$userpic = $row['profile_picture'];
$id = $row['id'];
{ $friend .='<img src="' . $userpic . '" style="width:100px; height:90px; vertical-align:middle"><a href="profile.php?id=' . $id . '"> ' . $user . '</a></br></br>' ;
}
}
?>
<DOCTYPE HTML>
<html>
<head>
<title>Dead psycho | Friends</title>
<style type="text/css">
#friend_container{
display:none;
background:#000000;
opacity:0.7;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#friends_content{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
max-height: 400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #a11e22;
z-index:1001;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
Overflow: scroll;
}
a{ color:#a11e22 ;}
#friend{height:150px;
width:150px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#open_friends").click(function(){
$("#friend_container, #friends_content").fadeIn(300);
})
$("a#close_friends").click(function(){
$("#friend_container, #friends_content").fadeOut(300);
})
})
</script>
<?php include_once("menu.php"); ?>
</head>
<body>
<div id="container">
<div id="leftside">
<?php require_once("sidebar_left.php"); ?>
</div>
<div id="content">
<a id="open_friends" href="#"><b>All friends</b></a>
<div id="friends_content">
<h2><center>Friends</center></h2>
<hr width="90%" color="#a11e22"/>
<?php echo "$friend"; ?> <br/>
<b><center><a id="close_friends" href="#">Close</a></center></b>
</div>
<div id="friend_container"> </div></div>
</div>
<div id="footer" align="justify">
<?php include_once("scripts/copy.php"); ?>
</div>
</body>
</html>
I was wondering if it is possible to embed javascript within a lightbox. I believe a lightbox in most cases uses its own javascript code, but i am looking to have an unrelated javascript function working within the lightbox, under the image, if possible. Thanks in advance. I have the some text loaded in light box with background faded. i want the print button in the light box so that when user click on that only the contents of light box is printed and printer box opens up. How to do that?? Hi, I'm just putting the finishing touches on my new website and decided to include a custom scroll bar to really finish off the look of a couple of pages. I've managed to implement it successfully into one of my pages, however on another it seems to be a bit hit and miss as to whether it works in different browsers. After some experimentation I think I've managed to determine that the problem is that the javascript for the custom scrollbar is conflicting with some other javascript on the same page (lightbox image viewer). I came to this conclusion as prior to adding the custom scrollbar lightbox worked fine, and now after adding the addition javascript for the scrollbar lightbox has stopped working (and the scrollbar is hit and miss as to whether it works). In addition as I say, I have implemented the scrollbar into a different page (which doesn't have any other javascript to conflict with) which seems to work fine. Here's the page prior to adding the new scrollbar and with lightbox working: Here's the page with the scrollbar added and lightbox not working: The code that I suspect is conflicting is as follows: 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=ISO-8859-1" />
<title>Ryan Robinson | Gear</title>
<!-- lightbox script -->
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<!-- scrollbar script -->
<link rel="stylesheet" href="scrollbar/css/scrollbar_gear.css" type="text/css" media="screen"/>
<script type="text/javascript" src="scrollbar/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scrollbar/js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
I could be wrong, but considering they work separately but whenever I put them together one or both stops it leads me to believe this must be the problem. Anyone have any idea of how I might fix this? (PS. I am still a bit of a noob when it comes to code, so please make any suggestions as simple as possible!) Thanks Basically i have made a small gallery with a lightbox feature, and it half works. What i am trying to do is make the lightbox fade out the flash navigation like the rest of the page but it just seems to overlap my lightbox. Any ideas? Here is the link for the webpage: http://www.frozen-shy.webs.com/arts_signatures.html Here is the javascript code: Code: /*
Table of Contents
-----------------
Configuration
Functions
- getPageScroll()
- getPageSize()
- pause()
- getKey()
- listenKey()
- showLightbox()
- hideLightbox()
- initLightbox()
- addLoadEvent()
Function Calls
- addLoadEvent(initLightbox)
*/
//
// Configuration
//
// If you would like to use a custom loading image or close button reference them in the next two lines.
var loadingImage = 'loading.gif';
var closeButton = 'close.gif';
//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array('',yScroll)
return arrayPageScroll;
}
//
// getPageSize()
// Returns array with page width, height and window width, height
//
function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
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
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 = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}
//
// getKey(key)
// Gets keycode. If 'x' is pressed then it hides the lightbox.
//
function getKey(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
key = String.fromCharCode(keycode).toLowerCase();
if(key == 'x'){ hideLightbox(); }
}
//
// listenKey()
//
function listenKey () { document.onkeypress = getKey; }
//
// showLightbox()
// Preloads images. Places new image in lightbox then centers and displays.
//
function showLightbox(objLink)
{
// prep objects
var objOverlay = document.getElementById('overlay');
var objLightbox = document.getElementById('lightbox');
var objCaption = document.getElementById('lightboxCaption');
var objImage = document.getElementById('lightboxImage');
var objLoadingImage = document.getElementById('loadingImage');
var objLightboxDetails = document.getElementById('lightboxDetails');
var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();
// center loadingImage if it exists
if (objLoadingImage) {
objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
objLoadingImage.style.display = 'block';
}
// set height of Overlay to take up whole page and show
objOverlay.style.height = (arrayPageSize[1] + 'px');
objOverlay.style.display = 'block';
// preload image
imgPreload = new Image();
imgPreload.onload=function(){
objImage.src = objLink.href;
// center lightbox and make sure that the top and left values are not negative
// and the image placed outside the viewport
var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";
objLightboxDetails.style.width = imgPreload.width + 'px';
if(objLink.getAttribute('title')){
objCaption.style.display = 'block';
//objCaption.style.width = imgPreload.width + 'px';
objCaption.innerHTML = objLink.getAttribute('title');
} else {
objCaption.style.display = 'none';
}
// A small pause between the image loading and displaying is required with IE,
// this prevents the previous image displaying for a short burst causing flicker.
if (navigator.appVersion.indexOf("MSIE")!=-1){
pause(250);
}
if (objLoadingImage) { objLoadingImage.style.display = 'none'; }
objLightbox.style.display = 'block';
// After image is loaded, update the overlay height as the new image might have
// increased the overall page height.
arrayPageSize = getPageSize();
objOverlay.style.height = (arrayPageSize[1] + 'px');
// Check for 'x' keypress
listenKey();
return false;
}
imgPreload.src = objLink.href;
}
//
// hideLightbox()
//
function hideLightbox()
{
// get objects
objOverlay = document.getElementById('overlay');
objLightbox = document.getElementById('lightbox');
// hide lightbox and overlay
objOverlay.style.display = 'none';
objLightbox.style.display = 'none';
// disable keypress listener
document.onkeypress = '';
}
//
// initLightbox()
// Function runs on window load, going through link tags looking for rel="lightbox".
// These links receive onclick events that enable the lightbox display for their targets.
// The function also inserts html markup at the top of the page which will be used as a
// container for the overlay pattern and the inline image.
//
function initLightbox()
{
if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName("a");
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
anchor.onclick = function () {showLightbox(this); return false;}
}
}
// the rest of this code inserts html at the top of the page that looks like this:
//
// <div id="overlay">
// <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage"></a>
// </div>
// <div id="lightbox">
// <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
// <img id="closeButton">
// <img id="lightboxImage">
// </a>
// <div id="lightboxDetails">
// </div>
// </div>
var objBody = document.getElementsByTagName("body").item(0);
// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
var objOverlay = document.createElement("div");
objOverlay.setAttribute('id','overlay');
objOverlay.onclick = function () {hideLightbox(); return false;}
objOverlay.style.display = 'none';
objOverlay.style.position = 'absolute';
objOverlay.style.top = '0';
objOverlay.style.left = '0';
objOverlay.style.zIndex = '90';
objOverlay.style.width = '100%';
objBody.insertBefore(objOverlay, objBody.firstChild);
var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();
// preload and create loader image
var imgPreloader = new Image();
// if loader image found, create link to hide lightbox and create loadingimage
imgPreloader.onload=function(){
var objLoadingImageLink = document.createElement("a");
objLoadingImageLink.setAttribute('href','#');
objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
objOverlay.appendChild(objLoadingImageLink);
var objLoadingImage = document.createElement("img");
objLoadingImage.src = loadingImage;
objLoadingImage.setAttribute('id','loadingImage');
objLoadingImage.style.position = 'absolute';
objLoadingImage.style.zIndex = '150';
objLoadingImageLink.appendChild(objLoadingImage);
imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs
return false;
}
imgPreloader.src = loadingImage;
// create lightbox div, same note about styles as above
var objLightbox = document.createElement("div");
objLightbox.setAttribute('id','lightbox');
objLightbox.style.display = 'none';
objLightbox.style.position = 'absolute';
objLightbox.style.zIndex = '100';
objBody.insertBefore(objLightbox, objOverlay.nextSibling);
// create link
var objLink = document.createElement("a");
objLink.setAttribute('href','#');
objLink.setAttribute('title','Click to close');
objLink.onclick = function () {hideLightbox(); return false;}
objLightbox.appendChild(objLink);
// preload and create close button image
var imgPreloadCloseButton = new Image();
// if close button image found,
imgPreloadCloseButton.onload=function(){
var objCloseButton = document.createElement("img");
objCloseButton.src = closeButton;
objCloseButton.setAttribute('id','closeButton');
objCloseButton.style.position = 'absolute';
objCloseButton.style.zIndex = '200';
objLink.appendChild(objCloseButton);
return false;
}
imgPreloadCloseButton.src = closeButton;
// create image
var objImage = document.createElement("img");
objImage.setAttribute('id','lightboxImage');
objLink.appendChild(objImage);
// create details div, a container for the caption and keyboard message
var objLightboxDetails = document.createElement("div");
objLightboxDetails.setAttribute('id','lightboxDetails');
objLightbox.appendChild(objLightboxDetails);
// create caption
var objCaption = document.createElement("div");
objCaption.setAttribute('id','lightboxCaption');
objCaption.style.display = 'none';
objLightboxDetails.appendChild(objCaption);
}
//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
//
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(initLightbox); // run initLightbox onLoad
Any help is much appreciated xx Hi, I wonder if anyone can help me. I have a header I use on my site which has a Javascript code for rotating banner ads. I'd like to try to track the clickthroughs on these ads and have been looking at the methods of doing this in google analytics, but they all seem to be for single links, such as the method he http://support.google.com/googleanal...n&answer=55527 which then don't work with the links as they are in the banner. I was wondering if anyone knew how I would be able to integrate the analytics code in that link into the banner I have, or of another method I can use to track clicks on the ads. Thanks! This is the banner I'm using: Code: <script type="text/javascript">function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
link = new initArray(
"http://www.jojingles.com",
"http://www.goals-solutions.com/",
"http://www.barleylands.co.uk/",
"http://www.blukangaroo.co.uk/onlineshop",
"http://www.explorelearning.co.uk/vebo",
"http://www.explorelearning.co.uk/vebo",
"http://www.allmumkind.com/",
"http://quintessencemassage.weebly.com",
"http://www.dw-beauty.co.uk",
"http://www.theclothestree.co.uk"
);
image = new initArray(
"http://www.essexmums.org/images/jojingleslong.gif",
"http://www.essexmums.org/images/goalssolutionbanner.jpg",
"http://www.essexmums.org/images/barleylandsbanner.jpg",
"http://www.essexmums.org/images/blukangaroo.jpg",
"http://www.essexmums.org/images/explorelakeside.jpg",
"http://www.essexmums.org/images/explorelakeside.jpg",
"http://www.essexmums.org/images/allmumkind3.jpg",
"http://www.essexmums.org/images/quintessence.jpg",
"http://www.essexmums.org/images/dwbannerad.jpg",
"http://www.essexmums.org/images/clothestree.jpg"
);
text = new initArray(
"Jo Jingles",
"Goals Solution",
"Barleylands",
"Blu Kangaroo",
"Explore Lakeside",
"Explore Lakeside",
"Allmumkind",
"Quintessence",
"DK Beauty",
"The Clothes Tree"
);
function getrandom(){
var core2 = Math.floor(Math.random()*10); // amount of items in array
displaybanner(core2)
displaybanner(core2)
}
function displaybanner(theNum2){
var ranlink2 = link[theNum2];
var ranimage2 = image[theNum2];
var rantext2 = text[theNum2];
document.getElementById('theImg2').alt=rantext2;
document.getElementById('theImg2').src=ranimage2;
document.getElementById('theLink2').href=ranlink2;
}
</script><a href="#" target="_blank"
id="theLink2"><img src="" alt=""
id="theImg2" border="0"></a>
<script type="text/javascript">
getrandom();
setInterval("getrandom()", 22000);
</script>
Hi Guys, I have a new problem My site is run on wordpress, but I'd like to customise the menu so that if the user is logged in the menu displays "Logged In" and if they are not it displays "Log In". Normally I would just use an if statement in PHP to output the required html, but as I can't use PHP code in the menu item I need to use Javascript. So, the way I figured this would work is: 1) PHP code in the header checks to see whether the user is logged in 2) This code then outputs JS to define a variable (varCheckLogin) 3) JS within the menu checks varCheckLogin and outputs the html i want This sounds good hopefully. Unfortunately this isn't working at the moment. The code I have is: HEADER: (I know this works as the variable is being output correctly in the source code) Code: <?php if (is_user_logged_in()) {
echo '<script type="text/javascript"> varLoginCheck = "Yes"; </script>';
} else {
echo '<script type="text/javascript"> varLoginCheck = "No"; </script>';
}
?>
MENU ITEM: Code: <script>
if (varLoginCheck = "No")
{
document.write('<span class="mmLogin">Log In</span>');
}
else
{
document.write('<span class="mmLogin">Logged In</span>');
}
</script>
I put an alert in the menu item and it always sees varLoginCheck as "Yes". Any ideas why this could be? All help is much appreciated. Thanks Sam For example ,There is a "Link" called "go to view" at the bottom of the my page, which is redirecting to http://localhost/test.php . if we use $_SERVER['HTTP_REFERER'] in test.php page It will display the url of the page from which link was clicked. The problem is this my URL can be seen at the target page. This needs to be avoided. How can i do this using javascript ? Hi, I have created an animation exercise for an eLearning lesson in a program that uses JavaScript as the scripting for a Windows executable. A retired social worker who creates these eLearning materials as give-away's to help people in the community improve health, it would be a big help to reaching more people if instead of a Windows executable version, the animation could be developed in a web page. A lot more people could view the eLearning and try this exercise which trains people in pacing their breathing. The animation has a 300X300 circle on the canvas with a couple of text input boxes and a start button. The JS < 50 lines of script, but since it was not developed for a web page, it has no tags and it depends on objects like the circle or button (or 2 audio files to create the inhale/exhale sounds) that were already placed on the canvas in the Windows executable program. I'm not very skilled using Dreamweaver CS5, but with help, reading, references can try to convert this JS into a web version, if it's possible. Not sure how to do this and would appreciate any help. I am adding a screenshot of the interface and the JS functions that are called by the start button. //JS: ( bar1 is the variable entered by the use as breaths per minute-BPM; //time1 is the exercise length; the variables initially are set as follows: //time1=15, //volume=100) var time1 function minuteTimer() { breakLoop = false stopLoop = false fork (calcBreathing) for (var i=0;i<time1;i++) { wait(60) breakLoop = true Submit.Show() Text122.Show() Text12.Show() TextInput22.Show() TextInput2.Show() Submit2.Hide() TextInput2.SetTransparency(0,false) TextInput22.SetTransparency(0,false) Text12.SetTransparency(0,false) Text122.SetTransparency(0,false) Text5.SetTransparency(0,false) Frame12.SetTransparency(0,false) Submit.SetTransparency(0,false) TextInput2.Enable(true) TextInput22.Enable(true) Debug.trace("\n minutes elapsed "+(i+1)+"\n") } stopLoop = true } function calcBreathing() { var bar2 = 60/bar1 for (loop = 0;loop<bar1;loop++) { mySound.Play(1,volume) Vector8.Scale(.5,.5, bar2*.3) mySound.Stop() wait (bar2*.05) mySound2.Play(1,volume) Vector8.Scale(-.5,-.5,bar2*.6) mySound2.Stop() wait (bar2*.05) if (breakLoop) break } breakLoop = false if (bar1 > 6) bar1-- if (!stopLoop) calcBreathing() } Any help appreciated. Thanks very much. Kind Regards, saratogacoach I have a picture of a pinwheel on my website that I want to spin onMouseover. Can this be done with JavaScript?
I want to create some type of seasonal feel on my Web page where there are falling leaves. I presently have 6 different gif images of leaves that I know I will probably have to load into an array. I also know that I will have to figure out the maximum width & height of the screen, which is different in Internet Explorer and other browsers. My goal is to load the leaves randomly as well using 'Math.floor(Math.random()*6)', if that is correct. Beyond that, I am lost on how to manipulate the Web page to make this animation occur. Any help would be appreciated. Thank you. Code: <!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>Autumn</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript">
<!--Hide from incompatible browsers
/* <![CDATA[ */
var widthMax=0;
var heightMax=0;
var leavesLoaded = new Array(6);
for (var i=0; i<6; ++i)
{
leavesLoaded[i] = new Image();
leavesLoaded[i].src = "leaf" + (i+1) + ".gif";
}
function setLeaf()
{
if (navigator.appName == "Microsoft Internet Explorer")
{
widthMax=document.documentElement.clientWidth;
heightMax=document.documentElement.clientHeight;
}
else
{
widthMax=window.innerWidth-14;
heightMax=window.innerHeight;
}
setTimeout('fallingLeaves()',400);
}
/* ]]> */
// Stop hiding from incompatible browsers -->
</script>
</head>
<body onload="setLeaf();" >
<p><img src="images/leaf1.gif" id="leaf" style="position:absolute; left:0px; top:0px; visibility:hidden" alt="Image of a Leaf" /></p>
</body>
</html>
I am having some difficulty with this project. It is supposed to be an animation of falling leaves. I am very new to arrays and JavaScript, so right off the bat I know that the arrays I have are not right, or are missing something else in order for it to function. Basically all I have for this project is a still picture of the leaves and that is it. If there is someone out there with some JavaScript expertise, could you tell me what I am doing wrong? Here is the code so far, I think it is too long. Code: <script type="text/javascript">
/* <![CDATA[ */
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="images/leaf1.gif";
Image1=new Image();
Image1.src=grphcs[1]="images/leaf2.gif";
Image2=new Image();
Image2.src=grphcs[2]="images/leaf3.gif";
Image3=new Image();
Image3.src=grphcs[3]="images/leaf4.gif";
Image4=new Image();
Image4.src=grphcs[4]="images/leaf5.gif";
Image5=new Image();
Image5.src=grphcs[5]="images/leaf6.gif";
var minSpeed = 5;
var maxSpeed = 30;
var randomSpeed = 5;
var randomSpeed2 = 10;
var randomSpeed3 = 15;
var randomSpeed4 = 20;
var randomSpeed5 = 25;
var randomSpeed6 = 30;
var minHorizontal = 200;
var maxHorizontal = screen.availWidth - 300;
var leftPosition = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
var leftPosition2 = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
var leftPosition3 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal +1)) + minHorizontal);
var leftPosition4 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var leftPosition5 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var leftPosition6 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var minVertical = 50;
var maxVertical = screen.availHeight - 300;
var topPosition = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition2 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition3 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition4 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition5 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition6 = Math.floor(Math.rnadom() * (maxVertical -
(minVertical + 1)) + minVertical);
function matchLeaf() {
if (navigator.appName == "Microsoft Internet Explorer") {
widthMax = document.documentElement.clientWidth;
heightMax = document.documentElement.clientHeight;
}
else {
widthMax = window.innerwidth - 14;
heightMax = window.innerHeight;
}
autumnFall();
}
function autumnFall();
var fallingLeaf1 = document.getElementById("leaf1");
fallingLeaf1.style.left = leftPosition + "px";
fallingLeaf1.style.top = topPosition + "px";
fallingLeaf1.style.visibility = "visible";
topPosition += parseInt(randomspeed);
leftPosition += 0;
if (topPosition >= screen.availHeight - 300) {
topPosition = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
leaf1.src = "images/leaf" + Math.floor(Math.random() * 6 +
".gif";
randomSpeed = Math.floor(Math.random() * maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf2 = document.getElementById("leaf2");
fallingLeaf2.style.left = leftPosition2 + "px";
fallingLeaf2.style.top = topPosition2 + "px";
fallingLeaf2.style.visibility = "visible";
topPosition2 += parseInt(randomSpeed3);
leftPosition2 += 0;
if (topPosition2 >= screenavailHeight - 300) {
topPosition2 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition2 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf2.src = "images/leaf" + Math.floor(Math.random() * 6)
+ "gif";
randomSpeed2 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf3 = document.getElementById("leaf3");
fallingLeaf3.style.left = leftPosition3 + "px";
fallingLeaf3.style.top = topPosition3 + "px";
fallingLeaf3.stye.visibility = "visible";
topPosition3 += parseInt(randomSpeed3);
leftPosition3 += 0;
if (topPosition3 >= screen.availHeight - 300) {
topPosition3 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition3 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf3.src = "images/leaf" + Math.floor(Math.random() * 6
+ "gif";
randomSpeed3 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf4 = document.getElementById("leaf4");
fallingLeaf4.style.left = leftPosition4 + "px";
fallingLeaf4.style.top = topPosition4 + "px";
fallingLeaf4.style.visibility = "visible";
topPosition4 += parseInt(randomSpeed4);
leftPosition4 += 0;
if (topPosition4 >= screen.availHeight - 300) {
topPosition4 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition4 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf4.src = "images/leaf" + Math.floor(Math.random() * 6
+ "gif";
randomSpeed4 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf5 = document.getElementById("leaf5");
fallingLeaf5.style.left = leftPosition5 + "px";
fallingLeaf5.style.top = topPosition5 + "px";
fallingLeaf5.style.visibility = "visible";
topPosition5= parseInt(randomSpeed5);
leftPosition5 += 0;
if (topPosition5 >= screen.availHeight - 300) {
topPosition5 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition5 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf5.src = "images/leaf + Math.floor(Math.random() * 6 +
"gif";
randomSpeed5 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf6 = document.getElementById("leaf6");
fallingLeaf6.style.left = leftPosition6 + "px";
fallingLeaf6.style.top = topPosition6 + "px";
fallingLeaf6.style.visibility = "visible";
topPosition6 = parseInt(randomSpeed6);
leftPosition6 += 0;
if (topPosition6 >= screen.availHeight - 300) {
topPosition6 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition6 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf6.src = "images/leaf + Math.floor(Math.random() * 6 +
"gif";
randomSpeed6 = Math.floor(math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
}
/* ]]> */
</script>
</head>
<body onload="setInterval('matchLeaf()', 100);">
<img id="leaf1" src="images/leaf1.gif" alt="leafone"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf2" src="images/leaf2.gif" alt="leaftwo"
style="position:absolute; left:100px; top:100px;" />
<img id ="leaf3" src="images/leaf3.gif" alt="leafthree"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf4" src="images/leaf4.gif" alt="leaffour"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf5" src="images/leaf5.gif" alt="leaffive"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf6" src="images/leaf6.gif" alt="leafsix"
style="position:absolute; left:100px; top:100px;" />
I have created an animation API, which has an option for the 'effect' or animation type. Now i'm trying to produce a slow, fast slow effect using a sine wave but seem to be having some trouble! The code below is supposed to get the steps to calculate each frame by diving the usable part of the sine wave into the total frames. The code should then go on to calculate insert the relevant values into the frame variables, after which multiply them all so that they are the correct scale so that when the animation is running it simply looks up the value and applies it, no need for any processing. With an animation from 0 to 740 (px in this case) the function returns: 115, 228, 335, 434, 523, 598, 659, 703, 730, 740 Oh and just a quick addition the variable "end" will equal 740 in the case above, or whatever the end value is. Code: case "SFS":
var step = 90 / totalFrames;
var pi = Math.PI;
var raid = 0;
for (var i = 1; i <= totalFrames; i++){
raid = (i*step)*(pi/180);
queueFrameValue[topOfQueue][i] = Math.sin(raid);
}
var multiplier = end / queueFrameValue[topOfQueue][totalFrames];
for (var i = 1; i <= totalFrames; i++){
queueFrameValue[topOfQueue][i] = queueFrameValue[topOfQueue][i] * multiplier;
}
break;
Thanks! Anyone got any suggestions on techniques? The main one I find is to use translate to move the canvas around, which just seems odd to me. I don't even fully understand how it works. But the one I was looking at used clearRect. In examples given looked as though it had to redraw the canvas every frame. I'm just mucking around with a simple poker game, figured i'd have the table in one layer and anything that moves on a top layer? By doing that I could only clear each card as it moved around...yes? Anyone know of a better way of doing things? Hello readers! I made some animation code Code: for (var i = 1; i < 8; i++) {
var slc = ".s" + i;
$(slc).css(
{
'position':'absolute',
'top':'-300px',
'left':30*i*5,
'width':'100px',
'height':'300px',
'backgroundColor':'white'
});
};
$('body').click(function() {
for (var t = 1; t < 8; t++) {
var asd = '.s' + t;
$(asd).animate({
'top':'0px'
}, 100*t).animate({
'top':'-300px'
}, 100*t);
};
});
in html there are some div tags. So, question is - How to normilize queue of animation? You see that first box moves fast and the last one moves very slow to the end. I would like boxes to move proportionally in relation to the time. Could you give some recommendations about this stuff? |
|||||||