I am currently creating a website where I have a sticky fixed header. The website is built on Bootstrap, however since I don't really like a lot of the Bootstrap headers, I decided to make a simple one myself.
http://quarndoncurtaindesign.besaba.com/
The sticky headers works fine with some minor problems. However on mobile it is a different story. Since obviously the header takes up a lot of room vertically, it takes up too much space on a mobile device.
I decided it would be best to keep the menu in its sticky state however I am using this Javascript to add a "sticky" class on some elements so I can target it in CSS.
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
$('header h1').addClass("sticky");
$('p#tagline').addClass("sticky");
$('ul').addClass("sticky");
$('a').addClass("sticky");
$('#top').addClass("sticky");
}
else{
$('header').removeClass("sticky");
$('header h1').removeClass("sticky");
$('p#tagline').removeClass("sticky");
$('ul').removeClass("sticky");
$('a').removeClass("sticky");
$('#top').removeClass("sticky");
}
});
Any advice pointing me in the right direction would be greatly appreciated.
It's good practice to use JS like this. By adding the class to the element you can then target the element using CSS.
There are a couple of issues with your approach however.
You only need to apply the 'sticky' class to the header. I don't see any reason why you would need to apply the sticky class to any other elements on the page.
Something like this should do the trick:
header.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
body {
padding-top: 100px /* Height of header.*/
/*This will offset the content below the header */
}
Also, I don't think you even need to a JS if statement here as the header will always be sticky.
If you are having problems with the mobile view then you should use media queries to correct the offset of the content below the header
You might get more value out of CSS media-queries than JS code in this case. They will allow you to recognise devices by - amongst other things - their screen size, and to specify different layouts for different setups.
I agree with the first two answers that this is a use-case best suited for CSS and/or CSS media queries.
However, if you would still prefer to detect if the user is on a mobile device with JavaScript, you may be able to use the following (or a variation of the following) code:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
}
^ This code snippet was taken from https://stackoverflow.com/a/3540295/1525109
Related
I work for an adtech. We show ads using iframe but for one particular website where we are showing ads my iframe height is being overriden.
The style that overrides my css style is as follows:-
#story-sec .led-content .cont-bot .right-side .news-detail-landing iframe:not(.instagram-media) {
width: 100% !important;
height: 200px!important;
margin: 5px 0px;
}
I create iframe dynamically using javascript. The site is overriding my css.
var iframe = createHtmlElement("iframe");
setAttributesForElement(iframe, { 'vspace':'0', 'hspace':'0', 'scrolling':'no', 'id':'myIframeId', 'frameborder':'0', 'marginwidth': '0', 'marginheight': '0', 'allowtransparency':'true', } );
setStyle(iframe, {'margin':'0px', 'width':'100%', 'height':'100%', 'padding':'0px'} );
So in above code setAttributes and setStyle are function that I have which take input and set style adn attributes for html elements.
Is there a way to avoid my css being overridden ? I tried searching for answers but got not much clarity.
I can set class named instagram-media for my iframe which solves the issue but the ads are placed on different sites so I might encounter same problem again. so looking for a permanent solution.
I had experience of work like that, so in those cases I would usually do this:
- Target the iframe you created with > css pointer.
- Is there any possibility to set !important flags on your styles?
- Try to create a very long distinctive class name for your iframe.
You mentioned adding a class resolves the issue but that you're worried about, another website using that same class and again over writing your css.
Your best bet may be to simply use some really obscure class?
Like...
class="YourCompany_iframeCSS_InsertADateHere_AnAlphaNumericStringHere"
Here is my site: http://stage.samkeddy.com/
It's responsive using a couple media queries and a mobile menu button powered by javascript.
Here is the javascript for the menu button:
function toggleMenu () {
if (menuIsVisible == false) {
collapsibleMenu.style.height = 'auto';
content.style.paddingTop = '290px';
menuIsVisible = true;
}
else {
collapsibleMenu.style.height = '0';
content.style.paddingTop = '80px';
menuIsVisible = false;
}
}
so you can see that I need to adjust the padding at the top of the content div, in order to offset the menu
But if resize to the mobile size, open the menu, and then resize back to the desktop size, the padding isn't fixed by the media query, because there's still an inline style from the javascript. I tried making the padding on the desktop version !important, but it the padding still doesn't change when resized, even though according to this !important beats inline.
You can test for yourself by opening the size (how it should look), resizing to a mobile width(the nav will disappear, and you will see the menu button), clicking the menu button (leave the menu open), then resize the site back to a desktop width. You will see the padding is still there. If you inspect it, you can see the original padding is crossed out in favor of the inline style.
I know this would be possible by monitoring the width with javascript and setting the padding then, but I really don't want to do that, and don't think I should have to.
EDIT: solved
First, I should have been adding classes, rather than adding CSS with my javascript.
Then I assumed that putting !important outside of a media query would make it only show up on desktop, but it took over all media queries. So placing just this in a query made it work. Note that if I was using 2 separate menus (mobile/desktop), I wouldn't need this, but since it was fixed and the #content needed padding, it had to be done. But using this technique you can also use only a single menu, but doing the height for the menu this way. I've demonstrated the technique in a codepen: http://codepen.io/anon/pen/JFvay
Adding this code to your stylesheet should solve the problem, I just tried this on your website using the Developer Tools and it's working:
#media only screen and (min-width: 643.2px) {
#content {
padding-top: 80px !important;
}
}
Although I'd strongly recommend you to create a separate navigation menu for mobile devices and resort to using #media-queries to display it.
Your problem at heart is that you're mixing CSS and in-line styles. As a general rule, avoid placing specific CSS properties directly on elements, whether in HTML, by using element.style.<property> =, or via jQuery's .css() feature. Instead, you should define the properties you want as CSS rules, using classes:
#collapsible-menu { height: auto; }
#content { padding-top: 290px; }
#someelt.menu-visible #collapsible-menu { height: 0; }
#someelt.menu-visible #content { padding-top: 80px; }
where someelt is some higher-level ancestor element. Then, your JS becomes simply
function toggleMenu() {
document.getElementById('someelt').classList.toggle('menu-visible');
}
If you are targeting browsers which do not support classList (see CanIUse), jQuery provides its own version of class toggling.
CSS is not an imperative language, but if you want, you can think of the #someelt.menu-visible part of the last two rules above as a kind of if statement: "If menus are visible, then shrink collapsible-menu to zero height", etc. In this metaphor of CSS as a kind of programming language (which it is), the presence of the menu-visible class of #someelt could be thought of as a kind of boolean "variable", I suppose. Most likely, you will no longer need a corresponding variable in your JS.
Anyway, the advantage of this is that people looking at your code can see all your CSS-related logic just by looking at the CSS file, instead of having to look at both CSS and JS, and you can change CSS-related things in just one place.
Right, the big problem here is that I have a fix html format that WP generates from the wp_list_pages('title_li='); function. It's a pile of nested lists. Now I wish to style that as a dropline menu with hover functionality.
http://hedag.openskin.org/?page_id=286 You can see what I've managed up to now there, I'm using z-index to try and overlay the current subnav with the one from the hovered subnav. Now I've read up on the z-index and I don't think it's possible to get it working using only css because the seperate "children" lists are in different stacking contexts.
So now my attempt is to remove it using jquery when you hover over another one of the main navigation elements. Would any of you be kind enough to either
tell me what's wrong with my z-index/css stuff and fix it that way (preferred, it'd be pretty cool) or
2. fix my jquery code so it'd work, I'm loading it in the <head> tag.
Current jQuery code:
<script>
jQuery(document).ready(function($) {
$('ul#nav>li').hover( function () {
if ($(window).width() > 767) {
$('ul#nav>li.current_page_item .children').hide();
$('ul#nav>li.current_page_ancestor .children').hide();
}
});
});
jQuery(document).ready(function($) {
$('ul#nav>li').mouseleave( function () {
if ($(window).width() > 767) {
$('ul#nav>li.current_page_item .children').show();
$('ul#nav>li.current_page_ancestor .children').show();
}
});
});
</script>
Using jQuery the menu now works as intended, it'd still be interesting to find a purely css solution to this as I'm fairly sure nested lists are a pretty standard navigation scheme and droplines are often the best option. One other thing that might be interesting to solve is getting the sub-nav to be left or right aligned with the parent ul and not the parent li.
The tricky thing about the CSS z-index property is that it's only applied to elements with a position specified in your stylesheet: either relative, absolute or fixed.
Looking at the source code on the page you linked, you should be able to style this with a pure-CSS solution. You only really need to use JavaScript if you want to support old versions of Internet Explorer.
ul li{ /* your top-level list */}
ul li ul{ display:hidden; position:relative; }
ul li:hover ul{ display:block; }
ul li.over ul{ /* if you want to support old versions of IE */ }
For accessibility, you can use left:-9999px in place of display:hidden. There's a detailed writeup of this technique here: http://www.htmldog.com/articles/suckerfish/dropdowns/ and at the bottom of the page you'll find an example of a horizontal nav menu, if that's what your final design calls for.
If you want to use
jquery.dropy
When I click on a list-item, to go to another page, the current page jumps to the top of the screen before transitioning to the next page.
This problem occured in jQM 1.2, and is still not fixed in the newly released 1.3 version.
Does anybody know how to prevent the scroll-to-top, and remember the scroll position when using the back button?
This annoying behaviour is unacceptable, and breaks the whole app experience.
I'm using it as a webapp, on an iPhone 4S, with iOS 6.1.2.
Before I describe your available solutions you need to understand, this is not an error nor is there a perfect solution. The issue is that to animate the transition to another page the viewport has to be at the top of the page so that the current page and the page transitioning in are vertically lined-up.
If you were half-way down a long list on one page (say 1000px) and the page you are transferring to is only a few hundred pixels tall then the current page would animate off the screen properly but the new page would not be visible as it would be above the viewport.
There are 2 viable solutions:
1. iScroll and its jQuery Mobile derivate iScrollview
iScroll homepage: http://cubiq.org/iscroll-4
iScrollview homepage: https://github.com/watusi/jquery-mobile-iscrollview
iScroll is a javascript that can scroll content in a window within a web browser with very similar behaviour to native scrolling on mobile devices such as iPhone and Android. This means you can scroll a window within the browser using native-like scrollbars and physics.
That is also a solution for our current problem. Because of iScroll implementation pages will occupy 100% of page height, no matter how far listview is scrolled. This is also a reason why on return listview will still stay at a same position.
Of course in case you want to implement this solution you should pick iScrollview implementation. You would still be able to implement iScroll, but it would take you much more time.
2. Silent scroll
Official documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
This jQuery Mobile functionality is also the same reason why we have this problem at the first place. Before a page transition is triggered original page is silently scrolled to the top.
In our case, when listview is selected, its position must be remembered (here you will find solutions of data/parameteres storing during the page transition, just search for the chapter: Data/Parameters manipulation between page transitions) before page is changed. In that case, when we return to the previous page we could use pagebefpreshow event to silently scroll to the bottom before page is shown.
//scroll to Y 100px
$.mobile.silentScroll(100);
And here's a working example of silent scroll: http://jsfiddle.net/Gajotres/5zZzz/
More info
If you want to find out more about this topic take a look at this article, you will also find working examples.
I was able to fix this (for iOS) in the following way:
Add a extra container div for the scrolling part. Usually surrounding the scrolling part of your page. In my case right after the header and before the footer code.
Add the following CSS:
.extracontainer {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
overflow: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Some of the CSS might be extra but in my case it was to avoid any issues with some other styles that I have using negative margins, paddings, etc.
Also make sure to have the -webkit-overflow-scrolling: touch; to have smooth scrolling.
I hope this helps.
$( document ).on( "mobileinit", function() {
var silentScroll = $.mobile.silentScroll;
$.mobile.silentScroll = function( ypos ) {
if ( $.type( ypos ) !== "number" ) {
// FIX : prevent auto scroll to top after page load
return;
} else {
silentScroll.apply(this, arguments);
}
}
}
For Jquery Mobile 1.4.5 i fixed that by changing this line in jquery.mobile-1.4.5.min.js:
a.mobile.hideUrlBar&&g.load(a.mobile.silentScroll)
to this:
a.mobile.hideUrlBar
Solution to prevent scrool to top is:
body onload="$.mobile.silentScroll(window.scrollY);"
try to use scrollstart to detect window scroll event in jquery mobile, in case you need :)
I am trying to relocate a div - the expandable panel with the header 'Why Bother', so it appears where you see it now in the display (at the bottom). But in the HTML, I want it to appear at the top of the 8 panels.
(These panels are located all down the RH side of the content area. And I am doing this to retain the current sites SEO, which is where the guy who I am building this for makes 99% of his money).
http://dev.assessmentday.co.uk/index.htm
I have tried using bottom:0; but this will not work with the expandable panels. Is there a way to do this using CSS or JS?
If you you want it to appear at the top for SEO reasons, then you are going to have to move it to the top in your HTML code. Moving it after the DOM loads (with either JS or CSS) will have no effect on it's SEO, as the SEO spiders will read the DOM the way it appears in the original HTML.
Once you have moved it to the top, you can then move it to the bottom using javascript, so that it appears to be at the bottom.
Assuming it is the first div element in <div class="contentLeft" with the class dropdownPanel , You could use the following jQuery:
$(document).ready(function(){
$('div.dropdownPanel:first').appendTo('#content div.contentLeft');
});
Here is a working example:
http://jsbin.com/ezizix/1/edit
I noticed on your site you have the $ shortcut for jQuery disabled, so be sure to replace it with jQuery:
jQuery('div.dropdownPanel:first').appendTo('#content div.contentLeft');
You can achieve what you want with absolute positioning. I don't know if the dropdowns will work after this, but it is worth a try.
Add this to the existing contentLeft css rules
.contentLeft {
padding-bottom: 90px;
position: relative;
}
Add this to the "special" div
.specialdropdownPanel {
bottom: 20px;
position: absolute;
}
Use jQuery before to do this Example on fiddle
$(".contentLeft .dropdownPanel").eq(0).before($(".contentLeft .dropdownPanel").eq(7));