ok i have been working on this issue for a week now and i cant figure it out.
im working on a site built on angularjs and we load info from json files stored on the sever all this works but when the page loads for some reason one of the image tags always send off a 404 error but then it all loads fine
Example of error
GET http://localhost:3000/angular/::%20listp.titlePicture.urls[0].url[3].href%20%7C%20srcFill%20:%20%7Bwidth:447,height:351%7D%20:: 404 (Not Found) index.html:1
i have manually checked all 27 entries in the json file and titlePicture.urls[0].url[3].href is set for all of them
anyone have any ideas? the page can been seen here http://www.relaunch.bsf-immobilien.de/#/wohnen
this is the relevant ng-repeat code
<div class="col-md-4 col-ms-6 col-sm-4 col-xs-12" ng-repeat="listp in filteredtodos | unique:'id'">
<div class="panel panel-default relative" style="width: 100%; height:380px; padding-bottom: 15px; float: left; box-sizing: border-box;">
<div class="ribbon-heading ribbon-default inline absolute left margin-none">
<span ng-show="listp.xsitype == 'OfferApartmentBuy'">Wohnung zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Haus zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Wohnung zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Haus zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferShortTermAccommodation'">Wohnen auf Zeit</span>
</div>
<div class="cover hover overlay margin-none" style="max-height: 250px;">
<a href="#/wohnen/::listp.id::">
<img src=":: listp.titlePicture.urls[0].url[3].href | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;">
</a>
<a href="#/wohnen/::listp.id::" class="overlay overlay-full overlay-bg-black overlay-hover" style="height: 143px;">
<span class="v-center">
<span class="btn btn-circle btn-white btn-lg"><i class="fa fa-eye"></i></span>
</span>
</a>
</div>
<div class="panel-body">
<h4 class="margin-v-0-5">::listp.title::</h4>
<p><span ng-show="listp.xsitype == 'OfferApartmentBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Miete: </span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Miete: </span> ::listp.price.value | currency:'EUR' ::
<a href="#/wohnen/::listp.id::">
<button class="btn btn-primary btn-lg absolute bottom btn-circle right" style="margin-bottom:10px; margin-right:10px;"><i class="fa fa-arrow-right"></i></button>
</a>
</p>
</div>
</div>
</div>
try to use ng-src instead of src, moreover one-way binding :: doesn't need to be called twice in expression :
<img ng-src="::listp.titlePicture.urls[0].url[3].href" ... />
The issue seems to be with your URL:
<img src=":: listp.titlePicture.urls[0].url[3].href | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;"></a>
It seems you really want to access the value of an array listp.titlePicture.urls[0].url[3].href right?
In that case better mark it as an angular Expression, as follows:
I have corrected it in the following code:
<div class="col-md-4 col-ms-6 col-sm-4 col-xs-12" ng-repeat="listp in filteredtodos | unique:'id'">
<div class="panel panel-default relative" style="width: 100%; height:380px; padding-bottom: 15px; float: left; box-sizing: border-box;">
<div class="ribbon-heading ribbon-default inline absolute left margin-none">
<span ng-show="listp.xsitype == 'OfferApartmentBuy'">Wohnung zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Haus zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Wohnung zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Haus zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferShortTermAccommodation'">Wohnen auf Zeit</span>
</div>
<div class="cover hover overlay margin-none" style="max-height: 250px;">
<a href="#/wohnen/::listp.id::">
<img src=":: {{listp.titlePicture.urls[0].url[3].href}} | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;">
</a>
<a href="#/wohnen/::listp.id::" class="overlay overlay-full overlay-bg-black overlay-hover" style="height: 143px;">
<span class="v-center">
<span class="btn btn-circle btn-white btn-lg"><i class="fa fa-eye"></i></span>
</span>
</a>
</div>
<div class="panel-body">
<h4 class="margin-v-0-5">::listp.title::</h4>
<p><span ng-show="listp.xsitype == 'OfferApartmentBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Miete: </span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Miete: </span> ::listp.price.value | currency:'EUR' ::
<a href="#/wohnen/::listp.id::">
<button class="btn btn-primary btn-lg absolute bottom btn-circle right" style="margin-bottom:10px; margin-right:10px;"><i class="fa fa-arrow-right"></i></button>
</a>
</p>
</div>
</div>
</div>
Hope this works fine for you..
Related
I have a lot of images and I want to compare them with an image comparison slider but I can't see the entire image only a part of it. And I want to scroll into it to be able to see the entire image.
My HTML code looks like this :
<div class="overflow-scroll" id="image-comparison-slider">
<img class="overflow-scroll" width="100%" id="image1" src="../../static/img/screenshot.png" alt="before">
<div class="img-wrapper">
<img width="100%" id="image2" alt="after" src="../../static/img/screenshot1.png"/>
</div>
<span class="label label-before">Before</span>
<span class="label label-after">After</span>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
<i class="fa fa-arrow-left"></i>
<i class="fa fa-arrow-right"></i>
</div>
<div class="handle-line"></div>
</div>
</div>
I tried to use overflow-scroll from bootstrap 5 but it didn't work.
Now it look like this:
And I want to scroll down into the both images in the same time.
Set the parent div overflow-y: scroll so that, you can scroll to see the whole image. and here I am using bootstrap carousel to see all the images.
.carousel {
height: 600px;
width: 100%;
}
.carousel-inner {
height: 100%;
width: 100%;
overflow-y: scroll;
}
img {
height: auto
width: 100%;
object-fit: cover;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/red-flowers-1659044733.jpeg"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://cf.ltkcdn.net/small-pets/images/orig/304120-1600x1066-lovebirds-as-pets.jpg"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://www.evolo.us/wp-content/uploads/2019/04/0516-0.jpg"
class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
I created an input field to search for words or their partial matches. In this example, I'm using the word cool.
The issue is that after 1st found match, I'm seeing matches from the HTML code and can't figure it out why. If I'm trying to find matches for the 3rd time, everything gets stuck.
Can someone help me understand why it's happening this?
Is there a way to write this part of code differently?
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
document.addEventListener("DOMContentLoaded", function() {
let btn = document.querySelector('#findWord');
btn.addEventListener('click', function(){
let occurrences = [];
$('.timeline-type__content ul > li > a > .reports-list-item__title--compendium').each(function (i) {
// create a regexp from our term
const word = document.getElementById("searchedWord").value; // Eg: "cool"
const allCharacters = word.split(""); // ["c", "o", "o", "l"]
// Optional: remove duplicate characters:
const characterSet = new Set(allCharacters);
const uniqueCharacters = [...characterSet]; // ["c", "o", "l"]
const pattern = `(${uniqueCharacters.join("|")})`; // c|o|l
const r = new RegExp(pattern, "ig"); // /(c|o|l)/ig
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
});
let lengthOccurrences = occurrences.length;
console.log('Number of occurrences is:' + ' ' + lengthOccurrences);
let currViewMatch = Number(document.querySelector('#current').textContent);
console.log('Number of current viewed match is:' + ' ' + currViewMatch);
// if we are currently viewing a match, increment so we move to the next one
currViewMatch = currViewMatch > 0 ? currViewMatch + 1 : 0;
// if the incremented number is higher than the number of matches, reset it to 0
currViewMatch = currViewMatch > lengthOccurrences ? 1 : currViewMatch;
// if this is the first click and we found matches, set current to the first match
currViewMatch = currViewMatch == 0 && lengthOccurrences > 0 ? 1 : currViewMatch;
let insertNbrOcc = lengthOccurrences > 0 ? ' of ' + lengthOccurrences : ' matches found in document';
// set number of matches found
let count = document.querySelector('#count');
count.textContent = insertNbrOcc;
// console.log(count);
// set number of currently viewed match
let nbrViewMatch = document.querySelector('#current');
nbrViewMatch.textContent = currViewMatch;
// console.log(insertTxtViewMatch);
if(currViewMatch != 0){
// open the section holding the currently viewed match using the indexes we stored earlier
$('.timeline-compendium__content').eq(occurrences[currViewMatch - 1]).collapse('show');
$('.timeline-type .timeline-type__content').eq(occurrences[currViewMatch - 1]).collapse('show');
}
});
});
.found {
background-color: yellow;
}
#labels {
margin-left: 15px;
font-size: 16px;
}
.timeline-compendium {
margin-left: 2rem;
}
.timeline-type__header {
width: 400px;
height: 50px;
background-color: rgb(46, 177, 100);
display: flex;
align-items: center;
justify-content: center;
color: white;
border: 1px solid white;
}
.timeline-type__header:hover {
color: white;
background-color: rgb(35, 119, 70);
}
#tab-content {
border: 1px solid red;
}
input[type=text] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* input[type=text]:focus {
outline: 3px solid rgb(87, 163, 214);
} */
input#findWord {
background-color: rgb(248, 211, 3);
/* Green */
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- HTML CODE -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- <form id="searchForm" name="searchForm"> -->
<label for="searchedWord">Search</label>
<div>
<input type="text" id="searchedWord" placeholder="search.." aria-labelledby="searchedWord"/>
<button type="submit" id="findWord" value="Find">Find</button>
</div>
<!-- </form> -->
</div>
<div class="col-sm-6">
<div id="labels">
<span id="current"></span>
<span id="count"></span>
<span id="message"></span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<section class="timeline-compendium">
<a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button"
aria-expanded="true" aria-controls="introduction">
<div class="row align-items-center">
<div class="col-auto">Foreword</div>
<div class="col"><span></span></div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="introduction">
<div class="timeline-type">
<a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Foreword</div>
<div class="col timeline-type__title">Foreword</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand this
item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="foreword">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>Foreword
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Foreword cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 2 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button"
aria-expanded="false" aria-controls="titleA">
<div class="row align-items-center">
<div class="col-auto">Title A</div>
<div class="col"><span>SUMMARY</span></div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleA">
<div class="timeline-type"><a class="accordion" data-toggle="collapse" href="#summary" role="button"
aria-expanded="false" aria-controls="summary" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">A</div>
<div class="col timeline-type__title">Summary</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="summary">
<ul class="reports-list">
<li><a href="/en/secgen/courtsecretariat/Decisions/sommaire_en.pdf?d=wd815d51ad20c480292bc796688fd10d2&csf=1&e=XIu0Q9"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>A
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Summary not cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 3 -->
<section class="timeline-compendium"><a class="btn timeline-compendium__header collapsed" data-toggle="collapse"
href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
<div class="row align-items-center">
<div class="col-auto">Title B</div>
<div class="col"><span>The Institution, the Court, operational procedures, the Members</span>
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleB">
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false"
aria-controls="chapterB0" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 0</div>
<div class="col timeline-type__title">Treaties on European Union</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB0">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter">B 0</div>
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">
Treaties on European Union
</div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b01.pdf?d=wa9cc5281eeb347718865a52bf6c67efb&csf=1&e=zyPEtD"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Status of the Court / Revision of Article 4 of the EEC Treaty"
data-delay="400" aria-hidden="true"></em>B 0.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Status of the Court / Revision of Article 4 of the EEC Treaty cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b02.pdf?d=w93c3d23dbdc04bcda16c5be9151c183a&csf=1&e=yaoQwr"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Obligations deriving from the Treaty on European Union" data-delay="400"
aria-hidden="true"></em>B 0.2
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Obligations deriving from the Treaty on European Union
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b03.pdf?d=w56410e2b1b9f4ee2af9278081fc1d2c6&csf=1&e=BXz2wy"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip" title="The Court's name"
data-delay="400" aria-hidden="true"></em>B 0.3
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
The Court's name
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB1" role="button" aria-expanded="false"
aria-controls="chapterB1" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 1</div>
<div class="col timeline-type__title">The Court's operational procedures
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB1">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter">B 1.0</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">The
Court's structure
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false"
aria-controls="chapterB2" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 2</div>
<div class="col timeline-type__title">Members of the Court
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB2">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter">B 2.1</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">Code
of conduct for the members and former members of the Court
</div>
</a>
</li>
<li><a href="#" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Code of conduct for the Members and former Members of the Court"
data-delay="400" aria-hidden="true"></em>B 2.1.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Code of conduct for the Members and former Members of the Court - Cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
(This was too long for a comment, maybe already helps you solve the issue)
You call $(this).html().match(r); to find matching words. Of course this will match occurences in the HTML. If you search for example "class" or "section". The HTML itself is matched there.
You should loop through HTML elements which are text nodes and call your .match(r) on each of them. Otherwise it will find tags, attributes and values in the attributes as well.
Taken from this answer: How do I select text nodes with jQuery:
$(elem).contents().filter(function() { return this.nodeType == Node.TEXT_NODE; });
In the code which replaces matches, you write $(this).html($(this).html().replace( ... - you can change this to $(this).html($(this).text().replace( ... if you only go through the text nodes and be safe there is no HTML there.
I have a bootstrap modal that contains a bunch of strings. I also have a loop of cards that each has a different 'id'. When I open the modal I want id to be displayed inside the modal (I will use it to get more info later, like name, description and deadline).
This is my loop of JSON objects:
<div class="card-list-body">
{% for assignment in förseningar %}
<div class="card card-kanban" data-toggle="modal" data-target="#task-modal" id="{{assignment.id}}">
<script>
$('#task-modal').on('show.bs.modal', function(event) {
var Id = $(event.relatedTarget).data('id');
console.log("aaa")
$(event.currentTarget).find('input[name="modal-title"]').val(Id);
});
</script>
<div class="card-body">
<div class="dropdown card-options">
<button class="btn-options" type="button" id="kanban-dropdown-button-16" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item text-danger" href="#">Archive Card</a>
</div>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 400">
{{assignment.type_of_assignment}} i {{assignment.course}} </h6>
</a>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600">
{{assignment.name}}
</h6>
</a>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600; color: #d21b1b">
Försenad
</h6>
</a>
</div>
<style>
.hor-list {
list-style-type: none;
overflow: hidden;
display: block;
text-decoration: none;
padding: 0px;
margin-right: 5px;
}
.circle {
border-radius: 50%;
height: 30px;
text-align: center;
width: 30px;
}
.list-item {
float: left;
margin-right: 1px
}
.initials {
font-size: 15px;
font-weight: 800;
line-height: 1;
position: relative;
top: 3px;
/* 25% of parent */
}
</style>
<ul class="hor-list2">
{% for teacher in assignment.teachers.all %}
<li class = "list-item2">
<span class="step" style="background: {{teacher.userColor}};">{{teacher.user.username|first|capfirst}}</span>
</li>
{% endfor %}
<li class = "list-item2">
<p style="margin-left: 10px; font-size: 15px">
{{assignment.teachers.count}} Lärare:
{% for teacher in assignment.teachers.all %}
{{teacher.user.username|capfirst}}
{% endfor %}
</p>
</li>
</ul>
<hr>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600; color: rgb(82, 130, 202)">
Börja Plugga. Skapa en studieplan
</h6>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
This is a piece of the modal:
<div class="modal modal-task" id="task-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Create Brand Mood Boards</h5>
<button type="button" class="close btn btn-round" data-dismiss="modal" aria-label="Close">
<i class="material-icons">close</i>
</button>
</div>
<!--end of modal head-->
<div class="modal-body">
<div class="page-header">
<p class="lead">Assemble three distinct mood boards for client consideration</p>
<div class="d-flex align-items-center">
<button class="btn btn-round" data-toggle="modal" data-target="#user-manage-modal">
<i class="material-icons">add</i>
</button>
</div>
<div>
<div class="progress">
<div class="progress-bar bg-success" style="width:42%;"></div>
</div>
<div class="d-flex justify-content-between text-small">
<div class="d-flex align-items-center">
<i class="material-icons">playlist_add_check</i>
<span>3/7</span>
</div>
<span>Due 14 days</span>
</div>
</div>
</div>
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#task" role="tab" aria-controls="task" aria-selected="true">Task</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#files" role="tab" aria-controls="files" aria-selected="false">Files</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="task" role="tabpanel">
<div class="content-list" data-filter-list="checklist">
the javascript:
<script>
$('#task-modal').on('show.bs.modal', function(event) {
var Id = $(event.relatedTarget).data('id');
console.log("aaa")
$(event.currentTarget).find('input[name="modal-title"]').val(Id);
});
</script>
As I said. I want a detail page of a card. So when I press the card I get a popup. I want that popup to contain a more detailed page of the card. I can't figure out how to get the data into the popup modal tho (task-modal) I think this is close but if anyone could help it would be greatly appreciated!
Three issues:
Your javascript is inside the for loop ({% for assignment in förseningar %}), it should be outside. Otherwise it's repeated x times.
var Id = $(event.relatedTarget).data('id') means that the button triggering the modal has a data-id attribute. But yours doesn't, it has an id attribute. So either set data-id="{{ assignment.id }}" in the <div class="card card-kanban" ...> or change to var Id = $(event.relatedTarget).attr('id').
$(event.currentTarget).find('input[name="modal-title"]') means you're looking for an <input name="modal-title"> element in your modal, but I don't see that anywhere. Maybe it got cut-off in which case no issue. But if you're trying to change the modal-title div of your modal, then the selector should be: $(this).find('.modal-title').
Note: I use $(this) instead of $(event.currentTarget). Shouldn't make any difference as the currentTarget is the modal and so is this.
I have a grid view (using flex box approach) and i want to change it to list view using style sheet and j query/java script. Problem: Since in grid view approach all elements are in separate div, while changing it to list view they all need to be in single line (some still need vertically aligned) and this is responsive application.
I have created style sheet class to change flex box from row to column and things look good. But now all div are not in single line. Need some help with style sheet class.
On click of a button, i will remove grid-row, grid-item and add grid-column and grid-column-item classes. But as shown in HTML, it is all div structure in grid-item class. I need to change this div as well (like product_search_img class on extreme left in a single line followed by next three div in one column (in same line) and then followed by price, add to cart button in one column.
Current Layout:
Required Layout:
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
height: 400px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 230px;
position: relative;
padding: 7px;
box-sizing: border-box;
}
.grid-column {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
.grid-column-item {
height: 200px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 920px;
position: relative;
padding: 7px;
border-bottom: 1px solid #ccc;
}
.grid-column-item:first-child {
margin-top: 7px;
border-top: 1px solid #ccc;
}
<div class="grid-row">
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
</div>
</a>
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a>
<a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
</div>
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>
<div class="row" id="login-mode-cntl">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value">
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>
From your comment, I believe you're already able to get the outer block to work as required, in the example below I have edited and created 3 separate blocks and did some restructuring.
Also, check the In Stock div, it will toggle between list_view and grid_view.
There will be few additional divs you will need to create deeper inside second_block example to handle VPN and SKU in the same line for List View.
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.grid-item {
/* height: 400px; */
flex-basis: 25%;
-ms-flex: auto;
max-width: 230px;
position: relative;
padding: 7px;
box-sizing: border-box;
border: 2px solid red;
}
.grid-column {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
.grid-column-item {
height: 200px;
flex-basis: 25%;
-ms-flex: auto;
max-width: 920px;
position: relative;
padding: 7px;
border-bottom: 1px solid #ccc;
}
.grid-column-item:first-child {
margin-top: 7px;
border-top: 1px solid #ccc;
}
.outer_block {
display: flex;
flex-direction: column;
}
.list_view {
display: none;
}
#media only screen and (max-width: 800px) {
.grid-row {
flex-direction: column;
}
.grid-item {
min-width: 100%;
}
.outer_block {
flex-direction: row;
}
.img-thumbnail {
width: 100px;
}
.second_block {
flex: 1;
}
.grid_view {
display: none;
}
}
<div class="grid-row">
<div class="grid-item" data-rank="1">
<div class="product_info_panel">
<div class="font-12 text-align-left margin-left-sm margin-top-sm">
<span class="color-font-blue bold">Sponsored</span>
</div>
<div class="outer_block">
<div class="first_block">
<!-- Image -->
<a href="#" data-name="sponsored_search_result_link">
<div class="product_search_img">
<img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%" />
</div>
</a>
</div>
<div class="second_block">
<!-- Accessories Text -->
<div class="font-10 text-align-left status-flag">
<a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
title="This product has accessories">Accessories</a
>
<a
tabindex="1"
role="button"
data-placement="bottom"
data-trigger="focus"
class="color-font-black bold statusflag statusflag2 HideProductStatusFlag"
data-toggle="popover"
data-content="body"
id="statusflag2"
data-original-title=""
title=""
></a>
</div>
<!-- Link to Prod Description -->
<a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
<div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
i5-6300U Dual-core (2 Core)
</div>
</a>
<!-- VPN AND SKU -->
<div class="font-12 text-align-left margin-top-md">
<div class="show">
<span class="color-font-dark-gray bold">VPN: </span
><span class="color-font-dark-gray">F47UT</span>
</div>
<div class="show">
<span class="color-font-dark-gray bold">SKU: </span
><span class="color-font-dark-gray">440Z</span>
</div>
</div>
<!-- In Stock when in List View-->
<div id="login-mode-cntl" class="list_view">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
</div>
<div class="third_block">
<!-- Adding Button -->
<div class="row">
<!-- Price -->
<div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">
$1,345.46
</div>
<!-- In Stock when in Grid View-->
<div class="row" id="login-mode-cntl" class="grid_view">
<div class="color-font-green margin-bottom-sm">In Stock</div>
</div>
<div class="col-xs-3 col-sm-3 padding-vsm">
<input class="form-control text-center AddInput-default" title="Please enter the value" />
</div>
<div class="col-xs-9 col-sm-9 padding-vsm">
<button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
<i class="fas fa-shopping-cart"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
i used two different menu for desktop and mobile. when i go in mobile view collapse menu is not working.I use:
$(".navbar-collapse").collapse('hide');
After using this on page load it shows first then hide.
Here is my mobile menu code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="top-header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header pull-left" style="margin-left:5px">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a href="http://localhost/eboighar/" class="logo-mini">
<img src="http://localhost/eboighar/img/eboi-s-logo.png" alt="Eboighar Small Logo">
</a>
<div class="pull-right cart-mview-top">
<a id="cart_at_head2" class="pull-right">
<div class="total" style="margin-top:10px;">
<span style="color: #666666;font-size: 14px;margin-top: 13px;padding-right: 5px;" id="headeritems3">0</span>
</div>
<img src="http://localhost/eboighar/img/cart.png" style="margin-right:5px;border-left: 1px solid #b3b3b3; margin-top: 0px;padding-left: 5px;" alt="cart">
</a>
<!-- <img class="header-busket" src="asset/busket.png"/> -->
<div id="cart-sumary2" class=" col-xs-12 m-tab-view" style="display : none;background:#fafafa;">
<div class="cart-sumary2-mobile" style="background:#fafafa;">
<h4 class="txt-blue" style="text-align:center">Cart Summary</h4>
<img id="close_cart_up2" class="close-cart" src="http://localhost/eboighar/img/minus.png" alt="eboighar Ico" style="position: absolute;top:15px; right:15px; height:16px;">
<div>
<div class="padding-10" id="cart_item_holder2">
<div class="bg-fa">
<div id="cart_product_list2" class="mCustomScrollbar _mCS_2 mCS-autoHide mCS_no_scrollbar"><div id="mCSB_2" class="mCustomScrollBox mCS-dark mCSB_vertical mCSB_inside" style="max-height: 300px;" tabindex="0"><div id="mCSB_2_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr"><div class="btm-border-sum no_item"><strong>You Cart is empty</strong>
<div class="clear_both"></div>
</div></div><div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-dark mCSB_scrollTools_vertical" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>
<div id="price_and_button2" style="display: none;">
<div class="pull-right" style="font-size:18px;">Total : Tk <font id="cart_list_total2" class="text-red">0.00</font></div>
<div class="clear_both"></div>
<div class="crt_btn_con ">
</div>
</div>
</div>
</div>
</div>
</div><!-- End of Cart Summery. -->
</div>
<div class="clearfix"> </div>
</div>
</div>
<div stylle="clear:both; margin:0 5px;">
<form class="menu-search-frm" role="search" action="http://localhost/eboighar/index.php/index/searchbookview_m/" method="post" onsubmit="return submfrom_2(0)" name="searchForm_2" id="searchForm_2">
<div class="form-group menu-top-search">
<div class="input-group" style="padding:0 6px;">
<input class="form-control" style="border:1px solid #ccc;background:#fff;" id="search2" name="search2" autocomplete="off" onkeyup="lookup_2(this.value,event);" value="" placeholder="Enter Book Title, Author or Publisher" type="text">
<div class="suggestionsBox" id="suggestions_2" style="display: none; position:absolute; z-index:999999999999999999;background:#fff;left: 27%;top:30px;">
<!-- <img src="http://localhost/eboighar/images/view/upArrow.png" style="position: relative; top: -10px; left: 30px;" alt="upArrow" /> -->
<div class="suggestionList" id="autoSuggestionsList_2" style="max-height:300px; overflow:auto">
</div>
</div>
<div class="input-group-btn">
<a style="border:0px;" class="btn btn-default add_serch glyphicon glyphicon-search" id="basic-addon2" href="javascript:submfrom_2(1); "> </a>
</div>
</div>
</div>
</form>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="m_menu_top_con" class="navbar-collapse collapse mobile-menu-top" aria-expanded="false">
<div style="clear:both"></div>
<a id="close_mobile_menu" class="close_mobile_menu btn pull-right" style=" margin: -6px -10px -3px;padding: 0;border:none !important"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
<div style="clear:both"></div>
<ul class="nav navbar-nav ">
<li class="active">
<i class="glyphicon glyphicon-home ico-danger"></i> Home
</li>
<li>
<i class="glyphicon glyphicon-user ico-success"></i> About eBoighar
</li>
<li><span><img class="nav-2-ico_ac" src="http://localhost/eboighar/img/howtobuy.PNG" alt="Eboighar How to Buy"></span>How to buy books</li>
<li><i class=" glyphicon glyphicon-tasks ico-warning"></i> Order unlisted books</li>
<!-- <li><i class="glyphicon glyphicon-file ico-info"></i> Tutorials</li> -->
<li><i class="glyphicon glyphicon-gift ico-danger"></i> Bulk order</li>
<li><i class="glyphicon glyphicon-briefcase ico-success"></i> Medical equipment</li>
<li><i class="glyphicon glyphicon-print ico-info"></i> Printing & Binding </li>
<li>
<i class="glyphicon glyphicon-globe ico-warning"></i> News
</li>
<li>
<i class="glyphicon glyphicon-earphone ico-info"></i> Contact Us
</li>
</ul>
<div style="clear:both"></div>
<p class="log pull-right" style="margin-bottom:10px;">
<a class="" href="http://localhost/eboighar/index.php/index/login" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-lock"></i>Login</a>
<a class="" href="http://localhost/eboighar/index.php/index/signup/" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-user"></i>Signup</a>
</p>
</div><!-- /.navbar-collapse -->
</nav>
You can see problem Here : http://eboighar.com/
Some one help to solve this...