Problem that I'm facing is that the slider images are not responsive... I don't have a clue what I'm doing wrong, I followed the instructions from the demos on the slick.js web page.
What I want to achieve: https://solarsystem.nasa.gov/planets/overview/ (scroll over to the footer, there is a 3 planet slider (9 images in total), image has a html a tag and there is text below the image).
Image of my issue:
https://i.stack.imgur.com/H1gWd.png
See what I want to happen when resizing the browser:
https://solarsystem.nasa.gov/planets/overview/
Maybe useful information: When I put img tag without it being in a div or a tag it works perfectly...
JS/Jquery:
$('.slider-inner').slick({
arrows: true,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 800,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
HTML:
<head>
<link rel="stylesheet" type="text/css" href="/slick-1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="/slick-1.8.1/slick/slick-
theme.css"/>
<link rel="stylesheet" href="style.css" />
</head>
<footer>
<h2>More Locations</h2>
<div class="slider-inner">
<div class="slider-item">
<a href="jupiter.html">
<img src="../img/slide1.png">
</a>
</div>
<div class="slider-item">
<a href="earth.html">
<img src="../img/slide2.png">
</a>
</div>
<div class="slider-item">
<a href="mercury.html">
<img src="../img/slide3.png">
</a>
</div>
<div class="slider-item">
<a href="mars.html">
<img src="../img/slide4.png">
</a>
</div>
<div class="slider-item">
<a href="venus.html">
<img src="../img/slide5.png">
</a>
</div>
<div class="slider-item">
<a href="saturn.html">
<img src="../img/slide6.png">
</a>
</div>
<div class="slider-item">
<a href="uranus.html">
<img src="../img/slide7.png">
</a>
</div>
<div class="slider-item">
<a href="neptune.html">
<img src="../img/slide8.png">
</a>
</div>
<div class="slider-item">
<a href="moon.html">
<img src="../img/slide9.png">
</a>
</div>
</div>
</footer>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/slick-1.8.1/slick/slick.min.js"></script>
CSS:
footer {
padding-top: 10%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
font-family: 'Gayathri', sans-serif;
}
footer h2 {
font-family: 'Source Sans Pro', sans-serif;
color: white;
text-align: center;
font-size: 40px;
}
Slick was a really nice slider, but it’s 2020, even the developer doesn’t do anything with it anymore for years. My advice is to stop using Slick and JQuery.
Related
In between my main body elements and my footer, there is a bunch of random white space in my website. I've figured out that by removing my cat image and videoplayer, the space goes away. But, of course, I don't want to have to do that, so I was wondering what's creating the white space. The only way I've been able to get rid of it is by REMOVING the video and image. Taking away certain css or all of the css doesn't work.
Sorry in advance for posting all of my code, but the problem is only visible when all of my code is there. Posting text or anything else as a replacement for my code doesn't show the problem. Thats why there's so much code there.
function length() {
var video = document.getElementById("sample");
len = video.duration;
document.getElementById("vidlen").innerHTML = len.toFixed(1);
}
.videoplayer {
position: relative;
right: -400px;
bottom: 290px;
width: 35%;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 2.5rem;
}
#pgselect {
position: absolute;
width: 133.859375px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
#catbanner {
position: relative;
left: 470px;
bottom: 260px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<script type="text/javascript" src="functions.js"></script>
<title>My Webpage</title>
</head>
<body style="background-color:#EBEDF3;">
<div class="videoplayer">
<div class="videoheader">
<div class="card card-body">
<div style="clear: both;" class="card-header">
<div style="font-family:'Faster One'; float:left;">Earth Spinning Video</div>
<div id="vidlen" style="font-family:'Faster One'; float:right;"></div>
</div>
<video id="sample" onloadedmetadata="length()" controls enablejavascript="true">
<source src="sample.mp4">
</video>
</div>
</div>
</div>
<div id="catbanner" class="card card-body">
<img src="catbanner.jpg" alt="Four Cats">
</div>
<footer id="footer">
<div id="pgselect" class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Page 1
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item disabled">1</a>
<a class="dropdown-item" href="page2.html">2</a>
<a class="dropdown-item" href="page3.html">3</a>
<a class="dropdown-item" href="page4.html">4</a>
</div>
</div>
<button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"></audio>
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true"></audio>
<script>
var death = document.getElementById("death");
death.volume = 0.2;
</script>
</body>
</html>
NOTE: The cat image and video aren't the actual image and video because they're not in a directory, but when they're full size the white space is more noticable.
Now that there is less code to debug, it is easier to see where the problem is :)
You are setting the bottom property for the elements, which is adding that space to the bottom of the container. If you remove this value from the divs, it fixes the problem.
Note: You could still have problems due to setting the right or left on Bootstrap cards. It would be better to just use the Bootstrap classes, without trying to "pull" some elements out of it's layout by specifying their positions.
Mixing custom positioning with Bootstrap like this is going to cause problems. Bootstrap is a complete framework that creates the layout for you - if you make changes to some elements, it is going to have an effect on the overall layout of the page.
Working Example:
(I replaced your video and image in the example below so you can see what is happening).
function length() {
var video = document.getElementById("sample");
len = video.duration;
document.getElementById("vidlen").innerHTML = len.toFixed(1);
}
.videoplayer {
position: relative;
right: -400px;
/* bottom: 290px;*/
width: 35%;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 2.5rem;
}
#pgselect {
position: absolute;
width: 133.859375px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
#catbanner {
position: relative;
left: 470px;
/* bottom: 260px;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<script type="text/javascript" src="functions.js"></script>
<title>My Webpage</title>
</head>
<body style="background-color:#EBEDF3;">
<div class="videoplayer">
<div class="videoheader">
<div class="card card-body">
<div style="clear: both;" class="card-header">
<div style="font-family:'Faster One'; float:left;">Earth Spinning Video</div>
<div id="vidlen" style="font-family:'Faster One'; float:right;"></div>
</div>
<img src="http://placekitten.com/g/200/200">
</div>
</div>
</div>
<div id="catbanner" class="card card-body">
<img src="http://placekitten.com/g/200/400" alt="Four Cats">
</div>
<footer id="footer">
<div id="pgselect" class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Page 1
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item disabled">1</a>
<a class="dropdown-item" href="page2.html">2</a>
<a class="dropdown-item" href="page3.html">3</a>
<a class="dropdown-item" href="page4.html">4</a>
</div>
</div>
<button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"></audio>
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true"></audio>
<script>
var death = document.getElementById("death");
death.volume = 0.2;
</script>
</body>
</html>
I am using Owl carousel in my html desing. It is working fine but not displaying next and previous button. Then I have added button in my page still it is not displaying. And I have also implemented in same way in my Laravel blade template in it's working fine with next previous button. I have added Owl carousel version 2.3.4.
Here is my code which I have done in my Html:
I have added pictures of it. in first picture it is working fine with laravel blade. And in second it is not displaying arrow button for next and previous.
I have searched it but I didn't got any proper solution. Does anyone knows what is wrong with it? Did I missed something? Thanks for the help in advance.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/boxicons.min.css">
<link rel="stylesheet" href="css/datepicker.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="features">
<img src="images/features -bg.jpg" alt="Fitzoh" class="features-bg">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-6 text-center text-lg-left">
<h6 class="text-light-green">Standout with Fitzoh</h6>
<div class="divider-sm"></div>
<h2>Take your fitness business to the next level</h2>
<p>With Fitzoh, adopting a better client experience has been made easier than ever.</p>
Know More
<div class="features-list mt48 text-left">
<a href="#one" class="feature mb24 active">
<p class="mb0">Add value to your brand through your own application</p>
</a>
<a href="#two" class="feature mb24">
<p class="mb0">Enhance client experience through virtual training</p>
</a>
<a href="#three" class="feature mb24">
<p class="mb0">Create your own excercise and diet plans</p>
</a>
<a href="#four" class="feature mb24">
<p class="mb0">Easy Scheduling & performance tracking</p>
</a>
</div>
</div>
<div class="col-12 col-lg-6 text-center text-lg-right">
<div class="owl-carousel">
<div class="item" data-hash="one">
<img class="block-image" src="images/feature1.png" alt="image">
</div>
<div class="item" data-hash="two">
<img class="block-image" src="images/feature2.png" alt="image">
</div>
<div class="item" data-hash="three">
<img class="block-image" src="images/feature3.png" alt="image">
</div>
<div class="item" data-hash="four">
<img class="block-image" src="images/feature1.png" alt="image">
</div>
</div>
</div>
<div class="owl-nav">
<!-- thess buttons I have added manually -->
<button type="button" role="presentation" class="owl-prev">
<span aria-label="Previous">‹</span>
</button>
<button type="button" role="presentation" class="owl-next">
<span aria-label="Next">›</span>
</button>
</div>
</div>
</div>
</section>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/datepicker.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/common.js"></script>
<script src="js/script.js"></script>
</body>
</html>
$(document).ready(function(e) {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
autoplay: true,
smartSpeed: 500,
nav: true,
dots: false,
navText: ['<span aria-label="Previous">‹</span>','<span aria-label="Next">›</span>'],
lazyLoad:true,
});
});
.owl-carousel .owl-nav button{width:25px; text-align:center; border:1px solid #ccc !important;}
<!doctype html>
<html lang="en">
<head>
<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/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>
<section class="features">
<!-- <img src="images/features -bg.jpg" alt="Fitzoh" class="features-bg"> -->
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-6 text-center text-lg-left">
<h6 class="text-light-green">Standout with Fitzoh</h6>
<div class="divider-sm"></div>
<h2>Take your fitness business to the next level</h2>
<p>With Fitzoh, adopting a better client experience has been made easier than ever.</p>
Know More
<div class="features-list mt48 text-left">
<a href="#one" class="feature mb24 active">
<p class="mb0">Add value to your brand through your own application</p>
</a>
<a href="#two" class="feature mb24">
<p class="mb0">Enhance client experience through virtual training</p>
</a>
<a href="#three" class="feature mb24">
<p class="mb0">Create your own excercise and diet plans</p>
</a>
<a href="#four" class="feature mb24">
<p class="mb0">Easy Scheduling & performance tracking</p>
</a>
</div>
</div>
<div class="col-12 col-lg-6 text-center text-lg-right">
<div class="owl-carousel">
<div class="item" data-hash="one">
<img class="block-image" src="https://png.pngtree.com/thumb_back/fw800/20151028/pngtree-Design-Light-Texture-Wallpaper-background-photo-674871.jpg" alt="image">
</div>
<div class="item" data-hash="two">
<img class="block-image" src="https://blog.sonicwall.com/wp-content/uploads/2018/05/SNWL-image-412.jpg" alt="image">
</div>
<div class="item" data-hash="three">
<img class="block-image" src="http://www.rishtiindia.com/wp-content/uploads/2016/01/Background-Image-of-Flyer-Brochure.jpg" alt="image">
</div>
<div class="item" data-hash="four">
<img class="block-image" src="https://ane4bf-datap1.s3-eu-west-1.amazonaws.com/wmocms/s3fs-public/news/featured_media/featured-image-index.png?4t5V5QpQ.h.L2MpEUHsgfJM_lASy4dbb" alt="image">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots:false,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
nav:true -> Enable arrow navigation,
dots:true -> Enable dot navigation
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true,
dots: true
},
600:{
items:3,
nav:true,
dots: true
},
1000:{
items:5,
nav:true,
dots: true
}
}
})
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>
I am using fade slick slider i want to display one image at a time but my slider is not working:
<head>
<link href="js/slick-theme.css" rel="stylesheet" type="text/css" />
<link href="js/slick.css" rel="stylesheet" type="text/css" />
<script src="js/slick.js" type="text/javascript"></script>
<script src="js/slick.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="fade">
<div>
<img src="images/ProductName/6.jpg" alt="" />
<img src="images/ProductName/6.jpg" alt="" />
</div>
</div>
</form>
</body>
Above code is working to display image but slider is not applying.I want image to be display one by one but it is not working
You need to add Jquery Library. "". Try this.
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
$(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 3
});
$(".variable").slick({
dots: true,
infinite: true,
variableWidth: true
});
});
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet"/>
</head>
<body>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
</section>
<section class="center slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
</section>
<section class="variable slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/200x300?text=2">
</div>
<div>
<img src="http://placehold.it/100x300?text=3">
</div>
<div>
<img src="http://placehold.it/200x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/300x300?text=6">
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
First you have to add jquery , then remove the div enclosing the two images , that's why it shows the images at same time , also add $.ready function to your script to ensure dom loading.
Here is a Fiddle
$( document ).ready(function(){
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div style="background-color:gray">
<form id="form1" runat="server">
<div class="fade" style="width:40%;margin:auto">
<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" />
<img src="http://www.jqueryscript.net/images/Cross-browser-Image-Carousel-Plugin-For-jQuery-carouselOnPC.jpg" alt="" />
</div>
</form>
</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");