I'm trying to replace the in-line styling of a div using Dojo. I only want to change the min-height property, without affecting any other in-line properties.
Here is my current HTML:
<div id="divid" class="divclass" style="width: 950px; min-height: 225px;">
Here is my script string:
dojo.query('div.divclass').css( "min-height", "0px" );
But it seems to have no effect at all. If I try to swap the .css() for .attr() it works fine except it removes the other styling - .attr('style', 'min-height:0px');
Manually editing the div code is not an option so I'm looking for a workaround. I also tried appending another class but the in-line styling overwrites it.
I got the .css() part from a jQuery site so maybe it's not compatible with Dojo? Sorry I'm pretty new to this.
Thanks
There is an alternative for Dojo as well (compared to jQuery), however, the function is called style() in stead of css(), for example:
dojo.query('div.divclass').style( "min-height", "0px" );
Also, this functionality is not available by default, you also need to load the module dojo/NodeList-dom, because it contains extra DOM functionalities for the NodeList (which is the list of nodes you get when you use the dojo/query module).
Another small thing to notice: be sure that the DOM is loaded before you're going to query it, if the DOM isn't loaded yet, there's nothing to query either.
A full example (using AMD) would be:
require([ "dojo/query", "dojo/NodeList-dom", "dojo/domReady!" ], function(query) {
query('div.divclass').style( "min-height", "0px" );
});
The dojo/domReady! module is similar to $(document).ready() in jQuery, it makes sure that the DOM is loaded before you query it.
The working example can also be found on JSFiddle: http://jsfiddle.net/Eu9Br/
Related
I want to toggle(hide/show) an element when a button is being pressed. I have two ways as to implement this:
Find the element according to its class name, e.g $('.my-content')
Find the element according to its relevant DOM position towards the button, e.g. $('#my-button').parent().next().next().next()
However, none of the above seems to me very reliable since in case someone changes the HTML code, the above approaches should not work. Is there something more reliable I am missing?
If it's a specific element, supply it with an Id value and use that
to find it.
If it's a TYPE of element, use a class name.
Other than that, there's no real conventions. Just try and make sure that somebody reading your code understands what is going on.
A very good practice is to decouple HTML, CSS and JS.
When binding javascript to DOM elements you should use javascript selectors.
Basically classes with some custom prefix (like js-) which will be used only for javascript purposes (not css style).
So whenever the DOM tree structure or the CSS class names are changed, you can still have your working JS selector
HTML
<div class="my-content js-toggle-element"></div>
JS
$('.js-toggle-element')
CSS
.my-content{ ... }
Plus, using Javascript Selectors:
makes HTML highly readable: you can easily find out what will happen to that element with that js class
allows you to easily apply/disapply that behaviour also to other elements in the future, simply by adding/removing that class in your HTML and without affecting CSS at all
<div class="my-content js-toggle-element"></div>
...
<div class="another-content-to-toggle js-toggle-element"></div>
Using jQuery will be much easiest way. Like this -
$( ".target" ).toggle();
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Reference - jQuery Toggle
If the class or the position of the element in DOM is changing then you can try
selecting it with the inner text
$("button:contains('buttontextgoeshere')")
javascript experts,
i have this script in my template to load some html divs.
$(document).ready(function() {
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">'
+ $("#showlink").html()
+ '</div><div id="wrapright">This is text display by append</div></div></div>');
});
Now what problem i got
Now whenever i used to remove any other ID by getelemebyID script in a template then the above html all divs like wrap,inner-wrapp etc becomes completely removed. why it happened ?
Example i used the below script to remove some other IDs. but it also reflect that append body html div ids removed too. why as you see i set only slider id to remove which is not in that append body. but it reflect that append body html divs too. why ?
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
document.getElementById("slider").remove();
})
//]]>
</script>
working/showing the append divs when there is no "getelementbyid removed" script used for any Id: https://jsfiddle.net/83fbnwe4/15/
not working/not show the append divs when i set "getelementbyid removed" for any other iD: https://jsfiddle.net/83fbnwe4/18/
Please could you tell me why it happened. Why it reflect also the append html divs, since i only set #slider to removed, not that append bodys htmls.
Your issue is you are attempting to call the jQuery remove method on a standard DOM element. The remove method only works on jQuery objects. You really want to do this:
$(document).ready(function() {
$("#slider").remove();
});
If you do not want to use jQuery to remove the element, you can do this:
var element = document.getElementById("slider");
element.parentNode.removeChild(element);
This is how Javascript works. You cannot remove elements directly, you need to go to its parent and then use the removeChild method to remove an element. This is why jQuery uses this approach behind the scenes and makes it look a lot easier than it actually is.
In the newer versions of the Javascript specification, remove is an added method. However, it is still best practice to use the above approach or a polyfill (which uses this same approach) because Safari mobile does not support it, and none of the IE's (only Edge) supports it as well.
Here is my problem : the css style is not initialised when window.onload is triggered.
<div id="foo"></div>
css file
#foo {
height: 200px
}
js file
window.onload = function(){
console.log(document.getElementById('foo').style.height);
};
the console displays : ""
the style must be in a different file, if the style attribute is used (style="height=200px") it works.
.style.height does not show styles that come from CSS rules. It only returns styles that have been explicitly set on that object, either in the HTML or via javascript, not styles inherited from CSS rules.
Instead, you must use window.getComputedStyle(). See the MDN doc for more details on how to use getComputedStyle() properly. Here's one example:
window.getComputedStyle(document.getElementById('foo'),null).getPropertyValue("height");
Note: for older versions of IE, you have to either install a polyfill for getComputedStyle or use el.currentStyle.
Element.style will only be set for inline styles(<div id="foo" style="height: 200px"></div>), to get the computed style use window.getComputedStyle
window.getComputedStyle(document.getElementById("foo"), null).getPropertyValue('height')
You can also consider working with jquery, a very popular javascript libraray with tons of very nice and powerfull features. And if you use the google cdn you don't need to worry about performance cause most browsers will already have the libray in cache.
To get the height of an element you would just use .height() The full explanation is here http://api.jquery.com/height/
Your code would look something like this:
$(document).ready(function() {
console.log($('#foo).height());
});
It may look a bit confusing at first, but you will quickly get the hang of it, and you will be writing js a lot faster and more compact with jquery. I never go without it!
What you really want is either offsetHeight or clientHeight. Try this:
window.onload = function(){
console.log(document.getElementById('foo').offsetHeight);
};
I'm experimenting with a third party library written on top of jQuery.
I noticed, for a number of their widgets, that when your source says, for example,
<div id="myWidgetInst" class="their-widget-class-0" ... </div>
Firebug shows that the resulting DOM element reads:
<div id="myWidgetInst" class="their-widget-class-0 their-widget-class-1 ..." ... </div>
How do they do it? Many thanks.
it's probably jquery !
there's probably a function running adding classes to the elements
Not sure I fully understand your question but when looking at the "regular" source of the website, this source doesn't show any modifications to the DOM that happened due to javascript modifications. Firebug does show these updates.
using jQuery, you can add/remove classes simply by using .addClass("className") or .removeClass("className") function on the element you want to modify
They would add classes to the element with jQuery. For example, if the plugin's purpose was to hide all elements on the page (innovative and highly practical, I know), they could use the following:
$(document).ready(function() {
$("*").addClass("my-widget-made-your-element-invisible");
});
With the CSS:
.my-widget-made-your-element-invisible { display: none; }
The methods in which you can manipulate the class attribute in jQuery include the following:
$("#elem").addClass("a"); // adds the class "a" to elem
$("#elem").removeClass("a"); // removes the class "a" from elem
$("#elem").attr("class", "a"); // gives elem a complete class of "a"
$("#elem").attr("class", ""); // removes all classes from attribute
Newbie in javascript.. Need a little help.
I have a SPAN or IMG that I want to fadeOut using javascript. However nothing happens when I do this:
// HTML
<span id='test_one'>Span Text Here</span>
<img src='img_src_here' id='test_two'>
// JavaScript
$(test_one).fadeOut();
$(test_two).fadeOut();
But if I do this, it functions correctly:
// HTML
<div id='test_one'>Span Text Here</div>
// JavaScript
$(test_one).fadeOut();
Am I just making or a silly mistake or am I going insane?
ThanksCoulton
Assuming you're using jQuery, your selector is incorrect:
$('#test_one').fadeOut();
Note that it should be a string (so single or double quotes) and use '#' to select by id. Documentation of selectors can be found on the jQuery site.
This should work:
// HTML
<span id='test_one'>Span Text Here</span>
<img src='img_src_here' id='test_two'>
// JavaScript
$('#test_one').fadeOut();
$('#test_two').fadeOut();
Edit
As to why it works with the div but not the img or span, I'm not entirely clear but as #Steve pointed out, it is possible to reference elements by using their ids as global variables. However, this is non-standard behaviour and only some browsers (notoriously IE) perform this mapping of element ids to the global namespace. IE also allows fetching of named elements via getElementById()! See this and this. I would suggest not depending on this behaviour.
Firstly, which library are you using? jQuery? (The fadeOut() method is not built in to JavaScript.)
Try setting the CSS property of your <span> or <img> to display: block or display:inline-block. This should make the fade out work. The reason it works on your <div> element is that it is a block element by default. <span> and <img> elements are displayed inline by default.
You must use the selectors efficiently like this
for "id" use:
$('#myId').fadeOut();
for classes like this:
$('.myClass').fadeOut();
and so on....
In your styles add this:
span#test_one { display:inline-block; }
And of course:
$("#test_one").fadeOut();
The code you've provided will work only in IE.
I would call it a stupid mistake (we all make them), your selector should be $('#test_two')
Look at: http://jsfiddle.net/ku8sa/