Return Styles: Pseud0ch, Terminal, Valhalla, NES, Geocities, Blue Moon.

Pages: 1-

Javascript question

Name: Anonymous 2011-08-19 14:28

How do you add some content in a specific place in Javascript at the user's bequest? I'm writing a sort of CSS designer with the idea that it shows the user what the style looks like by writing it to a file and then loading it (using PHP). The thing is I want it to actually be useful, so it needs to be able to have as many elements and properties as the user wants. I know that trick where you have an empty <div> and set its innerHTML member but that will leave me a set number, and I don't want to just stick billions and billions of <div> tags inside my code (its already messy enough).

tl; dr how do I dynamically instert code into a webpage at a set position but allowing an arbitrary number of insertions?

Name: Anonymous 2011-08-19 14:35

Fuck off. Web development is for chumps.

Name: Anonymous 2011-08-19 14:38

I for one welcome our Lisp overlords.

Name: Anonymous 2011-08-19 14:49

>>3
fuck you lithpfag

Name: Anonymous 2011-08-19 14:57

>>2
I also know x86 assembly, C, C++, C#, Python and Perl. I felt like fucking about with web development, since I'm pretty poor at it. Usually, I'm more interested in applications programming... In fact, this is the first real web development I've ever done.

Oh and I'd be willing to bet the reason you say "web development is for chumps" is because you tried it once and sucked at it (probably tried to make a website, but it ended up looking like dogshit (or a virtual terminal because you're so original and the first person to make a website look like a tty) because you're an aspie and aspies cannot into design).

>>3
I've been toying around with Haskell. It's confusing for me but I'll get it.

Name: Anonymous 2011-08-19 15:32

I don't really understand your question.

If you're working in Javascript then in all likelihood you have direct access to a DOM API already, so you don't have to go through any middlemen. You'd just need to serialize the current state of the DOM, or use some kind of ``Unit of Work'' implementation, if you want to store/retrieve user changes.

Clues: CSSStyleDeclaration, window.getComputedStyle(), currentStyle, document.styleSheets, rules, cssRules

Name: Anonymous 2011-08-19 15:57

I don't really understand your answer.

I have an interface that looks like this:

|   Comment   |
| CSS Section |
{
    |   Property   | : |    Value    | ;
    Add property
}
Add section

The boxed-in things are text entries and the underlined things are URLs (which are just <a href="#" onClick="someFunction()">)

When the user clicks "Add property" I want it to insert "|   Property   | : |    Value    | ;". I can do that fine by putting a <div> there and changing it's innerHTML member, but that means limiting the number of properties that the user can have and I want it to be limited by the hardware, OS or browser, but not by my HTML code.

The same goes for "Add section".

Name: Anonymous 2011-08-19 16:13

>>4
You're trying way too hard.

Name: Anonymous 2011-08-19 16:13

>>7
RTFS
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-core.html#ID-1950641247

What you want has been there since 1998.

Name: Anonymous 2011-08-19 16:16

>>9
I knew it was possible, just not what it was called or how to do it. I googled it.

Name: Anonymous 2011-08-19 16:19

>>10
READ the contents of that link.

Name: Anonymous 2011-08-19 16:29

>>11
I did. I read this too: https://developer.mozilla.org/En/AppendChild
I've heard of HTML DOM before but I didn't know what it was.

Is this how you do it?
var div = document.createElement("div");
                div.innerHTML = document.getElementById("ee2e7a91").innerHTML;
                document.body.appendChild(div);

Name: Anonymous 2011-08-19 16:31

>>12
It's not working, I forgot to mention.

Also, sorry about the formatting.

Name: Anonymous 2011-08-19 17:28

if you replace:


div.innerHTML = document.getElementById("ee2e7a91").innerHTML;

with


div.innerHTML = 'WEJOFWJEFOJDASOKASDFOJSRGOKSFGOHSODGK!!';

will it show up?

Name: Anonymous 2011-08-19 17:34

>>12

that's how you do it, but i would maybe use jquery for very simple html insertions

$("#idOfElementToAppendTo").append("<div id='newDiv'>anus</div>")

i would use a custom templating function with tiny html templates stored in <script type="text/template"> tags for more involved dynamic stuff

Name: Anonymous 2011-08-19 17:55

>>14
[quote]ee2e7a91[/quote]
Is the first section of a UUID.

>>15
Alright, thanks, I didn't really want to use jQuery for such a small project but if I'll do it anyway.

Name: Anonymous 2011-08-19 18:08

>>16

then it should be working. Have you tried looking at the error console to see if the script is running into an error and stopping before that gets executed? On firefox, it's under Tools->Error Console. If not that, then are you sure the code is being executed? You can stick an alert('qweweofijwef'); to verify that.

Name: Anonymous 2011-08-19 18:18

>>17
I have looked at the error console, no errors were being reported.

