I am creating a menubar ,here when I hover on element color change to orange, and also when I hover on first and second element of the menu bar a drop down div will be open (menuForHeader).I want when I roll over on this div the color of the first element of the menu bar remain orange.
jquery used
<script>
$(document).ready(function(){
var lastScrollTop = 0
var currentScrollTop = 0
$(window).scroll(function (event) {
lastScrollTop = currentScrollTop
currentScrollTop = $(document).scrollTop()
if (currentScrollTop > lastScrollTop)
{
$('.menuWrap1').css("background-color","black");
}
else
{
if(currentScrollTop==0){
$('.menuWrap1').css("background","linear-gradient(black, transparent)");
$('.menuWrap1').css("background","-o-linear-gradient(black, transparent)");
$('.menuWrap1').css("background","-moz-linear-gradient(black, transparent)");}
}
});
$('#menu2 li:nth-child(2)').mouseover(function(){
$('.menuWrap1').css("height","163px");
});
$('.menuForHeader').mouseover(function(){
$('.menuWrap1').css("height","163px");
});
$('.menuForHeader').mouseout(function(){
$('.menuWrap1').css("height","60px");
});
$('menuForHeader').mouseover(function(){
$('#menu2 li:nth-child(2) a').css("color","orange");
});
$('#menu2 li:nth-child(2)').mouseout(function(){
$('.menuWrap1').css("height","60px");
});
// $('#menu2 li:nth-child(2)').addClass('onHovermenu');
});
</script>
<script type="text/javascript">
var showStaticMenuBar = false;
$(window).scroll(function () {
if (showStaticMenuBar == false) {
//if I scroll more than 200px, I show it
if ($(window).scrollTop() >= 160) {
//showing the static menu
$('.menu').addClass('show');
showStaticMenuBar = true;
}
}
else {
if ($(window).scrollTop() < 200) {
$('.menu').removeClass('show');
showStaticMenuBar = false;
}
}
});
</script>
Html code
<div class="menuWrap1">
<?php echo $this->element('Menus/menuHeader');?>
<div class="menuForHeader">
<?php echo $this->element('Menus/headerServices');?>
</div>
</div>
Css Used
.menuWrap1 {
position:fixed;
right:-21px;
/*margin-left:372px;*/
line-height: 35px;
font-family: 'Oxygen', sans-serif;
letter-spacing: 2px;
height: 60px;
margin-top: -135px;
background: -webkit-linear-gradient(black, transparent);
background: linear-gradient(black, transparent);
background:-o-linear-gradient(black, transparent);
background:-moz-linear-gradient(black, transparent);
transition: height 0.5s ease-in-out;
overflow:hidden;
}
#menu2{
float: right;
margin-right: 200px;
margin-top:-19px;
}
#menu2 li{
display:inline-block;
width:auto;
height:60px;
margin-top:-37px;
padding-right:20px;
}
#menu2 li.menu7{
padding:0;
}
#menu2 li a{
color:white;text-decoration: none;
}
#menu2 li a:active{
color:orange;
}
#menu2 li:nth-child(2) a:hover{
color:orange;
}
Wow this is a toughy. Let's have a try at it:
var innerHeader = $('.menuForHeader');
var menuWrap1 = $('.menuWrap1');
menuWrap1.mouseover(function() {
this.css('color', 'orange');
});
innerHeader.mouseover(function() {
this.css('color', 'orange');
});
innerHeader.mouseout(function() {
this.css('color', 'green');
});
menuWrap1.mouseout(function() {
if (innerHeader.style.color === 'green') {
this.css('color', 'green');
}
});
Using old fashioned DOM properties intermixed with jQuery. LIKE A BAWSS!
Related
Below is my code in that i have developed three functions to get desired image by scrolling and i am having "prev" and "next" divs to move images.It looks good for me but there must be something wrong which is not letting it works.
<!DOCTYPE html>
<html>
<head><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" >
var imageArr = document.getElementsByClassName('slide');
var offset = imageArr.length-1;
var currentImage, prevImage, nextImage;
function getCurrentImage() {
currentImage = imageArr[offset];
}
function getPrevImage() {
if(offset == 0)
offset = imageArr.length-1;
else
offset = offset-1;
prevImage = imageArr[offset];
}
function getNextImage() {
if(offset == imageArr.length-1)
offset = 0;
else
offset = offset+1;
nextImage = imageArr[offset];
}
$("document").ready(function(){
$(".prev").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getPrevImage();
});
$(currentImage).css({right:0px});
$(prevImage).css({left:0px});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'});
$(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
$(".next").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getNextImage();
});
$(currentImage).css({right:0});
$(nextImage).css({left:0px});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'});
$(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
});
</script>
<style>
.container {
width : 90%;
margin-left: 5%;
margin-right: 5%;
height : 400px;
border : 2px solid black;
position: relative;
}
img {
width:100%;
height:400px;
position: absolute;
}
.prev, .next {
position :relative;
cursor : pointer;
width : 4%;
height: 70px;
border : 1px solid black;
margin-top: -250px;
font-size: 40px;
color:#fff;
padding-left:10px;
background: #000;
opacity: .5;
}
.next {
float:right;
margin-right: 0px;
}
.prev{
float:left;
margin-left: 0px;
}
.prev:hover, .next:hover{
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<img src="slide1.jpg" class="slide" />
<img src="slide2.jpg" class="slide" />
<img src="slide3.jpg" class="slide" />
<img src="slide4.jpg" class="slide" />
</div>
<div class="prev" >❮</div>
<div class="next" >❯</div>
</body>
</html>
You have syntax errors
in $().css({right: 0px}); should by $().css({right: '0px'});
Getting html elements also must be after $("document").ready, because your html elements do not exist before.
It works for me:
$("document").ready(function(){
var imageArr = document.getElementsByClassName('slide');
var offset = imageArr.length-1;
var currentImage, prevImage, nextImage;
function getCurrentImage() {
currentImage = imageArr[offset];
}
function getPrevImage() {
if(offset == 0)
offset = imageArr.length-1;
else
offset = offset-1;
prevImage = imageArr[offset];
}
function getNextImage() {
if(offset == imageArr.length-1)
offset = 0;
else
offset = offset+1;
nextImage = imageArr[offset];
}
$(".prev").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getPrevImage();
});
$(currentImage).css({right: '0px'});
$(prevImage).css({left: '0px'});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'});
$(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
$(".next").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getNextImage();
});
$(currentImage).css({right: '0px'});
$(nextImage).css({left: '0px'});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'});
$(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
});
Hello I working on create one page website so what I need that for example if the section2 is appear in viewport add class active to link with href = "section2".
Example for what I need one page website
$(document).ready(function () {
$(".links a").click(function (e) {
if (this.getAttribute("href").charAt(0) == "#") {
e.preventDefault();
$(this).addClass("active").siblings().removeClass("active");
$("html, body").stop();
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 1400)
}
else {
$($(this)).attr("target", "_blank")
}
})
})
.links{
width:600px;
position:fixed;
top:0;
padding:20px;
}
.links a{
display:inline-block;
padding:10px 20px;
border:1px solid #02e62a;
color:#02e62a;
text-decoration:none;
}
.links a:hover, .links a.active{
color:#fe0101;
border-color:#fe0101;
}
.section{
width:400px;
height:200px;
margin:300px auto 600px;
background-color:#0094ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
Section 1
Section 2
External Link
Section 3
Section 4
</div>
<div id="home" class="section"></div>
<div id="about" class="section"></div>
<div id="services" class="section"></div>
<div id="contact" class="section"></div>
Note: please don't recommended me to use any plugin.
Try this, I think it provides you with the solution you want.
$(document).on("scroll", function() {
$('div[id^="section"]').each(function() {
var id = $(this).attr("id");
if (isScrolledIntoView("#" + id)) {
$('a[href="#'+id+'"]').addClass("active").siblings().removeClass("active");
}
})
})
Note it seems to bug a bit when you use it here with mouse scroll, so test it by pulling the scroll bar at the right. Dont know why, but im trying to solve it now.
Update the problem seems to be that snippet window is so small, if you run the example in full page, then it work just fine
$(document).ready(function() {
$(".links a").click(function(e) {
if (this.getAttribute("href").charAt(0) == "#") {
e.preventDefault();
$(this).addClass("active").siblings().removeClass("active");
$("html, body").stop();
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 1400)
} else {
$($(this)).attr("target", "_blank")
}
})
})
$(document).on("scroll", function() {
$('div.section').each(function() {
var id = $(this).attr("id");
if (isScrolledIntoView("#" + id)) {
$('a[href="#'+id+'"]').addClass("active").siblings().removeClass("active");
}
})
})
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
.links {
width: 600px;
position: fixed;
top: 0;
padding: 20px;
}
.links a {
display: inline-block;
padding: 10px 20px;
border: 1px solid #02e62a;
color: #02e62a;
text-decoration: none;
}
.links a:hover,
.links a.active {
color: #fe0101;
border-color: #fe0101;
}
.section {
width: 400px;
height: 200px;
margin: 300px auto 600px;
background-color: #0094ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
Home
About
External Link
Contact
Blog
</div>
<div id="Home" class="section"></div>
<div id="About" class="section"></div>
<div id="Contact" class="section"></div>
<div id="Blog" class="section"></div>
So I have finished building the .JS for my video player and somehow my positioning is making my div stretch (See here: http://prntscr.com/8tsl4m)
I want to remove that part but I am using six-columns class width from skeleton framework, so the div width dynamically changes. Therefore I cannot just define a height because it has to be auto.
Can I remove this with a line of JS or some CSS attribute that I am missing?
Keep in mind that I am just starting to figure out what JS is even used for, and and intermediate in CSS and HTML.
If you need my code then here it is:
$(document).ready(function(){
//INITIALIZE
var video = $('#myVideo');
//remove default control when JS loaded
video[0].removeAttribute("controls");
$('.control').show().css({'bottom':45});
$('.loading').fadeIn(500);
$('.caption').fadeIn(500);
//before everything get started
video.on('loadedmetadata', function() {
$('.caption').animate({'top':-380},300);
//set video properties
$('.current').text(timeFormat(0));
$('.duration').text(timeFormat(video[0].duration));
updateVolume(0, 0.7);
//start to get video buffering data
setTimeout(startBuffer, 150);
//bind video events
$('.videoContainer')
.append('<div id="init"></div>')
.hover(function() {
$('.control').stop().animate({'bottom':45}, 500);
$('.caption').stop().animate({'top':-360}, 500);
}, function() {
if(!volumeDrag && !timeDrag){
$('.control').stop().animate({'bottom':45}, 500);
$('.caption').stop().animate({'top':-380}, 500);
}
})
.on('click', function() {
$('#init').remove();
$('.btnPlay').addClass('paused');
$(this).unbind('click');
video[0].play();
});
$('#init').fadeIn(200);
});
//display video buffering bar
var startBuffer = function() {
var currentBuffer = video[0].buffered.end(0);
var maxduration = video[0].duration;
var perc = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width',perc+'%');
if(currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
//display current video play time
video.on('timeupdate', function() {
var currentPos = video[0].currentTime;
var maxduration = video[0].duration;
var perc = 100 * currentPos / maxduration;
$('.timeBar').css('width',perc+'%');
$('.current').text(timeFormat(currentPos));
});
//CONTROLS EVENTS
//video screen and play button clicked
video.on('click', function() { playpause(); } );
$('.btnPlay').on('click', function() { playpause(); } );
var playpause = function() {
if(video[0].paused || video[0].ended) {
$('.btnPlay').addClass('paused');
video[0].play();
}
else {
$('.btnPlay').removeClass('paused');
video[0].pause();
}
};
//speed text clicked
$('.btnx1').on('click', function() { fastfowrd(this, 1); });
$('.btnx3').on('click', function() { fastfowrd(this, 3); });
var fastfowrd = function(obj, spd) {
$('.text').removeClass('selected');
$(obj).addClass('selected');
video[0].playbackRate = spd;
video[0].play();
};
//stop button clicked
$('.btnStop').on('click', function() {
$('.btnPlay').removeClass('paused');
updatebar($('.progress').offset().left);
video[0].pause();
});
//fullscreen button clicked
$('.btnFS').on('click', function() {
if($.isFunction(video[0].webkitEnterFullscreen)) {
video[0].webkitEnterFullscreen();
}
else if ($.isFunction(video[0].mozRequestFullScreen)) {
video[0].mozRequestFullScreen();
}
else {
alert('Your browsers doesn\'t support fullscreen');
}
});
//light bulb button clicked
$('.btnLight').click(function() {
$(this).toggleClass('lighton');
//if lightoff, create an overlay
if(!$(this).hasClass('lighton')) {
$('body').append('<div class="overlay"></div>');
$('.overlay').css({
'position':'absolute',
'width':100+'%',
'height':$(document).height(),
'background':'#000',
'opacity':0.9,
'top':0,
'left':0,
'z-index':999
});
$('.videoContainer').css({
'z-index':1000
});
}
//if lighton, remove overlay
else {
$('.overlay').remove();
}
});
//sound button clicked
$('.sound').click(function() {
video[0].muted = !video[0].muted;
$(this).toggleClass('muted');
if(video[0].muted) {
$('.volumeBar').css('width',0);
}
else{
$('.volumeBar').css('width', video[0].volume*100+'%');
}
});
//VIDEO EVENTS
//video canplay event
video.on('canplay', function() {
$('.loading').fadeOut(100);
});
//video canplaythrough event
//solve Chrome cache issue
var completeloaded = false;
video.on('canplaythrough', function() {
completeloaded = true;
});
//video ended event
video.on('ended', function() {
$('.btnPlay').removeClass('paused');
video[0].pause();
});
//video seeking event
video.on('seeking', function() {
//if video fully loaded, ignore loading screen
if(!completeloaded) {
$('.loading').fadeIn(200);
}
});
//video seeked event
video.on('seeked', function() { });
//video waiting for more data event
video.on('waiting', function() {
$('.loading').fadeIn(200);
});
//VIDEO PROGRESS BAR
//when video timebar clicked
var timeDrag = false; /* check for drag event */
$('.progress').on('mousedown', function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).on('mouseup', function(e) {
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(timeDrag) {
updatebar(e.pageX);
}
});
var updatebar = function(x) {
var progress = $('.progress');
//calculate drag position
//and update video currenttime
//as well as progress bar
var maxduration = video[0].duration;
var position = x - progress.offset().left;
var percentage = 100 * position / progress.width();
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
$('.timeBar').css('width',percentage+'%');
video[0].currentTime = maxduration * percentage / 100;
};
//VOLUME BAR
//volume bar event
var volumeDrag = false;
$('.volume').on('mousedown', function(e) {
volumeDrag = true;
video[0].muted = false;
$('.sound').removeClass('muted');
updateVolume(e.pageX);
});
$(document).on('mouseup', function(e) {
if(volumeDrag) {
volumeDrag = false;
updateVolume(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(volumeDrag) {
updateVolume(e.pageX);
}
});
var updateVolume = function(x, vol) {
var volume = $('.volume');
var percentage;
//if only volume have specificed
//then direct update volume
if(vol) {
percentage = vol * 100;
}
else {
var position = x - volume.offset().left;
percentage = 100 * position / volume.width();
}
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
//update volume bar and video volume
$('.volumeBar').css('width',percentage+'%');
video[0].volume = percentage / 100;
//change sound icon based on volume
if(video[0].volume == 0){
$('.sound').removeClass('sound2').addClass('muted');
}
else if(video[0].volume > 0.5){
$('.sound').removeClass('muted').addClass('sound2');
}
else{
$('.sound').removeClass('muted').removeClass('sound2');
}
};
//Time format converter - 00:00
var timeFormat = function(seconds){
var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
return m+":"+s;
};
});
/* video container */
.videoContainer{
width: 100%;
height:auto;
position:relative;
overflow:hidden;
background-color: #f2f5f8;
color: #383737;
border: 0px solid #f2f5f8;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;}
/* video caption css */
.caption{
display:none;
position: relative;
top: -100%;
background-color: #f2f5f8;
font-size:20px;
font-weight:bold;
background-color: #f2f5f8;
}
/*** VIDEO CONTROLS CSS ***/
/* control holder */
.control{
background-color: #f2f5f8;
font-family: Cabin;
color: #383737;
position:relative;
bottom: 75px;
left:0;
width:100%;
z-index:5;
display:none;
height: 40px;
}
/* control top part */
.topControl{
height:11px;
border-bottom:1px solid #404040;
padding:1px 5px;
}
/* control bottom part */
.btmControl{
clear:both;
height: 6px;
opacity: 0.5;
background-color: #eef2f6;
}
.control div.btn {
float:left;
width:34px;
height:30px;
padding:0 5px;
border-right:1px solid #404040;
cursor:pointer;
}
.control div.text{
font-size:12px;
font-weight:bold;
line-height:30px;
text-align:center;
font-family:verdana;
width:20px;
border:none;
color: #383737;
}
.control div.btnPlay{
background:url(images/play.png) no-repeat 0 0;
border-left:1px solid #404040;
}
.control div.paused{
background:url(images/pause.png) no-repeat 0 0px;
}
.control div.btnStop{
background:url(control.png) no-repeat 0 -60px;
}
.control div.spdText{
border:none;
font-size:14px;
line-height:30px;
font-style:italic;
}
.control div.selected{
font-size:15px;
color: #383737;
}
.control div.sound{
background:url(control.png) no-repeat -88px -30px;
border:none;
float:right;
}
.control div.sound2{
background:url(control.png) no-repeat -88px -60px !important;
}
.control div.muted{
background:url(control.png) no-repeat -88px 0 !important;
}
.control div.btnFS{
background:url(control.png) no-repeat -44px 0;
float:right;
}
.control div.btnLight{
background:url(control.png) no-repeat -44px -60px;
border-left:1px solid #404040;
float:right;
}
.control div.lighton{
background:url(control.png) no-repeat -44px -30px !important;
}
/* PROGRESS BAR CSS */
/* Progress bar */
.progress {
width:85%;
position:relative;
float:left;
cursor:pointer;
height: 6px;
background-color: #eef2f6;
}
.progress span {
height:100%;
position:absolute;
top:0;
left:0;
display:block;
}
.timeBar{
z-index:10;
width:0;
height: 6px;
background-color: #db7560;
}
.bufferBar{
z-index:5;
width:0;
height: 6px;
opacity: 0.5;
background-color: #eef2f6;
}
/* time and duration */
.time{
width:15%;
float:right;
text-align:center;
font-size:11px;
line-height:12px;
}
/* VOLUME BAR CSS */
/* volume bar */
.volume{
position:relative;
cursor:pointer;
width:70px;
height:10px;
float:right;
margin-top:10px;
margin-right:10px;
}
.volumeBar{
display:block;
height:100%;
position:absolute;
top:0;
left:0;
background-color:#eee;
z-index:10;
}
/* OTHERS CSS */
/* video screen cover */
.loading, #init{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(images/loading.gif) no-repeat 50% 50%;
z-index:2;
display:none;
z-index: 100;
}
#init{
background:url(images/bigplay.png) no-repeat 50% 50% !important;
cursor:pointer;
z-index: 50;
}
<div class="six columns">
<div class="videoContainer">
<video id="myVideo" controls preload="auto" poster="images/1-thm.png" width="600" height="350" >
<source src="video.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
<div class="caption">Screamer 2015 Intro</div>
<div class="control">
<div class="topControl">
<div class="progress">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<div class="time">
<span class="current"></span> /
<span class="duration"></span>
</div>
</div>
<div class="btmControl">
<div class="btnPlay btn" title="Play/Pause video"></div>
<div class="btnStop btn" title="Stop video"></div>
<div class="spdText btn">Speed: </div>
<div class="btnx1 btn text selected" title="Normal speed">x1</div>
<div class="btnx3 btn text" title="Fast forward x3">x3</div>
<div class="btnFS btn" title="Switch to full screen"></div>
<div class="btnLight lighton btn" title="Turn on/off light"></div>
<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>
<div class="sound sound2 btn" title="Mute/Unmute sound"></div>
</div>
</div>
<div class="loading"></div>
</div>
</div>
In your div btmControl, there is the code
<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>
for which I cannot see the use right now.
Try changing the corresponding height value in the css part (.volume and .volumeBar) or consider removing it (if it really is not useful)
Because it is set to
display:block;
it should create a new line and not fill in a row along with the other divs.
So display:inline; will also provide a possible solution
Furthermore, the following divs will also be aligned in a new line. I propose this is the line break you do not want to have...
(For an example of display:block effect click here)
But anyway, a fiddle version for this problem would be of great help!
I'm trying to make the header fade out, then slide back in when you scroll past 100px, but the function fires every time you scroll anywhere past that point.
I don't want that to happen, I want it so that the function fires only once when you scroll past it and if you scroll again, even if you're past that point, nothing happens.
Check out my fiddle: http://jsfiddle.net/bazzle/6ykyjm0p/2/
Thanks in advance.
<header>
<div class="top">
This is the header
</div>
This is the point function should work.
</header>
html {
height: 200%;
}
header {
background-color: blue;
color: white;
width: 100%;
height: 300px;
}
.top{
height: 100px;
width: 100%;
border-bottom: 1px solid white;
display: block;
}
var stickyheader = function(){
if ($(window).scrollTop() > 100) {
$('header').hide(50, function(){
$(this).slideDown(1000);
});
}
else {
}
};
$(window).on('scroll',function(){
stickyheader();
});
Hi you can use a global variable as a flag to prevent the script from firing.
var flag = 0;
var stickyheader = function() {
if ($(window).scrollTop() > 100) {
if (flag == 0) {
$('header').hide(50, function() {
$(this).slideDown(1000);
flag = 1;
});
}
} else {
}
};
$(window).on('scroll', function() {
stickyheader();
});
html {
height:200%;
}
header {
background-color:blue;
color:white;
width:100%;
height:300px;
}
.top {
height:100px;
width:100%;
border-bottom:1px solid white;
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="top">This is the header</div>This is the point function should work.</header>
You can also reset flag = 0; in the else case if you want the code to execute everytime the user scroll beyond the point.
Hope this help.
I'm very new with Javascript.
I'm trying to do something with Show/Hide functions.
html:
<html>
<head>
<title> New Document </title>
<style>
#button01 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button01:hover {
background-color:#ffcccc;
}
#button01 a {
display:block;
width:40px;
height:40px;
margin:auto;
background:url("button01.png")
}
#button01 a:hover {
width:40px;
height:40px;
background:url("button01-hover.png")
}
#hidden01 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #ffcccc;
}
#button02 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button02:hover {
background-color:#cccccc;
}
#button02 a {
display:block;
width:40px;
height:40px;
margin:auto;
background:url("button02.png")
}
#button02 a:hover {
width:40px;
height:40px;
background:url("button02-hover.png")
}
#hidden02 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #cccccc;
}
</style>
</head>
<body>
<div style="width:300px;">
<div id="button01"></div>
<div id="button02"></div>
</div>
<div id="hidden01"> </div>
<div id="hidden02"> </div>
</body>
</html>
script:
function toggle(offset){
var i, x;
var stuff = Array('hidden01', 'hidden02'); //put all the id's of the divs here in order
for (i = 0; i < stuff.length; i++){ //hide all the divs
x = document.getElementById(stuff[i]);
x.style.display = "none";
}
// now make the target div visible
x = document.getElementById(stuff[offset]);
x.style.display = "block";
window.onload = function(){toggle(0);}
}
That's working, but I want to fix 2 things:
1- Close/Hide hidden divs if I click on it's corresponding button;
2- After clicking a button, fix hover button image. If click again unfix;
I've tried almost all the scripts posted and can not find a solution. I don't want to open the divs at same time.
If opens one, close the others.
You're using jQuery, so use jQuery.
$(function() {
function toggle(offset) {
$('div[id^=hidden]').hide().eq(offset).show();
}
toggle(0);
});
I don't know what you mean by the two things you want to fix, however. Please clarify.
Edit
Okay, I see what you're going for now. I've cleaned up your code a lot.
HTML
<div style="width:300px;">
<div id="button1"><a></a></div>
<div id="button2"><a></a></div>
</div>
<div id="hidden1"> </div>
<div id="hidden2"> </div>
CSS
#button1, #button2 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button1:hover {
background-color:#fcc;
}
#button2:hover {
background-color:#ccc;
}
#button1 a, #button2 a {
display:block;
width:40px;
height:40px;
margin:auto;
}
#button1 a {
background:url(http://lorempixum.com/40/40?1)
}
#button2 a {
background:url(http://lorempixum.com/40/40?3)
}
#button1 a:hover, #button1.hover a {
background:url(http://lorempixum.com/40/40?2)
}
#button2 a:hover, #button2.hover a {
background:url(http://lorempixum.com/40/40?4)
}
#hidden1, #hidden2 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #fcc;
}
JavaScript
var $buttons = $('div[id^=button]'),
$hiddenDivs = $('div[id^=hidden]'),
HOVER_CLASS = 'hover';
$buttons.live('click', function() {
var $this = $(this),
i = $this.index();
$buttons.removeClass(HOVER_CLASS);
$this.addClass(HOVER_CLASS);
$hiddenDivs.hide().eq(i).show();
}).first().click();
Demo
Last edit
Changed JavaScript and CSS. http://jsfiddle.net/mattball/bNCNQ/
CSS
#button1:hover a, #button1.hover a {
background:url(...)
}
#button2:hover a, #button2.hover a {
background:url(...)
}
JS
$buttons.live('click', function () {
var $this = $(this),
i = $this.index(),
show = !$this.hasClass(HOVER_CLASS);
$buttons.removeClass(HOVER_CLASS);
$this.toggleClass(HOVER_CLASS, show);
$hiddenDivs.hide().eq(i).toggle(show);
});
Here's a working demo: http://jsfiddle.net/R6vQ4/33/.
All of your JavaScript code can be condensed into this little block (and this isn't even as small as it can get):
$(document).ready(function()
{
$('div[id^=button]').click(function()
{
var element = $('#hidden' + $(this).attr('id').substr(6));
$('div[id^=button]').css('cssText', 'background-color: none');
if (element.is(':visible'))
{
$(this).css('cssText', 'background-color: none');
$('div[id^=hidden]').hide();
} else {
$('div[id^=hidden]').hide();
element.show();
$(this).css('cssText', 'background-color: ' + $(this).css('background-color') + ' !important');
}
});
});
The state of the button "sticks" when you press it, but my technique is a bit hacky, so feel free to change it.
When you use jQuery, you actually use it ;)