I have this jquery page where I have used Swiper library to show my contents by sliding vertically. I want to go to a specific slide by clicking any link from side panel.When I slide up or down there is no scrolling of page, but when I click to go to specific link from panel,the page scrolls down and I can't slide up from that slide.
Is there any way out of showing only the desired slide without scrolling the page and keeping header and panel fixed?
Here is my code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet"/>
<!--jquery mobile links -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<div data-role="panel" id="mypanel" data-position="left" data-display="overlay" data-theme="a">
<ul data-role="listview">
<li>Slide 1</li>
<li>Slide 2</li>
<li><a href = '#link3'>Slide 3</a></li>
</ul>
</div>
<div data-role="header" data-theme="b" data-position="fixed" data-id="header">
<h1>Home</h1>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="link1">Slide 1</div>
<div class="swiper-slide" id="link2">Slide 2</div>
<div class="swiper-slide" id = 'link3'>Slide 3</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container',{
direction : 'vertical',
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
window.location.hash = target;
});
});
</script>
</body>
</html>
Your fixed header is probably not be working because your content isn't wrapped inside a JQuery mobile page element. Can you try wrapping your panel, header and swiper divs in a JQuery mobile page e.g. -
<body>
<div data-role="page">
<div data-role="panel" id="mypanel" data-position="left" data-display="overlay" data-theme="a">
<!--panel content-->
</div>
<div data-role="header" data-position="fixed">
<h1>Fixed header</h1>
</div>
<div role="main">
<!-- Put your swiper here -->
</div>
<div data-role="footer" data-position="fixed">
<h1>Fixed footer</h1>
</div>
</div>
</body>
You can check out the JQM documentation on fixed headers here: JQM Fixed header
and fixed panels here: JQM fixed panels
Related
I am trying to autosize text (labelled: CONTENT) to fit in image containers (Dialogue4.png) using a JS script called textFit. The problem is I cannot get the JS script to run and am getting no change in text size.
My html is as follows:
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<meta charset="UTF-8">
<script src="textFit.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quantico&display=swap" rel="stylesheet">
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="banner">
<video autoplay="" muted="false" loop="">
<source src="Media/BackgroundClip.mp4" type="video/mp4">
</video>
<div id="scrollarea" class="content">
<div class="content-wrapper">
<div class="textbox"> <img src="Media/Dialogue4.png"> </div>
<div class="text-wrapper">
<div id="container" style="width:100%;height:auto">
<p>
CONTENT CONTENT CONTENT
</p>
</div>
</div>
</div>
</div>
</div>
<script>
function doFit(){
textFit(document.getElementById('container'), {maxFontSize: 200});
}
</script>
</body>
</html>
Any advice would be seriously appreciated as I am at the bottom of a deep-dive trying to figure it out.
Thanks for your time and have a happy new year.
Betty.
Here is a demo:
(I simplified your HTML and made sure the element that contains the text has a defined width&height)
textFit(document.querySelector('.text-wrapper'), {
maxFontSize: 200,
alignHoriz: true,
alignVert: true
});
body {
font-family: sans-serif;
}
.content-wrapper {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid blue;
width: 60%;
height: 250px;
display: block;
}
.text-wrapper {
display: block;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/textfit/2.4.0/textFit.min.js"></script>
<div class="banner">
<div id="scrollarea" class="content">
<div class="content-wrapper" style="background-image: url('https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2019/05/joseph-barrientos-49318-unsplash-e1558728034701.jpg')">
<div class="text-wrapper">
CONTENT CONTENT CONTENT
</div>
</div>
</div>
</div>
I was trying to make a 2 rows of slides on bootstrap using swiper js using the demo given at the official page. However When I copied the code and ran on my browser it displayed like this
The code is exactly the same as the demo page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../package/css/swiper.min.css">
<style>
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: calc((100% - 30px) / 2);
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="../package/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
slidesPerColumn: 2,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
</body>
</html>
I tried changing the slides per view and slides per column but those were almost the same.
I had the same problem. It seems that the setting slidesPerColumn does not work. Then I was checking which CSS comes from the swiper css with those Swiper Slide settings:
.swiper-container-multirow-column > .swiper-wrapper {
flex-direction: column;
}
It turned out that when i overwrite the CSS, it works:
.swiper-container-multirow-column > .swiper-wrapper {
flex-direction: inherit;
}
Or instead, add the following setting:
slidesPerColumnFill: 'row'
I hope that helps (even if it is a late answer on this topic).
If your using CDNs ->
<link rel="stylesheet"href="https://unpkg.com/swiper/swiper-bundle.min.css" >
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
replace it with ->
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
That will do the trick..Apparently many options are not working with the previous CDN
Change container height
.swiper-container { height: 800px; }
I am working on a project and as my knowledge in javascript are very limited, I decided to use owlcarousel. everything was working fine but now I am facing a problem.
I have set the dots to true but they do not appear. My work so far is the following:
.container {
width: 90%;
margin: 0 auto;
}
/*Text over image*/
.item {
width: 100%;
}
.item img {
display: block;
max-width:100%;
}
/*Carousel Nav Buttons*/
.carousel-nav-left{
height: 30px;
font-size: 30px;
position: absolute;
top: 0%;
bottom: 0%;
margin: auto 0;
margin-left: -40px;
}
.carousel-nav-right{
height: 30px;
font-size: 30px;
position: absolute;
top: 0%;
bottom: 0%;
right: 0%;
margin: auto 0;
margin-right: -40px;
}
#media (max-width: 700px) {
.carousel-nav-left{
margin-left: -30px;
}
.carousel-nav-right{
margin-right: -30px;
}
.container {
width: 85%;
}
}
#media (max-width: 410px) {
.carousel-nav-left{
margin-left: -25px;
}
.carousel-nav-right{
margin-right: -25px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>owlcarousel</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="carousel">
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
(function($){
$('.carousel').owlCarousel({
items: 4,
loop:true,
margin:10,
nav:true,
navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
dots: true,
paginationSpeed: 300,
rewindSpeed: 400,
responsive:{
0:{
items:1
},
490:{
items:2
},
770:{
items:3
},
1200:{
items:4
},
1500:{
items:5
}
}
})
})(jQuery);
</script>
</body>
</html>
Please let me know how I can fix this issue
I also faced the same problem while using Owl slider for the first time on my webpage. I could not see the dots navigation and I thought to myself this may be a bug and decided to do some investigation.
I figured later that there are 2 css files required to be included. One is the own-carousel.min.css and the other is owl.theme.default.min.css. After this the container div should have the owl-carousel and owl-theme class in their class list. For e.g:
<div id="slider" class="owl-carousel owl-theme">
<img src="/dist/assets/img1.jpg" />
<img src="/dist/assets/img2.jpg" />
<img src="/dist/assets/img3.jpg" />
<img src="/dist/assets/img4.jpg" />
</div>
Hope this helps for people who are facing this issue later.
Classes owl-carousel and owl-theme on main container are necessary for the dots to appear.
Ensure that you have included all of the necessary resources:
jquery-2.1.1.min.js
owl.carousel.min.js
owl.carousel.min.css
Also, make sure your CSS includes the appropriate owl-page and owl-controls
Here is one example of vital CSS code:
.owl-theme .owl-controls .owl-page {
display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
background: none repeat scroll 0 0 #869791;
border-radius: 20px;
display: block;
height: 12px;
margin: 5px 7px;
opacity: 0.5;
width: 12px;
}
As seen in This JSFiddle.
Note that if you remove the dots: true from the JSFiddle code (and run it) the pagination "dots" still display. However, if you remove the above CSS, the dots do not display.
Additional Answer
As this is the accepted answer I will add another potential fix as provided by #Kevin Vincendeau and brought to attention by #Amr Ibrahim in the comments.
Check to make sure your HTML is including all of the necessary classes. Such as owl-carousel and owl-theme on the main container.
The point was the lack of the owl-theme class in your code!
Include CSS & JS resources
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
Set up your HTML
<div class="owl-carousel owl-theme">
<div> Content 1 </div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
</div>
Note: if you dose not include the owl-theme class in the parent Div then the Dots dose not appear to you. So it is necessary to make them visible to end
users.
Call the plugin
Now call the Owl initializer function and your carousel is ready.
$(function(){
$(".owl-carousel").owlCarousel();
});
Demo:
$(function(){
$(".owl-carousel").owlCarousel();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
<div> Content 1 </div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
</div>
Adding css worked for me!
.owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 5px 7px;
background: #D6D6D6;
display: block;
-webkit-backface-visibility: visible;
transition: opacity .2s ease;
border-radius: 30px;
}
.owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #869791;
}
According to Owl Carousel docs, you have to call the 2 CSS files below (inside head tag):
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
then near to footer tag, call JQuery and Owl Carousel JS scripts:
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
I was facing the same issue on my code, then i just empty all owl and jquery files, read the owl docs, following the installation process step by step. Now it works fine for me.
Please note that the Owl Carousel dots will only show up when you have enough items.
Forexample, if you show 3 items at the same time, the dots will only show up if there is 4 or more items in that carousel.
$(function(){
$(".owl-carousel").owlCarousel();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
<div> Content 1 </div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
</div>
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
autoplayTimeout: 2000,
autoplayHoverPause: true,
dots: false,
margin: 5,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 4
}
}
})
});
Try : dots: false,
So this site I'm working in has to have a background (Clients wants it, I hate it..) I have made the navbar transparent so the background image show behind it. Now id like to add in a carousel that is below the navbar and doesn't overlap in anyway. I still need the image background image behind the navbar this is what i have so far:
/*!
Main Page CSS || Created By Thomas Withers # Ice7Media
*/
/* Global Styles
============================================================ */
html {
background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
color: #000;
}
h1,
h2,
h3,
h4,
h5 {
font-family: 'Oswald', 'Open Sans', sans-serif;
color: #000;
}
p {
font-family: 'Open Sans', sans-serif;
color: #000;
}
/* Global Navbar Formatting
==============================================================*/
.navbar {
padding-bottom: 10px;
}
.navbar ul {
margin-top: 20px;
}
.navbar.transparent.navbar-default {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
/* Global Footer Formatting
==============================================================*/
/* Home Page Formatting
==============================================================*/
/*Full Width Slider Formatting */
/* Carousel base class */
.carousel {
padding-top: 100px;
height: 100%;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color:#bbb;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}
/* Menu's Page Formatting
==============================================================*/
/* E-Club Page Formatting
==============================================================*/
/* Events Page Formatting
==============================================================*/
/* Contact Page Formatting
==============================================================*/
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta charset
===================================================================================-->
<meta charset="utf-8">
<!-- Title
===================================================================================-->
<title>Bocaditio | South Amercian Dishes</title>
<!-- Meta Tags
===================================================================================-->
<meta name="author" content="Thomas Withers # Ice7Media">
<meta name="description" content="Social Media Wizzards that handle all of your social media markerting.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- CSS Stylesheets
===================================================================================-->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/Custom.css" rel = "stylesheet">
<link href = "css/Mapstyle.css" rel = "stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="shortcut icon" href="img/iceBox.png">
<!-- Custom Fonts
===================================================================================-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation
===================================================================================-->
<div class = "navbar transparent navbar-default navbar-fixed-top">
<div class = "container">
<a href = "index" class = "navbar-brand">
<img src="img/BocaditoLogo.png">
</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>Menus</li>
<li>E-Clubs</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- Full screen Slider
===================================================================================-->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="/assets/example/bg_suburb.jpg" class="fill">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</div>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/1">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<!-- Abouts Us & Logo
===================================================================================-->
<!-- Top Dishes
===================================================================================-->
<!-- footer
===================================================================================-->
<!-- Scripts
===================================================================================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC22aNgIjcYzx5Oel1m0Jtcem-W4R895fQ"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/main.js"></script>
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>
As you can see my desired affect is not being achieved any help will be appreciated!
Just add a margin-top to your body equivalent to your navbar height like this:
body {
margin-top: 50px;
}
N.B. Replace 50px with height of your navbar.
Use the z index style on the division containing your nav bar and also on the division containing your carousel. This is how you'll put it:
This one goes to the div containing your navbar:
style="z-index:10;"
and this one goes to the div containing your carousel:
style="z-index:5;"
I have change logo image in a single navigation page. It means, for example, there are 2 tabs in the page like Home and Contact.
This is a single page navigation with vertical alignment tabs and above to that there will be logo. When I scroll to bottom it will move to the contact tab and background color of that page also changes. At this time I have change the image too.
Below is the CSS file
/* ----anchor---- */
a, a:link{
color:#6db0da;
text-decoration:none;
}
a:hover, a:active{
color:#6db0da;
text-decoration:underline;
}
.story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; box-shadow: 0 0 50px rgba(0,0,0,0.8);}
#home { background: #00617b; }
#contact { background: #46AA27; }
#container {
width: 945px;
margin: 0 auto;
display: block;
overflow: hidden;
z-index: 55;
height: 100%;
}
nav{
width: 250px;
height: 100%;
float: left;
display: block;
overflow: hidden;
text-align: center;
position: fixed;
z-index:500;
}
nav #nav-logo{
font-family: "BebasNeueRegular", Arial, Helvetica, sans-serif;
font-size:43px;
text-transform:uppercase;
text-align:center;
color:#FFF;
text-decoration:none;
display:block;
font-weight:normal;
text-shadow: #2B0D09 0px 1px 0px;
background:url(../images/Home.png) no-repeat center;
height: 250px;
width: 250px;
}
below is the html page
<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Single Page Navigation</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="top"></section>
<section id="home" class="story">
<div id="container">
<nav><div class="active" id="nav-logo"></div>
<ul id="nav">
<li class="active" id="nav-1">Home</li>
<li id="nav-2">Contact</li>
</ul>
<div class="bg_bottom"></div>
</nav>
<div id="content">
<div id="loader" class="loader"></div>
<div id="ps_container" class="ps_container"> <span class="ribbon"></span>
<div class="ps_image_wrapper">
<img src="images/1.jpg" alt=""/>
</div>
<div class="ps_next"></div>
<div class="ps_prev"></div>
<ul class="ps_nav">
<li class="selected">Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li class="ps_preview">
<div class="ps_preview_wrapper">
</div>
<span></span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="contact" class="story">
<div id="container">
<div id="content">
Test
</div>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.tweet.js" charset="utf-8"></script>
<script src="js/jquery.slideshow.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="js/form.js" type="text/javascript"></script>
</body>
</html>
I have to make that nav-logo CSS style to generic to change the image on moving from one table to another.
$("yourtablename").mouseenter(function ( ) {
$("#nav-logo").css({"background-image":"url(yourimageurl)"});
})
something like this