I have a fullscreen class which (obviously) makes any panel it is added to full screen. The scss is the following :
.fullscreen-div {
top: $navbar_height;
right: 0;
bottom: 0;
position: fixed;
z-index: 5;
padding: 0px 10px;
background: white;
}
Whenever an other specific panel is open however i want the full screen to be a bit smaller so the other panel can fit too. I try to do this with the following javascript :
function setWindowDimensions(){
...
//Fullscreen width
var fullscreen = $('.fullscreen-div');
if(leftPanelPresence){
fullscreen.css("left", leftPanelWidth);
}else{
fullscreen.css("left", 0);
}
}
This code is correctly run when the left panel is visible however the "left" style attribute fullscreen div only changes when i run this code twice. The first time it just stays the default left: 0; .
I checked if the jQuery element was correctly selected, id the leftPanelPresence was true and if the leftPanelWidth was set correctly which all seems to be the case.
The fullscreen button does the following (coffeescript):
$(document).on 'click', '.evidence-header h4 i.icon-resize-full', ->
evidenceView.addClass('fullscreen-div')
setWindowDimensions()
leftPanelWidth is set to 200 by default.
The .css jQuery line is run but i just don't see the change reflected in my browser. When i inspect the css in the browser it stays 0.
the argument of .css must be a string as you would write it in .css file
you need to add 'px' at the end leftPanelWidth.
It works with your default value because 0 is interpreted as a null value and works without the 'px'
Related
I'm new to jquery and I'm having some trouble with it.
.pageimage {
width:80%;
height:60%;
margin:0 auto;
background:#0FF;
position:absolute;
left:;
top:20%;
}
Using jquery, I'm trying to find the pixel value of 'top', subtract 50% from that value, and then place that value on the 'left' property.
Also, does anyone know how to rerun this script after the browser window has been resized?
Help is greatly appreciated.
You can easily do this, using the .css() method creatively. If you get the .css("top") of an element, it is returned in px, so you have to replace("px","") to be able to use the numeric value, then divide by 2, then add the "px" at the end again.
Wrap this up in a function and call it when your page loads. Then add a $window.resize() handler to run the function every time the window is resized after it's loaded.
Here's a full example:
function updatePageImageLeft() {
var calculatedLeft = $(".pageimage").css("top").replace("px", "") / 2 + "px";
// console.log(calculatedLeft);
$(".pageimage").css("left", calculatedLeft);
}
// Called when the page loads
updatePageImageLeft();
// Page has been resized, call it again
$(window).resize(function() {
updatePageImageLeft();
});
.pageimage {
width: 80%;
height: 60%;
margin: 0 auto;
background: #0FF;
position: absolute;
/*left: ;*/
top: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageimage"></div>
Note: You might also want looking into the CSS calc() function, as it could help you avoid writing any Javascript/jQuery code in the first place (especially if you combine it with CSS custom properties).
To get the Value of "top" you can youse the function css.
var top = $(".pageimage").css("top");
$(".pageimage").css("left",parseInt(top)* 0.5);
to rerun the script after the window has been resized use:
$(window).resize(function() {
//place Code here
}
Link to jsfiddle
Edit
use parseInt to get the int-Value of top
I'm trying to get a button that's found in the right rail column on my test page (in desktop view) to take up the entire footer of the page in mobile view.
This is the css and js code that I am using:
#media screen and (max-width: 768px) {
#register_text_container {
position: fixed;
bottom: 0px;
}
}
$(function() { //doc ready
if (!($.browser == "msie" && $.browser.version < 7)) {
var target = "#register_text_container", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));
$(window).scroll(function(event) {
if (top <= $(this).scrollTop()) {
$(target).addClass("fixed");
} else {
$(target).removeClass("fixed");
}
});
}
});
The js code is not mine, it is one I found searching stackoverflow and its been working great, I just can't seem to figure out how to get it fill the page. I have tried using width: 100% but that didn't work.
The container that I'm calling in my CSS code is one I do not have direct access to, its built into the CMS and pops up as a button.
when I inspect the Register button to look at the html code to see what I should be calling in my css document this is what I found:
<div class="entry-page-button-container" id="register_link_container">
<div class="manageable-content" data-container="edit_register_text_container">
<a class="entry-text-link secondary-step step-button" id="register_text_container" href="">Register</a>
</div>
</div>
I've tried it on each class and id and so far still unable to get the register button to take up the full width of the page.
Appreciate any help I can get.
Thanks!
Test Page
You have a width: 250px !important on this link .entry-text-link secondary-step step-button
Change it to width:100%; (and remove the !important, it is not needed ).
Then add left:0; and right:0; in this fixed element .entry-page-button-container
And it should works properly.
just set the width of the button element to 100%. This will make it take up the full width of the button's parent container.
Set it using the style attribute like so:
<div>
<button style="width: 100%">Press this full width button!</button>
</div>
this will make the button go to the full width of the parent div element
You have to remove width : 250px !important on <a> element and add this on fixed element.
width: 100%;
left: 0;
bottom: -10px;
On the page, there are 3 blocks (header, main and footer). 4th (apple_ios_status_bar_background) is hidden by default and displayed (or hidden) dynamically in code. When this unit is not displayed, you can see all 3 blocks on the page. If the display 4th block - the block footer goes down the page. It is necessary that would block main changed its height dynamically (all blocks should always be visible on the page).
Code https://jsfiddle.net/j3qm5qgx/1/
In JS detect iOS system, if true - show apple_ios_status_bar_background block, hide if false.
In your fiddle you did not include jQuery and second you did not define iOS. If you do so it works as you wanted it to.
var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
https://jsfiddle.net/j3qm5qgx/4/
Note that Safari does not really mean iOS and that you could solve that issue in css with media device.
If you do not want your footer to go offscreen, you could set it on bottom via css:
footer {
position: absolute;
bottom: 0px;
height: 20px;
width: 100%;
background-color: #dff0d8;
}
https://jsfiddle.net/j3qm5qgx/5/
Another way would be to change it by jquery, since main now is 20 pixels more short:
if (iOS) {
$("#apple_ios_status_bar_background").show();
$('main')[0].style.height = 'calc(100% - (40px + 20px + 20px))';
} else {
$("#apple_ios_status_bar_background").hide();
}
https://jsfiddle.net/j3qm5qgx/6/
any idea why in the example below, media queries stops changing the height of the menu bar after it's been changed by js? (make window small and click on the arrow to expand the mini menu). Do I need to register a point of origin for the menu element or something?
CSS:
#menu {
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
height: 90px;
z-index: 11000;
opacity: 1;
background-color: #F03600;
}
JS:
if ($("#arrowup").css('top') == '0px') {
$("#menu").animate({'height':'270px'}, 800, "easeInOutQuint");
} else {
$("#menu").animate({'height':'55px'}, 800, "easeInOutQuint");
}
You can check out the page here, all the code's on a single page:
http://www.nioute.co.uk/stuff/
Also, what's a good read with regards to media queries / js interaction?
Thanks!
The reason the media queries don't work is because when you modify the bar with Javascript, it applies inline-css. This overrides CSS that you may have in your stylesheets. The problem seems to be, when you toggle the arrow back down, #menu has an inline style of height="55px" applied to it, which blocks the regular style of 90px on a larger size.
The solution would be to clear the style when the window is resized to larger than your media query breakpoint using something like $(window).resize(function()...); and checking the current width of the window against your breakpoint. If it returns true, call $('#menu').attr('style', ''); and that will remove the inline style.
You can use class for adding some styles to elements and removing they after the job instead of getElementById(#menu).style.height = ...
for example:
getElementById(#menu).classList.add("newHeight")
Or
getElementById(#menu).classList.remove("newHeight")
I need to get informed when the user changes the font size in it's browser.
I need it to reposition some elements which have to be relative in one dimension to an anchor inside a text.
So far i haven't found anything and i'm a bit worried that it's not possible. In this case it should be possible to emulate it with a hidden div and some text inside and a script polling for changes of it's width. But i hope someone has a more elegant solution.
EDIT:
I implemented the polling thing like following. It's not properly tested on all Browsers but it doesn't depend on browser specific features. use it like $('body').bind('fontResize', function(){...})
$(function(){
$('body').append($('<div id="theFontResizeCaptureDiv">A<br>B<br>C</div>'));
$('#theFontResizeCaptureDiv').css({visibility: 'hidden', position: 'absolute'});
window.setInterval(function(){
var div = $('#theFontResizeCaptureDiv');
var stored = parseInt(div.attr('c_height'));
if(isNaN(stored)){ // first run
div.attr('c_height', div.innerHeight());
}else if(stored != div.innerHeight()){ // changed
div.attr('c_height', div.innerHeight());
$('body').trigger('fontResize');
}
}, 200);
});
Here's a link to an article describing different methods to detect font resizing:
http://www.alistapart.com/articles/fontresizing/
You can use idea from this file https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js
I've incorported it in jQuery Terminal as jQuery plugin and use div with and css:
.font {
position: absolute;
font-size: inherit;
top: 0;
left: 0;
width: 1em;
height: 1em;
}
that way if parent element, that have position: relative or absolute, change font-size the .font element will change size and trigger resizer callback.
You can use this plugin like this:
var font = $('<div class="font"> </div>').appendTo(self);
font.resizer(function() {
// font changed size
});
where self is your parent element, if you need to detect this event on body you can use 'body' instead.