Navigational Buttons not resetting to inactive state - javascript

I have a primary and secondary navigation, when the user clicks a link the background-image of this link will change to an "active" state and reset all other links to "inactive". This works fine for my primary navigation, but my secondary navigation is not resetting resulting in all of my links having an active state. My Code:
HTML
<nav id="menu">
<div id="container">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
</div>
</nav><!--END MENU-->
<div id="upperContent-title">Welcome</div>
<div id="upperContent-body">
Welcome Text
</div>
<img id="upperContent-img" src="img/welcomeImg.png"/>
</div><!--END UPPER CONTENT-->
<nav id="middleNav">
<div id="middleContainer">
Link 7
Link 8
</div>
</nav><!--END MIDDLE NAV-->
CSS:
#menu{
background-image:url(../menuBottom.jpg);
background-repeat:repeat-x;
position:absolute;
margin-left:auto;
margin-right:auto;
margin-top:4px;
width:1024px;
height:25px;
}
#container{
position:absolute;
margin-left:200px;
margin-top:-3px;
height:24px;
}
nav a[id*="menu"]{
background-image:url(../mainNav.png);
background-repeat:no-repeat;
display:inline-block;
text-align:center;
font-family:Arial,san-sarif;
text-decoration:none;
font-size:14px;
color:#000;
margin-left:-4px;
padding-top:5px;
margin-top:3px;
padding-bottom:10px;
width:129px;
height:25px;
}
#upperContent{
background-image:url(../upperWelcome.jpg);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
width:1024px;
height:306px;
}
#upperContent-title{
margin-left:60px;
padding-top:40px;
font-family:Arial,sans-serif;
font-size:36px;
color:#00853f;
width:459px;
}
#upperContent-body{
margin-left:60px;
padding-top:10px;
font-family:Arial,sans-serif;
font-size:14px;
color:#000000;
width:459px;
}
#upperContent-img{
position:absolute;
margin-left:578px;
margin-top:-183px;
}
#middleNav{
background-image:url(../middleNavBG.jpg);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
width:1024px;
height:43px;
}
#middleContainer{
margin-left:57px;
}
nav a[id*="middleNav"]{
background-image:url(../middleNavRect.jpg);
background-repeat:no-repeat;
display:inline-block;
text-align:center;
font-family:Arial,san-sarif;
text-decoration:none;
font-size:14px;
color:#FFF;
margin-left:-4px;
padding-top:8px;
margin-top:3px;
width:116px;
height:37px;
}
nav a[id*="middleNavCorner"]{
background-image:url(../middleNavRound.png);
background-repeat:no-repeat;
display:inline-block;
text-align:center;
font-family:Arial,san-sarif;
text-decoration:none;
font-size:14px;
color:#FFF;
margin-left:-4px;
padding-top:8px;
margin-top:3px;
width:116px;
height:37px;
}
JS:
//Initialize Document.ready
$(function(){
//Navigation
//Main Nav
$("a[id*='menu']").on({
click:function(e){
$("nav a[id*='menu']").css('background-image','url(urlHere/mainNav.png)');
$(this).css('background-image','url(urlHere/mainNavVisit.png)');
}
});
//Secondary Nav
$("a[id*='middleNav']").on({
click:function(e){
$("nav a[id*='middleNavLink']").css('background-image','url(urlHere/middleNavRect.jpg');
$(this).css('background-image','url(urlHere/middleNavRectVisit.jpg)');
}
});
});//End Document.ready
JSFiddle:
JSFiddle Of Intended Result
Any help would be greatly appreciated thanks!

This issue appears to have been within my .js document. I copied over the working code from my primary nav and used it for my secondary nav and it appears to work fine, trying to isolate the exact cause of the initial issue, but it appears to have been some sort of targeting or misspelling. thanks.

Related

Responsive Popup Window Doesn't Scroll To Bottom So It Can Be Closed

