Hadien

"messing up"? what, with the new images overflowing over the original image? #div1 {width:700px;height:300px;padding:10px;border:1px solid #aaaaaa;overflow:auto;}

.shadow{width:300px;height:100px;background-color:yellow;box-shadow: 0px 10px 15px -10px rgba(0, 0, 0, 1.0), 40px 0px 40px -30px rgba(0, 0, 0, 0.6) inset, -40px 0px 40px -30px rgba(0, 0, 0, 0.6) inset} 1st shadow definition is to the bottom, 2nd is for the left inside gradient and the 3rd is for the right inside gradient. the bottom shadow won't be as nearly rounded, but you can come close to the effect. you could also use SVG to make a dynamically sized shadow. and through filters it should be quite possible to duplicate the effect in your image, though I don't know quite enough about SVG to walk you through it

just add vertical-align:top; to your inline-blocks. Remember browsers will look at inline-blocks and think its more-or-less giant text. Let's say, for example, if you wrote some text out and then you wrapped a word in a span tag and gave it's font-size something like 24px, well browsers don't align by the top by default, but by the baseline, simply because it looks natural. take a look at that "24px" and notice that the rest of the text isn't aligned to match the top of it, but aligned so that most letters (appear to) align to their bottoms, while some lower case letters (g,j,p,q, and y) get shifted a little lower. this is called "baseline". When it comes to inline-blocks, however, this is usually not the case so you have to manually set it to top for those elements.

the result of arctangent(). if you graph it out Y will rise faster than x at first, then gets quickly overtaken. I tried to compensate by increasing the period. but there's limits to arctangent. nonetheless its an easily accessible "easing" effect.

its definitely possible to pull this off. you'll need html, css and javascript, and possibly quite a lot of it. have the tabs along the top and then put your shows and playlist, by year, in separate div tags. now all but one tag will have a css property display:none to hide them. while tabs will have a javascript event that, when clicked on, set all these divs to have a display none and then set the div with the playlists and shows you want to show to display:block to show the div. rather you could use a framework to do that for you. for example jQuery UI's tabs feature build the html, then simply run the jquery: $("#tabs").tabs(); and Jquery's ui will handle most of the rest of the javascripting and even css connections to give you the proper tab interface you wanted does yola.com allow you to upload your own html/css/javascript code files?

pretty much all the divs on that page is using absolute positioning, this takes them out of the body tag. as such body has 0px in height (since nothing is 'actually' in the tag). so you can't simply use css to apply yet another div fill the dimensions of the actual page. either use javascript to find the article with the highest height and apply it to your wrapper, or change your site so that your articles don't use absolute positioning (maybe wrap all articles in a div and use relative positioning and inside floating).

not font, the <p> tag. 1 em is equivalent to the current font-height in context. if a font is 12px high, then 1em = 12px. but if font size is 40px, then 1em is 40px. with the font in your p tag being say, 18px, the there will be an 18px margin above and below that p tag and then the height of the p tag itself which is about 23px.now like in that class snippet i just gave you, setting the margin-top for these specific p tags to 0 will remove the 1em spacing above them. another tag you could use instead is a <span> tag. spans are pure inline-level elements, unlike the p tags which are block-level elements. and unlike the p tags, span will come without the large 1em margins above and below, and won't set consecutive text over multiple lines (downside is that you can't control the width or height of a span, then again you shouldn't need to).

if its still not flush with the top of the container then change this class, again with the removal of padding-top in container and padding/margin-tops in the sides. p.main-title{ color:white; padding-top:5px; text-decoration:underline; margin-top:0px;} p tags by default have 1em margins above and below. its probably because you've made div.main-title only 35px high, that the inside p tags are overflowing their top margins into the container, offsetting the sides. the center div won't need it's margin messed with at all. normally a <p> tag's margins shouldn't be rendered outside their parent tag, but then again float/clear weren't intended for use on block elements either. edit: if you want to push the center div even further up, past the container's border without demolishing it's width. Add to .main-center-box class position: relative, and top: -20px (however much you need). try to avoid messing with the "position" styling if there are other ways to can do it. having too many non-static positioned elements can quickly get confusing to keep track of and clutter up a page.

