N1CK3RS0N

Hello all, I'm working on a rich-text editor, aka a WYSIWYG text editor. I'm doing some testing now with custom commands to create rich text. By default there is an execCommand function which lets you apply effects to rich text, but you have limited control on the HTML which is out put and how it works in general. This new method I thought of seems pretty effective. The problem at the moment is that it replaces all the text in the text area with the modified text you highlighted. I need it to replace just the highlighted text. I'm still new to JavaScript so please bear with me. function button(type) { var txt = ''; editor_body = document.getElementById('editor').contentWindow.document; if (editor_body.getSelection()) { txt = editor_body.getSelection(); } else if (editor_body.selection.createRange()) { txt = editor_body.selection.createRange(); } else return; switch (type) { case "bold": txt = '<b>' + txt + '</b>'; break case "italic": txt = '<i>' + txt + '</i>'; break case "underline": txt = '<u>' + txt + '</u>'; break case "strike": txt = '<strike>' + txt + '</strike>'; break case "supscript": txt = '^{' + txt + '}'; break case "subscript": txt = '_{' + txt + '}'; break case "alignleft": txt = '<div style="text-align: left;">' + txt + '</div>'; break case "aligncenter": txt = '<div style="text-align: center;">' + txt + '</div>'; break case "alignright": txt = '<div style="text-align: right;">' + txt + '</div>'; break case "alignjustify": txt = '<div style="text-align: justify;">' + txt + '</div>'; break case "ol": txt = '<ol>' + txt + '</ol>'; break case "ul": txt = '<ul>' + txt + '</ul>'; break case "insertlink": insertlink = prompt("Enter image URL:", "http://"); if ((insertlink != null) && (insertlink != "")) {txt = '<a href="' + insertlink + '">' + txt + '</a>'; } break case "insertimage": insertimage = prompt("Enter image URL:", "http://"); if ((insertimage != null) && (insertimage != "")) {txt = '<img src="' + insertimage + '">'; } break case 'insertvideo': insertvideo = prompt("Enter video URL:", "http://"); if ((insertvideo != null) && (insertvideo != "")) {txt = '<object type="application/x-shockwave-flash" data="' + insertvideo + '" width="640" height="385"><param name="movie" value="' + insertvideo + '" /></object>';} break } editor_body.body.innerHTML = txt; document.getElementById('editor').contentWindow.focus(); } function Start() { var e; document.getElementById('editor').contentWindow.document.designMode = "on"; try { document.getElementById('editor').contentWindow.document.execCommand("undo", false, null); editormode = "true"; } catch (e) { editormode = "false"; } if (document.addEventListener) { document.addEventListener("mouseup", dismissmenu, true); document.getElementById("editor").contentWindow.document.addEventListener("mouseup", dismissmenu, true); document.addEventListener("keypress", dismissmenu, true); document.getElementById("editor").contentWindow.document.addEventListener("keypress", dismissmenu, true); } else if (document.attachEvent) { document.attachEvent("mouseup", dismissmenu, true); document.getElementById("editor").contentWindow.document.attachEvent("mouseup", dismissmenu, true); document.attachEvent("keypress", dismissmenu, true); document.getElementById("editor").contentWindow.document.attachEvent("keypress", dismissmenu, true); } }

I'm still new to JS. Working on a WYSIWYG text editor. Was wondering if anyone had any ideas of how I could make it toggle between WYSIWYG and BB code.

Any ideas?

Exactly what I did and here is the problem. You click bold, now the bold button class is shown as active. Now when you click into an area with not-bold text, it still shows as active. So the real way to do this would be to find what effects are currently applied to what you are typing, and then change the class based on that. Only problem is I don't know how to find what effects are applied to the current text. Find how to do that and we got ourselves an answer.

I got my WYSIWYG text editor working pretty good. I'm trying to figure out how I should make the buttons classes toggle. Heres the demo. http://www.cigarcompendium.com/WYSIWYG/index.html I want it so when bold is currently enabled on the text you are typing then the bold button class will change to active. Just not sure how to check if that effect is currently enabled in the editor.

Interesting. Just curious but why would you not want FF users to be able to access a site?

Huh? HTML does not use variables. HTML is just a markup language. Here is a very rudimentary example of option 1 Epic. Thank you man. I owe ya one All thats left now is to get the div to position itself based on which was clicked. And WYSIWYG editor pretty much done for the JS part. BTW, should i always add that return; to the end of my functions?

