We Keep Coding

Unitegallery: How to change slider_scale_mode responsively so that slides show correctly on mobile screens?

I'm building a Unitegallery and I need to be able to change the way the slides fit on the screen when the window smaller than 768 pixels or screen is in portrait mode.
Currently I have the gallery set so that the slides are full-page (width:"auto", height:"100%",) that works fine on normal monitors and even in landscape mode on a phone landscape mode on phone but when i check on phone types in portrait mode using Firefox's Responsive Design Mode, the images are badly cutoff on the width. portrait mode on phone Please note that using gallery_height:"auto", or gallery_height:auto, breaks the gallery.
I need to set the slider_scale_mode from "fill" which gives the correct result on a normal monitor to slider_scale_mode: "fit" which stops the images displaying fully across the width on a monitor, but works fine on a portrait/phone screen. slider_scale_mode: "fit" on phone/portrait mode It strikes me that a media query of some kind may be the best solution to that.
I would note that Unitegallery does have an api that might help, but I also cannot figure out how to get that to work.
I did find this 4 year old question that may have an answer (with some editing of the gallery_theme: "grid", & theme_panel_position: "bottom", to "slider" and sslider_scale_mode:"fit",) but I don't even know how to actually incorporate the code into my page or into the current gallery script.
Currently, I have the following to display the gallery (and you can see it here: index_UNITE.html :
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#gallery").unitegallery({
gallery_theme: "slider",
gallery_width:"auto",
gallery_height:"100%",
gallery_play_interval: 5000,
gallery_pause_on_mouseover: false,
slider_scale_mode:"fit",
slider_enable_bullets: false,
slider_transition_speed:1000,
slider_enable_progress_indicator: false,
slider_control_zoom:false,
slider_enable_play_button: true,
slider_play_button_align_hor:"center",
slider_play_button_align_vert:"bottom",
slider_play_button_offset_vert:60,
});
});
</script>

jQuery window resize issue - height/width calculation

The issue is as such - I'm using jQuery to set the height of a container. I am using the plugin bgStretcher 3.1.2 to stretch an image to the dimensions of this container. In screenshot 1 the container I am reffering to is the area occupied y the brick wall image.
The problem arises when you resize the browser, every 2nd time the resize fires the calculations for height/width are off by 15px (I have no idea where this number comes from), creating a gap to the right and bottom of the container as visible in Screenshot 2. This screenshot also includes the console readings of the height of the container as returned by Jquery, indicating the issue. So when you resize the container jitters like hell and potentially ends up with the aforementioned gap.
I believe there is some sort of conflict happening between my code and the plugin as they're both bound to window resize.
This is the simple bit of code I'm using on my end:
win.resize(function() {
console.log(win.height());
conH = win.height()-68;
wrapper.css({
height: conH+"px"
})
}).resize();

function init_heght(element) {
var y = $(window).height();
$(element).css('height', y);
};
init_heght('#section-left-menu');

Can stellar.js readjust element offsets on window resize?

Is there a way to reinitialize stellar.js on browser/window resize so that the element offsets get readjusted?

