How to make background image position stay same on all resolutions? - javascript

I have header (100% width, 277px height), and in header I should have background image, x-repeated, which will stay in same position (x axis position), on all resolutions (1024+ actually, no need for mobile version so far). This is how it should look on all resolutions:
http://i.imgur.com/5rT4Xi9.png?1 (see profit, and cloud line under it - that's right position)
However, by changing resolution, background image changes it's position too ...
HTML:
Webopps
<h2>Helping you profit</h2>
<h3>from the Web</h3>
</div>
<div id="menu">
<ul>
<li>
Contact us
</li>
<li>
About us
</li>
<li class="has-sub">
The market
<ul class="submenu">
<li>
Mainstream
</li>
<li>
Adult
</li>
<li>
Niche
</li>
</ul>
</li>
<li>
Downloads
</li>
</ul>
</div>
</div>
CSS:
header {
width:100%;
height:277px;
z-index:999;
position:relative;
background-image:url(images/clouds2.png);
background-repeat:repeat-x;
background-position:-133px 0px;
}
http://jsfiddle.net/kF7Br/
Test link: http://bybyweb.com/webopps/
I have tried with media queries (not so smart solution, you can see at the bottom of my css, but without success), i have thought about js/jquery solutions, but have no idea how to make it... I am opened to all kind of hacks/solutions (css, jquery, html structure changes).

You can use this code :
function bgPos(){
var w = $(window).width() - $('#header-content').width();
w = w/2;
$('#header').css('background-position', w+'px 0')
}
$(window).on('resize', bgPos).trigger('resize');
But you will have to do some maths to place it well.
Fiddle : http://jsfiddle.net/kF7Br/1/

Did you try setting
background-attachment:fixed;
Also, if you dont need its position to be relative, set it to absolute.

For the desktop version, I suggest using the top and center keywords instead of using pixels. This approach looked good until about 400px wide, at that width you could use a responsive media query to override to a pixel value like you had before.
background-position:top center;

Related

Dynamic css multi column layout - update columns / force reflow?

TLDR: Can I force a column layout refresh after dynamically updating the 'css-column' css with javascript/jquery?
I have a navigation menu that I am using css columns for (I cannot work out how to use the Magento2 menu column functionality). I cannot really change the markup much. I want to stop 'widow' titles from happening (titles at the bottom of the column, with all the content on the next column - see 3rd pink title in screenshot below). It cannot be set with css as the nav items are dynamic and will change.
(I have tried "break-after:avoid" on the parent list, but this stops the list from breaking altogether - i.e. it should be able to break anywhere in the middle of the list).
I came up with a hacky solution that almost works - with javascript I am dynamically adding "break-before: column" to any list that has a widow title. (It checks the left offset of the title, compared with the offset of the first list child. If it is different then it means the title starts on the previous column).
This (sometimes) works BUT it (sometimes) does not update the columns until you resize the screen a bit.
I have been been trying out these kinds of solutions and many of these too. However none of them seem to work, for example I have tried:
console.log(elt.offsetHeight);
console.log(elt.getBoundingClientRect());
Tried 'elt' being all sorts, the parent elements, the whole body/doc wrapper etc. I thought maybe this was because the element in question is hidden until you hover over the nav link. But I forced it to be open using chrome devtools and ran the same 'reflow triggering' javascript and it still made no difference?
Is there a (preferably nice and not forcing reflow of the whole document every pageload??) way to force a recalculation of the css columns?
OR is a better solution possible using css grid / any other way?
Thanks!
In case it is relevant to another possible solution, the markup is like this:
<ul class="level0 submenu">
<li class="navigation_item__back hidden-desktop">
Back
</li>
<li class="navigation_item__link hidden-desktop">
Title
</li>
<li class="level1 nav-3-1 category-item first parent">
<a href="">
<span>Sub Title</span>
</a>
<ul class="level1 submenu">
<li class="navigation_item__back hidden-desktop">
Back
</li>
<li class="navigation_item__link hidden-desktop">
Sub Title
</li>
<li class="level2 nav-3-1-1 category-item first">
<a href="/">
<span>Lorem 1psum</span>
</a>
</li>
<li class="level2 nav-3-1-2 category-item">
<a href="/">
<span>Lorem 2psum</span>
</a>
</li>
</ul>
</li>
...
</ul>

Append <li> inside a div

I have created this nav with a div who has those li inside
<nav>
<div class="nav-links">
<li>Αρχική</li>
<li>Προϊόντα</li>
<li>Φωτογραφίες</li>
</div>
</nav>
Also, I have created a "burger" div that functions as a button, when someone is on phone, and whenever you click on it, it shows Αρχική,Προϊόντα,Φωτογραφίες.
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
However whenever someone is on phone and clicks on it I want to have one more li called "Google Maps".
Is there anyway I can do this using Javascript?
The simplest way of achieving this is via CSS - having a media query that shows the Google maps link only at mobiles screen size . The following media query will hide the li with the maps-link class for any screen size 768px and up.
You can see this in action here by viewing the snippet below (equivalent to small screen in which you will see the maps link since the width is not wide enough to match the media query.... then clicking the "full-screen" link to toggle to full screen and now the maps link will not show - because the width is wide enough totrigger the media query.
Also note that li's are children of a ul element - not a div.
And that rather than creating two seaprate nav lists - one for phone and one for not-phone... it is better to have a single list and style it accordingly for different viewports.
#media only screen and (min-width: 768px) {
.maps-link {
display: none;
}
}
<nav>
<ul class="nav-links">
<li>Αρχική</li>
<li>Προϊόντα</li>
<li>Φωτογραφίες</li>
<li class="maps-link">Google maps</li>
</ul>
</nav>

