div's position changes after adding php file - php

I have a php code like this which mainly fetch rss feed from a site
<?php
$xmlstr = file_get_contents("http://news.myweb.com.au/index.php?format=feed&type=rss");
$xml_object = new SimpleXMLElement($xmlstr);
$items = $xml_object->channel->item;
?>
<?php foreach($items as $item):?>
<h1> <?php echo $item->title;?> </h1>
<p >
<?php echo substr($item->description, 0, 250);?>...
Read More
</p>
<?php endforeach; ?>
now I am including that file in some other file like this
<div class="leftColumnH">
<?php include('blog.php');?>
</div>
<div class="rightColumnH">
<h2 class="fontstyle leftColumnText ">Web Development & Graphic Design</h2>
some test here
</div>
But while I see it in browser, "rightcolumn" goes inside a div with class "feed-description" inside leftColunm.

You have to make sure that your <?php echo substr($item->description, 0, 250);?> is not echoeing any div tag. If $item->description has <div> tag, then your truncate might be removing the </div> tag.
If its echoing div tag then close the tag.
Hope this helps.

I assume that you are using float for leftColumnH and rightColumnH.
When you use float for child div, parent div's height will not be set to child div's height unless your parent div also have float attribute.
For example:
Create these classes
.parent{ border:1px solid red;}
.childLeft{border:1px solid blue;float:left;width:49%; height:100px;}
.childRight{border:1px solid blue;float:right;width:49%; height:100px;}
Now in your html file
<div class="parent">
<div class="childLeft"></div>
<div class="childRight"></div>
</div>
If you run this file you will be able to see your child divs will not be included inside your parent div properly.
To make that just try to apply float attribute to your parent div also. Refer below CSS
.parent{ border:1px solid red;float:left;width:100%}
Now if you run this file then you can see your child divs will be included in your parent div.
I refer you to check this one in your code and do the necessary style changes. This is nothing to do with PHP. You better post your CSS code with your parent div and its CSS code also. Because I answer you, by assuming that you are using float for child divs.

Related

Loop echo CSS class by PHP

CSS
.number{
float:none;
background-color:white;
cursor:ponter;
}
#panel{
background-color:red;
height:200px;
width:100px;
overflow-y:scroll;
}
I want to make a list of number in a panel. I've tried with HTML
HTML
<div id="panel>
<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>
.....
<span class="number">50</span>
</div>
When <span> is clicked, something will appear by jQuery, but I have no problem with jQuery.
Because I thought that looping the number manually doesn't efficient, I tried to use PHP.
PHP
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>";
}
?>
But the number made by PHP doesnt do the same like HTML does.
This is what I want and done by HTML.
This is done with PHP and the numbers are made horizontally until 50
You need to make sure the same whitespace is present when looping through it in PHP:
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>\n";
}
?>
Remember, your original code is just outputting one long string:
<span class='number'>1</span><span class='number'>2</span>...
In this case, whitespace (A newline) is important which may alter how your CSS looks. Forcing a new line each time you echo out a <span> by adding \n should fix this.
.number{ display : inline-block; }

How to draw text on top of image HTML?

I need to draw text in top of the image this the look like
when the page load i need to display price in side the photo.I try it like this
<button class="btn btn-danger" id="buy-btn" data-toggle="modal" data-target=".package-buy-modal">BOOK NOW</button>
<img id="price-tag" style="position: relative;width: 100%; /* for IE 6 */" src="<?php echo base_url()?>assets_profile/img/price.png">
<h2 style="-o-transform: rotate(32deg);-moz-transform: rotate(32deg);-webkit-transform: rotate(32deg);">$<?php echo $car_data['Charges']; ?></h2>
But it didn't work as i expected.how can i do this.if there is another easy way to this ?
Here is an example of using background-image within a div so that you can put more inside the div, ie)text
HTML:
<div id='image' src='http://i.stack.imgur.com/1DZ6X.jpg'>
<h2 id='price'>Price: $10</h2>
</div>
CSS:
#image {
width:243px;
height:163px;
background-image:url('http://i.stack.imgur.com/1DZ6X.jpg');
}
check it out here
Add a z-index value to the <img> and the <h2>. For example, z-index:98 on the <img>, and z-index:99 for the <h2>. (A higher value because you want it on top).
I would also recommend moving all styles to a css file, rather than use the inline style attribute.

If class exists give the next div a top margin but margin height determined with php

