JavaScript - Image Download Link Without Zip Using Javascript

Hey guys I've a download page with a button 'DOWNLOAD NOW'. When the button is clicked visitors will have to wait for the download to starts (doesn't redirect).

What I want is that sometimes it takes very long for the DL to start after clicking the button, for instance 10 seconds. Hence I want to show a simple preloader WHEN the button is click, while waiting for the browser to stop loading and download to start, AND hide the preloader when browser stop loading and download started.

hi,
I have a website which is available on internet and uses lot of javascript code. Someone recently reported a bug and I fixed it in a javascript file. Now I want to move this updated js file on my server. but I am confused, how will this fix now be downloaded on every user's browser when they access website the next time? Is the download to client machine dependent on browser settings? could it be possible that some customer machine has latest file and some do not. How do I force file to download on client machine independent of client browser settings?
thank u

Does anyone know how to make URL links that use Javascript still work when
users have Javascript disabled on their browser?

The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version.

I tried the <script><noscript> tags, but I'm not sure if I'm using it
correctly, as my URL completely disappears.

Below is my HTML/Javascript code:

<p class="download">
<script type="text/javascript">document.write("<span
style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\"
onclick=\"window.open(
'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+
Math.floor( Math.random()*11 ) );\" >The Child Magazines Media
Kit</a></span> (PDF 1 MB) ");</script>
<noscript><span style="text-decoration: underline;"><a
href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf"
>The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript>
</p>


Thanks for any help,
Michael

So I have a gallery which is displaying images from an array called imgList. When they are displayed I want the user to be able to link directly to the image. Is there a simple way to do this?

The JavaScript:
Code:

//<!--

var imgList = new Array(
	"images/gallery/1.jpg",
	"images/gallery/2.jpg",
	"images/gallery/3.jpg",
	"images/gallery/5.jpg",
	"images/gallery/6.jpg",
	"images/gallery/duo.jpg"
	);

var clientData = new Array(
'',
'',
'',
'',
'',
'',
''
);

var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";

function init(){
	all_links=document.getElementById('gallery').getElementsByTagName('a');
	all_links[0].style.color="#7d3d3d";
	ShowMain(current_position);
}

function color_me(element,color){
	element.style.color=color;
}

