sticky nav, idk what's going on :\

sticky nav, idk what's going on :\ - javascript

I am having an issue with my sticky nav. The problem seems to be that my JS is not applying the class I have told it to. you can view it live here http://test.makx.ca
Here is my code.
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
nav = $('.nav-bar').offset();
if (nav.top <= scroll) {
$('.nav-bar').toggleClass('sticky-nav');
} else {}
});
</script>
the HTML
<div class="row nav-row">
<div id="nav-bar" class="medium-12 column nav-bar">
<ul class="links">
<li>home</li>
<li>about us</li>
<li>pricing</li>
<li>contact</li>
</ul>
<ul class="links-right">
<li class="has-form">
<div class="row collapse">
<div class="large-7 small-7 columns">
<input type="text" placeholder="enter text">
</div>
<div class="large-3 small-4 pull-2 columns">
<a href="#" class="search button expand" style="padding-top: 0.6rem;
padding-bottom: 0.6rem;">Search</a>
</div>
</div>
</li>
</ul>
</div>
</div>
the CSS
.sticky-nav {
position: fixed;
top:0;
width: 100%;
display: block;
}
any feedback would be most welcoming. This has me and a friend completely stumped.

You're using the wrong selector. .nav-bar is a class selector, but you want to select the element with the id nav-bar, not the class nav-bar. Use #nav-bar as the selector instead.
Unrelated to your question, but FYI: Your use of toggleClass is going to have some odd results; it will constantly be toggling the class on and off while the user scrolls.

Related

trying to have a jQuery, javascript, click function which changes an image to the related id

I have a vertically divided page, down the middle. On one side I have a list of restaurants, I would like when/if a name of a restaurant is clicked on, an image of the restaurant and a description appears inside a div that is on the other side of the divided page.
I am trying to do this with jQuery and have it so when there is a click event the id of the name clicked is stored in a variable and then that variable corresponds to a picture which will then be displayed in the div.
I am sure there is simpler way to do this, and I am drawing a blank on this, or if someone could help me in doing it in the way I am trying, it would be greatly appreciated. All insight is welcomed and thank you.
This is new to me. I know i could do it by going through each id and having its own function call but I am trying to be less repetitive and have a function that works for all. thanks
JS CODE :
$('.hover').click( function(){
var iD = $(this).attr(id);
$('.pictureofeats').removeAttr("id");
$('.pictureofeats').attr('id', iD);
});
HTML CODE :
<div class="row drinks brunchpic">
<img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li>
<br>
<li class="hover" id="716">716 (Food and Sports)</li>
<br>
<li class="hover" id="bdb">Big Ditch Brewing</li>
<br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li>
<br>
<li class="hover" id="lloyds">Lloyds</li>
<br>
<li class="hover" id="abv">Allen Burger Venture</li>
<br>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" id="foodInfo">
<div class="row">
<div class="pictureofeats" id="foodImg"></div>
</div>
</div>

Store the required classname in the data-id attribute for the restaurant name
and toggle the display for the images keeping the positioned as absolute
JS Fiddle
Structure your HTML as following:
<div class="parent">
<div class="a">
<div class="img1 active">
1
</div>
<div class="img2">
2
</div>
<div class="img3">
3
</div>
</div>
<div class="b">
<div data-id="img1">abc</div>
<div data-id="img2">def</div>
<div data-id="img3">ghi</div>
</div>
</div>
CSS:
.parent {
width: 100%;
}
.a,.b {
display: inline-block;
min-width: 48%;
}
.img1,.img2,.img3 {
position: absolute;
display: none;
}
.active {
display: block;
}
JS:
$('.b div').click(function() {
var x = $(this).data('id');
$('.a div').removeClass('active');
$('div.' + x).addClass('active');
})

try something like this:
<div id="restId" class="row drinks brunchpic"><img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li><br>
<li class="hover" id="716">716 (Food and Sports)</li><br>
<li class="hover" id="bdb">Big Ditch Brewing</li><br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li><br>
<li class="hover" id="lloyds">Lloyds</li><br>
<li class="hover" id="abv">Allen Burger Venture</li><br>
</ul>
</div>
</div>
</div>
and in javascript:
$('#restId').click( function(){
$('#restId img').attr('src', newSource);
});
I think this is the logic

