for some reason when using mediaelement.js, it creates a div for the progress bar called "mejs-time-rail", but then proceeds to set the html width value to "0" through an inline style.
Since this div is created when the script runs, I cannot edit this property in the source code, but if I edit it (the inline style) in Firefox's inspector, I get the desired result. Also, it seems that this html property created by mediaelement.js overrides any css rules I set.
Any ideas how to circumvent this issue? Maybe editing the actual js script?
Thanks
I can't post a picture because I don't have enough reputation, but I can update this post with a screenshot when I do have enough and/or if it helps
First, it seems the issue is that as the DOM loads, the external script is setting that desired value to 0 like you said. Try adding a custom JavaScript/jQuery file that simply runs after the DOM is completed and
.find the element you want to edit. Then try
.attr('desiredAttr', 'new val');
this should find, and then reset the attribute to whatever you like. Even if the external script changed it on load.
Related
So I currently have a tampermonkey script that runs when it's on https://code.org/projects/applab/* which is where I want it. However whenever I run my code to remove the attr 'style' of the grandparent and parent of the specified element nothing happens.
Even though when I ran a test of this jQuery on w3's interpreter it worked...
$(document).ready(function() {
$("body").append(themeChangesCss);
$("#screenSelector").parent().parent().removeAttr('style');
$("#screenSelector").parent().removeAttr('style');
$("#runButtonWrapper").parent().parent().removeAttr('style');
$("#runButtonWrapper").parent().removeAttr('style');
});
You can also view the whole script here : https://sourceb.in/vdZOU1B7fq
You should probably start by logging the element you're trying to change to console. It is quite possible, that the web app changes the style AFTER your script executes. In that case, your changes will not have any effect.
If that is the case, read up on Mutation Observer, which allows you to execute code any time something changes the style attribute on the elements you want to clear.
I have tested your code and it indeed does work as it should on my test document. I couldn't find how should I test your code on the website you linked.
I want to add the manifest attribute during run-time, so the I can control when the Appcache will be downloaded.
Ex: When a user is logged into the application properly,
<html>
// page content
</html>
changes into:
<html manifest="myapp.manifest">
// page content
</html>
Is there anyway I can achieve this using javascript, jquery or anything? What I want to is to control when the Appcache will be downloaded conditionally.(I have already read about having another html inside an iFrame.)
According to the specification, changing the manifest attribute after the document loaded has no effect.
You can still access the html element and change the attribute value, via document.documentElement:
document.documentElement.setAttribute('manifest', 'myapp.manifest');
It just won't do anything.
You can use .attr():
Get the value of an attribute for the first element in the set of
matched elements or set one or more attributes for every matched
element.
$('html').attr('manifest','myapp.manifest');
Normal ways to add an attribute to an element can be used, e.g.
document.documentElement.setAttribute('manifest', 'foo.appcache');
(As #FelixKing points out in a comment, assigning to document.documentElement.manifest does not work, by the specs, since manifest is not defined in the DOM. I was first misled by Chrome’s behavior in this issue.)
However, this has no effect. HTML5 CR says: “The manifest attribute only has an effect during the early stages of document load. Changing the attribute dynamically thus has no effect (and thus, no DOM API is provided for this attribute).”
(Well, it has the effect of being there, so you could use the attribute in styling, retrieve the attribute value, etc. But nothing that would cause application cache operations.)
Try this:
document.documentElement.setAttribute('manifest', 'myapp.manifest');
From the docs:
document.documentElement
Returns the Element that is the root element of the document (for
example, the element for HTML documents).
Try this by jQuery.
$('html').attr('manifest', 'myapp.manifest');
It may not be possible to effectively add the manifest attribute, but it might be possible to remove it and by that you may achieve the same result.
To disable appcache, I use this:
window.console.warn('removing appcache');
window.document.documentElement.removeAttribute('manifest');
Please be carefull, this may not always work!
When I load a page, there is a style attribute that has been added to the <body> tag that is not there in my templates. How do I discover what javascript has modified it?
Just to be clear, the body tag is now:
<body class="home page" style="margin-top: -43px;">
So the style is not coming from a style sheet. While the template does not include the "style=" bit at all. So I'm pretty sure that some running javascript is modifying the body tag.
I have both Firefox/Firebug and Chrome Inspector available to me. I have tried right clicking on the body tag in "HTML"/"Elements" view and choosing "break on attributes modification" but the change has happened by the time I can do that, and the break point does not survive a page reload.
I'm using Django and jQuery in case that alters the answer.
I currently use an extension of Firebug called FireDiff you can file its homepage here: http://www.incaseofstairs.com/firediff/
You could use mutation observers.
Try adding this code as the first thing that gets executed on page load:
var target = document.querySelector('body'),
observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
debugger;
});
});
observer.observe(target, { attributes: true });
As a side note, it'd be great if that particular kind of breakpoints survived page reload.
There is the possibility it is added server side too. If you search your source files for the stylesheet name it should appear in either a JavaScript or a Python file. i.e. grep for "mystylefile.css"
You could disable JavaScript and see if it is still added if you want to narrow it down.
Update
Finding what added the margin-top to the element will be harder! You could search your JavaScript files for "margin-top" and see how many results you get back - or add the JavaScript files one by one until one causes it to be added.
I was trying to write a global JavaScriptfunction which overrides any HTML object (img, iframe, links and so on) before it being loaded by the page. The purpose of the overiding action was to to change the SRC and HREF of these objects using the DOM to any other link.
Unfortunately I didn't find any solution to that without firstly loading the object and only then changing it by the onload event.
My second option was to change the SRC and HREF by matching these attributes with a regular expression and replacing the resultant values. I prefer not to do so because it's slow and consumes a lot of time.
I would be glad if someone can share with his/her experience and help me solve this out.
JavaScript only works within the DOM.
You could however, load the page via AJAX, get the content and do any string manipulation on it.
If you are trying to modify items that exist in the static HTML of the page, you cannot modify them with javascript until they are successfully loaded by the browser. There is no way to modify them before that. They may or may not be visible to the viewer before you have a chance to modify them.
To solve this issue, there are a couple of options.
Put CSS style rules in the page that causes all items that you want to modify to initially be hidden and then your javascript can modify them and then show them so they will not be seen before your modification.
Don't put the items that you want to modify in the static part of your HTML page. You can either create them programmatically with javascript and insert them into the page or you can load them via ajax, modify them after loading them via ajax and then insert them into the page.
For both of these scenarios, you will have to devise a fallback plan if javascript is not enabled.
I need to know how to use JavaScript to find out from which file a particular CSS class is getting applied to a HTML element.
I am developing a web application where user can change the CSS property of particular element, just like we can change it in Firebug.
Edit: I need the JavaScript code of Firebug which shows CSS in right pane in HTML tab with link to files which has that class.
The window.getComputedStyle method returns a CSSStyleDeclaration. Look at the parentRule property of that to get to the cssRule, that has a parentStyleSheet property which should give you the information you need.
The Firebug Lite code might be a less confusing place to look than the full extension to get an idea of how it's all supposed to fit together.