I am writing a Blog module, and sanitize the blog_post at INPUT with
$this->form_validation->set_rules('blog_data', 'Blog Post', 'trim|required|min_length[5]|xss_clean');
Now that the input has been sanitized I have lost the HTML styling, Can anyone recommend a way to get the styling back to show the blog post in the original styling as posted by the user?
If sanitizing the HTML data at OUTPUT (instead of INPUT) is a good practice then how do people retain the original styling?
For example, wordpress is storing HTML data of user blogs in original form with all styling tags intact (raw HTML). But it must be sanitizing it during output. Then how does it retain the original styling?
How to do it in codeigniter? Please help I have been banging my head for 3 days now .:/
Followup- #Damien Pirsy -
Original code obtained from sql-db:
<img src="http://localhost/lok/images/63a9f0ea7bb98050796b649e85481845/11342974127.jpg" style="cursor: default; height: 208px; float: left; margin: 0px 10px 10px 0px; ">
Output Obtained on web-browser:
<img src="http://localhost/lok/images/63a9f0ea7bb98050796b649e85481845/11342974127.jpg" default; height: 208px; float: left; margin: 0px 10px 10px 0px; ">
Using "htmlpurifier" with CodeIgniter. The img src styling is unaffected now.
Related
So i'm making this site which is based on wordpress for adding dynamic content but i have set up an entirely HTML/CSS and little jQuery built theme.
The issue i'm facing is when I had to place the front page posts like teasers with a link to the entire post
teaser like this :- http://i.gyazo.com/dda9c60eb3a822b84bdcb3e0067dfc3e.png
as i knew nothing about wordpress themes, i took help of esclate's php files and just made up a code that could harbour my css classes,id's and properties with it.
Hence to start with, the post's elements in header.php was setup like this :-
<div class="post-wrapper">
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content">
that was the same for the single.php file,
i successfully made the site have teaser posts for the front page but the issue arrived when the same properties of those above ID's got called to the single.php file as the classes and id's were similar, which is shown/open when the user clicks on full article,
i made another class for the single.php post elements but it had no effects.
here is what it looked like :- http://i.gyazo.com/0ec25c1db676463dd6aea209480e9568.png
it shows a teaser and not the full post, how can i rectify this?
btw the css code for them all
#page {
width:100%;
margin: 0 auto;
padding: 0;
display: inline-block;
}
#page-bgtop {
}
#page-bgbtm {
margin: 0px;
padding: 40px 50px 0px 50px;
}
#content {
float: left;
width: 100%;
padding: 0px 0px 0px 0px;
margin-left: -40px;
padding: 20px;
display: inline-block;
margin-bottom: 40px;
font-family: 'Raleway',Arial,sans-serif;
font-size: 14px;
line-height: 23px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
I hope i have discreetly explained everything in my grasp for this issue.
As you are dealing with id's the same will be applied where-ever the id's are used, it overrides classes by default. You can create new id's or add class="" in your html so in your css you can mark elements !important to override the id content. This gets messy though so you would be better to change your ids to classes in the above example and use id's to make small changes to the class in the different pages.
I have a little problem. At the end of my R script I create an image .png as output. I wanna show this image on my website but sometimes it is drawn, sometimes it is not drawn. I don't understand how it is possible. I`ll put my code:
I insert the image in a div with this features:
#diagramm {
position: relative;
border: 2px solid #333;
border-color: #6495ED;
width: 820px;
height: 370px;
margin: 2px auto;
margin-top: 2em;
background-image: url("/home/daniele/public_html/appweb2013/venn_final/fungo_final.png");
}
Where is the mistake? Can I use a better method?
This is CSS, it only puts specific design rules for an element that has the id diagramm.
So what you've posted is not code so to speak.
In what way do you generate the output? When? what does the user do to generate it etc.
Do you have any javascript or html code you can show?
I'm trying to make a clickable button by treating a hyperlink with CSS and adding a little icon next to it. Everything but one detail works great; namely the icons which are slightly offset from the text on the button. It looks as follows:
As you may see, the white icons (12x12px) on the buttons are slightly higher than the text, touching the CSS borders of the hyperlink, while the rest of the text does not.
I have tried every solution that came to mind, including applying vertical-align to the image elements (which put the icon too close to the LOWER border instead, reversing the situation), but sadly could not get it to just line up with the text in the middle of the element nicely. What should I do?
Code in question:
HTML example of a button:
<td class="headerlinks">
<img src="{T_THEME_PATH}/images/icon_mini_login.png" alt="*" /> {L_LOGIN_LOGOUT}
</td>
CSS of the buttons:
.headerlinks {
margin: 0px 0px;
font-size: 1.1em;
line-height: 200%;
}
.headerlinks a img {
}
.headerlinks a {
white-space: nowrap;
border: 1px solid #FAE000;
padding: 1px 4px 2px 4px;
border-radius: 4px;
margin: 0px;
background-color: #000;
vertical-align: middle;
}
Are you using a CSS reset? You can try the following one.
http://meyerweb.com/eric/tools/css/reset/
Also it's better to use a background-image for the icon, and set a position on it.
This should work if you add margin-top:2px; to the icon class. This number may need to be shifted by a digit or two.
This will work if you maintain the static font-size.
Ok so this might be very basic but I'm struggling here.
I've got limited space but I need a comments board so I need to be able to scroll through messages. I've got my database and php setup and the messaging works fine. I've done the layout with div's so that all the comments are within the master comments div with is set to overflow: hidden, hiding the messages that don't fit. Every message is then formed as a div (which has 2 div's inside for subject/sender and comment sections). Each of the message div's is automatically given an id by the script so I have something to target here.
What I would like to do is to have the messages scroll so that when you click 'down', the topmost message will disappear and the messages will move in line so that the next one is now topmost. Is this possible? I tried to play around with childNodes but couldn't get it to work.
Also, does my layout solution make any sense? Should I change it to lists?
CSS is
#kommentit { // <- all comments
position: absolute;
margin-top: 50px;
margin-left: 475px;
width: 400px;
height: 400px;
overflow: hidden;}
.sitoja { // <- this is the single comment binder
position: relative;
width: 400px;
background: #fff;
border-radius: 10px;
padding: 0;}
I assign id for every message so I get
<div class="sitoja" id="[i]">
in php
echo '<div class="sitoja" id="'.stripslashes($info2->id).'">';
You can view the dummy of the message board here: http://pohjis.site40.net/testi.php
There are many ways to do it.
The simplest is changing overflow: hidden; to overflow: scroll;.
You can also display: none; the topmost comment to make the lower ones move up.
And you can scroll the div with javascript.
BTW, with some adjustment of the css you don't need position: absolute; - not using that will make designing things easier.
I have two divs, one on the left, and one on the right side of my page.
I have an iframe in the middle of my site, which content is loaded from a php file with mysql results in it.
I want the two divs on my page to get the TOTAL height of my page and set it as its own height so the borders continue all the way down. I also would like the iframe to adjust its height depending on the "results_table" which "myPhpFile" echoes out.
Here is my two divs code:
<div class="bgr_left">
<div class="bgr_right">
Here is the css:
.bgr_right {
background-image: url(../Graphics/bgr_right.jpg);
background-repeat: repeat-y;
background-position: right;
position: absolute;
top: 0px;
width: 30px;
right: 0px;
background-color: #E7F5F0;
}
AND
.bgr_left {
background-image: url(../Graphics/bgr_left.jpg);
background-repeat: repeat-y;
background-position: left;
position: absolute;
left: 0px;
top: 0px;
width: 30px;
background-color: #E7F5F0;
}
And here is the iframe inside a table:
<table width="850px" height="1000px" border="0" align="center">
<tr>
<td width="845px" height="998px">
<iframe style="border:none; width:100%; height:100%;" name="iframe001" src="frame.html" id="iframe001"></iframe>
</td>
</tr>
</table>
And here is the form:
<form id="nav_form_main" name="nav_form_main" action="bincgi/myPhp.php" target="iframe001" method="get">
And here is the part in the php file which creates a table from the mysql query:
while($row = mysql_fetch_array($qry_result)){
My question: Is this way the best way to get two side borders on my page? AND, is there a way to set the iframe height to the content which is about to be loaded inside it from my "FORM"...
BACKGROUND HISTORY:
I have a form on my site, which targets the iframe, and the action on the form is a php file which returns a mysql query result inside a table. So this table is what ends up inside the iframe!
Trying to resize an IFrame onload using Javascript can be done but is very cumbersome in my experience. Using Ajax to dynamically load the PHP results into your HTML structure would be easier and more reliable. If you load the PHP output into a DIV, that DIV's height can increase the page's height, thus increasing the other DIVs' height.
You can access an iframe content height with JavaScript only if both the iframe and the JavaScript are on the same domain.
You can try inserting content with PHP like:
$content = file_get_contents('http://domain.net/iframe.php');
//
//Do something with the content here
//
echo($content);
But it's not clear solution if you can't modify the iframe.php to get only content you need. I think you'll end up with static iframe height.