|
JavaScript - Animated Information Bar
Hi!
I installed the Animated Information Bar found on http://www.javascriptkit.com/script/.../infobar.shtml Now there is a option to display the bar once per session but this isn't working... Code: infobar.setfrequency('session') //Uncomment this line to set information bar to only display once per browser session!
Anyone has installed this bar and knows why this isn't working? I use IE8 greetings Jardin Holland Similar TutorialsHello This is brilliant and good to work with, there is one issue i have if someone can help please. I have used example 4 bacuase it visually does exactly what i need, however there is one little problem i cant solve. I copied the div and now have 2 collapsible divs next to each other, which nearly do exactly what i need. I have lined up the 2 divs next to each other they both open, but the one on the left pushes the right one out to the right and i don't know how to do that. here is the code thanks the animatedcollapse.js is too long to put but can be found here http://www.dynamicdrive.com/dynamici...edcollapse.htm Code: <script type="text/javascript">
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.ontoggle = function ($, divobj, state) { //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
<div id="mobile_navigation">
<div id="sectionnav">
<a href="#" rel="toggle[dog]" data-openimage="section_active.gif" data-closedimage="section.gif"><img src="collapse.jpg" border="0" /></a>
<div id="dog">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
</div>
<div id="searchnav">
<a href="#" rel="toggle[cat]" data-openimage="search_active.gif" data-closedimage="search.gif"><img src="collapse.jpg" border="0" /></a>
<div id="cat">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
</div>
</div>
I have an animated gif of a door opening on my site. The animated gif is triggered onclick. (It's triggered only when the user clicks on a certain part of the door, hence the image map). This is the current code: <img src="img/door_admin_static.gif" width="229" height=401" alt="admindoor" usemap="#admin" name="animate"> <map name="admin"> <area shape ="rect" coords ="65,165,236,501" onClick="document.images.animate.src='img/door_admin.gif'; return true" href ="admin.html" rel="nofollow" target="_self" alt="admin" /> </map> What is supposed to happen is that after the user clicks, the animation of the door opening runs, and then the user is taken to the page linked to that door (in this case, admin.html). As it is now, the user is taken immediately to the admin.html page, so they never get to see the animation run. I need some kind of code that makes it so that the user is taken to the admin.html only after the animation is complete. Any help would be greatly appreciated!! Hello, i wanna make animated news bar like the one in the top of site alibaba.com, so how can i do that, anybody have any kind of tutorial for any thing like this please ? thanks Hey guys, I'd like to think this is fairly simple but unfortunately my knowldege of jquery is limited to using prebuilt scripts and changing a few variables to get what i need. I created a drop down menu with a slide down/up animation for submenus, which worked out just as I wanted. I ran into troubles though when trying to add a nested menu to the drop down, but with a slide animation going from left to right. I'm sure my explanation isn't very clear, so please take a look http://www.palousehillscomputing.com...rop/index.html The nested submenu I am speaking of should only open when hovering occurs on the 'Item 01' link, but as you can see it also opens when hovering over the buyers link. Secondly, my attempt to slide from left to right on this ul is not working. It seems to be sliding down even though this was not defined in the code. I've tried playing around with it for a while now and can't seem to figure this out so I'd appreciate if someone pointed me in the right direction. Thanks Hi I am trying to include an animated banner on my website but it wont work is there anyone out there who can look at my code and tell me where I am going wrong? Code:
<head>
<title>Online movie store</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="JavaScript" src="mylibrary.js">
</script>
<script type="text/javascript" language="JavaScript">
<!--
var myproducts = new Array("sherlockholmes","anchorman","weweresoldiers","starshiproopers","homealone","gamer","residentevil");
var itemqty = 0;
function showCookies(){
for (i=0;i<myproducts.length;i++){
var qtyWanted = GetCookie(myproducts[i]);
itemqty = qtyWanted ? qtyWanted : "0";
document.dvdform[myproducts[i]+"qty"].value = itemqty;
}
}
function addToCart(dvd){
itemqty = document.dvdform[dvd + "qty"].value;
itemqty = parseInt(itemqty);
SetCookie(dvd,itemqty);
var feedback = "An order for " + itemqty + " dvd(s) of ";
feedback += dvd.toUpperCase();
feedback += " has been added to your shopping cart.";
feedback += " Please click 'Check Out' when finished."
alert(feedback);
}
function checkOut(){
window.location.href = "return.html";
}
var myAds = new Array();
myAds[1] = new Image();
myAds[2] = new Image();
myAds[3] = new Image();
myAds[4] = new Image();
myAds[1].src = "images/sh.jpg";
myAds[2].src = "images/am.jpg";
myAds[3].src = "images/sold.jpg";
myAds[4].src = "images/star.jpg";
/* Callout: The timings represent the number of milliseconds delay between the images.*/
var myTimings = new Array();
myTimings[1] = 3000;
myTimings[2] = 1500;
myTimings[3] = 1500;
myTimings[4] = 1500;
var mySites = new Array();
mySites[1] = "sh.html";
mySites[2] = "am.html";
mySites[3] = "sold.html";
mySites[4] = "star.html";
var adnumber = 0;
var totalads = myAds.length - 1;
var timerID = "";
function startBanner(){
adnumber = 0;
showAd();
}
function showAd(){
if (document.images){
/*Callout: This condition ensures that each image loads
completely before the next image appears in the sequence. */
if (document.myBanner.complete){
adnumber++;
(adnumber > totalads) ? adnumber=1 : adnumber=adnumber;
document.myBanner.src = myAds[adnumber].src;
}
timerID = setTimeout("showAd()",myTimings[adnumber]);
}
}
function goSite(){
clearTimeout(timerID);
window.location.href = mySites[adnumber];
}
//-->
</script>
</head>
<body onload="showCookies(); startBanner();">
<form name="dvdform">
<div id="wrapper">
<div id="inner">
<div id="header">
<h1><img src="images/logo.png" width="519" height="63" alt="Online Movie Store" /></h1>
<div id="nav">
<a href="account.html">your account</a> | <a href="cart.html">view cart</a>
</div><!-- end nav -->
<img src="images/movie.png" width="744" height="198" alt="Banner" /></a>
</div><!-- end header -->
<dl id="browse">
<dt>We Have All Your Favourite Movies</dt>
<div align="CENTER">
<a href="sh.html" onclick=
"goSite();return false;"><img src = "images/sh.jpg"
name="myBanner" width="180" height="400" border="0" alt="Sherlock Holmes"></a></div>
</dl>
<div id="body">
<div class="inner">
<div class="leftbox">
<h3>Sherlock Holmes (2009)</h3>
<img src="images/sh.jpg" width="80" height="100" alt="sherlock holmes" class="left" />
<p>Detective Sherlock Holmes and his stalwart partner Watson engage in a battle of wits and brawn with a nemesis whose plot is a threat
to all of England.</p>
<input type="TEXT" name="sherlockholmesqty" size="5" value="0"><br>
<p><b>Price:</b> �3.00 per night</p>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('sherlockholmes');">
</p>
<div class="clear"></div>
</div><!-- end .leftbox -->
<div class="rightbox">
<h3>Anchorman: The legend of Ron Burgundy (2004)</h3>
<img src="images/am.jpg" width="80" height="100" alt="Anchorman" class="left" />
<p>Ron Burgundy is San Diego's top rated newsman in the male dominated broadcasting of the 1970's, but that's all about to change when a new
female employee with ambition to burn arrives in his office.</p>
<input type="TEXT" name="anchormanqty" size="5" value="0"><br>
<p><b>Price:</b> �3.00 per night</p>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('anchorman');"></p>
<div class="clear"></div>
</div><!-- end .rightbox -->
<div class="clear br"></div>
<div class="leftbox">
<h3>We Were Soldiers (2002)</h3>
<img src="images/sold.jpg" width="80" height="100" alt="we were soldiers" class="left" />
<p>The story of the first major battle of the American phase of the Vietnam War and the soldiers on both sides that fought it.</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="weweresoldiersqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('weweresoldiers');">
</p>
<div class="clear"></div>
</div><!-- end .leftbox -->
<div class="rightbox">
<h3>Starship Troopers (1997)</h3>
<img src="images/star.jpg" width="80" height="100" alt="Starship troopers" class="left" />
<p>Humans of a fascistic, militaristic future do battle with giant alien bugs in a fight for survival.</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="starshiptroopersqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('starshiptroopers');"></p>
<div class="clear"></div>
</div><!-- end .rightbox -->
<div class="clear br"></div>
<div class="leftbox">
<h3>Home Alone (1990)</h3>
<img src="images/homealone.jpg" width="80" height="100" alt="Home Alone" class="left" />
<p>An 8-year-old boy, who is accidentally left behind while his family flies to France for Christmas, has to defend his home against idiotic burglars.</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="homealoneqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('homealone');">
</p>
<div class="clear"></div>
</div><!-- end .leftbox -->
<div class="rightbox">
<h3>Gamer (2009)</h3>
<img src="images/gamer.jpg" width="80" height="100" alt="Gamer" class="left" />
<p>In a future mind-controlling game, death row convicts are forced to battle in a 'doom'-type environment. Convict Kable, controlled by Simon,
a skilled teenage gamer, must survive 30 sessions in order to be set free. Or won't he?</p>
<p><b>Price:</b> �3.00 per night</p>
<input type="TEXT" name="gamerqty" size="5" value="0"><br>
<p class="readmore"><input type="button" value="Add to Cart" onclick="addToCart('gamer');">
</p>
<div class="clear"></div>
</div><!-- end .rightbox -->
<div class="clear"></div>
</div><!-- end .inner -->
</div><!-- end body -->
<div class="clear"></div>
<div id="footer">
<div id="footnav">
<a href="account.html">Your Account</a> | <a href="cart.html">View Cart</a>
</div><!-- end footnav -->
</div><!-- end footer -->
</div><!-- end inner -->
</div><!-- end wrapper -->
</form>
</body>
</html>
I think the problem is that I have 2 onload functions in the body tag *<body onload="showCookies(); startBanner();">* does anyone know how I can fix this? Also when I put the Javascript into external files they won't work! but when I included the show cookies file in the html it works does anyone know where I am going wrong? Hi there, I just recently took over a site that has some java code on it I'm unfamiliar with. If you go to smalltowngossipmusic.com, you'll see what this code does. Go to the pages "Sounds" or "Travel", and once your mouse leaves the main image at the top of the page, you should see those pages shrink. This is some code that was implemented on the site (which is wordpress) in the header.php template. Here is the code: Code: <script type="text/javascript">
/* <![CDATA[ */
var $ = jQuery.noConflict();
$(document).ready(function () {
headerImage();
});
var speed = 500;
var origMT = 0, origHeight = '120px';
function expandHeader(obj) {
$('.headerImage').animate({height: '436px'},speed);
$('.headerImage img').animate({'margin-top': '-2px'},speed);
}
function shrinkHeader(obj) {
$('.headerImage').stop().animate({'height': origHeight},speed);
$('.headerImage img').stop().animate({'margin-top': origMT},speed);
}
function headerImage() {
origMT = $('.headerImage img').css('margin-top');
origHeight = $('.headerImage').css('height');
$('.headerImage img').css('margin-top','0');
$('.headerImage').css('height','436px');
setTimeout(shrinkHeader,speed*2);
$('.headerImage').hover(expandHeader, shrinkHeader);
}
/* ]]> */
</script>
If you look at the page source for each page, you'll see that there is nothing out of whack (at least, not that I can find). However, for some reason, this shrinking script only works on the two pages I mentioned - on every other page, it either doesn't work at all, or it only works about half-way. I have made sure the page.php and header.php templates both have accurate picture information in them, and can not find anything wrong anywhere. Is there any advice anyone here can give me on how to fix this? I've been doing html and css for awhile, but am relatively new to javascript and php, so am a bit out of my element on this. I'm willing to post any more code, snippets, whatever needed, just let me know what you need if you think you can help. Thanks, Brandon I am trying to do what I thought was a very simple animated menu. I have a heading at the top of a website - which is just a png. I have a menu that is simply a div with a few options on it arranged horizontally. There's no submenus, it's just a very simple horizontal list. All I am trying to do is to hide the menu and then when you mouseover the heading, it will drop down. When you mouseout, it will move back up. It would be great if it faded in as it moved down too. Am sure it's probably very simple, but I've looked all over Google and I can't find a simple solution that doesn't do X, Y and Z that I don't want or need in this project. I just need a very simple script that I stand half a hope of understanding! The 2 sites below are animated scrolling pages which I know how to do, What I am looking for is how do they make the effect like the pages are sliding independent "like an overlaid effect" of each other If anyone can show me how they get that effect or if there are any demo or examples to help me figure it out http://www.sketchtravel.com/ http://www.foofighters.com/us/discography thanks for your help -rob Hi, I searched the web for a button that can be animated, as well as dynamic. but I couldn't find one, so I decided to try my hand at creating one. My method is similar to a post made by Bram2: http://codingforums.com/showthread.php?t=153326, however, I have found my code to be unreliable and it doesn't apply only to the area where the table is, instead of spreading across the screen. The reason for trying to create a button this way is because I'm lazy, I don't want to create a new button in a graphics editor, spending hours trying to make it uniform with the rest of the buttons on the page, every time I want a new button. Doing it this way will also enable to have buttons with mulitple lines of text. I am fairly new to javascript, so I am wondering if anyone can give me a hand making it more reliable or pointing me to a script that has already been created. I put the button Here instead of filling the post with code. Please look at it before telling me it can be done with the <button> tag, because I tried before posting here. thanks, grayatrox Edit:I have managed to get the code to do what I wanted it to do, and more efficently too. Old code is commented out in the orginal webpage. This is a working example on how to impliment the buttons. javascript: Code: /*
Notes:
- Each button MUST have a unique name.
- You may need to create a secondary function that the button can activate like I did with the go(url) function below.
- Email me (grayatrox) at 238atrox@gmail.com for bugs, or to suggest improvements.
- Yes I know tables within tables is bad, if you read through my code carefully you will see where I am talking about.
*/
function loadButton() { //preload the buttons.
image1 = new Image();
image1.src = "images/button_up_L.png"; //button up left
image2 = new Image();
image2.src = "images/button_up_C.png"; //button up centre
image3 = new Image();
image3.src = "images/button_up_R.png"; //button up right
image4 = new Image();
image4.src = "images/button_down_L.png"; //button down left
image5 = new Image();
image5.src = "images/button_down_C.png"; //button down centre
image6 = new Image();
image6.src = "images/button_down_R.png"; //button down right
}
function createButton(buttonName, buttonText, buttonAction, id) { // create the code for a button
output= "<table border='0' cellpadding='0' cellspacing='0' id="+buttonName+">";
output=output+"<tr name="+buttonName+" onclick=\""+buttonAction+"\" onmouseover=\"changeButton('down', '"+buttonName+"')\" onmouseout=\"changeButton('up', '"+buttonName+"')\">";
output=output+"<td align='right'><img id='"+buttonName+"_leftImage' src='images/button_up_L.png'/></td>";
output=output+"<td id='"+buttonName+"_middleImage' align='middle' background='images/button_up_C.png'/>"+buttonText+"</td>";
output=output+"<td align='left'><img id='"+buttonName+"_rightImage' src='images/button_up_R.png'/></td>";
output=output+"</tr>";
output=output+"</table>";
return output;
}
function writeButton(buttonName, buttonText, buttonAction) { // write button immediatly below where function has been called
document.write(createButton(buttonName, buttonText, buttonAction));
}
function writeButtonInId(buttonName, buttonText, buttonAction, id) { // write the button in an id
document.getElementById(id).innerHTML=createButton(buttonName, buttonText, buttonAction);
}
function changeButton(action, name) { // button animation
if (action== "up") {
document.getElementById(name+'_leftImage').src="images/button_up_L.png";
document.getElementById(name+'_middleImage').style.backgroundImage ="url(images/button_up_C.png)";
document.getElementById(name+'_rightImage').src="images/button_up_R.png";
} else if (action== "down") {
document.getElementById(name+'_leftImage').src="images/button_down_L.png";
document.getElementById(name+'_middleImage').style.backgroundImage ="url(images/button_down_C.png)";
document.getElementById(name+'_rightImage').src="images/button_down_R.png";
}
}
function go(url) { // written becuase there were too many ' and ". You can do this for any javascript function (I hope)
document.location=url;
}
Does anyone have an explanation for why animated .gifs might not animate in FF, Chrome, etc.? Only IE does it right for me. I suspect it might have something to do with tables squeezing the graphic (if the .gif is inside a table with a 100% width cell... but even giving the cell with the .gif a width doesn't seem to help.) Is it true? I realise tables are not best used for this purpose, but did this also happen in the good old tables days? Hi there. I'm relatively new to coding in javascript, so I'm hoping that some kind souls could help me out! I'm trying to make an animated image height changer (example: changing an image's height from 50px to 500px). I'm working on a new web site using HTML5 and want to add some Flash-like animation to my page using javascript and <canvas>. The animation would only need to "play" one time once the web page has loaded. No looping is required and no user interaction (ie mouseovers, etc) is needed. Any help would be greatly appreciated. If anyone knows of similar examples online please send me a link. If you're interested in helping, please let me know if more information is needed. Thanks. I'm using some free javascript for my website and I'm trying to edit it slightly to behave the way I want on my site. Right now it works fine apart from one thing... It remembers the last active div that was open... then when you visit the site again or refresh the page... that div stays open and doesn't close when toggling the other animated divs like it is supposed to. How would I remove the last active div function or get it to close again when toggling other animated divs.. Thanks so much if you can help Here is the site: www.gjoob.terryarchonship.com here is where the last active div java is Code: showhide:function(divid, action){
var $divref=this.divholders[divid].$divref //reference collapsible DIV
if (this.divholders[divid] && $divref.length==1){ //if DIV exists
var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
this.slideengine(divid, 'show')
targetgroup.lastactivedivid=divid //remember last active DIV
}
else{
this.slideengine(divid, action)
}
}
}
here is the entire javascript: Code: var animatedcollapse={
divholders: {}, //structu {div.id, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structu {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structu {lastactivediv.id}
preloadimages: [],
show:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "show")
}
else
this.showhide(divids, "show")
},
hide:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "hide")
}
else
this.showhide(divids, "hide")
},
toggle:function(divid){ //public method
if (typeof divid=="object")
divid=divid[0]
this.showhide(divid, "toggle")
},
addDiv:function(divid, attrstring){ //public function
this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
}
this.currentid=divid //keep track of current div object being manipulated (in the event of chaining)
return this
},
showhide:function(divid, action){
var $divref=this.divholders[divid].$divref //reference collapsible DIV
if (this.divholders[divid] && $divref.length==1){ //if DIV exists
var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
this.slideengine(divid, 'show')
targetgroup.lastactivedivid=divid //remember last active DIV
}
else{
this.slideengine(divid, action)
}
}
},
slideengine:function(divid, action){
var $divref=this.divholders[divid].$divref
var $togglerimage=this.divholders[divid].$togglerimage
if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
var animateSetting={height: action}
if ($divref.attr('fade'))
animateSetting.opacity=action
$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
if ($togglerimage){
$togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
}
if (animatedcollapse.ontoggle){
try{
animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
}
catch(e){
alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
}
}
})
return false
}
},
generatemap:function(){
var map={}
for (var i=0; i<arguments.length; i++){
if (arguments[i][1]!=null){ //do not generate name/value pair if value is null
map[arguments[i][0]]=arguments[i][1]
}
}
return map
},
init:function(){
var ac=this
jQuery(document).ready(function($){
animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
this.$divref=$('#'+this.id)
if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does
var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
}
else{
var cssdisplay=this.getAttr('hide')? 'none' : null
}
if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID
cssdisplay='block' //set div to "block", overriding any other setting
}
else if (urlparamopenids[0]=="none"){
cssdisplay='none' //set div to "none", overriding any other setting
}
this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
if (this.getAttr('group')){ //if this DIV has the "group" attr defined
var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID
targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded
}
}
}) //end divholders.each
jQuery.each(ac.divgroups, function(){ //loop through each group
if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
ac.divholders[this.lastactivedivid].$divref.show()
})
if (animatedcollapse.ontoggle){
jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event
animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
})
}
//Parse page for links containing rel attribute
var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
$allcontrols.each(function(){ //loop though each control link
this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image)
animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined)
$togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths
ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine()
ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
}
$(this).click(function(){ //assign click behavior to each control link
var relattr=this.getAttribute('rel')
var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array
if (divids.length>0){
animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function
return false
}
}) //end control.click
})// end control.each
$(window).bind('unload', function(){
ac.uninit()
})
}) //end doc.ready()
},
uninit:function(){
var opendivids='', groupswithpersist=''
jQuery.each(this.divholders, function(){
if (this.$divref.css('display')!='none'){
opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
}
if (this.getAttr('group') && this.getAttr('persist'))
groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
})
opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
this.setCookie('acopendivids', opendivids)
this.setCookie('acgroupswithpersist', groupswithpersist)
},
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, days){
if (typeof days!="undefined"){ //if set persistent cookie
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()+days)
document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
}
else //else if this is a session only cookie
document.cookie = name+"="+value+"; path=/"
},
urlparamselect:function(){
window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
return (RegExp.$1!="")? RegExp.$1.split(",") : []
},
preloadimage:function(){
var preloadimages=this.preloadimages
for (var i=0; i<arguments.length; i++){
if (arguments[i] && arguments[i].length>0){
preloadimages[preloadimages.length]=new Image()
preloadimages[preloadimages.length-1].src=arguments[i]
}
}
}
}
Hi everyone I need to make a chrome extension that will be work like panel like on site "http://static.springsource.org/spring/docs/3.0.x/spring-framework-reference/html/" but in my case this panel should work on every site and be always on top of every page content. I implemented this with iform element and added div element same size as iform to the end of the body, so my panel will not hide the end of page . The problem is adding this panel to sites like gmail. in this case I cant add element to the end of page and it's hide part of content. How can I solve this problem or is there any other way to make this.
Hello. The link below is the result of a product search on a website. It displays 2 results. However, the actual results (picture & information) that are displayed on the web page are not present in the "Page Source". For example, if you search the page source for the string '860723' (which is one of the product numbers visible on the web page) it is not there. What is going on here? It looks to me like dummy images & information in the HTML are first loaded by the browser, and then that dummy info gets replaced by the real information via a javascript function. Is that what's going on? http://www.lightsamerica.com/metro/s...mber:SL9469-8; I'm trying to retrieve that information by downloading the source in my PHP program. The problem is that the information I want isn't present in the source. It stands to reason that the information is somehow being sent to the browser because I can see it... any ideas? Thanks for your time, -Scott This is what i want to do but Im not sure if it is possible i just want a push in the right direction to how to do it anyway. How would i go about displaying information on my site collected from another site its for a sports website i don't want to have to count tackles in each footy game i just want to take certain stats from another site and display them on mine is this something that can be done using JavaScript? thanks any help would be great hi everyone, is it possible to get information about image, or generally speaking a file using javascript??? lets say i used a browse button (input type="file") and when the user selects the file, i can get the file information - like if it were an image, then its dimensions and if possible, then the file size too... is this possible in javascript??? thanks in advance Hemal Hi Guys, I need a little bit or help with a bit of code I'm writing for a customer. I want to select some data from a database (photo names) and then show pass the information to a JavaScript to display the images on at a time moving onwhen a user click on a 'NEXT' button or back one when the click on a 'BACK' button. Does anyone have any idea on how to do this or is it something that is just no possible? Hey all, i could really use some help in making life easier if any one can help. Im gonna try my best and explain what i want but please excuse my lack of knowledge! What i want to achieve is to use one page as a template that can take information from the url and use it to produce the result i want for example if the template page is template.html ad it looked something like this: Code: <title> + title + </title> </head> <body> <a href="http://www.mywebsite.com/ + folder + / + page +">Click Here</a> </body> </html> The link to the page could look something like this: template.html?folder=football&page=united.html&title=United Scores this would result in the template page rendering as: Code: <title>United Scores</title> </head> <body> <a href="http://www.mywebsite.com/football/united.html">Click Here</a> </body> </html> If anyone can tell me how i can achieve this i would be extremely grateful. Thanks It appears that .html() is somehow messing up reading the contents of a div. Here is my php code which loads into the div. Code: $own_pre_selection .= "<input name='" . mysql_result($result,$i,"did") . "' value='" . mysql_result($result,$i,"did") . "' type='hidden'><span class='addremove' onclick=\"recordchecks('" . mysql_result($result,$i,"dname") . "','" . mysql_result($result,$i,"did") . "')\";><u>Remove</u></span> " . mysql_result($result,$i,"dname") . "<br>";
Here is what I see as source code after the page renders. Code: <input name='677' value='677' type='hidden'><span class='addremove' onclick="recordchecks('Heart Neoplasms','677')";><u>Remove</u></span> Heart Neoplasms<br><input name='1298' value='1298' type='hidden'><span class='addremove' onclick="recordchecks('Heart Septal Defects; Atrial','1298')";><u>Remove</u></span> Heart Septal Defects; Atrial<br></div>
When I test alert() the .html() contents it appears like this. It seems to screw up the quote escape and changes \" to " ;="" after the recordchecks(). Code: <input name="677" value="677" type="hidden"><span class="addremove" onclick="recordchecks('Heart Neoplasms','677')" ;=""><u>Remove</u></span> Heart Neoplasms<br><input name="1298" value="1298" type="hidden"><span class="addremove" onclick="recordchecks('Heart Septal Defects; Atrial','1298')" ;=""><u>Remove</u></span> Heart Septal Defects; Atrial<br>
So even though the source code looks perfect, if I alert() the div contents with html() it seems to get a bit garbled in the process. Any ideas? |
|||||||