function add_property()
{
    alert("Add property");
    var div = document.createElement("div");
    div.innerHTML = document.getElementById("ee2e7a91").innerHTML;
    document.body.appendChild(div);
}
The alert is displayed but nothing else happens (the page source when viewed from Firefox stays the same (yes, I re-opened it, I know it doesn't refresh automatically)).

Name: Anonymous 2011-08-19 18:21

>>15
jquery
custom templating function with tiny html templates stored in <script type="text/template"> tags for more involved dynamic stuff
Why the fuck do people love overcomplicating things?

Get the Node of the element you want to add into with getElementById or whatever suitable. appendChild() your new element.

Simple as that.

Firefox has a DOM Inspector you can use to see what it's doing.

Name: Anonymous 2011-08-19 18:27

I wrote this in 2 minutes. Probably not valid HTML nor JS but it works and gets the point across.
<html>
<body>
<script type="text/javascript">
function add_property() {
 var d = document.createElement("div");
 d.innerHTML = "Hello world!";
 document.getElementById("test").appendChild(d);
}
</script>
<div id="test">
This is the first line.
</div>
<input type="button" onclick="add_property()" value="add div">
</body>
</html>
Works in everything from IE6 to FF4 (tested).

Name: Anonymous 2011-08-19 18:29

>>18

that's very strange. I would try checking the value of that getElemntById. If the right hand side is in fact a non empty sting, then you should see something at the bottom of the page after that executes.



javascript:div=document.createElement('div');div.innerHTML='<i>hai thar!</i>';document.body.appendChild(div);void(0);
please copy and paste the above into your browser url bar, to see the effect!

Name: Anonymous 2011-08-19 19:17

>>19

it's better to store large chunks of html as html than as javascript code

Name: Anonymous 2011-08-19 19:25

>>21
function add_property()
{
    alert("Add property");
    var div = document.createElement("div");
    div.innerHTML = document.getElementById("ee2e7a91").innerHTML;
    if (document.getElementById("ee2e7a91").innerHTML == null)
        alert("null");
    else
        alert("Not null");
    document.body.appendChild(div);
}
Well, I tried this code, and the second alert says "Not null" so it is returning an element handle. Your code works, though.


I just tried this:
alert(document.getElementById("ee2e7a91").innerHTML);
and it is blank.

That <div> is not blank though:
<div id="ee2e7a91">
    <tr>
        <td></td>
        <td>
            <select>
                <?php
                    /*
                     * Generate list of options
                     */
                    $file = fopen("res/properties.lst", "r");
                    while (!(feof($file))) {
                        $string = rtrim(fgets($file));
                        if ($string != "")
                            echo "<option value=\"$string\">$string</option>\n";
                    }
                    fclose($file);
                ?>
            </select>
        </td>
        <td>:</td>
        <td>
            <input type="text" />;
        </td>
    </tr>
</div>

>>20
Thanks, I'll take a look. I'm using FF6 as of today, btw.

Name: Anonymous 2011-08-19 19:32

>>23

you might want to try alert(blahblah.innerHTML) instead of using that if statement, as the empty string might not be null. I can never keep corner cases like this straight.

Name: Anonymous 2011-08-19 19:37

>>24
I tried that as well, it comes out blank.
>I just tried this:
>alert(document.getElementById("ee2e7a91").innerHTML);
>and it is blank.

I ran this:
alert(document.getElementById("ee2e7a91").innerHTML);
alert(document.getElementById("dda3fb44").innerHTML);
alert(document.getElementById("f15a1547").innerHTML);
and only the first one came out blank.

The second one is another div tag (I can't remember why, but it contains ee2e7a91 (I tried making ee2e7a91 the child of body instead but it didn't make a difference)) and the second is the <select></select> code I posted above.

Name: Anonymous 2011-08-19 19:42

>>25
I'm going to sleep now, since tomorrow I go on holiday to Spain. I probably won't have Internet access for about a week either, so hopefully this gets resolved in the morning. If not... this is spa/prog/rta, it'll probably still exist in a week.

Name: Anonymous 2011-08-19 20:23

>>25

it sounds like you might have an issue with e script running before the body is done loading. I might be wrong, but you can try moving your script tag to the end of the document. Good luck with everything.

Name: Anonymous 2011-08-20 5:37

2011
Using innerHTML
I really hope you guys don't do this.

Name: Anonymous 2011-08-20 8:10

>>28
>2011
>saying really instead of seriously
I seriously hope you guys don't do this
costanza.jpg
what is this i don't even
I SERIOUSLY HOPE YOU GUYS DON'T DO THIS
COST
ANZA
.
JPG
I SERIOUSLY
HOPE
YOU GUYS
DON'T DO THIS


>>27
Alright. I'll play around a bit more when I get home.

Name: Anonymous 2011-08-20 15:18

>>29
/polecat kebabs/, AyKannotuKuotto-san

Name: Anonymous 2011-08-20 16:45

open chromium
right click
inspect element
go to javascript console
type "window"

Name: Anonymous 2011-08-20 19:18

>>28
>>29
fucking ouch, niggerii

Name: barbour mens classic duffle 2011-12-01 22:37

There are many brands of <a href="http://www.barbourjackets-uk.org/"><strong>barbour fusilier</strong></a> in the market today. Each of the brand promises to bring out something new to the customers.
Don't change these.
Name: Email:
Entire Thread Thread List
All trademarks and copyrights on this site are owned by their respective parties. All comments and posts are the responsibility of their own posters.
- Tinychan + 2ch Mode -