JavaScript - Multi Background Images By Clicking Main Logo.

Hello everyone. I hope I'm posting this in the right place.

I'm using the Disco Background Effect script found here that causes the background color of the page to continuously change.

For my design I need other aspects of the page to change along with it. Such as some title Text and HR lines.

Is it possible to call this script to work on other things such as images, text and HR lines? In other words I want some text to change color in time with the background changing.

I appreciate any help you might have.

Ron

Hi All,

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?

Thanks!

I want to place a Logo/ad in front of content, there are ways to do it but the problem with them is that they use JS show/hide method. What happens is that the content doesn't load while user is watching the logo/ad, which results as double waiting for the user first for the logo/ad and then the actual flash content loading.
So I was thinking if there is a way that a logo/ad could be displayed and at the same time flash content continues to load at the back end.
*I didn't ask for a loader that continues to appear until at the back end flash content is done loading, because I found only one script that was able to do so using Jquery but it was designed to work with fixed pixels while my flash content is based on %ages*

Live Demo: http://bloghutsbeta.blogspot.com/201...ent-issue.html

Note: Sorry for providing blogspot link but JsFiddle is not an option for a person living in Afghanistan with 5KBps but still if you feel that I am missing something please let me know I will edit it and try my best to provide as relevant question as possible ^^

Relevant Markup:
Button for lightbox or Modal Window

Code:

<a class="poplight" href="#?w=100%" rel="popup_name"><img alt="play game" class="happybutton" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://farm5.static.flickr.com/4084/4998558471_27e3985c16_m.jpg" style="opacity: 0.8;" /></a>

Code:

  <div class="popup_block" id="popup_name">
     <script type="text/javascript">
    $(document).ready(function(){
        $('a.poplight[href^=#]').click(function() {
            $('<iframe/>')
                .attr('frameborder', 0)
                .attr('allowTransparency', false)
                .attr('scrolling', 'no')
                .attr('width', '100%')
                .attr('height', '98%')
                .attr('src', 'http://files.cryoffalcon.com/bhgames/dressup/Celebrities/Wizard%20Fashion.html')
                .appendTo('#popup_name');
        });
    });
    </script>
    </div>

CSS:

Code:

#fade { 
    	display: none; 
    	background: #000;
    	position: fixed; left: 0; top: 0;
    	width: 100%; height: 100%;
    	opacity: .80;
    	z-index: 9999999;
    }
    
    .popup_block{
       width: 98.95%; height: 98.2%;
    	display: none;
    	padding: 0px;
    	line-height:1em;
    	font-size: 1em;
    	position: fixed;
    	top: 0px; left: 0px;
    	z-index: 999999999;
    	-webkit-box-shadow: 0px 0px 20px #000;
    	-moz-box-shadow: 0px 0px 20px #000;
    	box-shadow: 0px 0px 20px #000;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	border-radius: 10px;
    }
    .close {
    	height:20px;
    	float: right;
    	margin: 0 2px 0 0;   
    }

JS (actually Jquery)

Code:

<script type="text/javascript">
        $(document).ready(function(){
        						   		   
        	//When you click on a link with class of poplight and the href starts with a # 
        	$('a.poplight[href^=#]').click(function() {
        		var popID = $(this).attr('rel'); //Get Popup Name
        		var popURL = $(this).attr('href'); //Get Popup href to define size
        				
        		//Pull Query & Variables from href URL
        		var query= popURL.split('?');
        		var dim= query[1].split('&');
        		var popWidth = dim[0].split('=')[1]; //Gets the first query string value
        
        		//Fade in the Popup and add close button
        		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Close It" class="close"><img src="http://files.cryoffalcon.com/bloghuts/images/close%20button.png" alt="Close" width="20" height="20" /></a>');
        			
        		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
        		var popMargTop = ($('#' + popID).height() + 0) / 0;
        		var popMargLeft = ($('#' + popID).width() + 0) / 0;
        		
        		//Apply Margin to Popup
        		$('#' + popID).css({ 
        			'margin-top' : -popMargTop,
        			'margin-left' : -popMargLeft
        		});
        		
        		//Fade in Background
        		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
        		
        		return false;
        	});
        	
        	
        	//Close Popups and Fade Layer
        	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        	  	$('#fade , .popup_block').fadeOut(function() {
        			$('#fade, a.close').remove();  
        	}); //fade them both out
        		
        		return false;
        	});
        
        	
        });
        
        </script>

I need to use javascript in a way in which it will keep clicking a button. The source code for that button is below:
Code:

