Jump to content


  • Posts

  • Joined

  • Last visited

About setun-90

  • Birthday 10/31/1996

Previous Fields

  • Languages
    HTML, CSS, EcmaScript

Profile Information

  • Interests
    Anything parseable with a humanly-sized program.

setun-90's Achievements


Newbie (1/7)



  1. Hello, I have a SPA consisting basically of an <iframe> with a navigation pane containing (a lot of) <a>s to the pages on the website organized in a hierarchical fashion. When a user clicks on a link in the navigation pane, the page shows up in the iframe. Indeed, there is a <base target="$iframeName"> in the head of the page constituting the SPA. Now, since the links in the navigation pane all have their target set to the iframe, they don't affect the url, but they do add an entry to the history. If the user presses the back button, the url of the iframe doesn't change. Is there any way to catch the url, incorporate it into the history and direct it at the iframe without having to maintain a pushdown stack of visited urls?
  2. Right, so would it be possible to write a function in the linked script that could 'see' event.currentTarget change, either across function calls or within a call? Cause then I wouldn't need to attach handlers or listeners to any descendant of #nav.
  3. After reading about things such as event.currentTarget and a discussion with Ingolme, I'm now having serious doubts about my understanding of DOM. My basic question is: are DOM event handlers called synchronously or asynchronously?
  4. Okay, I'm starting to think we have different understandings of 'at the same time'. I understand 'at the same time' as a synonym for 'concurrently'. To me, since set is called after reset, they execute in sequence. You seem to be saying 'at the same time' in the sense of 'in the same event propagation'. Uhh... do you mean "what I'm doing" as in "what I'm doing with my current code", or "what I'm doing if I follow your advice"? Because I don't see how this: nav.addEventListener('click',reset,true); for (i=navd.length; i-- navd[i].addEventListener('click',set,true); is equivalent to this: navd[i].addEventListener('click',bothActions,false); // assuming you meant 'element' as 'navd[i]' function bothActions() { reset(); set(); } In the first case, reset gets attached only once, whereas in the second case, reset gets bound to all the elements of navd. If I interpreted what you wrote correctly, then I don't understand your reasoning at all. Sorry. In fact, it seems like you didn't understand what I was doing with reset and set. reset runs only once, while set runs once for each level. Was there something else I should have said?
  5. That's interesting, I was going to solve that problem later. I'll keep that in mind. And I don't think the set and reset functions run at the same time; in fact, the whole principle is that 'reset' run before 'set'. I'm exploiting event propagation to achieve this sequencing.
  6. Wow. The results aren't what I predicted. Yours does work... but not lists more than two levels down. Those ones have a cleared style attribute (cleared, but extant), which is only partly what I was predicting. Next, I reverted to my old functions, but forgot to change the 'false' to 'true' (I used commenting to monkey patch the code)... and it still works the way it used to! Now that I took a closer look, it actually makes sense. In reality, there is only ONE event listener that needs to be in the capturing phase; that one is the reset() function which goes on the #nav. The only thing that matters is that reset() happen before set(). Wow, that was quite a revelation. If not for you code (which seemed a good attempt nevertheless), thanks for prompting a reflection on this.
  7. function toggleAll(e) { // Hide all other items for(var i = 0; i < numItems; i++) { items[i].style.display = ""; } // Show this item e.currentTarget.style.display = "inherit"; } Uh, from what I see, the for loop will undo what the e.currentTarget.style.display = "inherit" from the previous invocation of toggleAll did. Is there anything I missed? And thanks for the code, but I was just wanting to see if there were any static alternatives. The code I wrote works fine already, I was just wanting to know if there was an alternative I didn't consider.
  8. function set() {this.style.display="inherit";} function reset() {for (let i=navd.length; i-- navd[i].style.display="";} The style.display="inherit" will be replaced eventually with something a bit more elaborate, but the principle will remain the same: the function just overrides the .i>.d {display:none} rule. reset is the whole reason why capturing is better than bubbling: with capturing, reset will be executed first; with bubbling, set will be executed first, and then reset will undo everything, forcing me to add logic to find the previous tree in some way, then clear it, etc. And yes, I understand that event listeners shouldn't be added inline, but I don't think adding listeners everytime the page loads will be scalable once the tree reaches 1,000+ pages, even though it is a SPA. P.S. I realized an optimization to put once the tree grows large: reset could scan the tree for anything with the style attribute set (the active dir), and then selectively clear it, instead of going through the whole class set.
  9. Hello all, I have an SPA with a UI element akin to a directory tree (the grey column on the left) which allows the users to navigate the site's main content: The base of the code is implemented in the following HTML/CSS: <ul id="nav"> <li class="i"> <a href="Services">Services</a> <ul class="d"> <li> <a href="Services/Certificates">Certificates</a> </li> <li class="i"> <a href="Services/Responsabilities">Responsabilities</a> <ul class="d"> <li> <a href="Services/Responsabilities/Transportation">Transportation</a> </li> <li> <a href="Services/Responsabilities/Hospitality">Hospitality</a> </li></ul></li></ul></li> <li class="i"> <a href="Encyclopedia">Encyclopedia</a> <ul class="d"> <li> <a href="Encyclopedia/Society">Society</a> </li> <li> <a href="Encyclopedia/Arts">Arts</a> </li> <li> <a href="Encyclopedia/Technology">Technology</a> </li></ul></li> <li class="i"> <a href="Activities">Activity</a> </li></ul> .i,.i>.d {position:relative} .i>.d {display:none} .i:hover>.d {display:inherit} The <ul>s behave as intended on hover; the objective here is to work out a solution which will override '.i>.d {display:none}' when the user clicks on an <a>. That way, the user's current location in the website will be evident just from the links which are visible - like the left pane of File Manager on Windows. Now, since CSS doesn't have any parent selectors, I must resort to using JavaScript Event Listeners to listen for clicks on an <a> and style the relevant parents accordingly. To update the displayed location on the click of an <a>, all styles in #nav must be reset to default, and then the parents of the <a> that was clicked on must be styled through event propagation. It turns out that the capturing mode is best because then I can implement a clearing routine on the #nav, and the relevant '.i's and '.d's will get the event and handle it, bug-free. Only problem is, AFAIK, only event listeners which are added dynamically can catch events in the capture phase. This means I must do a big: 'use strict'; var nav=document.getElementById('nav'), navd=nav.getElementsByClassName('d'); /* event listeners defined here */ nav.addEventListener(reset,'click',true); for (i=navd.length; i-- navd[i].addEventListener(set,'click',true); in the global scope of a loaded and deferred .js script - which works perfectly, but is just plain ugly. Is there any alternative which would allow me to do this statically (i.e. embedded in the HTML)? Or I can't do any better? P.S. Don't mind the weird content and don't google it - it's not online yet. P.P.S. I posted it here because the issue is with DOM event handling and propagation; if I should put this under scripting or some other topic, please let me know. P.P.P.S. Sorry for the long post - here's a potato
  10. Hmm, I'll try that. Thanks a lot for the email address... and the attention
  11. I noticed this in your while loop: } else if (tries > 0); { The semicolon inserts a blank statement in the 'else if', causing whatever came after it to behave incorrectly. I can't tell how you intended it to behave, but I'm sure you didn't put that semicolon intentionally.
  12. Hello all, my name is Daniel. Started off with stand-alone applications, but am getting the ropes of web programming.
  13. Okay... so, do the devs/maintainers listen to user feedback in any way? Or rather, is there any way a humble user such as me could propose this?
  14. Hello, I was perousing the CSS Transform examples and checked a playit. Do the playits have to use radio buttons for the inputs? Why not use a slider (like <input type="range" />)? Regards,
  • Create New...