function Prev(){
	color_me(all_links[current_position],'#000000');
	if((current_position-1)>-1){
		current_position=current_position-1;
	}
	else{
		current_position=(all_links.length-1);
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function direct_selection(number){
	all_links[current_position].style.color="#000000";
	current_position=number;
	ShowMain(current_position);
	all_links[current_position].style.color="#7d3d3d";
}

function Next() {
	color_me(all_links[current_position],'#000000');
	if((current_position+1)<all_links.length){
		current_position++;
	}
	else{
		current_position=0;
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function ShowMain(which){
	currentMain = which;
	currentMainT = which;
	if ( currentMain < 0 ) currentMain = 0;
	if ( currentMainT < 0 ) currentMainT = 0;
	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
	if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
	document.getElementById('mainImg').src = imgList[currentMain];
	document.getElementById('mainText').innerHTML = clientData[currentMainT];
	var PD = document.getElementById('Pg');
	var PD2 = document.getElementById('Pg2');
	
	document.getElementById("mainText").style.display = 'inline';
//	return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->


//<!--
function preloader(){
	// counter
	var i = 0;

	// create object
	imageObj = new Image();

	// set image list
	images = new Array();
	images[0]="images/gallery/1.jpg";
	images[1]="images/gallery/2.jpg";
	images[2]="images/gallery/3.jpg";
	images[3]="images/gallery/5.jpg";
	images[4]="images/gallery/6.jpg";
	images[5]="images/gallery/duo.jpg";


	// start preloading
	for(i=0; i<=3; i++){
		imageObj.src=images[i];
	}
}
//-->

The HTML where it is displayed:
Code:

<img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" />

First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link).

I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked.

Help please...


Code:

<script type="text/javascript">
		<!--Hide from incompatible browsers
		/* <![CDATA[ */
				
		function changeText()
		{
			document.getElementById('link').innerHTML = 'View Smaller Image';
			return false;		
		}
		
		function changeImage()
		{			
			var newImage = new Image();
			newImage.src = "images/cottage_large.jpg";
			document.getElementById('thumbnail').src = newImage.src;	
			return false; 											
		}
				
		/**/
		/* ]]> */
		
		// Stop hiding from incompatible browsers -->
	</script>

</head>

<body>
	
	<h3>Real Estate</h3>
		 
	<p><img src="images/cottage_small.jpg" id="thumbnail"></p>
    
	<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>
	

</body>

</html>

Hi everyone,

I have some images that I want the user to be able to move around the page. So far, this script in the header allows me to do this:
Code:

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
	
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;	
    return false;
  }
  
}

function selectmouse(e) 
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";

  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
	fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="dragme")
  {
		isdrag = true;
		dobj = fobj;
		tx = parseInt(dobj.style.left+0);
		ty = parseInt(dobj.style.top+0);
		x = nn6 ? e.clientX : event.clientX;
		y = nn6 ? e.clientY : event.clientY;
		document.onmousemove=movemouse;

    return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

The body has this:
Code:

<img src="images/balloons.gif" class="dragme">

Now, to be able to use this image as a link, I would have to find the displacement between the mousedown and mouseup coordinates. If the displacement is below say 10px, then the mouseup would bring them to another page.
I also wanted to make it so that if the mouseup occurs in a certain area of the page, that the image would move itself to a certain spot.
I've programmed a lot before, but not in JavaScript. Any help would be much appreciated. (Note: I need this done in JavaScript, not Flash, even though it might be easier).

Thanks

Hi all,

I am looking to create a script that will let me use an image as the a:active link. I did a little research and found this most likely cannot be done in CSS.

Can someone point me in the right direction as far as documentation?

Thanks a bunch!

Hi guys
I need help on sorting out a drag&drop script
I'm a bit of a rookie with programming, so I found this script somewhere and I managed to implement it in my code...unfortunately now I need to slightly modify the code, and I'm completely lost

I have this drag&drop script that moves some images around the screen, but I'd like to assign an event document.getElementById("XXXXX").onclick = blablabla to each of those images.
The problem is that, of course, every time I click on the image to drag it around, this activates the link. With a doubleclick event everything works smooth, however it's a solution I don't quite like.

I was thinking about a way to control the code so that while the image moves the link is somehow "not active", but if the user simply clicks without dragging then it activates the .onclick function


I have the following piece of code in the head section of my page, which is the actual code for dragging the elements
Code:

function Browser() {

var ua, s, i;
var ln = 1;

this.isIE = false;
this.isNS = false;
this.version = null;

ua = navigator.userAgent;

s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

// Treat any other "Gecko" browser as NS 6.1.

s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;

function dragStart(event, id) {

var el;
var x, y;

// If an element id was given, find it. Otherwise use the element being
// clicked on.

if (id)
dragObj.elNode = document.getElementById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.srcElement;
if (browser.isNS)
dragObj.elNode = event.target;

// If this is a text node, use its parent element.

if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;
}

// Get cursor position with respect to the page.

if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}

// Save starting positions of cursor and element.

dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);

if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;

// Update element's z-index.

dragObj.elNode.style.zIndex = ++dragObj.zIndex;

// Capture mousemove and mouseup events on the page.

if (browser.isIE) {
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", dragGo, true);
document.addEventListener("mouseup", dragStop, true);
event.preventDefault();
}
}

function dragGo(event) {

var x, y;

// Get cursor position with respect to the page.

if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}

// Move drag element by the same amount the cursor has moved.

dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";

if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();
}

function dragStop(event) {

// Stop capturing mousemove and mouseup events.

if (browser.isIE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
if (browser.isNS) {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}

then in the Body, I have the DIV that can be dragged around through the "onmousedown" event
Code:

<div id="milano" class="aBar" style="width:auto; height:auto;" onmousedown="dragStart(event, 'milano')">
    <?php 
		print '<a href="#"><img border="0" src="images/works/thumbnails/milano.jpg" alt="" style="float:left; position:absolute; top:'.rand(50,300).'px; left:'.rand(100,500).'px"/></a>'
	?>
  </div>

then, in the Body as well, I have the javascript that I'd like to activate only if the image is clicked on BUT not dragged around
Code:

<script> 
		window.onload = function () { 
		
			document.getElementById("milano").onclick = function () {
				alert('AAAAA');
			}
		}
</script>

I'm really sorry the code is REALLY messy, but as I said I'm just a rookie and I know this is not an elegant solution at all
Thank you very much for your time, I really hope you can help me out with that as I spent the last 2 weeks tying to find a solution...

Cheers,
Mattia

Hello,
I'm new to this forum and well... I'm pretty new to JavaScript as well.
Here's my problem: I'm trying to create a switch image code that will allow the new image to be a link as well. In the list item where you'll see ('blue.jpg') if I try to make this an anchor tag - it breaks the code. Any suggestions would be great.
Thanks for taking a look!

Code:

<head>
	
	<script>
	function switch1(div) {
	if (document.getElementById('blue')) {
	var option=['blue','green','purple'];
	for(var i=0; i<option.length; i++)
	{ obj=document.getElementById(option[i]);
	obj.style.display=(option[i]==div)? "block" : "none"; }
	}
	}
	//
	function switchImg(i){
	document.images["blue"].src = i;
	}
	</script>
	
	<style>
	#image-switch ul {
	margin:0 0 0 20px;
	color:red;
	list-style-type:none;
	}
	#image-switch li {
	padding:10px;
	}
	#image-switch #green, #image-switch #purple {
	display:none;
	}
	#radiobs {
	width:150px;
	position:relative;
	margin:0;
	}
	#radiobs input {
	margin:0;
	padding:0;
	position:absolute;
	margin-left:6em;
	width:15px;
	}
	
	</style>
	
	
	
	
