I am looking for a way to use fullpage.js as slideshow with a fixed sidebar on the left containing an "INFO" button which on click slides in a div with the information referring to the Section/Image, visible in the viewport.
I am using the basic setUp for fullpage.js with the div container "fullpage" including the "section" divs. Each section has a bg-image and a div with the capture to the image.
The sidebar is fixed on the left side and outside the "fullpage" container with the following markup.
<!-- Fixed Navigation Left -->
<aside class="sidebar fixed" id="gallery-nav">
<a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a>
<div class="button-group toggle-menu">
<i class="fa fa-long-arrow-down"></i> <span>INFO</span>
<a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
<i class="fa fa-caret-left scrollDown"></i>
<!-- Gallery image count 4 -->
<span>1/15</span>
<i class="fa fa-caret-right scrollUp"></i>
<h3><span>GELÄNDESPORT</span></h3>
</div>
<a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>
</aside>
Can anybody help me with the jquery code to solve this problem?
You can find the basic layout in the Image below.
Try This
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.site-nav{
height: 100vh;
width: 135px;
background-color: pink;
position: fixed;
}
body, html, .sidebar, .body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.sidebar{
background-color: green;
width: 10%;
float: left;
height: 100%;
position: fixed;
}
.body{
background-color: white;
float:left;
width:90%;
height:100%;
}
#section-one {
height: 100vh;
width: 100%;
background-color: pink;
}
#section-two {
height: 100vh;
width: 100%;
background-color: red;
}
#section-three {
height: 100vh;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="sidebar">
</div>
<div id="section-one">
</div>
<div id="section-two">
</div>
<div id="section-three">
</div>
</body>
</html>
Here is an screenshot of my site. I will put it on a server as soon as I can. And add the link to it.
Preview
Here is the HTML code of the site.
<!-- Fixed Navigation Left -->
<aside class="sidebar fixed" id="gallery-nav">
<a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a>
<div class="button-group toggle-menu">
<a class="gallery-nav-button-class"><i class="fa fa-long-arrow-down"></i> <span>INFO</span></a>
<a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
<a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-left scrollDown"></i></a>
<!-- gallery image count 4 PHP Issue -->
<span>1/15</span>
<a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-right scrollUp"></i></a>
<h3><span>GELÄNDESPORT</span></h3>
</div>
<a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>
</aside>
<div id="fullpage">
<!-- section 1 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<h2>1955—60</h2>
<p class="lead">die erste liebe<br>und Schule aller Renner</p>
<hr>
<a class="button scrollDown">WEITER</a>
</div>
<div class="small-12 medium-6 columns" id="glsp-1">
</div>
</div>
</div>
<!-- section 2 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<h2>Bruno Beuss</h2>
<hr>
<a class="button scrollDown">WEITER</a>
</div>
<div class="small-12 medium-6 columns wow fadeIn" id="glsp-2">
</div>
</div>
</div>
<!-- section 3 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<p class="lead">DIE ABSOLUTE BEHERRSCHUNG DER...</p>
<hr>
<a class="button scrollDown">GALERIE</a>
</div>
<div class="small-12 medium-6 columns wow fadeIn" id="glsp-3">
</div>
</div>
</div>
<!-- section 4 Gallery Start-->
<div class="section">
<div class="row gallery-content-box wow slideInLeft fadeIn">
<div class="wow fadeIn" id="glsp-4">
</div>
</div>
</div>
<!-- section 5 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s" id="glsp-5-1">
</div>
<div class="medium-6 columns wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s" id="glsp-5-2">
</div>
</div>
</div>
</div>
<!-- Gallerie Lightbox -->
<div class="medium-3 columns toggle-lighbox hide animated slideOutLeft" id="gallery-lightbox">
<div class="row gallery-lightbox-innerwrap">
<ul class="medium-11" id="gallery-lightbox-menu">
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
</ul>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/fullpage.js/vendors/jquery.slimscroll.min.js"></script>
<script src="bower_components/fullpage.js/jquery.fullPage.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="bower_components/wow/dist/wow.js"></script>
<script src="js/app.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage'],
menu: '#gallery-lightbox-menu',
resize: false,
animateAnchor:false,
scrollOverflow: true,
autoScrolling:true,
responsive: 900,
fitSection: false,
navigation:true,
navigationPosition: 'right',
navigationTooltips: ['firstSection', 'secondSection'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
continuousVertical:true,
scrollBar: true,
css3: true,
afterLoad: function (anchorLink, index) {
// #toggle-menu for section 4...
if (index == 4) {
$(".toggle-menu").css('visibility','visible')
}
},
onLeave: function (index, nextIndex, direction) {
//going from section 3 to 4
if (index == 3 && direction == 'down') {
//whatever
}
//going form section 4 to 3
else if (index == 4 && direction == 'up') {
$(".toggle-menu").css('visibility','hidden')
}
}
});
// toggle-lighbox-opener
$('.gallery-open').click(function() {
if($('.toggle-lighbox').hasClass('slideOutLeft'))
{
$('.toggle-lighbox').addClass('slideInLeft').removeClass('hide slideOutLeft');
}
else
{
$('.toggle-lighbox').addClass('slideOutLeft').removeClass('slideInLeft');
}
});
// slimscroll.js
$(function(){
$('.gallery-lightbox-innerwrap').slimScroll({
height: '100vh',
size: '7px',
position: 'right',
color: '#87704c',
alwaysVisible: true,
// distance: '-10px',
// start: $('#child_image_element'),
railVisible: true,
railColor: '#87704c',
railOpacity: 0.3,
wheelStep: 10,
allowPageScroll: true,
disableFadeOut: true,
});
});
$(document).on('click', '.scrollDown', function(){
$.fn.fullpage.moveSectionDown();
});
$(document).on('click', '.scrollUp', function(){
$.fn.fullpage.moveSectionUp();
});
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 100, // default
mobile: true, // default
live: true // default
}
)
wow.init();
});
</script>
Related
I have been trying to sort out this issue for a few days and have been unable to determine the issue. Whenever I press the link on the Navbar dropdown it scrolls up to the top of the page. Additionally, the navbar toggler is not showing on a phone.
I have this navbar working on other pages where the javascript is not being used and it works; but any page that has js, the navbar dropdown does not work.
Here is the full code, any help would be appreciated.
window.sr = ScrollReveal();
sr.reveal('.showcase-left', {
duration: 4000,
origin: 'left',
distance: '300px'
});
window.sr = ScrollReveal();
sr.reveal('.showcase-right', {
duration: 4000,
origin: 'right',
distance: '300px'
});
window.sr = ScrollReveal();
sr.reveal('.info-left', {
duration: 2000,
origin: 'bottom',
distance: '300px'
});
window.sr = ScrollReveal();
sr.reveal('.info-right', {
duration: 2000,
origin: 'right',
distance: '300px'
});
$(function() {
// Smooth Scrolling
$('a[href="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
.fade-in-image {
animation: fadeIn 5s;
-webkit-animation: fadeIn 5s;
-moz-animation: fadeIn 5s;
-o-animation: fadeIn 5s;
-ms-animation: fadeIn 5s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#showcase img {
width: 90%;
}
#showcase {
margin-left: 40px;
}
#testimonial {
background: #f1f1f1;
padding: 50px 0 30px 0;
text-align: 40px;
margin: 60px;
}
#info1 .info-left {
margin-top: 90px;
margin-bottom: 90px;
}
#info1 .info-right {
margin-top: 150px;
margin-bottom: 90px;
}
#contact {
background: url(./project/static/pics/gallery/90LayoutPhoto.jpg);
padding: 40px;
color: #fff;
border-top: #333 7px solid;
border-top: #333 7px solid;
}
<!-- Font Awesome -->
<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal,min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap 4 Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" />
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-danger">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="/static/pics/OldLogo.jpg" alt="Logo" style="width:80px; border-radius:16px;">
</a>
<div class="d-flex ms-auto order-2">
<h2>604-726-9705</h2>
</div>
</div>
</nav>
<div>
<br>
<br>
<br>
<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
<ol class="carousel-indicators carousel-fade">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="overlay-image" style="background-image:url(./static/pics/unsplash/gapext0.jpg);"></div>
<div class="container">
<strong id="hero-title"> Welcome to GRADE A PAINTERS</strong>
<br>
<strong id="hero-textp"> Grade A Painters is a highly rated painting company serving the Lower Mainland Vancouver since 2008. We are known for our quality work and
competitive pricing.</strong>
<p></p>
Book Your Project Today
</div>
</div>
<div class="carousel-item">
<div class="overlay-image" style="background-image:url(./static/pics/unsplash/gapext.jpg);"></div>
<div class="container">
<strong id="hero-title">We’re here for YOU!</strong>
<br>
<strong id="hero-textp"> Grade A Painters is a full service one stop shop for interior and exterior home services, offering the highest quality
residential paint jobs in Vancouver and everything else your house needs to stay happy and healthy- from pressure washing
to painting your home, we’re here for you.</strong>
<p></p>
<div>
Call Us Now
</div>
</div>
</div>
<div class="carousel-item">
<div class="overlay-image" style="background-image:url(./static/pics/unsplash/gpaext3.jpg);"></div>
<div class="container">
<strong id="hero-title">Free, In-Home PAINT COLOR CONSULT</strong>
<br>
<strong id="hero-textp">Choosing paint colors for your house is not easy! If you use us as your house painter, we'll provide you with a free in-home
professional color consultation.</strong>
<p></p>
FREE Consultation
</div>
</div>
</div>
<a href="#myCarousel" class="carousel-control-prev" role="button" data-bs-slide="prev">
<span class="visually-hidden">Previous</span>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a href="#myCarousel" class="carousel-control-next" role="button" data-bs-slide="next">
<span class="visually-hidden">Next</span>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item-active dropdown">
<a class="nav-link dropdown-toggle" id="navdrop" data-toggle="dropdown" href="#">Painting</a>
<div class="dropdown-menu">
<a class="dropdown-item-active" href="exterior.html">Exterior Painting</a>
<a class="dropdown-item-active" href="interior.html">Interior Painting</a>
<a class="dropdown-item-active" href="index1.html">Interior Painting</a>
</div>
</li>
<li class="nav-item-active">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
<div class="d-flex ms-auto order-5">
<form class="form-inline" action="booknow.html">
<button class="btn btn-danger" type="submit">Book Now!</button>
</form>
</div>
</div>
</div>
</nav>
<section id="info1">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="info-left card-img-top">
<img src="/static/pics/intwbrushes.jpg" alt="Painter Pic" width=100% height=100%/>
</div>
</div>
<div class="col-md-8 col-sm-8">
<div class="info-right">
<h2>Call Us Today</h2>
<p class="text">At GRADE A PAINTERS, we offer fast, high-quality solutions for all of your interior or exterior residential painting projects. Monetarily and comparatively speaking, the best way to make a good first impression for a minimal price, is with a fresh coat
of paint. House painting is like the cover of a book: the first thing anybody visiting or passing by notices. With an image saying about a thousand words, nothing presents itself better than a perfectly detailed, professionally completed paint
job; and nobody does it better than Grade A Painters. As a dedicated team of local, experienced, precision painters, we’re committed to giving your home or business the best treatment possible; ensuring it always makes the very best first
impression.</p>
</div>
</div>
</div>
</div>
</section>
<div class="container-fluid fade-in-image">
<script src="https://googlereviews.cws.net/google-reviews.js"></script><br />
<script>
load_google_reviews("ChIJTblLDDt4hlQRarDEfpsSqvc");
</script>
</div>
<section id="showcase">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="showcase-left">
<img src="/static/pics/extwper.jpg" alt="Exterior w / Person">
<h2 class="text">Check out our Interior Project Page!</h2>
<div id="button">
Click Here
</div>
</div>
<br>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="showcase-right">
<img src="/static/pics/intwper.jpg" alt="interior w / Person">
<h2 class="card-text">Check out our Interior Project Page!</h2>
<div id="button">
Click Here
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<div class="container-fluid">
<div class="bg-danger text-white">
<h1 class="text-white">CALL US TODAY!</h1>
<h5 class="text-white"> Monday - Friday 8am - 9pm</h5>
<h5 class="text-white"> Saturday 9am - 9pm</h5>
<h5 class="text-white"> Sunday 10am - 6pm</h5>
</div>
</div>
<div class="container-fluid">
<footer class="bg-dark text-center text-white">
<!-- Grid container -->
<div class="container-fluid p-4 pb-0">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a class="btn text-white btn-floating m-1" style="background-color: #3b5998;" href="https://www.facebook.com/gradeapaintersbc" role="button"><i class="fa fa-facebook"></i
></a>
<!-- Yelp -->
<a class="btn text-white btn-floating m-1" style="background-color: #C41200;" href="https://www.yelp.ca/biz/grade-a-painters-coquitlam" role="button"><i class="fa fa-yelp"></i></a>
<!-- Linkedin -->
<a class="btn text-white btn-floating m-1" style="background-color: #0082ca;" href="https://www.linkedin.com/in/christopher-white-60353928/" role="button"><i class="fa fa-linkedin"></i></a>
<!-- Google -->
<a class="btn text-white btn-floating m-1" style="background-color: #dd4b39;" href="https://www.google.com/search?q=grade+a+painters&rlz=1C1GCEA_enCA845CA845&oq=gr" role="button"><i class="fa fa-google"></i></a>
<!-- BBB -->
<a class="btn text-white btn-floating m-1" style="background-color: #0082ca;" href="https://www.bbb.org/ca/bc/coquitlam/profile/commercial-painter/grade-a-painters-0037-1257346" role="button"><i class="fa fa-bbb">BBB</i></a>
</section>
<!-- Section: Social media -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Copyright:
<a class="text-white" href="https://gradeapainters.com/">GradeAPainters.com</a>
</div>
<!-- Copyright -->
</footer>
</div>
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 having issues with a WordPress template that has not allowed me to place the slider underneath the header ID.
I have looked everywhere but everything I do just does not work.
Header CSS
#header {
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 212px;
margin: 0px auto 0px auto;
z-index: 1;
position: relative;
}
Slider main CSS
#contback {
background: rgba(0, 0, 0, 0.4);
margin-bottom: 0px;
width: 100%;
z-index:0;
position: relative;
}
html is too long to post here so i'll just post the main parts.
!-- ### BODY #### -->
<body class="home page page-id-11 page-template-default logged-in admin-bar no-customize-support">
<!-- Header -->
<div id="header">
<div class="header-row fixed">
<div id="logo">
<img src="http://radiobreakout.com.au/wp-content/themes/beaton/images/logo.png" alt="logo" />
</div><!-- end #logo -->
<div id="evhead">
<div class="evhead-cont">
<a href="http://radiobreakout.com.au/?event=radio-breakout">
<div class="evhead-bg"></div>
<img src="http://radiobreakout.com.au/wp-content/themes/beaton/images/no-cover/evhead.png" alt="no-cover" />
<div class="evhead-date">01 Jan</div>
<div class="evhead-week">Friday</div>
<div class="evhead-loc"><span></span></div>
</a>
</div><!-- end .evhead-cont -->
</div><!-- end #evhead -->
</div><!-- end .header-row fixed -->
<div id="menu">
<div class="menu-row">
<div id="wizemenu" class="menu-main-container"><ul class="megamenu"><li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11 current_page_item active">Home</li>
</ul></div>
</div><!-- end .menu-row -->
</div><!-- end #menu -->
</div><!-- end #header -->
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#radio").flashradio({
themecolor: "#00cab6",
channelurls: "163.47.16.24:8000/stream",
scroll: "AUTO",
autoplay: "TRUE",
html5chrome: "TRUE",
debug: "TRUE",
startvolume: "100"
});
$(".radio-wz-open-hidden").click(function() {
$("#radio-wz #radio-wz-col").slideToggle({
direction: "up"
}, 100);
$(this).toggleClass("clientsClose");
});
$("#radio-wz-col").show();
function mouseHandler(e) {
if ($(this).hasClass("radio-wz-hidden-open")) {
$(this).removeClass("radio-wz-hidden-open");
} else {
$(".radio-wz-hidden-open").removeClass("radio-wz-hidden-open");
$(this).addClass("radio-wz-hidden-open");
}
}
function start() {
$(".radio-wz-open-hidden").bind("click", mouseHandler);
}
$(document).ready(start);
});
</script>
<div id="radio-wz">
<div id="radio-wz-hide">
<div class="radio-wz-open-hidden"></div>
</div><!-- end #radio-wz-hide -->
<div id="radio-wz-col">
<div id="radio-wz-source">
<div id="radio" style="height:54px; width:1190px;"></div>
</div><!-- end #radio-wz-source -->
</div><!-- end #radio-wz-col -->
</div><!-- end #radio-wz -->
<!-- ContBack -->
<div id="contback">
<div id="slider">
<div id="slider-full">
<ul>
<li data-transition="random" data-masterspeed="1500" data-delay="10000" data-thumb="http://radiobreakout.com.au/wp-content/uploads/2015/11/nonestophitz.jpg">
<img src="http://radiobreakout.com.au/wp-content/uploads/2015/11/nonestophitz.jpg" alt="NONSTOP HITS" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-bgfit="110" data-bgfitend="100">
<div class="sld-bg"></div>
<div class="tp-caption" data-x="20" data-speed="1100" data-start="1500" data-easing="Linear.easeNone" data-endspeed="500" data-endeasing="Power4.easeIn" style="z-index:3; max-width:350px; white-space: normal !important;">
<div class="sld-full">
<div class="sld-full-title">NONSTOP HITS</div>
<div class="sld-full-desc"></div>
<div class="sld-full-date">Wednesday, 18 November 2015</div>
</div>
</div><!-- end .tp-caption -->
</li><!-- end li.slide -->
<li data-transition="random" data-masterspeed="1500" data-delay="10000" data-thumb="http://radiobreakout.com.au/wp-content/uploads/2015/11/melbourne.jpg">
<img src="http://radiobreakout.com.au/wp-content/uploads/2015/11/melbourne.jpg" alt="Melbourne Slide" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-bgfit="110" data-bgfitend="100">
<div class="sld-bg"></div>
<div class="tp-caption" data-x="20" data-speed="1100" data-start="1500" data-easing="Linear.easeNone" data-endspeed="500" data-endeasing="Power4.easeIn" style="z-index:3; max-width:350px; white-space: normal !important;">
<div class="sld-full">
<div class="sld-full-title">Melbourne Slide</div>
<div class="sld-full-desc"></div>
<div class="sld-full-date">Wednesday, 18 November 2015</div>
</div>
</div><!-- end .tp-caption -->
</li><!-- end li.slide -->
<li data-transition="random" data-masterspeed="1500" data-delay="10000" data-thumb="http://radiobreakout.com.au/wp-content/uploads/2015/11/sydey-1300x580.jpeg">
<img src="http://radiobreakout.com.au/wp-content/uploads/2015/11/sydey-1300x580.jpeg" alt="Shows" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-bgfit="110" data-bgfitend="100">
<div class="sld-bg"></div>
<div class="tp-caption" data-x="20" data-speed="1100" data-start="1500" data-easing="Linear.easeNone" data-endspeed="500" data-endeasing="Power4.easeIn" style="z-index:3; max-width:350px; white-space: normal !important;">
<div class="sld-full">
<div class="sld-full-title">Shows</div>
<div class="sld-full-desc">shows</div>
<div class="sld-full-date">Wednesday, 18 November 2015</div>
</div>
</div><!-- end .tp-caption -->
</li><!-- end li.slide -->
</ul>
</div><!-- end #slider-full -->
</div><!-- end #slider -->
The opacity is changing your stacking order so in this case z-index is not usefull. Check this link for more info.
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
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");
when I run the below code, the page doesn't scroll, and doesn't show all of my page container. first I used Ajax but my menu didn't work. then I had to use Iframe tag. but it has a problem too. I try to discover the problem but I didn't succeed. can anybody help me to solve this?
<div id="maincontainer" style="position: fixed; width: 80%; height:500px; right: 10%; ">
<table style="background-color: rgb(100, 100, 100); border-radius: 5px;" dir="rtl">
<tr>
<td style="width: 90px; height: 30px;">صفحه اصلی</td>
<td style="width: 60px; height: 30px;">پروفایل</td>
</tr>
</table>
<div id="three" style="font-family: 'B Homa'; font-size: large;">
<ol>
<li data-slide-name="slide-one">
<h2>
<span>مدیریت مدیران</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/1.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-two">
<h2>
<span>مدیریت فرم ها</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/2.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-three">
<h2>
<span>مدیریت فرهنگی</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/3.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-four">
<h2>
<span>مدیریت آپلود سنتر</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/4.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-five">
<h2>
<span>مدیریت اخبار</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/5.jpg" alt="image" />
</div>
</li>
</ol>
<noscript>
<p>
Please enable JavaScript to get the full experience.
</p>
</noscript>
</div>
<div>
<ul class="menu">
<li><span class="l"></span><span class="r"></span><span class="t">مديريت کاربران</span>
<ul>
<li>کاربران فعال</li>
<li>کاربران بلاک</li>
<li>تمام کاربران</li>
<li>کاربران تایید نشده</li>
</ul>
</li>
<li><a href="#"><span class="l"></span><span class="r"></span>
<span class="t">مديريت آپلودسنتر</span></a>
<ul>
<li>نمایه جدید</li>
<li>لیست نمایه ها</li>
<li>دسته بندی جدید</li>
<li>لیست دسته ها</li>
<li>آیتم جدید</li>
<li>لیست آیتم ها</li>
</ul>
</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentcolumn"><%--<div id="newContent" style="float:left; width: 100%; height: 615px; direction: rtl; ">
</div>--%>
<iframe id="frame" runat="server" style="width: 1095px; height: 1600px;"></iframe>
</div>
</div>
<div id="stickybar" class="expstickybar">
</div>
<div style="text-align: center; padding-top: 3px">
<b>Copyright (c)</b>
</div>
<!-- LeftPanel Plugin -->
<div class="float">
<div class="moduletable">
<p>
برنامه امروز
</p>
</div>
</div>
<script language="javascript" type="text/javascript">
//$(document).ready(function () {
// $('#accordion').accordion();
//});
function ChangeSrc(trg) {
var frm = document.getElementById("frame");
if (frm) {
frm.src = trg;
}
}
</script>
<script type="text/javascript">
(function ($, d) {
$('#three').liteAccordion({ autoPlay: true, theme: 'dark', rounded: true, enumerateSlides: true, firstSlide: 1, easing: 'easeInOutQuart' });
})(jQuery, document);
</script>
</div>
Please, just remove the css property position: fixed; from maincontainer div.
As you can see at this sample that I made from you sample html code, I just remove that property.
You could also play around with the css property overflow:auto; that controls when to show the scroll, or show/hide the content beyond the limited area of a div.