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.
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 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.
Learning from http://dojotoolkit.org/reference-guide/1.9/dijit/Dialog.html, I know how to create dijit/Dialog widget programmatically and dynamically. But now I need to update the implementation of a form within our application which has many inputs. I want to create a dijit/Dialog for the specific DIV, and hope its div elements will be this dialog's elements. How is it possible?
Please try the following code. This code, will remove your div node from it's parent. div will be moved into body tag.
dojo.require("dijit.Dialog");
var myDialog=new dijit.Dialog(
{
title:"Dialog Title",
content:dojo.byId("divNodeID")
}
);
myDialog.show();
Hope this helps you. Thanks!
If you surround your with the HTML that will create a Dialog, it should work.
For example, if your code is:
<form>
... some HTML ...
</form>
then consider coding:
<div data-dojo-type="dijit/Dialog" data-dojo-id="myDialog" title="MyTitle">
<form>
... some HTML ...
</form>
</div>
I'm looking for a solution, in which div content changes on page load, randomly. Much like a JavaScript image on page load. I have made further notes in the code below.
I could do a randomize the content like images with JavaScript on page load, but here it's divs and I'm not sure how to change content inside them.
<div class="row BSlots">
<div class="Grid_4 fl">
/* This would be the code which would change */
/* For example once it would be <div class="hello"><p>Hi</p></div> and the other <iframe="Link"/> */
</div>
<div class="Grid_4 fr">
<script>Widget2(); /* Don't mind this, loading an actual JS image randomizer here */</script>
</div>
</div>
Can this be achieved without using JS? If not, I'd appreciate a basic example which I could fiddle with :)
Yes it could be achieved without Javascript. It depends on which serverside-technology you use. You could create a template and insert serverside ransom image-tags.
It is possible too, to do it via javascript.
If you want to use jQuery, you could do something like:
$(function(){
$(".Grid_4 fl").html(generateRandomImageHtml());
});
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'})