i am going to apply cool effect to top of this site http://neshanteam.ir
<div class="item item-small item-lightblue"> <!-- three -->
<div class="img-thumb" style="background-image:url(images/content/300/3.jpg)"></div>
<div class="content">
<div class="content-alignment">
<h5> 4 نکات مهم در زنده نگه داشتن وب سایت</h5>
<h3 style="direction:rtl;"> 4 نکته مهم استراتژیک در بروز رسانی سایت </h3>
</div>
</div>
</div>
how do i apply cool effect to above code ?
Related
I try to extract all links based on these three conditions:
Must be part of <div data-test="cond1">
Must have a <a href="..." class="cond2">
Must not have a <img src="..." class="cond3">
The result should be "/product/1234".
<div data-test="test1">
<div>
<div data-test="cond1">
Link 1
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-test="test2">
<div>
<div data-test="cond1">
Link 2
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
<img src="bild.jpg" class="cond3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm able to extract the links with the following xpath query.
//div[starts-with(#data-test,"cond")]/a[starts-with(#class,"cond")]/#href
(I know the first part is not really neccessary. But better safe than sorry.)
But I'm still struggling with excluding the links containing an descendant img tag and how to add it to the query above.
This should do what you want:
//div[#data-test="cond1" and not(.//img[#class="cond3"])]
/a[#class="cond2"]
/#href
/product/1234
I have two separate divs, one where the images are loaded and the other where the data is displayed.
<div class="banner-slider-image">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide Item -->
<div class="swiper-slide">
<div class="bg" style="background-image: url(include/assets/images/main-slider/1.jpg);">
</div>
</div>
</div>
</div>
</div>
<div class="banner-slider-content">
<div class="side-text">AVANT</div>
<div class="swiper-container banner-slider">
<div class="swiper-wrapper">
#if(count($listings) > 0)
#foreach($listings as $listing)
<!-- Slide Item -->
<div class="swiper-slide">
<div class="content-outer">
<div class="content-box">
<div class="inner">
<h5>{{$listing->first_name}} {{$listing->last_name}}</h5>
<h1><span>{{$listing->name}}</span> </h1>
<div class="text">{{$listing->property_description}}.</div>
<div class="link-box">View Listing</div>
</div>
</div>
</div>
</div>
#endforeach
#endif
</div>
</div>
</div>
So the first div will also be in a foreach loop, but I dont know how I can combine the two where they show the same related data.
Use 2 foreach loops . It is the easiest and desired solution for you. or you can define two variable and concat the contents using one forloop and then display them later like
#php
$first='';
$second='';
#endphp
#if(count($listings) > 0)
#foreach($listings as $listing)
#php
$first.='first div content';
$second.='second div content';
#endphp
#endforeach
#endif
<div class="banner-slider-image">
<div class="swiper-container">
<div class="swiper-wrapper">
{!!$first!!}
</div>
</div>
</div>
<div class="banner-slider-content">
<div class="side-text">AVANT</div>
<div class="swiper-container banner-slider">
<div class="swiper-wrapper">
{!!$second!!}
</div>
</div>
</div>
<html>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
use for yield
I am using laravel 6. I have problem with my section where its not display the result on browser. I have place #yield on my layout but half of section still not displayed
here my code
#section('main-content')
<section class="breadcrumbs">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<h2>Detail Tanaman</h2>
</div>
</div>
</section>
<!-- ======= Blog Section ======= -->
<section id="blog" class="blog">
<div class="container" data-aos="fade-up">
<div class="row">
<div class="col-lg-8 entries">
<article class="entry">
<div class="entry-img">
<img src="/img/bonsai.jpg" style ="width:100%; height:100%;" alt="" class="img-fluid">
</div>
<h2 class="entry-title">
{{$data->nama_tanaman}}
</h2>
here my layout
<a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
</a>
</div>
</section><!-- End Hero -->
#yield('main-content')
You forget to add extends('master') (master is the name of your master page file) at the first of your section like:
In your master:
#yield('main-content')
In your section file:
#extends('master')
#section('main-content')
...
#endsection
Can someone help with a dynamically loaded collapse panel with a nested dynamically loaded collapse panel? The issue I'm having is the image toggles for the outer and inner panels. The collapse part is working fine, the image toggle is what I'm having problems with. Here is something similar to what I have. Please forgive any syntax errors, I had to make up an example that is similar to mine.
<div class="container">
#foreach(AccountModel aModel in Model.AccountModels)
{
<div class="panel panel-default">
<div class="panel-heading" data-target="##aModel.Id" data-toggle="collapse" role="button">
<h4 class="panel-title">
<a>
<span class="glyphicon glyphicon-plus"></span>
#aModel.Description
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="#aModel.Id">
<div class="panel-body">
#foreach(TransactionModel tModel in aModel.Transactions)
{
//nested collapse panel
<div class="panel panel-default">
<div class="panel-heading" data-target="##tModel.Id" data-toggle="collapse" role="button">
<h4 class="panel-title">
<a>
<span class="glyphicon glyphicon-plus"></span>
#tModel.Description
</a>
</h4>
</div>
</div>
<div class=panel-collapse collapse" id="#tModel.Id">
<div class="panel-body">
<p>Some details</p>
<p>More details</p>
<div>
<div>
}
</div>
</div>
</div>
}
</div>
<script>
$('.collapse').on('show.bs.collapse', function() {
$(this).parent().find(".glyphicon-plus:first").removeClass("glyphicon-plus").addClass("glyphicon-minus");
stopPropagation();
}).on('hide.bs.collapse', function() {
$(this).parent().find(".glyphicon-minus:first").removeClass("glyphicon-minus").addClass("glyphicon-plus");
stopPropagation();
});
</script>
I am trying to load some images in the browser using bootstrap in Express(Handlebars), and although rest of the media contents appear fine , the images are not getting loaded in the Browser(Chrome).
The code in the .hbs file is as follows:
1 <div class="panel panel-default">
2 <div class="panel-heading">
3 <h2 class="panel-title">{{index.title}}</h2>
4 <div>
5 <ul class="media-list">
6 {{#each movies}} <li class="media">
7 <a class="pull-left" href="#"
8 <img class="media-object img-responsive" src= {{ poster_path }} alt=" ">
9 </a>
10 <div class="media-body">{{ title }}<br/><strong class="media-heading">{{ popularity }}</strong>
11 </div>
12 </li>
13 {{/each}} </ul>
14 </div>
15 </div>
16
17 </div>
Here is a screen shot of the page:
https://drive.google.com/file/d/0B0oBZ2pgT9DUQldkaHFfNllFblU/view?usp=sharing
Any comments/suggestions would be much appreciated.
ADDED FIDDLE :
https://jsfiddle.net/chattes/9azgfxex/
Thanks
I was able to figure it out... it was a mistake with the div tags.
Latest fiddle:
https://jsfiddle.net/chattes/9azgfxex/
<title>{{title}}</title>
<body>
<div class="page-header">
<div class="container">
<div class="col-md-1">
<h1>discoverMovie</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<ul class="media-list">
<div class="col-sm-12 col-md-6">
<li class="media">
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" alt="Interstellar" width="200" height="100" class="img-thumbnail">
<div class="media-body">"Interstellar"
<br/><strong class="media-heading">14.524256</strong>
</div>
</li>
</div>
<div class="col-sm-12 col-md-6">
<li class="media">
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg"