Centered sticky menu? - javascript

I found a piece of code using script with CSS that allows me to have a menu which sticks to the top of the screen when you scroll down.
At the moment it's aligned left and I want it centered under my title and to stay centered when you scroll down.
I've tried changing a few values and using padding but its creating problems and I figured there must be a easier to do it that I'm probably missing.
HTML
<pre>
<script>
$(function() {
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if (scroll_top > sticky_navigation_offset_top) {
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#sticky_navigation').css({ 'position': 'relative' });
}
};
sticky_navigation();
$(window).scroll(function() {
sticky_navigation();
});
});
</script>
<div id="demo_top_wrapper">
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="demo_container">
<ul>
<li>About Me</li>
<li>My Work</li>
<li>Experience</li>
<li>Contact Me</li>
</ul>
</div>
</div>
</div>
</div>
</pre>
CSS
.demo_container { width:980px; margin:0 auto;padding-left:0 auto; }
#demo_top_wrapper { margin:0 0 20px 0; }
#demo_top { height:100px; padding:20px 0 0 0; }
#my_logo { font:70px Georgia, serif; }
#sticky_navigation_wrapper { width:100%; height:50px; }
#sticky_navigation { width:100%; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;float:centre }
#sticky_navigation ul { list-style:none; margin:0; padding:5px; }
#sticky_navigation ul li { margin:0; padding:0; display:inline; }
#sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }

Actually, your #sticky_navigation div's width is set at 100%, so it's as big as your page. You have to set the width of the div to "auto" or a precise value (like 400px) or remove it, the set its margin to "auto"
Then, remove "left:0px" from the js code, it sets your div 0px far from the left bound of your page.
css:
#sticky_navigation { width:auto; margin:auto; text-align:center; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;float:centre }
.demo_container { margin:auto; text-align:center; }
js:
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0 });

Related

This simple jquery user review box crashes after about 5 minutes

