DOM scripting getElementsByID -- links - php

I'm learning php and DOM. And i have issue. So, I am trying to improve and understand the following. I have some links with ID div and I am attaching event on them:
<div id='articleList1' >
<div class="hotOne">
<a class="" href="http://link1/index.html" >
<span class="itemTitle">
1 title
</span>
<img src="1.jpg" class=""
alt="1"
title="1"
border="0"
/>
</a>
</div>
<div class="hotThree">
<ul>
<li class="item item1 ">
<a href="http://link2/index.html" title="2" >
<span class="itemTitle">
2 title
</span> <img src="2.jpg" class=""
alt="2"
title="2"
border="0"
/> <p> 2 tekst </span> </p> </a>
</li>
<li class="item item2 ">
<a href="http://link3.html" title="3" >
<span class="itemTitle">
3 title
</span> <img src="3.jpg" class=""
alt="3"
title="3"
border="0"
/> <p> 3 tekst </span> </p> </a>
</li>
</div>
<?php $div1 = $dom->getElementById('articleList1');
$href = $div1->getElementsByTagName('a');
foreach ($href as $hrefs) {
$link = $hrefs->getAttribute('href');
}
echo '<a href ="'.$link.'">'.$link.'<br>'); ?>
However, this script does not work. And I don't know why it's not work?.
Thx for all answers.

Your HTML markup is pretty poor - there are mistakes creeping in which will not help working with the DOM.
<div id='articleList1' >
<div class="hotOne">
<a class="" href="http://link1/index.html" >
<span class="itemTitle">1 title</span>
<img src="1.jpg" class="" alt="1" title="1" border="0" />
</a>
</div>
<div class="hotThree">
<ul>
<li class="item item1 ">
<a href="http://link2/index.html" title="2" >
<span class="itemTitle">2 title</span>
<img src="2.jpg" class="" alt="2" title="2" border="0" />
<p>2 tekst</p><!-- <~~~ error here previously -->
</a>
</li>
<li class="item item2 ">
<a href="http://link3.html" title="3" >
<span class="itemTitle">3 title</span>
<img src="3.jpg" class="" alt="3" title="3" border="0" />
<p>3 tekst</p><!-- <~~~ error here previously -->
</a>
</li>
</ul><!-- missing -->
</div>
</div><!-- missing -->
<?php
$col=$dom->getElementsByTagName('a');
foreach( $col as $node ){
if( $node->nodeType===XML_ELEMENT_NODE && $node->hasAttribute('href') ){
echo $node->getAttribute('href');
}
}
?>

in iteration over $hrefs - refer to dingle href instead of list:
foreach ($href as $hrefs) {
$link = $href->getAttribute('href'); //not $hrefs->
}

Related

How to query item 1 categories show 3 <div class="item">

It might be a little difficult to explain.
I want it to display the data in html format below from same category
The display will be like the preview. 1 category will display 3 items, amount 3
database
<div class="gallery lapps-main">
<div class="gallery_scroller no-scrollbar">
<div class="item">
<a class="lapp" href="" title="">
<figure><img src="" width="56" height="56" data-src="" class="lzl" alt="icon"></figure>
<p class="info">
<span class="name">1</span>
<span class="author">1</span>
</p>
</a>
<div class="item">
<a class="lapp" href="" title="">
<figure><img src="" width="56" height="56" data-src="" class="lzl" alt="icon"></figure>
<p class="info">
<span class="name">1</span>
<span class="author">1</span>
</p>
</a>
</div>
<div class="item">
<a class="lapp" href="" title="">
<figure><img src="" width="56" height="56" data-src="" class="lzl" alt="icon"></figure>
<p class="info">
<span class="name">1</span>
<span class="author">1</span>
</p>
</a>
</div>
<span class="gallery_btn prev"></span>
<span class="gallery_btn next"></span>
</div>

how to set html layout in loop