<script type="text/javascript"> 
function set_opacity(id, opacity) {
  element = document.getElementById(id)
  if (/MSIE/i.test(navigator.userAgent)) { element.style.filter='alpha(opacity='+opacity+')'; }
  else { element.style.opacity = opacity/100; }
  }
</script> 
 
 
  <div class="recruiter_enabled"> 
    <table cellspacing="0" style="width: 100%"> 
      <tr> 
        <td> 
          
            <p> 
              <script type="text/javascript"> 
//<![CDATA[
recruiter_clicks = 1
//]]>
</script><a href="/recruiter/recruit/3p5tjd4pdnbg0" id="recruit_link" onclick="return(submit_link_as_post_with_opacity(this, 'recruit_image'))"><img alt="" class="start_recruiting" id="recruit_image" src="/A.gif?1221518016" /></a><script type="text/javascript"> 
//<![CDATA[
 
      link = document.getElementById('recruit_link');
      link_href = link.href;
      link.href = "#";
      set_opacity('recruit_image', 50);
      
      setTimeout("link = document.getElementById('recruit_link'); link.href = '" + link_href + "'; recruiter_clicks = 0; set_opacity('recruit_image', 100)", 2000);
    
//]]>
</script>

Therefore, I need javascript to keep clicking the button until it has clicked it 375 times.

How would I be able to do this?

I have this script to close a div when I click outside of it. It works in Firefox but in IE7 i get an error: 'divid' is undefined.
mydiv is the div I want to close and clickclick is the link that makes the div appear.

Code:

<script type="text/javascript">

      function monitorClick(e){
        var evt = (e)?e:event;
       
        var theElem = (evt.srcElement)?evt.srcElement:evt.target;

        while(theElem!=null){
          if(theElem.id == "mydiv" || theElem.id == "clickclick" && document.getElementById(divid).style.display == 'none') {
          document.getElementById('mydiv').style.display = 'block';
          return true;
          }
	 
          theElem = theElem.offsetParent;         
        }
        document.getElementById('mydiv').style.display = 'none';
        return true;
      }

      document.onclick = monitorClick; 
 </script>

What should I change to make it work in IE7?

Hi all, I want to have a javascript popup box so that when a hyperlink is clicked, a user is asked if they are sure they want to click this link, if they select ok then the page loads, if they click canel then nothing happens, so i have this code below:

Code:

<script type="text/javascript">
function confirmSubmit()
{
var agree=confirm("Are you sure you wish to click this link?");
if (agree)
return true ;
else
return false ;
}
</script>

Code:

<a onclick="return confirmSubmit()" href="page.html">Page</a>

However when a user clicks cancel the link still loads, can anyone see where I am going wrong? any help will be appreciated

For school I'm supposed to write a JS code which visits a website, and then clicks on a button on that website. I used the document.location method to visit the web page, but then if I use the document.forms[0].elements[0].click() function to click a button, nothing happens. The click() function has always worked for me when the JS code is embedded in the web page, but its not in this case because the code has to click a button on an external website. So how can I do this? I just need me Javscript program to visit a site, and then click a button on that site. Please help, thanks.

Hi I've had this script for a few years which I use to make a search box, it adds the user's search to the end of a url, so you can make a search box for Google or pretty much anything. If the user clicks on submit ('Find') without selecting a pull down option I like the script to alert something like 'select a site' or if they don't enter any keyword to alert 'enter a keyword', however when either of these happens, the alert box needs to be clicked several times to get rid of the alert. so I'm wondering if the script is running in some kind of loop.... The script does what I wat I just want to make the alert boxes go after the first 'click' to hide them... hope this makes sense here's the script, thanks for any ideas folks..
---------------------


----------------
searchdata.js
----------------
[CODE]
function addplus(items)
{
var plussed = "";
for (var t = 1 ; t <= items.length ; t++)
{
if (items.substring(t-1,t) == " ")
{ plussed+="+"; }
else
{ plussed+=items.substring(t-1,t); }
}
return plussed;
}

function searchdata()
{
var words;
words = document.getElementById("querydata").value;
var searchitems;
searchitems=addplus(words);
var index;
index = document.getElementById("subjectdata").selectedIndex;
collection = document.getElementById("subjectdata").value;


if (document.getElementById("subjectdata").value == "null" || document.getElementById("subjectdata").value == "")


{alert("\nSelect a site to search");}
else
{
var site;
site = document.getElementById("subjectdata").value;
site+=searchitems;
if (notEmpty(searchitems))
{
window.open("","newwin","status=0,resizable=1, menubar=1, toolbar=1, scrollbars=1, location=1, directories=0, width=900, height=600, top=200, left=200");
window.open(site,"newwin");
}
}
}

