|
JavaScript - Vertical Content Scroller Script Does Not Work With Opera
Similar TutorialsHi 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>
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 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! 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 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! :\ Ok, I've determined that my problem wasn't in the script itself, but in the fact that Opera 10 Beta 2 apparently does not recognize the "onload" attribute of the body tag. Is there a way to work around this?
Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here. Code: function fade(obj, duration, toggle) {
steps = 1000;
elem = document.getElementById(obj);
function fadeIn() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ i +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
}
}
function fadeOut() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
}
}
/* One for Fade in and anything will be fade out*/
if(toggle == 1) {
fadeIn();
}
else {
fadeOut();
}
}
Thanks, Jon W I need to assign a key in the javascript to actually make the javascript work,. I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. Thanks in advance ., Nani I'm using a nice little script which replaces the usual file upload input with whatever image you want and then with JS makes sure that an invisible 'browse' button is underneath the mouse pointer whenever the mouse is moved over the image you want to use. Nice It works on every browser ie7 ie8 ie9 FF safari chrome but not on opera. On Opera the regular file input appears. I've had a good hoke round the 'net and I know there's loads of scripts which do similar things. But either they are too complicated for me to figure out how to use them eg uploadify (bit of a newbie) or they do similar things but just not as well - like making the custom image the same size as the file input would be (there's issues with that too). here's the script I'm using - there's not much to it How come it doesn't work in Opera grrrr... Is there anyway to fix it? This is perfect for what I want apart from not working in Opera Hello Friend, I am using a javascript code installed with Dreamweaver for this page: http://www.alpinelakesair.com/newsite/charters.php When you open the page, (the script element is on the right), the first tab is already open. I would like none of the tabs to be open, so that you have to first click on a tab to open it. Also, when you start clicking on the tabs, a blue focus ring surrounds the active elements. I do not like the blue focus ring. Finally, you may notice that when you click on the tabs there is a slight jumping action that takes place among the tabs, a slight skip before the tab starts sliding up. So my questions a 1. how to not have any tabs open from the start. 2. how to get rid of the blue focus ring. (if you are seeing it) 3. not a big deal, but it would be nice to get rid of that skipping action so the sliding elements moved smoothly. My HTML is: Code: <div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">DHC-3 Turbo Otter Charter Rate</div>
<div class="AccordionPanelContent">
<ul>
<li>Fuel included</li>
<li>Rate based out of Smithers, B.C.</li>
<li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">EADS Wilga 2000 Charter Rate</div>
<div class="AccordionPanelContent">
<ul>
<li>Fuel included</li>
<li>Rate based out of Smithers, B.C.</li>
<li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Cessna 185 Charter Rate</div>
<div class="AccordionPanelContent">
<ul>
<li>Fuel included</li>
<li>Rate based out of Smithers, B.C.</li>
<li>For Rules, Rates, & Charges please see attached <a href="" target="_blank">Domestic Tariff PDF</a></li>
</ul>
</div>
</div>
</div>
My CSS is: Code: .Accordion {
overflow: hidden;
width: 250px;
height: 250px;
}
.AccordionPanel {
margin: 0px;
padding: 0px;
}
.AccordionPanelTab {
background-color: #000;
border: thin solid #363535;
margin: 0px;
margin-bottom: 5px;
padding: 5px 10px;
cursor: pointer;
font-size: 0.9em;
text-transform: uppercase;
-moz-user-select: none;
-khtml-user-select: none;
}
.AccordionPanelContent {
overflow: auto;
margin: 0px;
margin-bottom: 5px;
padding: 5px 10px;
border: thin solid #363535;
}
.AccordionPanelOpen .AccordionPanelTab {
background-color: #7f0202;
margin-bottom: 0;
}
.AccordionPanelTabHover {
background-color: #7f0202;
}
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
}
.AccordionFocused .AccordionPanelTab {
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
}
And my JS is: Code: var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
{
this.element = this.getElement(element);
this.defaultPanel = 0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
this.animator = null;
this.hasFocus = null;
this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
this.useFixedPanelHeights = true;
this.fixedPanelHeight = 0;
Spry.Widget.Accordion.setOptions(this, opts, true);
this.attachBehaviors();
};
Spry.Widget.Accordion.prototype.getElement = function(ele)
{
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
};
Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
};
Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};
Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
if (!optionsObj)
return;
for (var optionName in optionsObj)
{
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
}
};
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
{
if (panel)
this.addClassName(this.getPanelTab(panel), this.hoverClass);
return false;
};
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
{
if (panel)
this.removeClassName(this.getPanelTab(panel), this.hoverClass);
return false;
};
Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
{
var panelA = this.currentPanel;
var panelB;
if (typeof elementOrIndex == "number")
panelB = this.getPanels()[elementOrIndex];
else
panelB = this.getElement(elementOrIndex);
if (!panelB || panelA == panelB)
return null;
var contentA = panelA ? this.getPanelContent(panelA) : null;
var contentB = this.getPanelContent(panelB);
if (!contentB)
return null;
if (this.useFixedPanelHeights && !this.fixedPanelHeight)
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
if (this.enableAnimation)
{
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
}
else
{
if(contentA)
{
contentA.style.display = "none";
contentA.style.height = "0px";
}
contentB.style.display = "block";
contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
}
if(panelA)
{
this.removeClassName(panelA, this.openClass);
this.addClassName(panelA, this.closedClass);
}
this.removeClassName(panelB, this.closedClass);
this.addClassName(panelB, this.openClass);
this.currentPanel = panelB;
return panelB;
};
Spry.Widget.Accordion.prototype.closePanel = function()
{
// The accordion can only ever have one panel open at any
// give time, so this method only closes the current panel.
// If the accordion is in fixed panel heights mode, this
// method does nothing.
if (!this.useFixedPanelHeights && this.currentPanel)
{
var panel = this.currentPanel;
var content = this.getPanelContent(panel);
if (content)
{
if (this.enableAnimation)
{
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
}
else
{
content.style.display = "none";
content.style.height = "0px";
}
}
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
this.currentPanel = null;
}
};
Spry.Widget.Accordion.prototype.openNextPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() + 1);
};
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
return this.openPanel(this.getCurrentPanelIndex() - 1);
};
Spry.Widget.Accordion.prototype.openFirstPanel = function()
{
return this.openPanel(0);
};
Spry.Widget.Accordion.prototype.openLastPanel = function()
{
var panels = this.getPanels();
return this.openPanel(panels[panels.length - 1]);
};
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
{
if (panel != this.currentPanel)
this.openPanel(panel);
else
this.closePanel();
if (this.enableKeyboardNavigation)
this.focus();
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
};
Spry.Widget.Accordion.prototype.onFocus = function(e)
{
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.Accordion.prototype.onBlur = function(e)
{
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
return false;
};
Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;
Spry.Widget.Accordion.prototype.onKeyDown = function(e)
{
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var panels = this.getPanels();
if (!panels || panels.length < 1)
return false;
var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
while (nextPanel)
{
if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
break;
nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
}
if (nextPanel && currentPanel != nextPanel)
this.openPanel(nextPanel);
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
};
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
{
if (!panel)
return;
var tab = this.getPanelTab(panel);
if (tab)
{
var self = this;
Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
}
};
Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
{
try
{
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
}
catch (e) {}
};
Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
{
var content = this.getPanelContent(panel);
if (isDefault)
{
this.currentPanel = panel;
this.removeClassName(panel, this.closedClass);
this.addClassName(panel, this.openClass);
// Attempt to set up the height of the default panel. We don't want to
// do any dynamic panel height calculations here because our accordion
// or one of its parent containers may be display:none.
if (content)
{
if (this.useFixedPanelHeights)
{
// We are in fixed panel height mode and the user passed in
// a panel height for us to use.
if (this.fixedPanelHeight)
content.style.height = this.fixedPanelHeight + "px";
}
else
{
// We are in variable panel height mode, but since we can't
// calculate the panel height here, we just set the height to
// auto so that it expands to show all of its content.
content.style.height = "auto";
}
}
}
else
{
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
if (content)
{
content.style.height = "0px";
content.style.display = "none";
}
}
this.attachPanelHandlers(panel);
};
Spry.Widget.Accordion.prototype.attachBehaviors = function()
{
var panels = this.getPanels();
for (var i = 0; i < panels.length; i++)
this.initPanel(panels[i], i == this.defaultPanel);
// Advanced keyboard navigation requires the tabindex attribute
// on the top-level element.
this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
if (this.enableKeyboardNavigation)
{
var self = this;
Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
}
};
Spry.Widget.Accordion.prototype.getPanels = function()
{
return this.getElementChildren(this.element);
};
Spry.Widget.Accordion.prototype.getCurrentPanel = function()
{
return this.currentPanel;
};
Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
{
var panels = this.getPanels();
for( var i = 0 ; i < panels.length; i++ )
{
if( panel == panels[i] )
return i;
}
return -1;
};
Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
{
return this.getPanelIndex(this.currentPanel);
};
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
{
if (!panel)
return null;
return this.getElementChildren(panel)[0];
};
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
{
if (!panel)
return null;
return this.getElementChildren(panel)[1];
};
Spry.Widget.Accordion.prototype.getElementChildren = function(element)
{
var children = [];
var child = element.firstChild;
while (child)
{
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
}
return children;
};
Spry.Widget.Accordion.prototype.focus = function()
{
if (this.element && this.element.focus)
this.element.focus();
};
Spry.Widget.Accordion.prototype.blur = function()
{
if (this.element && this.element.blur)
this.element.blur();
};
/////////////////////////////////////////////////////
Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
{
this.timer = null;
this.interval = 0;
this.fps = 60;
this.duration = 500;
this.startTime = 0;
this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;
this.onComplete = null;
this.panel = panel;
this.panelToOpen = accordion.getElement(panel);
this.panelData = [];
this.useFixedPanelHeights = accordion.useFixedPanelHeights;
Spry.Widget.Accordion.setOptions(this, opts, true);
this.interval = Math.floor(1000 / this.fps);
// Set up the array of panels we want to animate.
var panels = accordion.getPanels();
for (var i = 0; i < panels.length; i++)
{
var p = panels[i];
var c = accordion.getPanelContent(p);
if (c)
{
var h = c.offsetHeight;
if (h == undefined)
h = 0;
if (p == panel && h == 0)
c.style.display = "block";
if (p == panel || h > 0)
{
var obj = new Object;
obj.panel = p;
obj.content = c;
obj.fromHeight = h;
obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
obj.distance = obj.toHeight - obj.fromHeight;
obj.overflow = c.style.overflow;
this.panelData.push(obj);
c.style.overflow = "hidden";
c.style.height = h + "px";
}
}
}
};
Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
{
var self = this;
this.startTime = (new Date).getTime();
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
{
if (this.timer)
{
clearTimeout(this.timer);
// If we're killing the timer, restore the overflow
// properties on the panels we were animating!
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
obj.content.style.overflow = obj.overflow;
}
}
this.timer = null;
};
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
{
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
var i, obj;
if (elapsedTime >= this.duration)
{
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
if (obj.panel != this.panel)
{
obj.content.style.display = "none";
obj.content.style.height = "0px";
}
obj.content.style.overflow = obj.overflow;
obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
}
if (this.onComplete)
this.onComplete();
return;
}
for (i = 0; i < this.panelData.length; i++)
{
obj = this.panelData[i];
var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
}
var self = this;
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
};
Thank you very much to whomever can help. and by the way I have no knowledge in javascript. Alex Hello, Well I have script that claims that it loads the flash content while it is showing seconds or advertisement. So as I don't know about scripts I have no Idea if it actually do that or not as What I visually see is that it let flash content load once the seconds of disappears. So that's why I want an expert advice on it. And how the seconds of this script works Only if this script actually do what It claims, then I would like to know when does it send alert to load the content (as I would like to put the alert from the start) and how to show it for more or less seconds. Relevant Markup: Live Demo http://files.cryoffalcon.com/MyFootP...%20Loader.html What is the live demo made up of: Code: <div class="colorchooser">
<!--more-->
<div class="displaygame_part">
<center>
<div id="ads" class="ads">
<h1>
ADVERTISEMENT</h1>
<center>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0726197409084548";
/* bloghutsgame */
google_ad_slot = "5324930917";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></center>
To skip it click <a href="javascript:ShowHide();">here</a>
<script type="text/javascript">
window.onload = function() {
startCountDown(8, 1000);
}
function startCountDown(i, p, f) {
// store parameters
var pause = p;
var fn = f;
// make reference to div
var countDownObj = document.getElementById("countDown");
if (countDownObj == null) {
return;
}
countDownObj.count = function(i) {
// write out count
countDownObj.innerHTML = i;
if (i == 0) {
// execute function
fn();
// stop
return;
}
setTimeout(function() {
// repeat
countDownObj.count(i - 1);
},
pause
);
}
// set it going
countDownObj.count(i);
}
</script>
<center>
<img border="0" height="117" width="201" src="@---put the link of the image of fancy pants(its the loader)---@" />
</center>
<div id="countDown" style="display: inline;">
</div>
seconds for the game to load...
</div>
<div id="gamecontent" style="visibility:hidden; display:none">
<div class="gofulldear">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="100%"> <param name="movie" value="http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf">
<param name="quality" value="high">
<param name="allowNetworking" value="internal">
<embed src="http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf" width="100%" height="100%" align="center" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allownetworking="internal"></embed> </object>
</div>
</div>
<script type="text/javascript">
function turn_vis_on(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'inline';
obj = document.getElementById(id);
obj.style.visibility = "visible";
}
}
function turn_vis_off(id){
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
obj = document.getElementById(id);
obj.style.visibility = "hidden";
}
}
function ShowHide()
{
turn_vis_off("ads");
turn_vis_on("gamecontent");
// alert('4sec!');
}
document.getElementById("ads").style.zIndex = 100;
timeoutID = setTimeout(ShowHide, 15000);
</script>
</center></div>
</div>
Note: It is game so there can be sound or music in it./ For any more information requirement please let me know I will edit it, so to make it as relevant as possible^^. Hi I am a new user to JS, and I have a problem he I have some JS code to work on a data set with file name "data.txt" in the header section of an HTML page. Code: <script type="text/javascript" src="data.txt"></script> What I am trying to do is to ask a user to input a different file name, then update the file name in the <script> tag, for example, to Code: <script type="text/javascript" src="new_data.txt"></script> But I don't know how to update the file name. Any help will be appreciated. I am using a content revealing script, it is functioning pefectly except for one small issue. I have the content being shown on mouseover, but I would not like it to display right away - i need a delay on the mouseover. meaning that only if mouseover for a set time (say 3000ms.) it will show. the purpose of this is to not accidently open the content when travelling with the mouse around the page.. the content will show ONLY if the user wants it to open it ie. holding the mouse on there for a few seconds. The script I am using is from featured content slider. contentslider.js I marked areas of interest in the code in RED Code: //** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
//1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
//2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
//3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.
//** July 11th, 08'- Script updated to v 2.4:
//1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
//2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.
//** Dec 20th, 12'- v 2.41: Fixed bug with slider failing to load if the same script is used on different pages with different # of contents
var featuredcontentslider={
//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?
settingcaches: {}, //object to cache "setting" object of each script instance
jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},
ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},
ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},
buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
setting.contentdivs.push(alldivs[i])
alldivs[i].style.display="none" //collapse all content DIVs to begin with
}
}
if (setting.currentpage > setting.contentdivs.length){
setting.currentpage=1
setting.prevpage=1
}
},
buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
pdivlinks[i].style.display="none" //hide this toc link
continue
}
pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
pdivlinks[i][setting.revealtype]=function(){
featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
return false
}
setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
pdivlinks[i].onclick=function(){
featuredcontentslider.turnpage(setting, this.className)
return false
}
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
pdiv[setting.revealtype]=function(){
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
this.autorotate(setting)
}
},
urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},
turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},
setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},
fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},
cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},
css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},
autorotate:function(setting){
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name+"="+value
},
init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}
}
This is the code you embed in the webpage: Code: <h2>Example 1</h2>
<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->
<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>
<div class="contentdiv">
Content 2 Here.
</div>
<div class="contentdiv">
Content 3 Here.
</div>
</div>
<div id="paginate-slider1" class="pagination">
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [false, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
Okay I'm trying to make a script where if I click on a link a div pops up. And if I click on another link another div pop ups up and the old div is closed. The script calls the function from the link in the html and sends an ID. I am confused as to why this doesn't work. Code: function controls(vtiles){/*ID of requested div*/
vtiles.style.ClassName='switchOn'; //change it's classname to something that's displayed
var cap=document.getElementsByTagName('div');// get every div element
for(i=0;i<cap.length;i++) // make some kina loop with the number of divs
{
var store=cap[i].ClassName;
if(store=='switchOn' && cap.[i].id);
{ /*look for div's that are on (switchOn) and check to see if they have and ID*/
var check = cap.[i].id //store their IDs
if(check!=vtiles){//check to see if the id is the one stored in Vtiles
store=='switchP'//change the classname to switchP(off)
}
}
}
}
Code: <div class="content"><a class="Atiles" href="#" onclick="controls(document.getElementById('Ankara'))">Ankara</a></div>
<div id="Ankara" class="switchP">
Code: .switchP{
position:absolute;
display:none;
z-index:-1;
left: 20px;
top:40px;
}
.switchOn{
position:absolute;
display:block;
z-index:100;
left: 20px;
top:40px;
width:200px;
height:200px;
}
hey I'm a bit confused, I really am looking for some javascript tutorials so I don't have to keep asking for help. Hi, Im new to javascript. I want to add a similar function on my blog like on http://techcrunch.com/2011/08/04/gro...tartup-obtiva/ when you press on author. It is a drop down made with javascript. Anybody can help with a similar javascript as I was trying different implementations for the whole night with no luck. Maybe, anybody know a similar javascript online which I could modify? Thanks in advance! If you want preload images on several pages of your site do you need to preload all images of your whole site on each page or only the images of the actual page?
Hello, I'm creating a section for a school website that will list over 9,000 book titles in four different categories (by Title, by Author, by Book Level, and by Points). The content is shown in a div and called and loaded via Ajax. Here is the test page: http://www.gilchrist.leon.k12.fl.us/ar/artest.htmlAfter you click "Go" when the drop down menu is displaying By Book Title, the content loads in the div in a few moments. Here is the content page that appears in the div after you click "Go": http://www.gilchrist.leon.k12.fl.us/...tByAuthor.html If possible, I need a "page loading..." script that will appear only after you click "Go" while the list of books is being loaded. I've been testing different ones I've found online, but can't get any to work. Of course, I'm not even sure if the script would be added to artest.html, 1112-QuistListByTitle.html, or a combination of both... Any help with this would be greatly appreciated. Thank you, Deborah Please help. This works fine in IE but will not work in FireFox: <iframe name="ad" id="rotator" src="about:blank" scrolling="no" framespacing="0" frameborder="0" marginwidth="0" marginheight="0" border="0" style="width:450px; height:300px"></iframe> <script language="JavaScript" type="text/javascript"><!-- // Pages to rotate var pages=new Array('http://www.newquaynet.com/rotating_pages/page1.htm', 'http://www.newquaynet.com/rotating_pages/page2.htm', 'http://www.newquaynet.com/rotating_pages/page3.htm'); // Rotation interval, in miliseconds (1000 = 1 second) var rint=15000; var currentpage=-1; function rotator(){ currentpage++; if(currentpage >= pages.length){ currentpage=0; } document.all.rotate.src=pages[currentpage]; setTimeout('rotator()', rint); } rotator(); //--></script> |
|||||||