I'm pretty new to coding, so please pardon my inexperience.
I'm currently working on making a website, and want to have button modals. I can't seem to get it working, and have experimented with it for at least a few hours. This is what I have written in my html file, which was taken from the Twitter Bootstrap site:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Am I missing something here? Do I need add something else? The bootstrap site said to "call the modal via javascript", but I didn't know where to put the $('#myModal').modal(options). I placed it in the .html AND the .js file, but neither attempt worked.
The .html file already has
<script src="js/bootstrap-modal.js"></script>
along with all the other plugins, but this doesn't seem to be doing anything. It's also worth noting that I am working locally on my computer.
I'm sure this is a very easy question, but ANY help would be greatly appreciated.
EDIT:I managed to get it working. Looked like my problem was that I was sourcing bootstrap-modal.js, when really I only had bootstrap.js. I made a new file called boostrap-modal.js with the code, and it worked fine.
However, I'm still unable to get the fade in transition. I've used the bootstrap-transition.js files but still can't seem to get it down. Additional help would be greatly appreciated.
* Updated the bootstrap stylesheet path on the fiddle, it changed since I wrote this answer.
You need to include the jQuery script before the bootstrap-modal.js script file for the plugin to work, here is the script straight from googles CDN that you can include freely in your page, just make sure to include it before any js that you might have:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
You only need to call the script if you want it to display when your page loads, otherwise you just need to have the proper data-* attribute and href reference in your modal button which you already have:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
You can include all scripts at the end of your <body> tag for faster content loading, the same way the twitters bootstrap demo page has it.
Here is a demo of a modal page:
http://jsfiddle.net/3v2zg/626/
Related
I want to create a picture management through my ActiveAdmin administration panel.
I use Carrierwave to upload images from my administration panel, however I fail to display these images as background-image within my CSS code... :/
...because of the following error:
couldn't find file '<%= Image.find(1).path %>'
Here is my CSS:
header{
background-image: asset-data-url("<%= Image.find(1).path %>");
}
My HTML:
<header>
<div class="header-content">
<div class="header-content-inner">
<h1>Your Favorite Source of Free Bootstrap Themes</h1>
<hr>
<p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p>
Find Out More
</div>
</div>
And the image administration view:
I don't understand how do I link my image to the background-image CSS property?
Calling Rails Database queries in CSS stylesheet will not work. Instead you can rework on the HTML code like the below,
<header style="background-image: url(<%= Image.find(1).path %>);">
and remove the background image code in the CSS.
Now that applyAuthorStyles is deprecated the font-awesome icons no longer show up. This question how to incorporate font awesome in a dart component? has some useful information but I'm unable to get the untested suggestions to work.
Here is a template from a very simple mortgage calculator component project:
<polymer-element name="plus-payment-schedule">
<template>
<style>
</style>
<fieldset>
<legend>Payment Schedule</legend>
<label><span class="fa fa-calendar fa-fw" style="width:1.5em"></span> Start Date</label>
<plus-date-input id="date"></plus-date-input>
<div class="payment-schedule">
<table id="schedule_table">
</table>
</div>
</fieldset>
</template>
<script type="application/dart" src="payment_schedule.dart"></script>
</polymer-element>
Prior to polymer 0.10.0, using the suggested applyAuthorStyles patch this code worked. Meaning, by applying those font-awesome classes (class="fa fa-calendar fa-fw") the font-awesome icons showed up. I've removed applyAuthorStyles and made other polymer init changes required for the update. The component works fine except the font-awesome icons no longer show up.
When I run this mortgage calculator app and look in the inspector, I see that those classes are applied to the span. So I guess the issue is the definition of the classes (fa fa-calendar fa-fw) is not available?
Any information on how to make this specific scenario work?
The component is hosted here
applyAuthorStyles is deprecated. Thus you have to include stylesheets within <template>.
The problem is that #font-face does not work inside polymer elements at the moment. The solution is to include #font-face in the regular document and to add the classes to your polymer or include font-awesome.css in both places.
This should solve it.
See also:
- https://code.google.com/p/dart/issues/detail?id=18581
- https://github.com/Polymer/docs/issues/434
Regards, Robert
Consider using the Font-Awesome Polymer Iconset or generate your own subset using this generator
You'll be able to use FA in core-icons and other icon based elements, like this:
<core-icon icon="fa:calendar"></core-icon>
There is an element for that.
Use this: https://www.npmjs.com/package/fontawesome-iconset:
get the icons you need from fa-icons.html
put it in a new iron-iconset-svg
import iron-iconset-svg and iron-icon
use it like other iron-icon
You can view how to use here: https://elements.polymer-project.org/elements/iron-icon
I am following Michael Hartl's Ruby on Rails tutorial currently but decided to work with the newest Twitter Bootstrap 3. I am just experimenting around with the grid system but I can't seem to get the cols, no matter if it is col-sx-, col-sm-, col-md- or col-lg- to appear beside each other. I am using the sass-rails 4.0.1 gem and bootstrap-sass 3.0.3.0.
Here's my code:
<div class="container">
<div class="row">
<div class="col-md-1">
<h1>L</h1>
</div>
<div class="col-md-1">
<p>HH</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<h1>LOGO</h1>
</div>
<div class="col-md-7">
Some Link
Some Link
</div>
</div>
</div>
and this is how it is rendered: http://imgur.com/oCemGWS
How do I get the columns to appear beside each other as they should?
Your HTML code is correct from Bootstrap's perspective, so your problem is most likely coming from how you load the bootstrap library.
Do you have access to other Bootstrap features?
If yes, then check if you're not overriding the .row class with another library (jquery-ui for instance).
If no try one of these:
Check if your scss/sass stylesheet has #import "bootstrap"; (needed for bootstrap-sass to work as indicated its manual)
Try to load Bootstrap locally: place the bootstrap.js and bootstrap.css files in vendor/assets/javascripts and vendor/assets/stylesheets and add them in your application.js file (//= require bootstrap) and in your application.css file (*= require bootstrap)
Bootstrap is a 12-column grid system. Each row is gowing to have to add up to 12. You have (2) 1 Columns stacked on a 5 and 7. The sum of 5 and 7 is 12. By the looks of it, you're trying to have a nav bar.
Checkout the bootstrap examples on how this works:
http://getbootstrap.com/css/#grid
Here is a decent example of a starter template from Start Boot Strap
http://startbootstrap.com/landing-page
Here is the index file:
https://github.com/IronSummitMedia/startbootstrap/blob/master/templates/landing-page/index.html
Check out the nav-bar. Also notice how each row or container adds up to 12?
I am new to JQuery Mobile and need to build a fairly large mobile website with it (15+ pages). My problem is that I cannot seem to figure out how to template with JQuery Mobile. Example: I don't want to have all of my JavaScript and CSS includes in on EVERY page, for example. I would like a template that all of my pages reference, so when I need to add a new include, I just add it to this template.
I come from an ASP.NET background, so in ASP.NET I would just create a Master Page, but I can't figure an equivalent to this in JQuery Mobile html pages.
Thank you in advance.
edit: I am using JQuery Mobile with PhoneGap/Cordova.
You can build your application using RequireJS, Backbone and jQuery Mobile. RequireJS is a Javascript and module loader, and Backbone provides models with key-value bindings, collections and views.
Here is a simple tutorial to start developing your application using Phonegap.
If you're using Phonegap you may as well put all the HTML into a single file (your links would be id selectors - href="#contact").
Then for some basic templating I am currently working on a Phonegap/JQM app that reuses the header, footer and sidebar HTML between pages by copying a HTML footer, header and sidebar onto each page at runtime.
So my html looks something like this:
<!-- reusable content - this is added to pages using JS -->
<div style="display:none">
<div data-role="header" data-position="fixed" class="mainheader" data-id="mainheader">
<h1>App Name/h1>
</div><!-- /header -->
<div data-role="footer" data-position="fixed" data-id="mainfooter">
<div data-role="navbar" class="main-nav">
<ul>
<li>Contact</li>
...
</ul>
</div>
</div><!-- /navbar -->
<div data-role="panel" class="sidebar" data-position="left">
<!-- sidebar content -->
</div>
</div>
<!-- /end of reusable content -->
<div id="cars" class="content-page" data-role="page">
<!-- header gets added here -->
<div data-role="content">
<!-- page content would go here -->
</div>
<!-- footer and sidebar get added here -->
</div>
and in my JS looks like this:
initializeReusableContent : function () {
//make sure the panels and nav bar are on each page
var header, footer, sidebar;
header = $('.mainheader').remove();
footer = $('.footer').remove();
sidebar = $('.sidebar').remove();
$(".content-page[data-role=page]").prepend(header).append(footer).append(sidebar);
},
You could then use something like https://github.com/janl/mustache.js for your content templating.
If you have more complicated needs a templating language would probably better (Backbone, Angular etc).
I am using jquery-mobile for 1 of my applications in Rails 2.3.4.
The following code
li data-icon="plus" data-iconpos="right"><%= link_to "Post", [my parameters] %>
does not show the data icon, "plus". I am wondering why.
Any ideas please.
The original question is a little unclear to me, but from the comments, it looks like you're trying to find out how to change the icon in listview from the standard arrow.
To do this, add a data-split-icon property to the ul tag - setting it to one of the icon names from http://jquerymobile.com/demos/1.0a3/docs/buttons/buttons-icons.html
For example:
<ul data-role="listview" data-inset="true" data-split-icon="star">
<li><h3><a>list item 1</a></h3><a>link title</a></li>
<li><h3><a>list item 2</a></h3><a>link title</a></li>
<li><h3><a>list item 3</a></h3><a>link title</a></li>
</ul>
Instead of the standard arrow icon, that gives you a list with pretty stars.
Hope that helps
I had the same problem myself - it is due to the fact that Rails uses a 1.4 version of jQuery by default - you need to be using jQuery 1.5
If you want to get started quickly then use the jQuery CDN hosted files:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js">