the padding-top and margin-top for the "center" don't match the "sides". you had the container have padding, and then gave the sides negative margins, so the container pushed everything down, and then the sides shifted themselves back up. remove all the padding margin-tops and change paddings to something like padding: 10px 0px; <style> #main-container { width:90%; background-color:grey; margin-left:auto; margin-right:auto; border-radius:5px; border:2px solid rgb(160, 160, 160); overflow:auto; padding-top:15px; } div.main-left-box { /*removed margin-top and padding*/ width:20%; float:left; clear:left; } div.main-right-box { /*removed margin-top and padding*/ width:20%; float:right; clear:right; } div.main-title { width:100%; height:35px; background-color:rgb(60, 60, 60); border-radius:10px; text-align:center; } p.main-title { color:white; padding-top:5px; text-decoration:underline; } div.main-body { width:100%; background-color:rgba(220, 220, 220, 0.6); margin-top:2px; border-radius:10px; padding: 10px 0px; /*changed side paddings so they're flush with headers*/ } div.main-body-center { width:100%; background-color:rgba(220, 220, 220, 0.6); margin-top:2px; border-radius:10px; padding:10px 0px;/*changed side paddings so they're flush with headers*/ text-align:center; } div.main-center-box { overflow:hidden; } div.main-center-title { height:35px; background-color:rgb(60, 60, 60); border-radius:10px; text-align:center; } </style>

think of an element divided into multiple boxes inside other boxes. the inner-most box contains all the content (the text and other elements that inside the element you're looking at in question). This content box is inside the padding box. the padding box is merely spacing inbetween the inside content and the border. the next box is ofcourse the border itself. and the last, outer-most box is the margin, which is used to determine spacing from its border and its siblings' margin boundary and parent's content boundary... the reason your border isn't stopping right under your text is due to you using padding-right instead of margin-right. as for the border styling, that website is using their own special image to draw their border. the closest in-built border you could use is the dotted style: border-bottom:1px dotted #099; you could also use dashed style too, but to match that sites border, you need make an image.

you need you use the DOM method cloneNode(). you could try and use the DataTransfer object but I don't see alot of documentation on it, and the documentation I do see seems to imply that it can't actually transport node, just text (and links, it seems dataTransfer was intended for links not actual dom manipulation). <!DOCTYPE HTML><html><head><style type="text/css">#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}</style><script>var draggedEl;var newId = 0;function allowDrop(ev){ev.preventDefault();} function drag(ev){ draggedEl = ev.target.cloneNode(true); draggedEl.id = draggedEl.id+(newId++); draggedEl.ondrop = undefined; draggedEl.ondragover = undefined; draggedEl.ondragstart = undefined;} function drop(ev){ev.preventDefault(); var el =ev.target; //if you inccidently drop the element inside an element which is inside the drop box,// navigate up to the drop box inorder to appendif(el.id != "div1"){ while(el.id!= "div1"){ if(el.nodeName == "BODY") throw "could not drop element!!"; el = el.parentElement; }} el.appendChild(draggedEl);}</script></head><body> <p>Drag the W3Schools image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body></html> I slightly modified the code for the w3schools's tryit tutorial on the same drag and drop tutorial. notice that I specifically modified the dragged elements id the moment its cloned, before its appended back into the dropped area if you don't it will have problems making extra copies (plus its just bad for multiple elements to have the same ID). of course the html in the tutorial isn't exactly pretty, but Im sure its in the realms of what you're looking for.

interface is sorta different. interfaces are more of an abstraction of behavior, rather than an abstraction of objects/data, like abstract classes are. An interface is not specific to an object's taxonomy. rather completely different objects can share the same behavior. to get back at my pet example. say a parrot was added to the abstraction. now a parrot can fly, and flying isn't particularly a unique feature to Pets in general, plus a parrot isn't the ONLY thing that can fly. you can make an airplane object. Airplanes can fly... but they aren't pets, and they are definitely not Parrots, but both Parrots and Airplanes can use similar code to implement flying. lets say you make moveable interface class with a move() function. then you make a walking, swimming, and flying class that 'extends' (not implements) moveable class. now you add a movePet function to the Pet abstract class. the Cats and Dogs classes will "implement" the walking class for their movePet() function, goldfish will use swimming, and parrot will use flying. and in the end code you just call movePet() and the code will polymorphically use the right behavior for each pet. You can't (more like shouldn't) code it the other way around, you don't create a flyable interface, and then have a bunch of objects that can fly (airplanes, helicopters, parrots) extend it. Think of abstract classes as an "is-a" relationship, and an interface as a "can" relationship. a dog "is-a" Pet, and dogs "can" walk. but dogs (or Pets for that matter) aren't the only things which "can" walk. you can take my pet example and turn the happy() and angry() functions into interfaces, since all sorts of things could be happy or angry, not just pets. heck even my pizza example has great use of interface (and abstraction). EDIT: since my Pet class example was all behavior, you could technically make it into an interface in of itself. but then I would rename it from Pet to Emotion so that it makes more sense, when you would write Dog/Cat/Parrot implements Emotion and a Person implements Emotion, but a Airplane/Helicopter/Rock wouldn't implement Emotion.

