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'})
Related
I've noted that whenever I create a Foundation 6 Reveal Modal the actual HTML is placed at the bottom/end of the document regardless of where the actual reveal modal is placed in my HTML code.
Although this is fine most of the time I've ran into an edge case where I need to place a form partial inside a modal. The issue is that the modal is placed outside the form_tag as the Foundation Javascript moves it to the end of the HTML document. I've been able to work around it but it makes my code much more complicated than it needs to be.
Is there any easy fix to change where the foundation modal is placed in the HTML document? Is there any particular reason that modals are placed at the end of the HTML document? Unfortunately I could not find anything on the docs, Foundation forums or SO.
Example psuedocode:
<div id="first-div">
<div class="reveal" id="modal" data-reveal></div>
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
Output in browser is:
<div id="first-div">
<!-- this is empty now -->
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
<!-- reveal modal is moved to end of HTML document -->
<div class="reveal-overlay">
<div class="reveal" id="modal" data-reveal></div>
</div>
Edit:
Attached a Codepen noting the output issue. The modal opens and closes as exected but when inspecting the output HTML the reveal modal is moved to the end of the HTML document - it's actually below the tags at the bottom.
https://codepen.io/matt_hen/pen/RZZBQM
You need to specify where your modal needs to pop up. I forked your codepen
$('#first-div').foundation('reveal', 'open');
https://codepen.io/titse/pen/ayygrW
Let me know if you need more help
This works on Foundation 6:
You need to override the Foundation default appendTo variable for Reveal. That can be done the following ways:
Add a data-append-to="div#first-div" tag on the Reveal div to specify the parent element for the Reveal modal and, if applicable, overlay divs. This allows you to change the parent element individually for each Reveal modal.
Source: Foundation Documentation
Change the default value for the Reveal module globally by specifying the override default value when you initialize Foundation with Foundation.Reveal.defaults.appendTo = "div#first-div"
Source: Foundation Docs
In my testing, setting the parent to a smaller div inside the body element did not adversely affect the positioning of the modal or the display of the background overlay.
Specifying the parent in the call (e.g. $('#myDiv').foundation('reveal','open); does not work in the current release of Foundation.
I have a template popup being loaded in via a controller function. Is there a way I can fade in the template. I have tried adding a separate class, hooking it to the ng-show class.
HTML:
<div class="contact-form">
<div ng-include="contactTemplate" class="fade"></div>
</div>
JS:
$scope.contactForm = function() {
$scope.contactTemplate = 'sections/popups/contact.html';
};
You could use ngAnimate and add simple css animations (there are a lot of good tutorials out there).
The available animations can be found in the ngInclude docs at "Animations".
PS: To nicely format code blocks insert a linebreak and indent code by four spaces
I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.
First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});
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.
Be gentle I am new to this web dev game. I'm just trying to learn.
CODE:
<h4>Monday</h4>
<div id="first_accordian">
<h5>First Section</h5>
<div>
Some stuff.
</div>
<h5>Second Section</h5>
<div>
Some stuff.
</div>
</div>
<h4>Tuesday</h4>
<div id="second_accordian">
<h5>First Section</h5>
<div>
Some stuff.
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("[id$=_accordian]").accordion({ collapsible: true, active: false });
});
</script>
Obviously this is just a simplification of a partial view I have in and ASP.NET MVC3 app. But I am using jQuery UI and the accordion widget, so you will need to reference those for the code above to work.
QUESTION:
I have an issue here that when I expand an accordion element it will overlay any HTML underneath it. The behaviour I want is that I have a set of stacked accordions that all shift up or down when any element is selected in any of the accordions.
Does anyone know how I can do this with stacked accordions? Or thinking laterally. Is there any way I can add static headers that aren't accordion elements inline to the accordion (show above as the headers above each accordion; Monday, Tuesday)?
Is there are resizing event of something I should bind to? I'm at a loss as to where to start, any pointers welcome!
EDIT: Have just copied my own code into a file to check and experiment... and it works exactly how I need it to. But it doesn't in my app. So I'm guessing this must be down to something else going on outside of my code.
So... New question: What could stop something from resizing and creating this overlay problem?