[URL]. In the picture I have a picture div and a text div. The picture and text are related to one another. I want it that when you click the right or left arrow the pic and text change together. I dont really care how they change, slide, fade, or simple do a show/hide kind of effect. How to make one div have a slide show when you mouseover to right or left it moves.
View 9 Replies
I just created a slideshow that is working (finally). I want to put a description beside the photos that is styled in the way I want it, but I can't seem to figure this out. For an example of what I want to finished slideshow to resemble, I found this website: [URL]. I like the features area on this website. Here is my code so far:
<html>
<head>
<script type="text/javascript">
// Modified for: [URL]
var ImgPtr = -1;// -1 for first pass only
var BaseDirectory = '[URL]';
ImgArray = [// format: ['imageName','Comments about image']
['pinto-1.jpg','<a class="duh" href="paintorpinto.html">Paint or Pinto?</a>'],
['shedding.jpg','<a class="duh" href="sheddingout.html">Shedding Out Tips</a>'],
['dewormer-1.jpg','<a class="duh" href="sampledchart.html">Sample Deworming Chart</a>']// Note: No comma after last entry
];
var intervalAction;
function ShowSlide(slide_num) {
document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0];
document.getElementById('mypic').alt = ImgArray[slide_num][1];
document.getElementById('Caption').innerHTML = ImgArray[slide_num][1];
}
function slideshow() {
ImgPtr++;
ImgPtr = ImgPtr % ImgArray.length;
// document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr;
ShowSlide(ImgPtr);
}
onload = function() {
slideshow();
intervalAction = setInterval("slideshow()",3000);
}
</script>
</head>
<body>
<div style="width:300;text-align:left;margin-left:auto;margin-right:auto">
<div id="Caption" class="duh"></div>
<img src="[URL]pinto-1.jpg" border="0" alt="Photobucket" id="mypic" name="mypic" alt="" border="0" height="300" width="398">
<br />
</div>
</body>
</html>
I have a requirement in which, I need to capture a loan amount and the amount of down payment for that loan. According to the requirement, the user is going to enter enter the loan amount and then will enter the down payment in either percentage of the loan amount or an actual amount. I have designed a form to capture this information with three text fields, one each for loan amount, down payment in % and down payment in $.
So the user has the option of entering downpayment in $ or in %. If the user enter the down payment in $ then my code has to calculate the equivalent % value and populate the corresponding text field and vice versa. My question here is, what would be the best way to handle this
situation.
Shall i just use the OnChange event of the text field to handle this scenario? If I do that wont I be running into a loop?
The code is working 100%, but the only problem is with the function calling statement. It is working on the first img (picture) i want it to be called on the second picture.
<!DOCTYPE html PUBLIC "-w3cDTD xhtml 1.0 strict EN"
<html xmlns=http:www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = http:www.w3.org/1999/xhtml">
[code]....
I am trying to change a picture in a program but I keeps being a broken picture link.
[Code]...
I've been working on photo gallery that can be seen here: [URL] I would like the title to change according to the picture selected. This works when you click on the thumbnail images. However, it current does not work with the drop-down menu, "back" and "next" buttons, or the automatic slide-show.
[Code]...
i looking for a way to stretch picture in background and put some divs over that picture with links and text. what i find so far don't work in all browsers any one know something like this?
View 5 Replies View RelatedI'd like to know please if there is a Javascript solution for enlarging pictures.
The outcome I am seeking is for the user to click on a thumbnail picture which then links to a bigger picture I dont want to use a HTML hyperlink.
Isn't it possible to place a text at a fixed place on a picture with javascript ?
The text will be AJAX updated...
I'm a beginner and I have the following html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
[Code]...
I would like to place 3 buttons on the page. Each button opens a different XML file loading the right image list into the page-wrap div. (for a jquery slideshow which picks up the images from the divider) How can I change the url: "gallery3.xml" part to a variable and change its value by clicking on the different buttons? E.g: Gallery1 button opens gallery1.xml Gallery2 button opens gallery2.xml etc.
On the page I am designing I have 2 js slideshows. The first one slides images right to left and the second contains the caption for the image and fades in and out. Here is an example of the exact concept of what I'm trying to do: [URL]. The problem I'm having is that the slides will not maintain the same timing and I'm not sure how to create a single user control that controls both slideshows simultaneously.
Here is the JS code:
<script type="text/javascript">
var firstreel=new reelslideshow({
wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
dimensions: [500, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["css/500_300/Dairy plant.jpg"], //["image_path", "optional_link", "optional_target"]
["css/500_300/slider-big.jpg", "[URL]", "_new"],
["css/500_300/Hospital image.jpg"],
["css/500_300/Picture2.jpg"] //<--no trailing comma after very last image element!
], .....
Im not sure my subject decsription gives an exact description of what i am after but i will try and explain my requirements a bit better.I have an header menu there are items in this menu but there are a lot of them and if you try view on a normal 1024 x 760 you have to horizontal scroll to view all the items, but on my monitor 1920 x 1080 it is fine.
I don't want to do it this way since I hate having to scoll both horizontal and vertical. I would like to be able to change the items on this header to become a rollover dropdown menu when they would normally be hidden becuase of the screen width. I have seen this done before I am just unsure about how to implement this.
My application displays a list of checkboxes to the user. Some of the boxes are related. For eg:
List of boxes:
a
b
c
d
Checkboxes a and c are related. If user checks a; c should automatically be checked and vice-versa. Same for de-checking. I need a function to do this.
I'm not sure whether this is a js or css issue, as it's css and js mixed thats causing an issue. ( I have added this to the css forum as well, but I haven't received any thing that really helped ).
Does anyone know why this wont center in FF?
when a user scrolls to the bottom of my page. i found .scroll which just tells me when there is a change to the scroll bar position.
i want to hide widget on pageload then have it pop-up when bottom of article is reached. and if the person scrolls back upm then it will dissapear again.
I am pretty new to JavaScript, so I apologize if this is a stupid mistake. I am using this [URL] code, but trying to have several slideshows on the page. I have set up two to test it, and one works while the other just displays a static image. What is the best way to do this? Do I need to repeat the script code in the head?
View 3 Replies View RelatedI am trying to run three continuous slideshows on the same page. The script I am currently using is written below. Can it be modified so I can run all three slides at once on the same page?
<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<img src="firstcar.gif" name="slide" width="100" height="56" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html>
How can I create a slideshow like the below. [URL]
View 1 Replies View Relatedi have made a program which has a basic div that consists of three
[Code]...
This is related to the pop-up window. Below is the function related to pop-up window.
function openPopUpDetailsMultiple(seqNum ,controllername ) {
if (!popUpDetails||popUpDetails.closed) {
popUpDetails=window.open("GetSCEventAddData?schandle=<!.schandle>&objID=<!.objID>&seqnum="+seqNum+"&controllername="+controllername+,"popUpDetails","toolbar=1,location=0,scrollbars=1,width=600,height=300,resizable=1,left=200,top=200");
}else{
popUpDetails.focus();
popUpDetails.location="GetSCEventAddData?schandle=<!.schandle>&objID=<!.objID>&seqnum=" + seqNum;
} }
The above function is being called in the href link as stated below:
//Draw the event table
document.write("<table border=1 bgcolor=" + contrColor + " cellpadding=3 cellspacing=0 width=750><tr><td width=130 valign=top class=body align=center rowspan=2>" + scEv[i].sceTime + "<br>" + scEv[i].sceDate + "<br>" + scEv[i].sceCntr + "</td><td width=60 valign=top class=body align=center><img src=images/NsaAlarm"+sevIcon+".gif border=0 height=16 width=16 align=middle alt='" + sevText + "'></td><td width=230 valign=top class=body align=center>" + scEv[i].sceCode + "</td><td width=230 valign=top class=body align=center>#" + scEv[i].sceSeq + "</td></tr><tr><td width=620 valign=top class=body colspan=3>" + scEv[i].sceDesc + "<br><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td class=body><a href=javascript:openPopUpCAC('" + scEv[i].sceCAC + "')><img src=images/NsaTools.gif border=0 height=16 width=16 align=middle alt='View corrective actions'>Corrective action code: " + scEv[i].sceCAC + "</a></td><td align=right class=body><a href=javascript:openPopUpDetailsMultiple('"+ scEv[i].sceSeq+"''"+ scEv[i].sceCntr +"')><img src=images/NsaMoreDetails.gif border=0 height=16 width=16 align=middle alt='View more details'>More details</a></td></tr></table></td></tr></table>");
The problem I'm facing now is in this piece of code:
><a href=javascript:openPopUpDetailsMultiple('"+ scEv[i].sceSeq+"''"+ scEv[i].sceCntr +"')><img src=images/NsaMoreDetails.gif border=0 height=16 width=16 align=middle alt='View more details'>More details</a></td></tr></table></td></tr></table>");
I do not know how to send these (scEv[i].sceSeq,scEv[i].sceCntr) arguments. What might be the delimiter for these arguments.
I posted this once, but it disappeared, and I have no notifications that I did anything wrong. I read the rules before posting and wasn't breaking any so I am not sure why it disappeared but here goes again.
I am trying to learn Javascript (particularly OOP) from a series of screencasts by Douglas Crockford. I have developed a theoretical "game" to build to illustrate it to myself better, and learn by example.
I must be misunderstanding how inheritance works, because my code is not producing the results I thought it would. Here is what I have, followed by an explanation of my understanding. $(function()
[Code]...
I want to load data after loading related php page. i used ajax and even jquery.
jquery was not sure this is jquery code:
But this and when i was using ajax it changes data, but unfortunately, the pay now button (pay pal) was not working. curser changes but button don't work...
I am new to Javascript, but am trying to work with a bit of script I found online to create a crossfade slideshow for my page. The problem I am having is that I want to have several slideshows on my page. On it's own, a single slideshow works fine but when I add a second (and do my best to hack the code with my limited knowledge) only one slideshow will work, or sometimes neither. I found the article from this site that explained about event conflict, but the example used looked quite a bit different to mine.
Here is the js file I started with
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so _init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init()
{
if(!d.getElementById || !d.createElement)return; .....
This uses a couple of CSS files and then you just add a div=rotator on the html to add the object and then the images and links within that div.
Random Image Slideshow (I want two!?) :eek:
I have use the code from here: [URL](which works well for me)
how I can get a second other random image to display on the page beside the first? I cant work it out.
It seems I cant run the script twice?
Here's my page: [URL]
I want to use the same Photoslider II code but for three different slideshows on same index page. The problem is one works fine but when I add another one on same page everything gets screwed up. The code is below but how can I make adjustments so each one works independently? Code:
View 1 Replies View RelatedI am having trouble with multiple slideshows. I have two seperate and I am trying to fun them on the same intervals. The second slideshow stops.
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="ciscoflash/01.jpg"
var image2=new Image()
image2.src="ciscoflash/02.jpg"
var image3=new Image()
image3.src="ciscoflash/03.jpg"
var image4=new Image()
image4.src="ciscoflash/04.jpg"
var image5=new Image()
image5.src="ciscoflash/05.jpg"
var image6=new Image() .....