function notEmpty(word)
{
if (word == "" || word == null)
{
alert("\nEnter a keyword to search");
document.getElementById("querydata").focus();
return false;
}
else
{
return true;
}
}

[CODE]
-----------------------------------------------------------------
the form to display the search box
---------------------------------
[CODE]
<script src="searchdata.js" type="text/javascript"></script >
<form id="searchform" onsubmit="searchdata()" action="javascript:searchdata()" method="get">
<select id="subjectdata">
<optgroup>
<option select="selected" value="null">Choose coverage</option>
<option value="http://www.statistics.gov.uk/hub/search/index.html?newquery=">National Statistics</option>
<option value="http://www.intute.ac.uk/cgi-bin/search.pl?Search=Search&limit=0&subject=Statistics&term1=">Statistics & Data on the WWW</option>
</optgroup>
</select>
<input id="querydata" value="type here" />
<input onkeypress="searchdata()" onclick="searchdata()" type="submit" value="Find" />
</form>
[CODE]

I'm using a jQuery lightbox in addition to a javascript page. When I click on a thumb it retrieves the appropriate div. Right now I have the div img src actually spelled out, but I've got so many of these on the page that it's taking forever to load. How do I tell the document that when I click on the thumbnail, to replace the div image source with the appropriate image? Or, is there an even more efficient way to do this?

Here's a sample of my code:

Code:

<p><a href="#pic1"><img src="images/art/thumb1_t.jpg" 
	alt="A lovely picture" /></a></p>
<p><a href="#pic2"><img src="images/art/thumb2_t.jpg" 
	alt="Another lovely picture" /></a></p>

<div id="pic1">
	<img src="placeholder.gif" alt="A Lovely Picture" />
	<p>A whole bunch of details and maybe a list or two</p>
</div>

<div id="pic2">
	<img src="placeholder.gif" alt="Another Lovely Picture" />
	<p>A whole bunch of details and maybe some popups</p>
</div>

The lightbox depends on the "a href='#whatever'" to function. If you need to see it in practice, here is the page. It works, but it is slow to load. http://www.brettkaufman.com/art.html

Hi there, I am pretty new to javascript coding, and I could use little help...

As you can see here, I got this code where I can move image inside of a box, and I do it by clicking these "links".

And now I want to ask you, is there any way that I could move image using keys on keyboard (arrows or WSAD)?

I'd like to keep this as simple as possible since I am not really into very advanced scripts (although I could probably understand them if you give little explanation).

Code:

<html>
 <head>
 <body>
  <script type="application/ecmascript">

    // X position of image
    var x = 0;
    // Y position of image
    var y = 0;
    // Move per click
    var inc = 10;

  function Init()
 {
   document.getElementById('autic').style.left = x + 'px';
   document.getElementById('autic').style.top = y + 'px';
 }
  function moveRight()
 {
   x += inc;

   document.getElementById('autic').style.left = x + 'px';
 }

  function moveLeft()
 {
   x -= inc;

   document.getElementById('autic').style.left = x + 'px';
 }

  function moveUp()
 {
   y -= inc;

   document.getElementById('autic').style.top = y + 'px';
 }

  function moveDown()
 {
   y += inc;

   document.getElementById('autic').style.top = y + 'px';
 }
   </script>


 <style>
  #box
 {
   width: 500px;
   height: 300px;
   position: relative;
   margin: 20px auto 0px auto;
   border: 5px outset #000;
   overflow: hidden;
 }

 .image
 {
   position: absolute;
   z-index: 100;
 }
  </style>
 </head>

  <body onload="javascript:Init()">
  <div id="box"><img class="image" id="autic" src="auto.png"/></div>
   <a href="javascript:moveLeft()">Left</a>
   <a href="javascript:moveUp()">Up</a>
   <a href="javascript:moveDown()">Down</a>
   <a href="javascript:moveRight()">Right</a>
 </body>
</html>

I am creating a website as part of a university project. as part of this i am trying to make a menu in the top right. after looking around i have found javascript top be the best way to do this.
how would i go about making it so that when i click on one div (called map) a separate div (called mapMenu) visibility is toggled.

thanks

I want to make a script selecting electronics category in this site http://eu.redeem-it.net/boutique.php
A friend told me to use getElementsByClass but I still cant do it.

Hi,

After much searching and head-scratching (JS is not my forte!), I adapted some code to do what I want - well, almost! So here I am back again. I need to have three divs on a page, with each separate div changing onClick. Below is the code so far.
Two problems:
1) when I open it in a browser window both divs show, then the one disappears when I click on the second div leaving only the numbers. How can I change it so that both divs remain open?