First of all, it sounds like you might be having an issue with horizontal alignment (assuming it's a vertical site). If so, it's likely that you only need to disable horizontal scrolling:
$.stellar({
horizontalScrolling: false
});
If this doesn't solve your issue, Stellar.js has an undocumented feature that allows you to refresh the plugin.
For example, let's assume you used Stellar.js like this:
$.stellar();
You can refresh it with the following:
$.stellar('refresh');
So, to refresh it on resize, you could do something like this:
$(window).resize(function() {
$.stellar('refresh');
});
Hopefully this should fix everything for you.

After a bit of sleuthing, I've figured this one out. In my case, I have 'slides', which contain my stellar elements, and they are sized to full width/height of the viewport. I needed to resize them for tablet orientation change.
$(window).resize(function(){
winHeight = $(window).height();
$("#scrollWrapper > div").height(winHeight);
// Find out all my elements that are being manipulated with stellar
var particles = $(window).data('plugin_stellar').particles;
// Temporarily stop stellar so we can move our elements around
// data('plugin_stellar') let's me access the instance of stellar
// So I can use any of its methods. See stellar's source code
$(window).data('plugin_stellar').destroy();
$.each(particles, function(i, el){
// destroy() sets the positions to their original PIXEL values.
// Mine were percentages, so I need to restore that.
this.$element.css('top', '');
// Once the loop is finished, re-initialize stellar
if(particles.length - 1 == i){
$(window).data('plugin_stellar').init();
}
});
});
If it doesn't matter that the elements get set to their original pixel values for left/top, then you can just call destroy & init one after the other:
$(window).data('plugin_stellar').destroy();
$(window).data('plugin_stellar').init();
If you instantiate stellar on an element (i.e., $("#element").stellar(); instead of $.stellar();) then replace "window" with your selector.

I also noticed odd offsets on mobiles that may be caused by the way Firefox/Chrome resizes the webview when scrolling down, when the location bar becomes visible again?
The answer to your question is in a section of the documentation: "Configuring everything":
// Refreshes parallax content on window load and resize
responsive: false,
So, this is false by default. To enable this, use .stellar( {responsive:true} )
The real question is... why is this disabled by default? It seemed to fix the problem I was noticing, except for iOS.

jQueryui animation with inital undefined height

See the following fiddle:
[edit: updated fiddle => http://jsfiddle.net/NYZf8/5/ ]
http://jsfiddle.net/NYZf8/1/ (view in different screen sizes, so that ideally the image fits inside the %-width layouted div)
The image should start the animation from the position where it correctly appears after the animation is done.
I don't understand why the first call to setMargin() sets a negative margin even though the logged height for container div and img are the very same ones, that after the jqueryui show() call set the image where I would want it (from the start on). My guess is that somehow the image height is 0/undefined after all, even though it logs fine :?
js:
console.log('img: ' + $('img').height());
console.log('div: ' + $('div').height());
$('img').show('blind', 1500, setMargin);
function setMargin() {
var marginTop =
( $('img').closest('div').height() - $('img').height() ) / 2;
console.log('marginTop: ' + marginTop);
$('img').css('marginTop', marginTop + 'px');
}
setMargin();

Interesting problem...after playing around with your code for a while (latest update), I saw that the blind animation was not actually firing in my browser (I'm testing on Chrome, and maybe it was firing but I wasn't seeing it as the image was never hidden in the first place), so I tried moving it inside the binded load function:
$('img').bind('load', function() {
...
$(this).show('blind', 500);
});
Now that it was animating, it seemed to 'snap' or 'jump' after the animation was complete, and also seemed to appear with an incorrect margin. This smacks of jQuery not being able to correctly calculate the dimensions of something that hadn't been displayed on the screen yet. On top of that, blind seems to need more explicit dimensions to operate correctly. So therein lies the problem: how to calculate elements' rendered dimensions before they've actually appeared on the screen?
One way to do this is to fade in the element whose dimensions you're trying to calculate very slightly - not enough to see yet - do some calculations, then hide it again and prep it for the appearance animation. You can achieve this with jQuery using the fadeTo function:
$('img').bind('load', function() {
$(this).fadeTo(0, 0.01, function() {
// do calculations...
}
}
You would need to work out dimensions, apply them with the css() function, blind the image in and then reset the image styles back to their original states, all thanks to a blind animation that needs these dimensions explicitly. I would also recommend using classes in the css to help you manage things a little better. Here's a detailed working example: jsfiddle working example
Not the most elegant way of doing things, but it's a start. There are a lot more easier ways to achieve seemingly better results, and I guess I just want to know why you're looking to do image blinds and explicit alignment this way? It's just a lot more challenging achieving it with the code you used...anyways, hope this helps! :)

Android Web Development...Div width (more likely inner text) is changing in pixels based on device zoom

I developed an application that interfaces with an institution's emergency alert system. How it works is, when there is an alert, on all of the institution's web pages it displays a scrolling marquee at the top of the page that is put there by javascript using protoype and scriptaculous.
All of this works perfectly on desktop browsers (IE6-8, Chrome, Safari, Firefox, Opera). It also works well on iPhones. My only problem is the rendering on Android.
In researching the problem initially, I found a CSS Property for mobile devices (namely webkit) -webkit-text-size-adjust, that keeps mobile devices from resizing text when zooming and changing screen orientation. I have set this property to 'none' as stated by many articles.
Below is a picture of screen shots from an Android emulator. The left screen shot shows 1x magnification of the page. The spacing between each of the messages is as it should be. The right screen shot shows the page zoomed in. The messages overlap, as the text size is rendered differently, and the div width is not wide enough to contain the text.
http://www.themonkeyonline.com/spacing-example.jpg
Here is the code that places the div on the page:
var marquee = new Element( 'div', { 'id' : 'marquee' + marquee_counter } )
.setStyle( { 'display' : 'block'
, 'WebkitTextSizeAdjust' : 'none'
, 'fontSize' : '12px'
, 'lineHeight' : '25px'
, 'left' : $( marquee_container ).getDimensions().width + 'px' } )
.addClassName( 'marquee_text' )
.update( marquee_text );
$( marquee_container ).insert( marquee );
Is there something I am missing?
I will keep researching the problem in the time being. Thanks to everyone who read all of this.
A brief update...after more testing, it appears that the problem isn't necessarily based on zoom. It looks as if the problem is the viewport. I tested some really long text, and even zoomed all the way out, it has overlapped. It seems as though the div containing the text will not size itself greater than the window.
Here is an example of the code in action:
http://elliottr.www-dev.seminolestate.edu/alert/

Could you post a link to a demo-page where this problem occurs? I tried reproducing it on my Milestone, but couldn't.

Try setting a width to limit div's size (you will also need to set position: relative) and set overflow: hidden, so the text won't go beyond div's size