Jump to content

TwoD

Members
 View Profile  See their activity

  • Posts

    14

  • Joined

  • Last visited

 Content Type 

Everything posted by TwoD

  1. TwoD
    I've looked at both those sites before, which is why I came here. As both sites say, each browser treats things differently, even those claiming to be fully standards compliant have quirks which need to be dealt with. Anyway, I'm in a bit of a hurry atm so I can't make a longer post, but thank you for taking your time reading this.
  2. TwoD
    Eh? I think you misunderstood something here...Let's break it down to a really simple exampleThe client downloads a page which has a single stylesheet, designed to say set the background color of 10000 divs to red. It does this with a selector pointing first to a parent div of those 10k divs and then to all divs within it. That is to avoid having to do class="makeRed" on 10divs.The client then has a few options such as adding more divs or restyle the old ones.When restyling: To avoid having to send 10k divs to the client again, the server simply sends a new stylesheet.The question is how to get this stylesheet into the document in a standard way?
  3. TwoD
    I'm sorry to bump an old thread like this, but I figured it'd be more proper to continue the discussion here rather than start a new one about the same thing.Even tho I'm no longer actively working on the drawing-app project, I'm still interested in finding out if someone has solved/encountered the problem with modifying/replacing stylesheets dynamically. In a fully standards compliant way that is.As it is now, the pages with the script are valid, but the dynamically generated content isn't.
  4. TwoD

    javascript toolkits

    TwoD replied to Tachu's topic in JavaScript

    What do you need a toolkit for?
  5. TwoD
    Hmm, I forgot to remove a part there.The me variable is never used so you can remove it and the comment below.I was going to make the event handler in another way first, but it turned out to be easer the way it's now.
  6. TwoD
    Because it changes dynamically based on what the user wants.It's basically a drawing app querying the server to get new data.And I can't pregenerate all the stylesheets neccessary to cover every combination they might come up with...I won't go into details about why it uses the server now, but it can run entierly on the client too, but that doesn't make a difference when it comes to the stylesheets.
  7. TwoD
    Yeah, but the company I'm developing this app for has as a goal that no plugins at all should be required to run "the big app" in which mine will be a small part. JavaScript/CSS support is not something I need to think about in this case, since "the big app" requires those anyway.This is by no means meant to replace Flash or Java and is, like you said, more of a proof-of-concept and a fun thing to play around with.Even if this wasn't about a vector graphics engine, it would still be nice to be able to modify stylesheets in a standard way.
  8. TwoD
    No, the only way of directly accessing a stylesheet is via the stylesheets collection. But according to W3C, it's not supported.Also, it's much more complicated than just replacing the <style> tag with a JavaScript since browsers can't agree on how to access the actual css rules.
  9. TwoD
    The problem lies on these lines: <html><head><title>My Contextmenu</title><meta name="comment" content="thanks to [url="http://www.dynamicdrive.com/....tmenu.htm""]http://www.dynamicdrive.com/....tmenu.htm"[/url] /><style type="text/css">/*<div id="contextmenu"><div class="noitem"><span class="alt">V</span>orige</div><div class="item">Volge<span class="alt">n</span>de</div><div class="hr"> </div><div class="noitem">Ac<span class="alt">h</span>tergrond opslaan als...</div><div class="noitem">Als a<span class="alt">c</span>htergrond gebruiken</div><div class="noitem">Achtergrond <span class="alt">k</span>opiëren</div><div class="noitem">Als b<span class="alt">u</span>reaubladitem instellen...</div><div class="hr"> </div><div class="item"><span class="alt">A</span>lles selecteren</div><div class="noitem"><span class="alt">P</span>lakken</div><div class="hr"> </div><div class="item">Snelkoppeling <span class="alt">m</span>aken</div><div class="item"><span class="alt">T</span>oevoegen aan Favorieten...</div><div class="item"><span class="alt">B</span>ron weergeven</div><div class="hr"> </div><div class="item">C<span class="alt">o</span>dering</div><div class="hr"> </div><div class="item">Af<span class="alt">d</span>rukken</div><div class="item">Vernieu<span class="alt">w</span>en</div><div class="hr"> </div><div class="item">Ei<span class="alt">g</span>enschappen</div></div>*/div#contextmenu {border:solid 1px rgb(157,157,161);background-color:rgb(255,255,255);position:absolute; left:10px; top:10px;width:208px; color:rgb(0,0,0); padding:2px;font-family:Tahoma; font-size:12px;}div.item, div.noitem {border:solid 1px rgb(255,255,255);background-color:rgb(255,255,255);width:100%; color:rgb(0,0,0);padding:0 0 2px 16px;text-decoration:none; cursor:default;}div.hr {border:solid rgb(157,157,161); border-width:1px 0 0;background-color:rgb(255,255,255);width:100%; color:rgb(0,0,0);font-size:0; padding:0; margin:3px 1px 3px;}div.noitem { color:rgb(172,168,153); }span.alt { text-decoration:underline; }</style><script type="text/javascript">var objLocalMenu = new Array;function ContextMenu(strName, numWidth) {this.addOption = addOption;this.buildDOM = buildDOM;this.nodes = new Array;this.id = strName;this.height = 4;this.width = numWidth;this.opened = false;objLocalMenu[this.id]=new Array()}function addOption(strClass, strText, numAlt, strDesc, Func) {var objNode = new menuLayer(strClass, strText, numAlt, strDesc);objNode.id = this.id + "_" + this.nodes.length;this.height += (strClass == "hr") ?6 :16;this.nodes[this.nodes.length] = objNode;objLocalMenu[this.id][objLocalMenu[this.id].length]=Func||function(){}; // use a default empty function if none is defined.}function menuLayer(strClass, strText, numAlt, strDesc) {this.text = strText;this.alt = numAlt;this.desc = strDesc;this.dclass = strClass;}function goBack(){history.go(-1); }function goForward() {history.go(1); }function goPrint() {window.print(); }function goRefresh() {location.reload(); }function CreateMenu1() {var objMenu = new ContextMenu("Background",208);objMenu.addOption("noitem", "Vorige", 0, "Terug naar de vorige pagina", goBack);objMenu.addOption("item", "Volgende", 5, "Terug naar de volgende pagina", goForward);objMenu.addOption("hr");objMenu.addOption("noitem", "Achtergrond opslaan als...", 2, "");objMenu.addOption("noitem", "Als achtergrond gebruiken", 5, "");objMenu.addOption("noitem", "Achtergrond kopiëren", 12, "");objMenu.addOption("noitem", "Als bureaubladitem instellen...", 5, "");objMenu.addOption("hr");objMenu.addOption("item", "Alles selecteren", 0, "Alle items op deze pagina selecteren");objMenu.addOption("noitem", "Plakken", 0,"De inhoud van het Klembord invoegen op de invoegpositie");objMenu.addOption("hr");objMenu.addOption("item", "Snelkoppeling maken", 14, "");objMenu.addOption("item", "Toevoegen aan Favorieten...", 0, "");objMenu.addOption("item", "Bron weergeven", 0, "Bron (HTML) van deze pagina weergeven");objMenu.addOption("hr");objMenu.addOption("item", "Codering", 1, "");objMenu.addOption("hr");objMenu.addOption("item", "Afdrukken", 2, "", goPrint);objMenu.addOption("item", "Vernieuwen", 7,"De inhoud van het huidige frame vernieuwen", goRefresh);objMenu.addOption("hr");objMenu.addOption("item", "Eigenschappen", 2,"De eigenschappen van de huidige selectie bewerken");return objMenu;}function buildDOM() { var objNodesLayer = document.createElement("div"); objNodesLayer.setAttribute("id","contextmenu"); objNodesLayer.style.display = (this.opened) ?"block" :"none"; var me=this // me is needed to keep a reference to the menu object. // Inside the event handler functions, this will be linked to the element itself. // me will be accessible by the event functions because they are nested in the buildDOM function. for (var n=0; n<this.nodes.length; n++) { var Node = this.nodes[n]; var NodeDiv=document.createElement('div'); if (Node.dclass != "hr") { var Char = Node.text.substr(Node.alt,1); var Text = Node.text.replace(Char,"<span class=\"alt\">" + Char + "</span>"); NodeDiv.innerHTML=Text; NodeDiv.className=Node.dclass; NodeDiv.onmouseup=new Function("objLocalMenu['"+this.id+"']["+n+"]();MenuVerbergen();") NodeDiv.onmouseover=function(){ this.style.borderColor='rgb(178,180,191)'; this.style.backgroundColor='rgb(187,183,199)'; }; NodeDiv.onmouseout=function(){ this.style.borderColor='rgb(255,255,255)'; this.style.backgroundColor='rgb(255,255,255)'; }; } else { NodeDiv.className = "hr"; } objNodesLayer.appendChild(NodeDiv); NodeDiv=null; // Needed to stay away from memory leaks. } document.body.appendChild(objNodesLayer);}function MenuStarten(e) { var rightedge = (document.all)?document.body.clientWidth-event.clientX :window.innerWidth-e.clientX; var bottomedge = (document.all)?document.body.clientHeight-event.clientY :window.innerHeight-e.clientY; var Mleft; var Mtop; var Mwidth = 208; var Mheight = 330; if (rightedge < Mwidth){ Mleft = (document.all)?((event.clientX-Mwidth > 0)?document.body.scrollLeft+event.clientX-Mwidth :document.body.scrollLeft): ((e.clientX-Mwidth > 0)?window.pageXOffset+e.clientX-Mwidth :window.pageXOffset) } else{ Mleft = (document.all) ?document.body.scrollLeft+event.clientX :window.pageXOffset+e.clientX } if (bottomedge < Mheight){ Mtop = (document.all)?((event.clientY-Mheight > 0)?document.body.scrollTop+event.clientY-Mheight :document.body.scrollTop): ((e.clientX-Mheight > 0)?window.pageYOffset+e.clientY-Mheight :window.pageYOffset) } else{ Mtop = (document.all) ?document.body.scrollTop+event.clientY :window.pageYOffset+e.clientY } var Menu = document.getElementById("contextmenu"); Menu.style.left = Mleft; Menu.style.top = Mtop; Menu.style.display = "block"; return false;}function CreateMenus() {var objMenu1 = CreateMenu1(); objMenu1.buildDOM();}function MenuVerbergen(e) { if (!document.getElementById("contextmenu")) { return; } var menuElement = document.getElementById("contextmenu"); if (document.all){ if (event.srcElement != menuElement && event.srcElement.parentNode != menuElement && event.srcElement.parentNode.parentNode != menuElement){ document.body.innerHTML = ""; } } else { if (e.target != menuElement && e.target.parentNode != menuElement&& e.target.parentNode.parentNode != menuElement){ document.body.innerHTML = ""; } } return;}document.oncontextmenu=MenuStarten;document.onmousedown=MenuVerbergen;</script></head><body onload="CreateMenus();"><p>This is some text. Click with the right mouse button to activate the custom contextmenu.</p></body></html> Crappy non-scrolling codeboxes...
  10. TwoD
    Just doing myFunc will return a "handle" to the function object without executing the code in it.myFunc() will execute the code and only return what's specificed by the executed return statement in that function. Read all about it here: Private Members in JavaScript.The differences might seem small, but they can be used in powerful ways.
  11. TwoD
    I just meant that the standards doesn't "support", or "include," this particular thing, which would be stylesheet modification. All the browsers do exactly what I want, but the standards say it shouldn't be possible.Thanks to the browsers I can change stylesheets via the styleSheets collection or similar, but using it is horrible. (Details about it on QuirksMode if you haven't tried this.)But they also support using <style> tags in the <body> tag, which makes it a whole lot easier to replace them than to modify them. Read my first post again, I'm dynamically changing the appearance of a large number of <div> tags at the same time, not changing stylesheets depending on the browser. The same stylesheets are used in all the browsers without problems because the style rules in them are simple.An overview of the application where stylesheet modification is needed:In this case, a whole bunch of <div> tags are used to represent pixels in lines drawn by a vector graphics engine.The graphics are generated and stored by the server and can be redrawn and styled by the user to make figures or whatever they want, through queries to the server. To not have to regenerate the whole figure each time a line property, like the color, changes I simply ask the server for a new stylesheet to be applied to that line.There might be hundreds, if not thousands of <div> tags which all have the same stylesheet applied to them to minimize the amunt of inline styling that needs to go with the tags when the line is regenerated.This reduces the amount of transferred data and makes for a much cleaner and lighter code to work with. The actual <divs> are not stored on the server, but the server knows how to recreate them to update the client if the line shape changes.The only real problem with inserting a new stylesheet is that it won't have any effect unless I put atleast one character in front of the <style> tag. An invisible character like a space won't suffice, but a . (dot) will. So I use another <div> to hide that dot. I haven't bothered to check for other solutions for that specific problem yet.The standard alternative I've found would be to request new styling info from the server, travese the DOM, find each individual <div> that needs to be changed and update its inline style according to the parsed server response. Just the traversing/updating part takes alot longer than regenerating the whole line from the server!So yes, there is a standard "solution", but it's not useable in practice.Is there a standard way of dynamically modifying stylesheets? No.Would it be great to have it? Yes.Does it need to be in this exact way? Of course not, as long as it's possible.
  12. TwoD
    But what about that last 1%?I now have an app that I know runs perfectly in IE, FF, NE and Opera for Windows. It's not been tested on other browsers yet so I don't know about them.The only "flaw" in it is the untilization of something which is suppported (with the exact same code) by all the browsers I've tested so far, and that just happens to not be a part of a standard.Still, I'm looking for standard-compliant ways of doing this, just in case somebody decides to run the generated markup through a validator and decides to judge the the whole application based on that.So, what to do when the standards don't support something useful?I could put the project on ice, sit down and wait for someone working with the standards to realize that a developer could possibly find it useful to have a standard way of modifying stylesheets, just like you can modify inline styles.Or I could deploy the app when it's finished, maybe create some buzz about a useful and working, but non-standard, approach. Maybe that'll atleast make someone react.Btw, I'm not trying to redefine it just for this situation, any solution allowing me to dynamically modify/replace the stylesheets would be great. (And possible allowing them to be placed in the <body>, but that is less important.)
  13. TwoD
    You have set the same name on a function, a variable and an element, which is a terribly bad thing. The post variable replaces the function because they both have the same name.If the code runs in IE, you'll have a third object with the same name, because IE treats all ids as a kind of global variables.Give all your elements, variables and functions unique names/ids to solve this.
  14. TwoD
    Hello all, first post here too =)I've been using this "feature" to dynamically change the appearance of a large number of <div> tags by replacing their governing <style> tag with a new one generated by the server.Since this isn't exactly good practice according to the standards, I've been looking for alternative ways, and of course found none.The whole point of my application is the ability to change the appearance of all those <div> tags without having to regenerate them all from scratch.The different stylesheet collections are a mess to work with, even if they were standard compliant collections.And the easiest way to do that is to simply replace the relevant <style> tag with a new one, not to mention that it works in all major browsers.I don't see why this (or a similar method) isn't part of a standard....I say one should be redefining the standards to allow some things that are really useful and already supported by the major browsers, instead of just going "it's not supposed to be there so it's evil".The Web evolves, get used to it
×
×
  • Create New...