JavaScript Foundation Reveal Modal Rendering - javascript

Working with JavaScripts foundation plugin, reveal (modal). I am trying to get the very basic modal to work, but I don't think I am calling it correctly. In my vendor directory I have copies of foundation.min.js and foundation.reveal.js and then I am just trying to do work through the first beginner example on the website http://foundation.zurb.com/sites/docs/reveal.html.
my index.html
<!DOCTYPE html>
<html>
<head>
<title>Testing Foundation</title>
<script type="text/javascript" src="vendor/jQuery.js"></script>
<script type="text/javascript" src="vendor/foundation.min.js"></script>
<script type="text/javascript" src="vendor/foundation.reveal.js"></script>
<script type="text/javascript" src="testing.js"></script>
</head>
<body>
<p><a data-open="exampleModal1">Click me for a modal</a></p>
<div class="reveal" style="visibility: hidden" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</body>
</html>
testing.js
$('#exampleModal1').foundation('open');
I am not sure where I am going wrong in my setup for this to work?

You're overthinking it a bit. The modal div should be inside the same html file as what is calling it.
Index.html:
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="css/foundation.css">
</head>
<body>
<div class="row">
<p><a data-open="exampleModal1">Click me for a modal</a></p>
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Go ahead and instantiate Foundation for the entire document.
app.js:
$(document).foundation()

Related

Lightbox Not Working Onto (Any)Browser

I watched a tutorial on a simple lightbox, and I am trying to figure out why it is not working for me. I am using http://lokeshdhakar.com/ version of the lightbox.
I do not know what the issue is. When I type it through the text editor I am using it just opens up the image in a new window. But just now in the code.io , it opened it up as the proper lightbox. I am so confused on what is happening.
Here is my code.
<head>
<meta charset="utf-8">
<title> Fine Art</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles5.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link href="fineart.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Roboto:400,100,400italic,500,900,300,500italic,900italic"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/lightbox.min.js"></script>
</head>
<body>
<h1 class="fineart"> B & W Photo </h1>
<div id="page"><!--beginning of sidebar-->
<div id="sidebar">
<div><img id="logo" src="img/logo.png"/>
</div>
<div>
<ul class="sb">
<li > Home </li>
<li > About </li>
<li > Works </li>
<li > Resume </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div><!--end of sidebar-->
<div class="container-a4">
<ul class="caption-style-4">
<li>
<img src="http://i68.tinypic.com/2re64y0.jpg" alt="blur">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1><a href="http://i63.tinypic.com/9lhaj9.jpg" data-
lightbox="photos">Blur</a></h1>
<p> Photo Series </p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
(here's the rest)
http://codepen.io/kasiariele/pen/jbjVgr
Like I said, I'm not sure why its working in the site editor, but when I save and refresh onto the browser it opens the image on a new page instead of the lightbox. Please help!
You need to order your javascript libraries correctly.
You are loading lightbox.min.js before loading jquery.min.js (which is a dependency for how you are using lightbox).
Here is a direct quote from the lightbox website.
If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
You should also load all of your scripts together right before your </body> closing tag, like so:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>

LESS client side

I'm trying to get this fiddle to work locally. It does not render properly. I've no idea why. The linked .less file is copied directly from the fiddle. The result of my markup is a blank page. I opted to use the CDN because when I downloaded the source I was unsure which less.js file to copy.
Here's the markup:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>radial-progress</title>
<link rel="stylesheet/less" type="text/css" href="styles/radial-progress.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
</head>
<body>
<div class="radial-progress" data-progress="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage"></div>
</div>
</div>
<script>
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
$('.radial-progress').attr('data-progress', Math.floor(95));}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
</script>
</body>
</html>
My guess is you are running off the C: drive instead of a local server so the relative protocol link is breaking.
src="//cdnjs..."
needs to be
src="http://cdnjs..."
Better yet look into running your own server. It is simple with python or node.

index.html not linking with handlebars

