Jump to content

N1CK3RS0N

Members
 View Profile  See their activity

  • Posts

    103

  • Joined

  • Last visited

    Never

 Content Type 

Posts posted by N1CK3RS0N

    Javascript Replace Selection?

    in Javascript Help

    Posted

    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 = '<sup>' + txt + '</sup>'; break
        case "subscript": txt = '<sub>' + txt + '</sub>'; 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);
    }
}

     

     

    Toggle Classes for Buttons in Rich Text Editor

    in Javascript Help

    Posted

    You are first going to have to name the items in the toolbar and change the javascript function button up a lil

    so for bold do

    <div onclick="button('bold')" class="button" id="boldBtn"><img title="Bold" alt="Bold" src="images/bold.png" class="image"></div>

     

    function button(a) {
if(!document.getElementById(a+'Btn').style.backgroundColor) { document.getElementById(a+'Btn').style.backgroundColor = "#D5DDE5"; }else{ document.getElementById(a+'Btn').style.backgroundColor = null; }
document.getElementById('editor').contentWindow.document.execCommand(a, false, null);
document.getElementById('editor').contentWindow.focus();
}

     

    that should work for you.

     

    Good luck! Have fun

     

    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. :)

    Javascript Function Question

    in Javascript Help

    Posted

    The problem is the HTML already uses a variable in the function for the color selection.

     

    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?

    Javascript Function Question

    in Javascript Help

    Posted

    I'm not going to read through your code to give specific assistance, but it seems pretty simple to me.

     

    You have two button, one to change the text and one to change the background. You want each button to bring up the same colorpicker. But, when the user selects a color you want it to "know" which element to change, correct?

     

    Here are two possible solutions off the top of my head:

     

    1. Create a global variable to determine what the color will update. Then when the user chooses the button to change text color or background color, the buttons will call the function to display the color picker AND will pass a value to the function ('text' or 'background'). When the funtion to display the color picker runs it will take that passed value and set the global variable. Then when the user selects a color from the picker it will call another function (e.g. changeColor(colorID)) and pass the colorID to be set. That function will check the global variable and call the appropriate function (changeTextColor(colorID) or changeBackgroundColor(colorID))

     

    2. The other option is to have two color pickers. I am assuming the color picker is always there and you are just displaying/hiding it as needed. So, you could have two color pickers - one for the text and one for the background. The buttons could call the appropriate color picker and the picker will make the call the the appropriate function to change the text ot background color.

     

    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.

    Javascript Function Question

    in Javascript Help

    Posted

    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();
	}
}
}

    Javascript Function Question

    in Javascript Help

    Posted

    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

     

     

    JS Positioning Problem

    in Javascript Help

    Posted

    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?

    DOCTYPE issue

    in HTML Help

    Posted

    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

    On Click and unclick?

    in Javascript Help

    Posted

    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.

    Creating a WYSIWYG Editor?

    in Javascript Help

    Posted

    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

    Display: Table-Cell (Internet Explorer Issue)

    in CSS Help

    Posted

    According to W3C.

     

    Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".

     

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

    Display: Table-Cell (Internet Explorer Issue)

    in CSS Help

    Posted

    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]

    FireFox Padding/Margin Issues

    in CSS Help

    Posted

    Yes. The best way to have cross-browser compatibility with margins and paddings is to use two divs instead of one. Set the width (or height) on the outer div, and the margins/paddings on the inner div. Your problem happens when you set a width and side paddings/margins on the same div, or a height and top/bottom margins/paddings on the same div. Doing what I suggested fixes the problem.

     

    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

    FireFox Padding/Margin Issues

    in CSS Help

    Posted

    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?

    Software Developers Project Manager

    in Miscellaneous

    Posted

    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.

    Designers wanted for developing new CMS.

    in Archived Job Offerings

    Posted

    Hello,

     

    I initially wrote a very lengthy post explaining all the details about the project and the other information you would need to know.

     

    Job Information:

    Looking for a long term partnership with 2-3 experienced web designers and developers. Long term paying career.

     

    Job Description:

    Planning, developing, organizing and designing of CONTENT for a Content Management System. It isn't really website "theme design" work. The work will be done out of a default footer and header. Whats needed is the actual design for the content of the website.

     

    Required Skills:

    • xHTML
    • CSS
    • Photoshop

     

    If you are interested and would like more information than please contact me via PM and I will send you the additional details and information about this project.

     

    Warm Regards,

    Cory

    Absolute Positioning Problem

    in CSS Help

    Posted

    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]

    Any designers interested in group purchase of icon collection?

    in HTML Help

    Posted

    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.

    Cloud Computing?

    in Miscellaneous

    Posted

    I think it's more of a buzz word for several different concepts. It seems that core idea is to distribute the data and computing power...

    anyway, you're probably not the only person having problem with understanding what EXACTLY it means.

     

    Haha, yeah. Figured that.

     

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

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.