abstract classes is a way that you can be less specific about using a taxonomy of objects, cutting down on a lot of if/else code, yet without sacrificing the identity of what those classes really are. lets say you have a program that determines the reaction your pet's have to your actions. if you give your pet some attention, if it was a cat it would purr, or if it was a dog it would wag it's tail. well we can abstract this reaction out to be less reliant on the type of pet and simply call the abstract class's "happy()" function. at compile time the code will have no idea what type of pet is "happy", but when the program is running it will know in context. abstract class Pet{ abstract protected function happy(); abstract protected function angry(); abstract protected function isSpoiled();}class Dog extends Pet{ public function happy(){ return "*wagging tail*"; } public function angry(){ return "*grrrrrrr*"; } public function isSpoiled(){ return false; }} class Cat extends Pet{ public function happy(){ return "*purrs*"; } public function angry(){ return "*hiss*"; } public function isSpoiled(){ return true; }} so then in the application it doesn't always need to know exactly what the object is... just that its "some pet". In real life, you wouldn't always fully refer to your pet, for example, like "Spot, my dog which is a border-collie, is happy". Usually you would simply say "spot is happy". and others would know you're referring to your border-collie since you told them the first time, and not everytime. $spotty = new Cat;$gaveAttention = false;$isFed = false;if($gaveAttention){ echo $spotty->happy();}else if ($spotty->spoiled()){ echo $spotty->angry();}if($isFed) echo $spotty->happy(); now if you want to change that for a Dog, you only have to change ONE line. or if you add in a new pet type, like a goldfish. then it won't break your previous code. when I'm using the class, i don't have to be specific about the pet. To me, your cat has been abstracted to a generic "pet" and I let the inherited concrete classes (Dog, Cat, and soon Goldfish) worry about the specific details. The less a section of code needs to know about another section, the easier it it to expand that code's functionality without breaking something "else". For example you can further add a multitude of other pet types like snakes and parrots (even a pet rock) and it won't break the initial code. since the running code doesn't rely on a specific pet type, just the abstract Pet class. This is probably the most common way abstract classes are used but not the only way. instead of abstracting objects, one can instead abstract algorithms for dynamic behavior at runtime. for instance if you have a pizza making program, that can make a variety of different pizzas. every pizza has their ingredients gathered, they are then baked, and then served. but not every pizza has the same ingredients (cheese, pepperoni, supreme?), and isn't baked in the same way (soft or crispy crust?), and could be served differently (pickup, delivery, or home-made?). so you can always call the prepare(),bake(), and serve() functions (every pizza will always call those functions and in that order) but what those functions actually make in the end depend on the concrete class you use (home-made, soft crust, cheese pizza).

That error is happening because of one of two things, you define cMessage in one scope and cb in a different scope, or because in your code you don't call cb "cb", but some other variable. Functions have access to any variable defined inside, with, or beside it. But they don't have access to variables defined in scopes they are not a part of: var globalscope = "foo and everyone else can see me";function foo(){var fooscope ="only foo can see me";alert(globalscope);alert(fooscope);alert(barscope);}function bar(){var barscope ="only bar() can see me";}foo();//will alert the first two scopes and then error when trying to alert a third// this is because barscope wasn't defined in a scope that foo() has// access to and thus has no idea what it is. Both foo and bar know about// global scope.Try to think of scopes as inheritance. A function will have access it's own scope, and it's parent scope, grandparent scope, etc.etc. But it will not have access to it's siblings, aunts/uncles, nefews, or even it's own children. Foo and bar are siblings so while they share the same parent scope, they cannot see each other's scope (they can see and call each other, but they have no idea what inside their sibling). To solve the error you have you can do one of two things, either put cMessage in a scope that knows what cb is (or whatever you called cb and make sure it's has the right name in the function), or you can update cMessage to have an extra argument to where you pass in the cb array. I'm guessing that doRedirect() is a function that you use to validate something and if it passes you make an Ajax call. You can call cMessage here (if you're using it to validate something). Since you haven't posted any code, I can't 100% tell exactly what's wrong or how you need to code something relative to what you have. I can only make assumptions here.

