This question already has answers here:
How do I find which JavaScript is changing an element's style?
(5 answers)
Closed 10 years ago.
I'm new on a project which has a boatload of javascript classes (16-20 files) and many dynamic features. There an element which has its height and maximum height set inline from a javascript file. Is there a way to which file this is set from?
<div class="ccass" style="width: 100%; height: 67px; max-height: 67px;">
resizes to
<div class="ccass" style="width: 100%; height: 307px; max-height: 307px;">
when the window is resized. I need to disable the resizing and set a fixed height - for some of the pages at least.
Is there some developer tool that would assist with this?
If you have firefox you can check the "Break on Attribute Change" option in the HTML tab. Just right click the target element and the menu will pop up. After that, resize the window and it will break in the script line where the attribute is changed.
grep the js sources for resize or onresize event/method and go from there.
Related
This question already has answers here:
How to detect Adblock on my website?
(46 answers)
Closed 3 years ago.
With some simple javascript, how can I detect if the client user is using an Adblocker?
Adblockers detect scripts called ads.js or scripts with similar names and then block them so that they don't run. They also detect id's and classes that have suspicious names and simply remove them from the DOM. So here is one simple trick (explanation below) that can help you detect if your user is using an adblocker or not:
<div id="randomDiv">
<div class="adBanner">
</div>
</div>
This HTML simply places a random div on your page with only one child, an empty div that has a class of adBanner. Now an adblocker would think of the child div as an advertisement, and it would remove it.
Using CSS, we can give the .adBanner class a fixed height and a fixed width, so that it renders something on the screen.
.adBanner {
height: 2px;
width: 2px;
visibility: hidden;
}
This CSS simply gives our fake "adBanner" element a fixed width and height that we can check for later, and hides it from the user.
Now using jQuery, we can check for the height or the width of the element. We do this because if the adblocker were to remove this element from the DOM, then the height would not exist.
if ($("#randomDiv").height() > 1) {
console.log("No Adblocker!!");
}
else {
console.log("An adblocker was detected!!");
}
I'm sure there are other ways to do this, but this is just one of the ways.
Hope this helps!!!
This question already has answers here:
Find all CSS rules that apply to an element
(10 answers)
Closed 5 years ago.
I want to get the element computed style and the css (file and line) that applies that rule. Similar to what Chrome Dev Tools does when the "Computed" tab is used and you click on that arrow beside the value.
In short, I want to be able to, using javascript, find out these two things:
What is the CSS value that is actually being applied to that element (computed style)
Once I found the computed style, I want to know where it comes from (like file name and line number)
I know this can be done manually using devtools, but I need this done by a script.
Thanks
You can use Window.getComputedStyle(). An example of usage:
<style>
#elem-container{
position: absolute;
left: 100px;
top: 200px;
height: 100px;
}
</style>
<div id="elem-container">dummy</div>
<div id="output"></div>
<script>
function getTheStyle(){
var elem = document.getElementById("elem-container");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
document.getElementById("output").innerHTML = theCSSprop;
}
getTheStyle();
</script>
See MDN Documentation to learn more how to use this feature and it's compatibility with different browsers.
Unfortunately, this approach will not give you the location of where this value comes from.
This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 6 years ago.
With CSS it's possible to stretch an image and change the ratio to fully cover the parent div. The image will even resize if the parent is responsive. It is possible to do so with a video (iframe)?
EDIT: I want to make sure I won't get black bars.
EDIT: Altered title as this problem concerns a video and the duplicate answer does not.
Yes. you can give the iframe and id, and them costumise the id in your css file.
simply just type the following code:
.theid {
width : 100% ;
height : 100% ;
}
and you are done
Hmm.. Did you try to put the video on a div, and apply width=100% to the video?
Something like this:
<div class="parent">
<iframe class="child"></iframe>
</div>
And the CSS:
.parent{
width: 600px //your width here
}
.child{
width: 100%;
}
You could add width="100%" height="100%" to the iframe. doing so will make the iframe stretch the length of the parent div.
Can I detect the width of a dynamicaly filled div box without rendering it on the web page?
<div>{{some.data.from.some.model}}</div>
If I render it, I know it's width is 260px (in every modern browser).
Can I detect it, before it is rendered on the web page? Are there tools, mechanisms, libraries to do that?
My Imagination is:
That is the div box width this class (margin, padding, whatever)
This is the content (text, font, fontsize, whatever..)
Tell me it's width
Don't show it on the homepage yet, I'll decide afterwards
You can't get the size of an element that doesn't exist (hasn't been rendered). Any solution you find to calculating an element's size without it being rendered is probably not going to be cross-browser.
So, the best you can do is render said element out of view, be it via "visibility: hidden", or pushing it out of view with "display: fixed". Once you have an actual element, you can check it's size for the current browser via JS and proceed accordingly.
I have created a simple fiddle here: http://jsfiddle.net/5wq8o02q/.
HTML
<div id="playground" class="block">
some content
</div>
<span id="width"> </span>
CSS
.block {
/* width: 100px; */
height: 100px;
}
JQUERY:
$(function(){
//$('#playground').css('visibility','hidden');
$('#playground').css('display','none');
$('#width').html($('#playground').css('width'));
});
It helps to use display: none and it won't use screen real estate as visibility: hidden. It still gives the width you are looking for (I think). Let me know me it helps ...
I manually changed in the chrome browsers developer mode the style attribute, which has the desired effect. By entering
element.style {
width: 900px;
}
After that the manipulated div appears as:
<div id="rte-savebar" class="aui-toolbar" style="width: 900px;">
Now I'm trying the same effect with javascript using this command:
document.getElementById("rte-savebar").style="width:900px;";
which seems to have has no effect at all.
What do I need to do in order to change the width in javascript?
document.getElementById("rte-savebar").style.width = "900px";
You should do it by accessing the width attribute specifically, try this:
document.getElementById("rte-savebar").style.width="900px";