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
Related
I am trying to make a layout that has the following desired behaviour:
The red bar indicates where I want the sidebar to "stick". Currently I have a header and when the page scrolls the nav bar below it sticks to the top of the page. Then the header and the sidebar continue scrolling. When the sidebar is at the end of the length it sticks at the bottom. Then when the main content (consisting of individual posts) is at the end the footer comes and "pushes" the bottom of the sidebar up.
Then when scrolling back up, the same happens in reverse (preferably with the sidebar scrolling up until the top of it is in view and then sticks to the top below the navbar).
Currently I have almost all of the desired behaviour by using the sticky-kit plugin, but I can't make it so that the sidebar sticks to just below the navbar instead of the top.
A link can be found here if needed.
Current jQuery:
$(document).ready(function(){
$('nav').clone().addClass('scroll').prependTo('#wrapper');
$("#aside").stick_in_parent();
});
var nav = $("nav");
var pos = nav.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
$('nav.scroll').fadeIn(0);
} else {
$('nav.scroll').fadeOut(0);
}
});
Markup
<div id="wrapper">
<header></header>
<nav></nav>
<div id="aside"></div>
<div id="posts"></div>
</div>
Solved the problem by using the plugin's offset_top option. It didn't work initially when I had $("#aside, #posts").stick_in_parent(); but when I changed it to $("#aside").stick_in_parent(); it worked.
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 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.
Just a quick jQuery Mobile question.
I am working with ui-grid-a (for the basic case of 50/50 split) and I can populate and render the grid without issue. However in some cases there are fewer items than the content size and I was curious if it was possible to have the grid not wrap the content, but instead fill the available space in the div.
I have tried a few different methods.
1) Basic configuration no modification- the ui-grid seems to wrap the content inspection shows the height on the data-role=content is much smaller than the page. Thus the grid is "filling" the content.
2) As a result I then worked to expand the content. Using some JS fiddle code (below) I was able to set a height to the content (and inspection confirmed this) however the grid remains only a fraction of the content area
jQuery code in .ready() to adjust the content size to fill page
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
3) I tried binding this to the page load thinking that maybe the grid was calculated before the Javascript on ready fired. But no luck.
Any suggestions would be very welcome. I am not restricted to jQuery, I've tried many CSS options however those styles don't seem to help when using the custom jQuery Mobile UI (Content/Page)
Thank you in advance,
As requested a sample markup mirroring my own (I have some addition divs within this that are popups, but this represents the main content)
<div data-role="page" id="home" data-theme="b">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
Test
</div>
<div class="ui-block-b">
Test
</div>
<div class="ui-block-a">
Test
</div>
<div class="ui-block-b">
Test
</div>
<div class="ui-block-a">
Test
</div>
<div class="ui-block-b">
Test
</div>
</div>
</div>
</div>
First I want to give a big thank you to #Omar for his help in creating this solution.
There are a couple of components that factor into this problem. First the page load sequence as to when the element heights are calculated for header and footer and content. To account for this you can bind to the pagebeforecreate event:
$(document).bind("pagebeforecreate", function (e, data) {
$(document).on("pagecontainertransition", contentHeight);
$(window).on("throttledresize orientationchange", contentHeight);
});
Now I will discuss how to resize a grid dynamically
Next you must account for the screen size of the device and calculate the appropriate size for each of the row elements using the code
var screen = $.mobile.getScreenHeight();
You must then calculate the size of the content and the size available for that content
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
From here you can calculate the grid size
var numRows = 3;
$(".ui-content .ui-block-a .ui-btn,.ui-content .ui-block-b .ui-btn").height((content / numRows) - 32);
}
Next as you may have more than one grid
In this case you can add a descending selector to specify which grid you would like to resize
$("#GridID.ui-content .ui-block-a .ui-btn, #GridID.ui-content .ui-block-b .ui-btn").height((content / numRows) - 32);
Finally since this event binds to page only once you have to resize all grids at the same time, however the grids may be on different pages and you must select those sizes as each page may have different sizes of content
var header = $("#pageID .ui-header").hasClass("ui-header-fixed") ? $("#pageID .ui-header").outerHeight() - 1 : $("#pageID .ui-header").outerHeight();
var footer = $("#pageID .ui-footer").hasClass("ui-footer-fixed") ? $("#pageID .ui-footer").outerHeight() - 1 : $("#pageID .ui-footer").outerHeight();
var contentCurrent = $("#pageID .ui-content").outerHeight() - $("#pageID .ui-content").height();
var content = screen - header - footer - contentCurrent;
Here is a fiddle to demonstrate the full functionality
http://jsfiddle.net/m6bbbpg1/
Hopefully this will help someone else as this seems to be a fairly common task when creating generic mobile webpages
I could use a little help with the following issue. What I've got is a fairly basic one-page website. Stripped down, it's structure looks pretty much like this:
<div class="full_height" id="home">
<div class="container">
<div class="row">
<div class="span8">
CONTENT GOES HERE
</div>
</div>
</div>
</div>
This div structure repeats 5 times, with consecutive id's [home, second, third, fourth, fifth]. The problem I'm having is that I'd like the .full_height containers to be the same size as the window upon loading the site and resize along with the window size upon resizing. In addition, the div's size should never become any smaller than it's children.
My current attempt looks like this:
$(window).on("resize load", resizeWindow);function resizeWindow( e ) {
var newWindowHeight = $(window).height()-160;
var idSelector = ["home","second","third","fourth","fifth"];
for (var i = 0; i < idSelector.length; i++) {
var element = document.getElementById(idSelector[i])
if( element.offsetHeight < element.scrollHeight){
$("#"+idSelector[i]).css("height", "auto" );
}
else{
$("#"+idSelector[i]).css("height", newWindowHeight );
}
}
}
Now, the script above sort of does what I'm looking for but with some hick-ups.
i) Upon loading the site it only adjusts the div height to the windows size, not meeting the children requirement. It only does this upon resizing the window.
ii) While resizing the window, the div height will flicker back and forth between "auto" and window size. Depending on when you stop resizing it will take either of the two sizes as its height.
Any ideas?
You need to start with 100% height all the way up the HTML tree:
html, body, #full_height {
height:100%;
}