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 Animate Width freezes iPad

Using this code to toggle the width of <div class="artists"></div> will freeze the browser on an iPad. Is there a work around for this? I use the latest jQuery
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
$("a:nth-child(4)").click(function () {
$(".artists").animate({width:'toggle'},0);
$('.blur').toggleClass('blurbody');
});
</script>
It works correctly on a normal computer browser, just not on an iPad (Chrome or Safari). You can view the site at saint57records.com and click on the artists icon on the left.

You can use the following jquery function after your selection:
$("#targetElement").toggle();
Since you wish to change between invisible and 100% width, this should work !

To toggle the width you should so something like this:
<script>
$("a:nth-child(4)").click(function () {
var targetWidth = (someBoolean) ? '100px' : '300px';
$(".artists").animate({width:targetWidth},0);
$('.blur').toggleClass('blurbody');
});
</script>

Control the way elements load according to device (mobile/tablet,etc)

I need to use Javascript/jQuery to control the way my elements load, meaning if I am on iPhone or Android mobile and for iPad and tablets. I dun wanna use CSS media queries, I need it in Javascript or jQuery. Any hints or links to read would be nice, thanks

You could detect device width and change settings / elements from there ?
var viewSize = $(window).width();
/* if is below 481px then it might be a phone :) */
if (viewSize < 481) {
//something special
}
...

I used screen.width and it worked fine. Just make sure that your script is right before the end of the page to guarantee that all elements are loaded. Here is the code:
<script type="text/javascript">
$(document).ready(function() {
if ((screen.width>720)) {
document.getElementById("photos").style.marginLeft="110px";
document.getElementById("videos").style.marginRight="100px";
}
});
</script>

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

Issues with dynamically setting style.overflow in Firefox

I am working on a website for a client, and we have the following requirements:
When the browser width is greater than 960px don't show a scroll bar.
When the content is wider than the browser but the browser width is greater than 960 don't show the scroll bar
If the browser is 960px don't show the scroll bar when it is needed.
I have the following javascript that works perfectly under ie, chrome, safari and opera, but dies in FF by forcing the page to "reload" client side (it redraws all elements).
function sizeHandler(myWidth) {
if (myWidth > 960)
document.documentElement.style.overflowX = 'hidden';
else
document.documentElement.style.overflowX = 'auto';
}
Because everyone seems to question the content, here is the HTML:
<body>
<div id="flashContent">
<object...>
</object>
</div>
</body>
<script...>$(document).ready(sizeHandler(getWidth()));</script>
Ignore getWidth(), it works, but I don't feel like adding another 15 lines to this ;). The object tag is a flash object.

Try it with document.body instead of document.documentElement. Setting CSS properties on the HTML element can give unexpected quirks.