I need to have colorbox window with static width (it is actualy dynamic - depends on css specified width or image actual width etc...) except mobile version. I'm doing responsive website. When I resize browser window it always have fixed width, but when I'm on mobile the colorbox window is wider than broser window - it doesn't resize to fit the browser window screen. I apply this:
$(window).on('resize', function(){
$.colorbox.resize({width: '100%'});
});
This help, but if I return to non mobile device or when I resize browser window it stays at 100%. But at this point I want to return colorbox window to have static width as previous. Keep in mind that previous width is based on content width (image width) or css specified width.
Any idea how to do this?
Thanks
Why do you only want the colorbox to be 100% width when user resize the window? Notice what you did in your JS is not detecting whether user is on a mobile device.
It seems like you should use media queries instead. Read more here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Related
I am working with Bootstrap, and Flat UI. I am trying to have a header area span full width and the rest of the website fit inside a container thats 940px. The header area looks good in all non-mobile browsers, but when I view it using Safari and Chrome in iOS6 the header is not spanning full width. Can anyone help?
You can view the site here
The problem is that you have a fixed width of 940 pixels on content area of your website and your top banner is set to only take up 100% of the viewport. On a cellphone, 100% of the viewport is less than 940 pixels so you can scroll horizontally to see the rest of the content, but the top banner doesn't stretch further than the original 100% of the viewport.
Instead you may want to try to make your content area more responsive using media queries so that it is more narrow on smaller screens, or you could just give your content area a width of 100%, or you could give your banner a min-width of 940px.
I have SVG with width set to 2048px and I want it display in Opera Mobile (with possibility to scroll horizontally if it is bigger than screen), but for some reason Opera is always displaying the SVG with width = 800px and scaling down the SVG. This happens only on a real device (Samsung Galaxy Tab 8.9 - resolution 1280x800). This happen also in horizontal mode - in which screen width is equal to 1280px so the SVG is even SMALLER than a screen. On the other hand on the Opera Mobile emulator it has the width set to 1280px (still no scroll but it's better).
I also tried to place SVG in div with some fixed sizes but without success - the size of div is correct but SVG is scaled down...
Are there any way to render a page with horizontal scrollbar? Or workaround the bug which causes the SVG in horizontal mode set to the width of shorter dimension?
You can check the example here: http://www.pax.ndl.pl/test/svg_temp.xhtml
It would be helpful to get the taskbar's height programmatically when sizing windows and preventing them from covering the taskbar. I can hardcode the height in window size calculations for now, but would appreciate a better approach.
I ended up not needing the taskbar height value anymore, because there is a way to get the desktop height without the taskbar:
_myDesktopApp.desktop.body.dom.clientHeight
Before, I was using:
_myDesktopApp.desktop.getHeight()
Which gave me the combined height.
So to get the taskbar, if I ever need it, I can do:
_myDesktopApp.desktop.getHeight() - _myDesktopApp.desktop.body.dom.clientHeight
Ok .. so here's the scenario. I've got a WP7 silverlight app, that loads an image from the net. Now, these images will be taken from mobile devices, so they may be in portrait or landscape mode. Certainly not a square.
Is there any way to maintain the aspect ratio when I show these in a silverlight <Image> control?
I'm ok with either of two resolutions:
That the image shows up in its correct aspect ratio within a predefined box that I've defined in xaml
Or that the image is cropped into the square
The way silverlight was built, you can set the width OR the height on the image, it will automatically max out whatever property you set and calculates the other side of the image so that it keeps the aspect-ratio.
So, just set a width on the image and center or right,left,top,bottom align it. (do not stretch it).
Is it possible to resize a silverlight/flash video player on the fly? I would like to create a video where I can drag the bottom left corner to resize the player (maintaining aspect ratio) or at least eliminate the possibility of doing so I could move on to other methods.
Thanks in advance...
EDIT: // forgot to mention
Sorry forgot to mention, this would also mean that the actual video itself resizing right?
Silverlight: Absolutely. Just set the the Stretch property to Uniform and then alter either the Width or Height as you resize.
Flash: Yes, you can alter the size of a flash object through JavaScript. Using a YUI, jQuery, or a Mootools JavaScript library, this should not be too difficult to prototype.
Here is a posts which explains how to resize flash from within your flash code.
Proportional resizing - here is an example of that as well using jQuery.
I'm not sure if the same is true for Silverlight browser objects, although I'd be surprised if you couldn't do the same.
This is a CSS solution for resizing videos on the fly.
The video can even resize itself according to the user settings if it is styled using EMs. This demo shows how a video resize itself according to the width of the user agent.
Here is an example of the silverlight scaling. This photo retouching and restoration site has a couple of silverlight controls that scale with browser resizing. There is quite a nice photo gallery that shows the photos before and after the retouch.
JWPlayer
As of version 5.3 they added a resize() method to the javascript API which allows you to resize a player - and all the control bar etc. will resize correctly too.
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference
resize(width, height) Resizes the
player to the specified dimensions.
width:Number: the new overall width of
the player.
height:Number: the new
overall height of the player. Note: If
a controlbar or playlist is displayed
next to the video, the actual video is
of course smaller than the overall
player.