Thanks. I'm kinda confused a bit. Sorta understand what you mean but kinda confused. I've been doing JavaScript for like a week now. Just sort of editing different things from different guides and trying to optimize it for minimal coding. Is it to much to ask for you to show me what you mean by showing me the coding? Doesn't seem all that complex, I'm just not fully clear on what you mean and how I should do it. I'm more of a visual learner It does kind of sound like what I'm trying to do in my 2nd post. The problem is the HTML already uses a variable in the function for the color selection. I didn't know how to use a variable from the HTML and from the JS in 1 function. Thanks for the help though, appreciate it.

I tried doing something like this, but had no luck... function colorlist(a) { var colortype = a; document.getElementById('colorlist').style.visibility="visible"; document.getElementById('editor').contentWindow.focus(); coloroption(colortype); } function coloroption(colortype) { if (colortype == "forecolor") { function color(color) { document.getElementById('editor').contentWindow.document.execCommand("forecolor", false, color); document.getElementById('colorpalette').style.visibility="hidden"; document.getElementById('editor').contentWindow.focus(); } } else if (colortype =="hilitecolor") { function color(color) { document.getElementById('editor').contentWindow.document.execCommand("hilitecolor", false, color); document.getElementById('colorpalette').style.visibility="hidden"; document.getElementById('editor').contentWindow.focus(); } } }

Hello, I'm working on my first JavaScript project at the moment. I'm working on making a WYSIWYG text-editor. At the moment I'm trying to figure out how to get my text color changer to work. Heres the demo. http://www.cigarcompendium.com/WYSIWYG/index.html What I am trying to do is have them click the button for either text color or background color, and then it opens up the color window. That part works. What I'm having trouble is passing a variable into the second function which controls what color they select and applies the changes to the text. Basically I want the first function to tell the color window to appear and tell the second function which color they want to change, foreground or background color. You can view the HTML and JS on that demo. Thanks

Hello, I'm having some trouble getting the positioning of this JS to work. if ((this.id == "forecolor") || (this.id == "hilitecolor")) { parent.command = this.id; buttonElement = document.getElementById(this.id); document.getElementById("colorpalette").style.left = getOffsetLeft(buttonElement); document.getElementById("colorpalette").style.top = getOffsetTop(buttonElement) + buttonElement.offsetHeight; document.getElementById("colorpalette").style.visibility="visible"; } The problem is when I declare a doctype for the HTML page. For some reason the positioning stops working. It positions an iframe on the button that was clicked. Ideas?

Well I been having a series of problems and it comes down to using the following. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Currently I'm working on a WYSIWYG text editor. Without DOCTYPE, I cannot use div:hover CSS for mouse over effects on a DIV. And with DOCTYPE, the positioning is way off on the pop-ups for color selector. Here is a demo of the WYSIWYG text-editor. http://www.cigarcompendium.com/WYSIWYG/index.html If you view source and save it locally and make some tweaks to try it out, you can see the problems that occur when you add and remove the DOCTYPE. Appreciate any help. Thanks

I'm working on a WYSIWYG editor. I'm not that great with JS at the moment. I'm trying to make the buttons on the toolbar turn a color if they are enabled and then shut off when disabled. For example. If you click bold to enable bold font weight, it will turn the background of the button darker while enabled. Then I want it to return to normal when clicked again to disable the bold font weight. Using "this.style.background" in the function that handles the things onclick works, but I cannot get it to disable when u click again.

Hello, I was wondering if anyone knows how to create a WYSIWYG text editor using JavaScript and HTML. If there are any useful tutorials out there please feel free to share. I'm not interested in an already coded one. I would like to create my own, somewhat of learning experience. Thanks

According to W3C. Any other solutions you would think to work around this? Other than using a table.

I'm working on a semi-complex theme. For the columns I find that using "Display: Table-Cell;" works better than "Float: Left;" because float doesn't account for borders and padding. You have to place another Div inside the column Div to and do padding on the inside one. Its a hassle. "Float: Left;" div's also don't expand with the other cells which are aligned horizontally with them, where as "Display: Table-Cell;" does. In Fire Fox it works great, but in Internet Explorer there is major issues. I attached a demo so you can see for yourself what the problem is. Basically it seems as though Internet Explorer is still treating the Div's as "Display: Block;" instead of "Display: Table-Cell;". Instead of aligning like this... Left Column | Middle Column | Right Column ...it is displaying like this... Left Column Middle Column Right Column Any ideas or thoughts as to what causes this? Thanks a million [attachment deleted by admin]

Can you give more details on what it is your trying to do and what the problem is that is occuring.

