Is there a public API for accessing the HTML div object of an OpenLaszlo view in the DHTML runtime? There doesn't seem to be an example for that in the OpenLaszlo documentation, but technically it should be possible.
When the DHTML runtime was created, the OpenLaszlo team decided to hide the implementation details of the HTML div structure from the developer using LZX. While it's not recommended to directly access the underlying object structure of views, there are situations where you have to do it - but it might break your application with future updates of the platform.
Take the following simple example application:
<canvas debug="false">
<view name="v1" x="10" y="10" width="100" height="100" bgcolor="red">
</view>
</canvas>
If you compile the application using the query string
lzoptions=proxied(true)%2Cruntime(dhtml)&target=html
you will just get the application without the developer console. Now, when you inspect the page structure, you will see the following div structure:
<body>
<div id="appcontainer" style="height: 100%; width: 100%; margin: 0px; padding: 0px; border: 0px none; overflow: hidden; text-align: left; ">
<div class="lzappoverflow" style="width: 1905px; height: 429px; ">
<div class="lzcanvascontextdiv" id="lzcanvascontextdiv">
...
</div>
<div class="lzcanvasdiv">
<!-- visual part of view instance with id="v1" -->
<div class="lzdiv" style="background-color: rgb(255, 0, 0); height: 100px; width: 100px; left: 10px; top: 10px; z-index: 2; "></div>
</div>
</div>
</div>
</body>
I've removed the CSS information and added the comment to mark the div representing the view with id=v1. You don't see any div with the id value 'v1', since the view instances are instantiated as JavaScript objects storing a reference to the visual presentation. You can access the div by calling
v1.getDisplayObject()
which will return
<div class="lzdiv" style="background-color: rgb(255, 0, 0); height: 100px; width: 100px; left: 10px; top: 10px; z-index: 2; "></div>
The object hierarchy of a view is *view->sprite->__LZdiv* property. That means, for each view OpenLaszlo instantiates a runtime specific sprite object, which in turn generates the corresponding div for the DHTML runtime.
v1.sprite.__LZdiv.style.backgroundColor
"rgb(255, 0, 0)"
Here are the links to the implementations of the LzView and LzSprite class, if you are interested to learn about the internals:
Related
For angular2 material project, the md-content is not available. There is no ETA when it's going to be available for use. Basically, I need a container with scrollable for overflow. What's the "material" way of doing this besides wrapper div and set overflow.
Angular2-drag-scroll is the library you are looking.
It is essentially a directive with overflow: scroll and other goodies
<style>
.demo-one {
height: 260px;
background-color: #FFFFFF;
}
.demo-one img {
height: 260px;
width: 260px;
margin-right: 10px;
}
</style>
<div drag-scroll drag-scroll-y-disabled="true" scrollbar-hidden="true" >
<img *ngFor="let image of imagelist" [src]="'assets/img/' + image" />
</div>
I'm applying "drag-scroll" to the div so everything in side of this div will be
draggable and has the attribute overflow: scroll etc.
Setting "drag-scroll-y-disabled" to true will disable y-axis scrolling/dragging.
Setting "scrollbar-hidden" to true will hide the scroll bar(ugly).
Github page: https://github.com/bfwg/angular2-drag-scroll
Demo site: https://bfwg.github.io/angular2-drag-scroll/
I have a use case where I have to show a list of elements inside a scrollable div. The problem is that the list is long, close to 200 elements and when viewed in mobile browsers, the scroll is janky. I see a lot of Paints and Composite Layers in the chrome dev tools and effectively I am not able to achieve more than 30fps. Here is the sample code—
<style>
body {
overflow: hidden;
}
.scrollable {
overflow: scroll;
position: absolute;
top: 50px;
bottom: 0;
width: 100%;
}
header {
position: fixed;
top: 0;
height: 50px;
width: 100%;
}
</style>
<body>
<header></header>
<div class='scrollable'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
After googling a bit I was able to get buttery smooth scrolls by putting a overflow:scroll on the body instead of the div. Though this works it doesn't seems intuitive to me that body scrolls are more performant than the ones applied on inner HTML elements.
Real Example: — https://funag.github.io
Actual Code: https://github.com/funag/ui-core/pull/80/commits/fe4a49fd92c3ad69a054308c4f2a89351178fb99
So, I'm developping a firefox plugin based on page mod and iframe. The chrome version using iframe within content script is working perfectly.
So basically, I inject a button, when the button is pressed he change the display type of a div containing some windowing stuff (to make a movable window within the browser and a close button) and this window contain an iframe. The iframe contain the application which is entirely contained within the plugin package, just make few ajax calls to a server to refresh the local storage datas.
I can inject the open button, the windowing stuffs and the iframe but whenever what I put in the iframe, the content is not loading. (excepted in one case, but not what I want).
To set the content of the iframe I basically :
retrieve the url within the resources : require("sdk/self").url("index.html")
Send it to my injector with a message
Set it in the iframe with : iframe.setAttribute("src", iframeSource);
Here's what's injected in the page :
<div id="iframeContainer" style="border: medium none; width: 550px; height: 600px; background…olute; top: 50px; right: 10px; z-index: 200; display: block;">
<iframe id="master" frameborder="0" scrolling="no" src="resource://jid1-83zazep6ncytaa-at-jetpack/myaddon/data/index.html" style="border:none; width:550px; height:600px; background-color: transparent; position:absolute; z-index: 100; cursor:default;">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
<div id="clsBtn" style="border:none; width:25px; height:25px; position:absolute; top: 8px; right: 20px; z-index: 301;">
<div id="closeShadow" style="width: 0px; height: 0px; box-shadow: 12px 12px 8px 8px rgb(255, 255, 128); z-index: 302; display: none;"></div>
<img src="resource://jid1-83zazep6ncytaa-at-jetpack/myaddon/data/images/cross.png" style="border:none; width:25px; height:25px; position:absolute; z-index: 303; cursor:pointer;" title="Close"></img>
</div>
</div>
<div id="openBtn" style="border:none; width:50px; height:50px; position:absolute; bottom: 5px; right: 10px; z-index: 301;">
<div id="openShadow" style="width: 0px; height: 0px; box-shadow: 25px 25px 25px 15px rgb(255, 255, 255); z-index: 302; display: none;"></div>
<img src="resource://jid1-83zazep6ncytaa-at-jetpack/myaddon/data/images/icon.png" style="border:none; width:50px; height:50px; position:absolute; z-index: 303; cursor:pointer;" title="Open TSO trade"></img>
</div>
<div id="headerDiv" style="border: medium none; width: 480px; height: 23px; position: a…peat scroll 0% 0% transparent; cursor: move; display: block;"></div>
If I browse resource://jid1-83zazep6ncytaa-at-jetpack/myaddon/data/index.html I get the page rendered correctly (css and js functionnal).
Also the two buttons and the header are displayed correctly (images, style and associated js). So it's really on the iframe that is not loading and rendering.
In the Console I don't get any js error or security error.
If I replace the iframe content with google (and inject it on google), the iframe don't render too.
So do you have any ideas ?
PS : There's one method that is working but not as I want. The problem with the method I've found is that the javascript is not running and I still have some styling issue. So not the way to go I think.
// Load the document
var source = data.load("index.html");
// Replace the relative path with the packed paths
source = source.replace("css/style.css", data.url("css/style.css"));
source = source.replace("css/ico.css", data.url("css/ico.css"));
source = source.replace("css/jquery-ui.css", data.url("css/jquery-ui.css"));
source = source.replace("js/external/jquery-1.9.1.js", data.url("js/external/jquery-1.9.1.js"));
source = source.replace("js/external/jquery-numeric.js", data.url("js/external/jquery-numeric.js"));
source = source.replace("js/external/jquery-ui.js", data.url("js/external/jquery-ui.js"));
source = source.replace("js/trade/data.js", data.url("js/trade/data.js"));
source = source.replace("js/trade/main.js", data.url("js/trade/main.js"));
console.log(source);
// Encode the content
let content = encodeURIComponent(source);
let binarySource = "data:text/html;charset=utf-8," + content;
// When in the injector, set the "binary source" as content
iframe.contentWindow.location.href=iframeSource;
I'm playing around with a simple website (I'm a beginner with HTML and CSS), where I made a simple menu with some submenus. The content of the page, mainly images and videos will be displayed in a scrollbox.
Now I thought that instead of creating different subpages, it'd be better to be able to jump down to the relevant content. I've tried out different solutions, but something's not working out - or at least, jsfiddle doesn't show it.
<div id="navigation">
<ul>
<li>
main menu
<ul>
<li>section 1</li>
<li>section 2</li>
<li>section 3</li>
</ul>
</li>
</ul>
</div>
that's my code for one part of the menu, here's the scrollbox with images:
<div class="scroll" style="float:left;border: 1px solid black; width: 40em;
height: 30em; line-height: 3em; overflow-y: scroll; overflow-x:hidden;
text-align: center; margin:5%; margin-bottom: 5%; background-color: #ffffff;
color: #ffffff;">
<img src="http://websiteurl.com/image.jpg" style="float: left; width: 95%;
padding: 3%; padding-right: 3%; display: block" alt="image1">
<a name="section1"><img src="http://websiteurl.com/image2.jpg"
style="float: left; width: 95%; padding: 3%; padding-right: 3%; alt="image2"></a></div>
So as you can see, I would like clicking on the menu link "section 1" cause to jump down the scrollbox to the desired image location without changing the page itself.
How would that be possible? or: where's the error in the anchoring? Thank you all for answers!
It's difficult reading the code with the inline css. I'd first suggest moving the css to a stylesheet, that would surely help readability and debugging.
Have you tested without the images or without the scroll box?
An anchor tag is normally just
Click Here
or if using images instead of links
<img scr="imageLocation"/>
and then the anchor part is
<a name="myAnchorName"></a>
there's a container with background-color and padding specified. there's an image inside it. in a full screen browser window it looks like as it should look like:
http://img263.imageshack.us/img263/4792/61536769.png
but after resizing the window (window width is less than the content width) and the horizontal scrollbar appears, if i scroll it right, i can see the background ends where the window ends:
http://img845.imageshack.us/img845/7370/11506448.png
here's the code:
<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background: pink; padding: 32px; display: block;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>
in ie8 it looks right, the padding is treated as it's part of the content. in firefox and in opera it isn't, even if i use the "-moz-box-sizing: border-box;" (and correct doctype and everything...) so i don't really know what should i do. i usually did it with margin for the image but this time that can't be a solution (the actual thing is different than this example, but it shows the exact problem).
thanks for your help in advance :)
Add an extra div that wraps your existing div and do float:left.
<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background-color: pink; width:100%;float:left;">
<div style="background: pink; padding: 32px; float:left;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</div>
</body>
Edit: Removing display: block; as that's irrelevant when you have float.
What's going on is that the div isn't expanding to wrap around the image, since the image has a fixed width, but the div doesn't (and is therefore defaulting to 100% of the parent, which is body/html at 100% of the viewport). If you look at it with Firebug, you can see that the image is going outside of the bounds of the div and its padding.
I've tweaked the CSS in this jsFiddle to get the background to expand to the image. It should at least get you started. Basically, what I did was add overflow-y: auto; to the div, which expanded the background.
One thing you can do in this case is to put a specific width on the div as well:
<body style="margin: 0; padding: 0;">
<div style="background: pink; padding: 32px; display: block; width: 640px;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>
You can do that in this case because you already know the width of the contents. Of course, if you need a dynamically sized div this might not work for you.
I was going to suggest putting margin: 32px on the image instead of padding: 32px on the div, but when I tried it that didn't help either. Bizzare.