For example, instead of Ajax returning a data object full of trues and falses. You return and object full of empty strings (instead of true) and translated strings (instead of false). Your server side code may know whether to use English or Greek depending on either a session variable, or ideally server side via by checking the http header "accept-language" which browsers will send to you by default on every request (I think that includes Ajax calls). I once saw how a game handles localization wherein each language was stored in separate files and in each file was a huge list of variables, like variable t_00879 ="hello, welcome!" in the English file, and in the Spanish file t_00879="Hola, bienvenido!". And in the game, it only tracks the variable name t_00879, not the strings themselves. The game will load the right localization based the gamer's preferred language.You may not have to separate the languages out into separate files, but you could divide the string definitions by if else/switch blocks

Most likely from the misplaced single quotes in those alerts. there's no operator in-between the message string and the number, so JavaScript might be growing an unexpected/ILLEGAL token error. If you have access to a JavaScript debugger, it should help you find what problems are occurring on the page and what error your getting from my code. In most browsers, they come with built-in debuggers, which is normally activated by pressing f12

Yes, sorry I was about to reply sooner yesterday, but ran into a small problem iPad randomly refreshing the page and losing my post, and I didn't want to type it all out again. When I wrote those code samples I gave you, I wasn't designing the code to be directly intuitive, especially to beginners.inland_expand(): this function uses the DOM and Array objects/methods and then uses some rather uncommon (and possibly confusing) syntax operands. Labels is a rarely documented, yet useful syntax in the JavaScript language which is used alongside "break" and "continue" (these two syntax usually seen without a label). It greatly simplifies how one can skip to specific points in nested loops. When you use continue with a label the continue will stop where ever it's at in the loop and jump up to where the label is defined and run the next iteration of that loop. A break with the label does a similar thing, instead it beaks out of the loop it's in, goes to where the label was defined, and then skips the loop it broke out of. It greatly simplifies code, but can be hard to wrap your head around, which is why I usually write my labels to look like you're reading a sentence. For instance, inside setPand when inside the nested for loops to iterate over the classes...from elements that where iterated. If you found an element that ALREADY had the proper default class, I wanted to skip the rest of the code in both for loops and just "continue onto the next ID". addEvent(): this function was written with browser compatibility and optimization in mind. The variables are non-descript and while some rather beautiful qualities of the language are being used, they aren't directly obvious to people who never took advantage of these qualities before. addEvent() is cleverly using both closure and memoization techniques to reduce any overhead in calling the function multiple times. It's using memoization to redefine itself once it's run for the first time. Doing so allows it to skip retesting the browser every time when the answer will always be the same.setPand() is using the ever so useful and important arguments variable, which is automatically controlled by javacript in relation to the function it's called in. By using the arguments Array, I was able to make setPand highly flexible with variety of datatypes you pass into it. Since at certain points I have the function call itself, it is a recursive function. Recursive functions can be quite elegant in logic, but it's also easy for one to cause infinite recursion (the primary reason I only recursively call on strings inside passed objects, since object are capable of pointing back on itself).And yes the toggle (inpand_expand) function is mostly encapsulated from the rest of the code so you can put it in almost any page, which will be using inpand and expand classes. Once you add it to a page, you just need to add in your code that will connect the function with the elements on the page.It's fine if you don't want to use my code, I had fun coding it and didn't stop to think if you would understand it. If you're curious as to how a piece of my code works or why I wrote it that way, feel free to ask a question.

