|
JavaScript - Using Virtualpaginate With Scroller/slider Thumbnails
Hello,
I would like to take current page (which has virtualpaginate numbers below the images to advance through them) and instead of having numbers, to have thumbnails which will be across the bottom of the page (in the footer div)... I will have about 35-40 thumbnails and I'd like it so that the thumbnails correspond to the image that is displayed. I also would like to have the thumbnails be a "slider" type of script which allows the user to browse through the thumbnails by moving their mouse left-and-right The image in the center DIV (and its accompanying information) should be replaced OnClick, not on hover over the thumbnails. I haven't been able to find an example of this, but I was wondering if someone could point me in the correct direction to achieve this. Here is my current code: Code: <!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>Viviana Santamarina</title>
<style type="text/css"> html, body { background-color: #111; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 50px; padding: 0px; border: 0px; }
p { color: white; font-family: arial; font-size: 18px; font-weight: bold;}
h1 { color: white; font-family: arial; font-size: 24px; font-weight: bold;}
h5 { color: white; font-family: arial; font-size: 16px;}
h6 { color: white; font-family: arial; font-size: 12px; margin-top: 0px;}
a { color: white; font-family: arial; font-size: 14px; font-weight: bold;}
#container { width: 1000px; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; background-color: #111; }
#container #col1 { background: #000; height: 600px; width: 250px; float: left; }
#container #col2outer { width: 750px; float: right; margin: 0; padding: 0; }
#col2outer #col2mid { background: #000; height: 600px; width: 500px; float: left; }
#col2outer #col2side { background: #000; height: 600px; width: 250px; float: right; }
#col2outer #portfolio { background: #000; height: 450px; width: auto; float: center; }
#col2outer #pages { background: #000; height: 50px; width: 250px; float: bottom; margin: 20px; }
#container #footer { float: left; width: 870px; }
</style>
<link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/virtualpaginate.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<!-- is the accordian another script file that's missing from this list? -->
<!-- do the lightbox and accordian scripts need to be loaded in a certain order? -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox(); // Select all links in object with gallery ID
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
</head>
<body>
<div id="container"> <h1>Viviana Santamarina - Paper Knitted Sculptures</h1>
<div id="col1" align="center">
<div id="accordion">
<h2><strong>ABOUT MY WORK </strong></h2>
<div class="pane" style="display:block" align="left">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
<h2><strong>RECENT AWARDS</strong></h2>
<div class="pane" align="left">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
<h2><strong>PREVIOUS EXHIBITIONS</strong></h2>
<div class="pane" align="center">
<p>
Gertrude Herbert
"A Sense of Place 2010"
Augusta, GA
September 17th - November 5th, 2010
http://www.ghia.org/
</p>
</div>
<h2><strong>CONTACT INFORMATION</strong></h2>
<div class="pane" align="center">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
</div>
</div>
<div id="col2outer">
<div id="col2mid" align="center"> <p>PORTFOLIO</p>
<div id="portfolio">
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/EVA.jpg" title="Sitting Nude, 2010"><img src="images/work/EVA.jpg" class="img" border="0" /></a>
<h5>"Sitting Nude" 2010 <p></h5>
<h6>Medium: paper crochet<br>
Dimensions: 24" x 22" x 32"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/Corset.jpg" title="Corset, 2009"><img src="images/work/Corset.jpg" class="img" border="0"/></a>
<h5>"Corset" 2009 <p></h5>
<h6>Medium: paper crochet<br>
Dimensions: 30" x 20" x 3"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/Browsing2.jpg" title="Browsing 2, 2010"> <img src="images/work/Browsing2.jpg" class="img" border="0"/></a>
<h5>"Browsing 2" 2010 <p></h5>
<h6>Medium: paper crochet, book<br>
Dimensions: 8" x 11" x 10"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/ShapingTheVoid.jpg" title="Shaping The Void, 2010"><img src="images/work/ShapingTheVoid.jpg" class="img" border="0"/></a>
<h5>"Shaping The Void" 2009 <p></h5>
<h6>Medium: paper crochet, pencils<br>
Dimensions: 22" x 14" x 14"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<a href="images/work/TandemRowingl.jpg" rel="lightbox"><img src="images/work/TandemRowing.jpg"></a>
</div>
</div>
<!-- Pagination DIV -->
<div id="pages">
<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous"><<</a>   <span class="flatview"></span>  <a href="#" rel="next" class="imglinks">>></a>
</div>
</div>
<!-- Initialize -->
<script type="text/javascript">
var gallery=new virtualpaginate({
piececlass: "virtualpage", //class of container for each piece of content
piececontainer: 'div', //container element type (ie: "div", "p" etc)
pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
persist: false //Remember last viewed page and recall it when user returns within a browser session?
})
gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])
</script>
</div>
<div id="col2side" align="center"> <p>UPCOMING SHOWS</p>
<h6 align="left">
Cherry Creek Art Festival<br>
Denver, CO<br>
July 2nd - 4th, 2011<br>
<a href="http://www.cherryarts.org" rel="nofollow" target="_blank">http://www.cherryarts.org/</a><br><br>
</h6>
</div>
</div>
<div id="footer"> <p>Viviana Santamarina - vivitus@gmail.com - 415-552-3078</p> </div> </div>
</body>
</html>
I'd appreciate any thoughts on how I can have the thumbnails in the footer DIV change the picture in the "portfolio" div just like my virtualpaginate numbers currently do. Thank you in advance!! Similar TutorialsI'm using the Nivo slider (http://nivo.dev7studios.com/) for a banner with different thumbnails for the controls. After several hours of wrestling with the CSS, I was able to make it so each thumbnail could have its own style and hover. Now the JS doesn't work - meaning, the banner doesn't slide when I click any of the thumbnails. Can anyone help me out with this? I'm very much a beginner with JS. Here's my HTML: Code: <div id="slider" class="nivoSlider">
<img src="images/banner-1.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<img src="images/banner-3.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<span class="nivo-controlNav">
<a class="nivo-control smerch"> </a>
<a class="nivo-control gervais"> </a>
<a class="nivo-control karl"> </a>
<a class="nivo-control insects"> </a>
</span>
</div>
Here's my CSS: Code: /*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider {
position:relative;
width:984px;
height:501px;
background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;}
#slider a {
border:0;
display:block;}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;}
.nivo-controlNav a {
display:block;
width:99px;
height:67px;
border:0;
margin-right:3px;
float:left;}
.nivo-controlNav a.active {
background-position:0 -22px;}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;}
a.nivo-prevNav {
left:15px;}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {clear:both;}
#slider .nivo-controlNav {
position:absolute;
bottom:0; /* Put the nav below the slider */
left: 0;
width: 984px;}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
height: 67px;
width: 99px;
position: relative;}
.nivo-control {
cursor:pointer;}
.nivo-controlNav a {position: absolute; bottom: -122px;}
.smerch {right: 38px; background: url(images/mn-thumb-1.png) top left no-repeat;}
.smerch:hover{background: url(images/mn-thumb-1-over.png) top left no-repeat;}
.gervais {right: 134px; background: url(images/mn-thumb-2.png) top left no-repeat;}
.gervais:hover{background: url(images/mn-thumb-2-over.png) top left no-repeat;}
.karl {right: 238px; background: url(images/mn-thumb-3.png) top left no-repeat;}
.karl:hover{background: url(images/mn-thumb-3-over.png) top left no-repeat;}
.insects {right: 342px; background: url(images/mn-thumb-4.png) top left no-repeat;}
.insects:hover{background: url(images/mn-thumb-4-over.png) top left no-repeat;}
Not sure if this is needed, but here's the section of the JS for the controls: Code: //Add Control nav
if(settings.controlNav){
var nivoControl = $('<div class="nivo-controlNav"></div>');
slider.append(nivoControl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if (settings.controlNavThumbsFromRel) {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
}
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
I'm at a loss. Any help would be great. Thanks. Here's a quick visual of the parts of the slider: http://i.imgur.com/tkE2Y.png Hey there! I'm having a bit of a problem with this site I'm workin' on... I am trying to incorporate a website slider (http://tympanus.net/codrops/2010/06/...g-with-jquery/), so when you click the links in my naviagtion, it slides right (horizontally) to a new page, however, with the slider/scroller script in there, the navigation stops working! Here is the link to this page and my code: http://goatsy.me/motoring/ Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Website Horizontal Scrolling with jQuery" />
<meta name="keywords" content="jquery, horizontal, scrolling, scroll, smooth"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>High Style Motoring - Scooters, Pit Bikes, Atv's, Mopeds, Parts and more!</title>
<link rel="stylesheet" href="example/css/website.css" type="text/css" media="screen"/>
<!--[if lte IE 6]>
<style type="text/css">
/* Internet Explorer 6 PNG transparency fix */
#rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-rotatescroll.png", sizingmethod='scale'); }
#rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-thumb.png", sizingmethod='scale'); }
</style>
<![endif]-->
<script type="text/javascript" src="example/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="example/js/jquery.tinycircleslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Awesome Bubble Navigation with jQuery" />
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family: "Trebuchet MS", sans-serif;
background:#fff url(images/bg_scoot1.png) no-repeat top left;
padding:20px;
}
.title{
width:548px;
height:169px;
position:absolute;
top:300px;
left:300px;
background:transparent url(title.png) no-repeat top left;
}
a.back{
background:transparent url(back.png) no-repeat top left;
position:fixed;
width:150px;
height:27px;
outline:none;
bottom:0px;
left:0px;
}
#content{
margin:0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><a href="#"><img src="example/images/scoot_gray.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_red.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_green.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_atv.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_pit.png" /></a></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
<div id="content">
<a class="back" href="#"></a>
<div class="title"></div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Home</h2>
<ul class="nav">
<li><a href="#section1">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Bikes</h2>
<ul>
<li><a href="#scooter">Scooter</a></li>
<li><a href="#moped">Moped</a></li>
<li><a href="#atv">ATV / Pit</a></li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Shop</h2>
<ul>
<li><a href="#">Catalog</a></li>
<li><a href="#">Offers</a></li>
<li><a href="#">Order Now</a></li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Photos</h2>
<ul>
<li><a href="#">Bikes</a></li>
<li><a href="#">Helmets</a></li>
<li><a href="#">Acc.</a></li>
</ul>
</div>
<div class="item fav">
<img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Extra</h2>
<ul>
<li><a href="#">Dream Bike</a></li>
<li><a href="#">FAQ / Info</a></li>
<li><a href="#">Comments</a></li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
</script>
<div class="section black" id="section1">
<h2>ABOUT US</h2>
<p>
HIGH STYLE MOTORING A constant commitment to quality, service, and customer satisfaction.
We are a family owned and operated dealership doing business at our present location since 1987. It is important to note that we are a fully licensed and bonded California new motorcycle dealership (Dealer # 11080) and operating a full service brick and mortar establishment dedicated to serving the needs of the most discriminating customer.
This is important as it sets us far apart from most of the "on-line" businesses that really don't have the proper knowledge or understanding of the products they sell. Here at HIGH STYLE MOTORING we are dedicated to not just the sale, but have a full service repair facility as well as one of the most extensive parts inventories available.
Over the last 23 years we have helped literally thousands of customers find the Scooter, Pit Bike, ATV or vehicle that best fit their style and budget. We will be more than happy to help you as well!
YIPPEE! Huge selection in stock and ready to take home. NATIONWIDE delivery is also available on each unit that we sell and you can rest assured knowing that your new vehicle will be delivered promptly right to your door ANYWHERE in the USA!
It's for these reasons that we sell absolutely more Scooters, Pit Bikes, ATV's and other vehicles than ANYONE in the entire area!
Check us out - we're here all day long saving you big $$$on the product that fits your style.
Retro's, Cruisers, Freeway Scoots, ATV's and the complete line-up of SSR Pit Bikes are all in stock and ready for delivery - RIGHT NOW!
We can also hand deliver your products anywhere in the Orange County or Los Angeles areas. Please give us a call at (562) 945-8361.
We also accept most major credit cards.
Stop by and say 'Hi' and let us help you to start saving money TODAY!
</p>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
/*
if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
</body>
</html>
And whenever I take out this part of the code, the navigation starts working again, but the slider totally doesn't work... it turns into a simple/regular page anchor again! D: (The slider doesn't seem to be working either way): Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> So, any ideas or info would be suuuuper appreciated b/c I've been trying to figure this out and I reallllllly want it to work! I can't seem to figure out what the problem is hurr! :\ I am using a JQuery Slider function in one of my forms that has the folowing code: Code: <script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + "% Clear" );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
});
</script>
And the form looks like: Code: <form method=POST etc...>
<div id="slider"></div>
<span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>
Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again. However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks! Hi I have a javascript scroller on my site which was added automatically by the web design progam Web Page Maker. It works well..... but..... does anybody know how to make the scrolling faster on mousedown. Its painfully slow at the moment. I dont know ANYTHING about javascripting really. heres the code: <div id="g_iFrame1div" style="position:absolute; left:68px; top:273px; z-index:29"> <table border="0" cellpadding="0" cellspacing="0" width=628> <tr><td> <iframe src="iframes/news_latest.htm" name="g_iFrame1" width="606" height="487" src="" scrolling="no" frameborder="0"></iframe> </td><td align="center" valign="middle" width="22"><img src="arrow_up.gif" alt="up" border=0 vspace="5" hspace="3" onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(-3,2)" onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(-1,20)" onMouseOver="bsh_g_iFrame1(-1,20)" onMouseOut="esh_g_iFrame1()"><br> <img src="arrow_down.gif" alt="down" border=0 vspace="5" hspace="3" onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(3,2)" onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(1,20)" onMouseOver="bsh_g_iFrame1(1,20)" onMouseOut="esh_g_iFrame1()"> <script type="text/javascript" language="javascript"> function bsh_g_iFrame1(step,time){hs_g_iFrame1=setInterval("sh_g_iFrame1("+step+")",time)} function esh_g_iFrame1(){clearInterval(hs_g_iFrame1)} function sh_g_iFrame1(step) { scrollx=g_iFrame1.document.body.scrollLeft scrolly=g_iFrame1.document.body.scrollTop scrolly=scrolly+step g_iFrame1.window.scroll(scrollx,scrolly) } </script> thanks Stuey I am using a Theme Tester on my site so normal users can not see the changes being made. If you can help me, please send me a PM & I will give you a temporary login so you can login & see the new site, and the issue I am having. Basically, I am trying to get this http://flowplayer.org/tools/demos/sc.../navigator.htm scroller to work, but it is not happening at all. Not sure what is going on. Please advise. Thanks! I've got a code. I've listed it below. The only question I have which I am sure I'm just overlooking it, but I need to find a way to squeeze this to the top of the screen and to the left. Where can I modify this on this code? The first section is the whole file. Thanks! Edit: I'm trying to remove the awkward gap on top and to the left. I merged the .js file since this will only be a file that is updated with new news. Code: <html>
<head>
<script type="text/javascript">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
/* Update 4/2011 to v1.5 - Adds optional random property. Set it to true to use.
Fixes browser crash from empty crawlers, ad and image blocking software/routines.
Fixes behavior in some IE of breaking script if an image is missing.
Adds alt attributes to images without them to aid in diagnosis of missing/corrupt
images. This may be disabled with the new optional noAddedAlt property set to true.
Internal workings enhanced for greater speed of execution, less memory usage.
*/
///////////////// No Need to Edit - Configuration is Done in the On Page Call(s) /////////////////
function marqueeInit(config){
if(!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}
(function(){
if(!document.createElement) return;
marqueeInit.ar = [];
document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
var c = 0, tTRE = [/^\s*$/, /^\s*/, /\s*$/, /[^\/]+$/],
req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
}, dash, ie = false, oldie = 0, ie5 = false, iever = 0;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = /(-(.))/;
String.prototype.encamel = function(s, m){
s = this;
while((m = dash.exec(s)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
@end @*/
if(!ie5){
dash = /-(.)/g;
function toHump(a, b){return b.toUpperCase();};
String.prototype.encamel = function(){return this.replace(dash, toHump);};
}
if(ie && iever < 8){
marqueeInit.table = [];
window.attachEvent('onload', function(){
marqueeInit.OK = true;
for(var i = 0; i < marqueeInit.table.length; ++i)
marqueeInit.run(marqueeInit.table[i]);
});
}
function intable(el){
while((el = el.parentNode))
if(el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};
marqueeInit.run = function(id){
if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
marqueeInit.table.push(id);
return;
}
if(!document.getElementById(id))
setTimeout(function(){marqueeInit.run(id);}, 300);
else
new Marq(c++, document.getElementById(id));
}
function trimTags(tag){
var r = [], i = 0, e;
while((e = tag.firstChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while((e = tag.lastChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if((e = tag.firstChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if((e = tag.lastChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}
function randthem(tag){
var els = oldie? tag.all : tag.getElementsByTagName('*'), i = els.length - 1, childels = [], newels = [];
for (i; i > -1; --i){
if(els[i].parentNode === tag){
childels.push(els[i]);
newels.push(els[i].cloneNode(true));
}
}
newels.sort(function(){return 0.5 - Math.random();});
i = childels.length - 1;
for (i; i > -1; --i){
tag.replaceChild(newels[i], childels[i]);
}
}
function Marq(c, tag){
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
if(this.mq.random){
randthem(tag);
}
for (p in defaultconfig)
if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
if(!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if(ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [[req1, this.c.style], [this.mq.style, this.c.style]];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if(this.mq.mouse === 'pause'){
this.c.onmouseover = function(){cObj.mq.stopped = true;};
this.c.onmouseout = function(){cObj.mq.stopped = false;};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if(!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for(i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if(ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if(ims.length){
for(ic = 0, i = 0; i < ims.length; ++i){
ims[i].style.display = 'inline';
if(!ims[i].alt && !this.mq.noAddedAlt){
ims[i].alt = (tTRE[3].exec(ims[i].src)) || ('Image #' + [i + 1]);
if(!ims[i].title){ims[i].title = '';}
}
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if(typeof ims[i].complete === 'boolean' && ims[i].complete)
ic++;
else {
ims[i].onload = ims[i].onerror = function(){
if(++ic === ims.length)
cObj.setup(c);
};
}
if(ic === ims.length)
this.setup(c);
}
}
else this.setup(c)
}
Marq.prototype.setup = function(c){
if(this.mq.setup) return;
this.mq.setup = this;
var s, w, cObj = this, exit = 10000;
if(this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if(this.mq.mouse === 'cursor driven'){
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
if(this.mq.moveatleast){
this.mq.inc = this.mq.moveatleast;
if(this.mq.savedirection){
if(this.mq.savedirection === 'reverse'){
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction === 'right'? 'left' : 'right';};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;};
}
} else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
}
else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while(this.c.offsetWidth > this.w - s && --exit){
w = isNaN(this.cw[0])? this.w - s : --this.cw[0];
if(w < 1 || this.w < Math.max(1, s)){break;}
this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
}
this.c.style.visibility = 'visible';
this.runit();
}
Marq.prototype.slowdeath = function(){
var cObj = this;
if(this.mq.inc){
this.mq.inc -= 1;
this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
}
}
Marq.prototype.runit = function(){
var cObj = this, d = this.mq.direction === 'right'? 1 : -1;
if(this.mq.stopped || this.mq.stopMarquee){
setTimeout(function(){cObj.runit();}, 300);
return;
}
if(this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if(d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if(d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
}
Marq.prototype.directspeed = function(e){
e = e || window.event;
if(this.timer) clearTimeout(this.timer);
var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX === 'number'?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2, rb = (w + this.r) / 2;
while((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb? 'left' : 'right';
this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
}
Marq.prototype.contains = function(e){
if(e && e.relatedTarget){var c = e.relatedTarget; if(c === this.c) return true;
while ((c = c.parentNode)) if(c === this.c) return true;}
return false;
}
function resize(){
for(var s, w, m, i = 0; i < marqueeInit.ar.length; ++i){
if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
while(m.c.offsetWidth > m.w - s){
w = isNaN(m.cw[0])? m.w - s : --m.cw[0];
if(w < 1){break;}
m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}
}
if (window.addEventListener)
window.addEventListener('resize', resize, false);
else if (window.attachEvent)
window.attachEvent('onresize', resize);
})();
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
</script>
</head>
<body>
<font color="white" face="arial" size="2" background="#0066CC">
<div class="marquee" id="mycrawler" align="left">
2/21/12 Today is testing the marquee. This will be used for announcements. Stay tuned!!!                        
</div></font>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '1px',
'width': '1000px', //change to 1000 for normal, change to 0 for off
'background': '#0066CC',
'border': '0px solid black'
},
inc: 1, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'false', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: true
});
</script>
</body>
</html>
Hi, does anyone know how to make a very simple jQuery vertical carousel? without having to use the plugin...
Hi All, I am trying to introduce a vertical scroller to my site, I got the code from a tutorial and slightly tweaked the html to meet my needs but now the content doesn't scroll. Would someone be willing to take a quick look and see if they can spot anything? None of this code has been altered! Code: <script type="text/javascript">
$(document).ready(function(){
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
hoverPause:true,
visible:10,
auto:500,
speed:1000
});
});
</script>
This is the HTML and PHP part: Code: <div id="newsticker-demo">
<div class="newsticker-jcarousellite">
<br/>
<?php
$query = mysql_query("SELECT * FROM employers WHERE featured = 'Yes' AND image != '' ORDER BY rand()");
$i=0;
//$query = mysql_query("SELECT * FROM employers WHERE f_emp_active = 'Yes' and image !='' ORDER BY rand()");
echo '<div>';
while ($aqm=mysql_fetch_array($query)){
?>
<div>
<div>
<div class="thumbnail">
<div align="center"><a href="company.php?companyname=<?php echo $string ?>">
<img src="<?=$fullurl?>/thumbnail.php?gd=2&src=employers/logo/big/<?=$aqm[image]?>&maxw=<?=$a18[width]?>" alt="<?=$aqm[companyname]?>" title="<?=$aqm[companyname]?>" class="noborder" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<br/>
<br/>
<?php
if($i==5){
echo '</div><div>';
}
$i++;
}
echo '</div>';
?>
</div>
</div>
Would anyone know why (and the fix) when I place my cursor over the scrolling thumbnails under the main slideshow rotator on my site they "disappear"? http://americanwebmakers.com/demo_college Thanks in advance! I can't seem to find what I need but I know it exists. I trying to find a vertical scroller that will automatically have the text scroll upwards but have an arrow above and arrow below to be able to control the direction of the scrolling text, or a script with no arrows but still allow me to take control by mousing over the text to scroll up or down. Thanks Does anyone have a scroller that goes side to side, to display links for a website? I have a similar thing that goes up and down: www.sjwum.org This one will not adapt to side to side. So who knows of a scroller that moves horizontally and when you click on something it is a link to another page on the website? Thanks I need to make a very simple text scroller (either vertical or horizontal) using JavaScript. Can anyone point me in the right direction? Thank you Hey fellow coders. I've been searching for a script, but I'm coming up empty. The script will display products in a single row full screen left to right. To slide the products there is a pull bar. You can see how the exact script works on http://www.logitech.com/en-us/keyboards/keyboards. Does anybody know of a complete script, or at least one that is close enough to alter. Thanks much.
Is there a way to bounce my image scroller back to the left using object.watch() or something?! at the moment, it reaches the end and stops here is my code from www.dyn-web.com Code: /*************************************************************************
This code is from Dynamic Web Coding at www.dyn-web.com
Copyright 2001-4 by Sharon Paine
See Terms of Use at www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/
/* dw_hoverscroll.js version date: June 2004
mouseover scrolling for dw_scrollObj (in dw_scrollObj.js) */
dw_scrollObj.stopScroll = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].endScroll();
}
// increase speed onmousedown of scroll links
dw_scrollObj.doubleSpeed = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed *= 2;
}
dw_scrollObj.resetSpeed = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed /= 2;
}
// algorithms for time-based scrolling and scrolling onmouseover at any angle adapted from youngpup.net
dw_scrollObj.initScroll = function(wnId, deg, sp) {
if ( dw_scrollObjs[wnId] ) {
var cosine, sine;
if (typeof deg == "string") {
switch (deg) {
case "up" : deg = 90; break;
case "down" : deg = 270; break;
case "left" : deg = 180; break;
case "right" : deg = 0; break;
default:
alert("Direction of scroll in mouseover scroll links should be 'up', 'down', 'left', 'right' or number: 0 to 360.");
}
}
deg = deg % 360;
if (deg % 90 == 0) {
cosine = (deg == 0)? -1: (deg == 180)? 1: 0;
sine = (deg == 90)? 1: (deg == 270)? -1: 0;
} else {
var angle = deg * Math.PI/180;
cosine = -Math.cos(angle); sine = Math.sin(angle);
}
dw_scrollObjs[wnId].fx = cosine / ( Math.abs(cosine) + Math.abs(sine) );
dw_scrollObjs[wnId].fy = sine / ( Math.abs(cosine) + Math.abs(sine) );
dw_scrollObjs[wnId].endX = (deg == 90 || deg == 270)? dw_scrollObjs[wnId].x:
(deg < 90 || deg > 270)? -dw_scrollObjs[wnId].maxX: 0;
dw_scrollObjs[wnId].endY = (deg == 0 || deg == 180)? dw_scrollObjs[wnId].y:
(deg < 180)? 0: -dw_scrollObjs[wnId].maxY;
dw_scrollObjs[wnId].startScroll(sp);
}
}
// speed (optional) to override default speed (set in dw_scrollObj.speed)
dw_scrollObj.prototype.startScroll = function(speed) {
if (!this.ready) return; if (this.timerId) clearInterval(this.timerId);
this.speed = speed || dw_scrollObj.speed;
this.lyr = document.getElementById(this.lyrId);
this.lastTime = ( new Date() ).getTime();
this.on_scroll_start();
this.timerId = setInterval(this.animString + ".scroll()", 10);
}
dw_scrollObj.prototype.scroll = function() {
var now = ( new Date() ).getTime();
var d = (now - this.lastTime)/1000 * this.speed;
if (d > 0) {
var x = this.x + this.fx * d; var y = this.y + this.fy * d;
if (this.fx == 0 || this.fy == 0) { // for horizontal or vertical scrolling
if ( ( this.fx == -1 && x > -this.maxX ) || ( this.fx == 1 && x < 0 ) ||
( this.fy == -1 && y > -this.maxY ) || ( this.fy == 1 && y < 0 ) ) {
this.lastTime = now;
this.shiftTo(this.lyr, x, y);
this.on_scroll(x, y);
} else {
clearInterval(this.timerId); this.timerId = 0;
this.shiftTo(this.lyr, this.endX, this.endY);
this.on_scroll_end(this.endX, this.endY);
}
} else { // for scrolling at an angle (stop when reach end on one axis)
if ( ( this.fx < 0 && x >= -this.maxX && this.fy < 0 && y >= -this.maxY ) ||
( this.fx > 0 && x <= 0 && this.fy > 0 && y <= 0 ) ||
( this.fx < 0 && x >= -this.maxX && this.fy > 0 && y <= 0 ) ||
( this.fx > 0 && x <= 0 && this.fy < 0 && y >= -this.maxY ) ) {
this.lastTime = now;
this.shiftTo(this.lyr, x, y);
this.on_scroll(x, y);
} else {
clearInterval(this.timerId); this.timerId = 0;
this.on_scroll_end(this.x, this.y);
}
}
}
}
dw_scrollObj.prototype.endScroll = function() {
if (!this.ready) return;
if (this.timerId) clearInterval(this.timerId);
this.timerId = 0; this.lyr = null;
}
dw_scrollObj.prototype.on_scroll = function() {}
dw_scrollObj.prototype.on_scroll_start = function() {}
dw_scrollObj.prototype.on_scroll_end = function() {}
Hello, i'm trying to post news on my site. so i was able to reached this http://www.shmtestforums.uphero.com/...ller/test.html but i couldn't get, exactly what i want. i really want is when load the page it should shows only 3 rows then after few seconds(say 2 seconds), the 1st row should disappear and bellow 3 rows should come up (eg. when google_1 row is disappear, google_2 & google_3 & google_4 rows should come up) this rotation should be continuous i tried this many. but no positive result. so please.... please....help me to solve this. this is the problematic java script, Code: <script type="text/javascript">
var scrollspeed=cache=1
var initialdelay=500
function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top="5px"
setTimeout("getdataheight()", initialdelay)
}
function getdataheight(){
thelength=dataobj.offsetHeight
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}
function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}
if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller
</script>
thank you . Hi, can someone please help me out with this? I've tried it a few time but couldn't get the image scroller into the infoWindow! I want to sort of MERGE this code Code: <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
#container { text-align: center; }
#imageBox{ margin: auto; width: 360px; border: 1px #000 solid; overflow: hidden; }
#imageBoxInside { width: 10000px; } #imageBox img { float: left; padding: 0px; margin: 0px; }
#imageBox br { clear: both; }
#controls img { border: 0; }
</style>
<script>
function moveToPrevious(){
new Effect.Move('imageBoxInside', { x: 180, y: 0, transition: Effect.Transitions.sinoidal });
}
function moveToNext(){
new Effect.Move('imageBoxInside', { x: -180, y: 0, transition: Effect.Transitions.sinoidal });
}
</script>
</head>
<body>
<div id="container">
<div id="imageBox">
<div id="imageBoxInside">
<img src="C:/Users/L33508/Desktop/Images/sauce.jpg" />
<img src="C:/Users/L33508/Desktop/Images/fish.jpg" />
<img src="C:/Users/L33508/Desktop/Images/pizza.jpg" />
<img src="C:/Users/L33508/Desktop/Images/noodles.jpg" />
<img src="C:/Users/L33508/Desktop/Images/cover.jpg" />
<img src="C:/Users/L33508/Desktop/Images/hotdog.jpg" />
<br/>
</div>
</div>
<div id="controls">
<a href="javascript:void(0);" onclick="moveToPrevious(); return true;"><img src="C:/Users/L33508/Pictures/left_arrow.jpg"/></a>
<a href="javascript:void(0);" onclick="moveToNext(); return true;"><img src="C:/Users/L33508/Pictures/right_arrow.jpg"/></a>
</div>
<div>
</body>
</html>
into this one shown he Code: <%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master" CodeBehind="PeranakanMain.aspx.vb" Inherits="Peranakan_SG.PeranakanMain"
title="" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
function addSymbol(){
var map=OneMap.map;
if(map.getLayer("symbolLayer")==null){
map.addLayer(gLayer);
//dojo.connect(omap.map.infoWindow, "onShow", setInfoContent);
map.infoWindow.resize(525,252);
map.infoWindow.setFixedAnchor(esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);
}
gLayer.clear();
alert("Do you know where Peranakan food can be found?? Take a look here!!!!");
var stX = "23319.3347409758";
var stY = "28825.7191286444";
var pt= new esri.geometry.Point(stX,stY,map.spatialReference);
//var strImage = "http://www.rw-designer.com/i/download48b.png";
var strImage = "images/museum.png";
var symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25,25);
var attr = {"PlaceName":"Peranakan musem of Singapore","PlaceAddr":"addr"};
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle("Building Name:");
infoTemplate.setContent(getInfoContent);
var graphic = new esri.Graphic(pt,symbol,attr,infoTemplate);
gLayer.add(graphic);
}
function setInfoContent(){
infoWindow.setContent(getInfoContent());
}
function getInfoContent(graphic){
var bc = new dijit.layout.BorderContainer({style: "font-size: 11pt; height: 520px; width:493px; background: #CCFFFF;"});
var c1 = new dijit.layout.ContentPane({
region: "top",
style: "height: 20px width: 100%",
content: "hello Peranakan!! Here is a brief description"
});
bc.addChild(c1);
//make a tab container
var tc = new dijit.layout.TabContainer({
region: "center",
style: "height: 65%; width: 100%; "
}, dojo.create("div"));
//display attribute information
var cp1 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1900 - 1930</font> ",
content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table>"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
title: "<font color= #E4287C><b>1931 - 1960</b></font>",
content: "<table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' rel="nofollow" target='foo'>1970</a><br/><a href='childpage2.htm' rel="nofollow" target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table>"
});
tc.addChild(cp2);
var cp3 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1961 - 1990</b></font> ",
content: "<table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
});
tc.addChild(cp3);
var cp4 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1990 - 2011</b></font> ",
content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table><br/><table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' rel="nofollow" target='foo'>1970</a><br/><a href='childpage2.htm' rel="nofollow" target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table><br/><table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
});
tc.addChild(cp4);
bc.addChild(tc);
return bc.domNode;
}
dojo.addOnLoad(addSymbol);
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="NavigationContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 955px; height: 490px; margin: 0 0 0 0px;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" position=""
style="height: 498px; width: 1004px; margin-left: 63px;" ></div>
</div>
</div>
</asp:Content>
I'm still new & learning, any kind souls willing to help me out? P.S. When I insert the 2 script sources from the first sample into the second, my icon on the map disappears! Any idea why too? Please see URL: http://caspca.org/indexticker.htm The ticker below the navbar works fine in FF and Safari, does not work in IE8 (and mostly likely other IE version as well). In IE, the live page will not even load; will load locally but the ticker doesn't work (remains static). Here is the .js: Code: TICKER_CONTENT = document.getElementById("TICKER").innerHTML;
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 1;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;
ticker_start();
function ticker_start() {
var tickerSupported = false;
TICKER_WIDTH = document.getElementById("TICKER").style.width;
var img = "<img src=ticker_space.gif width="+TICKER_WIDTH+" height=0>";
// Firefox
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
document.getElementById("TICKER").innerHTML = "<TABLE cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'> </SPAN>"+img+"</TD></TR></TABLE>";
tickerSupported = true;
}
// IE
if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
document.getElementById("TICKER").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'></SPAN>"+img+"</DIV>";
tickerSupported = true;
}
if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {
document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth : 0;
document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;
document.getElementById("TICKER").style.display="block";
TICKER_tick();
}
}
function TICKER_tick() {
if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft <= 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth;
if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0;
window.setTimeout("TICKER_tick()", 30);
Any help to fix is greatly appreciated. Thank you. John Hi all, I was following this tutorial for a jquery based scroller but I am having some problems: http://www.webdesignbooth.com/create...carousel-lite/ When it loads the block starts out as I want it then suddenly squeezes down and chops the text? The area in question is 'Featured Employers' http://www.beta.educationvacancies.com/index.php Can anyone advise? many thanks, greens85 Hi Everyone, I am unable to find a JavaScript picture viewer that does what I would like it to do. I have created a wrapper div of specific size for the images to be displayed in. I want the thumbnail images to be horizontally at the top of the div and the "clicked" full-size image to appear within the same div, directly below the row of thumbnails. When a visitor opens the page the first image must be loaded automatically without having to click on the thumbnail. Can anyone point me in a direction please? Anita, Cape Town. |
|||||||