|
JavaScript - @font-face Question Please - Bit Confused!
Hi, thanks for reading this. I have two templates that I use on my website that use font faces.....(both of these templates were free downloads).
However, if I look at the files for each of these templates, they use font face differently - can someone kindly check if they are ok? Is one wrong and one right? Template 1: Which works 100% well in all browsers There is NO css reference, rather, each page has this javascript: <script type="text/javascript" src="../jsfunnels/cufon-yui.js"></script> <script type="text/javascript" src="../jsfunnels/MgOpen_Moderna_700.font.js"></script> <script type="text/javascript" src="../jsfunnels/Chunk_400.font.js"></script> <!-- Start Video section --> <script type="text/javascript"> Cufon.replace('h1', { fontFamily: 'Chunk' }); Cufon.replace('h2', { fontFamily: 'Chunk' }); Cufon.replace('h3', { fontFamily: 'Chunk' }); Cufon.replace('h7', { fontFamily: 'Chunk' }); Cufon.replace('h4', { fontFamily: 'MgOpen Moderna' }); Cufon.replace('h6', { fontFamily: 'MgOpen Moderna' }); </script> Template 2: Which works 70% well in all browsers <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/TitilliumMaps26L_500.font.js"></script> <script type="text/javascript" src="js/TitilliumMaps26L_300.font.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script type="text/javascript"> Cufon.replace('.footer span','.footer span a',{ fontFamily: 'TitilliumMaps26L-250wt'}); Cufon.replace('.col-left p',{ fontFamily: 'TitilliumMaps26L-250wt'}); Cufon.replace('.reg a',{ fontFamily: 'TitilliumMaps26L-250wt'}); Cufon.replace('.content4-left p',{ fontFamily: 'TitilliumMaps26L-250wt'}); Cufon.replace('.content4-right p.title',{ fontFamily: 'TitilliumMaps26L-250wt'}); Cufon.replace('.header-right','.search span','.header-right ul li a',{ fontFamily: 'TitilliumMaps26L-500wt'}); Cufon.replace('h1',{ fontFamily: 'TitilliumMaps26L-500wt'}); </script> And the CSS which I believe is the culprit is he @font-face { font-family: 'TitilliumMaps26L002'; src: local('../font/TitilliumMaps26L002-250wt') url('../font/TitilliumMaps26L002.otf') format('opentype'); } ------------------ Now, according to Paul Irish article, I should NOT make the above CSS a local path - see the red font above. So I guess my questions are, can anyone see anything wrong with the above, and why is there a different approach, i.e. one uses css and the other doesn't? THANKS VERY MUCH Similar TutorialsHey i got this code and i looked at it and im so lost i cant describe it can someone hep me in understanding the ins and outs of this. Code: var YOOaccordion=new Class({initialize:function(togglers,elements,options){this.setOptions({open:'first',allowMultipleOpen:false,fade:false,fadeDuration:600,transition:Fx.Transitions.linear,duration:400},options);this.togglers=togglers;this.elements=elements;this.elementFx=[];this.elementVisible=[];this.togglers.each(function(tog,i){tog.addEvent('click',function(){this.toggleSection(i)}.bind(this))},this);this.elements.each(function(el,i){this.elementFx[i]=new Fx.Slide(el,this.options);if(!(this.options.allowMultipleOpen&&this.options.open=='all'))this.hide(i)},this);if(this.options.open=='first')(function(){this.slideIn(0)}).delay(1,this)},toggleSection:function(iToToggle){if(!this.options.allowMultipleOpen){this.elements.each(function(el,i){if(this.elementVisible[i]&&i!=iToToggle)this.slideOut(i)},this)}this.toggle(iToToggle)},toggle:function(i){this.elementFx[i].toggle().chain(function(){this.elementVisible[i]=(this.elementVisible[i]+1)%2}.bind(this));if(this.options.fade)this.fade(i)},slideIn:function(i){this.elementFx[i].slideIn().chain(function(){this.elementVisible[i]=1}.bind(this));if(this.options.fade)this.fade(i)},slideOut:function(i){this.elementFx[i].slideOut().chain(function(){this.elementVisible[i]=0}.bind(this));if(this.options.fade)this.fade(i)},show:function(i){this.elementVisible[i]=1;this.elementFx[i].show()},hide:function(i){this.elementVisible[i]=0;this.elementFx[i].hide()},fade:function(i){var fx=new Fx.Styles(this.elements[i],{'duration':this.options.fadeDuration,'wait':false});fx.start({'opacity':[this.elementVisible[i],(this.elementVisible[i]+1)%2]})}});YOOaccordion.implement(new Options);
var n = 123456.789; n.toFixed(0); just starting out JavaScript. So i type the above code in firebug. it returns this result:- "123457" As for as i know, toFixed() converts a number to a string with a specified number of digits after the decimal point. If i have specified 0, which i'm assuming it means 0 digits after the decimal point, why does the 7 appear and the 6 is taken out. really fustrating and can't seem to get my head over it. I trying to display a random number using innerHTML Here's my code: Code: <html>
<head>
<script language="JavaScript">
var myArray = new Array("String1", "String2", "String3", "String4", "String5", "String6", "String7", "String8", "String9", "String10");
var num = Math.floor(myArray.length * Math.random());
document.writeln(myArray[num]);
//document.getElementById("myString").innerHTML = myArray[num];
</script>
</head>
<body>
<div id="myString"></div>
</body>
</html>
it works when I use document.writeln(myArray[num]); but does NOT work for document.getElementById("myString").innerHTML = myArray[num]; any ideas?? tks First let me say, I do know how to code I just haven't for a VERY long time and things are slow to come back. That being said, I'm working on a self induced project to bring back my coding abilities and I'm stuck. What I'm wanting to happen is when a certain link is clicked it goes to a certain photo album and pulls random pics just from that album and displays them in a certain place on that page. What would be the best way to approach this to make it happen? I'm not wanting someone to do this for me, just get me going in the right direction. Thanks.... I'm picking up some work on a site that has been built already in joomla! On some of the pages IE is breaking it and pushing it down to the bottom. example:LINK TO BREAKAGE That Volleyball tag should be up next to the picture. And there is an entire paragraph underneath that that is not getting seen. Someone told me at first that it was the javascript, and I thought it was the Rokbox plugin, but that's not even activated. I am so confused. And it's not the css, because I tried that. Has anyone else experienced this problem? And how is it fixed? I have been working on it all weekend! Thank you for all comments! The situation: I have a javascript scroller that loads it's data via JQuery .load function (code not listed as it is not relevant to the problem.) The amount of data loaded is greater than what is shown (each piece of data in it's own div with id's from #scroller1 to #scroller20). So you can see the first 13 div's right away and the other 7 are scrolled in 1 by one as the first 7 are scrolled out 1 by 1 in an endless and consecutive loop. The problem: For some reason, after div20 (#scroller20) is scrolled in to view, my scroller removes div8 but does not add div1 creating a blank space below div9 (if this confuses you, take a look at the link at the bottom of this post.) After div20 is removed, then div13 is added but div1 is NOT removed, now filling this blank space. Now normally this is not visible to be a problem, except that each of these div's will end up being much higher, perhaps only 4 showing at a time, so when one of these 4 disappears, then reappears, it will become unacceptable. Why is this happening? I am sure it has to the code/math inside of function divage... but I can't figure it out for some reason... please help. Here is my javascript code (which uses JQuery) Code: var slide = 1;
var auto_scroll = setInterval("scrollme(slide++)", 4000);
function scrollme(i){
divage(i);
}
function divage(i){
removeIt(i%21);
addIt((i+13)%21);
var j=((i-1)%21);
$('#scroller-main-text').prepend($("#scroller"+j));
}
function addIt(i){
$("#scroller"+i).fadeIn(1000);
}
function removeIt(i){
$("#scroller"+i).fadeOut(500);
}
URL where the problem can be witnessed: http://www.inspiritandintruth.com Hi - In am learning Javascript and trying to understand why, the following line : Code: arguments.callee.superclass cannot be replaced by : Code: this.constructor.superclass In the following code sample : ( the explanation given is that if someone creates a subclass of PositionedRectangle, then this.constructor will refer to the new subclass constructor, not to PositionedRectangle - but why? 'this' here to my knowledge represents the object 'PositionRectangle' and if not I can't understand why not. ) Code: // Here is a simple Rectangle class.
// It has a width and height and can compute its own area
function Rectangle(w, h) {
this.width = w;
this.height = h;
}
Rectangle.prototype.area = function( ) { return this.width * this.height; }
// Here is how we might subclass it
function PositionedRectangle(x, y, w, h) {
// First, invoke the superclass constructor on the new object
// so that it can initialize the width and height.
// We use the call method so that we invoke the constructor as a
// method of the object to be initialized.
// This is called constructor chaining.
PositionRectangle.superclass = Rectangle;
arguments.callee.superclass .call(this, w, h);
// Now store the position of the upper-left corner of the rectangle
this.x = x;
this.y = y;
}
// Create a prototype for the subclass that inherits from the prototype
// of the superclass.
function heir(p) {
function f(){}
f.prototype = p;
return new f();
}
PositionRectangle.prototype = heir(Rectangle.prototype);
PositionRectangle.prototype.constructor = PositionRectangle;
My client has a training site that is associated with 4 different domains. If a user navigates away from one of the domains to another site (for instance www.google.com) they want to display a message and ask them if they want to leave the training site. my understanding of the window.location.href is that it will capture what is typed into the address bar until the request is submitted to the server but by then they are leaving the site. below is my code on the onbeforeunload event. conceptually: i want to capture the URL, compare the hostname and if the host name is one of the 4 domains then allow them to proceed, if it is not then as them if they want to leave the site. if they click ok allow them to move forward, if the click cancel then reload the page. I know this is considered bad design and i have expressed this but this how they want the site to behave. thanks ________________________________________________________________ [CODE] <script type="text/javascript"> function SiteCheck() { var strCurrentURL = window.location.href; var strNewHostName = strCurrentURL.split("/"); // for(i = 0; i < strNewHostName.length; i++) { alert(i + ' ' + strNewHostName[i]); } //strNewHostName[4] = "sddmtraining.org"; //test values //strNewHostName[4] == 'sddmtrain.org'; //test values //strNewHostName[4] == 'www.sddmtrain.web.org'; test values if (strNewHostName[4] == 'sddmtraining.org' || strNewHostName[4] == 'sddmtrain.org' || strNewHostName[4] == 'www.sddmtrain.web.org') ; else { var r = confirm("Are you sure you want leave the Training Site - Click Ok to Leave / Click Cancel to stay"); if (r==true) ; else { window.location.reload(window.location.href ); } } } </script> [\CODE] For a project in my high school web design class, I need to integrate an Excel spreadsheet as data so to speak for a web page. I want to pull the prices from the sheet, and make them appear on the page. I'd like to pull it from the sheet so that the client can still adjust and edit the prices without having to reach the actual webpage. Conceptually, I thought this would be fairly straight forward, but in researching how to do this, I got very confused. I'm not even positive that I'm putting this in the right section. So my main question is this: Is there a way to integrate an Excel spreadsheet in such a way that it can provide data for certain fields of a webpage? If so, can someone please explain how? Thanks, A Confused High School Girl Hi there coding friends, im stuck again this time on arrays.. Im trying to get my head around it and im sure it's one of those things you do once you know what your doing (to an extent) now the problem is... i have 2 arrays for a experiment one = flowerheight and the other is flowernumbers. now the height is set out as 15,16,17,18,19 and numbers 2,1,6,4,2 what the aim is in the first part is to times the height by numbers of the corresponding array ie. 15x2 16x1 17x6 18x4 19x2 to make a 3rd array with them as the totals then the second part of the program is to calculate the average height i.e total of total of numbers array (2+1+6+4+2) + total of 3rd array(15x2+16x1+17x6+18x4+19x2) then a write to show what the total was.. now all I have of the code is... Code: <HTML> <HEAD> <TITLE> Flower Experiment </TITLE> <SCRIPT LANGUAGE = "JavaScript"> /* * Program to calculate average height of flowers.. */ //Experiment results var flowerHeights = [15,16,17,18,19]; var flowerNumbers = [2,1,6,4,2]; //Write code to work out and show flowerheightxnumbers. //Write code to calculate the average height of the flowers (total of flowernumbers + (flowerheight X numbers) and write it out in the browser window. </SCRIPT> </HEAD> <BODY> </BODY> </HTML> now I have no idea how to go about this it's making me loose my mind. Can someone start me off in the right directon and/or explain to me what to do. Anyhelp much appreciated, I wish I could have done more to the question to make it easier for you lot to help me but my brain is frazzled Thanks. James I use console.log to print the dom element info, but some results make me very confused.The code is below, you can paste it to a file and browse it. //********************** <html> <head> </head> <body> <script type="text/javascript"> function showObjInPage(obj) { document.write("=======================================<br/>"); document.write((typeof obj) + "<br/>"); document.write("length: " + obj.length + "<br/>"); ///!!! 0, may ok document.write(obj); //!!!!!write nothing for (var prop in obj) { document.write(prop + " = " + obj[prop] + "<br/>"); } document.write("=======================================<br/>"); } function consoleLog(obj) { console.log("=======================================<br/>"); console.log((typeof obj) + "<br/>"); console.log("length: " + obj.length + "<br/>"); //!!!!! this is the confuse, it is 0, but the code below show obj correct! console.log(obj); //!!! write all the p elements for (var prop in obj) { console.log(prop + " = " + obj[prop] + "<br/>"); } console.log("=======================================<br/>"); } var elems = document.getElementsByTagName('p'); //console.log(elems); //console.log(elems.length); showObjInPage(elems); consoleLog(elems); </script> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p> </body> </html> I want to print the p elements info use console.log, it is ok to log the elems, but the elems's length is 0, so it is not consistent! Maybe my code need to write after the 'p' element, but the problem is very confused. Is it a chrome console.log bug or just I do something wrong? I'm looking for some kind of font veiwer to put on my website where a user enters text in a box, selects the font then the entered text is displayed in the selected font. A bit like the one they use on DaFont.com. I don't know if this is done with javascript or not. Can anyone help a newbie? Hello, Is there a way to change the font of the text within a document.writeln statement? Here is my code: Code: <pre><script type="text/javascript">
var num1= prompt ("Enter a number between 1 and 5");
try {
if(x>5) {
throw "Err1";
}
else if(x<1) {
throw "Err2";
}
}
catch(err) {
if(err=="Err1") {
document.writeln("Error! The value is too high.");
document.writeln("Please enter a new value.");
}
if(err=="Err2"){
document.writeln("Error! The value is too low.");
document.writeln("Please enter a new value.");
}
}</script></pre>
Thanks. I am setting up a store for stationery. One cool aspect is for the online user to be able to type in what they want on the stationery, choose the font, and hit a "PREVIEW" button, showing an exact preview of what it should look like. I am having trouble on how to do this. Virtuemart and its forums are useless and helpless. Joomla suprisingly doesn't have an extension for this. Looks like I'm gonna have to hard code this baby. What would the best angle be to attack this? Should I try some interactive flash/AS3 or some good ol JS? There will be over 500 products so I am trying to pick YOUR expert brain before I tackle this beast. Thanks for any input! I have a javascript that randomly displays a different quote on my website. I have the quote programmed in, and they show up, but the text is tiny. I need help making the text bigger. I am a beginner at this, so i would appreciate help. This is the code: Code: <script language='JavaScript'>
function random_content(){
var mycontent=new Array()
mycontent[1]='Repent! The end is coming! Were out of chips!'
mycontent[2]='I WANT, TO EAT, A DINOSAUR.'
mycontent[3]='Last night I lay in bed looking up at the stars in the sky and I thought to myself, where the heck is the ceiling.'
mycontent[4]='IT\'S A TRAP!'
mycontent[5]='tardo power,activate!'
mycontent[6]='LMS if ur gay'
mycontent[7]='1,2,...5!'
mycontent[8]='Box O Digletts'
mycontent[9]='Justice is best served cold, with a side of ranch dressing'
mycontent[10]='umm...I got nothing...awkward'
mycontent[11]='Once you visit you can never leave'
mycontent[12]='50% CaCow'
mycontent[13]='almost racist free!'
mycontent[14]='The last thing I want to do is hurt you. But it\'s still on the list'
mycontent[15]='BOOM! Left turn!'
mycontent[16]='Redrum'
mycontent[17]='If 4 out of 5 people SUFFER from diarrhea... does that mean that one enjoys it?'
mycontent[18]='Never, under any circumstances, take a sleeping pill and a laxative on the same night'
mycontent[19]='the beginning of the end'
mycontent[20]='Flaming fireballs Batman!'
mycontent[21]='gotta catch em\' all'
mycontent[22]='for the african children!'
mycontent[23]='One sexy thang'
mycontent[24]='It\'s Tardolicious!'
mycontent[25]='That\'s no moon!'
mycontent[26]='Caboose is god?'
mycontent[27]='MLIT'
var ry=Math.floor(Math.random()*mycontent.length)
if (ry==0)
ry=1
document.write(mycontent[ry])
}
random_content()
//-->
</script>
On my webpage, I dynamically create an iFrame when a button is pressed, then load a html page from within my own domain into the iframe, based on what html page is loaded into a variable. My question is, can I dynamically change the font family of the loaded html page from the javascript of the main page? My code to create the iframe is: Code: function setSubTxt(){
var par = document.getElementById('parentDiv');
par.innerHTML = '<iframe src="'+subTxt+'" style="width: 375px; position: fixed; height: 365px; left: 400px; top: 145px; border=none;" name="subIframe" frameBorder=0></iframe>';
frames['subIframe'].window.location=subTxt;
document.subIframe.document.body.style.fontFamily = "Arial";
$('parentDiv').fade(1);
}
the variable "subTxt" has the url of the html page to be loaded (always on the same domain). The code: Code: document.subIframe.document.body.style.fontFamily = "Arial"; was my attempt to dynamically change the font, but it didn't work. Also, it should be noted that there is no font family set in the html pages which would override this. Thanks Hi! I would like to have a countdown script use images in place of font, so 1 would be a custom image of a 1, etc. Below is a countdown script I have (but I do not necessarily need that particular script, just any that counts down) Code: <script type="text/javascript">
<!-- //start
// NOTE: the month entered must be one less than current month. ie; 0=January, 11=December
// NOTE: the hour is in 24 hour format. 0=12am, 15=3pm etc
// format: dateFuture = new Date(year,month-1,day,hour,min,sec)
// example: dateFuture = new Date(2003,03,26,14,15,00) = April 26, 2003 - 2:15:00 pm
dateFuture = new Date(2009,08,02,03,00,00,00);
// TESTING: comment out the line below to print out the "dateFuture" for testing purposes
//document.write(dateFuture +"<br />");
//###################################
//nothing beyond this point
function GetCount(){
dateNow = new Date(); //grab current date
amount = dateFuture.getTime() - dateNow.getTime(); //calc milliseconds between dates
delete dateNow;
// time is already past
if(amount < 0){
document.getElementById('countbox').innerHTML="Now!";
}
// date is still good
else{
days=0;hours=0;mins=0;secs=0;out="";
amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
days=Math.floor(amount/86400);//days
amount=amount%86400;
hours=Math.floor(amount/3600);//hours
amount=amount%3600;
mins=Math.floor(amount/60);//minutes
amount=amount%60;
secs=Math.floor(amount);//seconds
if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+" ";}
//out += secs +"";
document.getElementById('countbox').innerHTML=out;
setTimeout("GetCount()", 1000);
}
}
window.onload=GetCount;//call when everything has loaded
//-->
</script>
<div id="countbox"></div>
I am trying to figure out how to change certain text's font color, in the text area. I have been looking everywhere, but I haven't found a solution. Any help would be great, thanks, mazzzzz I want to deviate from using css to designate a font size in one place. I have a string with a name. This is stored in a variable called "name." I just re-defined name to include district number. Now, it is name=lastname+', '+district; I am appending this string into the html dom. I want the district portion to appear in a slightly smaller font. How can I do this without having to set up a separate <span>? Or can this be done? |
|||||||