|
JavaScript - File Explorer & Code Viewer
Hi everyone, I'm new here.
This is my problem: I have a project done in Java that I would like to publish on the web. To do this I need some javascript or php script that allows me to see on one side the various packages of java file and in the other whenever I select a java file to view its contents into another window by highlighting the text with different colors for different methods, variables, and key word. Similar TutorialsGood morning to all and thank you for sharing so much information to the non coding public. While browsing the javascriptkit.com site I came across a wonderful script to help me with pagination on a web page. The directions are simple to understand but one part has me lost. The files contentfader.js and jquery-1.2.2.pack.js are to be downloaded but where do I put them? Here is the page with the script: http://www.javascriptkit.com/script/...ntviewer.shtml I know everyone is busy and my question is basic but I have to start somewhere. Thanks, Hi there i have been looking around the internet for a way to resolve the problem i have, admittedly i may well of read the answer several times but being relatively new to JavaScript i am still unclear on much of the terminology. Well basically my problem is that i have a piece of code which wen tested on my mac i was using Firefox, safari, opera etc. all these worked fine when it came to pc testing with internet explorer i was presented with the following errors..... Error Details: 1) Line:32 Char:16 Error: 'getElementsByTagName(...).0.src' is null or not an object Code:0 URL:http://www.janedelacey.co.uk/html/press.html 2) Line:53 Char:41 Error: Object doesnt support this property or method Code:0 URL:http://www.janedelacey.co.uk/html/press.html The url is a clients webpage i dont think this has any effect on the issue. Here is the code for the page if this helps anyone in helping me resolve the issue! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="../images/favicon.ico">
<link rel="stylesheet" type="text/css" href="../css/layout.css">
<title>
Jane De-Lacey - Press
</title>
<link rel="shortcut icon" href="favicon.ico" >
<meta name="description" content="Jane De Lacey is a freelance lingerie designer and manufacturer using the finest silk to create Bras, Briefs, Camisoles, Slip, Dresses and Sleepmasks. The latest collection is called the 'L.A Collection'. ">
<meta name="keywords" content="Jane De Lacey, Jane DeLacey, Lingerie, 100% Silk, Bra, Knickers, Briefs, Slips, Camisoles, Dresses, Sleepmasks, Underwear, Sheer Silk, Chemise">
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal1 li { filter: alpha(opacity=40); }
#jgal1 li.active, #jgal1 li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
<script type="text/javascript">document.write("<style type='text/css'> #press_gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#press_gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
var gal1 = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('press_gallery')) document.getElementById('press_gallery').id = 'jgal1';
var li = document.getElementById('jgal1').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
var url = li[i].getElementsByTagName('img')[0].src;
var url_array = url.split("/");
var j = url_array.length - 1;
var thumb_path = "../images/thumbs/";
li[i].style.backgroundImage = 'url(' + thumb_path + url_array[j] + ')';
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal1.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal1').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
} this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal1.addEvent(window,'load', function() {
gal1.init();
});
</script>
</head>
<body>
<div id="content">
<div id="navcontainer">
<div id="topbanner">
<a href="home.html"><img src="../images/logo1.gif" border="none" width="380" height="50"alt="Home - Jane DeLacey"/></a>
</div>
<ul id="nav">
<li id="nav-home"><a href="home.html">Home</a></li>
<li id="nav-shop"><a href="shop.html">Collections</a></li>
<li id="nav-press"><a href="press.html">Press</a></li>
<li id="nav-about"><a href="about.html">About Us</a></li>
<li id="nav-contact"><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="product">
<div id="product_graf">
<img src="../images/top_lines.gif" alt="Side Graphic" height="300px">
</div>
<div id="press">
<div id="press_text">
click logo to view image, click image to enlarge
</div>
<div id="press_pics">
<ul id="press_gallery">
<li><a href="../images/press/marieclaire.jpg"><img src="../images/press/marieclaire.jpg"width="475px" height="500px" alt="Marie Claire featuring Victoria Beckham" border="none" ></a></li>
<li><a href="../images/press/vogue1.jpg"<img src="../images/press/vogue1.jpg"width="350px" height="500px" alt="Vogue" border="none"></a></li>
<li><a href="../images/press/elle1.jpg"<img src="../images/press/elle1.jpg"width="350px" height="500px" alt="ELLE" border="none" ></a></li>
<li><a href="../images/press/wwd1.jpg"<img src="../images/press/wwd1.jpg"width="350px" height="500px" alt="Womens Wear Daily" border="none" ></a></li>
<li><a href="../images/press/brides.jpg"<img src="../images/press/brides.jpg" width="350px" height="500px"alt="Brides" border="none" ></a></li>
<li><a href="../images/press/wwd2.jpg"<img src="../images/press/wwd2.jpg" width="350px" height="500px"alt="ELLE" border="none" ></a></li>
<li><a href="../images/press/elle2.jpg"<img src="../images/press/elle2.jpg" width="350px" height="500px"alt="ELLE" border="none" ></a></li>
<li><a href="../images/press/hg.jpg"<img src="../images/press/hg.jpg" width="350px" height="500px"alt="Homes and Gardens" border="none" ></a></li>
<li><a href="../images/press/vogue2.jpg"<img src="../images/press/vogue2.jpg" width="350px" height="500px"alt="Vogue" border="none" ></a></li>
<li><a href="../images/press/wwd3.jpg"<img src="../images/press/wwd3.jpg" width="350px" height="500px"alt="Womens Wear Daily" border="none" ></a></li>
<li><a href="../images/press/elle3.jpg"<img src="../images/press/elle3.jpg" width="350px" height="500px"alt="ELLE" border="none" ></a></li>
<li><a href="../images/press/status1.jpg"<img src="../images/press/status1.jpg" width="350px" height="500px"alt="Status" border="none" ></a></li>
<li><a href="../images/press/elle4.jpg"<img src="../images/press/elle4.jpg"width="500px" height="350px" alt="ELLE" border="none" ></a></li>
<li><a href="../images/press/wwd4.jpg"<img src="../images/press/wwd4.jpg"width="350px" height="500px" alt="Womens Wear Daily" border="none" ></a></li>
<li><a href="../images/press/status2.jpg"<img src="../images/press/status2.jpg" width="350px" height="500px"alt="Status" border="none" ></a></li>
<li><a href="../images/press/fashiondaily.jpg"<img src="../images/press/fashiondaily.jpg" width="500px" height="350px"alt="Fashion Daily" border="none" ></a></li>
<li><a href="../images/press/eve.jpg"<img src="../images/press/eve.jpg" width="350px" height="500px"alt="Eve" border="none" ></a></li>
<li><a href="../images/press/observer.jpg"<img src="../images/press/observer.jpg" width="350px" height="500px"alt="Observer Magazine" border="none" ></a></li>
<li><a href="../images/press/telegraph.jpg"<img src="../images/press/telegraph.jpg" width="350px" height="500px"alt="Telegraph" border="none" ></a></li>
<li><a href="../images/press/financialtimes.jpg"<img src="../images/press/financialtimes.jpg" width="350px" height="500px"alt="Financial Times" border="none" ></a></li>
<li><a href="../images/press/linbuyer.jpg"<img src="../images/press/linbuyer.jpg" width="350px" height="500px"alt="Lingerie Buyer Blog" border="none" ></a></li>
<li><a href="../images/press/juice1.jpg"<img src="../images/press/juice1.jpg" width="350px" height="500px"alt="Juice Brighton Magazine" border="none" ></a></li>
<li><a href="../images/press/ideal.jpg"<img src="../images/press/ideal.jpg" width="350px" height="500px"alt="Ideal" border="none" ></a></li>
<li><a href="../images/press/drapers.jpg"<img src="../images/press/drapers.jpg" width="500px" height="200px"alt="Drapers" border="none" ></a></li>
<li><a href="../images/press/juice2.jpg"<img src="../images/press/juice2.jpg" width="500px" height="350px"alt="Juice Brighton Magazine" border="none" ></a></li>
</ul>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="footer">
<ul id="footer_nav">
<li><a href="terms.html">terms & conditions</a></li>
<li><a href="delivery.html">delivery</a></li>
<li><a href="acknowledge.html">acknowledgments</a></li>
<li><a href="contact.html">contact us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I know most of this code will not be relevant but i thought adding the whole pages code made more sense? Thank you in advance for any help received! Tom I'm using jQuery+drupal and some jQuery plugins. All is ok with Firefox. But in IE's i'm receiving problem like this. Line: 1 Char: 1 Error: object expected URL: http://businessway.am I have included .js files. How to know where is the problem? In which file? Line 1? Which file? If you can please check with this address: http://businessway.am I have a function which allows the number of buttons selected depending on the number selected from the drop down menu. Problem is that this code works in all of the major browsers except for Internet Explorer (No Suprise). For example if user chose the number 3 from the dropdown menu, then user can only select 3 buttons. Why is it not working in Internet explorer and what can be used to make it work in Internet Explorer? Below is javascript functions: Code: function getButtons()
{
document.getElementById("answerA").class="answerBtnsOff";
document.getElementById("answerA").setAttribute("class","answerBtnsOff");
document.getElementById("answerA").setAttribute("className","answerBtnsOff");
document.getElementById("answerB").class="answerBtnsOff";
document.getElementById("answerB").setAttribute("class","answerBtnsOff");
document.getElementById("answerB").setAttribute("className","answerBtnsOff");
document.getElementById("answerC").class="answerBtnsOff";
document.getElementById("answerC").setAttribute("class","answerBtnsOff");
document.getElementById("answerC").setAttribute("className","answerBtnsOff");
document.getElementById("answerD").class="answerBtnsOff";
document.getElementById("answerD").setAttribute("class","answerBtnsOff");
document.getElementById("answerD").setAttribute("className","answerBtnsOff");
document.getElementById("answerE").class="answerBtnsOff";
document.getElementById("answerE").setAttribute("class","answerBtnsOff");
document.getElementById("answerE").setAttribute("className","answerBtnsOff");
currenttotal=0;
}
function btnclick(btn)
{
if(document.getElementById("numberDropId").value=="")
{
alert('You must first select the number of answers you require from the drop down menu');
return false;
}
if (btn.class=="answerBtnsOn")
{
btn.class="answerBtnsOff";
btn.setAttribute("class","answerBtnsOff");
btn.setAttribute("className","answerBtnsOff");
currenttotal--;
return false;
}
if(document.getElementById("numberDropId").value==currenttotal)
{
alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
return false;
}
if (btn.class=="answerBtnsOff")
{
btn.class="answerBtnsOn";
btn.setAttribute("class","answerBtnsOn");
btn.setAttribute("className","answerBtnsOn");
currenttotal++;
return false;
}
}
If you html code then this is below: Code: <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
<td>Question:</td>
<td rowspan="3">
<textarea rows="5" cols="40" name="questionText"></textarea>
</td>
<td>Option Type:</td>
<td>
<select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
</td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>
This is a common issue, however, I haven't found anything ( yet ) that points out a solution that I can find in my code. As usual, this site works with every single browser known to man ...........except for any version of IE. I have tried using IE's devel tools to no avail ....though I'm a complete newb, so that isn't saying much. Code??? Here's the section IE complains about: Code: function display(str)
{
var nodeList = xmlDoc.getElementsByTagName("item");
var cnt = 0;
var list = "<hr />";
for(var i=0; i< nodeList.length; i++)
{
cnt++;
// Get vars from XML
title = nodeList[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
author = nodeList[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;
pubDate = nodeList[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue;
call = nodeList[i].getElementsByTagName("call")[0].childNodes[0].nodeValue;
cover = nodeList[i].getElementsByTagName("cover")[0].childNodes[0].nodeValue;
link = nodeList[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
summary = nodeList[i].getElementsByTagName("summary")[0].childNodes[0].nodeValue;
style = nodeList[i].getElementsByTagName("class")[0].childNodes[0].nodeValue;
page = nodeList[i].getElementsByTagName("page")[0].childNodes[0].nodeValue;
category = nodeList[i].getElementsByTagName("category")[0].childNodes[0].nodeValue;
I opened this with Firebug and I see nothing of interest. Specifically, IE complains about line 86: Code: summary = nodeList[i].getElementsByTagName("summary")[0].childNodes[0].nodeValue;
Thanks for reading ~ Bub **** UPDATE ***** Well ...it looks like I can't have null values in any elements ( in the xml document ). How do you experts satisfy this requirement in an elegant fashion. Since there is no data for certain elements, I'm looking for a reasonable failover solution. Empty quotes? ..... still experimenting. A script produces the xml file from a database so some elements do not have data for certain child elements. **** UPDATE 2 ***** Using the Unicode non-breaking space in the xml file for empty child elements. Works, but if you have a cooler solution, let me know. Thanks! I'm looking for some kind of font veiwer to put on my website where a user enters text in a box, selects the font then the entered text is displayed in the selected font. A bit like the one they use on DaFont.com. I don't know if this is done with javascript or not. Can anyone help a newbie? Hi a few days back a friend of my suggested it would look need to use a javascript screenshot viewer on my website. Now he provided me with the code but now i need to know how I can link to the larger images in a link. my friend didnot have time so im kind of stuck. hope anyone can help me out. This is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
var res_shots = new Array();
var res_ids = new Array();
var sel_screen = 4;
function screens_prev() {
if (sel_screen > 1) {
sel_screen --;
} else {
sel_screen = tot_screens;
}
try {
document.getElementById('screenshot_image').src = res_shots[sel_screen].src;
document.getElementById('screenshot_status').innerHTML = sel_screen + ' / ' + tot_screens + ' Screenshots';
}
catch(e) {
}
}
function screens_next() {
if (sel_screen < tot_screens) {
sel_screen ++;
} else {
sel_screen = 1; }
try {
document.getElementById('screenshot_image').src = res_shots[sel_screen].src;
document.getElementById('screenshot_status').innerHTML = sel_screen + ' / ' + tot_screens + ' Screenshots';
}
catch(e) {
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<table width="300px">
<tr>
<td>
<span>// <b>Screenshots</b></span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<script>
var tot_screens = 7;
res_ids[1] = 239560; res_shots[1] = new Image(); res_shots[1].src = 'screenshot-smal-1.jpg';
res_ids[2] = 239559; res_shots[2] = new Image(); res_shots[2].src = 'screenshot-smal-2.jpg';
res_ids[3] = 239558; res_shots[3] = new Image(); res_shots[3].src = 'screenshot-smal-3.jpg';
res_ids[4] = 239557; res_shots[4] = new Image(); res_shots[4].src = 'screenshot-smal-4.jpg';
res_ids[5] = 239556; res_shots[5] = new Image(); res_shots[5].src = 'screenshot-smal-5.jpg';
res_ids[6] = 239555; res_shots[6] = new Image(); res_shots[6].src = 'screenshot-smal-6.jpg';
res_ids[7] = 239554; res_shots[7] = new Image(); res_shots[7].src = 'screenshot-smal-7.jpg';
</script>
<a href="screenshot-big-4.jpg" id="screenshot_inlarge"><img src="screenshot-smal-4.jpg" id="screenshot_image"></a>
<table>
<tr>
<td>
<a href="javascript:screens_prev();"><img src="prev.gif" border="none"></a>
<a href="javascript:screens_next();"><img src="next.gif" border="none"></a>
</td>
<td>
<span id="screenshot_status">4 / 7 Screenshots</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I am hoping someone can help with this script I found on Javascriptkit.com. Content Viewer: http://www.javascriptkit.com/script/...ntviewer.shtml Basically, the first hidden div to be shown automatically, nor do I want that div to be preselected. As their demo shows: "Page 1" is auto highlighted and the fist div class named "fadecontent" is shown. How can I get around this and have something shown (as a holder, until something else is clicked and shown)??? And also not have anything preselected/highlighted??? Any and ALL Suggestions are very much appreciated. Oh, I kinda figured out how to have something else shown; acting as a cover up. Simply by changing the z-index in the contentfader.js file, and creating an additional div with a higher z-index. However, and of course, the "fadecontent" class remained highlighted automatically, and too, there was is no way to make that layer visible without first clicking on something else. Hope all that made some sort of sense to someone Thanks! Tracy Hello, I have a media page for my band website. I am putting an image gallery on this page. I have a set of images within a div. What I want to achieve, is when any image is clicked, I want that image to 'fade in' over the top of the images - with a larger height and width. Effectively, I want to open the image without having to navigate along with the anchor tag to a separate page. With this, I want the user to be able to close the image by clicking the larger scaled image. When that certain image has faded in above the images I want all the other images to be unclickable until the user has closed the current image. I have a live example at this site: Band - Media Page. I have a simple jquery effect already on the page which i used from watching a tut. I have no idea where to start. I did start by creating this code: Code:
function showImage(that) {
var img = that.src; //sets the var 'img' to the src of the image which was passed in
img = img.substr(img.lastIndexOf('/')+1); //Retrieves the file name, stores in 'img'
return true;
}
But, I'm just not sure where to go after this. Please take no notice of the header and menu as these are mis-aligned and I need to set certain things properly, though this is another matter in itself. Thank you in advance for any help you can give me. Regards, LC. Hi, Hope that someone can help me with a little problem I have. I building a little page that has some photos of the family. Ive created little thumbnails and large versions of each image. What im trying to achieve is that in div a: i have each of the thumbnails and in div b: it displays a large verison on the image thats clicked. Ive seen a few methods when searching using java and ajax etc, but i'm not sure which is the best way to do this and the most simple so that I dont have to create a new page for each image. Thanks for your help in advance. Hi, I've added this JavaScript to my site; http://www.javascriptkit.com/script/script2/backbox/ It's working 100% on Safari, Chrome and Firefox. When I try to run it on Internet Explorer it just doesn't work. I click the image I want to view, a white box comes up with the loading bar, but after 5-10 seconds the loading bar goes and a small white box stays. I've left it for a minute to see if it's downloading any files, but it's not (Tested it on my actual .co.uk site) If anyone could give me a hand I would be very greatful. Thanks guys. John I'm using the BackBox Script for image viewing on my HTML doc. However, the code is good for the use of one thumbnail with images that can be loaded. What if I want more than one thumbnail image using its own set of images? How can I have multiple thumbnails with their own set of large images to view? Does that make since? Any help would be much appreciated! Kenneth Hi I was wondering I really like the image viewer Gamespot uses. example: http://www.gamespot.com/wii/action/s...&tag=thumb%3B1 Anyone know how to make one like that? Thanks for any replies. Hello everyone! I'm using Cut & Paste Plus Size image viewer ( http://www.javascriptkit.com/script/...geviewer.shtml ) , but I noticed some problem. When the large image is loaded initially, it's not always positioned on the center of the page. After that the script works just fine, until the browser is re-started. There is link to my page: http://www.accentironwork.com/yard%20decorations.html Script code is the http://www.accentironwork.com/plusimageviewer.js http://www.accentironwork.com/plusimageviewer.css I hope some body can help me. Thanks in advance! I need help implementing what appears to be a simple javascript : http://www.javascriptkit.com/script/...ivviewer.shtml Quote: Directions: Add the below script to the HEAD section of your page: Code: <script src="DV.js" type="text/javascript"> /*********************************************** * Pagination Combo Box- by Axel Schneider (http://axelschneider.info/) * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more * Please keep this notice intact ***********************************************/ </script> <script type="text/javascript"> //Define your images using arbitrary variables, to be passed in as arguments later down the page: var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">' var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' </script> <script src="DV.js" type="text/javascript"> /*********************************************** * Pagination Combo Box- by Axel Schneider (http://axelschneider.info/) * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more * Please keep this notice intact ***********************************************/ </script> <script type="text/javascript"> //Define your images using arbitrary variables, to be passed in as arguments later down the page: var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">' var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' </script> <script src="DV.js" type="text/javascript"> /*********************************************** * Pagination Combo Box- by Axel Schneider (http://axelschneider.info/) * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more * Please keep this notice intact ***********************************************/ </script> <script type="text/javascript"> //Define your images using arbitrary variables, to be passed in as arguments later down the page: var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">' var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' </script> <script src="DV.js" type="text/javascript"> /*********************************************** * Pagination Combo Box- by Axel Schneider (http://axelschneider.info/) * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more * Please keep this notice intact ***********************************************/ </script> <script type="text/javascript"> //Define your images using arbitrary variables, to be passed in as arguments later down the page: var bigbaby = '<img src="bigbaby.jpg" width="1075" height="717" border="0" alt="">' var pancake = '<img src="food1.jpg" width="300" height="375" border="0" alt="">' </script> You also need to download the below external JavaScript file: DV.js Then, to create a link that pops up an image when clicked on, do the following: Code: <a href="#" onClick="dv.showDV(pancake); return false">pancakes</a> Where pancake is the variable containing the image tag to be shown (see code in your HEAD section. Obviously this works on image links as well. I do not need a text link, I want the image to be displayed on a mouse click over the thumbail. I have tried to incorporate the HTML as follows : Code: <html> <head> <TITLE>Test</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="Description" CONTENT="Test"> /*********************************************** * Pagination Combo Box- by Axel Schneider (h**p://axelschneider.info/) * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more * Please keep this notice intact ***********************************************/ </script> <script type="text/javascript"> //Define your images using arbitrary variables, to be passed in as arguments later down the page: var image = src="Images/SNICTI__Stationery_1_by_caprozo.jpg" width="2133" height="1600" border="0" alt="">' </script> </head> <body bgcolor="#000000" text="#000000"> <body bgcolor="#000000" vlink="#000000" alink="#0000FF" link="#000000"> <font size="3" face="Tahoma"> <div align="center"> <center> <p> <img src="Images/SNICTI__Stationery_1_by_caprozo_small.jpg" width="100" height="100" border="0"></p> </center> </div> </font> <p> </body> </html> I've used the Backbox Image Viewer from http://www.javascriptkit.com/script/script2/backbox/ on this website for over 3 years and this problem just arose with the update of IE to version 9. When you click the link to open the gallery, instead of backbox opening normally, a small all white box appears in it's place. No navigation images or gallery images or anything. You can view the issue here at http://www.joewheelerknifemaker.com and by clicking on "Knives by Joe, Photo Gallery". I know that this happens on multiple computers using IE9, but works perfectly in Firefox, Safari and Chrome from what I can tell. Anyone have any ideas or know what IE changed in this version that could be causing this? Thanks in advance. Overlapping Image Viewer Script http://www.javascriptkit.com/script/...geviewer.shtml It works perfectly. Just as advertised. It currently changes the images with the mouse over and out effect. But I would like to change it so that the visitor must click on the thumbnail image to enlarge it and to click on the enlarged image to send it back to thumbnail size. It would also be helpful to have the enlarged image appear about 25 px below the top of the thumbnail while remaining flush with the left side. Thank you for your time .... viki barefoot I use the tutorial from http://www.javascriptkit.com/script/...geviewer.shtml and create an overlap image viewer. But whenever I use Firefox or IE to open my webpage, the overlap image viewer is not shown on the website. In other words, only the image link hint is shown when my mouse is over the image. I know when i open the page with java scripts, IE or Firefox will usually has a warning and ask the user if you want to run scripts or ActiveX. But the page with overlap image viewer I created will not invoke any pop-up blocker warnings and at least let a user have an option to see my overlap image. what should i add to make the overlap image viewer show in a proper way after opening IE or Firefox? I have followed all the correct steps to the Javascriptkit code for Plus Size Image Viewer: http://www.javascriptkit.com/script/...eviewer.shtml# Everything works fine but the Enlarge Image buttons are not where they should be. They should all appear at the bottom left of each individual image and are floating up. See example he http://www.bannerpen.ca/plastic_glossy.html Im not sure if the problem is the position or the display or none in the plusimageviewer.css script?? [CODE] .enlargecaption{ position: absolute; border: 1px dotted navy; font: normal 11px Arial; } .enlargecaption a{ display:block; background: lightgray; /*bg color of caption*/ padding: 3px; text-decoration: none; color: black; } .enlargecaption a:hover{ background: lightyellow; /*bg color of caption when mouse rolls over it*/ } .enlargebox{ position: absolute; border:1px solid gray; display:none; } .enlargebox .title{ background:gray; color:white; padding: 3px 2px; text-align: right; font:bold 14px Arial; } .enlargebox .title img{ cursorointer; cursor:hand; } [CODE] Hello, I'm hoping someone can help me with a problem. I have downloaded and installed the Cut & Paste BackBox Image Viewer: http://www.javascriptkit.com/script/...ox/index.shtml When I click the image to activate the script, the pop-up displays at the very bottom left of the page. It's also not formatted correctly. For instance, I'm unable to see the Auto and Close buttons, the caption information is at the top and things are just generally out of whack. Everything seems to be in the correct directories. I've tried cutting and pasting the script into a plain document and the same thing happens. I'm working on this locally, so I don't have a live example. Can someone please help. I've been working at this for two days and just about wanna scream. lol Thank you in advance for your response. |
|||||||