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>
Related
My nav dropdown button for smaller screens (phones and tablets) is not working. I have included the JS files but its still not working. Can anyone help determine why this is not wanting to connect with my js files.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.mini.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Header -->
<header>
<nav class="navbar navbar-default navbar-fixed">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">AffAttraction</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>Blog</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<form class="navbar-form navbar-right">
<input type="email" name="email" class="form-control" placeholder="Email" required="">
<input type="password" name="password" class="form-control" placeholder="Password" required="">
<button type="submit" class="btn btn-green">Login <span class="glyphicon glyphicon-log-in"></span></button>
</form>
</div>
</div>
</nav>
</header>
<!-- Header -- >
<!-- Showcase -->
<div id="showcase">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1><span class="highlight">Performance</span> Based Marketing</h1>
<p>Do you have traffic? Let us help you monetize and profit from your websites, apps, games, blogs, and more!</p>
</div>
</div>
</div>
</div>
<!-- Showcase -->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.mini.js"></script>
</body>
</html>
I have included it at the top under my CSS links if you think that could be a problem. I also tried putting it under the body tag and the html tag. I am lost on what to do. Those files do exist!
I tried to run your code, replacing your local bootstrap stylesheets with the CDN version. When I loaded it, I crashed because jQuery was missing. After adding jQuery inside the head, it worked:
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
If you want to connect the Bootstrap CSS and JS files on your HTML, you can easily do that with Bootstrap CDN.
Add this this to your <head> as Bootstrap Stylesheet
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
And this to your <body> as Bootstrap JavaScript link
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
Also add JQuery for Bootstrap to work properly
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
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()
I am working on a single page application called 'bookMarks' using HTML+CSS+jQuery as the front end and Django as my back end. I created a Django project and put my app.html+app.js+app.css+jquery.js in /static.
My question is: I would like my view to return the app.html as it should be without using Django template. I have tried this:
#app/views.py
from django.shortcuts import render_to_response, HttpResponse
import urllib
def index(request):
index = urllib.urlopen('static/app.html').read()
return HttpResponse(index)
#static/app.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My Bookmarks</title>
<link type="text/css" rel="stylesheet" href="app.css">
<script src="jquery.js"></script>
<script type='text/javascript' src="app.js">
jQuery.noConflict();
</script>
</head>
<body>
<div id="title">
Easy-Save Bookmarks
</div>
<div class="left">
<h3 class="tag">News</h3>
<div>
<p> A book mark here!</p>
</div>
<h3 class="tag">Reading</h3>
<div>
<p> A book mark here!</p>
</div>
<div id="newTag"></div>
<div>
<form name="addTagForm">
<input type="text" name="newTag">
<input id="addTag" type="button" value="Add a new tag">
</form>
</div>
</div>
<div class="right">
</div>
</body>
</html>
But it seems that all JS and CSS effects are ignored.
Could someone help me to fix this?
Finally I found that's because I didn't include my js+css files in the absolute way.
Now when I put my HTML+JS+CSS files in my_app/static/, and include absolute
The view will return my html correctly.
I'm trying to make some app in TideSDK using Semantic-UI (http://semantic-ui.com/). When I open my page in Chrome it works correctly:
chrome http://krakow45.pl/test/chrome.png
but when I'm launching my code with TideSDK it looks like:
tide http://krakow45.pl/test/tide.png
How you can see, some elements are missing and it isn't work correctly.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<!-- JavaScript includes -->
<script src="vendor/jquery.js"></script>
<script src="js/app.js"></script>
<script src="vendor/semantic/semantic.js"></script>
<!-- /JavaScript includes -->
<!-- CSS includes -->
<link rel="stylesheet" type="text/css" href="vendor/semantic/semantic.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- /CSS includes -->
<title>xxx</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- PAGE: NEW_REPORT -->
<div id="NEW_REPORT_fieldsContainer" class="ui segment">
<div class="ui input">
<input id="NEW_REPORT_firstName" type="text" placeholder="Imię">
</div><br /><br />
<div class="ui input">
<input id="NEW_REPORT_lastName" type="text" placeholder="Nazwisko">
</div><br /><br />
<div class="ui left icon input">
<input id="NEW_REPORT_date" type="text" placeholder="26/03/2015">
<i class="calendar icon"></i>
</div><br /><br />
<div id="NEW_REPORT_buttonNext" class="ui animated button">
<div class="visible content">Dalej</div>
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
</div>
</div>
<!-- /PAGE: NEW_REPORT -->
</body>
Remember that TideSDK uses an old version of webkit. I'm pretty sure you'll have to prefix your CSS3 rules (-webkit-). But also keep in mind that all the CSS3 rules cannot be used, but for now I haven't encounter major CSS3 issues.
Just one thing is bothering me, it's the old developper console..
TideSDK seems not to be that amazing choice to develop those apps anymore :( Sadly after they started to develop TideKit, no support was given.
This last version should support all CSS 3 elements but it actually doesn't.
Glad you found your way out :)
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!