|
JavaScript - Java Scrolling Images
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
Similar TutorialsHi 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]);
}
}
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. 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. Does anyone know the Java script that makes the images blend from one to another, (not just switch, but blend) and so that works the same in most browsers. I tried some but they seem to do different things in different browsers... Posted this in the wrong forum earlier. I'm pretty new to Java, so i may be missing something simple, but here is my problem; On this page http://keithfrenchdesigns.com/ under the work area the gallery images are showing no problem, but on the sideways scrolling page http://keithfrenchdesigns.com/sideways on page 4 it's not showing the gallery image like the div is missing(it's not), but if you click on one of the links it will pull up a blank. It also will not scroll past page 4 to page 5(or if you move the gallery area to say, page 2, it won't scroll any further either). Like the script for the gallery area is interfering with the sideways scrolling script. Please ignore the design on the site as it is just there so i can see how everything reads. Any help would be appreciated. Hi there, I was wondering of there is any way to have a browser window scroll down when your mouse reaches the bottom of the page? Any help would be much appreciated, Thanks +++ is it possible to scroll / jump to say, 10px above a div? i tried adding padding, but it doesn't work. also, when I use <a href="#xxxx">, is it possible to prevent the browser from adding #xxxx to the url in the browser? thanks!!! +++ Hello. I am in the process of making a basic game board using javascript. Just a table with a bunch of cells that are blank, soon to be colored. However, what I want to do is create my board and be able to scroll depending on where the mouse cursor is. For example, if it is 100px away from the right side of the screen, then move the board to the right. I am trying to use the information from: here I can't seem to get it to work. I have checked firebug, set and checked breakpoints, but it never moves and I am not sure why. Could anyone please help? Thank you. Heres my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#land {
table-layout: fixed;
width: 2500px;
height: 2500px;
}
#land td {
width: 25px;
height: 25px;
border: 1px solid black;
empty-cells:show;
}
#land tr {
height: 25px;
}
</style>
<script type="text/javascript" src="World/world.js"></script>
<script type="text/javascript" src="mapscrolling.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body id="mainBody">
<div id="mainDiv">
</div>
<script type="text/javascript" >
new CursorDivScroll( 'mainDiv', 20, 20 ); // HERES THE REFERENCE!
var i, j;
body = document.getElementById("mainDiv");
land = document.createElement("table");
land.setAttribute("id", "land");
land.setAttribute("cellspacing", "0");
land.style.border = "1";
for(i = 0; i < 100; ++i)
{
var row = document.createElement("tr");
for(j = 0; j < 100; ++j)
{
var cell = document.createElement("td");
cell.appendChild(document.createElement("div")) // tried &nsbd; but didn't work
row.appendChild(cell);
}
land.appendChild(row);
}
body.appendChild(land);
</script>
</body>
</html>
Hi, I'm looking to create a div which contains a list of news items which can be vertically scrolled through by hovering near the top or the bottom of the div. It will then automatically start scrolling through the content. The nearer to the bottom of the div they position their mouse, the faster the scrolling is. Is this something which is possible, and if so how can I do this? Thanks Curt Hi there, I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help. All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that. What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones. It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them. I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images. I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image. Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time. Hey everyone! I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click. I've uploaded the progress he http://www.aldousmassie.com/newprogress I'm using this code at the moment to scroll through the background: Code: <!-- SCRIPT FOR CHANGING BG ON CLICK -->
<script type="text/javascript">
imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==3) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->
<script type="text/javascript">
imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==5) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick? I'd appreciate any tips that point me in the right direction. Thank you. I need a marquee code that displays images in a continuous vertical cycle.
hey, basically, on my blog i have a "load more" button at the bottom which works great. it uses AJAX to pull in the additional content. now, i want to keep that button, but I also want it to automatically load this content when you scroll to the bottom of the page (endless scrolling - like you see on a lot of sites). so far this is my code. I'm really knew to jquery so I'm sure the problem is obvious to you guys, but please be kind haha. #article_wrapper contains all the blog posts. #loaded contains the new ones that are loaded in with AJAX. #older_posts is the load more button. #load_more is a div around the load more button. thanks! Code: $(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
$('#articles_wrapper').append("<div class='loaded'></div>");
$('div.loaded:last').load(url);
var last = $('div.loaded:last ul');
if (last.is(':empty')) {
$('#older_posts').remove();
}
url="/ajax/content_load.php" + $('#older_posts').attr('href') + " #load_more";
$('#older_posts').load(url);
return false;
}
});
Can anyone tell me Got any javascript that can support the effect of following link http://www.markinns.com/articles/ful...uee_on_twitter but i want vertical text ...this link is for holizontal I dont wnat to use marquee, because got limitation 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'm trying to build a menu that works just like this one: http://deluxe-menu.com/ajax-technology-menu-sample.html The menu automatically scrolls when the menu doesn't fit the browser window. How is a menu that works like this built? Is there any free demos/examples? Thanks in advance! This is my first javascript code ever and I need a bit of help. :[ Also, forgive the goofy styling for the nested divs; I couldn't figure out how to get them to align horizontally without wrapping =\. Essentially, I want the links to gradually scroll the containing div to the specified element's position. I wrote this in a roundabout manner for the sake of learning but I'll clean it up once I can get the function to work which... simply will not. Help? Code: <html>
<head><title></title>
<script type="text/javascript" src="http://kwonnie.comxa.com/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var i = scroll_clipper.pageXOffset;
function moveToGreen() {
while (i<slide2.offsetLeft) {
i++;
scroll_clipper.pageXOffset++;
setTimeout('moveToGreen()',100);
}
}
</script>
</head>
<body>
<a href="javascript:moveToGreen()">Green</a>
<div style="width: 600px; height: 250px; overflow-y: hidden; overflow-x: hidden;" id="scroll_clipper">
<div style="width: 600px; height: 250px; background: red; float: left;" id="slide1"></div>
<div style="width: 600px; height: 250px; background: green; float: left; position: relative; top: -250px; left: 600px;"
id="slide2"></div>
</div>
</body>
</html>
I am creating a testimonials page on a customers site, and I am wanting it to be like a scrolling content. I have the border created, and I want to have text inside the border that will scroll sideways displaying a new one every 10 seconds or so, but having the ability to move between the content. Can anyone tell me what sort of script I should use? I've seen something like it before, but I've had a mind blank. I know it's some kind of Java scripting. Any ideas? Thanks in advance I am looking to have a panoramic image used as the background webpage scroll automatically while the page is open. I do not want the user to have to scroll the image or hover over a div. Is there a way to accomplish this in JS?
Hi evey one I have a problem with javascript . For example I have a link , something like this :<a href="#" title="" class="rating like" onclick="MakeRequestpos()">hi!</a> When I click on it , the page will scroll up and it's bother me . for example , I scroll the page down and When I click on the link , it'll scroll up . How can I solve it ? thanks |
|||||||