</head>


<div><img src="blue.jpg" id="blue" /></div>

<ul id="radiobs">
<li><a href="#n" onclick="switchImg('blue.jpg')"><img src="sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
<li><a href="#n" onclick="switchImg('green.jpg')"><img src="sample_box_2_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
<li><a href="#n" onclick="switchImg('purple.jpg')"><img src="sample_box_3_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
</ul>

</div>
<div class="clear"></div>

I have a script but the script links to the email link, I need it to link the email but I also want to add the image of the email for people who do not have JS. How would I do this?

Code:

<script type="text/javascript" language="javascript">
<!--
// Email obfuscator script 2.1 by Tim Williams, University of Arizona
// Random encryption key feature by Andrew Moulden, Site Engineering Ltd
// This code is freeware provided these four comment lines remain intact
// A wizard to generate this code is at http://www.jottings.com/obfuscator/

{ coded = "gUivfkUiz@Vzz38CfC.3ip.Uj"
  key = "gOoyt8wF74qDiElQcJTb6KXhNpS3skn510ueAfLV9BaHZxdGmrIW2CjvRYPUzM"
  shift=coded.length
  link=""
  for (i=0; i<coded.length; i++) {
    if (key.indexOf(coded.charAt(i))==-1) {
      ltr = coded.charAt(i)
      link += (ltr)
    }
    else {     
      ltr = (key.indexOf(coded.charAt(i))-shift+key.length) % key.length
      link += (key.charAt(ltr))
    }
  }
document.write("<a href='mailto:"+link+"'>"+link+"</a>")
}

Hello,

I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document).

Links:

http://www.courtneyhunt.com.au/press_bg.html
http://www.courtneyhunt.com.au/press_gallery.html

I am a complete novice with JavaScript so if anyone could help that would be great.

Thank you in advance.

Can someone tell me how to make a close button for this? The close button I currently have here makes the IMAGE2 disappear but I cannot see IMAGE1 until the time runs out on the setTmeout. I want to be able to click the closeX and close out the whole script leaving IMAGE1 showing. Here is what I have:

Code:

            <table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" bgcolor="#000000" height="350">
	<tr>
		<td align="center">
<script type="text/javascript"> 
window.onload = function () { 
setTimeout(function () { 
var div = document.getElementById('hideOverlay'); 
div.innerHTML = 'IMAGE1 GOES HERE';  }, 6000);} 
</script>
<div id="hideOverlay">
<table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" height="350">
	<tr>
		<td align="center" width="650" height="350"><a style="text-decoration: none" href="javascript:void(0)" onclick="var lyr =document.getElementById('hideOverlay'); lyr.innerHTML='';"/><font color="#666666" size="2">Close [x]</font></a>IMAGE2 GOES HERE</td>
			</tr>
		</table></div>
		</td>
	</tr>
</table>
</div>

in a javascript file that contains the following code, is there a way to hyperlink the word ELEPHANT ?

$j('#message').html("white ELEPHANT");

Hi,

I'm pretty ignorant about Java and was wondering what the technique is to have different tabs for links on a page?
(i.e. you can look through different categories while staying on the homepage).

An example of what I mean is at the bottom of this page:
http://www.huffingtonpost.com/

Any help would be much appreciated!

I have a simple problem. I want to add the current page's url to a link, like this:
<code>
<a href="http://www.somesite.com/somepage.aspx?a=">
</code>
After the 'a=' I need to add javascript that will return the current url. It can be the full url (example: http://www.codingforums.com/newthrea...=newthread&f=2) or a partial one (example: /newthread.php?do=newthread&f=2).

Can someone help me with an example?