I created a rotating user review box using jquery to run the code to choose a random review, display it for 7 seconds, hide it and replace it with a new review.
I created a fiddle at https://jsfiddle.net/qe2mqx06/1/
The function essentially runs fine for about 5 minutes depending on which browser is being used.
It initiates when the div is ready. The function chooses a random review numbered 0 to 5. It checks that this review was not previous one viewed. It removes the previous review, displays the new review, waits 7 seconds and then runs the function again carrying the current review number as a variable which becomes the previous variable.
When it runs the review is displayed as well as the new number and the previous number for testing purposes.
It runs nicely and the numbers change and the review changes. Reviews are not repeated because when it chooses a new number that equals the previous, a new number is chosen. Then all of a sudden, the reviews don't show up anymore although the numbers change or the numbers change without the 7 second timing. Ultimately causing jquery to throw an error and crash.
Here is the code:
<span id="dddd"></span>
<div class="tp_box2">
<div class="tp-box horizontal" id="tp-iframe-widget" style="overflow:hidden">
<section class="reviews">
<div id="tpslides0" style="margin-top: 0px; height:100px">
<div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
<h1>4.5 stars</h1>
</div>
</div>
<div id="tpslides1" style="margin-top: 0px; height:100px">
<div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
<h1>4.0 stars</h1>
</div>
</div>
<div id="tpslides2" style="margin-top: 0px; height:100px">
<div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
<h1>3.5 stars</h1>
</div>
</div>
<div id="tpslides3" style="margin-top: 0px; height:100px">
<div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
<h1>3.0 stars</h1>
</div>
</div>
<div id="tpslides4" style="margin-top: 0px; height:100px">
<div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
<h1>2.5 stars</h1>
</div>
</div>
</section>
</div>
</div>
And the jquery - I am using v2.1.3 but it also crashes on 1.11 and 1.10
function rotate_tp(previousslide) {
$activeslide = Math.floor((Math.random() * 5));
$('#dddd').html($activeslide + ' ' + previousslide);
if( $activeslide == previousslide) { $activeslide = ""; rotate_tp(previousslide); };
$('#tpslides'+previousslide).hide().css('z-index','-1'); $('#tpslides'+$activeslide).css('z-index','100').fadeTo( "slow" , 1);
setTimeout(function() { rotate_tp($activeslide); }, 7000);
};
$('#tp_box2').ready(
function(){
$("[id^=tpslides]").hide().css('z-index','-1');
rotate_tp();
});
The css for those that might want to see it:
p:first-letter, h3:first-letter { text-transform: capitalize; }
.tp-box
{
font-size: 11px;
background:#F7F7F7;
display:block;
float:right;
color:#666;
position:relative;
width:100%;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
background: #f1ebe8;
transition: all 4s;
-webkit-transition: all 4s;
-moz-transition: all 4s;
}
.tp-box a {
color:#666;
}
.tp-box:hover
{
border-top:1px solid #E5E2D7;
border-bottom:1px solid #E5E2D7;
background: #F7F9F8;
transition: all 4s;
-webkit-transition: all 4s;
-moz-transition: all 4s;
}
.tp-box.horizontal{
float: none ;
clear: both ;
max-height: 100px !important;
height:86px;
}
.tp-box header {
text-align:center;
padding:6px 10px 12px;
}
.tp-box.horizontal header{
float: left ;
}
.tp-box header h1 {
font:bold 2.182em/1.255em sans-serif;
margin:0;
}
.tp-box header p.review-count {
margin:5px 0 0;
}
.tp-box .review-count a {
text-decoration:none;
}
.tp-box section.reviews h1 {
background:#DDDDDD;
font-size:1.273em;
font-weight:700;
color:#444444;
padding:5px 10px;
margin-bottom: 10px ;
}
.tp-box section.reviews {
display:block;
overflow:hidden;
margin:0;
}
.tp-box.horizontal section.reviews{
height: 100px ;
overflow: hidden ;
}
.tp-box section.reviews article {
/* border:1px solid #DDDDDD;
border-radius:4px;*/
margin:0px 10px 10px 0px;
padding:3px 0px 10px 0px;
position: relative ;
/*clear: both ;*/
float:left;
/* width:180px;
( overflow:hidden;*/
}
.tp-box section.reviews article a {
color:#CE5600;
}
.tp-box section.reviews article:last-child {
border-bottom:none;
margin-bottom:0;
}
.tp-box time {
display:block;
-moz-opacity:0.6;
opacity:0.6;
position:absolute;
top:0;
right:0;
text-transform:uppercase;
}
.tp-box h3 {
clear:both;
color:#444444;
font-size:1.091em;
font-weight:700;
padding:6px 0 0;
}
.tp-box p.desc {
padding:0 0 0px;
}
.tp-box img.user-img {
float:left;
padding:0 6px 0 0;
}
.tp-box p.author {
position:relative;
font-style:italic;
top:-2px;
}
.tp-box a.footer {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size:11px;
font-weight:700;
display: block ;
margin:0px auto;
width:90px;
text-transform:uppercase;
text-decoration:none;
color:#000;
line-height: 22px ;
padding-left: 12px ;
background: #DDD url(https://github.com/trustpilot/developers/raw/master/assets/img/icon_flat_mini.png) 2px center no-repeat;
}
.tp-box a.footer span.pilot {
color:#444;
}
After you do your check to see if the active and previous slides are the same, you don't return from the method. This means that it continues execution, sets a timer for another method call, and you are getting weirdness because of it.
if( $activeslide == previousslide) { $activeslide = ""; rotate_tp(previousslide);};
Add a return statement in here:
if( $activeslide == previousslide) { $activeslide = ""; rotate_tp(previousslide); return;};

stop onload animation loop with button click and find color class of targeted (opacity 1) div

I have an onload looping animation of ten divs that fade in and out sequentially with the use of the opacity property. When the user clicks the red button, I want the animation to stop, leaving the div that is at the opacity of 1 to remain at 1 while the others stay at 0.2. Eventually I want another larger div above these to fill with the same color (class) as the one that is at opacity 1. Can anyone give me a hand? I have a fiddle at http://jsfiddle.net/seifs4/krm6uenj/20/
Here is my html:
<div id="squares-container">
<div class="yellow game-square"></div>
<div class="purple game-square"></div>
<div class="green game-square"></div>
<div class="red game-square"></div>
<div class="blue game-square"></div>
<div class="yellow game-square"></div>
<div class="purple game-square"></div>
<div class="green game-square"></div>
<div class="red game-square"></div>
<div class="blue game-square"></div>
</div><!-- end squares-container -->
<div id="red-button">Red Button</div>
My CSS:
#squares-container{
margin:580px auto 0 auto;
text-align:center;
}
#red-button{
width:140px;
height:30px;
background:#CC0000;
font-size:18px;
font-weight:bold;
color:#fefefe;
text-align:center;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
margin:40px 0 0 180px;
padding:8px 0 0 0;
cursor:pointer;
}
.game-square{
width:65px;
height:65px;
border:1px solid #ddd;
display:inline-block;
margin:0 12px;
opacity:0.2;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-box-shadow:inset 0 0 7px 7px #fefefe;
box-shadow:inset 0 0 7px 7px #fefefe;
}
.yellow{
background:#FFFF00;
}
.green{
background:#33CC33;
}
.blue{
background:#3366FF;
}
.purple{
background:#D617D7;
}
.red{
background:#F02257;
}
and the jQuery:
$(document).ready(function () {
$.fn.extend({
brighten: function(){
$(this).fadeTo(150, 1);
}
});
$.fn.extend({
fade: function(){
$(this).fadeTo(150, 0.2);
}
});
function animateSequence() {
$('.game-square').each(function (i) {
$(this).delay((i++) * 145).brighten();
$(this).delay((i++) * 5).fade();
});
}
animateSequence()
setInterval(animateSequence, 1700);
$('#red-button').click(function(){
animateSequence().stop();
});
});
Alright, after much effort on this, I could make it 80% work. So just see if that is what you want. Check for the inline comments in below JS
DEMO HERE
$(document).ready(function () {
var current="";
$.fn.extend({
brighten: function(){
$(this).fadeTo(150, 1);
}
});
$.fn.extend({
fade: function(){
$(this).fadeTo(150, 0.2);
}
});
function animateSequence() {
$('.game-square').each(function (i) {
$(this).delay((i++) * 145).brighten();
$(this).delay((i++) * 5).fade();
});
}
animateSequence();
var interval=setInterval(animateSequence, 1690);
$('#red-button').on('click',function(){
clearInterval(interval); //clear the interval
$('.game-square').each(function(){
$(this).stop();//stop its delay
});
setTimeout(function(){
$('.game-square').each(function(){
if($(this).css('opacity')>0.3) //get whose opacity was greater which represents current element
$(this).css('opacity',1); //Make its opacity 1
});
},100);
});
});

