|
JavaScript - How To Code A Scrolling Images Selector
Long story short, I'm a novice webdesigner basically working with the local people, and small businesses. My Javascript abilities are sub-par so I normally try to follow tutorials or examples to implement java for now. Although I digress. To the point... I'm coding a web site for a photographer and need a natural looking picture selecting menu. For example...
X = hidden image not scrolled into view O = image in line of sight X - X - X - X - O - O - O - O - X - X - X - X Now you kinda grasp what I'm attempting to do here.. anyone know of a good tutorial or example showing how to do this? I've seen several auto scrolling menus but that's not what I'm looking for. I just want an intuitive nav bar for pics... WHY IS THIS SO HARD!!!! Thanks for your time in advance. Similar TutorialsHi, the source code on the website below i want to know what do i need to change to get the date to show as dd/mm/yyyy instead of mm/dd/yyyy? http://www.nsftools.com/tips/DatePickerTest.htm thanks for your help I want to add a automatic scrolling images box (thumbnail size) to my website, but stops when someone places their mouse on it. I have uploaded a folder to my server with all the thumb size images in it. Would it be possible to get it so it random picks pictures from the folder? I already have a scrolling images box on my website http://173.83.99.254/index.php which just places models/photographers in the box. But I need another that picks photos from a specified folder. Thanks
Hi, I am looking for some help with adding a caption in a semi transparent box over the main scrolling image in this http://jdhost.ueuo.com/scrolling/index.html I've been trying to hack other bits of javascript I've found on to it but I've had no luck. I would really apperciate any help. Hi everyone! I'm using a jquery image sliding plugin from this site: http://flexidev.co.za/projects/flexislider/ It scrolls smoothly and continuously which is great. But I'm wanting to add a "click to pause" feature to it, so when you click any of the images the whole thing pauses, and when you click again it restarts. I'm not great with javascript though and I can't figure out how to do that, if it's even possible. I'd really appreciate any pointers or tips! Here is the javascript: Code: var speed = 50;
var pic, numImgs, arrLeft, i, totalWidth, n, myInterval;
$(window).load(function(){
pic = $("#slider").children("img");
numImgs = pic.length;
arrLeft = new Array(numImgs);
for (i=0;i<numImgs;i++){
totalWidth=0;
for(n=0;n<i;n++){
totalWidth += $(pic[n]).width();
}
arrLeft[i] = totalWidth;
$(pic[i]).css("left",totalWidth);
}
myInterval = setInterval("flexiScroll()",speed);
$('#imageloader').hide();
$(pic).show();
});
function flexiScroll(){
for (i=0;i<numImgs;i++){
arrLeft[i] -= 1;
if (arrLeft[i] == -($(pic[i]).width())){
totalWidth = 0;
for (n=0;n<numImgs;n++){
if (n!=i){
totalWidth += $(pic[n]).width();
}
}
arrLeft[i] = totalWidth;
}
$(pic[i]).css("left",arrLeft[i]);
}
}
This is what i need to do: I have a single <DIV> </DIV> for rendering dynamic HTML content. it already has a scrollbar in it when it overflows with text. I want to be able to prevent the user from selecting text on the DIV, and at the same time, when they click on the DIV and drag the mouse up or down , the HTML document will be scrolled proportionally to the dragging. i would also like to Hide the Scrollbar (not disable it). any suggestions? hi i have the site xtcservers.co.uk and i have downloaded a script for a horizontal image scrolling box. i am not a very good coder and would appreciate some help. here is the code: Code: //Specify the slider's width (in pixels) var sliderwidth="300px" //Specify the slider's height var sliderheight="150px" //Specify the slider's slide speed (larger is faster 1-10) var slidespeed=1 //configure background color: slidebgcolor="#EAEAEA" //Specify the slider's images var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a href="http://"><img src="images/uploaded/_sfpg_data/thumb/" border=1></a>' //Specify gap between each image (use HTML): var imagegap=" " //Specify pixels gap between each slideshow rotation (use integer): var slideshowgap=9 at the part were you specify the images to use is there a way to use a folder of images insdead of specifying each one for it to scroll trough. also os there a way to center the scroll box if you have a look the box is to the left. thanks lee Hey folks.. Hope you can help, I'm completely new to this and have no knowledge at all when it comes to javascript. Have been using this script on my site for a while. Is there anyway I can add a URL link to the images that are in my selector? When clicked would go to that page on my website. Thanks in advance of any help Nat <script language="JavaScript"> /* Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com) For this script and more, visit http://www.javascriptkit.com */ var delay=10000 //set delay in miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="http://www.anywebsite.com/images/splash1.jpg" randomimages[1]="http://www.anywebsite.com/images/splash2.jpg" randomimages[2]="http://www.anywebsite.com/images/splash3.jpg" randomimages[3]="http://www.anywebsite.com/images/splash4.jpg" randomimages[4]="http://www.anywebsite.com/images/splash5.jpg" var preload=new Array() for (n=0;n<randomimages.length;n++) { preload[n]=new Image() preload[n].src=randomimages[n] } document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">') function rotateimage() { if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script> Can someone please help with this code. The window is supposed to automatically scroll and move but it isn't working. (It was taken from a discontinued book called javascript in 24hrs) The javascript: Quote: var pos=100; function Scroll(){ if (!document.getElementById ) return; obj=document.getElementById("thetext"); pos -=1; if(pos < 0-obj.offsetHeight + 130) return; obj.style.top=pos; window.setTimeout("Scroll();", 30); } //start scrolling when the page loads window.onload=Scroll; the css: Quote: #thewindow{ position:relative; width:180px; height:150px; overflow:hidden; border:2px solid red; } #thetext{ position:absolute; width:170px; left:5px; top:100px; } the html: Quote: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="scroll.css" /> </head> <body> <h1> scrolling window example</h1> <p>This example shows a scrolling window created using javascript and the w3cdom.The red border window is actually a layer that shows a cliped portion of a larger layer"</p> <div id="thewindow"> <div id="thetext"> <p>This is the first paragraph of the scrolling message.The message is created with regular html</p> <p>Entries within the scrolling area can use any html tags.They can contain <a href="#">links</a></p> <p> No limit to the number of paragraphs that you can include here...</p> <ul> <li>For example you could format items using a bulleted list.</li> </ul> <p>The scrolling ends when the last part of tht scrolling text ids on the screen.You've reached the end.</p> </div> </div> </body> </html> Fixed! The thing I have started to realize is if a downloaded tutorial on a specific website function isn't working out so great...then just look for a better one :) This filtering image setup works PERFECTLY: http://www.htmldrive.net/items/show/...ages-Portfolio Original Message: Man I have officially run out of ideas here. I grabbed the code from this tutorial: Demo I tailored it to accommodate larger images in this portfolio page. At first glance it appears to work, but it actually is messed up and I CANT figure out why...especially since there is such little code. :confused: Hey, I'm a javascript newbie and am frankensteining various bits of code I have managed to find on Lightboxes, preloading, and swapping image Basically, what I want to happen is to run the mouse over the thumbnails on the left side of the page and a larger version of that is in the middle, while information on the right changes to match the picture in the middle. The information is working and the thumbnails appear to be working- at least they go white when running the mouse over them. The problem is the center images aren't appearing at all. I think the following is the relevant information. Code: function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_setTextOfLayer(objId,x,newText) { //v9.0
with (document) if (getElementById && ((obj=getElementById(objId))!=null))
with (obj) innerHTML = unescape(newText);
}
Code: <img src="imagetmb.jpg" name="boxd" id="boxd" onmouseover="MM_swapImage('boxd','','whitebox.jpg','','image.jpg',1);MM_setTextOfLayer('info','','Info<br /><br />Ink on Bristol Paper<br/><br />13 x 17 in<br /><br>May 2011<br/>')" onmouseout="MM_swapImage('boxB','','imagetmb.jpg',1)"/>
I think it's because the images in the center don't have a source, only a name, but I'm not sure where I would fit that in. I tried putting it in the second set of code, but it did not work out. Hi everyone. Here is the code I am using to flip an image 3 times (Blank -> X, X-> O and O back to blank) Code: function flipBox(img) {
var tmpname;
if(img.src=="http://www.riddlesforall.com/logic/n.gif") {
img.src = "http://www.riddlesforall.com/logic/x.gif";
tmpname = img.name;
document.mainform.elements[tmpname].value = 1;
document.getElementById(img.name).value = 1;
} else if(img.src=="http://www.riddlesforall.com/logic/x.gif") {
var finaltest = checkDoubles(img.name);
if(finaltest=="false") {
img.src = "http://www.riddlesforall.com/logic/o.gif";
tmpname = img.name;
document.mainform.elements[tmpname].value = 3;
document.getElementById(img.name).value = 3;
} else {
img.src = "http://www.riddlesforall.com/logic/n.gif";
}
} else if(img.src=="http://www.riddlesforall.com/logic/o.gif") {
img.src = "http://www.riddlesforall.com/logic/n.gif";
tmpname = img.name;
document.mainform.elements[tmpname].value = 0;
document.getElementById(img.name).value = 0;
}
showVals();
}
I had it working, previously, and everything was fine, but now, for some odd reason I cannot figure out, it is changing the names of the image files to absurdly long gibberish, and I cannot flip any images at all, clicking does nothing. Here is an example of what it changes the names to: Code: <img src="data:image/gif;base64,R0lGODlhGQAZAIAAAP///wAAACH5BAEAAAAALAAAAAAZABkAAAIXhI+py+0Po5y02ouz3rz7D4biSJamWAAAOw==" height=20 width=20 id=1-0-0 name=A1B1 onclick="flipBox(this);" class=gridbox> There are 3 images - N.gif (blank) X.gif (An X) and O.gif I do not understand why it is changing the names like this? As I said, it was working fine before, and now this. Hi I use dreamweaver to build sites, and so don't really have to do much with the code, however adobe cs5 has removed the navigation bar tool and I am totally lost without it. I know Java script is needed... Could anyone help? If someone has some code ,for a vertical navigation bar with 8 buttons, 3 images for each button, buttonup mouse over and button down (which is of course a link to another page), that I could copy and edit, it would help alot! Ok, I am in a small pickle here. I created a sidebar gadget for work originally with only 4 images that needed to cycle though it. Easy enough script done. Now they have 6 images that need to rotate through. Easy enough again, script done. The issue I have is now I have to re-push this updated html file to all 1000 PC's on my network. Plus every time a change is made I will have to do it again. And we change the images multiple times a month. So what I need help doing if its possible is to modify the html file i am listing below to have a second IF parameter that not only steps the image but also checks to see if the file is even there. This is the spot I need help at. Code: function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
I wanted to add another part to the IF statement like maybe. Code: If (step<10 && file_exists("http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"))
Basically a step that checks to see if I have at that moment a file named gadet pic 1. (I would do or statements for all of the file names) The point is to make this whole thing dynamic, so that I change image 1 on the server and every gadget on every PC looking for image 1 now see the new image. This way I just change the image file name when I want a different image to display. Same thing with the var for the slidelink function. points to a static named html file on my web server and I just change the redirect in the static named html file to go where i want it. I am by NO means a programmer, I am actually a network admin that came up with this idea and I am trying to fumble through it. Thanks in advance! Code: <html>
<head>
<meta hrrp-equiv="Content-Type" content="text/html; charset=Unicode" />
<style type="text/css">
body{
margin: 0px;
width: 405px;
height: 205px;
font-family; Georgia;
}
</style>
<script type="text/javascript">
var image1=new Image()
image1.src="http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"
var image2=new Image()
image2.src="http://www.akronlibrary.org/Gadget/Gadget Pic 2.bmp"
var image3=new Image()
image3.src="http://www.akronlibrary.org/Gadget/Gadget Pic 3.bmp"
var image4=new Image()
image4.src="http://www.akronlibrary.org/Gadget/Gadget Pic 4.bmp"
var image5=new Image()
image5.src="http://www.akronlibrary.org/Gadget/Gadget Pic 5.bmp"
var image6=new Image()
image6.src="http://www.akronlibrary.org/Gadget/Gadget Pic 6.bmp"
var image7=new Image()
image7.src="http://www.akronlibrary.org/Gadget/Gadget Pic 7.bmp"
var image8=new Image()
image8.src="http://www.akronlibrary.org/Gadget/Gadget Pic 8.bmp"
var image9=new Image()
image9.src="http://www.akronlibrary.org/Gadget/Gadget Pic 9.bmp"
var image10=new Image()
image10.src="http://www.akronlibrary.org/Gadget/Gadget Pic 10.bmp"
</script>
</head>
<body>
<a href="javascript:slidelink()"><img title="Akron-Summit County Public Library" name="slide" /></a>
<script type="text/javascript">
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
setTimeout("slideit()",6000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 1 Link.html"
else if (whichimage==2)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 2 Link.html"
else if (whichimage==3)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 3 Link.html"
else if (whichimage==4)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 4 Link.html"
else if (whichimage==5)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 5 Link.html"
else if (whichimage==6)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 6 Link.html"
else if (whichimage==7)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 7 Link.html"
else if (whichimage==8)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 8 Link.html"
else if (whichimage==9)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 9 Link.html"
else if (whichimage==10)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 10 Link.html"
}
</script>
</body>
</html>
Hi i have two images which are part of a rollover button that i want to have paused until the intro animation finishes. I have the javascript code but the rollover images are specified in the css. I just have the id to them in the html. I was wondering if anyone knew how to include the rollover files with the pausing javascript code. the files are profile.gif and profileover.gif. I tried to add the files to the preload part of the javascript but that didn't work. The website is www.creationindex.com/indextest.html thank you
Can anyone tell me what I have done wrong here? I have the following html code Code: <div id='group1'>
<tr class='time'>
<td colspan='3' name='1262815200'></td>
</tr>
<tr>
<td class='timeleft group1' name='1262815200' colspan='3'></td>
</tr>
<tr class='game'>
<td><input type='radio' name='G1' value='NYJ'>NYJ</td>
<td><input type='radio' name='G1' value='BUF'>BUF</td>
<td><select name='G1P' class='points' tabindex = '1'></select></td>
</tr>
</div>
and when I use the selector $('#group1 input) it does not select anything (namely the inputs in this code). But when I use the selector $('div input') it will select them (and more on the page which I don't want). Is anyone able to see what I have done wrong? I've tried everything I can think of in terms of testing, and I have narrowed it down to the selector. Thanks. I have a series of hand-made arrays each of which has many elements, eg Code: var BlobI = new Array("id1","id2","id4",..."id32");
var Blob2 = new Array("id1","id3","id5",.."id31");
and I have a script (with much help, some time back) which makes the elements change style, with the changes happening successively, element by element: Code: function noBlob (arrayA,visibility,current) {
var arrayB=(typeof arrayA == 'string')? arrayA.split(',') : arrayA;
var blob = document.getElementById(arrayB[current]);
blob.style.visibility = visibility;
if (current != arrayB.length - 1) {
current++;
setTimeout(function() {noBlob(arrayB, visibility, current)},100) }}
If I could get rid of all the ids (400+), both in the html and in the arrays, the whole thing would be much lighter. In theory, because of the way the elements in the arrays are arranged, I could use different iterations of the nth-child() selector to round up the elements of each array. What I'm not clear about is this: there are several stand-alone selector engines, eg, Sly and Yass. They look as if they need to be used in conjunction with some more extensive js library, but I just want to combine the arrays the engine would return with my existing script. Is this possible? eg, if using YASS (http://yass.webo.in/), something like: Code: var newBlob1 = _('div.BLOBS':nth-child(1))
var newBlob2 = _('div.BLOBS':nth-child(2))
Has any one experience with either engine? I'm currently setting up a website that will display, for each link in the drop down, an image below the box, and text or, if necessary, an image to the right, describing the item & listing materials & prices. I've tried iframes with a drop down, but because I'm hosted with BraveHost, I end up with 50 ads on the main page, and 50 more in the iframe, so I'd like to avoid that if possible. If you want to see what I'm looking for, go here. http://andicrafts78.bravehost.com/test.html. How can I modify the drop down selector to make it happen?
I have been using some javascript to select stylesheets (dependent upon window sizes) without problems, until IE8. I have stripped the code down to the following which seems to be where it fails in IE8. Code: <link rel="stylesheet" type="text/css" href="../../css-home.css" title="default" /> <link rel="stylesheet" type="text/css" href="../../css-thin.css" title="thin" /> <link rel="stylesheet" type="text/css" href="../../css-medium.css" title="medium" /> <link rel="stylesheet" type="text/css" href="../../css-large.css" title="large" /> <link rel="stylesheet" type="text/css" href="../../css-home.css" title="normal" /> Code: <script type="text/javascript">
<!--
function changeStylesheet(description){
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
if(a.getAttribute("title") == description){a.disabled = false;} // if the title of the css file is the same as the description, don't disable it
else if(a.getAttribute("title") != "default"){a.disabled = true;} // otherwise if the title of the css file is not default, disable it
}
}
function selectLarge(){
changeStylesheet("large");
}
selectLarge();
// -->
</script>
The “normal” stylesheet is the same as “default”. Without this older versions of IE go straight to “large” (without javascript). For these settings, all browsers display the default (or normal?) stylesheet without the script. When the script is run Firefox, Opera and older versions of IE will use the “default” stylesheet combined with the “large” stylesheet. IE8 uses only the “default” and ignores “large”. It doesn’t appear to matter where in the page the script is run. Any suggestions appreciated (it has never worked in Safari, Chrome and older versions of Opera if that helps!). I have been using the following html & have tested it cross-browser with no malfunction Code: <a href="#quicklinks" name="modal">Quick Links</a> <a href="#Login" name="modal">Login</a> js part Code: //select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//using href as id (already defined in CSS)
$(id).fadeIn(2000);
Now a senior guy says that what I am doing with selectors is essentially illegal, I quote him Quote: Another potential problem is your use of the name attribute. When used with "A" tags, the name attribute is equivalent to the ID attribute, meaning that each name on a page should be unique. It's possible that the javascript engine is only setting the onclick() on the first element with the "modal" name. Plz guide me I would appreciate some help, I want to use the Drop Down Image selector II script on a website, to display fabric, as there is a large number of samples, I want to break the list up alaphabetically. Is is possible to use the script more than once on a page, when I tried to do this the script did not work, if it can not be used more than once on a page, has anyone seen a program that could be. Thanks |
|||||||