So, I have a JSON array, which parses just fine in the layout view, but the elements from json stack vertically and I need them to be horizontally aligned.
Here is the example code
<div class="swiper-container mySwiper2 swiper-container-h">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-padding">
<?php include_once("team_hq.php"); ?>
</div>
<div class="swiper-slide swiper-padding bkg bkg3">
<h2>Partners</h2>
<?php
showStuff($stuff, "Partners"); ?>
</div>
<div class="swiper-slide swiper-padding bkg bkg12">
<h2>Production</h2>
<?php showStuff($stuff, "Production"); ?>
</div>
<div class="swiper-slide swiper-padding bkg bkg13">
<h2>Sales</h2>
<?php showStuff($stuff, "Sales"); ?>
</div>
<div class="swiper-slide swiper-padding bkg bkg14">
<h2>Support</h2>
<?php showStuff($stuff, "Support"); ?>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
The question I'm asking is how can I make the content which is pulled from the $stuff variable present horizontally instead of vertically as is now.
To position HTML elements horizontal either use:
Flexbox or CSS-Grid or Floating
But assuming your function showStuff just prints a JSON string, you'd have to work with your $stuff variable. E.g. loop over the it's content – with PHP I suppose – and build the HTML-Tags according your needs.
So, I have a php file called db.php to replicate some sort of database. This is basically a file with some multidimensional associative arrays:
<?php
$arrShowcases = array(
"1"=>array("title"=>"Landing Page", "descr"=>"Welcome!", "img"=>"actions-landing.jpg", "polygon"=>array(
0=> array(
"points"=>"1338,4,1338,50,1272,50,1272,4",
"link"=>"69",
"modalbody"=>"This button lets you Signup on the webapp",
"modaltitle"=>"Signup Button"
),
1=> array(
"points"=>"1246,12,1249,44,1206,44,1204,14",
"link"=>"2",
"modalbody"=>"This button redirects you for the login form",
"modaltitle"=>"Login Button"
)
)),
"2"=>array("title"=>"Login page", "descr"=>"Make your login", "img"=>"actions-login.jpg", "polygon"=>array(
0=> array(
"points"=>"1338,4,1338,50,1272,50,1272,4",
"link"=>"69",
"modalbody"=>"This button lets you Signup on the webapp",
"modaltitle"=>"Signup Button"
),
1=> array(
"points"=>"1246,12,1249,44,1206,44,1204,14",
"link"=>"69",
"modalbody"=>"This button redirects you for your dashboard",
"modaltitle"=>"Login Button"
)
))
);
?>
Then, I have a html page with a section element where I need to change page header title, subtitle, image and some polygon points:
<section>
<div class="container">
<div class="row">
<div class="col-md-3">
<?php include cfgPath."/includes/menu.html"; ?>
</div>
<div class="col-md-9">
<h1 class="page-header"><i class="glyphicon glyphicon-picture"></i> Landing page</h1>
<h3>// Lorem ipsum...</h3>
<div class="col-md-12">
<div style="position:relative;">
<img id="pageScreenshot" src="<?php echo cfgRoot; ?>/assets/images/actions-landing.jpg" class="img-responsive" alt="Landing Page"/>
<svg id="svgImageMap" width="1366" height="768">
<polygon points="1338,4,1338,50,1272,50,1272,4" data-originalpoints="1338,4 1338,50 1272,50 1272,4" data-id="0"/>
<polygon points="1246,12,1249,44,1206,44,1204,14" data-originalpoints="1246,12 1249,44 1206,44 1204,14" data-id="1"/>
<polygon points="378,43,446,42,445,11,377,9" data-originalpoints="378,43 446,42 445,11 377,9" data-id="2"/>
<polygon points="196,10,367,10,366,42,195,43" data-originalpoints="196,10 367,10 366,42 195,43" data-id="3"/>
<polygon points="121,16,120,35,164,39,164,17" data-originalpoints="121,16 120,35 164,39 164,17" data-id="4"/>
<polygon points="14,15,13,40,95,43,95,12" data-originalpoints="14,15 13,40 95,43 95,12" data-id="5">
</svg>
</div>
<!-- data original points: X1,Y1 X2,Y2 X3,Y3 X4,Y4 -->
</br>
<a class="btn btn-success btn-sm btn-block" href="<?php echo cfgRoot; ?>/app/showcase/showcaseView.php">Go Back</a>
</div> <!-- colmd12 -->
</div> <!-- colmd9 -->
</div> <!-- row -->
</div> <!-- container -->
</section> <!-- section -->
As you can see on the above html for the section element, I wrote by hand all the information. However, my goal is to change that info with stuff provided from the db.php file.
I want something like this nameofthepage.php?id=1 (and all the info provided in the position 1 of the array goes to the html) or this: nameofthepage.php?id=2 (and all the info provided in the position 2 of the array goes to the html). Any advice or tip to get this behavior?
So far, I tried to do echos like this:
<?php echo $arrShowcases[positions-that-i-want]["information-that-i-want"]; ?>
to change the hardcoded html but that doesn't get me the dynamic behavior I need.
I hope you'll get the point.
<?php
//-----------------------------
// If id is not sent then stop with page execution. You can redirect or something else.
if(!isset($_GET["id"])) {
die("ID not received.");
}
// Get that received id because at this point we are sure that id is received because page execution did not stopped before.
$id = $_GET["id"];
//-----------------------------
// Import your "database".
require_once "db.php";
//-----------------------------
// If there is no page with that id, stop page execution.
if(!isset($arrShowcases[$id])) {
die("page does not exists.");
}
// If there is a page then store it in a variable.
$page = $arrShowcases[$id];
//-----------------------------
?>
<section>
<div class="container">
<div class="row">
<div class="col-md-3">
<?php include cfgPath."/includes/menu.html"; ?>
</div>
<div class="col-md-9">
<h1 class="page-header">
<i class="glyphicon glyphicon-picture"></i>
<?= $page['title']; ?> // Echo page title.
</h1>
<h3><?= $page['descr']; ?></h3> // Echo page description.
<div class="col-md-12">
<div style="position:relative;">
<img id="pageScreenshot" src="<?php echo cfgRoot; ?>/assets/images/<?= $page['img']; ?>" class="img-responsive" alt="<?= $page['title']; ?>"/> // Echo image filename and page title.
<svg id="svgImageMap" width="1366" height="768">
// For each polygon, echo it's points and key as an index (0, 1, 2, 3...)
<?php foreach ($page["polygon"] as $key => $value) { ?>
<polygon points="<?= $value['points']; ?>" data-originalpoints="<?= $value['points']; ?>" data-id="<?= $key; ?>"/>
<?php } ?>
</svg>
</div>
<!-- data original points: X1,Y1 X2,Y2 X3,Y3 X4,Y4 -->
</br>
<a class="btn btn-success btn-sm btn-block" href="<?php echo cfgRoot; ?>/app/showcase/showcaseView.php">Go Back</a>
</div> <!-- colmd12 -->
</div> <!-- colmd9 -->
</div> <!-- row -->
</div> <!-- container -->
</section> <!-- section -->
When you enter an URL in the browser, you are making a GET HTTP request.
That request can take variables in the form of parameters, by adding ? to the end of your URL and then all the parameters you need, separated by &, like this(based on your example):
nameofthepage.php?id=1&another=2
In PHP, you can catch those parameters using the superglobal $_GET, like this:
$id = $_GET['id'];
By now you should understand #Spectarion answer, that solves your problem.
I don't think any answer should be marked as correct, because these are the basics of working with HTTP with PHP, but that is up to you.
I have problem with some angular things. I'm trying to set recursive dive with some info with some hintshow (tooltip).
The problem is all information show fine exclusive the hintshow. Added the screen show + some code. The data saved in {{x.who_liked}} as string, for example
"wyd3x, someoneXD, Shohamiko, guymaster, HUBHVNKL, Rauli, Matk, gal350"
<div ng-repeat="x in names | startFrom:currentPage*pageSize | limitTo:pageSize">
<div class="post">
<div class="posterDetails">
{{x.username}}</br>
פירסם ב<?php echo timeAgo("{{x.date}}"); ?>
<div ng-switch on="x.user_id">
<div ng-switch-when="<?=$_SESSION['id']?>">
<?php
echo " <a style='color:red;' href=\"?page=feeds&id={{x.id}}&delete\">(מחק סטטוס)</a>";
?>
</div>
</div>
</div>
<div class="postContent" ng-bind-html="x.msg | unsafe"></div>
<div class="options" style="text-align: right;padding: 5px;">
<div id="like" style="display:inline-block">
<img src="images/{{x.liked}}" post_id={{x.id}} ng-click="like(x)"> {{x.likes}} <div class="liked" onMouseover="showhint('{{x.who_liked}}', this)" style="display:inline-block">אהבו</div>
</div>
<div id="report" ng-click="report(x)" style="cursor: pointer; display:inline-block">
<img src="images/icons/vlag.png"> דווח
</div>
</div>
</div>
current station
tooltip: http://dynamicdrive.com/dynamicindex16/showhint.htm
You shouldn't be using {{}} interpolation inside your onMouseover directive.It should be onMouseover="showhint(x.who_liked, this)"
or
Angular solution
You can fix it like this :
ng-mouseover="showhint(x.who_liked,this)"
Instead of onMouseover , you can use ng-mouseover.
For better understanding , see this fiddle
I have successfully added a tab to my view.phtml page located at app/design/frontend/enterprise/aps/template/catalog/product.
I tried an if statement to hide it if the Specifications field is empty, i.e. no content. The issue is, it doesn't work. It still shows the tab even if there is no content.
My code is below at the end of post.
2 Questions:
Am I taking the correct approach? Basically, I am making a tab to have an Expert Review tab. I originally was going to use a cms block, but figured purposing the Specifications field was easier, for one, but also I could ignore the tab if no content
Can you please help ? :)
Thanks so much and here is my code and I attached a screenshot of the empty tabs.
<div class="wa-product-details-tab product-description">
<div class="wa-product-details-tab-heading product-desc-tab">
<div rel=".wa-product-tab-details-item-1" class="wa-product-heading-item wa-product-heading-item-1 wa-product-heading-item-active">
<span>Description</span>
</div>
<div rel=".wa-product-tab-details-item-2" class="wa-product-heading-item wa-product-heading-item-2">
<span>Specs</span>
</div>
<div rel=".wa-product-tab-details-item-3" id="review-form" class="wa-product-heading-item wa-product-heading-item-3">
<?php
$summaryData = Mage::getModel('review/review_summary')
->setStoreId(Mage::app()->getStore()->getId())
->load($_product->getId());
?>
<span >Reviews (<?php echo $summaryData->getReviewsCount();?>)</span>
</div>
<div rel=".wa-product-tab-details-item-4" class="wa-product-heading-item wa-product-heading-item-4">
<span>APS Advisor Review</span>
</div>
</div>
<div class="wa-product-tab-details product-desc">
<div style="display: block;" class="wa-product-tab-details-item wa-product-tab-details-item-1">
<?php echo $_product->getDescription(); ?>
</div>
<div style="display: none;" class="wa-product-tab-details-item wa-product-tab-details-item-2">
<p> <?php echo $this->getChildHtml('additional')?></p>
</div>
<div style="display: none;" class="wa-product-tab-details-item wa-product-tab-details-item-3">
<p>
<?php echo $this->getChildHtml('review_form') ?>
<?php echo $this->getChildHtml('product_additional_data_review') ?>
</p>
</div>
<div style="display: none;" class="wa-product-tab-details-item wa-product-tab-details-item-4">
<?php if ($_product->getSpecifications()); ?>
</div>
</div>
I am not sure if I understood your issue correctly. I am assuming that you want to hide the "APS Advisor Review" tab if there is no content in it.
For this you can use an if condition to check if $_product->getSpecifications() has any content, and show the tab title only if there is any content like this
<?php if( !empty($_product->getSpecifications()) ){ ?> <!-- displays the tab title only if the product has any specifications -->
<div rel=".wa-product-tab-details-item-4" class="wa-product-heading-item wa-product-heading-item-4">
<span>APS Advisor Review</span>
</div>
<php } ?>
I have the following html code:
<div class="media row-fluid">
<div class="span3">
<div class="widget">
<div class="well">
<div class="view">
<img src="img/demo/media/1.png" alt="" />
</div>
<div class="item-info">
Title 1
<p>Info.</p>
<p class="item-buttons">
<i class="icon-pencil"></i>
<i class="icon-trash"></i>
</p>
</div>
</div>
</div>
<div class="widget">
<div class="well">
<div class="view">
<img src="img/demo/media/2.png" alt="" />
</div>
<div class="item-info">
This is another title
<p>Some info and details go here.</p>
<p class="item-buttons">
<i class="icon-pencil"></i>
<i class="icon-trash"></i>
</p>
</div>
</div>
</div>
</div>
Which basically alternates between a span class with the widget class, and then the widget class without the span3 class.
What I wanted to know was if there was a way to have php "echo" or populate the details for and details under the "item-info" class. Would I need to use a foreach statement to get this done? I would be storing the information in a mysql database, and while I can get it to fill in the info one by one (repeatedly entering the and echoing out each image and item title) it's not practical when the content needed to be displayed is over 15 different items. I'm not well versed in foreach statements so I could definitely use some help on it.
If someone could help me perhaps structure a php script so that it can automatically output the html based on the number individual items in the database, that'd be greatly appreciated!
I'm wondering if the html + php (not including the foreach) would look like this:
<div class="span3">
<div class="widget">
<div class="well">
<div class="view">
<img src="img/<? $file ?>" alt="" />
</div>
<div class="item-info">
<?$title?>
<p>Info.</p>
<p class="item-buttons">
<i class="icon-pencil"></i>
<i class="icon-trash"></i>
</p>
</div>
</div>
</div>
EDIT:
I wanted to add some more information. The items populated would be based on a type of subscription - which will be managed by a group id.
I was initially going to use <? (if $_SESSION['group_id']==1)>
echo <div class="item-info">
$title
<p>$info</p>
</div>
so that only the subscribed items would populate. But, I would need it to iterate through all the items for group1 table and list it. Currently I know that I can do
<? (if $_SESSION['group_id']==1)
while ($row=mysql_fetch_assoc($sqlItem))
{
$itemInfo = $row['info'];
$image = $row['image'];
$title = $row['title'];
$url = $row['url'];
};
>
$sqlItem for now can only be assigned one thing (manually - as in: $sqlItem = '123'), unless I iterate through which is what I'm trying to figure out.
Just read that 'mysql_fetch_assoc' is being depreciated with 5.5, here is the new way and looks better, easier I think.. Hope this helps, was updated today.
I hope this helps http://php.net/manual/en/mysqli-stmt.fetch.php
replace the printf with echo '//then your html stuff
This will iterate through the rows in your database until their are no more matching records.
shouldn't a while be enough? It depends on the structure of your database and website (we didn't need so much HTML I think. Some more PHP maybe). Hope this helps.