How do I proportionally resize div height until I get to a certain window width?

I am looking at using Flexslider on my website and have seen an implementation on another site that I think is incredibly interesting. It resizes the divs in proportion with the images as background images (set via inline CSS styles) and a caption and link to a relevant post inside the container div. Something like:
<ul class="flexslider">
<li class="slide" style="background-image: url(MY_IMAGE);">
<h1>Post heading</h1>
<p>Post extract</p>
Link
</li>
<li class="slide" style="background-image: url(MY_IMAGE);">
<h1>Post heading</h1>
<p>Post extract</p>
Link
</li>
<li class="slide" style="background-image: url(MY_IMAGE);">
<h1>Post heading</h1>
<p>Post extract</p>
Link
</li>
<li class="slide" style="background-image: url(MY_IMAGE);">
<h1>Post heading</h1>
<p>Post extract</p>
Link
</li>
<li class="slide" style="background-image: url(MY_IMAGE);">
<h1>Post heading</h1>
<p>Post extract</p>
Link
</li>
</ul>
NOTE: Not the exact code.
Each <li> is a maximum of 600px high, set via a max-height CSS attribute. The width of each <li> is 100%, and when the window is resized the slide remains in proportion. However, by the time the container reaches a width of something like 1100px, it reaches the maximum 600px height, and then as the width keeps expanding to fill the window, the container height remains at 600px. Once the width goes below 1100px, the height changes in proportion as before.
I know how to get the slides to change in proportion (using padding-bottom, however), but I can't seem to find a way to put this cap on the height in place (obviously because I'm using padding and not dimensions). Could anyone advise? Is this only possible in JavaScript or can this be done in pure CSS too?
You could do this using CSS with multiple media queries. Access the screen width with something like this:
#media only screen and (max-width:500px){
//large amount of padding
}
#media only screen and (max-width:400px){
//medium amount of padding
}
#media only screen and (max-width:300px){
//small amount of padding
}
having lots of queries could slow down load time. You'd have to play around with the values and number of queries to get it how you want it.
Use wv (viewport width) for your height:
height: 60vw - for example

Navbar multiple selection

So I'm fiddling around with this design I found on http://cssmenumaker.com/menu/responsive-flat-menu but I'm having a bit of an issue when the navbar is scaled down in the browser. So full width of the browser it looks like img 1 below....and when scaled down it turns into a hamburger menu with a dropdown as depicted in img 2. The problem is it repeats since I added an extra li tag to add in 'Super Awesome Menu'. So, my question is how to remove that extra repetition in img 2(it should retain in in full width like img 1).
I tried some of the simple removeclasses but they did not work. I'm sure it's super simple and I'm just failing to see it.
I stuck the code up here (since for whatever reason it's a huge pain to indent jquery on here)
http://codepen.io/anon/pen/NxZLKo
<body>
<div id="wrapper">
<header>
<nav>
<div id='cssmenu'>
<ul>
<li>Super Awesome Menu</li>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>About</a></li>
<li><a href='#'>Activities</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Join</a></li>
</ul>
</div> <!--end cssmenu-->
</nav> <!--end nav-->
</header> <!--end header-->
</div> <!--end wrapper-->
You can do that using media queries. Put this line of code in you css and you are good to go.
#media screen and (max-width: 926px) { #cssmenu ul.open li:nth-child(1){ display:none !important; } }
It will hide the first child in this case super mega awesome if you do li:nth-child(2) it will hide Home etc.
I think there's no extra link "Super Awesome Menu"
It's just the name of your menu as you configured it on lines 5 & 73 in Javascript Section of your code snippet. It's your title parameter
$("#cssmenu").menumaker({
title: "Super Awesome Menu",
format: "multitoggle"
});
Just let it empty or find another name !
Try this css
#media screen and (max-width: 680px) { #cssmenu ul.open
li:first-child{
display:none !important; } }

aligning the bottom of one "bigger" ul with the bottom of another

I'm trying to make a menu that opens to the right side of the the div that's clicked to activate it. However, I don't understand how I can do the positioning correctly. I would like the bottom of the last li (where I store the submenu options) to be even with the bottom of the div that activates the popout. However, giving is a negative margin
ul.dd{
z-index:100;
position:relative;
margin-bottom:-30px;
display:none;
}
isn't working out. How can I accomplish this
http://jsfiddle.net/mBPfG/1/
Thanks!
Your container div was preventing the hidden <ul> tag from floating to the right of the other. Also added a negative margin-top to adjust positioning.
I have updated the jsfiddle.
I simply added:
.dd_container { width:600px; }
ul.dd{
z-index:100;
position:relative;
margin-top:-60px;
display:none;
}
However, I would suggest nesting your second <ul> within the first <li>.
I have modified the HTML and CSS completely to have a more symatically correct answer.
<div id="dd_container" class="dd dd_container">
<ul class="dd_deploy">
<li>more options -->
<ul class="dd">
<li>el1</li>
<li>el2</li>
<li>el3</li>
</ul>
</li>
</ul>
<div class="cb"></div>
​​​​​​​​​​
Less markup is better
View the full jsfiddle.

Categories

Resources