Changing a backgroundImage set via JavaScript using a CSS media query - javascript

I have a responsive menu on my website. In full size, hovering over a button changes the background of the whole menu (not the button!). As I believe that it is impossible to change the background of a div on hovering over one of its child elements via CSS (please correct me if I'm wrong), I do this via JavaScript. For each menu button, I have a function like the following. Each button gives a different background image.
function arme() {
if (document.documentElement.clientWidth > 590) {
var bild = "url('" + bildliste[3] + "')";
document.getElementById('auswahlbox').style.backgroundImage=bild;
}
}
As you can see, for lower resolutions (> 590px), the background of the menu does not change because the menu looks different then. The background then is always the same image. CSS looks like this:
#media only screen and (max-width: 590px) {
#auswahlbox { background:url(images/koerperbilder/koerperbg.jpg);
}
If I load my website in full size and then make the viewport smaller, the background of the menu changes to the image that is set via CSS. That's how it's supposed to work.
However, now to my problem: If I load my website in full size, hover over a random button (thus activating the JavaScript function above) and then make the viewport smaller, the background doesn't change. It stays the way it was set by hovering over the button. Apparently, a backgroundImage that was set via JavaScript beforehand can't be changed back by a simple CSS media query like the one above.
My question is: How can I change a backgroundImage that was set via JavaScript using a CSS media query? And if that is not possible, how can I solve my dilemma?
Right now, this problem is ruining the user experience. Since all other rules of the media query get applied (among them background-position and background-repeat), everything falls apart whenever someone resizes the viewport after hovering over a button. I wonder if someone can help.
Thank you in advance - and sorry for my bad English.

As you have set backgroundImage property through JavaScript
document.getElementById('auswahlbox').style.**backgroundImage**=bild;
You should set same property in CSS also. So use following code
#media only screen and (max-width: 590px) {
#auswahlbox { **background-image**:url(images/koerperbilder/koerperbg.jpg);
}

Related

How to do an element that is toggable on small screen sizes but always visible on big

I want to have a menu that is toggable in small screen sizes and always visible on medium sizes upwards.
The behavior should be (basically) exactly like this demo here.
The steps are:
Go to a small screen size (til the body outline is gold)
Check that it's toggable
When the menu is hidden and you get a bigger screen size, the menu should appear
When the menu is not hidden, go to a bigger screen size and it should remain shown
When on a big screen size, and element was hidden, you should see it but when you drag to a smaller size, it should get hidden
When on a big screen size, and element was NOT hidden, you should see it but when you drag to a smaller size, it should get hidden
To achieve this is very easy with:
$(".click").click(function() {
$(".menu").toggleClass("hidden-md-down");
});
My problem now is that I want to animate this show and hide and I can't do it with the class toggle.
So I have to rely on for example slideToggle() and here is where my problem lies, see demo here.
If you now go to a small screen size, hide the menu and make the window size bigger, the menu won't appear because of the hide() function.
I know this could be solve with a $(window).resize but I definitely don't want that solution since it's terrible for performance for such a small feature.
So how can I either have this toggle class with an animation or do it with js without the resize method?
I've put my comment into an answer instead: "For best performance wire your window size check to only the end of the browser resize, not to every stage."
This code works and it only runs .5 sec after the end of the window resize event rather than during (better performance). Run the code full page and squeeze your browser window to see it in action.
Instead of sending the text values #width and #height you can elect to run your menu toggle or deactivate it; I'd do this by removing the js class you're using to activate the menu initially.
And make your menu an unordered list and set it to be inline on desktop and an unbulleted list on mobile using css.
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
var widthReport = $("#width").text($(this).width());
var heightReport = $("#height").text($(this).height());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="width"></div>
<div id="height"></div>

Vertically Scrolling in Window 8 store app

