I'm making a sort of card game. I'm using Bootstrap 3 as my framework with a deck of cards in a grid, each card in their own column.
When a card is clicked, I want the card to be displayed with its backside up as an overlay, like Bootstraps modal or equivalent. But when the card is clicked (or touched) it should flip, displaying the front which is the same as the image that was clicked to trigger the modal. It should be able to flip back and forward infinite number of times. Clicking outside the modal or on a close button, closes the modal and returns to the deck.
I'm able to do a card flip on an image. And I'm able to trigger a modal with dynamic content. But what I can't figure out is how to do this together so that I don't have to create a seperate modal for each card.
I've been pulling my hair over this issue for days now and I truly cannot wrap my head around how this can be made. My javascript skills are quite limited and I cant find any plugin or code example to help me in this (I've tried numerous options).
My grid is displayed in the snippet. No data-targets, modules or javascripts included though since I havn't found anything that works yet.
Any ideas?
main {
.container-fluid;
.text-center;
background: none;
header {
.container-fluid;
.text-center;
padding: 50px;
h1 {
font-weight: #font-weight-heading;
}
}
.cardColumns {
.make-row();
.cCard {
.make-xs-column(4);
.make-sm-column(3);
.make-md-column(2);
padding: 10px;
img {
width: 100%;
height: auto;
.img-rounded;
modal-body-shadow: 0 4px 8px 0 #000;
transition: 0.3s;
}
img:hover {
modal-body-shadow: 0 8px 16px 0 #000;
}
}
}
}
<main>
<div class="cardColumns">
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
</div>
</main>
This basically just changes the background image in the mid spin.
$(document).ready(function() {
initListeners();
});
function initListeners() {
$(".container").off();
$(".container").on("click",function() {
$(".container").removeClass("toggle")
$(this).addClass("toggle");
});
}
/*var Cards;
setTimeout(function() {
Cards = document.querySelectorAll(".container");
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].addEventListener("click", function(elem) {
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].classList.remove('toggle');
elem.target.parentElement.classList.add('toggle');
});
}, 1);*/
.container {
perspective: 1000px;
display: inline-block;
position: relative;
}
.card {
margin: 5px;
width: 105px;
height: 150px;
background: #000;
transition: transform .35s linear;
transform: rotateX(180deg);
transform-style: preserve-3d;
}
.card::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/gcRWf.png) center center;
background-size: cover!important;
transition: background 0.01s linear;
transition-delay: 0.175s;
}
.container.toggle .card {
transform: rotateX(0deg);
}
.container.toggle .card::after {
background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
With that also i have used external js to flip images reference to which you will get here.
$('.flip-card').flip();
function openModal(front_image, back_image) {
var message = $('#modal_1');
BootstrapDialog.show({
message: $('#modal_1'),
onshown: function() {
$('.front img').attr('src', front_image);
$('.back img').attr('src', back_image);
},
onhide: function(dialogRef) {
$('#hidden-div').append(message);
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button>
<div id="hidden-div" style="display: none">
<div class="container-fluid" id="modal_1">
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;">
<div class="front front-side" style="">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
<div class="back back-side" style="background-color : blue">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
</div>
</div>
</div>
</div>
</div>
Related
I want to make an accordion but I don't know how to enter the style 'accordion__content' which is inside
'accordion' to modify the display from block to none.
I want to make an accordion but I don't know how to enter the style 'accordion__content' which is inside 'accordion' to modify the display from block to none.
I want to make an accordion but I don't know how to enter the style 'accordion__content' which is inside 'accordion' to modify the display from block to none.
I want to make an accordion but I don't know how to enter the style 'accordion__content' which is inside 'accordion' to modify the display from block to none.
Code Pin Here
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | FAQ Accordion Card</title>
<!-- Feel free to remove these styles or customise in your own stylesheet đź‘Ť -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<img class="imgback" src="/design/desktop-design.jpg" alt="">
<div class="container">
<img src="images/illustration-box-desktop.svg" alt="" class="box__svg">
<div class="sub__container">
<img src="images/bg-pattern-desktop.svg" alt="" class="bg__svg">
<img src="images/illustration-woman-online-desktop.svg" alt="" class="women__svg">
<div class="faq">
<h1 class="faq__tittle">FAQ</h1>
<div class="accordion__container">
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">How many team members can I invite?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content">
<p >You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">What is the maximum file upload size?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content">
<p>No more than 2GB. All files in your account must fit your allotted storage space.
</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">How do I reset my password?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content">
<p>Click “Forgot password” from the login page or “Change password” from your profile
A reset link will be emailed to you.</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">Can I cancel my subscription?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content">
<p>Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">Do you provide additional support?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content">
<p>Chat and email support is available 24/7. Phone lines are open during normal</p>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
for (let i = 0; i<acc.length; i++){
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
/* var panel = this.nextElemenSibling;
console.log(panel);
if(panel.style.display === "block"){
panel.style.display = "none";
}
else{
panel.style.display = "block";
} */
});
}
</script>
</body>
</html>
You're looking for this.children[1] in your JS to target the accordions child with the class of accordion__content
Then you can create a class that will add a display of none to the accordion__tittle elements, adding by default in the HTML. Use JS to toggle it on the click event listener.
I did not clean up your CSS just show you how to add/remove using the conditional you have already written.
Alternatively you can just write the conditional to check if the el.style.display = block then add/remove like you did in your code pin.
NOTE: I removed all the other html and CSS to just focus on your question.
const acc = document.getElementsByClassName("accordion")
// much cleaner JS
for (let i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active")
this.children[1].classList.toggle('display-none') // toggle the class .display-none no conditional needed
})
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
/*ACCORDION*/
/* Added this class to use for toggling display of none to your accordian elements */
.display-none {
display: none;
}
.accordion__container {
padding-top: 20px;
padding-right: 15%;
}
.accordion {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
height: 3.5rem;
width: 100%;
}
.active .accordion {
background: green;
}
.accordion__tittle {
position: relative;
font-size: 0.9rem;
font-weight: 700;
}
.arrow {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
.accordion__content {
height: 40px;
width: 90%;
padding-top: 10px;
font-size: 0.8rem;
font-weight: 400;
}
.active {
background-color: seagreen;
}
hr {
opacity: 0.7;
}
.attribution {
position: absolute;
bottom: 0;
}
<div class="accordion__container">
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">How many team members can I invite?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content display-none">
<p>You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">What is the maximum file upload size?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content display-none">
<p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">How do I reset my password?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content display-none">
<p>Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">Can I cancel my subscription?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content display-none">
<p>Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">Do you provide additional support?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content display-none">
<p>Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
<hr>
</div>
To select all the elements with the same class:
const accordions = document.querySelectorAll('.accordion');
This is a NodeList, kind of the same as an array which has index start from 0.
If you want to select the first accordion, then:
const youAccordion = accordions[0];
and so on.
You must get this.lastElementChild property in click handler function, your function will be:
....
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
//var panel = this.nextElementSibling;//
var panel = this.lastElementChild;
console.log(panel);
if(panel.style.display === "block"){
panel.style.display = "none";
}
else{
panel.style.display = "block";
}
});
....
I'm working on a Vue poject and I let the user choose the width and height of app main container by clicking on each device specific icon (mobile, tablet, laptop and desktop). something like firefox responsive tool. how can I force elements inside the main container respond to it's own viewport rather than browser viewport?
I'm using UIKit width component to define my breakpoints. I know I can achieve this by adding/removing classes dynamically, but my Vue components are added dynamicallly by the user, so it's more complex.
I thought there might be a more generic way to do this. here's the sample code ( number of visible slides changes in defferent viewports and if my component is a grid element items inside it should wrap ( based on container width ) ):
<div id="main-container" :style="{width: deviceWidth, height: deviceHeight}">
<!-- Dynamically added component -->
<div class="uk-position-relative uk-visible-toggle uk-light" uk-slider>
<!-- UIKit Width classes -->
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="../../img/01.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</li>
<li>
<img src="../../img/02.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</li>
<li>
<img src="../../img/03.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</li>
<li>
<img src="../../img/04.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>
Explanation
This is a very simple, and minimal answer, it's literally been written to simply illustrate how you can tackle your problem, but as you can see within this answer, pressing the different buttons makes the containing element grow/shrink.
As you can see within this solution, all of the elements that are responsive will respond based on the parent element's size. It's really easy to achieve this if you use fixed sizes, like in my example.
Although, take note, I only selected to use a very minimal implementation, no use of Vue or anything sophisticated, this is a simple solution, using native technologies only.
Edit
After having learned exactly what you're looking for, the long story short is that there's no clean & easy way to do that, at least to my knowledge, your best bet would be to simply change & alter the classes, that, by far makes the most sense.
Because your question is somewhat vague, to me it appears that you're trying to execute logic similar to what #arieljuod has stated, where you're trying to run media queries on specific DOM elements rather than the user's viewport.
I'm sorry to inform you that to my knowledge there's no clean and easy way to achieve this, not to say that there isn't a way, I'm sure someone has found a way, but a clean, concise, easy to read, solution, I highly doubt there's such a solution.
const clickHandler = txt => {
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
break;
case 'Tablet':
clName = 'tablet';
break;
case 'Mobile':
clName = 'mobile';
break;
default:
clName = 'desktop';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
Possible Solution
What I would do in this scenario is as stated above, alter classes on the slider, like so, I mean you could use extra/additional logic to check the user's width & whatnot, but this is possibly the most simplistic approach possible.
const clickHandler = txt => {
const slider = document.getElementById("mySlider");
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
break;
case 'Tablet':
clName = 'tablet';
slider.className = 'uk-slider-items uk-child-width-1-3';
break;
case 'Mobile':
clName = 'mobile';
slider.className = 'uk-slider-items uk-child-width-1-2';
break;
default:
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul id="mySlider" class="uk-slider-items uk-child-width-1-4">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
I am playing with coding and trying to make FIGCAPTION swipeable but when I add function to the following HTML, it doesn't work.
However, it seems to work when there is only a <div> with id="container" and the code inside it.
Is there a way to make the below script work with FIGCAPTION?
<div>
<h2 id="Books" class="heading"> Books</h2>
<div class="w-row">
<div class="column-3 w-col w-col-3 w-col-small-6 w-col-tiny-tiny-stack">
<figure class="imghvr-fall-away-vert">
<img src="images/hg.jpg" srcset="images/hg-p-500.jpg 500w, images/hg-p-800.jpg 800w, images/hg-p-1080.jpg 1080w, images/hg-p-1600.jpg 1600w, images/hg-p-2000.jpg 2000w, images/hg-p-2600.jpg 2600w, images/hg.jpg 2628w" sizes="100vw" >
<figcaption>
<div id="container">
<div class="buddy" style="display: block;">
<div class="avatar" style="display: block; background-image: url(images/Untitled-1.jpg)"></div>
</div>
<div class="buddy"><div class="avatar" style="display: block; background-image: url(images/Untitled-2.jpg)"></div></div>
<div class="buddy"><div class="avatar" style="display: block; background-image: url(images/Untitled-3.jpg)"></div></div>
<div class="buddy"><div class="avatar" style="display: block; background-image: url(images/Untitled-4.jpg)"></div></div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
Script:
$(document).ready(function(){
$(".buddy").on("swiperight",function(){
$(this).addClass('rotate-left').delay(700).fadeOut(1);
$('.buddy').find('.status').remove();
$(this).append('<div class="status like">Like!</div>');
if ( $(this).is(':last-child') ) {
$('.buddy:nth-child(1)').removeClass ('rotate-left rotate-right').fadeIn(300);
} else {
$(this).next().removeClass('rotate-left rotate-right').fadeIn(400);
}
});
$(".buddy").on("swipeleft",function(){
$(this).addClass('rotate-right').delay(700).fadeOut(1);
$('.buddy').find('.status').remove();
$(this).append('<div class="status dislike">Dislike!</div>');
if ( $(this).is(':last-child') ) {
$('.buddy:nth-child(1)').removeClass ('rotate-left rotate-right').fadeIn(300);
alert('OUPS');
} else {
$(this).next().removeClass('rotate-left rotate-right').fadeIn(400);
}
});
});
I'm trying to create a shop with about 100 products, each one with it's own id and description. The description box should show up whenever the user clicks the product. Because the content of this description box has to change depending on which product was clicked(eg, showing a different brand, id, price and photo), my best idea is to create 100 hidden containers (description boxes) and make them show up when the user clicks the product.
Is there a faster option? (Eg: Creating only 1 description box and change the content inside on click?)
$(document).ready(function() {
$(".view").click(function() {
$("#full-description-box").show();
});
});
.product,
#full-description-box {
background: orange;
margin: 0 auto;
width: 30%;
height: 50%;
text-align: center;
margin-top: 2%;
}
#full-description-box {
background: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<!-- PRODUCT 1 -->
<img src="#">
<div class="short-description">
<h4>HUBLOT</h4>
<h4>299 $</h4>
<h2>DIAMOND WHITE GOLD PLATED</h2>
</div>
<a class="view" id="product001" href="#">View full description</a>
</div>
<div class="product">
<!-- PRODUCT 2 -->
<img src="#">
<div class="short-description">
<h4>ROLEX</h4>
<h4>499 $</h4>
<h2>GOLD PLATED</h2>
</div>
<a class="view" id="product002" href="#">View full description</a>
</div>
<div id="full-description-box">
<!-- START DESCRIPTION BOX -->
<img src="#">
<h3 id="brand">Brand name:</h3>
<h4 id="full-name">Model: </h4>
<h5 id="item-id">ID: </h5>
<p>Full Description: </p>
<h4 id="price">Price:</h4>
</div>
<!-- END DESCRIPTION BOX -->
This is a solution without changing to much to your existing code.
Note:
I removed the id attributes as ids should be unique!
I added data-view-id="product002" to the detail container
$(document).ready(function() {
$(".view").click(function() {
// $(this).attr('id') is the id of the clicked .view element
$('[data-view-id="'+$(this).attr('id')+'"]').toggle();
});
});
.product,
.full-description-box {
background: orange;
margin: 0 auto;
width: 30%;
height: 50%;
text-align: center;
margin-top: 2%;
}
.full-description-box {
background: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<!-- PRODUCT 1 -->
<img src="#">
<div class="short-description">
<h4>HUBLOT</h4>
<h4>299 $</h4>
<h2>DIAMOND WHITE GOLD PLATED</h2>
</div>
<a class="view" id="product001" href="#">View full description</a>
</div>
<div class="product">
<!-- PRODUCT 2 -->
<img src="#">
<div class="short-description">
<h4>ROLEX</h4>
<h4>499 $</h4>
<h2>GOLD PLATED</h2>
</div>
<a class="view" id="product002" href="#">View full description</a>
</div>
<div class="full-description-box" data-view-id="product001">
<!-- START DESCRIPTION BOX -->
<img src="#">
<h3 class="brand">Brand name: product001</h3>
<h4 class="full-name">Model: </h4>
<h5 class="item-id">ID: </h5>
<p>Full Description: </p>
<h4 class="price">Price:</h4>
</div>
<div class="full-description-box" data-view-id="product002">
<!-- START DESCRIPTION BOX -->
<img src="#">
<h3 class="brand">Brand name: product002</h3>
<h4 class="full-name">Model: </h4>
<h5 class="item-id">ID: </h5>
<p>Full Description: </p>
<h4 class="price">Price:</h4>
</div>
On phone view The Navbar works just File in Bootply but it is not expanding in my site.
Here is the full page Code-
<html lang="en"><head>
<title>Your store</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="nopCommerce">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link href="/themes/ProcoDefault/Content/jquery.datetimepicker.css" rel="stylesheet" type="text/css">
<link href="/themes/ProcoDefault/Content/bootstrap-3.2.0/CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/Content/jquery-ui-themes/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css">
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/all.js#xfbml=1"></script><script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/Scripts/jquery-migrate-1.2.1.min.js"></script>
<script src="/Scripts/public.common.js"></script>
<script src="/Scripts/public.ajaxcart.js"></script>
<script src="/Scripts/jquery.datetimepicker.js"></script>
<link rel="shortcut icon" href="http://localhost:38451/favicon.ico">
<!--Powered by nopCommerce - http://www.nopCommerce.com-->
<!--Copyright (c) 2008-2013-->
<style type="text/css">.fb_hidden{position:absolute;top:-10000px;z-index:10001}.fb_invisible{display:none}.fb_reset{background:none;border:0;border-spacing:0;color:#000;cursor:auto;direction:ltr;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}.fb_reset>div{overflow:hidden}.fb_link img{border:none}
.fb_dialog{background:rgba(82, 82, 82, .7);position:absolute;top:-10000px;z-index:10001}.fb_reset .fb_dialog_legacy{overflow:visible}.fb_dialog_advanced{padding:10px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.fb_dialog_content{background:#fff;color:#333}.fb_dialog_close_icon{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 0 transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif);cursor:pointer;display:block;height:15px;position:absolute;right:18px;top:17px;width:15px}.fb_dialog_mobile .fb_dialog_close_icon{top:5px;left:5px;right:auto}.fb_dialog_padding{background-color:transparent;position:absolute;width:1px;z-index:-1}.fb_dialog_close_icon:hover{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -15px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}.fb_dialog_close_icon:active{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -30px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}.fb_dialog_loader{background-color:#f2f2f2;border:1px solid #606060;font-size:24px;padding:20px}.fb_dialog_top_left,.fb_dialog_top_right,.fb_dialog_bottom_left,.fb_dialog_bottom_right{height:10px;width:10px;overflow:hidden;position:absolute}.fb_dialog_top_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 0;left:-10px;top:-10px}.fb_dialog_top_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -10px;right:-10px;top:-10px}.fb_dialog_bottom_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -20px;bottom:-10px;left:-10px}.fb_dialog_bottom_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -30px;right:-10px;bottom:-10px}.fb_dialog_vert_left,.fb_dialog_vert_right,.fb_dialog_horiz_top,.fb_dialog_horiz_bottom{position:absolute;background:#525252;filter:alpha(opacity=70);opacity:.7}.fb_dialog_vert_left,.fb_dialog_vert_right{width:10px;height:100%}.fb_dialog_vert_left{margin-left:-10px}.fb_dialog_vert_right{right:0;margin-right:-10px}.fb_dialog_horiz_top,.fb_dialog_horiz_bottom{width:100%;height:10px}.fb_dialog_horiz_top{margin-top:-10px}.fb_dialog_horiz_bottom{bottom:0;margin-bottom:-10px}.fb_dialog_iframe{line-height:0}.fb_dialog_content .dialog_title{background:#6d84b4;border:1px solid #3b5998;color:#fff;font-size:14px;font-weight:bold;margin:0}.fb_dialog_content .dialog_title>span{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yd/r/Cou7n-nqK52.gif) no-repeat 5px 50%;float:left;padding:5px 0 7px 26px}body.fb_hidden{-webkit-transform:none;height:100%;margin:0;overflow:visible;position:absolute;top:-10000px;left:0;width:100%}.fb_dialog.fb_dialog_mobile.loading{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ya/r/3rhSv5V8j3o.gif) white no-repeat 50% 50%;min-height:100%;min-width:100%;overflow:hidden;position:absolute;top:0;z-index:10001}.fb_dialog.fb_dialog_mobile.loading.centered{max-height:590px;min-height:590px;max-width:500px;min-width:500px}#fb-root #fb_dialog_ipad_overlay{background:rgba(0, 0, 0, .45);position:absolute;left:0;top:0;width:100%;min-height:100%;z-index:10000}#fb-root #fb_dialog_ipad_overlay.hidden{display:none}.fb_dialog.fb_dialog_mobile.loading iframe{visibility:hidden}.fb_dialog_content .dialog_header{-webkit-box-shadow:white 0 1px 1px -1px inset;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#738ABA), to(#2C4987));border-bottom:1px solid;border-color:#1d4088;color:#fff;font:14px Helvetica, sans-serif;font-weight:bold;text-overflow:ellipsis;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0;vertical-align:middle;white-space:nowrap}.fb_dialog_content .dialog_header table{-webkit-font-smoothing:subpixel-antialiased;height:43px;width:100%}.fb_dialog_content .dialog_header td.header_left{font-size:12px;padding-left:5px;vertical-align:middle;width:60px}.fb_dialog_content .dialog_header td.header_right{font-size:12px;padding-right:5px;vertical-align:middle;width:60px}.fb_dialog_content .touchable_button{background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4966A6), color-stop(.5, #355492), to(#2A4887));border:1px solid #29447e;-webkit-background-clip:padding-box;-webkit-border-radius:3px;-webkit-box-shadow:rgba(0, 0, 0, .117188) 0 1px 1px inset, rgba(255, 255, 255, .167969) 0 1px 0;display:inline-block;margin-top:3px;max-width:85px;line-height:18px;padding:4px 12px;position:relative}.fb_dialog_content .dialog_header .touchable_button input{border:none;background:none;color:#fff;font:12px Helvetica, sans-serif;font-weight:bold;margin:2px -12px;padding:2px 6px 3px 6px;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog_content .dialog_header .header_center{color:#fff;font-size:16px;font-weight:bold;line-height:18px;text-align:center;vertical-align:middle}.fb_dialog_content .dialog_content{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat 50% 50%;border:1px solid #555;border-bottom:0;border-top:0;height:150px}.fb_dialog_content .dialog_footer{background:#f2f2f2;border:1px solid #555;border-top-color:#ccc;height:40px}#fb_dialog_loader_close{float:left}.fb_dialog.fb_dialog_mobile .fb_dialog_close_button{text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog.fb_dialog_mobile .fb_dialog_close_icon{visibility:hidden}
.fb_iframe_widget{display:inline-block;position:relative}.fb_iframe_widget span{display:inline-block;position:relative;text-align:justify}.fb_iframe_widget iframe{position:absolute}.fb_iframe_widget_lift{z-index:1}.fb_hide_iframes iframe{position:relative;left:-10000px}.fb_iframe_widget_loader{position:relative;display:inline-block}.fb_iframe_widget_fluid{display:inline}.fb_iframe_widget_fluid span{width:100%}.fb_iframe_widget_loader iframe{min-height:32px;z-index:2;zoom:1}.fb_iframe_widget_loader .FB_Loader{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat;height:32px;width:32px;margin-left:-16px;position:absolute;left:50%;z-index:4}
.fbpluginrecommendationsbarleft,.fbpluginrecommendationsbarright{position:fixed !important;bottom:0;z-index:999}.fbpluginrecommendationsbarleft{left:10px}.fbpluginrecommendationsbarright{right:10px}</style></head>
<body>
<div id="dialog-notifications-success" title="Notification" style="display:none; width:600px;">
</div>
<div id="dialog-notifications-error" title="Error" style="display:none;">
</div>
<div id="bar-notification" class="bar-notification">
<img src="/Content/Images/ico-close-notification-bar.png" class="close" alt="Close" title="Close">
</div>
<div class="headerwrapper">
<div class="header ">
<div class="container top-header-container shadowwrapper">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="header-logo">
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<link href="/themes/ProcoDefault/Content/flyout/flyout.css" rel="stylesheet" type="text/css">
<script src="/themes/ProcoDefault/Content/flyout/flyout.js" type="text/javascript"></script>
<div class="social_container_login">
<div class="social_container">
<div><a target="_blank" href="http://www.facebook.com/pages/Brookhaven-Marketplace/33148540039"><img src="/Content/Images/uploaded/social/big_facebook_icon.png" alt="Facebook"></a></div>
<div><a target="_blank" href="https://twitter.com/#!/brookhavenmkt"><img src="/Content/Images/uploaded/social/Twitter.png" alt="Twitter"></a></div>
<div><a target="_blank" href="http://pinterest.com/brookhavenmkrt/"><img src="/Content/Images/uploaded/social/icon_pinterest.png" alt="Pinterest"></a></div>
</div>
<div class="login">
My Account
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<a class="see-u-picks" href="../../../specialcouponoffer"><img class="img-responsive" src="/content/images/uploaded/See-current-upick-offer-btn.png"></a>
</div>
<div id="login-box" class="login-popup">
<img src="/Content/Images/uploaded/close_pop.png" class="btn_close" title="Close Window" alt="Close">
<div class="header-links">
<h1>My Account</h1>
<ul>
<li>Shopping List</li>
<li>Preferences</li>
<li>Log out</li>
<li id="topcartlink">Shopping cart
(16)
</li>
<script type="text/javascript">
$('#topcartlink').live('mouseenter', function () {
$('#flyout-cart').addClass('active');
});
$('#topcartlink').live('mouseleave', function () {
$('#flyout-cart').removeClass('active');
});
$('#flyout-cart').live('mouseenter', function () {
$('#flyout-cart').addClass('active');
});
$('#flyout-cart').live('mouseleave', function () {
$('#flyout-cart').removeClass('active');
});
</script>
<li>Wishlist <a href="/wishlist" class="wishlist-qty">
(1)</a> </li>
</ul>
</div>
<div class="topdownclickme">
<div class="ico-myaccount">My Account</div></div>
<script>$('.topdownclickme').click(function() {
$('.header-links').slideToggle('slow', function() {
// Animation complete.
});
});
</script>
</div>
</div>
</div>
<div class="header-selectors-wrapper">
<div class="header-taxdisplaytypeselector">
</div>
<div class="header-currencyselector">
</div>
<div class="header-languageselector">
</div>
</div>
</div>
<div class="top-header-menu">
<link media="print" rel="stylesheet" type="text/css" href="/themes/ProcoDefault/Content/print.css">
<link rel="stylesheet" type="text/css" href="/themes/ProcoDefault/Content/nav/superfish.css" media="screen">
<script type="text/javascript" src="/Scripts/hoverIntent.js"></script>
<script type="text/javascript" src="/Scripts/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
<div class="container shadowwrapper ">
<div class="row">
<div class="col-lg-12 col-md-12 ">
<div class="headermenu">
<nav role="navigation" class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#top-header-menu-proco" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="top-header-menu-proco" class="navbar-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>
<a href="/books">Books
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Computers
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/desktops">Desktops
</a>
</li>
<li>
<a href="/notebooks">Notebooks
</a>
</li>
<li>
<a href="/accessories">Accessories
</a>
</li>
<li>
<a href="/software-games">Software & Games
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Electronics
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">Camera, photo
</a>
</li>
<li>
<a href="/cell-phones">Cell phones
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel-shoes">Apparel & Shoes
</a>
</li>
<li>
<a href="/digital-downloads">Digital downloads
</a>
</li>
<li>
<a href="/jewelry">Jewelry
</a>
</li>
<li>
<a href="/gift-cards">Gift Cards
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container-fluid -->
</div>
</div>
</div>
</div>
</div>
<div class="background-wrapper">
<div class="#*master-wrapper-page*#">
<div class="#*master-wrapper-content*#">
<script type="text/javascript">
//<![CDATA[
//replace the first parameter with "true" to use popup notifications
AjaxCart.init(true, '.header-links .cart-qty', '.header-links .wishlist-qty', '#flyout-cart');
//]]>
</script>
<div class="ajax-loading-block-window" style="display: none">
<div class="loading-image">
</div>
</div>
<div class="white-background container shadowwrapper">
<div class="">
<div class="row">
<div class="col-md-3 ">
<div class="htmlcontent">
<div class="htmlcontent-body">
<div class="left-nav">
<ul>
<li><img src="/Content/Images/uploaded/HomePageLeft/glutenfree_promo.png" alt="" width="280" height="184"></li>
<li><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomePageLeft/winegeek.jpg" alt="" width="265" height="185"></li>
<!-- <li><img width="280" height="184" src="/Content/Images/uploaded/HomePageLeft/glutenfree_promo.png" /></li> -->
<li><img src="/Content/Images/uploaded/HomePageLeft/lifetime_fitness_button.jpg" alt="" width="232" height="185"></li>
<!--<li><img src="/Content/Images/uploaded/HomePageLeft/catering_promo.jpg" height="184" width="338" /></li>--></ul>
</div>
</div>
</div>
<div class="clear">test
</div>
</div>
<div class="col-md-9 ">
<div class="">
<link rel="stylesheet" href="/themes/ProcoDefault/Content/flexslider/flexslider.css" type="text/css">
<script src="/Scripts/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
slideshowSpeed: 5000
});
});
</script>
<div class="homepage_container">
<div id="fb-root" class=" fb_reset"><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div><iframe name="fb_xdm_frame_http" frameborder="0" allowtransparency="true" scrolling="no" id="fb_xdm_frame_http" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="http://static.ak.facebook.com/connect/xd_arbiter/KFZn1BJ0LYk.js?version=41#channel=f2cbd788b4&origin=http%3A%2F%2Flocalhost%3A38451" style="border: none;"></iframe><iframe name="fb_xdm_frame_https" frameborder="0" allowtransparency="true" scrolling="no" id="fb_xdm_frame_https" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="https://s-static.ak.facebook.com/connect/xd_arbiter/KFZn1BJ0LYk.js?version=41#channel=f2cbd788b4&origin=http%3A%2F%2Flocalhost%3A38451" style="border: none;"></iframe></div></div><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div></div></div></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="homepagebanners"> <div class="htmlcontent">
<div class="htmlcontent-body">
<div class="flexslider">
<ul class="slides">
<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item; opacity: 0.347983469537255;"><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomeBanners/Easter-Menu-banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/4-16-2014-1.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/4-16-2014-2.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="http://www.brookhavenmarket.com/Content/Images/uploaded/HomeBanners/2013_catering_banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomeBanners/gluten-free-banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item; opacity: 0.652016530462745;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/help_wanted.jpg" alt="" width="634" height="216"></li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li><li><a class="">4</a></li><li><a class="">5</a></li><li><a class="">6</a></li></ol><ul class="flex-direction-nav"><li><a class="flex-prev" href="#">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul></div>
</div>
</div>
</div>
<div class="homepagebottom"> <div class="htmlcontent">
<div class="htmlcontent-body">
<div class="homepageBlogContainer">
<p class="homepageBlogText"><span style="font-size: medium;"><strong><em>Easter Traditions with a Twist</em></strong></span></p>
<p>Easter is always a busy time at a food store ranking up there with the likes of Christmas and Thanksgiving as traditionally it’s a time when families gather together to share a meal. Not just any meal but what most would consider a feast. It’s a time when traditional foods that we have loved since childhood are planned, shopped for and prepared with great care and attention to detail. It’s a time when on most cases paper plates and plastic flatware are foregone in deference to Mom’s best china, crystal and silverware. Last week’s blog focused on our sweet tooth with suggested Easter Desserts. This week let’s concentrate on the main course....</p>
<p><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span lang="en-US">Okay, perhaps not. But we can still hope, can’t we?</span></span></span></p>
<p><span style="color: #800000;"><strong><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span lang="en-US"> ...</span></span></span><a style="font-size: small; font-family: Arial, sans-serif;" href="http://www.brookhavenmarket.com/blog"><span style="color: #800000;">read more</span></a></strong></span></p>
<div class="readmore"><img src="/Content/Images/uploaded/arrow.png" alt="" align="right"></div>
</div>
<div style="float: left;"><iframe style="width: 338px; height: 346px; overflow: hidden;" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBrookhaven-Marketplace%2F33148540039&width=340&colorscheme=light&show_faces=false&stream=true&header=true&height=346" width="320" height="240" frameborder="0" scrolling="no"></iframe></div>
</div>
</div>
</div>
<div class="clear">
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="container shadowwrapper">
<div class="row">
<div class="col-md-12">
<div class="footer ">
<div class="clear" style="height:1px"></div>
<img class="proco-logo" src="../themes/ProcoDefault/Content/images/proco_logo.png">
</div>
</div>
</div>
</div>
</div>
<div class="footer-disclaimer">
Copyright © 2014 Brookhaven Market. All rights reserved.
</div>
<div class="footer-storetheme">
</div>
</body></html>
I am using jquery-1.10.2.min.js. What could be the problem? There is showing no problem in console too. I already used navbar in many sites but never saw that kind of problem before. Please Help.
Bootstrap relies on jQuery but in your code you have presented the files for Bootstrap first. Change the order and it will work. Additionally you need to ensure your paths are correct as you seem to be missing the name of the theme.
As you mention in the comments, your code to include the scripts is:
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Themes/Content/bootstrap-3.2.0/js/bootstrap.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
Simply change the order of the last 2 lines like this:
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
Html.AppendScriptParts("~/Themes/ProcoDefault/Content/bootstrap-3.2.0/js/bootstrap.min.js");