avoid changing styles through the DOM, using .style can lead to layout problems down the road. changing the className is where its at. .expand{/*have your normal/fully expanded display css here*/}.inpand{/*have your minimized css here*/display:none;} The toggling function ("inpand_expand" in this example) doesn't need to know the Id of the elements. its called relative to the Dom's element. the only time you need to know the ids is when attaching the events and setting the defaults. in fact even then you don't need ids then if you go by classes (but you want to go by ids) function inpand_expand(domEl){ var classes = domEl.className.split(" "); ontoNextClass: for(var c=0;c<classes.length;c++){ switch(classes[c]){ case "inpand": classes[c] = "expand"; break; case "expand": classes[c] = "inpand"; break; default: continue ontoNextClass; } return domEl.className = classes.join(" "); } return domEl.className = classes.unshift("inpand").join(" ");}var addEvent = (function () { var L = function (el, ev, fn) { if (el.addEventListener) { L = function (el, ev, fn) { el.addEventListener(ev, fn, false); }; } else if (el.attachEvent) { L = function (el, ev, fn) { el.attachEvent('on' + ev, fn); }; } else { L = function (el, ev, fn) { el['on' + ev] = fn; }; } L(el, ev, fn); }; return function (el, ev, fn) { L(el, ev, fn); };}());function setPand(){ var defaultC = (arguments[0])?"expand":"inpand"; var toggleTo = !(arguments[0])?"inpand":"expand"; ontoNextId: for(var i=1;i<arguments.length;i++){ try{ var el; if(Array.isArray(arguments[i]){ setInpand.apply(null,arguments[i].unshift(arguments[0])); }else{ switch(typeof arguments[i]){ case "string": el = document.getElementById(arguments[i]);addEvent(el,"click", function(){inpand_expand(this)}); var classes = el.className.split(" "); classLoop: for(var c=0;c<classes.length;c++){ if(classes[c] == defaultC){ continue ontoNextId; } if(classes[c] == toggleTo){ classes.splice(c--,1); break classLoop; } } el.className = classes.unshift(defaultC).join(" "); break; case "object": //recursively calls both on keys and values for(var key in arguments[i]){ setPand(arguments[0],key); if(typeof arguments[i][key] == "string") setPand(arguments[0],arguments[i][key]); } break; default: //do nothing break; } } }catch(e){ //lower errors to warnings, this way you can still see the error, // but they won't break the code (like they normally should) console.warn(e); } }}var off = ["H_homage", "F_footer", "H_search", "H_crumbtrail", "H_copyright", "F_read", "H_docBy", "H_docAuthor", "H_tipitakaLinks", "H_tipitakaID", "H_docAuthorTrans", "H_docAuthorTransInfo", "H_docAuthorTransAlt", "H_altFormat", "H_nextpage" ];setPand(false,off); setPand is the function you'll use to set the defaults to all those elements with the ids as you wanted. you can pass the ids to setPand() on a per-argument-basis, as an Object, as an Array, or even any combination among those. in the example I stores all the ids in an array. 1st argument is a boolean to determine which state should be defaulted to (true for expand, false for inpand). now if an element with an id doesn't exist it won't break the code (instead issues a warning). This way you can define which elements will be hidden by default, and which elements are shown (but can be hidden) by default. setPand and inpand_expand functions also work around any classes that were also defined in an element so as to not demolish any other styling you might have going on. With a little tweaking you could merge mine and Davej's code to have his show more/show less link functionality

