Bootstrap 4 Carousel responsive img overlay - responsive-design

Can some one please help.
Trying to put a company logo overplayed on a bootstrap 4 carousel, so that when the image slides the company logo remains in the same place.
Trying to avoid Java and editing the photo so they have the logo on will not have the desired effect.
I can get it to show with main pitch div, but only if i give the image a defined width, ie not a percentage. This then stops it being responsive. which again doesnt have the desired effect.
CSS is standard here is the HTML.
If anyone could help that would be great.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/bluekitchen.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/greykitchen.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/kitchentable.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="mainPitch" style="position:absolute; top:40%; left: 40%;">
<div class="container">
<div class="row">
<div class="fixedcaption">
<img class="mx-auto d-block" src="images/greenwelllogotext.svg" style="width: 15em;" alt=""/>
</div>
</div>
</div>
</div>

Related

Creating an active link on a navigation bar while using a master page

I know there are a lot of questions surrounding this topic online however I cannot get any of the solutions to work for me.I have tried numerous way suggested online. I have a master page with my navigation bar code and I want the active link to be highlighted in green when I am on a particular page of the website. I can't figure out what I am doing wrong or missing to get this to work. I am new to ASP.Net and C# so any help would be appreciated.
Here is my current code in body tags of my master page:
<script>
$(document).ready(function () {
var url = window.location;
$('.sidebar .nav').find('.active').removeClass('active');
$('.sidebar .nav li a').each(function () {
if (this.href == url) {
$(this).parent().addClass('active');
}
});
});
</script>
<form id ="form1" runat="server">
<div class="wrapper">
<div class="sidebar" data-color="green" data-image="../assets/img/side-navship.jpg">
<div class="logo">
<a href="Default.aspx" class="simple-text">
Speed-E
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="">
<a href="<%= Page.ResolveUrl("~/Default.aspx") %>">
<i class="material-icons">dashboard</i>
<p>Home</p>
</a>
</li>
<li class="">
<a href="<%= Page.ResolveUrl("~/NewCert.aspx") %>">
<i class="material-icons">content_paste</i>
<p>New Certificate</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-transparent navbar-absolute">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> </a>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<asp:ContentPlaceHolder ID="BodyContent"runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</form>

Create a bookmark between 2 different views in MVC

I have two views; Index and Giftworx. In the Index I have icons and when each is clicked it should direct user to a specific point in the GiftWorx page. I've tried the below code but it didnt work. Any help would be appreciated.
Index View:
<div class="col-md-4 w3_agileits_features_grid">
<div class="agileits_w3layouts_features_grid">
<div class="col-xs-4 agileits_w3layouts_features_gridl">
<div class="agile_feature_grid">
#* <i class="fa fa-gift" aria-hidden="true"></i>
</div>*#
<i class="fa fa-gift" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-8 agileits_w3layouts_features_gridr">
<h4>Who uses GiftWorx</h4>
<p>See who uses GiftWorx and more.</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
GiftWorxView
<div class="why-convertible-box" id="GiftWorxUsers">
<div class="container" id="GiftWorxUsers">
<h1>Who uses GiftWorx<i class="fa fa-question-circle"></i></h1>
</div>
</div>
<div class="hoc container clear" id="GiftWorxUsers">
<div class="row">
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" style="height:auto;" src="~/Content/myTemplate/Logos/1.jpg" />
</div>
</div>
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" src="~/Content/myTemplate/Logos/17.jpg" />
</div>
</div>
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" src="~/Content/myTemplate/Logos/15.jpg" />
</div>
</div>
This is a little bit tricky but should work fine. First I declare the variable with concatenated section of your page:
#{
var strLink = Url.Action("GiftWorxUsers", "GiftWorx") + "#GiftworxArea";
}
Then on your Index View, put this on your a href link:
<div class="agile_feature_grid">
<a href='#strLink'>
<i class="fa fa-gift" aria-hidden="true">
</i>
Link text here
</a>
</div>
Make sure you have an area in your View of Giftworx which has a name in this example: Giftworx by adding this piece of code:
<a name="GiftworxArea"></a>
<div class="col-md-4 w3_agileits_features_grid">
//Other stuffs here
</div>
Now when you click on that link, you will be directed on your page on that exact spot with a section name GiftworxArea.

selenium locate list, the list need click

