deldalton
-
Posts
83 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by deldalton
-
-
Okay, so I added this to the top of my JS script.
var nav;var button;function updateVar() { var nav = document.getElementById("navBar"); var button = document.getElementById("navButton");}I then added this to my HTML.
<body onload="updateVar();">
It doesn't like that at all. But, I don't know why. Providing I've got the "onload" bit correct, then it'll call the updateVar function and update the global variables and we're away, surely?
-
Those are both suitable methods. There's a third possibility: Create the variables first without a value and then set their values after an onload or a DOMContentLoaded event (getting that to work cross-browser is difficult, but jQuery has it done already with a document.ready() method or something similar)
I'd really like to try and put together something purely in JS, rather than having to use JQuery. I'll let you know how I get on.
Thanks, Ingolme!
-
Because when you set the global variable, the elements you're trying to access haven't loaded yet.
Oh, I see.
I have two possible solutions. Can you please tell me if either of them are possible and/or whether there is a reason they would not be suitable?
1. Put the link to the script at the bottom of the HTML document so that all elements load first, then the script.
2. Put the global variables in the HTML document, then leave the link to the script in the <head> element, as usual.
-
The code below works fine (apart from in Safari but that's a different problem). You can see the working code in action here: http://codepen.io/deldalton/full/mfoIi
function expandNav() { var nav = document.getElementById("navBar"); if (nav.className == "collapsed") { nav.className = "expanded"; document.getElementById("navButton").src="images/lightNavUp.png";} else { nav.className = "collapsed"; document.getElementById("navButton").src="images/lightNavDown.png";}}function changeIconOnMouseOver() { if (document.getElementById("navBar").className == "collapsed") { document.getElementById("navButton").src="images/lightNavDown.png";} else { document.getElementById("navButton").src="images/lightNavUp.png";}}function changeIconOnMouseOut() { if (document.getElementById("navBar").className == "collapsed") { document.getElementById("navButton").src="images/darkNavDown.png";} else { document.getElementById("navButton").src="images/darkNavUp.png";}}However, using the following code which is basically the same thing except using global variables instead of "document.getElementById"s all the time, doesn't work.
var nav = document.getElementById("navBar");var button = document.getElementById("navButton");function expandNav() { if (nav.className == "collapsed") { nav.className = "expanded"; button.src="images/lightNavUp.png";} else { nav.className = "collapsed"; button.src="images/lightNavDown.png";}}function changeIconOnMouseOver() { if (nav.className == "collapsed") { button.src="images/lightNavDown.png";} else { button.src="images/lightNavUp.png";}}function changeIconOnMouseOut() { if (nav.className == "collapsed") { button.src="images/darkNavDown.png";} else { button.src="images/darkNavUp.png";}}Can anyone tell me why?
-
Okay. So, in my ongoing attempt to learn JavaScript, I've been given the following task. Write a function greaterThan, which takes one argument, a number, and returns a function that represents a test. When this returned function is called with a single number as an argument, it returns a boolean: true if the given number is greater than the number that was used to create the test function, and false otherwise. Please see the solution they provided below.
function greaterThan(x) {[indent=1]return function(y) {[/indent][indent=2]return y > x;[/indent][indent=1]};[/indent]} var greaterThanTen = greaterThan(10); show(greaterThanTen(9));Why would I write a function, like the one above, when I could write a function like the one below?
function greaterThan(x, y) {[indent=1]return y > x;[/indent]}; show(greaterThan(10, 9));And, secondly, how is the first code actually being interpreted? Why do we have to create a new variable storing the value of "greaterThan(10)"? Why can't we simply write
show(greaterThan(10(9)));
? Perhaps I need to find some better resources to study from. I'm clearly missing something.
-
justsomeguy. Thank you for the explanation and examples. I had already come across these exact explanations and examples, shortly before reading your post, which definitely helps explain what's meant to happen and how you can apply a recursive function. I only wish the many articles I had read previously had used your post! I appreciate that I have an understanding of it now but it is actually fairly simple. The problem, I think, is the lack of resources explaining it so simply.
-
So, perhaps, my question should be re-written ... Can anyone provide a "real-life" application for the recursive function?
-
I've found and read through an article that shows, through the use of diagrams, how Javascript interprets the code. I would link to the article but I'm uncertain if it's allowed, as it does mention another website that is also dedicated to teaching web coding etc. Now, the maths I understand. And the diagram explains what it's doing. I think my problem is simply that I haven't seen enough examples and that the examples aren't applied to a task that, of yet, seems useful.That's your misunderstanding. factorial(5) is the last value returned, not the first. That is because factorial(5) calls factorial(4), which calls factorial(3), and so on. The smallest numbers get multiplied first and work their way backward to 6. That's the tricky thing about recursion. -
He's another example I'm looking into to help me understand recursion.
function factorial(n) { // Termination condition to prevent infinite recursion if (n < 0) { console.log("Can't make a factorial from a negative number."); return; } // Base case if (n === 0) { return 1; } // Recursive case return n * factorial(n - 1);}factorial(6);So, in this particular example, when factorial(6) is called this, at least in my mind, is what happens. 1. Check to see if n (6) is less than 0. 6 is not less than 0 so skip code within braces and move on to next line of code.2. Check to see if n (6) is equal to 0. 6 is not equal to 0 so skip code within braces and move on to the next line of code.3. Return the value of n * factorial(n - 1). Or, n * factorial(5). So, 6 * 5 which is 30. 3.1. Check to see if n, which in this new instance is equal to 5, is less than 0. 5 is not less than 0 so skip code within braces and move on to the next line of code. 3.2. Check to see if n, which in this new instance is equal to 5, is equal to 0. 5 is not equal to 0 so skip code within braces and move on to the next line of code. 3.3. Return the value of n * factorial(n - 1). Or, n * factorial(4). So, 5 *4 which is 20. Now, I won't continue any further, because I already know this is incorrect and I'm missing something. I know that at 3.3 it should, in fact, multiply 30 by 4. But, I don't understand where the value 30 (which is calculated at step 3.) is stored for it to be "called" in 3.3.
-
Thank you for your suggestions and input. I think that what I'm struggling to understand is how/where the loop stores the values it finds and then how it calls them in the next cycle of the if loop. Because I can't see how the start and history values are produced in the next cycle I can't see how it completes. I really hope that makes sense. Deirdre's Dad. Your alert/print suggestion was brilliant. Although I'm still stuck at this point, it's clear that seeing the found values during each cycle of the loop will help me understand what is happening. davej. I will have a read through the explaination you provided in the link. Thank you. justsomeguy. Thanks for pointing out that the values of start and history are not actually changed but that a new copy of the function is created with new values. This, I think, is the part I'm stuck on. I can't see what the new values are or how they're applied to be used the next time "find" is called.
-
I'm trying to learn Javascript and I've just briefly read about recursion in functions. I've been given the following task. Consider this puzzle: By starting from the number 1 and repeatedly adding 5 or multiplying by 3, an infinite amount of new numbers can be produced. How would you write a function that, given a number, tries to find a sequence of additions and multiplications that produce that number? For example, the number 13 could be reached by first multiplying 1 by 3, and then adding 5 twice. The number 15 can not be reached at all. Here is the solution:
function findSequence(goal) { function find(start, history) { if (start == goal) return history; else if (start > goal) return null; else return find(start + 5, "(" + history + " + 5)") || find(start * 3, "(" + history + " * 3)"); } return find(1, "1");} print(findSequence(24));If this code is run the following is printed to the console: (((1 * 3) + 5) * 3) In my head, the code is processed in the following steps. 1. findSequence is called, with a parameter value of 24.2. findSequence calls find giving the first parameter a value of 1 and the second parameter a value of "1".3. The find function looks to see if the start parameter value is equal to the value of the goal parameter.4. As the start parameter value, in this particular case, is not equal to the value of the goal parameter, check to see if the start parameter value is larger than the goal parameter value.5. As the start parameter value, in this particular case, is not equal to the value of the goal parameter, return one of the following statements:find(start + 5, "(" + history " + 5)")orfind(start * 3, "(" + history + " * 3)" However, this is then where I become stuck. I can't quite understand the statements it's trying to then run. I can see that
find(start + 5,
changes the value of history to 5. Then
"(" + history + " + 5)"). This to me would print (1 + 5 ( + 5) + 5)). Similarly I see the other statment printing as (1 * 3 ( + 3) * 3)). I just can't quite grasp what I'm missing. I suspect it's something obvious and really simple but it would be great if someone could provide me with the missing pieces. I appreciate that there is most likely an alternative way of coming to the same result. However, I'd like to fully understand what is being shown to me here before I move on. Many thanks.
-
I'm disappointed. I read through MisterCatapult's code and missed this! To expand a little further, CSS commenting is implemented using the following opening and closing tags ... "/*" and "*/" without the quotation marks. The latter being the closing tag.Do you actually have these HTML-style comments in your CSS? If so, that could do it. <!-- A LINK --> -
By default, divs are block elements. They will be put on a new line. If I've understood what you've said correctly, then you want the Facebook link to appear beside the search inputs, rather than below it. Change the "facebook" div to an inline element. Let me know if that's what you're after. More information can be found here ... http://www.w3schools.com/css/css_display_visibility.asp<aside> <form id="search"> <input type="search" name="email"> <input type="search" name="wachtwoord"> <button type="button">Inloggen</button> </form><center><div id="facebook"><a href="www.facebook.com"><img src="img/Facebook.png" width="98" height="23" alt="Facebook" longdesc="http://www.facebook.com"></a> </div></center> <div id="talen">NL FR</div></aside>
This is what I got.I got the search inputs at the right position (margin 0 150px), and the Facebook link should be right next to it, but I can only get it closeby, but under it.
-
The only editor I've used is Notepad++. I can't fault it yet.
-
Srautpyaa. By default, div elements are "block" elements. A block element is an element that takes up the full width available, and has a line break before and after it. You need to change both of your divs display properties to "inline". Like so ...
<div style="display:inline;">Satyaprasad</div><div style="display:inline; border-bottom: 2px dotted #000000"></div>
What you'll then find is that the two divs sit side by side. You may also notice that I've removed the "float:left" property as I believe this is no longer required. However, that may depend on what exactly you intend to do next. What you'll find though, with the code above, is that the dotted border only appears if the second div has content. If you simply want the text beside some dotted lines you could try this.
<div><p>Satyaprasad..................................</p></div>
Alternatively, if you could provide us with some additional information as to what exactly you're aiming for we may be able to give you some other suggestions.
-
Terryds. As Spunky has suggested, if you're unfamiliar with HTML then you may find it a little tricky at first. However, there are some great resources on the w3schools.com website which will tell you all you need to know. Try looking at this ... http://w3schools.com/html/html_layout.asp#gsc.tab=0 Once you understand the basics you'll then want to take a look at CSS (particularly CSS positioning) to get your desired look, which you can read about here ... http://www.w3schools.com/css/css_positioning.asp#gsc.tab=0 Of course, you have to know how to apply CSS in the first place. If you don't, I would suggest starting from the beginning of the CSS documentation on the w3schools website.
-
Ingolme. I thought that might be the case. Thanks!It can't be done with CSS2.1. Javascript is required and probably preferable to CSS3 at the moment as you can add controls to it.
DaveJ. Thanks for the suggestion. I'll look into it.You might want to look at jQuery with a slideshow plugin. It might be a simple solution for you. For example... http://www.malsup.com/jquery/cycle/ ...which can be a page as simple as this...<!DOCTYPE html><html><head><title>JQuery Cycle Plugin - Basic Demo</title> <style type="text/css">.slideshow { height: 232px; width: 232px; margin: auto }.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }</style> <!-- include jQuery library --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!-- include Cycle plugin --><script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script><script type="text/javascript">$(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...});});</script></head> <body><div class="slideshow"> <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /></div> </body></html> -
Exactly! ...Assign a min-width to the container
-
I have a div that contains an image. I would like the image to change, approximately every 5 seconds, to another image. There may be up to 10 images that I would like to have rotate (although I suppose the amount of images is, perhaps, irrelevant). I know that this is possible with Java Script. I've seen it work and suspect it's actually fairly straight forward (I'm sure there's countless tutorials on the internet, if I really get stuck). What I'd really like to know is if this is possible without using Java Script and instead using CSS? I believe it's possible in CSS3, as I read an article earlier with someone suggesting it was possible (but their demos weren't working in Internet Explorer). But that is, of course, a problem. I'd like a solution that I can use in most "major" browsers (IE, Chrome, Firefox, Safari etc.). CSS3 is only supported on the latest browsers and, even then, not all features are compatible. So, I don't think that's the answer. Does that leave me with no choice but to use Java Script?
-
Glad it's sorted, -pollux-. Can you post your solution?Hi there. I'be been doing a very simple web recently in which I'd like to have a little green div at the right side and with some sort of a bookmark look. The code I've been using is<style type="text/css">html, body {margin: 0px;height: 100%;font-family: Arial, Helvetica, sans-serif;}</style> <div style="width:1200px; height:100%; margin:0 auto; position:relative"> <!-- Logo --> <div style="width:340px; height:395px; left:20px; position:absolute; z-index:3; background-color:#FFF; box-shadow:0px 0px 15px rgba(0, 0, 0, 0.8); text-align:center"></div> <!-- Green bg --> <div style="width:340px; height:100%; position:relative; left:20px; z-index:2; background:#D1E0BA"></div> <!-- Container and shadow --> <div style="box-shadow:0px 0px 15px rgba(0, 0, 0, 0.8); position:absolute; top:60px"> <!-- Images --> <div style="width:1200px; height:260px; background:#FFF"></div> <!-- Menu --> <div style="width:1200px; height:26px; padding: 9px 0 0; background:#999999; overflow:hidden"></div> <!-- Text --> <div style="width:740px; background-color:#FFF; padding: 50px 50px 50px 410px; text-align:justify"> </div> </div></div>Right now, the green bg looks right only if the total document is not longer than the browser window. If it's longer, there is a blank space at the bottom of it. I've tried do change it's position to fixed, but since everything is centered, it won't display correctly. If anybody could help, I'd greatly appreciate it. Thanks in advance! EDIT: Already solved.
-
Spunky. Yes, you're original solution was the same. Apologies for not crediting your suggestion, too. Thanks so much for the help.What dsonesuk said just summarized my original solution before I mentioned JavaScript. I just hadn't spelled the rest out to you that you need to still make the width 100% just like you did with relative positioning. I was just suggesting using absolute instead of relative. Glad it works. I suggest downloading all major browsers onto your computer so that you can test. I believe there is also a site that will do this for you. -
If you haven't already, it might also be worth posting your query on the stackoverflow.com forums. If you find your answer elsewhere though, please make sure you post it here so we can all benefit from it too.Not to worry, discussing it is still a big help. I've been testing from scratch some different things. I'm currently trying to set all the positions as fixed and see where that might take me. I'd be mroe than happy to use Javascript since the project contains jQuery already anyways, I'm just completely lost. This detail is killing me and I've found no proper solutions as of yet. -
Sorry, Luponius. I completely missed this somehow ...That's what I'm already doing. They're all in the content div which contains them, and the percentages were adjusted a little bit to allow for margin and padding. This however doesn't really appear to do much in terms of height since the initial div has no hardcoded height set to it, so everything is floating without any actual height. What this all boils down to is that the only volume available is the text / images I write in each. Width works fine since that's pre-determined but height is a value that is, to my konwledge either defined in terms of pixels, or just some form of percentage which won't do much. If I could set everything PERCENTUALLY based on the screen size itself that would be great... this way I could set the content div to wrap between header and footer say ... 20% -> 80% top to bottom, and the batteryZone divs could be 25% to 50% and 50% to 70% in height. I don't know if fixed position could allow this, but I must make sure it's based on screen size. The one additional issue I have is to dynamically resize everything contained by the divs (text,images etc) based on the size of the div itself. Thanks for the reply however, it's better than nothing, you helped me visualize my issue better. =]/*Power Storage*/.batteryZone { width:45.5%;...If every container was given it's dimension as a percentage, and was relatively positioned, including the images, then I would expect them all to resize appropriately based on the size of the browser window. However, that's not going to change the size of your text. The other problem here is, of course, that if a particular screen was much longer against it's width, compared to another screen then the images may stretch ... which, I suspect, isn't what you're after. There must be a way to preserver the images and container ratios but I'm not sure how. I know whenever I've resized an image, if I only specify one dimension, it tends to keep the images height:width ratio but I don't know if this could be applied here. I think the only way to get your code to recognise when a particular screen resolution/size is being used is to use Java Script. But, I'm not familiar enough with CSS yet ... let alone Java Script. But, hopefully, someone on else on here will be able to give you a real solution. Sorry I couldn't be of any help.
-
Is there a way I can make a page have a completely separate stylesheet for retina devices? Not the @media inside a stylesheet, but a completely different css file. LikeIf retina then style@2x.csselse style.css
What Niche has said sounds correct to me. Then, as you've suggested, you should be able to use Java Script to call an if statement.Just build on another external stylesheet. http://w3schools.com/css/css_howto.asp
[SOLVED] Query: JS Variables
in JavaScript
Posted
Hi TheScientist. My opening post shows two separate bits of JS code. The first batch works, and can be seen in action by following the CodePen link. The second batch, however, doesn't work.
Ingolme advised that it's because the script is loaded before the elements, that the variables are trying to identify, have been loaded. That makes sense. Ingolme then suggested that I could create some undefined variables and then use an onload function to provide the global variables with values. That makes sense, too.
So, I add the above onload code into my JS and HTML. Unfortunately, I'm still getting the same problem where it believes the global variables have not been defined.
I hope that helps clarify my question.