Javascript mouseover mouseout menu

I'm trying to make this javascript menu work where, when I hover over AAA its submenu shows and on BBB its submenu shows.
It is implemented as a javascript which toggles the #subnav1 and #subnav2 css visibility where the two overlap one another.
However it seems only BBB mouseover works correctly, I suspect because the subnav2 is on top of the subnav1 however even messing with z-index doesn't solve the quirk..
Any idea?
Below is the code.. I left the css style so to make it look like a menu, hope it's not too long for an sscce
<html>
<head>
<style>
#nav {
float:left;
height:20px;
width:50%;
font-size:.8em;
margin:10px 0 0 20%;
}
#nav li,#subnav1 li,#subnav2 li {
display:inline;
}
#nav ul li a,#subnav1 ul li a,#subnav2 ul li a {
color:#000;
text-decoration:none;
margin:0 10px 0 0;
}
#nav ul,#subnav1 ul,#subnav2 ul {
list-style-type:none;
margin:0;
padding:0;
}
#subnav1,#subnav2 {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
#subnavs {
background:none repeat scroll 0 0 #ccc;
position:relative;
float:left;
height:20px;
width:60%;
font-size:.8em;
margin:0 0 0 20%;
padding:3px 0 0 10px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>Home</li>
<li onmouseover="showAAA(true, 'subnav1')" onmouseout="showAAA(false, 'subnav1')"><a>AAA</a></li>
<li onmouseover="showAAA(true, 'subnav2')" onmouseout="showAAA(false, 'subnav2')"><a>BBBB</a></li>
</ul>
</div>
<div id="subnavs">
<div id="subnav1" onmouseover="showAAA(true, 'subnav1')" onmouseout="showAAA(false, 'subnav1')">
<ul style="display: none; z-index: 10;">
<li><a>AAAAAAAA1</a></li>
<li><a>AAAAAAAA2</a></li>
<li><a>AAAAAAAA3</a></li>
<li><a>AAAAAAAA4</a></li>
</ul>
</div>
<div id="subnav2" onmouseover="showAAA(true, 'subnav2')" onmouseout="showAAA(false, 'subnav2')">
<ul style="display: none; z-index: -10;">
<li><a>BBBBBBBB1</a></li>
<li><a>BBBBBBBB2</a></li>
<li><a>BBBBBBBB3</a></li>
<li><a>BBBBBBBB4</a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
function showAAA(show, subnavid)
{
var subNav1 = document.getElementById(subnavid);
var ull = subNav1.getElementsByTagName("ul");
for (var i = 0, ii = ull.length; i < ii; i++)
{
if(show)
{
ull[i].style.display = "block";
ull[i].style.zIndex = 10;
}
else
{
ull[i].style.display = "none";
ull[i].style.zIndex = -10;
}
}
};
</script>
</html>

Increasing dimensions on hover without changing the position of other elements