2) Instead of the numbers [1], [2], etc. to change the divs, I'd like to have to just click on one single 'click here for more' to display the next div then return to the first after the last one. Can this be integrated or is it too late?

Thank you!


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">

<html>

	<head>
		<title>Switching Divs</title>
		
		<style>
		
#one {width: 500px; height: 100 px; border: 1px solid red; }
#two {width: 500px; height: 100px; border: 1px solid blue; }
#three {width: 500px; height: 100px; border: 1px solid purple; }
#four {width: 500px; height: 100px; border: 1px solid green; }

#five {width: 500px; height: 100 px; border: 1px solid red; }
#six {width: 500px; height: 100px; border: 1px solid blue; }
#seven {width: 500px; height: 100px; border: 1px solid purple; }
#eight {width: 500px; height: 100px; border: 1px solid green; }

#propertyfrance {float: left; color: #666666; font-family: tahoma arial, verdana, sans-serif; font-size: 11px; }

.propertytext {float: left; clear: right; width: 300px; height: 100px; border: 1px solid #000; }

.propertyphoto {float: left; width 200px; height: 100px; border: 1px solid #cceeff; text-align: center; }

#image-switch #one {
padding:0px;
}
#image-switch #two, #image-switch #three, #image-switch #four {
display:none;
}

#image-switch #five {
padding: 0px; }
#image-switch #six, #image-switch #seven, #image-switch #eight {
display:none;
}

</style>

<script type="text/javascript">
function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three','four', 'five', 'six', 'seven', 'eight'];
for(var i=0; i<option.length; i++) 
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}

</script>

	</head>
	
	
	<body>

<h4>Switching divs (javascript)</h4>

<div id="image-switch">

<br>OnClick
<br>

<div id="one">
<div class="propertytext">We'll get some text in here for property 1</div>
<div class="propertyphoto"><img src="property1.jpg" height="100" width="180" alt="Property 1"></div>
</div>

<div id="two">
<div class="propertytext">We'll get some text in here for property 2</div>
<div class="propertyphoto"><img src="property2.jpg" height="100" width="180" alt="Property 2"></div>
</div>

<div id="three">
<div class="propertytext">We'll get some text in here for property 3</div>
<div class="propertyphoto"><img src="property3.jpg" height="100" width="180" alt="Property 3"></div>
</div>


<div id="four">
<div class="propertytext">We'll get some text in here for property 4</div>
<div class="propertyphoto"><img src="property4.jpg" height="100" width="180" alt="Property 4"></div>
</div>

<br>
<a onClick="switch1('one');"> [1]</a> 
<a onClick="switch1('two');"> [2]</a>
<a onClick="switch1('three');"> [3]</a>
<a onClick="switch1('four');">  [4]</a>
<br><br>

<div id="five">
<div class="propertytext">We'll get some text in here for property 5</div>
<div class="propertyphoto"><img src="property5.jpg" height="100" width="180" alt="Property 5"></div>
</div>

<div id="six">
<div class="propertytext">We'll get some text in here for property 6</div>
<div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 6"></div>
</div>

<div id="seven">
<div class="propertytext">We'll get some text in here for property 7</div>
<div class="propertyphoto"><img src="property7.jpg" height="100" width="180" alt="Property 7"></div>
</div>

<div id="eight">
<div class="propertytext">We'll get some text in here for property 8</div>
<div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 8"></div>
</div>

<br>
<a onClick="switch1('five');"> [5] </a>
<a onClick="switch1('six');"> [6] </a>
<a onClick="switch1('seven');"> [7] </a>
<a onClick="switch1('eight');"> [8] </a>

</div>

	</body>
</html>

Hello. I have looked everywhere and I absolutely cannot find a method that works. I'm making an html website with flash. This is all I want......

A swf "this will be the default flash you see"

underneath that flash I want 3 text links named.....
Flash1
Flash2
Flash3


when you click flash1, 2, or 3 I want it to swap out the Current flash video
with a different one. This way The user can watch all the flash vids on the
same page, rather than a separate page for each flash.

I found a way to swap them out using iframe, however that requires me to
make a separate html page for each of my swf's themselves. I dont want to do that.

Plz if someone could help me I would greatly appreciate it! I hope I am posting
this in the correct section, I know swfobject involves javascripting so thats
why I'm posting here. Not that your method HAS to involve swfobject to
embed. If someone can give me code that I can just copy/paste into a blank
page in dreamweaver (and I would adjust the embded swf file name and size
etc obviously) and have it work that would be fantastic.

thank you

I know how to make something function onclick(), but how can I make it so it copies the area of a textarea element, does Javascript have the ability to do this?

Thanks for any help in advance.