I am using a simple javascript image insertion on my XHTML page, and I have encountered a problem. The Javascript code fails to execute when the doctype is XHTML on Firefox (works on Opera). However, when I simply rename the file with an HTML extension, the code executes on all browsers. Code:
View 6 RepliesThere are two main things which I am trying to work through:
Drop down menu (bottom of page) - which only works in IE (on pc) right
now, although it should work on all browsers except opera.
Traditionally in a HTML 4.0 Transitional environment.
Div content that scrolls - placed correctly and works in IE and that's
it. Here is an example of the working script on another site
http://www.dyn-web.com/dhtml/scroll/scroll-rel.html . Traditionally in
a Xhml strict.
My goal is to get this page to look as good in Netscape and on the mac
as it already does in IE.
the following line is erroring in an xhtml validator:
var ns6clock=document.getElementById && !document.all
the && is erroring, but I cant work out how to change it eg to the ascci value? Code:
does anyone know of any sites that use (validating) xhtml strict, and also use javascript functions - rollovers etc?
(the strict dtd won't allow you to use the "name" attribute, in images, so I want to find out what the solution is to this problem)
I have a js dropdown menu and js slideshow on the same webpage.
The menu dropdowns work great in FF but not in IE 6. The menus in ie
drop down behind the slide show which I do not want. Does anyone know
how I can fix that? Perhaps an iFrame?
I'm considering in teaching myself some javascript, but before I take the time to read up and experiment, I had a few questions.
Is javascript XHTML 1.0 STRICT Valid?
Is javascript valid for any version of XHTML?
Is javascript easily cross browser compatiable, or will this take a long time to work around?
I'm trying to combine these two scripts to acomplish a combined effect.
None of my variables are duplicates so that's not the problem. I've
been able to identify the line that breaks the first script - however I
don't know how to fix it. Both scripts work great separately. When I
comment out the 1 line in the 2nd script the 1st script works. And when
I leave the comment out the second one works but not the first. Code:
I have the following Javascript code
function Obj()
{
obj.squares = new Array();
}
Obj.prototype.Load= function(xdoc)
{
var goat = "head";
xdoc.ProcessNodes("squares/square", function(node)
{
alert(goat); // <-- this works fine
this.squares.push(
// do processing on node, create a square
);
});
}
Now the xdoc is another object I have, with a method called
ProcessNodes. The only important thing to know about ProcessNodes is
that it does some things, and calls its second argument (which is a
function) successively.
The problem I am running into here is once I get into the callback
function, "this.squares" is returning null ... even though it has been
initialized to an Array. For whatever reason, its like the object loses
scope when I get into the callback function. For all other intents and
purposes however, the callback function has the same scope as the
calling block (i.e. the goat variable is still accessible).
I'm trying to move an image with the following JS function, but it only seems to work when I remove the XHTML doctype from the top of the document.
Here's the javascript:
Code:
I read something about this on another forum and I think it has something to do with the declaration of obj.style.top, but I can't find a solution. I've tried creating a new variable that contains "document.getElementByID(obj)" and then using that variable to change the top of the image, but it still doesn't work.
Basically, I have a div section in my xhtml that I want visible for
print (div {display: block;} in my print css), and visible if somebody
has javascript disabled (therefore also div {display: block;} in my
screen css), but not visible on screen with javascript activated
(i.e., turned off in javascript with div.style.display = "none").
The problem is one of precedence. When displaying the page on screen I
want my non-interactive javascript code to execute after the css rules
have been applied (so I put my javascript within window.onload). But
when a user attempts to print, I'd prefer if the css (for print) were
applied after the javascript. Unfortunately this doesn't seem to be
what happens.
I am a complete novice with Javascript, but am trying to work out how I can get a button to swap to another image when clicked, and each image have a different URL attached. I want to use this to toggle the bgcolor of my page using this script:
Code:
<script type="text/javascript">
<!--
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
[Code]...
I am trying to make a point and click javascript game. Basically what I want is to have one image displayed on screen at the start (room1.jpg). When you click on a door on that image, I have an onclick event to change the image to a new one that shows the door open (room1_a.jpg). What I want is that when you click the now open door, to display the next room in the game. The only solution I can think of is some sort of nested onclick event using several image maps, but I am fairly new to Javascript and I am not sure if that is possible. What it all comes down to is I want to display each incarnation of each room in the game in the same window without having to reload a new window for each room. I hope that makes sense, if not I can try and clarify. Below is the code I have so far. And as you can see all that does is display the open door when you click on the image. I have not done any of the image mapping yet.
[Code]...
I am trying to put together a purse shopping site - I would like to have the various views of the same purse in thumbnails under one image then when the customer clicks on the thumbnail the larger image will go into the viewing area. The general layout is like this page - [URL] So when someone clicks on the smallest image I would like it to replace the other image on the page and the larger image becomes the thumbnail. How is this accomplished?
View 2 Replies View RelatedI'm trying to use javascript to load an image on a webpage when another image is clicked on, just like an image gallery and just like this except I don't need any text: [URL] I copied the example above but when I click on the smaller image to load the larger one it works for a fraction of a second (I can see the image load in the right spot), but then the browser goes to the URL of the image instead (showing it on a blank page).
[Code]....
I'm failing to get a pure CSS way to achieve this, so trying JS. Several small images in a row, each different. Want mouseover to:
1. change each image to different image on mouseover (each image has its own mouseover image version).
2. produce different paragraph of text below row of images on each mouseover.
I can achieve it with mouseover on text links or on an image, but not with the two events, viz mouseover image swap + mouseover text swap. Would also want to be able to style the text.
I have four links that use graphics to create an unvisited and visited state (using CSS). The link actually changes a section of text elsewhere on that page, so the user doesn't leave the page. The clicked, visited graphic reflects what text you are reading. You can then select a different link, and new text reflects the link you clicked on. What goes wrong is that if you click all four links, you eventually get all four visited graphics showing.
What I want is this. You click on the graphic and the graphic changes to visited. You then select a different link and that state goes to visited but the previous link that is visited too, changes back to unvisited. Therefore when you click on any link, that visited state is shown, and all others always reset to unvisited. The results is that the visited graphic reflects the current text on that page.
i'd like to have it so that when stream, playlist, etc... are clicked, the button currently using the #activebutton style changes into #navbutton, and the button clicked changes from #navbutton to #activebutton.
Also, clicking the button will change the z-index of a box containing each particular categories content so that it pops to the front, although i have not tried implementing that part yet. (<-- is there a better way to do that? just wondering).
Anyway, i've been trying to teach myself what to do with the javascript. i can get the activate() function to work if no deactivate() function is defined, but it will only work for one button and then that's it. any ideas?
I have spent my day trying to figure out how I could swap nodes in my HTML page.
Basically I have a table with any given amount of rows.
In each of these rows I have a checkbox.
The user can select any 2 rows with these checkboxes and click on a "swap us!" button to swap them (that is the first row takes the pace of the second and vice versa) - this shall be performed on the client side with JavaScript.
I have seen that the DOM has a method called swapNode() but I cannot get it work property for 2 reasons:
1) It looks **like** it is not portable (NS vs. IE) (accoring to what I read somewhere on the web)
2) I am not a champ. in DOM/JavaScript, but I gave a try in doin' it with the other DOM methods (appendChild() bla bla bla) without success - I am crap
I hope some genius out there is going to be able to provide me with some code! Don't ask for mine, I have tried again and again from scratch so many times that my keyboard could let me down!
I am looking to find a javascript that image swaps 4 button images that are to be used as links.
There will be an unvisited button (color of my choice)
There will be a hover state which Is green.
There will be a visited link button that is purple.
There will be a currently active page button that will be red.
I have a script that works for 3 of the for states.
The script that I have also will not keep the purple, visited state, as standard text based links will when a page has allready been visited.
Does anyone have a script that will work for what I want to do for all states.
I don't know how to build a script of my own, but plan on learning.
Does anyone have a script that will work for what I want to do for all 4 link/swap states that I want incorporated?
capturing just the file name rather than the entire path of the SRC on my input type="image". Basically when I hover over an image, the Default Image should change to the image being hovered on. Here is my code, can't quite get it to work. Sorry I'm very new to JavaScript
<html>
<head>
<script language = "Javascript">
function ChangeDefault(src)
{
//document.frmMain.DefaultImage.src = src <--Doesn't work at all
alert(src) //<---Displays the entire file path, want just file name
[Code]...
Lets say I have two images in a box
<body>
<div id="box">
<img src="image1.jpg" id="image1" width="100" height="100" />
<img src="image2.jpg" id="image2" width="100" height="100" />
</div>
</body>
When I click on Image1 I want Image2 to get replaced with a new image, called Image3. So I tried this code:
[Code]...
But instead of replacing the image on click, from some reason it replaces image2 with image3 from start/load.
I tried a Javascript on my homepage that works fine on Netscape, works
nearlyx normal on Opera but does not work at all on Internet Explorer. Is
there anybody out there who can help? I use a frameset of 3 frames. One of
these Frames has thumbnails with the javascript code for the image-swap -
the big picture should change whenever someone clicks on the corresponding
thumb. Code:
I'm looking for a solution that can be used in a calendar/gig guide
scenario where each day is represented by a dot image. Now this dot must
do the following
1. When the mouse goes over the dot image it swaps to the mouseover dot
2. When the mouse goes out of the dot image it restores back to the
original img
3. When the img is clicked the dot image is swapped with another image
(different to the other 2) that will remain there even when the mouse
goes out of the image
I have a portfolio page which loads a dozen thumbnails and one large image.
A friend helped me code a script (below) which will swap out the large image
(named "imgLarg") when a different thumbnail is clicked. Both the thumbnail
and the enlargement are identically named, one is in /thumbs/ and one is in
/enlargements/ - tricky, huh? ;-) What's the easiest way to make this work
in other browsers as well?
<script language="JavaScript">
function enlarge() {
oSrcElem = event.srcElement;
imgLarge.src = oSrcElem.src.replace(/thumbs/,'images');
}
</script>
Below is the routine I am using that when invoked swaps images for other images:
<script>
function swapImage(swapContName) {
if (swapContName == 'mainImage1') {
[code]....
But one of the images I would like to vanish (using the empty spacer.gif) has a border:
<img id="instructflag" border="1" src="FLAG.gif" width="23" height="15" align="left">
It must have this black border, but when it gets swapped for a blank, I am left with the black square. how to vanish the border along with the graphic?(I have some vague idea that "border" is not used any more, but anyway...).
how to veiw this eval's out put?
function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");
}
<?php
// to change the image size within the web page
function imageResize($width, $height, $target) {
//takes the larger size of the width and height and applies the formula accordingly...
//this is so this script will work dynamically with any size image
[Code]....