Unable to Hide Vertical Scroll Bar on Web Page - javascript

I am displaying an HTML page within another HTML page depending on which link is selected using the following function:
function loadProject(sel) {
var url = sel[sel.selectedIndex].value;
if(url) {
document.getElementById('projectContainer').innerHTML = '<' + 'object id="foo" name="foo" type="text/html" data="'+url+'"><\/object>';
} else {
document.getElementById('projectContainer').innerHTML = "Please select a project.";
}
}
And, I have a div tag inside the HTML with the id of projectContainer. This works, except for the fact that a vertical scroll bar is always shown no matter what I do to remove it. (It shouldn't be - even if I put nothing into the object, the vertical bar is still shown.) I have tried to edit the CSS in the following:
object {
width: 100%;
border: none;
overflow: hidden;
}
but that is not accomplishing what I'm looking for. Any suggestions? Thanks.

Using an <object> is new to me but very similar to an iframe, I suppose: It means that there is a document body that is separate from the surrounding document.
You need to declare overflow: hidden for the body inside the document you are embedding.

overflow: hidden won't work for content inside an iframe/frame/object. You are going to need to edit the CSS of the pages being rendered in the object tag. Also, I recommend you DO NOT do this, as you don't know if I have my browser set by default to have forced huge text due to bad sight or something similar, which would make the scrollbar unusable/hidden to me, hindering usability. Just don't do what you are trying to do.

make it overflow: auto; it works!

Related

Page breaks in SAPUI5

What is the best practice for creating specific page breaks in SAPUI5 and is it actually possible?
Classical CSS atributes page-break-after and page-break-beforedoesn't seem to work in my case. For example, I have two sap.m.VBox elements and I attached them a CSS class which specifies page-break-after: always !important;when printing, but nothing happens. If I add
* {overflow-x: visible !important; overflow-y: visible !important;} then it will break and continue to draw the content in next page if it doesn't fit in one page, but it doesn't work in IE.
I have tryed also adding an empty div element that would work as a page break indicator, but still CSS wouldn't do anything. I guess that's because everything in SAPUI5 is put into one content div.
You can solve this by adding an empty element in between.
If you want a break that is 200 pixels high, your page content can look like this:
return new sap.m.Page({
content:[
oVBox1,
sap.m.Panel({height: "200px", width: "100%}),
oVBox2
]
});
ofcourse you might want to set your panel background-color to transparent ;)
The "page-break-after" is ignored because the property display of SAPUI5 views is set to inline-block.
Simply override the CSS style for the corresponding class with a custom CSS and it should work:
.sapUiView {
display: block;
}

insert div at top of page without overlaying using javascript

I wonder if anyone can help me please ?
Basically I have a snippet of Javascript that I want to be able to give people. So the following is true :
I can't control wherabouts in the page they decide to put the snippet (for various reasons) - It could be in the middle, the end, wherever.
All the snippet does is put a small DIV at the top of their page. At the moment I am doing the following (this is the snippet):
<div id="mydiv" style="display:none; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 40px; background-color:red; text-align:center; color:white"><br>Message Inside Div</div>
<script>if (Condition) { document.getElementById("mydiv").style.display = "block"; }</script>
Now, that works a treat and when "Condition" is true, it shows the div. However, using this method it overlays the div with it fixed to the top of the page.
However, I also want to do it so that the div is inserted at the top of the page but scrolls with the page as normal and DOESN'T overlay the content at the top (IE: It pushes the content down when it appears).
Any ideas on how I would do that please, remember : I don't have any access to their page (I don't even know what else is on the page) and the snippet I give them could go anywhere on the page.
I guess you can't avoid meddling with the existing code and stylings - but in case you're worried about existing top-margins on body, just check for this value first. ie. get the body top margin value, add your elements height, reapply. Example in jquery syntax (out of simplicity, can do the same in vanilla javascript)
$('body').css('margin-top',$('body').css('margin-top') + yourdiv-height);

javascript popup from scratch no libraries

I am trying to implement a lightbox / modal box type of popup in javascript without using jquery, scriptaculous, prototype or any library whatsoever.
I found a very good start right here on stackoverflow:
How to code a JavaScript modal popup (to replace Ajax)?
(no point repeating the code here)
I tried to make simple changes and all worked fine, i even added HTML content and it worked, but I am stuck on adding scrollbars, I did my research and found nothing since almost every answer you get on google is based on jquery (even all the other answers to the question I mentioned above include jquery!)
Any suggestions or links would be great,
thanks
I think this article named "CSS OVERLAY TECHNIQUES" will help you.
http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
It provides several methods of accomplishing the above task without jquery.
For example one of the techniques described via this link is:
TECHNIQUE #1: ABSOLUTELY POSITIONED ELEMENT
The first way that an overlay can be created is by absolutely
positioning an HTML element on the page. There would be an empty div
in the markup, and with CSS this div is positioned absolutely and
given a high z-index value to make sure it stays on top of all other
elements on the page, except the modal which is opened on top of this
overlay, which will get a even higher z-index than the overlay.
<html>
<body>
<div class="overlay"></div>
<!--...-->
<body>
<html>
Supposing we have already added an empty div to the markup and given
it a class .overlay, the CSS to position this overlay on the page is:
html, body{
min-height: 100%;
}
body{
position: relative;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
If you want a modal dialog for real, use window.showModalDialog:
returnVal = window.showModalDialog(uri[, arguments][, options]);
where
returnVal is a variant, indicating the returnValue property as set by the window of the document specified by uri.
uri is the URI of the document to display in the dialog box.
arguments is an optional variant that contains values that should be passed to the dialog box; these are made available in the window object's window.dialogArguments property.
options an optional string that specifies window ornamentation for the dialog box.
Note that a real modal stops javascript execution (like alert, confirm and prompt do), unlike fake modal dialogs created with libraries like jQuery.

Remove place holder image from a div once dynamic content has been added to it

If I have a div acting as a container that when empty shows an image, and I want to remove that image when content gets added to the container dynamically, what would be the best Jquery method to accomplish this? Doing the usual -
if ($(".container").html().length <= 0) {
$('.ad').show();
}
does not work in this case since the content being added is dynamic and does not involve a refresh. I tried storing the check in in a setIntercal function that would run every 100ms but the results didn't turn out as expected and it also caused some odd flickering on the page.
EDIT**
Josh Burgess' method would be the one I use in all cases if I didn't have to support IE8. Because of this I'm going to fall back to adding a .hide() method on the when the click event for adding content is fired. Thanks for the help!
Why use jQuery at all?
Try this CSS:
div.myDiv:empty{
background-image: url(path/to/myimage);
height: 50px;
width: 50px;
}
div.myDiv {
background-image: none;
height:auto;
width: auto;
}
--EDIT--
Here's a working example in jsfiddle, and it works in reverse as well

Cannot position Google +1 button with CSS?

I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?
When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}
After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.
Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)

Categories

Resources