Indeed. Thats how I ended up solving it. Been a while since doing templates, mostly been doing PHP lately. Remember that trick while watching TV then ran to my computer to try it out hehe. Thanks though

Hello, I'm working on a new design for my CMS and I'm trying to get this issue straightened out. The problem is FireFox adds padding outside the box, instead of inside. So if you had a box with 200px width and added 10px padding, the box is now 220px, instead of 200px with its contents confined to 180px; What I'm trying to do is running the body at 100% width. The main column is 65% width and the side column is 35% width. I want to add some padding between them so they do not run right against eachother, so I set the margins on the sides of the columns to 5px. But now it expands further than the 100%, so it wraps that 2nd column down to another row. Any ideas?

I'm trying to find something similar to the old sourceforge.net. I signed up for the new one and I don't like it. I need a project manager where you can sort of post things that need to be done, and people on the development team can select to work on them and post info about it and whatnot. Just a way to keep organized. Like a task list. I've tried several different sites listed here: http://en.wikipedia.org/wiki/Comparison_of_open_source_software_hosting_facilities None are really what I'm looking for. Most are just ways to distribute software and have people report bugs. The closest thing to what I need is zoho project manager.

Hello, I'm trying to use absolute positioning to organize the columns of a layout. The benefit is that you can easily shift columns around by just editing the positioning on the CSS style sheet as apposed to having to edit the HTML itself. I attached a demo so you can try for yourself. I also pasted the code below. Basically the problem is this. The body which is containing the columns doesn't expand with the columns because they are using absolute positioning. It treats it as if it isn't contained in the body itself. This is no problem if the columns are not contained in a body for the theme, but is a big problem if it is. In the example. I have the body with a white background. I would like it to expand with the columns. The only solution I could think of would be to use a javascript which determines the height of the tallest column and then sets the height of the body to that. I would like to avoid that if possible. <div class="body"> <div class="col1"> </div> <div class="col2"> </div> <div class="col3"> </div> </div> .body { position: relative; background: #ffffff; } .col1 { position: absolute; left: 0px; width: 300px; height: 200px; background: #00ff00; } .col2 { position: absolute; right: 0px; width: 500px; height: 400px; background: #ff0000; } .col3{ position: absolute; left: 300px; width: 200px; height: 300px; background: #0000ff; } [attachment deleted by admin]

Hello, Been a while since I used PHPfreaks, new forum theme looks very nice! I've been searching for quite some time now for a good icon collection so I can use on various websites I design. The difficult part is finding a large set with a good variety of icons that have the same matching style. And the few good sets that there are have a rather large price size. I found Iconshock a week ago or so, and they got a LOT of different style collections which cover a LOT of different categories. All the icons in their collections match that specific style. I really like their work. http://www.iconshock.com/icon-collections/toolbar-icons-FULL%20REAL%20VISTA%20+%20VECTOR.html I was interested in buying their Real Vista icon collection. Its clean vector style icons similar to the infamous Windows Vista style icons. It comes with the following categories: general accounting networking web design graphics mail multimedia business data education jobs medical security video production communications 3d graphics transportation text food construction project managment computer gadgets electrical appliances flags development real state mobile All icons come optimized for the following sizes and formats: Sizes: 256x256, 128x128, 72x72, 64x64, 48x48, 32x32, 24x24, 16x16 pixels Formats: PNG-GIF-ICO-BMP Each collection is about $100.00-$200.00 but if you purchase the entire collection the price is just $300.00. Which is a great deal. There is also an option to purchase with the vector files for photoshop for an aditional $50.00. When I added to cart it also said for additional money you can get ALL their collections, and they got a LOT For only $80 USD additional, get the Entire plus Vector, which contains all our collections with vector editable sources, 707924 icons more. For only $50 USD additional, get the Entire Collection, which contains all our collections, 398524 icons more. To view all their collections check out this page. http://www.iconshock.com/professional-icons.php I was wondering if there's any designers out there who would be interested in doing a group purchase of the icon set. If you are please post here or PM me.

Haha, yeah. Figured that. As one article I read said, "everyone seems to have a different definition of 'cloud computing'".

Top Style Pro. Mainly a CSS and Javascript editor. Though it supports editing for all types of code. HTML, CSS, JavaScript, PHP, etc. Has nice features and lets you control the syntax highlighting and stuff.

Hello, I was wondering if anyone could help explain this term to me. I'm starting to hear it a lot now. Tried looking up some definitions on it via Google and on Wikipedia but its all really technical and confuses me haha. http://en.wikipedia.org/wiki/Cloud_computing