|
JavaScript - Rotate Dial Or Graphic To Follow Mouse.
Hi,
Is it possible to rotate a dial to follow the mouse cursor? I'm trying to recreate this: http://verbdesign.com/hl/rockwell/index.html but would rather it worked like this: http://www.actionscript.org/resource...-II/Page1.html ...but in javascript. Any help extremely welcome. Thanks, Richard Similar TutorialsI'm wondering if theirs a way to make a dim light, sorta like a candle follow my mouse cursor on a webpage?
hi I have a popup box on a tag and I want to that this box will follow the mouse cursor when is onmouseover. site: http://www.actual-news.co.uk can you help me please thank you this is my popup box javascript code: Code: $(function () {
$('.bubbleInfo').each(function () {
// options
var distance = 0;
var time = 250;
var hideDelay = 30;
var hideDelayTimer = null;
// tracker
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var popup = $('.popup', this).css('opacity', 0);
// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;
// reset position of popup box
popup.css({
top: 10,
left: 50,
display: 'block' // brings the popup back in to view
})
// (we're using chaining on the popup) now animate it's opacity and position
.animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn't do the job)
popup.css('display', 'none');
});
}, hideDelay);
});
});
});
I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript">
if (document.images)
{
/* preload images */
var subcontractorsOn = new Image ();
subcontractorsOn.scr = "subcontractorsOn.gif";
var subcontractorsOff = new Image ();
subcontractorsOff.scr = "subcontractorsOff.gif";
}
function mouseOn (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "On.scr");
}
function mouseOff (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "Off.scr");
}
</SCRIPT>
2nd just calls the functions to preform the swap. this is in the <body> see code below Code:
<a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')"
onMouseOver="mouseOff('subcontractors')">
<img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a>
any insight would be great. regards, Fatmann66 Need a little help. I have a project to do for a client and he wants a "Follow Scrolling Style Menu" He gave me an example of the exact one he wants, http://redvsblue.com. When you scroll down the page, you'll see that the menu follows you on the top and when you get back to the top of the page, it locks back where its suppose to be. Trouble is I cant find anywhere that shows how to do it. I was able to *rip* the code from redvsblue and modify it (but I highly doubt thats legal ) So any help would be much appreciated. thanks in advance.
I am working on a site and essentially what I need to do is to autopost a blog entry that rotates based on each day. For example, Monday posts X, Tuesday posts Y, Wednesday posts Z, Monday posts X again. Much like this site does Hi, I need some help for rotate and zoom image as in link below. any one can help me? http://kroppr.rborn.info/ http://crop.smally.net/ I wonder how we could rotate the div once the page is loaded. I tested it with a click button successfully in FF4.0.1. Yet, when I tried to use <body onload = "r()"> which the func r nested the whole rotate function with its global variables, it failed. Could anyone explain how I can do it automatically? Thanks for any help!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS + CSS3: MozTransform rotate</title> </head> <body> <style> .rDiv { width:200px; height:200px; position:absolute; top:40px; left:50px; text-align:center; color:white; line-height:200px; background-color:black; border-radius: 50%; border-styleutset; border-width:5px; border-color:white; /* transform: rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); */} .outdiv { width:300px; height:300px; position:absolute; top:0px; left:0px; background-color:grey;} </style> <div class="outdiv"> <div id = "rDiv" class="rDiv">ROTATE</div> </div> <script> var r = document.getElementById('rDiv'); var x = 0; function rotate(){ x += 1; r.style.MozTransform="rotate("+x+"deg)"; } </script> <input style="position:absolute; top:300px;" type="button" onclick="rotate()" value = "click me to rotate it!"/> </body> </html> I want to be able to rotate Adsense ads. 3/4 of the time, it will be someone else's. 1/4 of the time, it will be mine (my code is displayed already). However, the code I tried doesn't work. Can someone tell me how to fix this - Code: <script language="JavaScript"> images = new Array(4); //the following string is really all on one line images[0] = '<script type="text/javascript">google_ad_client = "ca-pub-4811954214954647";google_ad_slot = "2713945203";google_ad_width = 728;google_ad_height = 90;</script><script type="text/javascript"src="http: //pagead2.googlesyndication.com/pagead/show_ads.js" ></script>'; images[1] = 'other code'; images[2] = 'other code'; images[3] = 'other code'; index = Math.floor(Math.random() * images.length); document.write(images[index]); //done </script> I know very little about javascript, but was wondering if something like this can be done? Would it be possible (with mootools or jquery) to have homepage that will rotate its home page content forwards and backwards based on either triangle or square? ie, you can rotate through 3, 4, etch home pages? Sort of like a slider, but it rotates off a center axis of the triangle or square? Hello, I am using the following script on my site RCENO .com in a easyadsense plugin, it is working well, because it is adding the elements after the posts on the page, but instead of rotating (This causes a problem when a Video is playing, and it rotates out in the middle of it) I would like for it to be Random when the posts load or refreshed....This is a Wordpress CMS site that provides News and Event Information to the local area, I am using this to display Holiday Greetings from area merchants in the form of Videos....... Thank You For Your assistance on This <script type="text/javascript"> if (document.all || document.getElementById){ //if IE4 or NS6+ document.write('<style type="text/css">\n') document.write('.dyncontent{display: none; width: 340px; height: 230px;}\n') document.write('</style>') } var curcontentindex=0 var messages=new Array() function getElementByClass(classname){ var inc=0 var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className==classname) messages[inc++]=alltags[i] } } function rotatecontent(){ //get current message index (to show it): curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0 //get previous message index (to hide it): prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1 messages[prevcontentindex].style.display="none" //hide previous message messages[curcontentindex].style.display="block" //show current message } window.onload=function(){ if (document.all || document.getElementById){ getElementByClass("dyncontent") setInterval("rotatecontent()", 75000) } } </script> Season Greetings: <div class="dyncontent" style="display: block">[flv:/files/videos/HolidayGreetings/FamilyVideoGreetings.flv 340 230]</div> <div class="dyncontent">To Add Your Holiday Greetings, Contact Us at Roy@rceno.com or Call (336) 398-6003</div> <div class="dyncontent">Happy Holidays</div> Hey, I want to create a nice Info Graphic for Web, something like this one: Is possible to do it with JS and style with CSS? Is there any library to generate this graphics and allow to style it with CSS? I've looked at google charts api but I think that I'm not able to style it as I want. Let me know if is there any other solution to create this (without flash). Thanks I have the following code which works fine until I try and display graphics. Please tell me how I could/should display the odometer in graphics format rather than text. I have all the necessary images as .png(0 through 9) in the same folder as the following code. It is just that the text counter displays but not the graphics? Code: <html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function GraphicOdo(Nommer)
{
d = Nommer.toString();
for (i=0; i<d.length; i++)
{
var image="<IMG SRC=c"+d[i]+".gif>";
// alert(image);
document.getElementById('GraphicCounter').innerHtml=image;
}
}
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
GraphicOdo(c);
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt" /><br /><br />
<div id="GraphicCounter">
<img src="c0.gif" alt="zero"/>
</div>
</form>
</body>
</html>
Ok, I am in a small pickle here. I created a sidebar gadget for work originally with only 4 images that needed to cycle though it. Easy enough script done. Now they have 6 images that need to rotate through. Easy enough again, script done. The issue I have is now I have to re-push this updated html file to all 1000 PC's on my network. Plus every time a change is made I will have to do it again. And we change the images multiple times a month. So what I need help doing if its possible is to modify the html file i am listing below to have a second IF parameter that not only steps the image but also checks to see if the file is even there. This is the spot I need help at. Code: function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
I wanted to add another part to the IF statement like maybe. Code: If (step<10 && file_exists("http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"))
Basically a step that checks to see if I have at that moment a file named gadet pic 1. (I would do or statements for all of the file names) The point is to make this whole thing dynamic, so that I change image 1 on the server and every gadget on every PC looking for image 1 now see the new image. This way I just change the image file name when I want a different image to display. Same thing with the var for the slidelink function. points to a static named html file on my web server and I just change the redirect in the static named html file to go where i want it. I am by NO means a programmer, I am actually a network admin that came up with this idea and I am trying to fumble through it. Thanks in advance! Code: <html>
<head>
<meta hrrp-equiv="Content-Type" content="text/html; charset=Unicode" />
<style type="text/css">
body{
margin: 0px;
width: 405px;
height: 205px;
font-family; Georgia;
}
</style>
<script type="text/javascript">
var image1=new Image()
image1.src="http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"
var image2=new Image()
image2.src="http://www.akronlibrary.org/Gadget/Gadget Pic 2.bmp"
var image3=new Image()
image3.src="http://www.akronlibrary.org/Gadget/Gadget Pic 3.bmp"
var image4=new Image()
image4.src="http://www.akronlibrary.org/Gadget/Gadget Pic 4.bmp"
var image5=new Image()
image5.src="http://www.akronlibrary.org/Gadget/Gadget Pic 5.bmp"
var image6=new Image()
image6.src="http://www.akronlibrary.org/Gadget/Gadget Pic 6.bmp"
var image7=new Image()
image7.src="http://www.akronlibrary.org/Gadget/Gadget Pic 7.bmp"
var image8=new Image()
image8.src="http://www.akronlibrary.org/Gadget/Gadget Pic 8.bmp"
var image9=new Image()
image9.src="http://www.akronlibrary.org/Gadget/Gadget Pic 9.bmp"
var image10=new Image()
image10.src="http://www.akronlibrary.org/Gadget/Gadget Pic 10.bmp"
</script>
</head>
<body>
<a href="javascript:slidelink()"><img title="Akron-Summit County Public Library" name="slide" /></a>
<script type="text/javascript">
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
setTimeout("slideit()",6000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 1 Link.html"
else if (whichimage==2)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 2 Link.html"
else if (whichimage==3)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 3 Link.html"
else if (whichimage==4)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 4 Link.html"
else if (whichimage==5)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 5 Link.html"
else if (whichimage==6)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 6 Link.html"
else if (whichimage==7)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 7 Link.html"
else if (whichimage==8)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 8 Link.html"
else if (whichimage==9)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 9 Link.html"
else if (whichimage==10)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 10 Link.html"
}
</script>
</body>
</html>
here's the code i've got to make some tabbed content on my website: Code: $(document).ready(function(){
$('#headingHome div').hide(); // Hide all divs
$('#headingHome div:first').show(); // Show the first div
$('.ticker_buttonP a:first').addClass('active'); // Set the class of the first link to active
$('.ticker_buttonP a').click(function(){ //When any link is clicked
$('.ticker_buttonP a').removeClass('active'); // Remove active class from all links
$(this).addClass('active'); //Set clicked link class to active
var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
$('#headingHome div').hide(); // Hide all divs
$(currentTab).show(); // Show div with id equal to variable currentTab
return false;
});
});
and my html (all content removed for size's sake): Code: <div id="headingHome"> <div id="first"></div><!-- /first --> <div id="second"></div><!-- /second --> <div id="third"></div><!-- /third --> <div id="fourth"></div><!-- /fourth --> <div id="fifth"></div><!-- /fifth --> <p class="ticker_buttonP"> <a href="#first"></a> <a href="#second"></a> <a href="#third"></a> <a href="#fourth"></a> <a href="#fifth"></a> </p> </div><!-- /headingHome --> that works fine so far, however i want the content to fade in and out when the tabs change, and i also want the tabs to rotate automatically like seen on this site: http://www.sosfactory.com/ I'm new to this, and I cant find anything on the net about it that i can understand enough to put it together. could anyone help me, please? many thanks hello... I'm sorry, i did read the advises, and i've been through the forum, trying to figure out where to look... but i dont know where to find it... so, i'm sorry if my help request will sound silly,,, i'm only looking for someone that will want to point me in the right direction... and i'll try to do my best on my own ... we want to offer personalized tshirts... so we do need a way for the customer to choose size, color, subject and text and check all this in real time... someone that is doing something that we want is http://www.vistaprint.com/embroidere...aspx?xnav=top# in your opininion, is that vistaprint application a java? pls, could you point me in the right direction to understand that? thanks to anyone that will want to help me some simple stuff ive been stuck on. been trying to get these to come up one after another: set the colour to white draw a filled circle set the colour to blue draw an outline circle i dont know how to make the loop continue and at each loop carry out on of these instructions? any help appreciated!! var canvas; canvas = openGraphics(); var x; var y; var size; x = 10; y = 10; size = 200; while( size > 0 ) { canvas.drawEllipse( x, y, size, size ); x = x + 10; y = y + 10; size = size - 20; } canvas.paint(); I have some code that uses a form, and will check it and show an image. If you have/know a script that is simple, let me know! Otherwise, I'm wondering if someone who is proficient in JS/HTML could help me with this task. It's all coded, I just need some help with an error I am getting. Thanks, Blockis All, I'd like to have something similar to the rotating images and text on my website. The website that I would like to mimick is: http://www.photoworks.com/ You can see that the images move but there is still text over the image that I can click on. How would I go about doing something similar to this on my website. I'm guessing it's a combination of Javascript and CSS but I figured I'd start here. Thanks for any help in advance. hi, when i mouseon an image, how can i make it so, the image i'm mousingon and a second image both fade into alternate images, and then fade back out to the original images when i mouseoff? here is an example- http://www.javascript-fx.com/develop...t/ifctest.html . any help would be most appreciated.
I wrote this code for 1 image, and it is working perfectly fine: Code: function swapImage()
{
document.getElementById("linkedin").src = "images/glinkedin.png";
}
function restoreImage()
{
document.getElementById("linkedin").src = "images/linkedin.png";
}
the problem starts when I want to use this code for 4 images, can anyone correct it please: Code: function swapImage()
{
document.getElementById("linkedin").src = "images/glinkedin.png";
}
{
document.getElementById("facebook").src = "images/gfacebook.png";
}
{
document.getElementById("google").src = "images/ggoogle.png";
}
{
document.getElementById("twitter").src = "images/gtwitter.png";
}
function restoreImage()
{
document.getElementById("linkedin").src = "images/linkedin.png";
}
{
document.getElementById("facebook").src = "images/facebook.png";
}
{
document.getElementById("google").src = "images/google.png";
}
{
document.getElementById("twitter").src = "images/twitter.png";
}
|
|||||||