I'm using a popup window from https://codepen.io/pedrobenoit91/pen/aJGzYg and have been able to tweak it get it to be responsive. Here is my test page: Responsive Popup Window Test Here's the tweaked coding I've used:
HTML5 Page
<script type="text/javascript" src="/js/popupwindow.js"></script>
<div class='popup'>
<div class='popwin'>
<span style="font-size:1.50em; color:#2e5c9d;">CIS Miami Is Here for Our Students & Families</span>
<p>
See what we're doing and view resources ยป
<br>
COVID-19 is impacting our students and families in ways that no one could have possibly imagined. Communities In Schools of Miami remains dedicated to ensuring all
of our students and families have the crucial resources they urgently need at this time, but we can't do it without you.
<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
<div style="display:block; padding:0.50em 0;">
<div class="btnOrange"><a class="btn" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=SDSKUTE5VQXCW&source=url"><b>DONATE TO CIS MIAMI <i class="fas fa-angle-double-right"></i></b></a></div>
</div>
<div class="right"></i> CLOSE</div>
</p>
</div>
</div>
SCRIPT
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
STYLESHEET
#overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000;
filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; z-index:100; display:none; }
.popup { width:100%; margin:0 auto; display:none; position:fixed; top:0; left:0; z-index:101; } /* Added top and left for positioning */
.popwin { min-width:90%; width:90%; min-height:150px; margin:2.0em auto; background:#fff; position:relative;
z-index:103; padding:0.5em 1.0em; border-radius:5px; box-shadow:0 2px 5px #000; } /* Changed with to percentages for responsive. Margin determines height from top */
.popwin p { clear:both; color:#555555; /* text-align:justify; */ font-size:1.2em; font-family:sans-serif; }
.popwin a { text-decoration:none; }
.popwin p a { color:#d91900; font-weight:bold; }
.popwin .x { float:right; height:35px; left:0px; position:relative; top:-25px; width:34px; }
.popwin .x:hover { cursor:pointer; }
a.closepop:link, a.closepop:visited, a.closepop:active { text-decoration:none; color:#444; }
a.closepop:hover { color:#444; text-decoration:none; }
It works, but on smaller devices, like my phone, the popup doesn't scroll so I can't see all of the content or get to the button to close it. I've been trying different things with no luck so far. Any help would be appreciated.

When scroll page down appear and dissapear element

Whenever I scroll page down to bottom of B element my sticky element (which is the display none; on the top) must be appear and if I scroll page up to top of my B element my sticky must be hidden.
my codes
HTML
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
CSS
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
(in my css I have sticky element which is none appear)
JQUERY
$(function() {
$(window).scroll(function() {
/* I dont't know what I have to do */
});
});
click to see on codepen
I've solved it by doing this, it appears after you pass the bottom of .b and hides if not:
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
});
Suggested Solution:
Add this to your jquery code:
$(function() {
var targetOffset = $(".b").offset().top; //based on this div, the sticky element should appear
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
$(".sticky").show(); //show the sticky element
} else {
$(".sticky").hide();//hide the sticky element
}
});
});
Whenever I scroll page down to bottom of B element my sticky element must appear
If I scroll page up to top of my B element my sticky must be hidden
You need to check the scrollTop of the document to see how far you are from the top, then compare that to the scrollTop of the element you are scrolling to (to see if you have reached it)
The reason you should cache your selectors, like I have, is that the onScroll event triggers A LOT. So if you have $('ul.sticky').dosomethign inside of $.scroll(), you are A.) creating that jquery object, B.) querying the DOM C.) doing stuff. This can get rather expensive for performance. Typically if you are going to do an onScroll event handler, you should add a debounce or throttle to it to limit the number of times the handler function is called.
$(function() {
var $sticky = $('ul.sticky');
var bToTop = $('.b').scrollTop();
$(window).scroll(function() {
if($(document).scrollTop() > bToTop){
$sticky.show();
}
else {
$sticky.hide();
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
If you want to show the sticky only when you have reached the end of element b, you can do var bToTop = $('.b').height() + $('.b').scrollTop();
codepen
$(document).on("scroll", function() {
if ($(document).scrollTop() >= 600) {
$("ul").css({"display":"initial"});
}
if($(document).scrollTop() <=600) {
$("ul").css({"display":"none"});
}
});
This should be the proper and correct solution.
Just change the display: none to visibility: hidden;.
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".a").offset().top + $(".a").height()) {
$(".sticky").css({
"visibility": "visible"
});
} else {
$(".sticky").css({
"visibility": "hidden"
});
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
visibility: hidden;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
.show{
display:block;
}
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>

CSS with right border - Nested

I am attempting to nest some divs. Each div is a unit which contains a right div and a left div. The left div can contain more units or single non-child units. Basic tree structure. However, I can't seem to get the css to work for what I'm going for.
I've created a js fiddle for it, listed below. The code is also below. I've also included a picture of what I'm going for. Any help is appreciated. I am open to jquery/javascript solutions.
JSFiddle
http://jsfiddle.net/atsFA/
HTML
<div id="main">
<div class="inmain">
<div class="inleft">
<div class="inthing">
Thing THing Thing X
</div>
<div class="inmain">
<div class="inleft">
<div class="inthing">
thing2 thing2 thing2 X
</div>
</div>
<div class="inright">
R<br/>
I<br/>
G<br/>
H<br/>
T<br/>
2
</div>
</div>
</div>
<div class="inright">
R<br/>
I<br/>
G<br/>
H<br/>
T<br/>
1
</div>
</div>
</div>
CSS
#main{
width:600px;
height:600px;
background-color:grey;
position:relative;
}
.inmain{
width:100%;
border:2px solid black;
position:relative;
height:100%;
}
.inleft{
background-color:blue;
position:relative;
width:100%;
margin-right:20px;
height:100%;
}
.inright{
background-color:green;
position:absolute;
width:20px;
right:0px;
top:0px;
}
Image for Reference
I have used nested classes and nth-child or nth-of-type basing on your html structure.
Bear in mind I have used padding-bottom: 22px to take into account of your 2px border.
You can try:
#main{
width:600px;
height:600px;
position:relative;
}
.inmain{
width:100%;
position:relative;
height:100%;
}
.inmain:nth-of-type(2){
border:2px solid black;
position:relative;
height:100%;
width:96%;
}
.inmain:nth-child(1) .inleft{
background:white;
position:relative;
width:100%;
margin-right:20px;
height:100%;
padding-bottom:22px;
}
.inmain:nth-child(2) .inleft{
background:blue;
position:relative;
width:100%;
margin-right:20px;
height:100%;
padding-bottom:0;
}
.inmain .inleft .inmain .inright{
background-color:#00FF00;
position:absolute;
width:20px;
right:0px;
top:0px;
height:100%;
padding-bottom:0;
}
.inmain .inright{
background-color:#00FF00;
position:absolute;
width:20px;
right:0px;
top:0px;
height:100%;
padding-bottom:22px;
}
Check this DEMO: http://jsfiddle.net/atsFA/12/
Using the below JQuery method with the css worked. The 22px less on the width is to account for a scroll bar, if one is used.
function setConstructSizes(element) {
//Set split group heights
element.find(".inthing").each(function () {
var hR = $(this).parent().parent().children(".inright").first().height();
if (hR > $(this).height()) {
$(this).height(hR);
}
});
//Set width of all inner lefts
element.find(".inleft").each(function () {
var p = $(this).parent();
var w = p.width();
$(this).width(w - 22);
});
//Set height of all inner rights
element.find(".inright").each(function () {
$(this).height($(this).parent().height());
});
}
.inmain
{
position:relative;
width:100%;
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
}
.inleft
{
position:relative;
}
.inright
{
text-align:center;
border-left:1px solid black;
border-right:1px solid black;
width:20px;
position:absolute;
right:0px;
top:0px;
}

Navigation bar/menu getting disappeared on smaller screen - CSS issue

I am in middle of developing a website and I am facing a small problem. The top navigation bar of the website works fine upto a particular screen resolution. However, if I adjust my browser window (smaller in size), the navigation bar is getting disappeared. The same problem also persist if I view the website on my Ipad. I am not able to figure out what am I doing wrong with the CSS code for navigation menu.
I have uploaded the website on a testing server
http://bcklight.hostoi.com/
HTML Code
<section id="start" class="start">
<div id="section-nav" class="section-nav">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Product&Services</li>
<li>Work</li>
<li>Company</li>
<li>Contact</li>
<li>Fi | En</li>
</ul>
</div>
</div>
CSS Code
.container{
margin:0 auto;
max-width:960px;
padding:0 5%;
width:90%
}
.section-nav{
background:#FFFFFF;
-webkit-box-shadow:0 0 5px #111;
-moz-box-shadow:0 0 5px #111;
box-shadow:0 0 5px #111;
color:#838383;
display:none;
font:800 .688em "proxima-nova",sans-serif;
letter-spacing:.3em;height:31px;line-height:31px;
position:absolute;
text-align:center;
text-transform:uppercase;
top:0;
width:100%;
z-index:9999
}
.section-nav.fixed{
position:fixed
}
.section-nav ul{
clear:both;
list-style:none;
margin:0;
padding:0
}
.section-nav li{
display:inline-block;
padding:0 3%
}
.section-nav li.active a{
color:#f7e442;
text-decoration:none
}
.section-nav a{
-webkit-transition:400ms;
-moz-transition:400ms;
-o-transition:400ms;
transition:400ms;
color:#838383;
font-weight:700;
outline:0;
text-decoration:none
}
.section-nav a.active,.section-nav a:hover{
color:#FF8C00;
text-decoration:none
}
.nav-trigger{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background:yellow;
cursor:pointer;
display:none;
float:right;
height:16px;
margin-top:7px;
width:16px
}
.section-header{
font:800 1.875em "proxima-nova",sans-serif;
letter-spacing:10px;
margin:0 0 20%;
padding-left:10px;
text-align:center;
text-transform:uppercase
}
Please have a look at inspect element on the browser if I am missing anything to mention over here.
I don't understand what's the problem - you're using "display: none;" on both
media="screen, projection"
.section-nav
and then (when it get's even smaller):
media="screen, projection"
screen.css:2057#media only screen and (max-width: 768px)
.section-nav .nav { display: none; }
i think you've got messed up with all the media queries and lost track of what does what :) happens to me all the time. you just need to use Chrome Inspector to figure those out ;-)
http://someimage.com/nFKmzAA
Position fixed has very poor support on mobile browsers.
You should use a media query to change it from position fixed to position absolute on mobile browsers.
in screen.css, line 93
.section-nav{
display:none;}
display none makes this issue.

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