I have a Cycle2 slideshow that I want to dynamically resize on its own when the window width is above 580px. At 580px and less, I want it to take up the height of the screen, minus the header and pager.
Here is my markup:
<div class="header-container">
<div class="header"></div>
</div>
<div class="slideshow-container">
<div class="cycle-slideshow" data-cycle-auto-height="24:13" data-cycle-slides="> .slide-container" data-cycle-timeout=4000 data-cycle-pager=".pager" data-cycle-pager-template="blah blah blah">
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<div class="slide-container" style="background-image:url(yada/yada);"></div>
<div class="slide-container" style="background-image:url(yada/yada/yada);"></div>
</div>
</div>
<div class="pager-container">
<div class="pager"></div>
</div>
I have tried the following code:
//resize the slideshow to fit height of screen on mobile
if($(window).width() < 581){
$('.cycle-slideshow').css('height',$(window).height() - $('.header-container').height() - $('.pager-container').height());
}else{
$('.cycle-slideshow').css('height',$('.cycle-slideshow').height());
}
Which works fairly well, but at 580px and narrower, the slideshow is jittery when resizing the window because Cycle2 is constantly trying to insert it's own height.
My second solution is to set the height of .slideshow-container and add and remove the .mobile-slideshow class depending on if the window is less than 581px or not:
//resize the slideshow to fit height of screen on mobile
if($(window).width() < 581){
$('.cycle-slideshow').addClass('mobile-slideshow');
$('.slideshow-container').css('height',$(window).height() - $('.header-container').height() - $('.pager-container').height());
}else{
$('.cycle-slideshow').removeClass('mobile-slideshow');
$('.cycle-slideshow').css('height',$('.cycle-slideshow').height());
}
.mobile-slideshow has a height of 100% !important in mobile view only.
This works fairly well too, except the height of the slideshow is jittery above 580px because .mobile-slideshow is constantly trying to readjust to 100% of the container's height.
Is there a better way to do this? I'm trying to keep this functionality as simple as possible, but the jitteryness that comes with resizing elements with javascript is making it a hassle.
UPDATE:
Okay, some of you asked for a jsFiddle to demo what's going on: JsFiddle
As you can see, when the window is over 580px wide, Cycle2 resizes it based on the data-cycle-auto-height attribute. When it is under 580px, the JQuery script determines the height, but as you shrink or expand the window, it jumps back and forth between Cycle2's auto height and the JQuery scripts calculated height.
Finally found a solution. See the working fiddle http://jsfiddle.net/6azbw8re/4/
Modify your resize() function to following,
function resize(){
if($(window).width() < 581){
$('.header').html('JQuery script is determinging the height');
var newHeight = $(window).height() - $('.header-container').height() - $('.pager-container').height();
$('#cycle-slideshow').addClass("change-height");
$('head').append('<style> .change-height{ height:'+ newHeight+'px !important; } </style>');
}
else{
$('.header').html('cycle 2 is determining the height');
$('.change-height#cycle-slideshow').removeClass('change-height');
}
}
Basically, you need to add !important to the height property if you want it to override the cycle2 plugin's determined value.
Related
i'm trying to make my twitter widget (which is in its own div) the same height as another div (called mainslider). I've tried some stuff with JavaScript and JQuery but i'm not too experience with this.
An extract of my code is below:
<div class="mainslider" id="mainsliderid">
(SLIDER CODE HERE THAT I REMOVED)
</div>
<script>
var twitterheight = $('mainsliderid').height();
</script>
<div class="maintwitter">
<a class="twitter-timeline" href="https://twitter.com/twitter" data-widget-id="704258053198254080" height="twitterheight" width="100%">Tweets by #twitter</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","twitter-wjs");
</script>
</div>
So i solved the problem myself, and it was really simple.
Due to the nature of the slideshow i had, its height was set proportionally to its width. Because i am using proportions of the screen width to change both the twitter and slideshows width i could just use the unit 'VW' which is 1 % of the screen width and just had to multiply it by the correct value. Works fine now.
I am very new to JQuery. I am trying to create a webpage which can be responsive as per the screen size it is viewed on. Usually I do it with CSS but this time I think will have to try JQuery.All div's will have images so need to give them height else they wont display.
The issue is when the page is loaded the left side main image div jumps like half the screen size and then resizes to the height that is generated by JQuery. For eg: the default height of the div is some 396 px and as per the screen it is given 798px so it sizes first to 396 and then to 798 and it shows and looks very bad.
The layout is such that there is no header but has a fixed footer and hamburger icon is in the footer which min-height 50px. I am using Bootstrap.
I have not used any css for main div's as I am using col-md-9 and col-md-3. I have also attached the layout below
The code is below
-- no header--
<div class="row">
<div class="row" id="main-services">
<div class="col-md-9" id="left-services"></div>
<div class="col-md-3" id="right-services">
<div class="row btn-menu top-right-services" id="top-right-services"></div>
<div class="row bottom-right-services" id="bottom-right-services"></div>
</div>
</div><!--class="row" id="main-services"-->
</div>
--fixed footer with min height 50px, the main menu is here--
JQUERY
script(document).ready(function($) {
jQuery(window).on('load resize', function(){
//get windows height
var winWidth = jQuery(window).width();
var winHeight = jQuery(window).height();
var imgHeight= winHeight-50;
var onequater=(winHeight*1)/4 ;
var threequater=((winHeight*3)/4)-50 ;
jQuery('#left-services').css('height',imgHeight+'px');
jQuery('#right-services').css('height',imgHeight+'px');
jQuery('#top-right-services').css('height',onequater+'px');
jQuery('.right-project-menu').css('height',onequater+'px');
jQuery('#bottom-right-services').css('height',threequater+'px');
});
});
and I have also tried the code here resize div - jquery
layout image
Please help me
I have a div that expands downward when a user presses "more." The div's height is always auto, and expands to fit the content accordingly.
I need to keep "height:auto" so that the CSS remains responsive when the screen is resized, but I want the changing height to be animated...how should I do that?
In other words, when the user presses more and additional content is added to this div, I want the div's expansion to be animated, without specifying a certain height like 5em or anything.
<div id="expand">
<p>This is the div I want to expand</p>
<div id="hidden" style="display:none">
<img />
<img />
</div>
</div>
Got it! I need to use the slideToggle method on the instead of the Thanks!
jsBin demo <-- Resize the window. Works great.
You can do it simply like:
$('.more').click(function(){
$("+ div", this).slideToggle();
});
having:
<button class="more">MORE</button>
<div>Lorem Ipsum...</div>
I would use the HTML you have, but that's the price when you did not showed some code in your Question ;)
I don't know exactly how you set up your code, but jQuery
$(link).on("click", function() {
$(element).slideToggle();
});
might work for you.
Is that what you are looking for?
You can always:
var targetDiv = $('.targetDiv');
// get original Height
var originalHeight = targetDiv.height();
// get natural height
targetDiv.css({ height: 'auto'});
var naturalHeight = targetDiv.height();
// reset div to original height
targetDiv.css({height: originalHeight});
// animate to target height
targetDiv.animate({
height: naturalHeight}, {
duration: 1000,
completion: function() {
// set height to auto
targetDiv.css({height: 'auto'});
});
You can do this using jQuery. You just need to caluclate the height: auto absolute height.
JSFiddle: http://jsfiddle.net/CS2h9/
My slideshow's working correctly in every aspect except the fact that it's a total failure when it comes to adjusting to different screen sizes.
It works like it should on my big screen, but on my other one it doesn't adapt and adds a horizontal scroller.
I added width 100% to it but as I've found out the right way to do this is by a javascript code that adjusts everything dynamically. The problem is, I've never had any prior experience doing this and don't know where to begin. My page has jQuery loaded by the way.
This is the sample structure of slideshow:
<div class="featured-image">
<div style="overflow: hidden;height: 450px;"><img width="1950px" height="" alt="4" src="image.jpg"></div>
<!-- end .featured-price -->
</div>
I suppose a jQuery script to target '.featured-image img' dynamically and add the width and height to it would be the way to do this. Is there any way better than that or a simpler script? Any help is appreciated.
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
If you need it to adjust dynamically then you'll need to capture the resize event:
$(window).resize(function() {
var screenWidth = $(document).width();
$('.featured-image img').width(screenWidth);
});
I'm trying to optimise my website for different resolutions. In the center of the website I have a DIV that currently has a fixed size. I'm trying to make its size (and contents) change according to the size of the browser window. How do I do that?
This is my website if you want to take a look at its code:
http://www.briefeditions.com
If you resize the page the div will resize with it and on load of the page.
$(window).on('load resize', function(){
$('#div').width($(this).width());
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
$(document).ready(function(){
var windowHeight = $(window).height();
$('#divID').css('min-height',windowHeight+'px');
});
UPDATE
If you want that site will resize based on browser resize then use % instead of px
CSS:
html {height:100%; overflow:hidden}
body {height: 100%;}
I guess you need screen width and height for client(users) machine.
at onload of page get screen width & height and set those values to divs using jquery/javascript
var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;
check this for more info
Keep in mind that in your example iframe also has fixed size. You should also resize it to the parents width. In your example this would work:
$(window).on('load resize', function(){
$('#content, #content > iframe').width($(this).width());
});
Keep in mind that you must remove all margins, as well as absolute positioning like: top, left, position:absolute from you element styles.
I checked the code from the provided link in question.
Change width to 80% in #content style.
And in .wrapper change width to 100%.
You have used mainly 920px for width, so whenever you will resize window the control will not re-size. Use equivalent % instead of 920px;
You can do like this
var width = $(window).width();
$("#divId").width(width);