I'd like to create a custom logo (don't know what yet) that represents the pieces of my project so that a user can click on a piece of the logo and have that associated panel brought forth. I'm not sure how to go about doing this so could someone point me in the right direction?
View 1 RepliesNice module, but I can't get it too work.
Code:
/**
* validate.js: unobtrusive HTML form validation.
*
[code]....
but the script alerts me nothing?
When I load my website www.bellmacchinaproductions.com, I see a slideshow featured category. When I click on the logo to go back to the main page, it is cut off. But when I refresh, it seems to work again...
View 1 Replies View Related[URL] I just need jquery to slide when you click the next and previous buttons in the gallery under the logo on my site.
View 3 Replies View RelatedI'm trying to add a click function to my object. The way i have it now in bold is how I saw someone else use it, it doesn't work. I tried using jquery's bind('click') and this.div.onclick but it runs the function right away upon instantiation.
How can i get this to run only when clicked?
function bubble(id,title,description,year,bubbleIcon,icon,source,length) {//art object from xml
this.id = 'bubble' + id;
this.title = title;
[Code].....
I wanted to show a datepicker on a custom click event. i can't use datepicker button or image due to lack of space and certain other restrictions.
I have created a custom button with a custom look and feel. i want the click event on this button to trigger datepicker display.
I tried to use:
But this is merely associating the textfield datepick with datepicker, its not showing it.. rather we have to click on textfield after the button click to show the datepicker.
I also tried:
But this also did not do any changes..
Any possible way for getting this event..
i can't get my new logo to work in IE, it's working fine in Chrome and FireFox, it must be a JavaScript problem. here it is: [URL] And the JavaScrip:
$(function() {
var canvas = $("#c");
var canvasHeight;
var canvasWidth;
var ctx;
var dt = 0.1;
var pointCollection;
[Code]...
I have a logo jpg and then a jpg which is a solid blue line. I am
trying to make my javascript menu load underneath these two. I have put
the src="menu.js" after the two jpg's in the code but it always loads
above them in the browser.
Is there a way of getting my menu as the third item down from the top
or will javascript always load to the top?
I just bought a CSS template with lots of JS in it. You can see it at code...
I cant for the life of me figure out where in the JS the TripAdvisor logo at the top-left is being populated.
I use this script to create a simple horizontal animate scroll. But i need move div #logo with the body. I try
[Code]...
Normally in CSS you can use background: to bring in an image or a swf file and then display a logo over it from within the HTML as below.
<css>
.row-logo{ background: url(banners/boats_harbor.jpg) 0 0 no-repeat; height:172px;}
.row-logo img{ width:387px; height:110px; margin:0 0 0 0;}
<html>
<div class="row-logo"><a href="index.html"><img src="banners/ehba_logo.png" alt="" /></a></div>
However, I am currently working on a banner that rotates through images via javascript that I want to have in the background under css and still be able to display a logo from within the HTML code. As shown above, that is easy with a picture, but how do you call the javascript and then its ID from within the HTML?
Say I have a website, that I want to use an iframe with. Would be possible, to use Javascript to change the logo image of an iframe of myspace (just for the example), to one on my site? So switch the logo of myspace with one on my server? Is this possible?
View 3 Replies View RelatedI want to make the logo background image fade to another background image on hover. Here is the code I have until now:
[Code]...
<html><head>
<script>
evil = false;
if(document.layers){
evil = true;
}
created = new Array();
logotext = new Array();
//Your text here
logotext[0] = " * * ";
logotext[1] = " * * * * ";
logotext[2] = " * * * **** *** *** * *** **** ***** *** *** * * ***** ";
logotext[3] = " * * * * * * * * * * * * * * * * * * * * * * ";
logotext[4] = " * * * * **** * * * * ***** * * * * ***** * * ";
logotext[5] = " * ******* * * * * * * * * * * * * * * * * ";
logotext[6] = " ************* * * *** *** **** **** *** * * **** * * *** ";
logox = 100;
logoy = 100;
logocolor = "lightgrey";
//STOP EDITING!!!
for(i=0;i<logotext.length;i++){
logotext[i] = logotext[i].split("");
}
var logo = "";
if(!evil)
logo += "<div style='position:absolute; top:" + logoy+ "; left:" + logox + ";'>";
if(evil)
logo += "<layer top='" + logoy + "' left='" + logox + "'>";
for(i=0;i<logotext.length;i++){
for(a=0;a<logotext[i].length;a++){
if(logotext[i][a]!=" "){
logoy = i*5;
logox = a*5;
if(!evil){
id = "JT"+i+"x"+a;
logo += "<div id='" + id + "'style="position:absolute; visibility: hidden; width:3px; height:3px; top:" + logoy+ "px; left:" + logox + "px; overflow:hidden; background-color:" + logocolor + ";" onclick='alert("" + id + "")'></div>
";
created[created.length] = id;
}
if(evil)
logo += "<LAYER width=Ɖ' height=Ɖ' top='" + logoy+ "' left='" + logox + "' bgcolor='" + logocolor + "'></LAYER>
";
}
}
}
if(!evil)
logo += "</div>";
if(evil)
logo += "</layer>";
var Seed = 999;
function random(max) {
var d = (new Date()).getTime();
Seed = (d * Math.abs(Math.cos(Seed)));
return Math.floor(Seed) % max;
}
created2 = created;
created = created.toString();
function anilogo(style,ati,whendone){
if(document.getElementById&&created2.length>0){
for(i=0;i<10;i++){
rannum = random(created2.length)
newone = created2[rannum]+"";
if(created2.length>0)
eval("document.getElementById('"+newone+"').style."+style+" = '"+ati+"'");
if(window.createPopup || (navigator.appName.indexOf('Netscape')!=-1))
created2.splice(rannum,1);
}
}
if(created2.length<1){
clearInterval(start);
eval(whendone);
}
}
function stage1(){
start = setInterval("anilogo('visibility','visible','stage2()')",100);
}
function stage2(){
created2 = created.split(",");
start = setInterval("anilogo('background','black','stage3()')",100);
}
function stage3(){
created2 = created.split(",");
start = setInterval("anilogo('background','green','stage4()')",100);
}
function stage4(){
created2 = created.split(",");
start = setInterval("anilogo('visibility','hidden','')",100);
}
</script></head>
<body onload="stage1();">
<script>
document.write(logo);
</script>
</div>
</body></html>
logotext[X]
Is where one line of the logo goes.
logox = 100;
logoy = 100;
the x and y cord of where you want the logo to be
logocolor = "lightgrey";
the color of the logo
function stage1(){
start = setInterval("anilogo('visibility','visible','stage2()')",100);
}
function stage2(){
created2 = created.split(",");
start = setInterval("anilogo('background','black','stage3()')",100);
}
function stage3(){
created2 = created.split(",");
start = setInterval("anilogo('background','green','stage4()')",100);
}
function stage4(){
created2 = created.split(",");
start = setInterval("anilogo('visibility','hidden','')",100);
}
this is where the animation stuff is controled. If you want it should be pretty easy to figure out. Otherwise I will look through it later and figure it out...
I try to implement a picture as a cluetip that should show up when the user touches the homepage logo. I tried different things but did not
make it properly. the logo had an awful border in the colors of the links and in Firefox 3 the cluetip did not show.
This script creates a motion blur effect of a moving object - Downgrades very well with others.
You must look at a sample to see what it is and how nice it is.
All you need to do is put the code bellow in the body section of your page... Instructions are in the code to change properties...
Go to http://free.7host04.com/logocurve/index.html for the LogoCurve generator to view samples and work out what you need
- It makes life a LOT easier!! :)
Hope you enjoy!
David :thumbsup:
<script language="JavaScript">
<!--Hide
/*
LOGO CURVE Version 3.2
24.01.2003
Writen by David Bann - South Africa
e-mail: david@ftgconsulting.co.za
Feel free to use this code, but please email me the website it is used on,
and leave this commenting in tact. Thank you!
Please let me know of any bugs or if you edit the script.
Additions since version 3.1:
- Added chengeable formulas for curve.
- Added changeable event at which the script is initiated.
Things to come:
- Better use of layers - will use less layers, but still get same
effect... (User will be able to specify how many layers to be used,
adding more functionality and effects, as well as performance)
- I want to add an option of document boundaries for the curve,as to stop
the logo from going out of the document and dissapearing totaly.
- Fade to work in browsers other then IE.
*/
//----------------------- Start Customizable Variables -----------------------//
//=== Positioning ===//
var left = 0;// Starting left position
var top = 20;// Starting left position
//=== Curve and Distance ===//
var topInc = 5;// Incriment of top position
var leftInc = 5;// Incriment of left position
/* Make both the horizontal curve and the vertical curve the same to..
.. get an increasing gap with no curve. */
var hor_curve = 20;// Horizontal curve - 0 for no curve
var ver_curve = -20;// Vertical curve - 0 for no curve
//=== Timing and Other ===//
var noTimes = 50;// Number of times the picture is shown
var waitTime = 1;// Time delay
var layer = 2;// Layer level
var picture = 'smalllogo.gif'// Picture to display (Smaller images work better)
var start_retracted= true;// Start the image retracted (true / false)
var retract= true;// Retract from behind after expanding (true / false)
//=== Fade options (Only IEusers see fade) ===//
var fade = true;// Gradual Fade (true / false) - Only works if retract =true
var fd_destop = 0;// Destination transparency level (ie 80, for mostly solid)
var fd_rate = 10;// Time in milliseconds between trasparency changes (best under 100)
var fd_delta = 5;// Amount of change each time (ie 5, for 5% change in transparency)
var event_init = 'onClick'// Event at which the script is initiated
var left_formula = '(left + leftInc) + ((count/100) * hor_curve)'// Left position formula
var top_formula = '(top + topInc) + ((count/100) * ver_curve)'// Top position formula
//----------------------- End Customizable Variables -----------------------//
//--------------------- DO NOT EDIT BEYOND THIS POINT! ---------------------//
var count = 0;
var count2 = 0;
var timeOutVal = waitTime * 10;
var txt;
var image;
var imageName;
var lay = new Array;
function addLayer(){
left = eval(left_formula);
top = eval(top_formula);
txt = "<div id='Layer" + count + "' style='position:absolute; visibility:hidden; left:" + left + "; top:" + top + "; z-index:" + layer + "'>";
txt += "<a href='#' " + event_init + "='replay()'><img src='" + picture + "' border=0 style='filter:alpha(opacity=100)' name = 'Image" + count + "'></a>";
txt += "</div>";
document.write(txt);
lay[count]=new lib_obj("Layer"+count);
}
function logoCurveInit(){
while (count < noTimes) {
addLayer();
count++;
}
count = 0;
lay[0].showIt();
if (!start_retracted)
animate();
}
function animate(){
if (start_retracted) {
if (!retract){
if (count > 0){
setTimeout('animate()',timeOutVal);
lay[count].hideIt();
count--;
}
}
else{
if (count >= 0){
setTimeout('animate()',timeOutVal);
lay[count].showIt();
if (count != 0)
fadeImage();
count--;
}
}
if (retract){
if(count==0)
retractIt();
}
}
else{
if (count < noTimes){
setTimeout('animate()',timeOutVal);
lay[count].showIt();
if (count != noTimes-1 && retract)
fadeImage();
count++;
}
if (retract){
if (count == noTimes)
retractIt();
}
}
}
function replay(){
if ((count == noTimes || (count == 0 || count == -1)) &&(count2 == noTimes-1 || count2 == 0)){
start_retracted = !start_retracted; // Make the value opposite of what it is
make_all_visible();
if (start_retracted){
count = noTimes-1;
}
else {
count = 0;
}
animate();
}
}
function retractIt(){
if (start_retracted) { // If the logo is not retracted (showing all the layers)
if (count2 > 0){
setTimeout('retractIt()',timeOutVal);
lay[count2].hideIt();
count2--;
}
}
else{ // If the logo is retracted (Only showing the first layer)
if (count2 < noTimes-1){
setTimeout('retractIt()',timeOutVal);
lay[count2].hideIt();
count2++;
}
}
}
function fadeImage(){
if (fade){
if (count >= 0 && count <= noTimes){
image = document.images['Image' + count];
nereidFade(image,fd_destop,fd_rate,fd_delta);
}
}
}
function make_all_visible(){
for (var i = 0; i< noTimes ; i++){
if (document.images['Image' + i].style.MozOpacity){
document.images['Image' + i].style.MozOpacity=100;
}
else if (document.images['Image' + i].filters) {
document.images['Image' + i].filters.alpha.opacity = 100;
}
}
}
////***************(DHTMLCentral.com)****************////
function check_browser(){
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5)
return this
}
bw=new check_browser()
function show_message(txt){alert(txt); return false}
function lib_obj(obj,nest){
if(!bw.bw) return show_message('Old browser')
nest=(!nest) ? "":'document.'+nest+'.'
this.evnt=bw.dom? document.getElementById(obj):
bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
if(!this.evnt) return show_message('The layer does not exist ('+obj+')'
+'- If your using Netscape please check the nesting of your tags!')
this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;
this.ref=bw.dom||bw.ie4?document:this.css.document;
this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;
this.y=parseInt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0
this.w=this.evnt.offsetWidth||this.css.clip.width|| this.ref.width||this.css.pixelWidth||0;
this.h=this.evnt.offsetHeight||this.css.clip.height|| this.ref.height||this.css.pixelHeight||0
this.c=0
if((bw.dom || bw.ie4) && this.css.clip) {
this.c=this.css.clip; this.c=this.c.slice(5,this.c.length-1);
this.c=this.c.split(' ');
for(var i=0;i<4;i++){this.c[i]=parseInt(this.c[i])}
}
this.ct=this.css.clip.top||this.c[0]||0;
this.cr=this.css.clip.right||this.c[1]||this.w||0
this.cb=this.css.clip.bottom||this.c[2]||this.h||0;
this.cl=this.css.clip.left||this.c[3]||0
this.obj = obj + "Object"; eval(this.obj + "=this")
return this
}
lib_obj.prototype.showIt = function(){this.css.visibility="visible"}
lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"}
lib_obj.prototype.writeIt = function(text,startHTML,endHTML){
if(bw.ns4){
if(!startHTML){startHTML=""; endHTML=""} this.ref.open("text/html");
this.ref.write(startHTML+text+endHTML);
this.ref.close()
}else this.evnt.innerHTML=text
}
////***************(DHTMLCentral.com)****************////
/* Code taken from DynamicDrive.com (Start)-->
Gradual-Highlight Image Script II-
By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
For full source to script, visit http://dynamicdrive.com */
nereidFadeObjects = new Object();nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)return
if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return;}
clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity;
direction = 1; if (object.filters.alpha.opacity > destOp){direction = -1;}
delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
// <-- Code taken from DynamicDrive.com (End)
window.onload=new logoCurveInit();
//-->End Hide
</script>
I am completely new to jQuery, and I don't even know how to approach or implement what I am trying to do.Before the home page of a site I've developed appears, I want the logo of the company to appear on the screen, then fade out to reveal the web page with full functionality.I also could do this be fading out the logo to reveal a static image of the home page which then could redirect to actual home page.
View 1 Replies View RelatedI have a very strange issue which happens only on the Mac/Firefox 2 (and 3 I believe) : [URL] The top left logo (ball) is a simple flash 'spin' animation, that is activated using javascript via the navigation (onmouseover effect). This works fine on Windows - Firefox, IE and Mac - Safari. However on Mac/Firefox, the logo ball on page load simply DOES NOT APPEAR. However, when you simply SCROLL down or if you move your mouse over the navigation (which calls the flash), then the logo appears. Basically, it's really odd because the logo ball is there, but Mac/Firefox does not show it until you do something to the page, like scroll.
View 1 Replies View RelatedSorry for the re-post but the original message subject no longer
applies. If I try this in IE5, it doesn't work:
<script type="text/javascript">
window.onload = foo;
</script>
<body>
whereas this does work:
<body onload="javascript:foo();">
This is not the way I want to handle events. I checked MSDN and it seems
to indicate that the first way should work. Is there something I can do
to get the first way (event handlers?) to work in IE5?
Can I use CSS to set onmouseover ?
In HTML I have a bunch of <A HREF="whatever"
onmouseover=eventhandler(this)">stuff</A>. I would prefer not to have the
onmouseover 'pollution'
Is it possible to specify the eventhandler using css ? i.e.
<A HREF="whatever" class="foo">stuff</A>.
I have a script in which a function launched by a START button
continuously calculates and writes a value to a text box. The
calculation is done in a for loop. In the loop is a conditional that is
a global variable, a boolean. If the boolean is true, break ends the
loop (or is supposed to!). A STOP button has an onclick function that
sets the global variable to true.
What happens, though, is that the function for the STOP button is
not executed until the for loop reaches the maximum value set for i.
Anyone know how you can get one button to stop a process started by
another?
Is it necessary to return a value from the event handlers? For
instance, what does the return value in the following code signify?
What will be its impact if it returned otherwise (true)?
<a href="http://www.w3schools.com"
onmouseover="alert('An onMouseOver event'); return true">
<img src="Click.gif" width="100" height="30">
</a>
Here is a little sample code:
<html>
<head>
<script type="text/javascript">
function BodyClick() {
// How to access the event object here?
alert(window.event.shiftKey);
}
function WindowLoad() {
document.body.onclick = BodyClick;
}
window.onload = WindowLoad;
</script>
</head>
<body></body>
</html>
It does not work in FireFox. How to make it work?
My only requirement is that I need to assign the BodyClick() handler
dynamically in script (not statically in HTML). So I cannot use this solution:
<body onclick="BodyClick(event)">
I've been teaching myself javascript and I'm a bit confused about the whole events business. I've been reading the Sitepoint book (among a bunch of others) and when it gets to Ch 4 things get down right confusing. They claim that inline event handlers are "so 1998", something I've heard before and then they proceed to write some pretty complex library files to get around the fact that IE <= 7 doesn't support much of the alternative ways of handling events--a familiar enough story. Anyhow, it seems that many many tutorials all over the internet (and countless pages) resort to inline event handlers as the standard. So, I'm confused. I obviously need to know inline event handlers if I intend to work as a web developer even though it's so 1998. Obviously inline even handlers are not quite on par with inline font attributes and transparent gif files despite the language one often hears. Can someone set me straight, and if possible suggest a brilliant tutorial, book chapter, or website that lays everything crystal clear for me?
View 14 Replies View RelatedI wanted to add a onclick event handler to an image in a loop cos I have a dynamic number of images. The problem is I also need to pass a parameter. This works in Opera 8, but doesn't work in IE:
document.images[i].onclick = "javscript: ShowDesc(" + i + ");";
What am I missing?
I've been reading this page on accessing event handlers and avoiding the inline ones. Suppose I want to hover over a link and make it display something else, I thought this is what I would put in the <head>:
<script type="text/javascript">
var x = document.getElementById('question');
x.onmouseover = function() {document.getElementById('answer').style.display='inline'}
x.onmouseout = function() {document.getElementById('answer').style.display='none'}
</script>
The HTML being:
<a id="question" href="#">Question</a>
<span id="answer" style="display:none;">The answer is 42</span>
I've reread the article in the link but to no avail, I don't know what is wrong.