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.
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"
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
I have this code:
$(document).ready(function(){
/* SET VAR FOR IS OPEN */
var isopen = 0;
/* SHOW FIRST NEWS ON STARTUP EXTENDED */
/* SET ALL .TRIGGER PARENT .CONTAINER TO FIXED HEIGHT WITH CUTTED CONTENT (OVERFLOW) */
$('.trigger:not(:first)').css({
height: "70",
overflow: "hidden"
}, 200 );
/* CLOSE THE CLICKED ELEMENT */
$('.trigger').click(function() {
if (isopen == 0) {
// SET ALL TRIGGER TO 70PX HEIGHT
$('.trigger').css({overflow: "hidden"}).animate({
height: "70",
}, 200 );
$(this).animate({
height: "350",
}, 200 );
} else {
alert('this Alert shuld show up if isopen=1');
}
});
})
Its a news content of a website.
The user see three divs.
2 are cutted to 70px Height
The first news is extended to its original height.
after click the height: auto; does not work. So the height is set to 350px. How to get a dynamic height? Thanks!
Difficult to 100% verify my answer as I would need a fiddle/plunker with your HMTL/CSS/JS to work with, but here is my suggestion that I think will help.
Rather than explicitly setting CSS styles to the elements via JavaScript, via methods like 'css(value, property)', instead add or remove classes to the elements via 'addClass()', 'removeClass()', or 'toggleClass()'.
New look JS:
$('.trigger').click(function() {
$(this).toggleClass('is-closed');
}
New look CSS:
.trigger {
// Your current UI component styling, but no height specified
}
.trigger.is-closed {
height: 70px;
overflow: hidden;
}
The difference here being, is that you're not trying to assert "height: auto" as an overriding style for "height: something else", you are simply adding and withdrawing the fixed height on open/close - which I would suggest is much less error prone much more likely to bring about the behaviour that you want.
Furthermore, this is also a good practice to follow in any event because of the following reasons:
Separation of concerns, your styling belongs in your CSS files rather than JavaScript (i.e. component styles all together)
Reusable code, these styles reflecting the "closed" state could be re-used across all instances of this UI component, as well as others components, rather than re-written every time in JS click handler functions
Modifying CSS via jQuery functions such as 'css(property, value)' is a bad idea, it results in the styles added as inline styles in the DOM (e.g. style="height: 70px;") and this will take priority over other CSS, making managing your CSS harder and debugging presentation errors more difficult
This approach also has the added benefit of reducing the length and clarifying your JavaScript code significantly.
Height Animation
The above code will not provide the height animation that you currently have.
The solution here is to adopt a CSS transition approach rather than animating via JavaScript. Article: http://www.w3schools.com/css/css3_transitions.asp
This will again mean that all of your component related styling will remain together in one place, but CSS animation also performs much better/renders faster than JavaScript animation does.
Hope this helps.
Setting css height in javascript is basically adding an element style tag to it, which will override the css file always due to the rendering rules of css. If you set the value to an explicit height, to get it back to height: auto, you either have to write height: auto to it in the javascript or remove the style element you added completely.
I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?
I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.
You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}
I've spent numerous hours trying to figure out how to get this slider to use li's with background images rather than img's.
The reason for this is that I intend to use the slider for Wordpress & many Wordpress themes apply their own css properties to images (such as 'max-width') which will often break the slider. I would appreciate if anyone could check out the following scripts and change it to work with li's :) I've been trying myself but for some reason all it would do is load forever never showing any images..
Here is the script:
http://pastebin.com/8J9uwRtZ
In the meantime I will continue to try figure this out myself. I would appreciate if anyone could help me out.
Here is a test site with an example of the slider not working with the theme 'Thematic' which applies a 'max-width' of 100% to images & an example of a theme which doesn't (hence the slider works perfectly). FYI removing the max-width from 'Thematic' & other themes fixes the slider everytime so this is definitely the problem; hence why I wish to use li's instead of img's.
http://www.matthewruddy.com/demo/ <- not working
http://www.matthewruddy.com/demo/?preview=1&template=twentyten&stylesheet=twentyten&TB_iframe=true <- working
Thanks to anyone who can help! Matthew.
As akonsu said, your best bet is applying a specific image style to the lof class. The default style defined by the themes image.css file only gets applied for.. you guessed it.. default images. Properly redefining it in the lof class will overwrite that rule and use the new style. If your browser still doesn't seem to be picking it up, throw a big fat !important to the end of the style rule and everything except IE6 will pick it up just fine.
Max-width is only applied to images with no other specific rules present, hence "cascading" style sheets. CSS rules marked !important take precedence over other rules for the same type. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence. ie:
p { color: blue !important; }
.container h3 { do stuff }
.container p { color: red; }
In every browser except IE6 the font color for all paragraph elements will be blue as long as your doctype is properly set and your not getting tossed into quirks mode. However, doing something like this:
p { color: blue; }
.container p { color: red !important; }
Will show a red font color for all paragraph elements in the container only, for all browsers. This works because even if IE6 doesn't understand the !important rule, it still fully understands cascading rules and will apply the style based on what was last defined.
So in your case, the following rule works just fine and fixes your display problems in IE:
ul.lof-main-wapper li img { max-width: none !important; }