Enabling browser scroll bars after window.open with scrollbars=no - javascript

I have an existing link which opens up a webpage in a new window with scrollbars disabled as follows:
<a onclick='window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");' href='#'>Click to pop up without scroll bars</a>
For the sake of argument, I cannot change this window.open() code. I need to enable scroll bars after the window has been opened.
This works in IE using the following code:
<script type="text/javascript">
onload=function()
{
enableScrolling();
}
function enableScrolling()
{
document.body.scroll = "yes"; // IE
}
</script>
However this does not work in FireFox or Chrome.
According to this page, the following code should work for FireFox and Chrome but it does not (perhaps this worked in earlier versions?)
document.documentElement.style.overflow='scroll';
document.body.style.overflow='scroll';
Does anyone know if it is possible to enable scroll bars in FireFox and Chrome after the window has been opened with scrollbars disabled?

Just like Nikunj Soni said, setting a height attribute to your body tag will help you solve the problem in every browser. What I will do differently is the following:
Instead of setting a fixed height, I would set height:100%, which enable you to open the popup also in different sizes than the original.
<body style="overflow:auto; height:100%;">
The rest of your HTML code
</body>
This is also not the best solution, but you are actually removing the restictions you get from the link.
Hope you find this answer helpful.

Since you add js for IE I assume you can change the way displayed page works.
In that case I would try to put the contents of the opened window in div, and set its style to something like: height: 200px; overflow: auto;

Actually I tried with different browser, If you have fixed requirement about height, what you can do is wrap all the content of example.html in a specific div with the attached css like overflow:auto;height:200px. I will show you the whole code.
<body>
<div style="overflow:auto;height:200px;">
Your HTML code
</div>
</body>
put it into example.html. Height you can get from your code window.open("example.html", "name", "resizable=1,scrollbars=no,width=500,height=200");.
This is not the the actual solution but it will solve your problem in every browser.
Hope this help.

Related

Refresh div vs entire page on window resize

I have some code that doesn't refresh when the window gets resized...so if it's big even if I have the size set to 100% it doesn't auto-adjust. The original solution I thought about was to refresh the content, which definitely works, however on mobile every time I scroll the page up and down the page gets refreshed - so I can't even browse the site. It's more of a nuance than a fix. I was hoping there was a way to tweak what I'm using to just refresh the div instead of the entire page.
The div code I have looks like:
<div class="fb-page" data-href="https://www.facebook.com/woodsyhollow" data-width="800" data-hide-cover="false" data-show-facepile="false"></div>
I can throw an ID on the div, so if there was a way to target this specific div, I think that's all I need.
The code for the refresh looks like:
<script>
window.onresize = function(){ location.reload(); }
</script>
Any help is appreciated!
Thanks,
Josh
You can use CSS media queries for a simple fix .
Try something like;
#media screen and (max-width:600px) {
div data {
width: 200px

Responsive Image Map-Plugin does not work

I have some problems to create responsive image maps with Matt Stows jQuery Plugin. I followed all the advices, but the image maps are still not responsive. I hope you can help. These are the instructions (Full page: https://github.com/stowball/jQuery-rwdImageMaps):
If possible, add correct, unitless width and height attributes to your image map images. You can override these in CSS to make them responsive.
Add a link to jQuery in your page, preferably at the bottom just
before the closing </body>
After jQuery, either in a block or a separate file, call:
$('img[usemap]').rwdImageMaps();
That's my code, I set a fixed width and height which is overwritten in CSS.
<div class="banners">
<img src="wcf/images/blueTemptation/logo2.jpg" style="width: 980px; height: 80px; display:block;" alt="banner-x" usemap="#banner-y" />
<map name="banner-y"><area shape="rect" coords="560,1,765,79" href="http://www.filmfutter.com/" alt="Kgergrfr" title="Filmfutter Startseite">
</div>
at the bottom of my php I placed this:
<script src="https://raw.github.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
In case you wonder, I changed the script source to a URL because I wasn't sure about the right path on my server, but that should not be the issue.
So, I did not manage the plugin to get working and I still wonder because obviously I did nothing wrong, but I used another plugin instead, and finally it works properly. In case some others have the same issues, David Bradshaw's library does exactly what I want and resizes image maps the way they should: https://github.com/davidjbradshaw/imagemap-resizer
I had the same issue, it turns out that I was using JQuery v1.8.3, when I updated it to JQuery v1.9, that seemed to do the trick.
Maybe it's a JQuery versioning problem?

Reset window.open specs in popup window

I use window.open() to create a window without scrollbar
window.open("...url...", "...blah...", "width=650, height=350, resizable=yes, scrollbars=no")
How do I reset this "scrollbars=no" to "yes" to enable scrollbar in the popup window?
I try to use css "overflow:scroll" but not work for me.
--
Edit
I have added width and height to the specs, and it still not work.
When I search DOM tree, I found there is "scrollbars.visable = false".
I try to change it to true directly by using Firebug, and the scrollbar is visable and works fine.
However, it is not work when I use javascript to change it.
<script>
window.scrollbars=true; // this is not work
</script>
Specify scrollbars=1 and specify width and height, that way the scrollbars would show when the content is larger than the specified window width and height.
window.open("...url...", "...blah...", "scrollbars=1,width=600,height=600")

jQuery show div with child iframe (wysiwyg text editor)

I have a "display: none" div with a child wysiwyg editor. I have had this problem with both jHtmlArea and CKEditor, so i believe this to be an iframe issue. For this example, I am using jHtmlArea. Without the "display: none;", everything works fine. When hidden however, I "show" the div with the child editor, and then it doesn't fully load. I had researched this issue some time ago, but couldn't find a solution. I believe I remember finding something that said that hidden iframes had some kind of reloading problem, but can't find the post. Anyone have any suggestions? Thank you ahead of time for your time and expertise!
<script type="text/javascript">
$(document).ready(function () {
$("textarea").htmlarea();
});
</script>
<div id="container" style="display: none;">
<textarea></textarea>
</div>
Show me!
I have already tried this solution to no avail.
One workaround is to set the display to block and hide() it through javascript. so iframe would take up the full width that is available when it loads. see this jsFiddle
If you can afford it, use the visibility:hidden style instead of display:none. The drawback is that the hidden element will fully occupy its document area even though none of its contents are shown until visibility:visible is set.
Have a try at this jsFiddle, based on the answer by #Siwei.
EDIT: updated the jsFiddle to make the editor container have 0 vertical pixels until the user clicks Show me.
Thanks to both #Humberto and #Siwei-Kang for their suggestions. Their work helped me come up with this solution.
I instantiate the htmlarea on button click, rather than on page load. I added some additional features as well:
instantiate htmlarea in show() callback function
textarea begins as "visibility: hidden" to reserve real estate on show(), but also to reduce flicker when htmlarea appears.
Set textarea back to visible after htmlarea instantiation, so that "html" button still functions
See this jsFiddle
<script type="text/javascript">
function toggle() {
$('#container').toggle('blind', function() {
$('#container textarea').htmlarea().css("visibility", "visible");
});
}
</script>
<div id="container" style="display: none;">
<textarea style="visibility: hidden; width: 300px;"></textarea>
</div>
Toggle me!

I need help to disable shadowbox from resizing

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.

Categories