jquery function applying css to image - javascript

Well this is my code:
(function($) {
var images = $( "img" );
$("div.featured-card-box").find(images)[1].css("display", "none");
});
It is supposed to apply some css to an image but it doesn't work and as I'm very new to this I have no idea what's wrong. Big thanks for any answers!

Your code looks a little more complicated that necessary:
1) Note that jQuery [1] will be the second image because it starts counting at 0. It will also be a DOM object instead of a jQuery one, so you will not be able to use jQuery methods on it (like you are trying to do).
2) With jQuery, you can access the images using the same method as CSS selectors:
$("div.featured-card-box img")[1]
Assuming you want the second image in the div with the class of "featured-card-box" to be hidden, this should do the trick:
$("div.featured-card-box img:eq(1)").hide();
Although, you could equally well replace .hide() with .css('display','none')
Edit: Here's a Fiddle: https://jsfiddle.net/vf8d9ske/

Related

Why the append body divs are removed while i used getElementById Removed Script for other ID

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.

How to remove this HTML?

I'd like to remove the following HTML:
Buy It
This HTML is added dynamically (not by me).
How is this done in jquery? Or is it better done in AngularJS?
i would solve this by using css..
.css-button {display: none !important} 
since it is added dynamically you would need a trigger function or search repedetly for that special container -> slows down the page
//EDIT with jQuery if necessary
if you really want to do it with jquery, is it always a certain container where the button appears? you could do something like this:
function removeButton() {
$('.css-button').remove();
}
// Listen DOM changes
$('.theContainer').bind("DOMSubtreeModified", removeButton);
see here: http://davidwalsh.name/dom-events-javascript
You can use .remove():
$('.css-button').remove();
In this case you should use :contains to find the button, keep in mind that is a string search:
$( "a:contains('Buy It')" ).remove()

Replacing in-line div style

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/

Values of "class" attribute implicitely expand for certain markup elements

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

jQuery stop append removing div

I am copying a div into another div using append. However it removes the original. I tried to use clone but it seems to only work with appendTo. But appendTo breaks my layout so I have to use append with works fine.
I am wrong that clone will not work with .append and is there another way to stop the div removing?
Thanks
$('.compareWrapper').append(htmlStr)
foo.appendTo(bar)
Take foo and append it to bar.
foo.append(bar)
Take bar and append it to foo
Syntactically they're different. You have to think of what's the target object and what's the destination object. So, having said that you can move ahead in one of two ways:
var $clone = $('target').clone();
$clone.appendTo('wrapper');
$('wrapper').append($clone);
Both do the same thing.
The following does not work?
$('.compareWrapper').append($(htmlStr).clone());
I don't see any reason for .clone() not working with .append(). The code should be:
$('.compareWrapper').append($(htmlStr).clone());
Is that what you tried? From the name of your variable, I'm assuming htmlStr is a string, not a jQuery object.

Categories

Resources