I'm having trouble using handlebars and understanding its connection to HTML. I wanted to copy a code I saw here and inserted the HTML in a file called index.html. However, I don't know if my syntax is wrong or I'm missing something, but my HTML file doesn't seem to be linking to the javascript file. It should display a button through which to connect to twitter and a pop-up window should appear, followed by a Twitter timeline. However when I click on the button nothing happens.
I realize this must be a really rookie mistake but I have tried everything and can't find the solution. Would someone please help me?
<!DOCTYPE html>
<html>
<head>
<title>Será que sim?</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="handlebars-v1.1.2.js"></script>
<script src="main.js"></script>
<script src="oauth.js"></script>
</head>
<body>
<div id="connect">
<button class="btn btn-primary" id="btn-connect">Connect with twitter</button>
<p>If nothing happen after the connexion, it's maybe because the twitter rate limit exceeded</p>
</div>
<div id="res">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for a term or hashtag" id="search" />
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="btn-search">Search</button>
</span>
</div>
<div id="search-res"></div>
</div>
<script id="entry-template" type="text/x-handlebars-template">
<ul id="timeline">
{{#each statuses}}
<li>
<img class="thumbnail" src="{{user.profile_image_url}}" />
<span class="content">
<span class="author">{{user.name}}</span>
<span class="text">{{link text}}</span>
</span>
</li>
{{/each}}
</ul>
</script>
</body>
</html>

Twitter Bootstrap modals

I've been freaking out for two days with this...
I've set up a page with the Bootstrap CSS, with the following code in the page head:
<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/jquery.js"></script>
In my body I have this:
<button class="btn btn-large btn-primary" data-toggle="modal" data-target="#modal-signin" data-backdrop="true" data-keyboard="true">Launch Modal</button>
<div id="modal-signin" class="modal hide fade">
<div class="modal-header">
×
<h2>Sign in <small>or sign up</small></h2>
</div>
<div class="modal-body">
<h3>Teste</h3>
</div>
</div>
In the Bootstrap docs this is what I have to do to get this working but when I click the button it doesn't do anything...
I don't know what the problem is...
I need urgent help
Thanks.
jQuery will need to be included first as the twitter bootstrap depends on it.
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/jquery.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="http://openclassifieds.googlecode.com/svn-history/r119/branches/2.0/themes/twitter/js/bootstrap-transition.js"></script>

How to propagate the text field to the modal dialogue?

I'm trying to 'add a link' functionality to my site. For that I'm using Modal plugin from Twitter Boostrap JS. On the main page there's only the 'link' field to fill, when a user clicks 'add link' button, a modal pops up, and the user sees the complete form to fill: link, title, tags. However, I want the link field to be pre-filled with the value from the previous step. It's similar to what happens when you 'save a link' on delicious.com.
However, the problem is that when I insert a javascript inside the modal dialog, the modal dialog stops working. Any ideas how to get around this problem? Thank you very much!
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- The Modal Dialog -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-body">
<form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>
Peter
<script type="text/javascript">
var linkURL = $('#linkURL').val();
//document.write("<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>");
document.write(linkURL);
</script>
<button type='submit' class='btn'>Add Link</button>
</form>
</div>
</div>
</div>
<div class="container">
<div class="wall-post">
<textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
<button data-controls-modal="modal-from-dom" data-backdrop="static" class="btn">Add Link</button>
</div>
</div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-modal.js"></script>
</body>
There's a couple of little things preventing your script from working Arman.
The first is you need to load your jquery and bootstrap scripts in the header. The browser interprets the page as it loads, and when the browser hits the bit that says $("#linkURL") it doesn't know what to do with it.
The second bit is you can only know the content that the user has entered into the LinkURL box, when they click the "Add Link" button. Therefore, you can only really populate the modal box after that.
Given this, you can leverage the Events that the model library presents to populate this for you.
If you put this all together, you get this :
<html>
<head>
<title>Example</title>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/bootstrap-modal.js" type="text/javascript"></script>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<script type="text/javascript">
$(document).ready(function(){
$('#modal-from-dom').bind('show',function(){
$(".modal-body").html($("#linkURL").val());
});
});
</script>
</head>
<body>
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Add Link</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Add Link
</div>
</div>
<textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Add Link</button>
</body>
</html>
Then you just need to modify the content a bit, and you should be right to go!

Categories