I've got a sticky nav, which is working on all sizes, and I'd like to have a div stick under the nav on scrolling (it'll be filters to filter posts on the page).
http://mindtools.io/rob-test-mobile/
So the "This is STICKY" h1 is sticking on medium and large, but not on small. Is there something obvious I'm missing here? Why is this not sticking on small sizes?
Thanks!
by default data-sticky is set from medium up. add data-sticky-on="small" to get it working on small devices as well
http://foundation.zurb.com/sites/docs/sticky.html#js-options
I had
data-top-anchor="1" data-options="marginTop:0;stickyOn: small;"
in my sticky element, but it wasn't sticking on small, but swapping in :
data-options="anchor: page; marginTop: 0; stickyOn: small;"
got it working
Related
I've been working on a website and from time to time some elements are disappearing from the document. I've figured out that it's because in CSS document the early lines are not fully commented. I would like to ask why if even such a tiny thing like Skeleton's default version text is not fully commented or some of the classes or id's don't have a closing bracket then the whole website has layout problems. What skeleton's version has to do with page's body color ? This is really confusing.
Here is the HTML and CSS :
http://codepen.io/anon/pen/vIchA
I would be glad with any help. Yours truly,
D.
Browsers have to guess how to render bad code. Sometimes they will guess and render it correctly, other times it will look weird.
Different browsers are likely to render it differently (though error handling standards are improving)
In this case, your demo lacks a "/" at the start, which means it is trying to render the comments as css. The comments are not css, so it gets confused and does the best it can.
A quick way to find any bugs in the css is to use this:
http://jigsaw.w3.org/css-validator/
I have made a website with Foundation-master wordpress theme, it looks good but I dont like how its behaving in other browser widths. Is there a way of making it non-responsive, or fixed to a certain width?
Thanks!
Sometimes it's necessary to deactivate the responsive features. For example if, like it happened to me twice already, a website is launching non-responsive and the optimization for smartphones/tablets is added later.
Foundation is an awesome framework even if you take out the responsiveness. The SCSS files are very well structured it comes with a library of very useful UI elements. It's a great choice for responsive and non-responsive sites if you ask me. Some people might also want to streamline their workflow and not jump between different frameworks depending on the project to keep costs low.
Anyways, here my two cents. This deactivated all responsiveness for me:
.row {
width: 62.5rem;
}
And then in the _settings.scss
$small-range: (0, 90em);
$medium-range: (0, 90em);
$large-range: (0, 90em);
This way we're essentially always seeing the large version. As far as I can tell this even works for top bar etc.
Foundation was built to simply create responsive websites.
Beside of the question why you use this framework if you don't want a responsive webseite, it's only possible if you start removing all the media queries in foundation css and by removing the viewport meta tag.
Maybe you should better invest this time to make your webseite responsive so that it also fits on smaller screens and mobile devices.
Although the question is marked as answered, I just wanted to give you a quick hint to prevent the Foundation 4 grid to act responsive, since we had also to deal with that.
In our case (SASS version) setting the width of the <body> element via css to the specific width of the grid and reducing the breakpoint in the SASS variable $small-screen to 1px worked fine.
Try to add a min-width in the body attributes like this:
html,
body {
font-size: 100%;
min-width: <value A>;
max-width: <value A>;
width: 100%;
}
(foundation.css)
I manage/webmaster half a dozen websites that have facebook like boxes on their index pages. These were all working fine until yesterday, when suddenly they all began to display to the right of the page (where previously they had been centered). No changes have been made to any of these pages in the last day or two, so I can't think of any reason why they would all suddenly right-align.
Some of these scripts are between "center" tags, Others are inside centered tables. But they're still displaying to the right of the page. I've tried everything I can think of to get them to display in the middle of the page again, but nothing I've tried works. I'm also curious to know why they would all suddenly lose their center alignment.
Anyone have any ideas?
Any help would be very much appreciated.
You can see an example of what I'm talking about at holisticspain-dot-net
.fb-like-box.fb_iframe_widget *
{
text-align: left !important;
}
This worked as a temporary fix as well.
We already apply some styling to our button (it is surrounded in <li> tags, but we found we had to change the style for this.
We previously had this style applied
.fb-tool {position:relative;left:8px;}
We changed it to this.
.fb-tool {position:relative;left:8px; text-align:left;}
Just a short answer - might help perhaps. I changed the display property of .fb_iframe_widget to relative with !important and it fixed the sudden leftiness.
Following Harold Neal and Sergei S's suggestions, you can add text-align:left; to the default style="background-color:#000000;" portion of the tag.
I have an HTML page with a fixed-height div which should be scrollable (only vertically). In iOS 5 this can be achieved using:
overflow-y: auto;
-webkit-overflow-scrolling: touch;
The div contains an unordered list with about 10 items.
The scrolling works, but sometimes it scrolls only if I swipe my finger diagonally or even horizontally and not vertically as it should be.
I'm wondering if anyone has encountered this issue. I don't want to think that it is a bug in iOS5, but I can't figure out what I'm doing wrong because most of the time it works fine.
I had exactly the same issue. The problem turned out to be caused by two zero size iframes my site used to track history changes and load scripts. Removing these fixed the issue. I filed a bug with apple, waiting to hear back from them.
Check to see if you have any iframes on your page they could be the cause.
I have found a hacky solution but it needs javascript...
I stumbled upon that problem while loading scrollable nodes via ajax and appending them with js.
I found out that resetting the -webkit-overflow-scrolling property with js saved the day
JS CODE:
var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);
It really sucks that we have to call the setTimeout method but that's the only way I could think of...
EDIT : Watch out for display:none
Webkit overflow scrolling touch CSS bug on iPad
You need to put this css setting in your css file - the one you load using the content_css configuration variable:
body {
-webkit-transform: translate3d(0, 0, 0);
}
The other option is to set the css directly from code on tinymce initialization:
$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));
I had the same problem in iOS 5.1.1 and it turned out to be due to an ::after pseudo-element with position: fixed that was on an element that contained the scrollable list exhibiting the "wrong scroll axis" behavior. Details here.
I've got a UIWebView embedded in my iPhone app, and I'd like to keep a locked header and footer DIV on the page at all times, with a scrollable center DIV.
I know that I could do this using a header/footer that are UIView controls, but I want the header and footer to be HTML divs, as a pure HTML/JS/CSS solution will be easier to port to Android/PalmPre/AdobeAir, which is going to be on my todo list relatively soon.
I can do this using techniques like the one mentioned here:
http://defunc.com/blog/?p=94
But this requires that the user use 2 fingers to scroll the div, which is not satisfactory to me...
Any suggestions on how to do this?
Thanks,
Brad
I found someone that implemented a reusable solution for this, with a header and a footer:
http://cubiq.org/iscroll-4
I'm not too familiar with the UIWebView, so this may be a totally silly suggestion. But is there anything stopping you from having three UIWebViews on the page? One for the header, one for the body, and one for the footer. Because breaking it up sounds like the right idea.
Is this what you're looking for? Open this link on your iPhone device or simulator.
The index.html file has three div elements for "header", "container" and "footer" directly under the body, while all the work is done in the fixed.js file. The document is fixed in place by canceling the normal action for the "touchmove" event:
// Disable flick events
disableScrollOnBody : function() {
document.body.addEventListener("touchmove", function(e) {
e.preventDefault();
}, false);
},
Then, a lot of work goes into creating event listeners for the "touchstart", "touchmove" and "touchend" events which are attached to the "content" div under "container". The logic boils down to simply moving the "content" div up and down.
This solution is 100% HTML/CSS/JavaScript, however there is some WebKit proprietary CSS and JavaScript which may limit portability. It may take a bit of tweaking to work on another mobile device but this would be a good proof-of-concept to start from.
I did not create this awesome sample project, I'm merely bringing it to the community's attention. For more information and a link to the zipped project, read Richard "Doctyper" Herrara's entire post on Fixed positioning in Mobile Safari.
May be clunky, but you could reposition the header and footer over top of the div as the user scrolls. This way your main div doesn't need to be scrollable. No help for anything (still) using frames though.
This is one of the more irritating browser issues with the iPhone/touch, I wish you could just focus on part of the page like a normal browser.
For a CSS only reference the Safari CSS Reference probably has what you are looking for. You'll be especially interested in anything starting with "-webkit" or "-khtml" as those are extended properties only available with WebKit like 3D and touches. Should apply to Android as well.
With JavaScript the Introduction to WebKit DOM Programming Topics and WebKit DOM API Reference are go-to guides. Definately take a look at the light-table demo for some copy and paste javascript on handling your touches as that's how I would solve this.
I have implemented iScroll on iphone and it is really smooth and fast and you can do whatever you want. Disadvantages are that android (1.6) refuses to scroll how I wanted and sometimes block other javascript if there are any.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">
Add those to your html code may solve your problem.