Why is my Bootstrap Sidebar overlapping my footer? Using stickynavbar.js

When there are a certain number of items in my Bootstrap sidebar the sidebar overlaps with the footer content. I cannot just change the footers top margin or give the sidebar a bottom margin. Neither of these resolves the overlap. Also, I am using stickyNavbar.js which may be what is causing the overlay issue. If so, would this be solved by determining when the sidebar is activated and adding a margin to the footer? How would I detect this and make this change with StickyNavbar.js? http://www.jozefbutko.com/stickynavbar/
Here is an image of the resulting issue:
HTML:
<div class="container" id="main-content" >
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4">
<div id="sidebar" class="hidden-xm" data-spy="affix" data-offset-top="100">
<nav class="leftnav">
<ul class="nav nav-pills nav-stacked">
<li>Jobs#IU</li>
<li>Recruitment & Outreach</li>
<li>The Hiring Process
<ul>
<li>Pre-posting steps</li>
<li>Posting process</li>
<li>Hiring proposals</li>
<li>Closing the posting</li>
</ul>
</li>
<li>Temporary Hiring Process</li>
<li>Student Employment</li>
<li>Related Resources
<ul>
<li>Employee Policies</li>
<li>PeopleAdmin</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-sm-8 ajaxContent">
<div ng-view> </div>
</div>
</div>
Sidebar CSS:
None, using default styles from bootstrap
Footer CSS:
.footerspan{ background-color:#4b3b32; padding-bottom: 50px; margin-top: 50px; }

Make left menu fixed inside parent container

I want to make left menu sticky, but when i give it position:fixed then the right container which is also inside parent div comes down in the left side. Please help. Thanks... This is my html structure:
<div class="midwrapper_inner">
<ul>
<li class="leftbox">
<div class="left_div content">
</div>
</li>
<li class="middlewhitebox">
<div class="right_div_content">
</div>
</li>
</ul>
</div>

<div class="midwrapper_inner">
<ul>
<li class="leftbox">
<div class="left_div content">
</div>
</li>
<li class="middlewhitebox" style="margin-left: XXXpx" >
<div class="right_div_content">
</div>
</li>
</ul>
where xxx is the width of leftbox.
To be honest though I would remove the ul completely and use divs
<div style="height: 1000px;">
<div style="width: 200px; height:200px; position: fixed; background: red;" ></div>
<div style="margin-left: 200px; width: 200px; height:200px; background: green;" ></div>
</div>
http://jsfiddle.net/wyxop52k/

Css
.leftbox{position:relative; float:left; margin-right:15px; }
Try This ...(Y)

Why does the page shift upwards?

Do you have any idea why the page shifts upward when I click the arrows (the slideshow navigators arrows) down at the bottom?
It's been bugging me for a while now.
HTML
<div class="slideshow ">
<div class="slides">
<img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
<img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
<img class ="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
<img class ="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
</div>
<div class="dots-container">
<ul class="slider-dots">
<a href="javascript:void(0);" class="arrow-prev" ><<</a>
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<a href="javascript:void(0);" class="arrow-next" >>></a>
</ul>
</div>
CSS
.slideshow{
background-color:#000;
text-align:center;
width:100%;
position:relative;
}
/*image slides*/
.slides{
height:100%;
max-width:100%;
}
.slide{
display:none;
margin:2em;
max-width:70%;
max-height:100%;
}
.active-slide {
display:inline;
max-width:70%;
max-height:100%;
}
/*dots*/
.slider-dots{
text-align:center;
width:100%;
font-size:1.5em;
padding:1%;
}
.dots-container{
padding:1em;
}
.slider-dots li{
display:inline;
}
.arrow-prev, .arrow-next{
font-size:16px;
color:rgb(77, 151, 201);
margin-left:1.8em;
margin-right:1.8em;
font-weight:bold;
}
a.arrow-prev:hover, a.arrow-next:hover,a.arrow-prev:active, a.arrow-next:active
{
color:#fff;
text-decoration:none;}
.active-dot{
color:#fff;
}
I have read multiple threads, but it seems there's no concrete solution to this.
Here is the jsFiddle

For these two lines:
nextSlide.fadeIn(2300).addClass('active-slide').show();
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
What's happening is you remove the tile, so the page shrinks... then you add one back in so it extends. However, when it shrinks, everything moves up to accommodate it. The experience you are getting is because it's happening faster then you can perceive.
Try either reversing the order:
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
nextSlide.fadeIn(2300).addClass('active-slide').show();
Or if that causes flickering, giving the parent container an absolute height.

Just change the order and then force it to scroll to the bottom of the page in this way it will stay at the bottom
nextSlide.fadeIn(2300).addClass('active-slide').show();
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
$(window).scrollTop($(document).height());
You can take a look at here http://jsfiddle.net/wvgqnzf9/

You have some errors in your jsfiddle, so if you fix it, you have working app. Fix it just add jquery and bootstrap.css in resource section
I've attached working fiddle
So html should be just:
<body>
<div class="nav navbar-fixed-top">
<div class="container">
<ul class="pull-left"> <li>Team</li>
<li>Learn more</li>
<li>Contact</li>
</ul>
<ul class="pull-right"> <li>Learn more</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h3>WELCOME TO SAN ANDREAS</h3>
<p>Prepare to make your dreams come true...
<p>
</div>
</div>
<div class="actors">
<span>TEAM</span>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/92/f5/92f51c2146c471daad1002221888f4d3.jpg?itok=MExy-qsb"> <span>MICHAEL</span>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/71/92/7192e2b9c8b6a24e3c9d824942799228.jpg?itok=LVyYEoB4"> <span>TREVOR</span>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_franklin_256x256.jpg"> <span>FRANKLIN</span>
</div>
</div>
</div>
</div>
</div>
<div class="slideshow ">
<div class="slides">
<img class="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
<img class="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
<img class="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
<img class="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
</div>
<div class="dots-container">
<ul class="slider-dots"> <<
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li> >>

Simple fix. set min-height of slides container.
.slides {
height: 100%;
max-width: 100%;
min-height: 500px; // set as per your requirement
}
Your slides are fadeing out meaning they are going out of DOM so causing a hole and reducing height of document and thats why its scrolling up and then next slide fadeing in. so you need to keep the container intact meanwhile, so have some fixed min height to it.

Bootstrap Center Left Right Div breaks on mobile

I am using bootstrap 3 for my mobile project . I am designing an header . Like
Block1 Block2 Block3
I want block 1 to be left aligned always on all screen size . Similarly the position of block2 and block3 needs to be in same position .
I don't want to collapse my header.
An Header bar like http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_header
in Bootstrap3
Update
<div class="row">
<div class="col-xs-4">
<input type="checkbox" name= "my-checkbox" style="width:100%" checked>
</div>
<div class="col-xs-4">
<h4 class="ag-top-bar-text rm-dots" style="padding:7px">Header Text</h4>
</div>
<div class="col-xs-4 pull-right">
<input type="checkbox" name= "my-checkbox" style="width:100%" checked>
</div>
</div>
</div>
</div>
</nav>

Try this,
HTML
<nav class="navbar navbar-default">
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="pull-left">Block 1</li>
<li>Block 2</li>
<li class="pull-right">Block 3</li>
</ul>
</div>
</nav>
Add some CSS
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
Demo

If you are using a 12 grid column you should be able to do something like this:
<div class="row">
<div class="col-xs-4">
Block 1
</div>
<div class="col-xs-4">
Block 2
</div>
<div class="col-xs-4">
Block 3
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

sticky nav, idk what's going on :\ - javascript

Related

trying to have a jQuery, javascript, click function which changes an image to the related id

Why is my Bootstrap Sidebar overlapping my footer? Using stickynavbar.js

Make left menu fixed inside parent container

Why does the page shift upwards?

Bootstrap Center Left Right Div breaks on mobile

Categories

Resources