This overlay seems to be the only overlay plugin that works within my schools wonky template... but the problem is that when the browser is resized the shadowbox resizes too, clipping the contents inside. I want it so the box stats fixed and if the browser does get smaller the browser will have scrollbars.
I know it's been modified before, but i dont know where to start. I cant even find an unminified version of the .js file.
Thanks
Hey I was having this exact same issue - I found that you can force it to the height you want by putting this in the shadowbox.css file:
#sb-wrapper { height:560px !important; }
#sb-wrapper-inner { height:560px !important; }
And in your HTML markup, make sure you define the height and width in the rel attribute of the a tag:
Your Link
I don't know where to start either with the JavaScript file - CSS it is.
Look for the K.onWindowResize function in the last lines of the shadowbox.js script and modify it as follows:
K.onWindowResize=function(){
if(!doWindowResize){return}setSize();
var player=S.player, dims=setDimensions(player.height,player.width);
//edited by gabriel esquivel 11/15/10
//adjustWidth(dims.width,dims.left);
//adjustHeight(dims.innerHeight,dims.top);
animate(wrapper,"top",dims.top,0);
animate(wrapper,"left",dims.left,0);
if(player.onWindowResize){player.onWindowResize()}};
Assuming you're using the code found at http://www.shadowbox-js.com/, if you want the images to always be of a certain size (let's say a height of 600px for the purpose of this example), adding the following to your CSS should do it:
#sb-wrapper-inner { height:600px !important; }
If there's not a static height you can force them to, it's more difficult than I can figure out on my coffee break.
Just put this in the init
Shadowbox.init({
viewportPadding:-1000
});
Then the pading never gets to negative and so does't resize.
Related
Evernote places a max-width limit on web view content, and I have identified its location in Chrome developer tool(F12). Evidence: Unticking the checkbox beside "max-width" will stretch the table to full window width.
My question is, how can I remove that css statement with JavaScript code?
I have tried this:
document.getElementById("container").style.removeProperty("max-width")
but in vain.
The above web page can be reached at http://www.evernote.com/l/ABXYD6q6bM9MyaAfRs78hQnq6VMINfVJODg/
Given that this statement isn't set as inline style, you won't be able to remove it.
However, you could change its value and set it to none by adding an inline style declaration, which will override the current value.
Demo:
var elem = document.getElementById('container');
elem.style.maxWidth = 'none';
Not sure how webview works, but could you try using javascript to add a new class to it that added a max-width of 100%?
document.getElementById("container").classList.add('no-max-width');
then in the styles.css put
.no-max-width {
max-width: 100%; }
If that's not possible, then try
document.getElementById("container").style.maxWidth('100%');
Though I sometimes have trouble with .styles so not sure if that is exactly right, plus I've read it's better to add classes rather than play with css styles in JS, but also not sure how accurate that is.
I have been trying so many things to make Ziggeo video responsive. But all I see is fixed width. What I need is Ziggeo to be 100% width and view correctly on various mobile devices.
This is example code:
<ziggeo
ziggeo-video="_sample_video"
ziggeo-width=320
ziggeo-height=240>
</ziggeo>
Width and height is specified in pixels and I don't appear to be able to set percentage.
Link to example: https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods#javascript-version=v1
Does anyone know how to make Ziggeo fit 100% width via CSS, HTML or JavaScript please?
Thank you
Actually there is responsive parameter - https://ziggeo.com/docs/sdks/javascript/browser-integration/parameters#javascript-revision=v1-stable&javascript-version=v1
It would look something like:
<ziggeo
ziggeo-video="_sample_video"
ziggeo-responsive>
</ziggeo>
I do suggest however checking out the v2 version of the player and recorder instead of v1 for which the code above is for. The difference is that v1 is based on flash and JWPlayer, while v2 is written from bottom up by Ziggeo and is far better at being mobile responsive.
Same code for it would look like this:
<ziggeoplayer
ziggeo-video="_sample_video"
ziggeo-responsive>
</ziggeoplayer>
Alternatively, with v2 you could also do some cool things like the following:
<ziggeoplayer
ziggeo-video="_sample_video"
style="width:100%; height:100%">
</ziggeoplayer>
The code will ignore the additional parameter that you add so the style attribute would stay there.
Recorder would look similar, with <ziggeorecorder> being used instead of <ziggeoplayer> and it supports responsive parameter as well.
I personally do suggest using the responsive option and to use the style or class, etc. to add additional formatting to your code.
PS: The page you have mentioned (https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods) has a dropdown at the top right corner that can help you switch the v1 to v2 and the other way around.
UPDATE (after posting):
- it is good to mention that there are some browser specific styles that can make some elements have additional padding and margin applied, as well as your own CSS code, so if you see some whitespace around it, it is good to check out if there are any CSS codes that need to be added/altered, or the CSS reseted.
Give this a try:
$( window ).resize(function() {
var height = window.innerHeight;
var width = window.innerWidth;
$('#videoElementId').prop('ziggeo-width', width);
$('#videoElementId').prop('ziggeo-height', height);
});
I'm sure there would be an API within Ziggeo to help do this without setting the properties, but the code above should help you get started.
Well as the title says.
Right now each signature (on a forum) div got:
<div style='height:Xpx;overflow:scroll'> (X = depends on each signature due to the image heights shifting)
And I want to change the height so I don't have to scroll through each signature, but showing all images directly.
Here is the right part of a signature:
http://puu.sh/4xOW7.jpg (couldn't use the website-image-feature due to not having 10 rep)
And I tested around and managed to make it like this:
http://puu.sh/4xPar.jpg (it's much more further down)
and like this..
http://puu.sh/4xPco.jpg (couldn't post more than 2 links -_-)
I also tried to remove the overflow:scroll, change it, and so on. (also tried removing height: etc)
But I just can't get it to simply remove the scrollbar - making all images show normally. I'd really appreciate help! :)
instead of style="height:250px;overflow: auto;"
you need style="display:inline;"
jQuery's .width() method doesn't seem to account for scroll bars. This is problematic for me, since I'd like to set the width of some children to equal the width of their parent. I used jQuery similar to the following:
$('#contentDiv').width($('#containerDiv').width())
In this example, #contentDiv is the element I'd like to size, and I want to set it to have the width of #containerDiv, which is its parent element. My problem is that this cuts off the side of #contentDiv, as seen in this fiddle.
In my actual code, I have several elements that I'm sizing with jQuery, which all need to fit in the scrollable div, so just setting the css of #contentDiv to 100% is not an option. What's the best way of dealing with scroll bar widths of divs in jQuery?
The best solution I found while working around this solution is this:
http://chris-spittles.co.uk/?p=531
jQuery is all powerful and everything but sometimes a small dash of native JS is all you need to render pixel perfect pages... I hope you will find this solution helpful!
UPDATED:
None of the jQuery width-finding methods account for the scroll bar. In my original example, using .innerWidth(true) LOOKS like it works, but only because it returns and object, which causes width to fail and the inner contents size themselves to fit in the available space, because the example wasn't very good. However, it's possible to write a function to compute the available space in a div with a scroll bar in it, which can then be used to position the contents as you wish.
To write that function, I took advantage of the fact that, when a div is appended to a div with a scroll bar in it, it takes up the full available width (i.e. the inner width of the parent minus the width of the scroll bar).
The function looks like this:
function noScrollWidth(div){
var measureDiv = $('<div id="measureDiv">');
div.append(measureDiv);
var width = measureDiv.outerWidth();
measureDiv.remove();
return width
};
I then use this to size my content div:
$('#contentDiv').width(noScrollWidth($('#containerDiv')));
Working fiddle.
Try this:
$('#contentDiv').width($('#containerDiv')[0].clientWidth)
For more information about that solution, see this StackOverflow answer.
Another approach I'd try is setting both elements' box-sizing property to 'border-box', and see whether setting your contentDiv's width to 100% then works the way you want.
Now that fewer projects worry about crufty old browsers anymore, 'border-box' can make things easier to work with. Be sure to test multiple browsers on multiple platforms, though, because I'm not sure they all handle scrollbars the same way.
function allowscroll()
{
if (screen.width<1200){document.getElementById('html').style.cssText='overflow-x: scroll !important;';};
}
<body onLoad="allowscroll();">
hi there, the above code works for any element, e.g. subbing "html" for "wrapper", but how is it possible to edit the css applied to html? Basically, because of overflow:hidden not inheriting in ie7 - which causes a big empty righthand margin and horizontal scrollbar (only in ie7, ie 8 compatibilty), ive set the css to
html {overflow-x:hidden;}
this is the only way to fix it without losing necessary functionality, e.g. overflowed graphics visibilty.
and this is all well and good, however, lower screen resolutions need the horizontal scroll just to see all of the page itself, so I'm attempting to restore the horizontal scrollbar for those users - and restore the big right margin for anyone who happens to be, for example ie7 1024 by 768 - I can live with that (unless anyone happens to have a superdupa solution).
document.getElementById('html').style.cssText='overflow-x: scroll !important;';
So the above code works for editing the CSS of any element, but not the CSS of the html.
I've also tried:
function allowscroll()
{
if (screen.width<1200){document.getElementByName('html').style.cssText='overflow-x: scroll !important;';};
}
and
function allowscroll()
{
if (screen.width<1200){window.style.cssText='overflow-x: scroll !important;';};
}
I would really appreciate any help, - if it helps in seeing the solution, the link where this applies is: delight design, basically, its how to take out:
html {overflow-x:hidden;}
from the css when in lower screen resolutions...
many thanks
Will
There are a bunch of different ways to get the html element:
document.documentElement
document.getElementsByTagName('html')[0]
document.body.parentNode
But in all honesty, there must be a better way. I don't have time right now to track down what exactly happened here, but from what I can tell, adding position:relative to whatever needs the overflow might help.
Try document.getElementsByTagName("html")[0]
Note I just edited the answer as getElementsByTagName returns an array. You want the first element in that array.
Just use the documentElement:
document.documentElement
It has full browser suport.