I am developing a windows 8 store app using HTML5 and Javascript. And I want to scroll some div content vertically. I am using following inline css to do so
<div style="height:100%;overflow-y:scroll;">
//Content
</div>
But Its only showing scrolling bar and i am not able to scroll the content.
This is how i am getting my scrolling bar, as you can see last input box is showing half and i cant scroll it.
I think i found a quick solution for this problem. Instead of giving height as 100%. Just give height in pixels that will cover your current window till bottom.
For example:
If your screen height is 780px, and you have 80px height covered by header. So if you want to use scrolling in remaining 700px. Use following code :-
<div style="height:700px;overflow-y:scroll;">
//Content
</div>
Hope it ll work for you as well. But Stil looking for alternate solution , if there is any.
In general, this is not a Windows Universal App problem, but simply an HTML/javascript one. By default, browsers scroll the body content that exceeds the browser window, but in the UWP JS app, no scrolling is provided by default. So, to make the content scrollable, you do need to provide a height, but the height may be dynamic. Using javascript, you can set the height more appropriately based on the user's screen size.
Basically, in the main javascript file, you can set the height of the scrollable region.
body {
overflow-y: scroll;
}
function setElementToRemainingWindowHeight(selector, usedHeight) {
$(selector).height($(window).innerHeight() - usedHeight);
}
function calculateUsedHeight() {
return $('.header').innerHeight() + $('footer').innerHeight();
}
$(function(){
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
window.resize(function() {
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
});
});
You can move the code to respond to whatever event in your app that would cause the scrollable area to change (maybe things are entering and exiting the surrounding layout, or whatever).
Depending on when the items in the list are added, and how that adding occurs, your requirements may change. See this post (which I wrote) about how to do this more dynamically...

setting background size using css in jquery

I have a div container on which i have placed two more div's (say 1 & 2) for placing the content . I have set different ids for the div's and on clicking the link( of div 2) i am changing the background image of the background div. I am trying to set the background-size as cover to occupy the whole screen width but only the upper part of the image is getting displayed. Here is the code which i am using to set the background size for the div.
<script>
$(document).ready(function(){
//autoOpen: false,
$(".span12").css('background-image','url(../images/assorting_2.jpg)','background-size','100%');
<script>
I could have posted the images but i am unable to post it as i have less points.
Try this:
$(".span12").css({
'background-image':'url(../images/assorting_2.jpg) no-repeat',
'background-size':'cover'
});
See this for using multiple jQuery CSS properties. And this for using background cover.
Try like
$(".span12").css({
'background-image':'url(../images/assorting_2.jpg) no-repeat',
'background-size':'100%'
});

Modal - content is getting out of modal on smaller monitors?

I've downloaded a free modal plugin called blockUI, and used it as my image uploading modal.
So far i've designed, positioned everything, but I have one problem:
When I make my browser screen smaller, OR go on iphone, or go on my other screen, some content gets out of the modal
See example here:
(source: gyazo.com)
See LIVE example of the website to test on your screen:
https://argonite.net/img/
Why is this happening? I have set min-width, the modal should automatically resize the background and let the content in.
Information:
.file_bg Each file will be stored in file_bg, it's like a block that will hold image preview, progress bar, and more.
#button_start - the progress bar
#button_remove - #button_link - Remove / Copy to clipboard icons
CSS File:
http://pastebin.com/QwF4Vj3B
JS file:
http://pastebin.com/xWt6bC32
Why is it doing that?
for div.blockUI blockMsg blockPage change min-width:35%; to width:35% and add min-width with a fixed pixel value (520px seems to be good in your case). That should do the trick. For mobile, you can use #media queries to apply different values for width and min-width.
div.blockUI blockMsg blockPage {
width:35%;
min-width:520px;}

Programmatically determining how many element to display in a web navigation bar

Lets say I have a horizontal navigation bar that can have an arbitrary number of items in it. Now let say this page has a width of 1000px and all the items if displayed would be 1300px. Now what I would want to do is to take whatever elements are causing it to extend beyond the 1000px and put them into a drop down menu. The issue I am having is what is the best way to figure out how many element I would need to take to make sure everything fits in the window when the window width can be changed (if the user changes the window width, the number of elements in the drop down would increase or decrease) and the navigation element widths are random?
Something similar to google plus's side navigation, just horizontal instead fo vertical.
Put the navigation elements in a parent div whose overflow is set to hidden so the extra nav elements are hidden.
Then, find the items that are hidden using jquery and append them to your dropdown menu. See answer to this question: jQuery: How to get content not visible with overflow: hidden?
See my working example: http://jsfiddle.net/zSXTb. The basics:
var h = $("#container").height();
$("#container").find("div").each(function() {
if ($(this).position().top > h) {
$(this).clone().appendTo($("#extrasContent"));
}
});
Run this onload and when the window is resized.
Try using #media queries with the css - you get a lot of control regarding screen size. For example:
#media all and (max-width: 1000px){
/*insert normal css. e.g.:*/
body{
width: 700px;
}
}
You can use min-width instead of max-width.

Categories