I don't know how to describe my question because I don't even know this is an error or not!
In most of my works there are some empty space inside html.
I know some space or other special characters are skip from rendering of browsers but this one never skips!
in my php file I have one include exactly near that space.
how can I remove that? thanks in advance...
<div class="pg-picture">
<img src="img/top-pic/1375022681.jpg" alt="" width="353px" height="145px" /></div> </div>
</div>
</div>
<div id="section">
<div class="container clearfix">
<script type="text/javascript">
setTitle('title');
</script>
css:
html,body,.container{min-height:100%}
.container{margin:0 auto;position:relative;width:990px}
html>body .clearfix:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden;*zoom:1}
* html .clearfix{height:1%}
Try changing content:" " in your css to content="".
What is a clearfix?
Related
I am trying to add a div inside adminhtml/default/default/page/header.phtml, specifically inside <div class="header-right">.....</div>. I know overriding header block would do this, but I don't want to do it that way. So that if someone adds admin theme it'll not mess his design. I'm looking for a solution like jQuery('.header-right').append('<div>This is the div I want to add</div>'); in php which would add content at the end inside the header-right div. Maybe there is a way to parse the header block's html, add my content and replace there again.
I appreciate any hints/help.
<div class="header-top">
<img src="<?php echo $this->getSkinUrl('images/logo.gif') ?>" alt="<?php echo $this->__('Magento Logo') ?>" class="logo"/>
<div class="header-right">
<p class="super">
........
........
........
</p>
</div>
<div>This is the div I want to add</div>
</div>
Prototype: http://jsfiddle.net/1sxsnkbb/
<body>
...
<div class="header-top">
#
<div class="header-right">
<p class="super">
........
........
........
</p>
</div>
</div>
<script>
$$('.header-right')[0].setAttribute('id', 'header-right');
$('header-right').insert({'after':'<div>This is the div I want to add</div>'} );
</script>
...
</body>
What is wrong with doing this somewhere at the bottom of your page?
jQuery(document).ready(function(){
jQuery('.header-right').empty().append('content to add');
});
I'm using ACE Editor for a website which has been developed by Codeigniter framework. The problem is that after submitting the form, some tags attributes stripped.
HTML:
<form enctype="multipart/form-data" method="post" action="<?php echo site_url( 'admin/slider/populateFile')?>">
<div id="e1" style="display: none;">
<?php if(isset($sliderHTML)) { echo $sliderHTML; } ?>
</div>
<textarea class=" form-control" id="editorTextarea" name="sliderHTML" type="text" rows='20' wrap="off">
<?php if(isset($sliderHTML)) { echo $sliderHTML; } ?>
</textarea>
<pre id="editor"></pre>
</form>
PHP:
function populateFile()
{
$sliderHTML = $this->input->post('sliderHTML');
//echo $sliderHTML;
$filePath = 'application/views/admin/slider/sliderHTML.txt';
write_file($filePath, $sliderHTML, 'w');
redirect('admin/slider', 'location');
}
This is an example of what I'm trying to write in the code editor:
<img class="ls-l" style="top:195px;left:50%;white-space:nowrap;" data-ls="offsetxin:0;delayin:1720;easingin:easeInOutQuart;scalexin:0.7;scaleyin:0.7;offsetxout:-800;durationout:1000;" src="http://localhost:8080/afa/application/views/images/upload/slider/4978d-s1.jpg" alt="">
<p class="ls-l" style="top:150px;left:116px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#82d10c;border-radius:3px;white-space:nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1500;easingin:easeOutElastic;rotatexin:-90;transformoriginin:50% top 0;offsetxout:-200;durationout:1000;">
FEATURES
</p>
But, the output will be like:
<img class="ls-l" data-ls="offsetxin:0;delayin:1720;easingin:easeInOutQuart;scalexin:0.7;scaleyin:0.7;offsetxout:-800;durationout:1000;" src="http://localhost:8080/afa/application/views/images/upload/slider/4978d-s1.jpg" alt="">
<p class="ls-l" 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#82d10c;border-radius:3px;white-space:nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1500;easingin:easeOutElastic;rotatexin:-90;transformoriginin:50% top 0;offsetxout:-200;durationout:1000;">
FEATURES
</p>
Notice that style attribute of img has been stripped, and this happens also for <p> but it stops on the space after font-weight:. I don't know why.
Any Ideas?
EDIT: Finally, I knew that this has nothing to do with the code editor. The problem was with xss_filtering in Codeigniter and this answer works for me. :)
I am not familiar with Ace in particular (i like Wysihtml5), but I think they have something in common.
Wysihtml5 strips html (you can select which). It makes sure the html output is clean.
In short, it's a function and apparently style is not permitted. You should permit that (if it has the option to)
You should escape value of $sliderHTML with htmlspecialchars before adding it to the document, otherwise it will create actual tags and break your page.
try putting "</textarea><script>alert('all your passwords belong to us')</script>" in place of $sliderHTML
I'm finding that placing php code snippets within my website's & tags is causing a problem with the code after it's placement. I first noticed it when placing avatars on my site in a list format where it works fine up to a point and then the same image is repeated for the rest of the list. Here is the code that I'm uisng for that:
<?php
$show_user .= "
<div class=\"section\">
<div class=\"sectionInner\">
<div class=\"searchAvatar\"><img class=\"searchAvatarSize\" src=\"uploads/avatars/$member_avatar\"></div>
<div class=\"searchInformation\"><div class=\"searchInformationPrimary\">$member_name</div><div class=\"searchInformationSecondary\"><i>"$member_summary"</i></div></div>
<div class=\"searchInformation\"><div class=\"searchInformationPrimary\">$member_subtype $member_type</div><div class=\"searchInformationSecondary\">$member_city, $member_county</div><div class=\"searchInformationThird\">View Details</div></div>
<div class=\"clearLeft\"></div>
</div>
</div>
<div class=\"searchResultSplitter\"></div>
";
?>
<?php echo $show_user; ?>
I'm now noticing it when placing php within my navigation bar where it's not closing the tag. Here is my code for the bar:
<div id="pageSubNavigation" class="page<?php echo $thispage; ?>SubNavigation">
Next Page
</div>
After this, all of the other tags show the same link. Any ideas why this might be?
You need to either jump out of the HTML to add the variables or wrap them in {} so they appear correctly.
Example:
<div class=\"searchAvatar\"><img class=\"searchAvatarSize\" src=\"uploads/avatars/".$member_avatar."\"></div>
or
<div class=\"searchAvatar\"><img class=\"searchAvatarSize\" src=\"uploads/avatars/{$member_avatar}\"></div>
Check out this article about string formatting with variables in PHP.
I would like to append some html to a div when a button is clicked. The only thing that needs to be dynamic about it is that it needs to have a different id the the otherwise identical html above it. So if I have a structure like this:
<div id="container">
<div id="div1" class="inner">
<p id="P1">Some content</p>
</div>
<div id="div2" class="inner">
<p id="P2">Some content</p>
</div>
</div>
and to the end of container i would like to append
<div id="div3" class="inner">
<p id="P3">Some content</p>
</div>
What would be a good method to store this HTML? Keep it all in a php page and post the number the new div's id should be incremented to? Or is is smarter to put the html inside a string, and have a regular expression increment all of the numbers. Or is there some incredibly obvious way to do this that I've completely missed.
Jquery is an option, as that's already on the page.
Also, if this question seems too open-ended, please let me know in the comments how I can change it before closing it.
Thank you very much.
Based on your answers to comments so far (i.e. that the id's aren't really important, and that you will have input elements in the content), I would say that you would want to redo your html to look like this:
<div id="container">
<div class="inner">
<p><input type="text" name="order_item[]" value="" /></p>
</div>
<div class="inner">
<p><input type="text" name="order_item[]" value="" /></p>
</div>
</div>
Note there are no longer id's and I have used array notation for your input elements such that they will be posted as an array to the receiving script (eliminating the need to increment counters in javascript or parse different posted variable names into a usable array in PHP on the server).
And then use something like this in jQuery
$('#button_id').click(function() {
$('#container > div.inner:last').clone().val('').appendTo('#container');
});
Put the HTML you want to add each time into a hidden div, then use jQuery to copy and add that to the relevant location. For instance:
<div id="appendContents" style="display:none;">
<div class="inner">
<p id="P3">Some content</p>
</div>
</div>
then jquery:
var shownDivs = <?php echo $numberOnScreenFromBeginning;?>;
$('#theButtonYouWantClickable').click(function()
{
var newContent = $('#appendContents').clone();
newContent.$('div.inner').get(0).id = 'div'+shownDivs;
newContent.$('div.inner p').get(0).id = 'P'+shownDivs;
// Where does P content come from??
shownDivs++;
$('#container').append(newContent);
});
Try this Please: Working Demo http://jsfiddle.net/eNXmr/
In the code below it will calculate the lenght of the div hence dynamically set the id as 1, 2, 3, and beyond.
Hope it fits you need :)
API used: http://api.jquery.com/append/
Code
$('#hulk').click(function() {
alert("Total div inside ==> " + $('#container').find('.inner').length);
var next_num = parseInt($('#container').find('.inner').length) + 1;
$('#container').append(' <div id="div' + next_num + '" class="inner"><p id="P' + next_num + '">Some content</p></div>');
});
HTML
<div id="container">
<div id="div1" class="inner">
<p id="P1">Some content</p>
</div>
<div id="div2" class="inner">
<p id="P2">Some content</p>
</div>
</div>
<input type="button" value="Click hulk" id="hulk" />
QUESTION ANSWERED:
After messing around with a few things, The combination of the comma at the and of my last array element, and not having the image source path typed correctly was the problem.
Everything works great. It never ceases to amaze me at how a simple syntax error can throw everything out of whack.
Thank you Jonathan and tmsimont! The combo of you're answers fixed my problem.
Time to get a good PHP debugger, Netbeans probably, because Dreamweaver just isn't cutting it for me and I'm not versed enough to hand code YET!
EDIT:
I'm going to try and make myself a little more clear by showing my output source:
<body>
<div id="main">
<div class="container">
<div class="sponsorInner">
<a href="'.$company[1].'">
<img src="img/sponsors/'.$company[0].'.png">
</a>
</div>
</div>
'; } ?>
</div>
</body>
3 things not working:I need the first div with the class gold to render, and the $'s from the array to populate the image link and path.
ORIGINAL QUESTION:
I am trying to create multiple div arrangements on a page using a multidimentional array and a foreach loop to populate the div contents with a an image mnemonically named in a relative path folder and the image to be a hyperlink.
My output is not displaying the first correctly, and not populating the array $'s.
This seems right to me, am I missing some type of escape or syntax?
<body>
<?php
$sponsor = array(
array('Allstate','http://www.allstateagencies.com/'),
array('Arrowhead','http://www.arrowheadwater.com/'),
);
?>
<div id="main">
<div class="container">
<?php
foreach($sponsor as $company)
{
echo '
<div class="gold">
<div class="sponsorInner">
<img src="img/sponsors/'.$company[0].'.png"/>
</div>
</div>
';
}
?>
</div><!--.container-->
</div><!--#main-->
</body>
A total guess.. since that's all I can do with the way you've phrased your question... but if your problem is with the image output, try putting a "/" in beginning the src attribute of the image:
<img src="/img/sponsors/'.$company[0].'.png"/>
that way the browser looks for the img directory from the base of the site, instead of from within whatever subdirectory you're in.
Why not do your array this way
$sponsor = array(
'Allstate' => 'http://www.allstateagencies.com/',
'Arrowhead' => 'http://www.arrowheadwater.com/'
);
and later
<?php
foreach($sponsor as $company_name => $company_site)
{
?>
<div class="gold">
<div class="sponsorInner">
<img src="img/sponsors/<?php echo $company_name ?>.png"/>
</div>
</div>
<?php
}
?>
Edit
Remember, your file name is case sensitive. So the .png will need capital letters in their name. You can add the strtolower() around $company_name if you need them lowercase.
You have an comma at the end of this line which you don't need:
array('Arrowhead','http://www.arrowheadwater.com/'),
Please try to do basic debugging before posting.