I have just finished working on this website for insect cereal (yup...) and whilst the website seems to work perfectly well on edge, safari, and firefox it has a continuous long scroll on chrome well after it is supposed to end (right after the footer). I'm sure this has a very simple fix, but I'm very rusty when it comes to coding and can't seem to find it.
Thanks in advance.
Alright, in addition to all answers here, this question was actually really fun to tackle, let's break it down:
The problem
Your footer length is being caused by the class bounceInUp added to your #button-white in content-section-d I found this by deleting sections and child nodes in DevTools until I pin-pointed your problem.
The cause
The reason this doesn't work in Chrome is because transforms like these (using animate.css) are ment for inline elements, your <button> isn't one, and you should apply custom CSS to change it, so:
button-white {
display: inline-block;
margin-top: 30px;
background: white;
color: #02E0C6;
border: none;
border-radius: 0%;
padding: 15px 15px 15px 15px;
}
In addition to the other answers, you should check your code for invalid syntax as well. There's a lot that can break in different browsers.
Look like you have problems with markup
<body>
<header>
<nav class="navigation navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img id="brand" class="img-circle" alt="Brand" src="http://i.imgur.com/0fIyMnA.png">
</a>
<h1 id="Criks" class="navbar-text">Criketos </h1>
</div>
<button id="navButton" class="navbar-text navbar-right btn btn-info">Buy Now</button>
</a> **<----------- what is it?**
</div>
</nav>
</header>
<body>
....
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="index.js"></script>
</body>
</html>
What about if you try removing
height: 100%
from html element in CSS
Related
Currently I am trying to figure out why when I put my browser in mobile view, that my mobile nav just disappears. I cannot seem to pinpoint what is causing the issue but when my navigation is in mobile view it is gone every single time I make my browser smaller. If anyone can help me figure this issue out it would be greatly appreciated! Thank you!
I had to put my code in a JsFiddle because it was just a little too long. Apologies for this, however, here is my fiddle: https://jsfiddle.net/99sc49a3/1/
Here is my html because stack wont let me post without code:
<header>
<script src="https://code.jquery.com/jquery-1.11.3.min.js" integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g=" crossorigin="anonymous"></script>
<script src="SlickNav-master/dist/jquery.slicknav.js"></script>
<script>
$(function() {
$('#menu').slicknav();
});
</script>
<nav>
<div id="fix">
<ul class="main-nav" id="menu">
<li>
<img id="logo" src="logo.svg" alt="logo">
</li>
<li>Home</li>
<li>Skills</li>
<div class="dropdown">
<button class="dropbtn">
<li>About</li></button>
<div class="dropdown-content">
Work
Education
</div>
</div>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
This is what is causing it
#media (max-width: 400px) {
#menu {
display: none; /* this line, right here */
z-index: 1000;
}
}
On taking a closer look at your fiddle, it appears you are using slicknav.js for your menu and the problem is you are calling .slicknav() before loading it.
Please see the updated fiddle with a working example. I placed the .slicknav() call on window.load event, when the slicknav has already been loaded.
Here's how I did it:
(function(){
$(window).on('load', function(){
$('#menu').slicknav();
})
})(jQuery);
I am new in UI or web development .I am trying to make simple simple pages .So I take http://ionicframework.com/getting-started/ page .And trying to make same as in my demo application .I make little bit same as site.but i am facing one issue .On header there is search bar (input field in front of this text "Questions? Head over to our Community Forum to chat with others using the framework.").I need to make search field in front of given text .I already use text-align :right;
here is my code
http://jsfiddle.net/oLws3fsk/1/
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div>
<div class="header">
<ul class="navbar">
<li>product</li>
<li>Getting Started</li>
<li>docs</li>
<li>showcase</li>
<li>forum</li>
<li>Blog</li>
</ul>
</div>
<div class="container">
<h1>Getting Started with Ionic</h1>
<p>Build mobile apps faster with the web technologies you know and love</p>
<div class="smallheader">
<div class="col-sm-8 news-col">Questions? Head over to our Community Forum to chat with others using the framework.
<div class="search-bar" style="visibility: visible;">
<span class="search-icon ionic"><i class="ion-ios7-search-strong"></i></span>
<input type="search" id="search-input" value="Search">
</div>
</div>
</div>
</div>
</div>
Divs are block-level elements and so are presented on a new line unless you tell them otherwise.
You could use display:inline-block to present the searchbox inline (ie, next to the text):
.smallheader .search-bar {
display:inline-block;/* display inline so it remains in the flow */
border :1px solid green;
}
http://jsfiddle.net/oLws3fsk/2
or float the search box to the right:
.smallheader .search-bar {
float:right;/* float to the right */
border :1px solid green;
}
.smallheader:after {/* clear the float so that the parent does not collapse */
content: "";
display: table;
clear: both;
}
http://jsfiddle.net/oLws3fsk/3/
These are not the only solutions. You could use absolute positioning, table-layout or flexbox instead.
for a university project I am trying to implement a mobile menu to a responsive website. To do this I used the jQuery plugin mmenu.
Everything seems to work fine except for one thing:
Whenever I open the menu it scrolls to the top of the page instead of staying where it was. I also realized that I can't scroll the page while the menu is open (as opposed to the example here: http://mmenu.frebsite.nl/mmenu/demo/onepage.html)
My code is structured as follows:
<body>
<!-- Mobile Navigation -->
<nav id="mobilenav">
<div>
<ul>
...
</ul>
</div>
</nav>
<div id="wrapper">
<header class="mm-fixed-top hidden-desktop">
...
<i class="fa fa-bars"></i>
...
</header>
<div id="topbar">
...
</div>
<div id="content">
...
</div>
</div>
<div id="tothetop" class="hidden-desktop">
...
</div>
<div id="bottom" class="visible-desktop">
...
</div>
<!-- Scripts -->
...
</body>
You can see the problem in action at http://www.mikehudson.de/BA/.
Thanks for your answers in advance.
-- Mike
Are you using this Plugin along with Foundation 5. If so then you can change the html, body height from 100% to auto in the global.scss file.
eg...
FROM:
// Must be 100% for off canvas to work
html, body { height: 100%; }
TO:
// Must be 100% for off canvas to work
html, body { height: auto; }
If you do apply the 100% to the body/html, make sure you preventDefault() on the click event if your trigger happens to have a "#" in the href. This tripped me up.
I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my HTML:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit="">
<li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
</ul>
</div>
</section>
</div>
Here's the HTML once foundation.orbit.js does its thing:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<div class="orbit-container orbit-stack-on-small">
<ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
</ul>
Prev <span></span>
Next <span></span>
<div class="orbit-slide-number">
<span>1</span> of <span>2</span>
</div>
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
</div>
</div>
<ol class="orbit-bullets">
<li data-orbit-slide-number="1" class="active"></li>
<li data-orbit-slide-number="2" class=""></li>
</ol>
</div>
</section>
</div>
I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.
When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.
If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.
Any ideas would be much appreciated.
I'm going to try to avoid being overly verbose here.. but this is what I've found and while I wouldn't call this a complete fix, because i'm not sure what started the differences in css the following code solved the problem.
I found this because I have a local environment as well as a dev environment for the site. The local environment was working great, but the production environment had all the issues you mentioned above.
The first issue of course is the generated container div setting the height to 0px. This is strange enough. I manually added the height to the container in the css. The reason all the images are hiding is they're set to margin-left: 100% or some large left margin and they're all positioned absolutely. I wish I could be more help as to why the code differences are present, maybe I'll find more time to investigate further but for now its working.
Anyway, the following was the fix:
.orbit-container { height:250px; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
.orbit-container { height:auto; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
A little upgrade from a previous solution. With this modification, it will be more easy to show the slideshow on a phone and a desktop.
Are you sure the url to the images are ok?
I had the same problem but with 2 of my 3 images and the problem was in the url
I was having the same problem and I've just found that using individual modules (I'm using compass) instead of using foundation.min.css solves the problem, have you tried to use foundation.css (not minyfied)?
takes deep breath
Ok, I have a large div that acts as a background layer. This div pans from left to right based on the link you select in a typical horizontal navigation. It's a bit of a novelty thing.
The HTML structure:
<div id="scroll">
<div class="container_16">
<div id="header" class="grid_9 suffix_3 alpha omega">
<!-- the links that control animation -->
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div> <!-- end #header --> <div class="main grid_8 alpha omega">
<div class="content grid_12 alpha">
<div id="the_content">
<!-- content is loaded in here via ajax -->
</div><!-- end the_content -->
</div><!-- end .content -->
<div class="clear"></div>
<div id="footer">
Footer stuff
</div>
</div> <!-- end .main .grid_8 .alpha .omega -->
</div> <!-- end .container_16 -->
</div> <!-- end scroll -->
A brief snippet of CSS:
#background_container {
position: absolute;
left: 0px;
top: 0px;
z-index: -1000;
width: 100%;
height: 100%;
}
#scroll {
width: 100%;
height: 100%;
overflow: auto;
}
The Javascript simply uses jQuery to animate the "left" attribute. I would include it, but there's a lot going on and I don't think it will help bring a solution.
Basically, when the background div scrolls from the first position to the last position, the content seems to "scrunch" briefly in Safari.
Video of this behavior:
[redacted]
In the video, I demo both safari and firefox. As you can see, in Safari the content scrunches/glitches during the animation. In Firefox, it does not. Safari is seemingly the only browser that does this. It even works in IE6. :)
The div that appears to "scrunch" seems to be <div id="header" class="grid_9 suffix_3 alpha omega"> but, sometimes you can see a scroll bar briefly which suggests <div id="scroll"> may be the root cause.
Is this a Safari rendering issue that's common and can be avoided? Or should I just suck it up?
Thanks in advance!
You have to set -webkit-transform: transform on the original element so that it gets hardware accelerated on load.