I'm trying to give the first div a top margin only if the class fixed-header exists, I've tried doing this with pure css but there were to many variables and I was losing track so I'm thinking use jquery.
Here's some simple html
<div id="page-container">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
Basically, if .fixed-header does exists give the first div, in this case it's 'test2' a top margin which matches the header, if there is no 'div2' then give 'div3' a top margin and so on.
Now for the tricky part, the top margin must be determined from a php script, here's how I get the header height below.
<?php echo $header_options['header_height'] ?>
How can I do this in jquery?
Here's a basic fiddle to start me off
If i understood you correctly, you can do that in CSS like that:
.page-container div.fixed-header:nth-child(1) + div,
.page-container div:not(.fixed-header):nth-child(1){
margin-top:20px;
// or
margin-top: <?php echo $header_options['header_height'] ?>px;
background:red;
}
this will give the first div after .fixed-header or the first one in .page-container (if no fixed-header exists) a margin.
Demo
If you want the margin be exactly the same as the height of the header without php, then yes, you'll have to resort to javascript/jquery. Something like this
$('#page-container div.fixed-header:nth-child(1)').each(function(){
$(this).next().css({'margin-top':$(this).height()});
});
Use length to find the div exits or not:
if($('.fixed-header').length > 0){
//do your stuff here
}
And I think it should work just with css:
#page-container .fix-header{
margin: 5px;
}
You can do this in CSS alone you know....you dont need to resort to Javascript or jQuery.
#page-container div:nth-child(1)[class='fixed-header']{
background:red;
}
Demo of the above, variation 1, variation 2
Use CSS in the head of the page:
#page-container #header.fixed-header + div {
/* the following should be parsed by php, but
I don't know whether this generates a full CSS
rule, or just the relevant length. Adjust as appropriate */
<?php echo $header_options['header_height'] ?>
}
There's no need for jQuery in here...
You want to div that follows .fixed-header to have a margin? Use the adjacent selector "+"
<style>
#header.fixed-header {height: <?php echo $header_options['header_height'] ?>px}
#header.fixed-header + div {margin-top: <?php echo $header_options['header_height'] ?>px}
</style>
Btw, you could just set a margin-bottom on #header.fixed-header... ;-)
Well, if each margin is the same, then give a data-attribute to the container. If each margin has different height, the most intuitive option is to put a data attribute to each item.
If each margin is the same, here is you code
$(".fixed-header").each(function(item) {
$($(item).next()).css('margin-top', $(item).parent().data('margin-height'));
});
Your markup should look like this:
<div id="page-container" data-margin-height="50px">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
This is equivalent to the following CSS, if every page-container has the same value as well.
.page-container .fixed-header + div {
margin-top: 50px;
}
You can generate this CSS file with your PHP as well. To make life easier, you can even embed this to you HTML template. If the margin-height does not reflect any information, then possibly generating your CSS is the best option, because then, you don't need to put useless information outside a <style> or <script> tag.
<style>
.page-container .fixed-header + div {
margin-top: <?php echo $header_options['header_height'] ?>;
}
</style>
Another option is to use CSS3 attr, which is not yet supported completely in all browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
.page-container .fixed-header + div {
margin-top: attr(data-margin-height);
}
This allows you to get rid of your script, but unfortunately, you will have to set data-margin-height for each .fixed-header.
I used .page-container classes in these examples, because this solution can be used if you have multiple different containers on the same page. If you only need one, you can just replace each .page-container to #page-container, and the code will work. Fiddle:
http://jsfiddle.net/k5V2a/

restricting text to a certain width with css or php

I have text that I put into a div, which is generated automatically by php..(taken from the database).
But the text stretches over the div.
here is an example of what I want to do:
<div>
<?php
Generate_All_Text_Content_Here();
?>
</div>
I want the div to limit to where the text stretches..say no more than 300px.
I tried to give it width measurement..but it has no influence over the div element
add to your style
div{
max-width:300px;
word-wrap:break-word;
text-overflow:<clip> or <ellipsis>;
overflow:<hidden> or <scroll>;
}
this should really cover everything >.<
Why not do something like this then?
<div style="<?php echo get_text_width(); ?>">
<?php Generate_All_Text_Content_Here(); ?>
</div>
Just set the div width with CSS and text won't be bigger:
div {
max-width: 300px; /*Or simply width: 300px; if you want the div always to be that width*/
}

Calling PHP function twice, only works once

I am trying to use PHP associative arrays to echo different values for text and images into HTML for different instances of a jQuery slideshow on the same page. Here's the HTML:
<div class='slide'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>This is the text!</p></div>
</div>
<div class='mosaic-image'><img src='imgs/the-img.png'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> `
I wrote arrays for each type of slideshow containing the text and image for each slide, here's and example:
$my_content = array(
'image1.png' => 'image1 text!',
'image2.png' => 'image2 text!'
);
Then I wrote a function with parameters for the category of slideshow and the content:
function gallery_content($content) {
foreach ( $content as $img => $txt ) {
echo "<div class='slide'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>".$txt."</p></div></div>
<div class='mosaic-image'><img src='imgs/other/".$img."'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> ";
}
I call it like this: gallery_content($my_content); and it works really well. But when I try to call it again for another set of values, only the first instance seems to work. I tried using the array directly instead of the variable as a parameter AND making a separate function for each slideshow, but keep getting the same results.
Why can't the function be called more than once? Thanks in advance.
My guess would be that PHP is doing its job. Check the source of the outputted document and you should see the proper number of galleries). I suspect that a CSS rule for the class gallery such as one that absolutely positions it is causing only one gallery to be visible. If you're OK with using inline CSS (which is not usually acceptable), you can have PHP add a custom position value (such as top) based on the gallery number:
function gallery_content($content) {
$num = 0;
foreach ( $content as $img => $txt ) {
echo "<div class='slide' style='top: ".(100 + 50*$num)."px'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>".$txt."</p></div></div>
<div class='mosaic-image'><img src='imgs/other/".$img."'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> ";
}
The example above gives the first gallery element a top of 100px (100 + 50 * 0), the second element a top of 150px, the tird 200px, and so on. You also could use some CSS3 and the new calc() feature in place of this, but CSS3 selectors are experimental and not supported in some older browsers. Using PHP and inline styles would be your safest bet.
See the source code that is generated on your final page(HTML) to judge whether PHP did its work or not. i think thats your resultant "galaries"(DIV) might be having the same ID or other attributes thorugh which the jQuery activates them, and so only one is being run properly (the first one), and the second one is not run.
Hope that helps.

Categories