I want to set a html layout view in a loop for multiple categories. My html code is here...there were many of categories came from (wp-admin) woocommerce. Given code is layout of how to show my categories in home.php so i want to add more categories in home.php through loop.Thanks
My html code is So far...
<div class="selected-products-wrapper clearfix">
<div class="category-list">
<span class="category-main" style="background-color: #5D973E">
<div class="category-main_logo">
<img src="" alt="" class="v-middle"></div>
<span class="category-main-title">
<a href="<?php
echo get_term_link($cat->slug, 'product_cat');
?>">
<?php echo $cat->name; ?></a></span>
<div class="category-main-yakataheader"><img src=""></div>
</span>
<ul class="sub-category-list">
<li><?php echo $sub_category ->name; ?></li>
</ul>
View all
</div>
<div class="images-list">
<a href="" class="large-img">
<img src="" alt="Confectionery"
class="v-middle lazy-img" height="351" width="290">
</a>
<span class="small-img-block">
<a href="">
<img src="" alt="Fruits & Veggies"
class="v-middle lazy-img" height="175" width="171">
</a>
<a href="">
<img src="" alt="Noodles"
class="v-middle lazy-img" height="175" width="171">
</a>
</span>
<span class="center_img-block">
<a href="">
<img src="" alt="Oats"
class="v-middle lazy-img" height="175" width="344">
</a>
<a href="">
<img src="" alt="Ofada"
class="v-middle lazy-img" height="175" width="344">
</a>
</span>
<span class="small-img-block last-img-block">
<a href="">
<img src="" alt="Cooking Oils"
class="v-middle lazy-img" height="175" width="171">
</a>
<a href="">
<img src="" alt="Seasoning"
class="v-middle lazy-img" height="175" width="171">
</a>
</span>
</div>
<div class="alt-images-block">
Fruits & Veggies
Noodles
Cooking Oils
Seasoning
</div>
</div>
you need to create a custom php function with the data you want repeat.
e.g.
<?php
function repeat_category(){ ?>
//your html code you want to repeat goes here.
<?php } ?>
Then you can just use
<?php
repeat_category();
?>
Wherever you want your html code to appear.

Yii2 Display Recently Added Members

I have a "Latest Staff Members" panel where it should display my recently added users. All I have is a static display of these users:
<div class="box box-danger <?= !User::isBizAdmin() ? 'hidden' : '' ?>">
<div class="box-header with-border">
<h3 class="box-title">Latest Staff Members</h3>
<div class="box-tools pull-right">
<span class="label label-danger">8 New Members</span>
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body no-padding">
<ul class="users-list clearfix">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/frank_man-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Alexander Pierce</a>
<span class="users-list-date">Today</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/Ben_man-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Norman</a>
<span class="users-list-date">Yesterday</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/iri_girl_face-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Jane</a>
<span class="users-list-date">12 Jan</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/Jay_man-128.png" alt="User Image"/>
<a class="users-list-name" href="#">John</a>
<span class="users-list-date">12 Jan</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/Fred_man-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Alexander</a>
<span class="users-list-date">13 Jan</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/michela_face_young-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Sarah</a>
<span class="users-list-date">14 Jan</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/carla_girl-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Nora</a>
<span class="users-list-date">15 Jan</span>
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/avatar-2/512/hena_woman_face-128.png" alt="User Image"/>
<a class="users-list-name" href="#">Nadia</a>
<span class="users-list-date">15 Jan</span>
</li>
</ul><!-- /.users-list -->
</div><!-- /.box-body -->
<div class="box-footer text-center">
View All Users
</div><!-- /.box-footer -->
</div>
Something like that. Now, in the user table in my database, I added a date_added column and I manually put dates in row.
Do I loop the data? Or use a widget? I don't know how else I should implement this.
EDIT
My controller:
public function actionIndex()
{
if(Yii::$app->user->isGuest){
return $this->render('../site/index');
}
else{
$latestStaffMembers = User::find()->orderBy(['date_added' => SORT_DESC])->limit(8);
return $this->render('dashboard', [
'latestStaffMembers' => $latestStaffMembers,
]);
}
}
In my view:
<?php foreach ($latestStaffMembers as $user) { ?>
<li>
<img src="<?php echo $user->avatar; ?>" alt="User Image"/>
<?= $user->username ?>
<span ><?= $user->date_added ?></span>
</li>
<?php } ?>
Then I get this error:
Trying to get property of non-object
I tried var-dumping $user and it says null.
I'm not sure if this is what you want. I hope it helps somehow.
In your controller action:
$latestStaffMembers = User::find()->orderBy(['date_added' => SORT_DESC])->limit(8)->all();
return $this->render('some-view-file', [
'latestStaffMembers' => $latestStaffMembers,
]);
In your view:
<?php foreach ($latestStaffMembers as $user) { ?>
<li>
<img src="<?= $user->imagePath ?>" alt="User Image"/>
<a class="users-list-name" href="#"><?= $user->name ?></a>
<span class="users-list-date"><?= Yii::$app->formatter->asDate($user->dateAdded, 'd m'); ?></span>
</li>
<?php } ?>
Btw: I saw !User::isBizAdmin() in your code. Is it yours? I would not just hide the list if it is important that only admins may see that. Just don't print it if user is not admin.

How to integrate PHP code into HTML Carousel code?

