I have to choose an online WYSIWYG editor. I'm pending between TinyMCE and Xinha. My application is developed in Asp.Net 3.5. Could you help me with with some pros and cons?
hi
I'd like to integrate a theme tag to my elements so they appear in diffrent colours. But since the css selectors have the same css specificity the latest overrides the earlier defined rule.
this is an example that shows my problem:
....
<div class="red">
<div class="box">This should be red</div>
<div class="yellow">
...
<div class="box">This should be yellow (nested in x levels under the div.yellow)</div>
...
</div>
....
and here my css
.box { width: 100px; height: 100px; }
.yellow { background-color: yellow; }
.red { background-color: red; }
the box should be listed somewhere, but as soon as it is a sub child of another color definition it should been overwritten.
thanks for any help!
//jim
When I have to render textarea content to the front end I usually pass it thru a function that converts newlines to <br/> tags and double newlines signal paragraph tags so blocks of text get surrounded by <p> and </p> tags.
To save time I usually use a ready made PHP function from the wordpress codebase. You can get the link from the man himself:
http://ma.tt/scripts/autop/
If you check it out you'll see it does some heavy lifting with about 20 regular expressions.
I know I could use a wysiwyg editor (like TinyMCE or CKEditor) that can format the data on the client and then send it to the server (most of them add <p>..</p> tags by default) but I want to know the experience of others in handling raw textarea input and then displaying it on the front end.
Hey,
I have an input text :
<input name="Email" type="text" id="Email" value="[email protected]" />
I want to put a default value like "What's your programming question ? be specific." in StackOverFlow, and when the user click on it the default value disapear.
Ok, I have managed to fix my version of this example using a multitude of hacks and I would like to see how others would tackle this problem making this cross-browser compatible without too many hacks.
<div class="searchDiv">
<img src="Images/left.gif" class="left" height="19" width="3" />
<input id="TextBox" type="text" class="searchField" />
<img src="Images/right.gif" height="19"width="3" class="right" />
<a href="" class="submit">Submit</a>
<img src="Images/box-arrow.gif" class="linkArrow" width="8" height="14" />
</div>
I am using a Transitional DTD in my example.
Based on the everyone else's CSS examples, comments and answers I will make the final vote.
I'd love to see more of these scenarios come up so that people have a library of "best practice" methods which they can find on SO.
Good luck
I have two div containers which are structured as follows:
<div class="outer-div">
<img src="images/point.png" class="img-a1">
<img src="images/point.png" class="img-a2">
Lots of text goes here.
</div>
<div class="outer-div">
<img src="images/point.png" class="img-a1">
<img src="images/point.png" class="img-b2">
Some more text goes here
</div>
The styles associated with this are as follows:
.outer-div {
position: absolute;
top: 0px;
left: 0px;
width: 500px;
}
.img-a1 {
float:left;
z-index:-1;
position:relative;
margin-left: 250px;
margin-bottom: 100px;
}
.img-b1 {
float:right;
z-index:-1;
position:relative;
margin-left: 250px;
margin-bottom: 100px;
}
img-a2 {
float:left;
z-index:-1;
position:relative;
margin-left: 400px;
margin-bottom: 200px;
}
img-b2 {
float:right;
z-index:-1;
position:relative;
margin-left: 400px;
margin-bottom: 200px;
}
The result of this is to produce something like the following, where ... is the text from div-a and ||| is the text from div-b:
.....|||||
.....|||||
.. ||
.. ||
However, since the second div is placed immediately above the first div, none of the text in the second div can be selected, although it can be seen since there is just empty space, and a 1x1 px image above it.
Is there a way to get the text from the lower div to be selectable, without making the upper div unselectable?
I was looking at this question: http://stackoverflow.com/questions/117641/how-to-remove-duplicate-elements-from-an-xml-file
It has <ns0: for ? I have never seen it before.
Is there a possibility to turn off the automatic enclosing of all written content within <p></p> in CKEditor 3.x?
I tried
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
but this just changes the inline linebreaks to <br /> while leaving the enclosing paragraph.
Currently writing "Test" produces this output
<p>
Test</p>
but I want it to be simply
Test
Is there a configuration property for this or would another inline editor to be better suited for this?
I'm using Ruby on Rails, Formtastic gem, jQuery and ketchup to validate my form.
I'm submitting the form created by Formtastic inside a modal box using ajax:
<% semantic_form_remote_for @contact_form, :url => '/request/contact' do |f| %>
I have a validation plugin verifying the fields on the form:
$(document).ready(function() {
$("#new_contact_form").ketchup();
});
The problem is that semantic_form_remote_for generates an onSubmit ajax request that the jQuery validation plugins won't prevent, since it's not a normal form submission.
One question on stackoverflow suggests using :condition on the remote form declaration to fire a javascript function, but I can't do that since I'm not using a function, but rather relying on a jQuery handler.
I also tried putting ketchup within a submit event handler:
$(document).ready(function() {
$("#new_contact_form").submit(function() {
$('#new_contact_form').ketchup();
});
});
No luck. Form still submits.
I also tried using the beforeSend option of jQuery.ajax:
$(document).ready(function() {
jQuery.ajax( {
beforeSend: function(){ $('#new_contact_form').ketchup(); }
});
});
Validation fires off, but form is still submitted.
I switched to jQuery Validation plugin just to see if it was due to some limitation in Ketchup. It turns out that Validation has a submitHandler option:
$(document).ready(function() {
$('#new_contact_form').validate({
submitHandler: function(form) {
jQuery.ajax({
data:jQuery.param(jQuery('#new_contact_form').serializeArray()),
dataType:'script',
type:'post',
url:'/request/contact'
});
return false;
}
});
});
This works when I use a regular semantic_form_for instead of semantic_form_remote_for, but alas, I would rather use Ketchup.
Is Ketchup just woefully lacking? Am I forced to use jQuery Validation?
I am working on a CMS site that uses dynamic navigation. There is one link on the site that I would like to be able to open in a new window. However, since this is a dynamic environment I can't add the standard, target="_blank" to the link. so how can i open the link in new window without using jquery ?
I've been tinkering around with the excellent Superfish drop-down menu to fit my needs. Here's the result. Still, there are two oddities I need to fix.
Since I changed the font family and font size used for the items in the menu bar, the drop-down menus are aligned incorrectly a few pixels lower than where they should be.
Secondly, when I hover over a menu item that has a submenu, an arrow to the right is displayed but it's not as visible as it should be due to the light background color. Can I change this quickly without making a new arrow image?
Hello All,
I am investigating a possible issue with double submits and I am looking at the possibilty of a double submit from a webflow execution.
I have read many times that webflow will handle double submits, there are plenty references here. However I then came across I a forum response on the spring source forums contradicting what I read saying,
SWF synchronizes on the conversation. Only one request will be processed at a time per conversation.
Take note that if you're using snapshots, then it's possible repeatedly clicking on the submit button will generate a second request. I would recommend setting history to invalidate or discard in the transition from your view-state.
We do have snapshots enabled but the book notes that using snapshots actually allows to solve the double submits. Does anyone have any insight on this?
Thanks.
I have set up a demo that has 5 floating <div>s with rotated text of varying length. I am wondering if there is a way to have a CSS class that can handle centering of all text regardless of length. At the moment I have to create a class for each length of characters in my stylesheet. This could get too messy. I have also noticed that the offsets get screwd up is I increase or decrease the size of the wrapping <div>.
I will be adding these classes to divs through jQuery, but I still have to set up each class for cross-browser compatibility.
.transform3 {
-webkit-transform-origin: 65% 100%;
-moz-transform-origin: 65% 100%;
-ms-transform-origin: 65% 100%;
-o-transform-origin: 65% 100%;
transform-origin: 65% 100%;
}
.transform4 {
-webkit-transform-origin: 70% 110%;
-moz-transform-origin: 70% 110%;
-ms-transform-origin: 70% 110%;
-o-transform-origin: 70% 110%;
transform-origin: 70% 110%;
}
.transform5 {
-webkit-transform-origin: 80% 120%;
-moz-transform-origin: 80% 120%;
-ms-transform-origin: 80% 120%;
-o-transform-origin: 80% 120%;
transform-origin: 80% 120%;
}
.transform6 {
-webkit-transform-origin: 85% 136%;
-moz-transform-origin: 85% 136%;
-ms-transform-origin: 85% 136%;
-o-transform-origin: 85% 136%;
transform-origin: 85% 136%;
}
.transform7 {
-webkit-transform-origin: 90% 150%;
-moz-transform-origin: 90% 150%;
-ms-transform-origin: 90% 150%;
-o-transform-origin: 90% 150%;
transform-origin: 90% 150%;
}
Note: The offset values I set were eye-balled.
Update
Although I would like this handled with a stylesheet, I believe that I will have to calculate the transformations of the CSS in JavaScript.
I have created the following demo to demonstrate dynamic transformations. In this demo, the user can adjust the font-size of the .v_text class and as long as the length of the text does not exceed the .v_text_wrapper height, the text should be vertically aligned in the center, but be aware that I have to adjust the magicOffset value.
Well, I just noticed that this does not work in iOS...
I have a web page which allows the user to carry out various operations that in turn modify the database. Also, this web application needs to keep track of various fields in database that keep changing with time. Is refreshing the page every few seconds the best possible way to implement this? For example, if there is a long list on the page requiring scrolling, it is hard to view the list since the page keeps resetting due to the refresh. I know, there are ways to retain the position of the scroll. But, could I use something more efficient?
I have tester.php file which I want to run on the browser and I have created symlink to it in my public_html folder, but still when I try to run it, its not working and gives me following error message.
Access forbidden!
You don't have permission to access the requested object. It is either read-protected or not readable by the server.
If you think this is a server error, please contact the webmaster.
Error 403
web.upc03.dev.com
Sun Apr 4 22:41:23 2010
Apache
I am not sure as to why am I getting this error message, I have check all file permissions settings and it seems to be fine.
My File permissions settings are:
lrwxrwxrwx for tester.php
Is there something that should be done other way or is this not the proper approach ?
Hi folks,
I'm trying to add textures and shadows outside div elements in a webpage, without using "wrappers".
Any suggestions?
These are a few examples:
Help would be very much appreciated!
Hi guys,
In my HTML page I have 2 select menus with IDs "month" and "day" - "day" is empty when the page loads, "month" has 12 options with values 1-12 corresponding to January - December.
"month" has an onchange event which calls this function:
function showOutboundDays(month)
{
if(month==4 || month==6 || month==9 || month==11)
document.getElementById('day').innerHTML='<option value="1">1</option><option value="2">2</option>'; etc. up to 30
else if(month==2)
document.getElementById('day').innerHTML='<option value="1">1</option>'; etc. up to 28
else
document.getElementById('day').innerHTML='<option value="1">1</option>'; etc. up to 31
}
(just imagine there are braces around the option tags to help you see...)
I think it's pretty clear to see what I'm trying to achieve...and everything works fine apart from the innerHTML of the select with ID "day" doesn't get filled at all, regardless of what month you pick. And I know the problem is with this stage of the function because when I change the if, elseif and else code-to-be-executed to alerts or something similar, it works fine.
Does anybody know what the problem with the innerHTML is?
Thanks
EDIT: Using Firefox 3.6
What is a nice way to do leading dots in a table of contents with CSS?
Example:
Link.............Chapter 1
Link.............Chapter 2
Link.............Chapter 3
Hello.
I want to make my homepage, without frames, should i just split up my design on index.php so it is header.php/footer.php, and then just include them on every page? But the thing is then, if im going to e.g display a top notification, then when you change "page" its gone..
I know RE is not the best way to scrape HTMLs, but this is it...
I have some something like:
<td> Writing: <a href="creator.php?c=CCh">Carlo Chendi</a> Art: <a href="creator.php?c=LBo">Luciano Bottaro</a> </td>
And I need to match the Writing and Art parts. But it is not said they're there and there could be other parts like Ink and Pencils...
How do i do this ? I need to use pure Regex, no additional Python libs...
Thanks !
I am building a web app, which is intended to run on the Android browser.
When I have a webpage that contains any kind of viewport meta tag, like this:
<meta name="viewport" content="width=400"/>
My webpage crushes on ajax calls. It happens when using the emulator, the actual browser on my nexus one, and on a droid (all running Android 2.1).
Without the meta tag, the ajax calls run as they should.
Any ideas?
I am trying to upload file using zend frame work but have not been successful. I have read Akras tutorial, which was helpful but when i used those techniques in my project I was not able to get it to work.
Hi all,
I'm against it as I'm sure ALL of you are, but my client wants background music on their website.
I'm very new to this, so was wondering how should I do that? I know I should use iframes, but what's the actual way of using them? eg:
do I just create the home page with 2 frames (one for the music, one for the rest of the website), and then every time the user clicks on a link I can load the usual destination page - or should I update all pages in some way to make sure they are 'frames enabled'?
Also, I do I style the frame to make sure it's hidden?
thanks,
Patrick
ps
please don't reopen the discussion about why background music is not good - I do know that and personally hate it. But the client is adamant and paying for it so... ;)
how can I get my fixed width site to always appear "fully zoomed in" on webkit (iphone and android) browsers?
right now, it looks fine on an iPhone and "too small/zoomed out" on an Android phones that have higher resolution.
i'm trying this viewport:
<meta name="viewport" content="user-scalable=yes, width=device-width, target-densityDpi=device-dpi, initial-scale=1.0" />
Hello,
I am designing a web site that plays music. The music player itself will be in a separate window along with the now playing list. I want to be able to refresh the now playing list when a new song is added to it from the main window. Essentially I need to figure out how to communicate between the two windows. I was only able to find one plugin on line that defines the player page as a child of the main page but then this reference would be lost after the parent page i.e my main page was refreshed. So this was not very useful to me and I'm kinda lost atm.
Any help is greatly appreciated
PS: here is the link to that plugin (http://www.sfpeter.com/2008/03/13/communication-between-browser-windows-with-jquery-my-new-plugin/)