I want to change css style of a line in browser.
For example. i have a div
<div class="slider" style="top: 0px; left: -18px;">
Now i want to change it to
<div class="slider" style="top: 200px; left: -18px;">
How can i do it by JxBrowser?
Thank you so much!
You can certainly make CSS modifications, but the elements that you want to modify need to have some distinct identifier so that you can access them via JS injection. This would be a class,'data-value' attribute or an id that is unique to the element or group of elements that you want to modify. If you have that, then you can use something like:
String jsString = "document.getElementsByClassName('slider')[0].style.left='33px';";
Browser.executeJavaScript(jsString);
Functions should wrapped in a JS setTimeout(), onload() or something like a Java TimerTask if you want to ensure that the page is completely loaded first.
There are also limits to what can be done. For example, I haven't found a way to add a full stylesheet block (with filters) to an existing page, but smaller changes are relatively easy.
Related
I hope someone may be able to enlighten me on the following.
I have some experience with mostly static AMP (Accelerated Mobile Pages) for websites, but am currently working on a fairly complex page layout that pulls in some extra data based on the user's level of authorisation.
Specifically, I'm building an HTML5 description list (<dl>, <dt>, <dd>) that is of varying length depending on the attributes being present (or not) on the entity the page represents. I am then using amp-render to pull in additional dt/dd pairs (or not) from a dynamic API endpoint, depending on the current user's level of authorisation within the application.
Technically this is working completely as expected, but I cannot figure out the correct layout/CSS to render the resulting DOM elements to the page: they're in an AMP-generated div that has a CSS-forced height: 0 so invisble.
My raw page looks something like this:
<amp-render
src="/api/data-source/1234"
credentials="include"
xssi-prefix=")]}\*"
layout="flex-item">
<template type="amp-mustache">
<dl>
<dt>1st item</dt>
<dd>Definition</dd>
<dt>2nd item</dt>
<dd>Definition</dd>
{{#isAuthorised}}
<dt>3rd item</dt>
<dd>
<ul>
{{#array}}
<li>{{name}}</li>
{{/array}}
</ul>
</dd>
{{/isAuthorised}}
</dl>
</template>
</amp-render>
To clarify: the API, JSON, and Mustache template are all working as expected, with the correct HTML returned by the AMP framework.
The problem is that the <dl> is immediately contained by the following:
.i-amphtml-blurry-placeholder, .i-amphtml-fill-content {
display: block;
height: 0;
max-height: 100%;
max-width: 100%;
min-height: 100%;
min-width: 100%;
width: 0;
margin: auto;
}
<div i-amphtml-rendered="true" class="i-amphtml-fill-content" loading="auto" aria-live="polite"> ... </div>
Given that the i-amphtml-* classes are illegal to style with custom CSS, this is where I've come unstuck. No variation of layouts on amp-render, nor other containing elements and CSS, are generating the expected result of the definition list actually being visible on the page.
If I wrap amp-render itself in a div with a specified height then the rendered definition list shows as expected - but there's no way to know what height the dl should be, so this isn't a solution for anything more than sanity checking.
Can anyone help?
Surely this is not impossible to achieve? I understand one of the core aims of AMP is to minimise (if not eliminate) page jump as items render in the browser, but surely returning data of variable length is not an uncommon occurrence and there is a way to do what I'm attempting? Or have I missed something incredibly obvious?
(To pre-empty any questions about other styles: I've also tried stripping out all other CSS from the page and there is no difference in what I've managed to display.)
We had similar problems with amp-list. The same approach may work for amp-render. Separate amp-render and template and link with an ID (see the amp doc for an example). Move render to page bottom (before </body>). Add a minimal height value to render. Set width to auto. When we use this approach for list, the list length will be set to the actual length (as determined by amp runtime). This approach may work for render. Note: you cannot control i-amphtml-* so don't look for override solutions there (and your page may be invalid if you do try to override).
How can I write css selector for an element with specified inline styles?
For example:
<div style="top: 0; left: 0;">link1</div>
<div style="left:3px; top:0;">link2</div>
<div style="top:3px; left:0;">link3</div>
Then, I want to select link1 and link2 since they all have top:0.
I'm not sure about if I should place a space in div[style*="top: 0"] or not. How does the style attribute be setted? Will browser format the string in any format automatically?
Why I need this: I know query an element based on style attribute is not a good idea. But I'm writing user style, while I cannot modify the html page or javascript. The web page only modified the style attribute when events triggered.
Since you mentioned you have no way to change the HTML, one hacky way you can do it is to account for both cases, I guess:
div[style*="top: 0"], div[style*="top:0"] {
/* styles here */
}
An alternative would be to use JS/jQuery if you are willing.
Example for jQuery:
$('div').filter(function() {
return parseInt($(this).css('top')) == 0;
}).addClass("yourNewClass");
Edit: Didn't notice that you mentioned you cannot alter the page via JavaScript as well, but well, leaving this in just in case.
I'm making a few changes to a site and want to change the width of the container to go across the whole page. I'm a bit of a noob so not sure if I've don't it correctly, but want the width to be 3000px. I have the option of container id and container class. So basically what CSS do I put in which box?
The theme I am using is Porto by Spyropress. But looking for some CSS help:)
Thank you very much!!
In the CSS style page (or code) where you have the container, you should write the following line:
width:3000px;
The most straightforward answer would be to use the style="width: 3000px;" definition instead of the id or the class (even if it is not a really clean choice).
If you have no chance to add a style and you have called a CSS, you can do it by id or by class, depends on how often you will have Elements with 3000px width (single time go for id, multiple times go for class). In general classes and id link the parts in your CSS with your html definitions (named-links). They do not serve you with direct CSS, this is done by the style="" Element.
Some Code:
#some_id {
width: 3000px;
}
.some_class {
width: 3000px;
}
And some additional info about general css (because it is much more than just id's and classes if I think about the cascading part): http://www.cssbasics.com/
I'm working with a project where I need to have a scrollable div element display the bottom when the page loads. This means that the user could scroll upward to see the rest of the content. The only way I could think of doing this would be to have the div autoscroll to the bottom on page load. But since load time is important for this project, I'd like to find another solution. Is there any other way to do this, preferably in something like css? Thanks!
You can use javascript to get this effect. It's fast, so you won't have to worry about load times:
var yourDiv = document.getElementById('yourDivId');
yourDiv.scrollTop = yourDiv.scrollHeight;
There are also numerous ways to implement this using jQuery. Here's a great blog post on the subject:
jQuery Scroll To
I'm not sure to understand well what you need, but maybe something like that:
#bottomDiv{
position:fixed;
bottom:0;
}
There is no javascript tag so what about hide element until css file is not downloaded (but this work only for 1st time, then will be css file cached)
<div id="bottom" style="display: none;"></div>
CSS
#bottom {
display: block !important;
position: fixed;
bottom: 0;
}
I'm familiar with assigning CSS classes to GWT elements to control their formatting, but what if I want to change an attribute in one of those CSS classes?
I've got a styled list of data. CSS classes are used to indicate the various data types (important, routine, trivial). I wish to allow the user to hide trivial entries. I'd like to modify the span.trivial CSS class to set display:none
I'm aware I could loop through the entries, see if an entry is trivial and add a noShow class (which itself has display:none) - but then I'm doing the looping, I'd rather let the browser do the work.
Is this possible in GWT?
Ian
I assume we have a structure similar to the following one
<div>
<span class="routine">A</span>
<span class="trivial">B</span>
<span class="trivial">C</span>
<div>
This is how I would solve the problem:
.hideTrivial span.trivial {
display: none;
}
<div class="hideTrivial">
<span class="routine">A</span>
<span class="trivial">B</span>
<span class="trivial">C</span>
<div>
The ".hideTrivial span.trivial" selector applies only to "trivial" spans, if they occur within another element that has the class "hideTrivial". (Note: The span doesn't have to be a direct child of the "hideTrivial" div - it's ok, if you have a deeper element hierarchy.)
So to turn on/off hiding, you simply add/remove the "hideTrivial" class from the outer div.
(This technique can be used with and without GWT.)
AFAIK, javascript can not change the CSS file and have it reapplied. The same goes for GWT (since it compiles down to JS). So, you can not change a CSS rule and have all elements in your DOM reflect the change.
However, you can get a style of a DOM element and change that style. But that is for a particular element. In your case you'd still need to write code to traverses a set of element and make the change.
My suggestion would be to look at gwtQuery (a port, not a wrapper, of jQuery to GWT). It's super-efficient and super-compact. Here is a one-liner to do what you need:
$("span.trivial").hide()
Fot those who need to modify global CSS property values: you can choose StyleInjector for that purpose.
http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/dom/client/StyleInjector.html