I have two divs. When the resolution is large enough, both divs are shown next to each other. But when the resolution is too small it only shows one of the divs, but I can toggle between them with two buttons appearing at this resolution.
So my HTML is just like this:
<div id="buttons">
<p>LEFT</p>
<p>RIGHT</p>
</div>
<div id="left"> CONTENT </div>
<div id="right"> CONTENT </div>
The JavaScript used for the toggle is just:
<script>
$(function() {
$('#buttons> p').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
});
</script>
Basically everything works fine. When the resolution is too small, the buttons pop up, and it is divided into one div at a time, and when the resolution is large enough they are next to each other.
However, if I change the width of my browser window, and toggle between the two divs, and then go back, one of the divs still has display: none resulting in it not showing when there has been toggled.
I know one might argue that people don't change resolutions on phones, and therefore this shouldn't be a problem. But somehow it annoys me a lot. So I was wondering if there was some way to tell it, that if above a certain resolution, BOTH divs should have the display: none or inline style removed.
You could add a resize listener to show both elements if the size is sufficiently high:
$('#buttons> p').click(function() {
var ix = $(this).index();
$('#left').toggle(ix === 0);
$('#right').toggle(ix === 1);
});
$(window).resize(function() {
if (Number($(window).width()) > 600) $('#left, #right').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
<p>LEFT</p>
<p>RIGHT</p>
</div>
<div id="left"> CONTENT1 </div>
<div id="right"> CONTENT2 </div>
use media queries for setting different css based on screen size. PFb sample. you can also add display style as css as None or Block based on screen width.
body {
background-color: red;
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Related
On my html/css/js webpage I have a row of 5 pictures such as this:
They have varying aspect ratios. The html looks like this:
<div id="row1">
<img src='img1.jpg'/>
<img src='img2.jpg'/>
<img src='img3.jpg'/>
<img src='img4.jpg'/>
<img src='img5.jpg'/>
</div>
I would like to ensure that they always take up as much horizontal space in their container (here row1) as they can, under the given conditions:
their height is the same for all photos in the given row
they don't get stretched
they don't get cropped or overlap
In short, their height must be tweaked so that their combined width will fill up their parent container's width.
I was looking into css flexbox and masonry type library, but I didn't manage to find a successful implementation.
I would rather like a pure CSS solution, but a simple javascript would be nice. My current solution involves calculating the row height in js from the pictures' widths, and updating the style for each. (It is not very scalable, nor reliable, and quite jerky as the js updates the row heights. I expect to have thousands of these rows on the page)
We don't have to do the calculation for every image - the system will do that for us in the sense if we set the row with the images at row height (any height will do) we can get the width. This gives us a width/height ratio.
Then knowing the final width we want the row to be we can calculate the final height.
let row = document.querySelector('#row');
function sizeRow() {
row.style.height = '100px'; // any height will do - we just want to get a proportion
row.style.height = 'calc(var(--requiredWidth) * ' + 100 / row.offsetWidth + ')';
row.style.opacity = 1;
}
window.onload = sizeRow;
window.onresize = sizeRow;
* {
margin: 0;
padding: 0;
}
#row {
--requiredWidth: 100vw;
white-space: nowrap;
display: inline-block;
opacity: 0;
/* just so we dont see a flashing while resizing */
font-size: 0;
/* remove white space between images */
}
#row img {
height: 100%;
display: inline-block;
}
<div id="row">
<img src='https://picsum.photos/id/1015/200/300' />
<img src='https://picsum.photos/id/1016/300/300' />
<img src='https://picsum.photos/id/1018/300/200' />
<img src='https://picsum.photos/id/1019/1000/200' />
<img src='https://picsum.photos/id/1021/200/1000' />
</div>
I have 2 sections:
<section class="notes animate" id="need" style="background:#fff; height:900px; padding-top:70px;">
<!--stuff --->
</section>
<section class="focus" id="need" style="display:none;">
<!--stuff --->
</section>
I want to display the second section when window is lowered to width less than 1043px. And hide the first section by display:none
Update:
How can I remove id attribute of first section, when width is less than 1043?
You should use CSS media queries. You can read more about it here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
For example:
#media only screen and (max-width: 1043px) {
section.focus {
display: block;
}
}
Firstly you cannot use same ID for more than one div. So change the id of one div.
And to hide the second div and show the first div:
Use CSS:
#media only screen and (max-width: 1043px) {
.focus {
display: block;
}
.notes {
display: none;
}
}
In response to your requirement for removing the ID attribute, try the following JavaScript. It can only do it once however, and if you are interested in performance you should consider investigating debounce/throttle for the resize handler. (http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/)
$(window).on('resize', function() {
if($(window).width() < 1043) {
$('.notes').removeAttr('id');
$(window).off('resize');
}
});
However, the media queries answers are the correct approach to show/hide based on screen width.
I made a div which has a background image of a face, I have designed div which contains a paragraph, 2 buttons and an input box.
I know this question has been asked quite often however my situation is different, I'd like for my div with the background image of a face to be clickable so that the div containing everything else slides out from the left.
What is the best method to do this?
HTML
<div id="image"></div>
<div id="container">
<p>I like nutella and croissants</p>
<input id="message" placeholder="type...." required="required" autofocus>
<button type="button" id="send">Send</button>
<button type="button" id="close">Close</button>
</div>
CSS
div#image { background: url(http://i.imgur.com/PF2qPYL.png) no-repeat; }
JQUERY
$(document).ready(function(){
$( "#image" ).click(function() {
jQuery(this).find("#container").toggle();
});
});
Using the article link posted by Raimov (which I actually came across in a Google search before realize he posted it as well ;), we can use jQuery to animate the width when the toggling element is clicked. Remember that a background does not add size to an element, so the toggle with the background image must have a height attribute set. Also, if you have long lines of text in the form, you'll have to wrap them yourself or use another method from the article.
http://jsfiddle.net/iansan5653/wp23wrem/ is a demo, and here is the code:
$(document).ready(function () {
$("#image").click(function () {
$("#container").animate({width: 'toggle'});
});
});
and this CSS is necessary:
div#image {
background: url(http://i.imgur.com/PF2qPYL.png) no-repeat;
height: 36px;
/*height needed to actually show the div (default width is 100%)*/
}
#container {
white-space: nowrap;
overflow: hidden;
}
I created a jsFiddle for you, where after clicking on img, the form hides to the left.
$("#image").click(function() {
var $lefty = $(this).children(); //get the #container you want to hide
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() : 0
});
The resource was taken from:
Tutorial how to slide elements in different directions.
Im having trouble with the latest version of LayerSlider. I have used everything from the full-width responsive demo and read through all the options but when I resize my browser, the height does not update. To make this clearer the image itself scales but the container's height stays the same. In the documentation it says that you must give the container a height.
My code below:
HTML:
<div id="LayerSlider" class="Slider">
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
<img src="/Assets/Images/Layerslider/Banner1.jpg" class="ls-bg" alt="Slide background"/>
</div>
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
<img src="/Assets/Images/Layerslider/Banner2.jpg" class="ls-bg" alt="Slide background"/>
</div>
</div>
jQuery
$(document).ready(function () {
$('#LayerSlider').layerSlider({
responsive: false,
layersContainer : 1178,
responsiveUnder : 1500
});
});
In the documentation is says you must use responsive: false if you want to use responsiveUnder which makes it responsive under a specified width.
Link to LayerSlider http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/
All you need to do is put the container css inline.
<div id="LayerSlider" class="Slider" style="width:100%; height:427px;">
use jquery to change the #layerslider height when window resize.
<script type="text/javascript">
$(window).resize(function() {
var newHeight;
newHeight = $(window).width();
newHeight = newHeight / 2.25
newHeight = parseInt(newHeight);
// alert(newHeight);
$('#layerslider').css('height', newHeight);
});
</script>
I had the exact same problem. In my case, it was due to a duplicate of css styles, when we migrated the site to liferay cms (which adds all sorts of html). We restructured some of site and copied and pasted the layerslider.css into the document (so we could edit it without having to deploy the theme) - but never removed the original css file. Removing the styles is what fixed the height calculation. Apparently the javascript uses the css styles you set for height and width to calculate the image, text, and parent container sizes.
Hope this helps.
I used css break point to fix this height issue of the layer Slider. Use the layer slider's css editor.
#media only screen and (min-width:800px) and (max-width:960px) {
.ls-wp-fullwidth-container {
height: 65vh!important;
}
#media only screen and (min-width:768px) and (max-width:800px) {
.ls-wp-fullwidth-container {
height: 50vh!important;
}
}
#media only screen and (min-width:600px) and (max-width:768px) {
.ls-wp-fullwidth-container {
height: 42vh!important;
}
}
#media only screen and (min-width:480px)and (max-width:600px) {
.ls-wp-fullwidth-container {
height: 33vh!important;
}
}
-icodefy
I am developing a jquery/PhoneGap application. I have been trying hard to get the buttons behave the way I want to. In short I am trying to achieve the following:
I put a set of six Jquery-Mobile buttons (mini, normal or button-group).
The above set needs to be in one horizontal line so I have put them in a div.
The numbers of buttons and its text dynamically changes, so I need a CSS/JS trick that allows me to resize the button size and text based on the div/screen size. When I started with Jquery mobile (two weeks ago), I thought that this will be a basic functionality :) but alas !
Some code that I am trying right now is:
//TO CREATE BUTTONS
for(var button_id=0; button_id < window.g_maxLength/2; button_id++){
var bt_id= "<button class =\"tile\" data-theme=\"e\" data-inline=\"true\" data-mini=\"true\" id =\"button_tid"+button_id+"\";>.</button>";
$("#buttoncontainer1").append($(bt_id));
}
//HTML
<div id="tiled" align="center">
<div data-role="controlgroup" data-type="horizontal" id="buttoncontainer1">
<!-- Button will be added by JS-->
</div>
</div>
//CSS
#tiled {
align:center;
height:23%;
position:absolute;
text-align :center;
padding: 1px;
width:90%;
top:73%;
margin-right:4%;
margin-left:4%;
background-color:#b0e0e6;
border-radius: 10px;
border-width: 3%;
border-style:double;
Right now what I have is works fine on small screen devices, but as soon as I open my app in large screen device the buttons look very small with lot of empty spaces. Any help here will be appreciated !!
PS: Also used media queries - but they somehow do not work on jquery-mobile.
#media (min-width: 500px) {
html { font-size: 120%; }
}
Here's a workaround for auto-adjust width and font-size of buttons.
Demo: http://jsfiddle.net/Palestinian/UYa4Y/
// Number of buttons
var buttons = $('[data- role=controlgroup]').find('a').length;
// Parent div width
var btn_width = $('#tiled').width() / buttons;
// Remove left/right button padding
$('.ui-btn-inner').css({
'padding-left': 1,
'padding-right': 1
});
// Set button new width
$('.ui-btn-inner').width(btn_width - 4);
// Adjust font-size for each button based on text
$('.ui-btn-text').each(function () {
while ($(this).width() > $('.ui-btn-inner').width()) {
var font = parseFloat($(this).css('font-size')) - 1 + "px";
$(this).css('font-size', font);
}
});