I want the header will have a background when i scroll down but on the top the header will be transparent like this link I can fixed that header on top using bootstrap but i want it will be fixed when i scroll down.
this is my site layoutenter link description here
html code is`
Toggle navigation
CP
OUR PROGRAMMES
ABOUT
BLOG
LOGIN
APPLY
<!-- Cover Page Text Starts Here -->
<section class="first firstheading">
<Div class="psr">
<div class="container-fluid">
<h2 id="social">Gain International Experience</h2>
<p>We offer abroad internship programme for students and recent gradudates</p>
</div>
<ul>
<li>LONDON</li>
<li>DUBAI</li>
<li>INDIA</li>
<li>CHINA</li>
</ul>
</div>
</section>
<!-- End of Cover Page -->
<!-- Slider Starts Here -->
<section class="second-sc">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<div class="container-fluid second-menu">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="second-menu-active">LONDON</li>
<li data-target="#carousel-example-generic" data-slide-to="1">DUBAI</li>
<li data-target="#carousel-example-generic" data-slide-to="2">MUMBAI</li>
<li data-target="#carousel-example-generic" data-slide-to="3">BANGALORE</li>
<li data-target="#carousel-example-generic" data-slide-to="4">BEIGING</li>
</ol>
</div>
<div class="container-fluid dots">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="dots-active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme">FIND OUT MORE</div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme">FIND OUT MORE</div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme">FIND OUT MORE</div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme">FIND OUT MORE</div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme">FIND OUT MORE</div>
</div>
</div>
</div>
</div>
</div>
</section>`
Here is a function you can use this its simple and written in jquery
$(document).ready (function () {
$(window).scroll (function () {
var sT = $(this).scrollTop();
if (sT >= 300) {
$('.overlay').addClass('cambio')
}else {
$('.overlay').removeClass('cambio')
}
})
})
and try this link http://jsfiddle.net/rcAev/17/
Related
I'm trying to stop my carousel to auto slide for mobile devices only. I tried to change the data-interval thru js but it's not working for some reason. Any idea how to do it?
Here is my html code for the carousel:
<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
<li data-target="#x-corp-carousel" data-slide-to="1"></li>
<li data-target="#x-corp-carousel" data-slide-to="2"></li>
<li data-target="#x-corp-carousel" data-slide-to="3"></li>
<li data-target="#x-corp-carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner index-only" role="listbox">
<div class="item active"> <img src="img/hero-slide-2.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-3.jpg" alt="...">
<!--<div class="carousel-caption">
<h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-nighfall.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-1-thrive.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-4d.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
</div>
<!-- Controls -->
</div>
<!-- #x-corp-carousel-->
Try first to remove data-ride="carousel" from html, and then use some custom width that you are happy to disable slider for, something like this: (custom BP var is breakpoint)
// set breakpoint width
var BP = 900;
// start carousel
$('.carousel').carousel({ interval: (window.innerWidth<BP)?false:5000 });
// if user rotates phone orientation | window resite
$(window).on('resize', function(ev){
if( window.innerWidth < BP ){
$('.carousel').carousel({ interval: false });
} else {
$('.carousel').carousel({ interval: 5000 });
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
<li data-target="#x-corp-carousel" data-slide-to="1"></li>
<li data-target="#x-corp-carousel" data-slide-to="2"></li>
<li data-target="#x-corp-carousel" data-slide-to="3"></li>
<li data-target="#x-corp-carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner index-only" role="listbox">
<div class="item active"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!--<div class="carousel-caption">
<h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
</div>
<!-- Controls -->
</div>
<!-- #x-corp-carousel-->
I'm trying to display a canvas, specifically a Granim.js canvas, between a Div background image and the other contents of the Div.
So, there would be a background image, then the Granim.js canvas with the opacity turned down on top of that and then text, gallery, button etc. on top of that.
Here is the code for the Div I'm working with:
<section class="bg-image" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="container" id="carousel">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Portfolio</h2>
<hr class="light">
<p>Take a look at my portfolio on Béhance!<br>It contains my freelance projects as well as some of the work I did for X and Y.</p>
<!-- Carousel Card -->
<div class="card card-raised card-carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/gallery/bg2.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>UI/UX Design for Web & Mobile</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg3.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Online Advertising</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg4.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Corporate Identity & Branding</h4>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
</a>
</div>
</div>
</div>
<!-- End Carousel Card -->
<hr class="invis">
Visit Portfolio
</div>
</div>
</div>
</div>
</div>
</section>
CSS for div with bg image:
.bg-image {
color: #fff;
background-image: url(../img/portfolio_bg2.jpg);
background-position: center;
}
and here is the code to add the canvas:
<canvas id="granim-canvas"></canvas>
The canvas does work in isolation elsewhere on the page so there's no problem there. It's just layering things the way I want to that's the issue.
Here's the code for the Granim.js canvas just in case it helps:
## How to use
```html
<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>
<!-- Call the script -->
<script src="granim.min.js"></script>
<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
element: '#granim-canvas',
name: 'granim',
opacity: [0.7, 0.7],
states : {
"default-state": {
gradients: [
['#834D9B', '#D04ED6'],
['#1CD8D2', '#93EDC7']
]
}
}
});
</script>
I am trying to make a carousel on my website, so that it will automatically change four pictures around. Here is my code, however I am stuck in trying to figure out why it wont change any of the pictures:
<div class="carousel">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function () {
$('#homeCarousel').carousel({
interval:3000,
pause: "false"
});
});
</script>
<!-- Carousel start -->
<div id="homeCarousel" class="carousel slide">
<!-- Menu -->
<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>
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<img src="images/l1.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<img src="images/l2.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Item 3 -->
<div class="item">
<img src="images/l3.jpg">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
<!-- Carousel end -->
</div>
I have tried doing changing the interval times, reformatting everything, checking out different post however I just cannot seem to figure it out.
Any idea what could be the problem?
Just to clarify, the bootstrap carousel is heavily dependent on bootstrap CSS. You don't have it in your post, so make sure you have that reference in your page.
After that, your issue is in your <li data-target="#myCarousel"... lines. Those need to reference your carousel div, so they should have data-target="#homeCarousel"
Once I fixed that your code worked for me.
I have index.html with anchors which i want to navigate to different items in houses.html. houses.html has full page carousel slider with 5 items ill paste only 2 of them.So to be clear inside index.html i have anchors which navigate to houses.html like this :
<li><a id="houses-slide-1" >Stark</a></li>
<li><a id="houses-slide-2" >Lannister</a></li>
and jquery for the anchors :
$('#houses-slide-1').click(function(){
/*do something here maybe?*/
window.location.href = 'sl/houses.html';
});
$('#houses-slide-2').click(function(){
/*do something here maybe?*/
window.location.href = 'sl/houses.html';
});
houses.html HTML :
<header 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner" id="slide-one-1">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/ned.jpg');">
<div class="row">
<div class="col-md-5 col-md-offset-2 col-sm-5 col-sm-offset-2 slide-paneli">
<div class="col-md-12 slide-paneli">
<a class="remove-session" href="../index.html"> <img class="back-img" src="img/back.png" alt="back button"></a>
</div>
<h1>...</h1>
<p>...</p>
</div>
</div>
</div>
<div class="carousel-caption">
<h2>Starks</h2>
</div>
</div>
<div class="item" id="slide-two-2">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/cersei.jpg');">
<div class="row">
<div class="col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 slide-paneli">
<div class="col-md-12 slide-paneli">
<a class="remove-session" href="../index.html"> <img class="back-img" src="img/back.png" alt="back button"></a>
</div>
<h1>...</h1>
<p>...</p>
<div class="row">
</div>
</div>
</div>
</div>
<div class="carousel-caption">
<h2>Lannister</h2>
</div>
</div>
Change your jQuery to “load” the new page at the ID you want:
$('#houses-slide-1').click(function() {
window.location.href = 'sl/houses.html#slide-one-1';
});
$('#houses-slide-2').click(function() {
window.location.href = 'sl/houses.html#slide-two-2';
});
Of course this is a terrible solution. You will have to update every click handler every time you change the ID of the slides.
I make a code for sticking navbar at top position when i scroll down. But the problem is now when i scroll down the set fixed at top as i code. But the images which is following that navbar that hides navbar.
BEFORE SCROLLING
AFTER Scrolling
Lets see my code
<div class="container">
<h1>Mohamed faisal</h1>
<p>Welcome to home page</p>
</div>
<div class="row" id="rows" >
<div class="col-md-2 home" align="center" >Home</div>
<div class="col-md-2 about" align="center">Department</div>
<div class="col-md-2 home" align="center">Applications</div>
<div class="col-md-2 about" align="center">Technologies</div>
<div class="col-md-2 home" align="center">About us</div>
<div class="col-md-2 about" align="center">Help</div>
</div>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="f1.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="f2.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="f3.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="f4.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
$("document").ready(function ($) {
var offsets = document.getElementById('rows').getBoundingClientRect();
var topoffsets = offsets.top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > topoffsets) {
$("#rows").css({ top: 0, position: 'fixed' });
} else {
$("#rows").css({ top: '', position: '' });
}
});
});
You should be able to fix this with a z-index on your navbar div. Add another class to your navigation div.
<div class="row navbar" id="rows" >
<div class="col-md-2 home" align="center" >Home</div>
<div class="col-md-2 about" align="center">Department</div>
<div class="col-md-2 home" align="center">Applications</div>
<div class="col-md-2 about" align="center">Technologies</div>
<div class="col-md-2 home" align="center">About us</div>
<div class="col-md-2 about" align="center">Help</div>
</div>
Then add the class to your css with a z-index of 99999.
.navbar {
z-index: 99999;
}
You need to use z-index to up the navbar layer.
.navbarclass {
z-index: 9999;
}
Assuming that div#rows is your header here. You can apply z-index. I don't recommend the idea of 99999999 when dealing with large amount of z-index'd elements on the page. you may need to increase according to the slider's index; inspect the slider's z-index property
#rows {
z-index: 1004;
}
Try using z-index css property with high value on your navbar div.
Code
.navbar {
z-index: 99999 !important;
}