To do that you need to start diving into DOM manipulation and learning how to assign events. The sample code below is a quick example of how almost everyone learned how to do both of those (usually both around the same time) <!DOCTYPE html><html> <head> <script> function calc(){ var base = document.getElementById("base").value; var exp = document.getElementById("exponent").value; var output = document.getElementById("output"); output.innerHTML = Math.pow(base,exp); } </script> </head> <body> <input type="text" id="base" onkeyup="calc()" value="5">^ <input type="text" id="exponent" onkeyup="calc()" value="2"> <p>output: <span id="output">25</span> </p> </body></html> When you start playing with the "document" (and stuff it gives you) is when you start messing with DOM manipulation. The most common method that everyone uses is document.getElementById() and the most common properties accessed are className, innerHTML, and value. Of course the DOM is a lot bigger than just these few properties/methods. I would recommend studying the DOM when you can (but not all in one sitting, theres alot in it and you'll likely not use most of it). w3schools has a good tutorial to introduce you to the ins and outs of the dom. In my code sample, I assigned onkeyup events to the <input> tags. This means that every time you release a key while either of those 2 tags are selected, it will run the code I have in it's quotes. In this example that means it will run the function "calc" which was previously defined. The way I assigned the events in my sample code is via "inline assignment". The primary reason I used inline assignment is that I think its the simplest way for you to follow along. assigning events can range from simplistic to complex. Due to lack of all browsers (mostly IE) conforming to a standard way of defining events, assigning events has become a chore. Inline assignment is the most compatible (all browsers for at least the past decade support it) and is straightforward to add, but is greatly frowned upon. The reason is because its highly inflexible and doesn't allow full separation between the HTML and javascript. For example, if you use DOM manipulation to add or remove elements you can't use inline assigment on them. Davej's earlier post is how you should assign events to elements. jQuery is a framework whose whole purpose is to greatly simplify DOM manipulation and event calling across nearly every browser (at least the ones that matter). Its so concise that its even easier to code events than using inline assignment. With jQuery, you don't have to know how actual DOM manipulation or event assignment/calling works. But all the same, its recommended that you study up on them anyway. I mean a mechanic is better at his job if he knows more about an engine than just "pressing the gas pedal makes it go".

how about adding these two properties to that same CSS class? background-repeat: no-repeat;background-size: auto 100%; "auto 100%" should resize the image to fit, constrained to the height space you've allotted for it. if you flip those two to "100% auto" or just plain "100%", it will constrain itself to the width. Using "100% 100%" will force the image to stretch to the dimensions you've gave the element, which is most likely what you don't want (especially if some images will be in portait, not landscape orientation). play around with this a little and see which one you like the most the CSS is using position:fixed and height is set to a percentage, so image size (and possibly the cropping problem you're having) can also depend on how much screen space you've given to your browser. viewing this on a larger monitor, having the browser NOT set to fullscreen, or simply scrolling down if allowed can affect how the image will look. As dsonesuk said, position:fixed places the element relative to your viewport, not the page itself. So by scrolling down (if you can scroll down) the image will stay with you. setting background-size should help in fixing the cropping problem but the image might overflow into the header or overlap anything added later on in the page. position:absolute is another alternative but I'm unsure how that will affect other elements on the page. now if background-size isn't the answer, padding is a more-likely culprit: padding-top: 20px; you'll prolly need to mess with the amount to get the sweet spot. problem with using padding top is that the same padding value might not work for other images in the slideshow and so you may have to add padding on a case-by-case basis in the classes that define image's url. if all the images in the slideshow have the same widthxheight, then is won't be a problem

add this css: p.collapsible{ overflow:hidden;/*content outside <p>'s dimensions are hidden*/ max-height:50em;/*only shows upto first 50 lines of text*/}p.collapsible.expand{ overflow:auto;/*in case <p>'s parent has a height limit*/ max-height:none;/*removes lines limit*/} then add this javascript in your <head><script> tag. function toggleCollapse(DomEle){ var classes = DomEle.className.split(" "); for(var i=0;i<classes.length;i++){ if(classes[i] == "expand"){ DomEle.className = classes.splice(i,1).join(" "); return; } } DomEle.className = classes.unshift("expand").join(" ");}// simple cross-browser function for adding events to DOM elementsvar addEvent = (function () { var L = function (el, ev, fn) { if (el.addEventListener) { L = function (el, ev, fn) { el.addEventListener(ev, fn, false); }; } else if (el.attachEvent) { L = function (el, ev, fn) { el.attachEvent('on' + ev, fn); }; } else { L = function (el, ev, fn) { el['on' + ev] = fn; }; } L(el, ev, fn); }; return function (el, ev, fn) { L(el, ev, fn); };}());//adds toggleCollapse to all <p> tags with a "collapsible" classaddEvent(body,"load",function(){ var domPs = document.getElementsByTagName("p"); ontoNextDom: for(var i=0; i<domPs.length;i++){ var classes = domPs[i].className.split(" "); for(var c=0;c<classes.length;c++){ if(classes[i]=="collapsible"){ addEvent(domPs[i],"click",toggleCollapse(domPs[i])) continue ontoNextDom; } } }}); Or if you are using jQuery you can ignore all the previous javascript code and instead add this into a <script> tag at the very bottom of the page: $("p.collapsible").click(function(){ $(this).toggle("expand");}); OR you can get away with no javascript if you instead replace p.collapsible.expand with p.collapsible:hover in the CSS. however you'll need to keep the cursor over the paragraph for all lines to show.