<div class="tab-content" data-reactid=".0.2.1.0.0.0.3.1">
<div class="tab-pane fade active in" data-reactid=".0.2.1.0.0.0.3.1.$0/=10" aria-hidden="false" role="tabpanel">
<div class="image-selection" data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0">
<div class="active" data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=13469965627809213" data-type="centos" tabindex="-1">
<div class="" data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=18596926569705582" data-type="coreos" tabindex="-1">
<div class="" data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=18906258853045" data-type="debian" tabindex="-1">
<img data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=18906258853045.0" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAMAAACf4xmcAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAH+UExURQAAAM3Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly83Ly...c15gAcebkVPMm3W3aFtpmZ6oLXOSigQ6ysw7R/t5LtBcIlyJFnAS4WCewYW8MRNdmH7D1EO7ZLax9zwdcosCBQZ+Y6Be2KMEqFeOHr1fb/nKrhVtUoUZsX1dECbMAlLi9gNVc3a1jr5tCUKrArwGUu3VDNl5NE/j5tm+zALS5bxGi90jBOPDYLbBaV/WL+caIpK1EreuiVBbhvFdhd1FWUK9KMINHQj8XQt0y2h+jzXI9Omg7X8INaeSttX/Gb6M/CTynrxnxzs+ZsA3fu3ZaxzwMTmFT6MWjBkzTtNpuAAJf9wb9LGJka++ULA+mxh63NgQ4q5SV+kU5ZhD3vx5cf3QncuNoyxGtqD0S+hzuH38Tfgx72cfVpsZBPIZs/4d0rA86cSH7bqwBn/sbk3EnglI6fR60LEaMOjl2PgFUHNxLXzsTRBBTr4QoAy0Md3DWg/qMO7tEL4MPr5P1Le9uFdx67n1YW/wAjJbJJbx+wqAAAAABJRU5ErkJggg==">
<p data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=18906258853045.1">debian</p>
<ul data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=18906258853045.2">
<li data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=18906258853045.2.0">
<li data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=18906258853045.2.1:$0=106447977267581051">debian6.0.10 64位 基础版</li>
<li data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=18906258853045.2.1:$0=18995325015441454">debian7.8 64位 基础版</li>
<li data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=18906258853045.2.1:$0=1368072207254144">debian7.8 64位 docker版</li>
</ul>
</div>
<div class="" data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=19625720578642721" data-type="opensuse" tabindex="-1">
<div class="" data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=16953234329707462" data-type="ubuntu" tabindex="-1">
<div class="" data-reactid=".0.2.1.0.0.0.3.1.$0/=10.0.$0=135222387374229913" data-type="windows" tabindex="-1">
</div>
i want locate the image:debian6.0.10 64位 基础版, but i fault...
please help me, thank you so much

Show bootstrap panel in a row inside foreach loop

Here is my code, what should I do to show 3 panels in a row. Is there any way to do this?
Its showing in the same row but the next panel starts slightly below the previous one I'll be really thankful to you for your help
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h4>#c.PhaseText, #c.SectorText-#c.PlotAddress</h4>
</div>
<div class="panel-body text-center">
<p class="lead">
<img src="~/images/plot...image.jpg" />
</p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item" style="border:none">
#c.AreaText
</li>
<li class="list-group-item" style="border:none">
Facing Park
</li>
<li class="list-group-item text-center" style="border:none">
Near Mosque
</li>
<li class="list-group-item" style="border:none">
Near Commercial
</li>
<li class="list-group-item" style="border:none">
Corner
</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-info">Detail View</a>
</div>
</div>
</div>
Just Add <div class="row"> like this:
<div class="row">
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
....
}
</div>

Not possible to scroll with ionic list

Hi everyone I am very new to ionic and here's my problem.
In the following view I find it impossible to scroll down. I don't know where it comes from and I have read similar posts relating to ionic list but couldn't find a solution that works for me !
Here's my code
<ion-view view-title="footparams">
<ion-content>
<div class="list text-center has-header">
<a class="item item-icon-left top" href="#">
<div class="row">
<div class="col col-25">
<img class= "icon_size_edit_foot" src="../img/icon_disponibilite.svg"/>
</div>
<div class="col col-75">
<p class="dispo">Disponibilité du terrain</p>
</div>
</div>
</a>
<div class="row text-center">
<div class="col col-50">
<a class="item item-icon-left item-icon-right" href="#">
<img id= "icon_calendar" src="../img/icon_calendrier.svg"/>
<p class="time_date" > 29/12/14</p>
</a>
</div>
<div class="col col-50">
<a class="item item-icon-left item-icon-right" href="#">
<img class= "icon_size_edit_foot" src="../img/icon_horloge.svg"/>
<p class="time_date">19h00</p>
</a>
</div>
</div>
<a class="item item-icon-left" href="#">
<div class="row">
<div class="col col-25">
<img id="icon_localisation" src="../img/icon_localisation.svg"/>
</div>
<div class="col col-50 venue">
<p>Le five Bobiny</p>
</div>
</div>
</a>
<a class="item item-icon-left" href="#">
<div class="row">
<div class="col col-25">
<img class= "icon_bonhomme" src="../img/icon_bonhomme.svg"/>
</div>
<div class="col col-50 venue">
<p>Nombre de joueurs <br> (organisateur inclus)</p>
</div>
<div class="col col-25 venue">
<p id="number_players">10</p>
</div>
</div>
</a>
<a class="item item-icon-left" href="#">
<div class="row">
<div class="col col-25">
<img class= "icon_bonhomme" src="../img/icon_partager.svg"/>
</div>
<div class="col col-50 venue">
<p>Vos amis peuvent <br> inviter leurs amis</p>
</div>
<div class="col col-25 venue">
<ion-toggle id="invite_frient_toggle" ng-model=""
ng-change="pushNotificationChange()">
</ion-toggle>
</div>
</div>
</a>
<a class="item item-icon-left" href="#">
<div class="text-center"> <p>Niveau du Foot</p></div>
<div class="row">
<div class="col"><img class= "icon_size_edit_foot" src="../img/niveau_1.svg"/><p>Débutant</p></div>
<div class="col"><img class= "icon_size_edit_foot" src="../img/niveau_2.svg"/><p>Moyen</p></div>
<div class="col"><img class= "icon_size_edit_foot" src="../img/niveau_3.svg"/><p>Expert</p></div>
<div class="col"><img class= "icon_size_edit_foot" src="../img/niveau_tous.svg"/><p>Tous</p></div>
</div>
</a>
</div>
<button class="button button-block button-positive">
Valider
</button>
<button class="button button-block button-assertive">
<img class= "icon_size_edit_foot" src="../img/icon_carton rouge.svg"/>
Supprimer ce Foot
</button>
Solved, my collegue installed the taskrunner gulp without telling me... Had to run gulp launch for it to work

Resources