Let's say we have this:
<article>
<div id="zoo">...</div>
</article>
I want to be able to add a class to <article> using MooTools.
If I was using Jquery, I would use the following code:
$("div#zoo").parent().addClass("blog");
(http://jsfiddle.net/yannisdran/Eq2tY/)
resulting this in the DOM:
<article class="blog">
However, I need it in MooTools. How do I have to express this code?
$('zoo').getParent().addClass('blog');
And here is the fiddle...
JSfiddle
Related
I am fairly new to using html and css beyond the minor basics. I am trying to make a loading page for a website and can't seem to find an example for my exact case.
Here is the html I want to show only on loading:
<section id="hero">
<div id="mast">
<h1><img src="data:image/image/gif;base64/=" alt="bus" /></h1>
<h2>Let's Travel</h2>
</div>
<div class="arrow"><a data-scroll data-speed="750" data-easing="easeInOutCubic" data-url="false" href="#navigation"><i class="fa fa-angle-down"></i></a></div>
</section>
I saw an example on stackoverflow loading class of html like this:
<script src="js/jquery-1.12.3.min"></script>
<script type="text/javascript">
$(window).load(function() {
$(".classname").fadeOut("slow");
})
</script>
Is there away to have a section load by the id instead of just a css class?
In jQuery, you can use CSS style selectors. So, if I want to select all elements from a class I can do $('.classname'), if I want to select an element by id: $('#idname'), if I want to select all <p> tags, I could do $('p'). Hell, I could select all <bold> tags within <p> tags by doing $('p > bold').
Anyway, I'd take a look at how CSS selectors work, and then you'll now how to select anything in jQuery: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
In your case, I'm guessing you want to use $('#hero').fadeOut()
I have this html code:
<article class="about">
<header>
<div class="hed"></div>
</header>
<div class="contentt"><content>
</content></div>
</article>
and this js:
$(".hed").unbind("click").click(function(){
$(".contentt", this).hide();
}
I need hide class contentt, when I click on class hed, but I have more article, so I need hide that with using classes. Some ideas?
.contentt is not a descendant of .hed, so your approach won't work. Here is the better way:
$('.hed').unbind('click').click(function() {
$(this).closest('article').find('.contentt').hide();
});
Here the script gets the closest article parent and finds the .contentt block in it's descendants.
I would like to use the jQuery before() with JQuery 1.3.2, is this possible?
I have a div like this:
<div id="wrapper">
CONTENT HERE
</div>
That I would like to use jQuery before() to add a container around it.
<div class="container">
<div id="wrapper">
CONTENT HERE
</div>
</div>
I do not have access to the HTML, this is in a SaaS platform that determines all of that stuff. So, using jQuery to insert a new div around the wrapper seems like the way to go.
Thanks!
Look into the jquery.wrap method.
$('#wrapper').wrap('<div class="content"></div>');
As mentioned by the others in the comments above.
So I have something like
<div>
<!-- other stuff then-->
<button>Hey</button>
</div>
and I'd like to make that (using Javascript/JQuery)
<div>
<!-- other stuff then-->
<div class="bw">
<button>Hey</button>
</div>
</div>
Is that possible? I couldn't find anything with material on it online…but, I'm a totally JS noob, so I'm probably not using the right terminology. Thanks!
You can use .wrap() for this:
$("button").wrap("<div class='bw'></div>");
You can test it here, for wrapping multiple elements, use .wrapAll(), here's a full list of the wrapping functions.
Basically what I have is this:
<body>
<div class="class1">
</div>
<div class="class2">
</div>
<div class="class3">
</div>
...
</body>
I have no idea why the site creator used classes instead of IDs (they're unique), but it doesn't really matter as I'm writing a GM script and so getElementsByClassName('')[0] effectively does the same thing.
How can I insert an element between the first and second div?
Create your own insertAfter function
you can use JQuery it very simple
$(".class1").after( document.createTextNode("Hello") );