On the top I have two divisions, and the second one is supposed to get fixed after the user has scrolled pass it but only on cellphone.
Take a look at this for example : https://jsfiddle.net/livibetter/HV9HM/
This is exactly what I am trying to do but I want this to happen only on cellphone devices. On desktop the divisions will behave differently. On desktop top two divisions are fixed and therefore that isn't a problem and it is working properly.
On cellphone I have removed fixed from division one and 2 and when the user passes by division 2 I'd like to make it fixed and work like shown in the example given above.
Sample Codes from Fiddle
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky-anchor').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
You can always use the media query in the CSS side to achieve this such as my example below:
#media screen and (max-width: 430px)
{
.cssEntry {
background: pink;
}
}
NOTE: You can tinker with the mobile widths but generally 430px is more than enough.
Related
I'm building my personal portfolio and my .main-nav collapses with my container when I .addClass on jQuery. Here is how it looks:
.main-nav {
width: 100%;
height: 5em;
background: #595959;
box-shadow: 2px 2px 2px rgba(0,0,0, .3);
justify-content: center;
align-items: center;
z-index: 1;
}
.sticky {
position: fixed;
top: 0;
}
Jquery:
var yourNavigation = $(".main-nav");
stickyNav = "sticky";
myHeader = $('.main-header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > myHeader ) {
yourNavigation.addClass(stickyNav);
} else {
yourNavigation.removeClass(stickyNav);
}
});
So when I scroll below the header, as the .main-nav becomes fixed, the container under it occupies the space left on top, which makes it collapse.
Any suggestions? Any help is welcome!
Thanks!
If I understand you correctly, your navbar is driven into left corner when it's fixed.
The solution is very simple. Add this to .sticky styles:
.sticky {
...
right: 0;
left: 0;
...
}
If it won't work for you, please, post your html so we can try it (better, create a JS Fiddle), clarify your question and provide as with a screenshot showing what's wrong.
Ok so Im new to jQuery and a little confused how to achieve my goal here. The goal is whenever the browser is less than 780px wide I want to disable all hover effects. So I did a lot of research and still cant figure out a specific way that works for me, though I have come close. Below is the jQuery and HTML. So the class .allHover is what is triggering the hover effects. So I thought to remove the hover effect when the browser is less than 780px I would use a .removeClass method which would break the hover effect. The jQuery code below works, however when I resize the window to less than 780 px then refresh my browser the hover effect comes back and I dont want that. Is there something I can add to ensure the class .allHover doesnt come back when the page is less than 780px wide and the page is refreshed? Thank you in advance.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(window).on("load resize", function mobileViewUpdate() {
var viewportWidth = $(window).width();
if (viewportWidth <= 780) {
$(".allHover").removeClass("allHover").addClass("gallery-mobile");
}
});
</script>
<style>
.stockDesign_image, .customDesign_image {
width: 340px;
height: 382px;
margin: 30px auto;
transition: all 0.2s ease-in-out;
}
div.allHover:hover .stockDesign_image, div.allHover:hover .customDesign_image {
width: 360px;
}
.prodBoxes_header {
background-color: #4c2e90;
}
div.allHover:hover .prodBoxes_header {
background-color: #5E3EA6;
}
.prodBoxes_headerright {
background-color: #ff6600;
}
div.allHover:hover .prodBoxes_headerright {
background-color: #fb8332;
}
.viewAll_button {
background-image: url(images/VIEW-ALL.png);
width: 141px;
height: 34px;
float: right;
overflow: hidden;
position: relative;
margin: 8px 5px 0 0;
}
div.allHover:hover .viewAll_button {
background-position: 0 -34px;
}
</style>
<div class="allHover">
<div class="prodBoxes_header">
<p class="medalHeader_text">CHOOSE FROM<br>1000+Insert designs...</p>
</div>
<div class="stockDesign_image"></div>
<div class="prodBoxes_footer">
<p class="footer_asLOWas">as low as <span class="asLOWas_price">$<?=($prod[1]->sale_price ?: $prod[1]->aslow_price);?></span></p>
<div class="viewAll_button"></div>
</div>
</div>
You need to call the hiding functionality also when the page is loaded. This can be done in the ready-function. I moved the hdiding funtionality to fucntion checkViewportWidth and call in both cases.
It seems that on('load') is not executed on page refresh.
$(document).ready(function() {
function checkViewportWidth() {
var viewportWidth = $(window).width();
console.log(viewportWidth);
if (viewportWidth <= 780) {
$(".allHover").removeClass("allHover").addClass("gallery-mobile");
}
}
$(window).on('load resize', function mobileViewUpdate() {
checkViewportWidth();
});
checkViewportWidth();
});
Please see also Plunker
An example of how to accomplish this with media queries (given the hover effect is done with css.) The style will only work when screen size is <780.
#media only screen and (min-width: 780px) {
.allHover:hover {
...
}
}
But if you need this to be js, you'll just need to add an else:
function checkViewportWidth() {
var viewportWidth = $(window).width();
console.log(viewportWidth);
if (viewportWidth <= 780) {
$(".allHover").removeClass("allHover").addClass("gallery-mobile");
}
else{
$(".allHover").addClass("allHover").removeClass("gallery-mobile");
}
}
A CSS only approach would be to add your :hover CSS in a #media query with min-width: 780px since you want :hover effects to fire when the window is > 780px.
#media (min-width: 780px) {
div.allHover:hover .stockDesign_image,
div.allHover:hover .customDesign_image {
width: 360px;
}
div.allHover:hover .prodBoxes_header {
background-color: #5E3EA6;
}
div.allHover:hover .prodBoxes_headerright {
background-color: #fb8332;
}
div.allHover:hover .viewAll_button {
background-position: 0 -34px;
}
}
.stockDesign_image, .customDesign_image {
width: 340px;
height: 382px;
margin: 30px auto;
transition: all 0.2s ease-in-out;
}
.prodBoxes_header {
background-color: #4c2e90;
}
.prodBoxes_headerright {
background-color: #ff6600;
}
.viewAll_button {
background-image: url(images/VIEW-ALL.png);
width: 141px;
height: 34px;
float: right;
overflow: hidden;
position: relative;
margin: 8px 5px 0 0;
}
<div class="allHover">
<div class="prodBoxes_header">
<p class="medalHeader_text">CHOOSE FROM<br>1000+Insert designs...</p>
</div>
<div class="stockDesign_image"></div>
<div class="prodBoxes_footer">
<p class="footer_asLOWas">as low as <span class="asLOWas_price">$<?=($prod[1]->sale_price ?: $prod[1]->aslow_price);?></span></p>
<div class="viewAll_button"></div>
</div>
</div>
I'm currently designing a website and there's a problem regarding the website footer.
When viewed on Desktop, the footer looks like this:
Website Footer viewed on Desktop
The code used to create this look is:
<meta name="color:Footer Background Color" content="#000000">
CSS CODE
/*-----------------------------
footer
-----------------------------*/
.bottom-footer {
background-color: solid #ffffff;
}
.bottom-footer, .bottom-footer a, .back-to-top a {
color: solid #000000;
}
.footer-message {
display:flex;
justify-content:space-between;
list-style-type:none;
width:500px;
}
.bottom-footer {
clear: both;
height: 80px;
width: 100%;
position: relative;
bottom: 0;
z-index: 1
}
.bottom-footer p {
font-size: 1.4rem
}
.footer-message {
float: left;
margin-top: 33px;
margin-left: 20px
}
.creation {
float: right;
display: block;
margin-top: 33px;
margin-right: 20px;
font-size: 1.4rem
}
.back-to-top {
position: absolute;
margin-top: 20px;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 30px
}
.back-to-top a {
font-size: 3rem;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.back-to-top a:hover {
opacity: .5;
text-decoration: none
}
.back-to-top .fa-angle-up {
font-size: 4rem
}
footer.bottom-footer {
height: 150px
}
.footer-message {
padding: 40px 0 0
}
.creation,
padding: 10px 0 0
}
.creation,
.footer-message {
float: none;
text-align: center;
margin: 0
}
.back-to-top {
margin-top: 0;
top: 0
}
HTML CODE
<footer class="bottom-footer">
<p class="footer-message">
Home
About
News
Musings
Music
Media
Shows
Store
Contact
Ask
</p>
<a class="back-to-top" href='#'>^<i class="fa fa-angle-up"></i></a>
<div class="creation" style="text-decoration:none">
© 2016 Sam Joel Nang. All Rights Reserved.
</div>
</footer>
Now the problem is, when (for example) the window's width is decreased, the footer elements seem to scatter, the .creation element goes out of the footer and goes below.
What I want to do (when website is viewed in small window width, or on Mobile Devices screens) is to 'center' and 'stack' the footer elements (.footer-message, .back-to-top, and .creation) in the following order: top: .back-to-top, middle: .footer-message, and bottom: .creation, with the Footer Background Color still #ffffff. A small photo edit can represent what I mean:
Ideal Website Footer look on Mobile Device or small Desktop window width
I hope someone can help me. Thank you so much.
Introducing media queries
In order to achieve what you're looking for, you can use media queries in CSS.
For example, if you want to stack the footer elements at a screen width of 480px or less, the following media query will allow you to style for that scenario only:
#media (max-width: 480px) {
// Styles here
}
Given that, let's get on to the point of stacking. You have different position attributes currently on the elements you're trying to stack. The easiest way to stack elements on top of one another is to use the properties display: block; and float: left;. This way, the elements will span the width of their container and appear in the order they are in inside the document's HTML.
Let's take a look at how you might go about that:
#media (max-width: 480px) {
.footer-message {
float: left;
display: block;
}
// center the links inside footer-message
.footer-message a {
text-align: center;
width: 100%;
}
.creation {
margin: 0 auto; // center it
display: block;
}
.back-to-top {
position: relative; // absolute positioning removes the element from document flow so we want to go relative
display: block;
margin: 0 auto; // center it
}
}
Note I simply removed the other properties since they're applied at all screen sizes already. You may want to alter those inside this media query in case the new styles affect their layout or you'd like it to differ for mobile.
Hope that helps!
UPDATE: I just noticed the part about you wanting to center the elements, I've added some code above to do so.
I'm facing right now weird problem that so far occurs just in Safari (8.0.7) under OS X (Yosemite 10.10.4). What is the problem? I ahve two menu bars. Both are relative and positioning works fine. The point is that when I scroll, 50 px from top I add class that makes second bar position fixed + top 0. This also works perfectly but... when this class is added I see that font-weight of the target bar is changed to something smaller.
(I'm taking about bar that has items: "Australia", "New Zealand" etc.)
I've recorded my screen: https://www.youtube.com/watch?v=H9_VmXDqqBE. Please watch in HD. Top right. Second bar contains names of some categories. If you will look closer you will see that font weight is changed and names are much more thinner than they should be.
I'm pretty much confident about my code and:
I don't manipulate font-weight explicitly.
This happens just in Safari (OS X)
Chrome and FF work good.
It's a minor issue but I want to learn something new and face it.
Below are some code snippets to give you general preview of the situation.
$(window).scroll(function()
{
var top = $(window).scrollTop();
if (top > 50) {
$('#blog_categories_container').addClass('sticky_top');
} else {
$('#blog_categories_container').removeClass('sticky_top');
}
});
CSS for the "blog_categories_container" bar and "sticky_top" class:
nav#blog_categories_container.container_white {
background-color: rgba(0,0,0,0.66);
}
nav#blog_categories_container {
left: 0;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
top: 50px;
width: 100%;
z-index: 1030;
}
nav#blog_categories_container ul {
float: right;
margin: 0;
overflow: auto;
padding: 0;
}
nav#blog_categories_container ul li {
float: left;
overflow: hidden;
padding: 5px 30px 5px 5px;
white-space: nowrap;
position: relative;
color: #cccccc;
}
nav#blog_categories_container ul li:last-of-type {
padding-right: 0;
}
nav#blog_categories_container.sticky_top {
position: fixed;
top: 0;
}
Can someone give me any hints? Thank you.
This generally happens when something causes the font smoothing to change (probably when you add/ remove the sticky_top class).
Try adding
-webkit-font-smoothing: antialiased;
to the nav#blog_categories_container section of your css file.
If that doesn't work try -webkit-font-smoothing: subpixel-antialiased;
I've been playing around with a fixed navigation bar, but I've noticed that when it "fixes" itself, the content below all jumps up on the page.
This is the JSFiddle I've been working on, if you look closely you'll notice that when the nav bar becomes fixed to the top of the screen, the content jumps up ~1 line. I've tried playing around with the Javascript:
var win = $(window),
fxel = $('nav'),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
but I'm fairly certain the problem is in the CSS:
*{
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: white;
height: 35px;
border-bottom: solid 1px #E8E8E8;
}
nav.fixed {
position:fixed;
top: 0;
right:0px;
left:0px;
z-index:999;
height: 30px;
border-bottom: solid 1px #E8E8E8;
padding-bottom: 5px;
}
h1{
font-family: 'Lobster', cursive;
font-size: 50px;
text-align: center;
}
Any solutions on how to fix the jumping would be really helpful.
For refrence, I'm trying to get something sort of like this where the very top of the page isn't part of the navbar.
When an element is set to position: fixed, it no longer takes up space on the page, meaning it won't push other elements down on the page. So as soon as your javascript adds the fixed class, the element no longer takes up space, and so the other content jumps up to take the place where it was.
To offset this, you may need to add another rule to add something like a top margin to the next element. The top margin will need to be the height of the (now) fixed element, plus any padding and margin in the fixed element:
https://jsfiddle.net/h6g33wne/8/
nav.fixed + * {
margin-top: 35px;
}