Can anybody help with the below please. Im having a bit of difficulty getting my head around how to get it to work.
The code is for a thumbnail carousel.
Here is the HTML
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three">
</div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four">
</div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five">
</div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--thumbnails-->
<div class="row hidden-xs" id="slider-thumbs">
<ul class="hide-bullets">
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/170x100&text=one">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-1">
<img src="http://placehold.it/170x100&text=two">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-2">
<img src="http://placehold.it/170x100&text=three">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-3">
<img src="http://placehold.it/170x100&text=four">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-4">
<img src="http://placehold.it/170x100&text=five">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-5">
<img src="http://placehold.it/170x100&text=six">
</a>
</li>
</ul>
</div>
The above code works fine, however I am trying to integrate the below PHP code so that the slider has dynamic images with thumbnails.
Here is the PHP code to display the images:
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
}
}
?>
If anyone could help or point me in the right direction, it would be appreciated!
Try this. Note where code starts and ends i didn't copy all of your block:
<div class="carousel-inner">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $key => $image) {
$active = $key == 0 ? 'active' : '';
echo '<div class="<?php echo $active;?> item" data-slide-number="<?php echo $key; ?>">';
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
echo '</div>'; }
}
?>
</div>
Explanation. Showing the images is not only to print img src=..., so you have to see what html block to put in the foreach loop so it be showed as the html you posted. $key is the index that you need to mark the slides. $active shows which slide is active, so you need to set it only ones (in our case when $key is 0)
Cheers.

can't seem to get the variable to change

I am trying to display blog posts from a MySQL data base into an unordered list. I want each row to display the title an image and short description of 3 entries. Here is an example:
<ul class="submissions">
<li class="first">
<a href="url"> <img alt="image Alt" class="blog_image" height="198" src="image url" title="blog title" width="276" />
</a> <div class="submissions_content">
<h3>blog title</h3>
<p> blog discription .</p>
</div>
</li> <li class="second">
<a href="url">
<img alt="image Alt" class="blog_image" height="198" src="image url" title="blog title" width="276" />
</a> <div class="submissions_content">
<h3>blog title</h3>
<p> blog discription .</p>
</div>
</li> <li class="last">
<a href="url">
<img alt="image Alt" class="blog_image" height="198" src="image url" title="blog title" width="276" />
</a> <div class="submissions_content">
<h3>blog title</h3>
<p> blog discription .</p>
</div>
</li> <li class="first">
<a href="url">
<img alt="image Alt" class="blog_image" height="198" src="image url" title="blog title" width="276" />
</a> <div class="submissions_content">
<h3>blog title</h3>
<p> blog discription .</p>
</div>
</li> <li class="second">
<a href="url">
<img alt="image Alt" class="blog_image" height="198" src="image url" title="blog title" width="276" />
</a> <div class="submissions_content">
<h3>blog title</h3>
<p> blog discription .</p>
</div>
</li> <li class="last">
<a href="url">
<img alt="image Alt" class="blog_image" height="198" src="image url" title="blog title" width="276" />
</a> <div class="submissions_content">
<h3>blog title</h3>
<p> blog discription .</p>
</div>
</li></ul>
You see how the li class changes for each entry? I tried this code but the li class ends up being the same for every entry:
<ul class="submissions">
<?php
mysql_connect ('localhost', 'root', '072868') ;
mysql_select_db ('test');
$sql = "SELECT * FROM tbp_blog ORDER BY timestamp DESC LIMIT 5";
$result = mysql_query($sql) or print ("Can't select entries from table tbp_blog.<br />" . $sql . "<br />" . mysql_error());
while($row = mysql_fetch_array($result)) {
$date = date("l F d Y g:i:s A", $row['timestamp']);
$link = $row['link'];
$title = stripslashes($row['title']);
$description = stripslashes($row['description']);
$entry = stripslashes($row['entry']);
$image_link = $row['image_link'];
$image_alt = $row['image_alt'];
$id = $row['id'];
$li_class = 'first';
?>
<li class="<?php echo $li_class ; ?>">
<img alt="<?php echo $image_alt; ?>" class="blog_image" height="198" src="<?php echo $image_link; ?>" title="<?php echo $title; ?>" width="276" />
<div class="submissions_content"><h3><?php echo $title; ?></h3>
<p><?php echo $description; ?></p>
</div>
</li>
<?php if ($li_class == 'first') {
$li_class = 'second';
} elseif ($li_class == 'second') {
$li_class = 'last';
} elseif ($li_class == 'fist') {
$li_class == 'first';
}
?>
<?php
}
?>
</ul>
what am I doing wrong?
Move $li_class = 'first'; outside of your while condition. You're resetting it on every iteration.
$li_class = 'first';
put this line OUTSIDE of your while loop:
while($row = mysql_fetch_array($result)) {

Categories