its been so long since I've seen a <big> tag that I didn't recognize it. its highly likely that the tutorial you are using is either out-of-date or might pass off "bad coding" practices. --- A single '=' is an assignment operator. what the code does is it evaluates everything to the right of the '=' operator and stores the result of that evaluation into a variable or property thats on the left of the '=' operator. so if you see some code say: var x = 1+2; javascript will "add" 1 and 2 together, since a '+' between the two numbers implies that you want to perform addition on them. the '=' operator will then take the result of that evaluation (which is 3, since 1+2 is 3) and store that in the variable x. so when x is used, the browser will see x as 3. --- anywho, "var answer" is storing the value that the user gives the browser, and the browser is storing that in its memory. now all you need to do is create another variable that will store the math that you do to "answer". there are numerous ways you can accomplish this, as shown here: // directly calculate the result in one linevar result2 = answer * answer; //OR first define the result and then recall the result,// multiply in the answer, and reassign the new resultvar result2 = 1;result2 = result2 * answer;result2 = result2 * answer;//OR use a for loop and the *= operator to constantly // update and reassign the resultvar result2 = 1;for(var i=1;i<=2:i++){ result2 *= answer;}//OR use a pre-defined function to do the work for youvar result2 = Math.pow(answer,2); Of course, there are many more ways you can calculate the result. I prefer the use of pre-defined functions when possible as it can save you time from "re-inventing the wheel". all the logic is already there. There may be times where using predefined functions can have different effects based on the browser, but that's out of the scope of this lesson. Now that you've figured out the result of the answer squared (which you have stored in the variable "result2"), it now comes time for you to add code so that the browser shows you the result. Right now the browser knows the result and has it memorized, but you haven't told the browser to tell you what that result is. Again, there's multiple ways the browser can tell you this result. be it through the console, alert, or by directly modifying the HTML on the page. The simplest way by far, code-wise, is to just use alert: alert(result2); In most cases you do NOT want to use alert in your code, alert is highly disruptive to a webpage (everything must stop and wait for the user to hit ok). You will usually want to manipulate the HTML, or use console if you need to debug a problem. However, alert works great in times when you're trying to learn how to code, like in tutorials. Now lets piece together what we know so far: <script type="text/javascript"> var answer = prompt("Enter a value", ""); var result2 = Math.pow(answer,2); alert(result2); </script> now that I've shown you how to do squared, see if you can do the cubed.

without actually seeing the site itself we don't know enough to guarantee help. This is only an educated guess, but try and see how this change affects the layout. look for a section of CSS that almost matches whats defined below and change the width, height, top, and left to what I've written below. .cb-slideshow,.cb-slideshow:after { position: fixed; width: 80%; height: 80%; top: 20%; left: 20%; z-index: -99999; } be sure to save and then refresh the page (hold shift/ctrl just in case). it's a shot in the dark, so it may not do what you want. EDIT: posted just a tad too late.

a simple way is to first run a for loop over the array. store a count of how many boxes are true. then run the code with one extra test like so: var checkCount = 0;for(var i =0;i<cb.length;i++){ checkCount += cb[i].checked;}if(checkCount == 2 && cb[1].checked && cb[4].checked){ alert('message' 1);}else{ alert('message' 3);} This works only if you're making tests where a checkbox must be true. if you really want to get advanced and theres a large number of combinations (where a box must be true,false,or either) you could create an array of objects defining their conditions and attached message. and then iterate via condition group instead of checkbox: function cMessage(condMess,defaultMessage){ //define all possible conditions and their messages. //previously defined conditions have higher priority over later conditions.if(typeof condMess == "undefined") condMess = [ {conditions:{1:true,2:false,3:false,4:true}, message:"'message' 1"}, {conditions:{1:true,2:true,3:false,4:true}, message:"'message' 2"}, {conditions:{1:true}, message:"'message' 4"} ]; //default message to return if none of the conditions are met if(typeof defaultMessage == "undefined") defaultMessage = "'message' 3"; for(var i =0;i<condMess.length;i++) { var valid = true; for( var j in condMess[i].conditions) { valid = valid && cb[j].checked == condMess[i].conditions[j]; } if(valid) { return condMess[i].message; } } return defaultMessage; } in a condition you can say that a box (say box 1 for example) must be checked (set to true), must NOT be checked (set to false), or the box's value doesn't matter (not even mentioned). for instance in the 3rd condition that will print out message 4 its ignoring checkboxes 2,3, and 4 since they haven't been mentioned. in this case since its checking for the trues and falses you need to be a little more explict and define the expected values for each box per message.

The selector for remove is using a ">". This means remove should be applied to #adrserror descendants (perhaps needed .each()). you can instead remove the ">" and use .empty() if you prefer. As for the translation, I don't know much. looking around a little shows that you can try and use google's translate API, link to Bing's translate API, or resort to using Ajax calls and having the translation done server-side. I don't know of many other options.