I used style="overflow: hidden;white-space:nowrap;"
scroll bar is removed , but the arrows are not getting removed , for a body tag
Use:
style="overflow-y: hidden;"
You should not really not use inline styles. Try write it like this:
<head>
<style="text/css">
#container { overflow: hidden; }
</style>
</head>
<body>
<div id="container">Content goes here</div>
</body>
Could I see your code if that does not work as I can't see what you have done.
EDIT:
Not sure if I completely get what you are trying to achieve.
Add the following style to the page.
<style="text/css">
.hideOverflow { overflow: hidden; }
</style>
Are you using jQuery?
If so, add this within your window.open event.
$('body').addClass('hideOverflow');
Can I see your window.open script?
Related
I'm trying to hide the scrollbar for an iframe and it's not working. Here's my HTML:
<style>
.no-scrollbar::-webkit-scrollbar {
display: none
}
.no-scrollbar {
overflow: none
}
</style>
<iframe class="no-scrollbar" id="iframe">zzz</iframe>
<script type="text/javascript">
var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write('<body style="width: 110%">zzz</body>');
doc.close();
</script>
Here's my fiddle:
https://jsfiddle.net/9a7k2dgn/
I can change it by changing the width to 90% (altho apparently not even 100% works; 90% does but not 100%) but, for the purposes of this example, let's assume that's not an option. And it's none-the-less my understanding that overflow: none should work regardless.
The scroll appeared is the scroll inside iframe content, not the scrollbar of iframe selector.
To hide this, you need to implement overflow: hidden on iframe body style as follows.
doc.write('<body style="width: 110%; overflow: hidden;">zzz</body>');
I have embedded an iframe n my page with content from another site.Here is a link if you want to visit it http://8mags.com/bored/wtf/wtf01.html
The problem is that I am unable to remove the scrollbars and a few other things.
My CSS code is here
html {
overflow-x: auto !important;
overflow-y: auto !important;
}
body {
overflow-y: auto !important;
background: white !important;
}
The problem is that scrollbar is still there.Also the background does not change to white inside iFrame.I also tried to hide a few details with this code
.quote-subtitle {
display: none !important;
}
but it does not work either.
EDIT
The code that produces the iFrame is this one
<span class="quora-content-embed" data-name="What-are-some-of-the-most-awesome-psychological-facts/answer/Arjun-Subramaniam/quote/2114886">Read <a data-width="541" data-height="893" class="quora-content-link" href="http://www.quora.com/What-are-some-of-the-most-awesome-psychological-facts/answer/Arjun-Subramaniam/quote/2114886" data-embed="nqjyswb" data-type="quote" data-id="2114886" data-key="78561af9adeb1d847ceae88107798254">Quote of Arjun Subramaniam's answer to What are some of the most awesome psychological facts?</a> on Quora<script type="text/javascript" src="http://www.quora.com/widgets/content"></script></span>
<body class=" logged_out" style="overflow: hidden;">
i use this on link and worked,and hidden the scrollbars.
or use this to access content of iframe
$('#iframe').contents().find('body').css('overflow','hidden');
Is it possible to manually scroll a JPG inside a div with 'little hand' cursor by grabbing and draging the actual image?
Just when for example you have long horizontal bitmap and want to show it in small window so people scroll like in photo editors when you zoom in.
You need some JavaScript magic to do this. Check this out: http://jsfiddle.net/bCuGM/.
<style type="text/css">
#container {
width: 400px;
height: 400px;
overflow: hidden;
cursor: pointer;
}
#draggable {
width: 1024px;
height: 819px;
}
</style>
<div id="container">
<div id="draggable">
<img src="http://farm3.staticflickr.com/2593/3884464511_a77144821e_b.jpg">
</div>
</div>
<script>
$("#draggable").draggable();
</script>
You can do it by using javascript and a bit of css.
On your image add a css rule with :
cursor: pointer;
using javascript, add mousedown, mousemove and mouseup events on your image. Then use javascript to change the scroll on the parent div
I want to de-activate or remove the vertical scrollbar in an HTML page.
How to do that ?
Thanks.
If you really need it...
html { overflow-y: hidden; }
What I would try in this case is put this in the stylesheet
html, body{overflow:hidden;}
this way one disables the scrollbar, and as a cumulative effect they disable scrolling with the keyboard
put this code in your html header:
<style type="text/css">
html {
overflow: auto;
}
</style>
Meder Omuraliev suggested to use an event handler and set scrollTo(0,0). This is an example for Wassim-azirar. Bringing it all together, I assume this is the final solution.
We have 3 problems: the scrollbar, scrolling with mouse, and keyboard.
This hides the scrollbar:
html, body{overflow:hidden;}
Unfortunally, you can still scroll with the keyboard:
To prevent this, we can:
function keydownHandler(e) {
var evt = e ? e:event;
var keyCode = evt.keyCode;
if (keyCode==38 || keyCode==39 || keyCode==40 || keyCode==37){ //arrow keys
e.preventDefault()
scrollTo(0,0);
}
}
document.onkeydown=keydownHandler;
The scrolling with the mouse just naturally doesn't work after this code, so we have prevented the scrolling.
For example: https://jsfiddle.net/aL7pes70/1/
This makes it so if before there was a scrollbar then it makes it so the scrollbar has a display of none so you can't see it anymore. You can replace html to body or a class or ID. Hope it works for you :)
html::-webkit-scrollbar {
display: none;
}
In HTML
<div style="overflow: hidden;">
in CSS
overflow: hidden;
you can also end scrolling for x or y separately
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
I want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable.
I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.
Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be <div id="mainSection"> instead of <div class="mainSection"> and the css becomes #mainSection { ... } instead of .mainsection { ... }
Here is the whole thing well explained
http://www.w3schools.com/css/pr_pos_overflow.asp
You can experiment.
I had the same problem before, but I could manage to solve it just with overflow: auto;. Try it and it will work.
Updated
The full html code looks like this
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera