Develop Reference

Force a java script to fit within an element

I'm not a programmer, but I need to find out if there's a way to force a java script to fit completely within an element in my page, without showing a horizontal scroll bar. Sorry if I use the wrong terminology.
Below is a given code that I get from a third party, which I place on my page, to get a display gallery of items. The problem is that it too wide.
Is there a code I can add, to force the script to completely fit inside the screen (600px wide), so the horizontal scroll bar disappears automatically?
Below is the script:
'<noscript>
<p>powered by example.com</p>
</noscript>
<script id="scriptId_718x940_60872" type="text/javascript" src="//example.com/?scriptId=60872&bid=1301660001&format=718x940&bannerType=3">
</script>
I should add that this is a specific html element within my page, and that I'm trying to apply this code only to this element, not to the whole page or the whole site.
Thank you so much for your help!

600 what? I'm going to assume pixels. Add this to your CSS:
body {
max-width: 600px !important;
}
Added !important in edit

Add this to your html. It isn't very pretty but it should narrow the iframe that is displaying the coupons.
<style type="text/css">
div#ci_gallery {
width: 600px;
overflow: scroll;
}
</style>

Disable vertical scroll in mobile device only fory body (not also for div with overflow: auto)

I would like disable vertical scroll in all mobile devices and i found this:
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
that works very well...
but in this way i disable scroll also for a div (my menu) that has overflow: auto.
In dekstop browser to avoid anything with JQuery when $(window).scroll() add overflow: hidden to body. And in that way i don't have problem, but with native javascript code yes... i'm new in javascript.
So with jquery i was able disable scroll of body eccept div with overflow: auto, but not with that js code.
I hope you can help me and sorry for my english.

i solved always with jQuery:
when i want disable scroll add:
$("body").css({"overflow":"hidden",'position':'fixed'});
with body: fixed i'm sure that also with mobile device is impossible scroll the page (except div that has overflow: auto

you could disable the scrool on just the body part by making it the size of the screen and then make it so it doesnt scrol
document.body.addEventListener('touchmove', function(e){
document.getElementsByTagName('body')[0]. style .height = "100vh";
document.getElementsByTagName('body')[0]. style. overflow = "hidden";
});

Making Bootstrap modal resizable with jQuery UI issue

So I have a Bootstrap modal I've created and I am trying to make it resizable using jquery. I have the resize working horizontally but if you try to resize vertically its like the content inside of the modal is not contained within the element I am trying to resize.
I tried using the 'alsoResize' property on the .resizable() and included all the divs within the modal but that seems to cause other issues.
$('.modal-content').resizable({
alsoResize: ".modal-header, .modal-body, .modal-footer"
});
Here is my example: https://jsfiddle.net/p7o2mkg4/

You actually did everything right! But the default overflow behaviour of HTML elements is visible. So if the parent element's content gets overflowed, they break out of the modal and that doesn't look good! So, you need to set the CSS overflow property to scroll or hidden to fix breaking on small size. Try adding:
.modal-content.ui-resizable {
overflow: scroll;
}
This will ensure scrolling on overflow of the element.
Link to JSFiddle: https://jsfiddle.net/p7o2mkg4/1/

This works (css)
#myModal>div{
overflow-y: hidden;
overflow-x: hidden;
}

In case anyone stumbles across this like I have, make sure you have both jQueryUI.js and jQueryUI.css.
I thought having only jQueryUI.js was enough, but it turns out adding the stylesheet is why it wasn't working for me.

javascript : toggle scrolling only on document body

I need a toggle function for a dialog popup that locks page scroll, but permits the dialog to be scrollable.
I have tried CSS only with, but the code does not work in Safari iOS.
body{overflow:hidden; } //does not work in Safari iOS
So, i think I may need to use some JS magic for this to work. Any Ideas? thx.

You can toggle a class on the body to stop the scrolling: http://codepen.io/J_Mack/pen/zGMGyM
.stop-scrolling {
width: 100vw;/*can also use %*/
height: 100vh;/*can also use %*/
overflow: hidden;
}
Read before you use vw/vh: http://caniuse.com/#feat=viewport-units

Setting overflow-y: hidden; causes the page to jump to the top in Firefox

I've got some javascript which handles opening modal popups on my website, and it also sets the overflow-y property on the <html> element to hidden. In Chrome and IE this works as expected - the scrollbar hides, and the page behind the modal popup remains in the same scroll position. When the popup is closed, overflow-y is set to scroll and the page is in the same state and position as before.
However in Firefox, as soon as overflow-y is changed to hidden the page scroll position jumps to the very top, and so when the popup is closed the view has changed for the user - not ideal.
The problem can be seen on this jsfiddle
Is there any solution for this behaviour?

Don't use overflow: hidden on html, only on body.
I had the same problem but fixed it by removing html.
Instead :
$('body, html').css('overflow', 'hidden');
Do :
$('body').css('overflow', 'hidden');

I had the same issue
after checking it in the inspector window, I noticed that in the reset CSS, HTML is set to
HTML {
overflow-y: scroll;
}
you can fix this by setting it to
HTML {
overflow-y: initial;
}
If you don't want to touch reset CSS or just comment it
plugin and code is absolutely fine

change modal position from absolute to fixed:
#mymodal {
position: fixed
}

There are lots of bugs in the different browsers and the functionality is all over the place so be careful modifying styles on body and html tags.
To solve this issue i had to wrap the body's content into its own element and apply the scrolling restriction on it:
var $content = $('<div/>').append($body.contents()).appendTo($body);
$content.css('overflow-y', 'hidden');
This is the only way i've been able to get this working consistently across different browsers and devices.

I just encountered this problem. My fix was
/**
* Store the scroll top position as applying overflow:hidden to the body makes it jump to 0
* #type int
*/
var scrollTop;
$(selecor).unbind('click.openmenu').on('click.openmenu', function (e) {
// Stuff...
scrollTop = $('body').scrollTop() || $('html').scrollTop();
$('body,html').css({overflow: 'hidden'});
});
$(selector).unbind('click.closemenu').on('click.closemenu', function (e) {
// Stuff
$('body,html').css({overflow: 'initial'}).scrollTop(scrollTop);
});
This however doesn't solve the problem of what happens if a user resize the viewport.

Edit: I just saw your code and you used a link with href="#". That is most likely the cause. I'd suggest removing the href property or use a button for it.
You should consider that this might not be caused by the css itself.
In my case I opened my popup with a link: open popup
So what actually caused the jump to the top was the "#" in the href property of the link.
I removed it and added a noscroll class to my html and body tag:
.noscroll {
overflow: hidden;
}

Keeping the body height 100% from the beginning solved the problem for me.
body{
height:100vh;
overflow:auto;
}
body.with-modal{
overflow:hidden;
}

Use body tag instead of html.
JS Fiddle :- http://jsfiddle.net/SBLgJ/6/
JS Change:-
$(document).ready(function() {
$('#middle a').on('click', function(e) {
e.preventDefault();
$('body').css('overflow-y', 'hidden');
});
});
CSS Change:-
body {
overflow-y:scroll;
}
There is a reported issue for such behavior. (https://github.com/necolas/normalize.css/issues/71)