Suppose I've 10 divs in the form of squares. Lets call it the home page.
Out of these 10,
3 divs have class .event1
5 divs have class .event2
2 divs have class .event3
<div class="boxes event1">
....//3-times
....
</div>
<div class="boxes event2">
....//5-times
....
</div>
<div class="boxes event3">
....//2-times
....
</div>
The boxes are placed next to one another.
When I click event1, all box fadeout except those having the class event1. Similarly, for all classes. On clicking home, all boxes will again fade in.
<div id="navi">
<div id="t0"><span>Home</span></div>
<span>Event1</span>
<span>Event2</span>
<span>Event3</span>
</div>
My JQuery code for fadeOut:
<script type="text/javascript">
$(function () {
$('#t0').click(function() {
$("*").animate({
opacity: 1.0
}, 500 );
});
$("#navi a").click(function() {
c = $(this).text().toLowerCase();
if (c!="home"){
$('.' + c).animate({
opacity: 1.0
}, 500 ).addClass('w1');
$('.boxes').not('.' + c).animate({
opacity: 0.0
}, 500 );
}
});
});
</script>
CSS for the classes:
.boxes, .event1, .event2, .event3 {
background:rgba(0, 0, 0, .30);
float:left;
position:relative;
overflow:hidden;
width:100px;
height:100px;
margin:2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
.w1:hover{
background:rgba(0, 0, 0, .30);
float:left;
width:200px;
height:200px;
position:absolute;
overflow:hidden;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
Now I want to make only a particular box increase in size (width:200px; height:200px), when the mouse pointer is hovered. I can't find a way to do it.
When I'm adding the class .w1 in javascript code, it is being applied to all the elements having class event1 or event2 or event3 (whichever one was selected). So, when I'm hovering to a particular box of that class (which was selected), all the boxes undergo transition and the boxes shift.
I want only one box to change dimensions while the other boxes are at their original place.
Also, this hovering event has to be activated for a particular event so that one can't hover on elements when home is selected. I even tried doing this by changing z-index but the page got pretty messed up.
I felt free to rebuild your project. Instead of css i use javascript in this example. The main point of this example is, that i do not resize the existing box. I build a new div, copy the content of the old div, position it absolute and set the opacity of the old one to 0. jsfiddle link: http://jsfiddle.net/56yeQ/8/
html:
<div id="navi">
<div id="t0"><span>Home</span></div>
<span>Event1</span>
<span>Event2</span>
<span>Event3</span>
</div>
<div class="boxes event1">
1
</div>
<div class="boxes event1">
2
</div>
<div class="boxes event1">
3
</div>
<div class="boxes event2">
4
</div>
<div class="boxes event2">
5
</div>
<div class="boxes event2">
6
</div>
<div class="boxes event2">
7
</div>
<div class="boxes event2">
8
</div>
<div class="boxes event3">
9
</div>
<div class="boxes event3">
10
</div>
css:
.boxes, .event1, .event2, .event3 {
background:rgba(0, 0, 0, .30);
float:left;
position:relative;
overflow:hidden;
width:100px;
height:100px;
margin:2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
.w1{
background:rgba(0, 0, 0, .30);
float:left;
width:100px;
height:100px;
position:absolute;
overflow:hidden;
margin: 2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
opacity: 1;
}
javascript:
var isHome = true;
$(function () {
$("#navi a").click(function() {
c = $(this).text().toLowerCase();
isHome = c=="home";
if (isHome){
$("*").animate({
opacity: 1.0
}, 500 );
} else {
$('.boxes').not('.' + c).animate({
opacity: 0.0
}, 500 );
$('.' + c).animate({
opacity: 1.0
}, 500 )
}
});
});
function hoverIn(element){
if(!isHome && $(this).css("opacity")==1){
$(".w1").each(function(i){
var oldDiv= $(this).data("oldDiv");
$(oldDiv).css({opacity:1});
$(this).remove();
});
var posX = $(this).position().left+2;
var posY = $(this).position().top+2;
var newDiv = $("<div>").html($(this).html());
$(newDiv).mouseleave(hoverOut);
$(newDiv).addClass("w1");
$("body").append(newDiv);
$(this).css({opacity: 0});
$(newDiv).offset({top:posY, left: posX});
$(newDiv).data("oldDiv",this);
$(newDiv).animate({height:"200px",width:"200px"},500);
}
}
function hoverOut(element){
var oldDiv= $(this).data("oldDiv");
$(oldDiv).css({opacity:1});
$(this).remove();
}
$(".boxes").mouseenter(hoverIn);
Maybe this is what you are looking for:
.w1:hover{
<!--Removed the position absolute-->
background:rgba(0, 0, 0, .30);
float:left;
width:200px;
height:200px;
overflow:hidden;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
margin-bottom: -100px;
}
.w1:hover +div{
margin-left: -100px;
}

Image resizing issue in Slides

The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}
The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck

Categories