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.
Related
I'm trying to get snapscroll to work as per the documentation but can't quite get it to behave. It says "SnapScroll only works with containers set to 100% window height for single page sites."
Snapscroll: http://wtm.github.io/jquery.snapscroll/
Fiddle: http://jsfiddle.net/L649M/1/
$(function() {
$(".content").snapscroll();
});
The plugin requires that the children should be within a single wrapping element.
Your HTML shows that the .content are one wrapper for each .stuff.
Your HTML setup should be like this one:
<div class="content">
<div class="stuff" style="background-color:#D95153;"> </div>
<div class="stuff" style="background-color:#967D7D;"> </div>
<div class="stuff" style="background-color:#ADA1A2;"> </div>
</div>
You may also use jQuery in order to make each child a 100% height as the window.
Also, in order to work properly, call the plugin after it was constructed.
So after the plugin constructor you should place this:
$(function() {
$(".stuff").height($(window).height());
$(".content").snapscroll();
});
CHECK THIS UPDATED FIDDLE
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
For some reason jQuery doesn't seem to style ui elements I add dynamically from JS like so:
<div id="menu">
<h1 class="title">Menu</h1>
<div id="menu-buttons" data-role="controlgroup">
</div>
</div>
<script>
$('#menu-buttons').append('Star button')
</script>
Any ideas?
Keep in mind that the jqm styling is done via js and just appending html isn't enough. If you manipulate or add a buttons via js, you should call the refresh method to update the visual styling.
$('#menu-buttons, #menu-buttons').button().button('refresh');
My selectors are just a guess. Acualy you should give it own id or class for better selecting.
bootstrap popover currrently expects this:
hover for popover
$("#example").popover({placement:'bottom'});
..expects you to define data-content in template or dynamically pass it in jquery.
Is there anyway it can support format like below:
..the point being able to define content/title in blocks
<div id="example">
<div class="original-title">
Twitter Bootstrap Popover
</div>
<div class="data-content">
It's so simple to create a tooltop for my website!
</div>
<a>hover for popover</a>
<div>
$("#example").popover({placement:'bottom'})
Currently, no, since the popover script is basically extending the functionally of the tooltip script, but nothing is impossible. You can modify the script and add custom data-attributes to support your markup yourself, but then when updates come around you will have to do it again if you want to support your edits, or not update at all.
I think that can be possible using a javascript code to give the content of this divs to the elements but is not recommended.
$("a").attr("data-title",$(".data-title").html()).attr(".data-content",$(".data-content").html());
$('a').popover({placement:'bottom'})
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.