I have this code:
HTML:
<button id='ro' class='ro'></button>
<button id='eng' class='eng'></button>
JAVASCRIPT:
$('#ro').click(function(){
$('h1').text('Bine aţi venit!');
$('p1').text('Pathifier îşi propune să ajute tinerii din întreaga ţară să işi găsească o facultate cu profilul dorit lăsându-le libertatea să-şi aleagă oraşul potrivit.');
alert('ma-ta');
});
$('#eng').click(function(){
$('h1').text('Welcome');
$('p1').text('Pathifier s goal is to help teens all around Romania to choose the university that fits them best, also allowing them to find the perfect city which has that university ');
});
The two buttons are meant to change the language of the page but I they are not working. Why? What did I do wrong?
My javascript code:
$(document).ready(function () {
//var cow = 'Check out this image <img src="http://image.com" style="border:2px solid #ccc;" /> and one with a width <img src="http://image.com" width="700" align="left" />';
$('#ro').click(function(){
$('h1').text('Bine aţi venit!');
$('p').text('Pathifier îşi propune să ajute tinerii din întreaga ţară să işi găsească o facultate cu profilul dorit lăsându-le libertatea să-şi aleagă oraşul potrivit.');
alert('ma-ta');
});
$('#eng').click(function(){
$('h1').text('Welcome');
$('p').text('Pathifier s goal is to help teens all around Romania to choose the university that fits them best, also allowing them to find the perfect city which has that university ');
});
});
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>One Page Wonder - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/one-page-wonder.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<button id='ro' class='ro'></button>
<button id='eng' class='eng'></button>
<h1>KLJLKJ</h1>
<p>lkasjdflsj</p>
<h1>KLJLKJ</h1>
<p>lkasjdflsj</p>
<h1>KLJLKJ</h1>
<p>lkasjdflsj</p>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- my js -->
<script src="js/test.js"></script>
</body>
</html>
This works. Make sure you are including jQuery and your js file after jQuery.
Related
I have issues with bootstrap tooltip title when I'm using data-html="true" for the title. I'm using html tags in tooltip title for font styles and line break. For this I used data-html="true". However when i used < (less than) icon, tooltip title text not displayed after less than icon (<)
<html><head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Tooltip
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
<html><head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a href="#" data-html="true" data-toggle="tooltip" data-original-title='title with <br/> special character < less than over me Hooray!'>Tooltip </a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>`
Just give space between special character and word. Othere it will parse as html tags or use <.
I use bootstrap and have a simple layout including a button. I tried the code solution from here but it is not working. This is my code, it is not even showing 'test' after clicking the search button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
<title>Search</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
<script type="text/javascript">
$('#search').on('click', function (e) {
document.getElementById('#output').innerHTML = "test";
var EventSearch = require("facebook-events-by-location-core");
var es = new EventSearch({
"lat": 40.710803,
"lng": -73.964040
});
es.search().then(function (events) {
console.log(JSON.stringify(events));
document.getElementById('output').innerHTML = JSON.stringify(events);
}).catch(function (error) {
console.error(JSON.stringify(error));
});
})
</script>
<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When using document.getElementByid(), you dont need the # before the id.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
<title>Search</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
<script type="text/javascript">
$('#search').on('click', function (e) {
document.getElementById('output').innerHTML = "test";
// I removed the event search code because I do not have the files and it was breaking the example.
})
</script>
<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
First of all, don't use the "#" sign when using document.getElementById. Secondly, you need to add the "require" reference.
Check the console message:
$('#search').on('click', function (e) {
document.getElementById('output').innerHTML = "test";
var EventSearch = require("facebook-events-by-location-core");
var es = new EventSearch({
"lat": 40.710803,
"lng": -73.964040
});
es.search().then(function (events) {
console.log(JSON.stringify(events));
document.getElementById('output').innerHTML = JSON.stringify(events);
}).catch(function (error) {
console.error(JSON.stringify(error));
});
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
I am currently working o a quote APP, Jquery getJson to inflate the elementes. I'm having trouble integrating twitter's share button into my code. For some reason I cannot get it to pick up the text values from the API source when I use the attr function to change the tweet URL data-text value.When I click the tweet button all I got is a new tweet window with the hardcoded text. My intention is to set the quote + author in the text field. Any ideas to make it work? I did a lot of research and experimentation with the tweet event binds but no success
My HTML code:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5-3.6-respond-1.4.2.min.js"></script>
<![endif]-->
</head>
<body>
<div id="btn-container" class="container">
<p><a id="btn1" class="btn btn-primary btn-lg" href="#" role="button">Quote Me</a></p>
</div>
<div id="quote-container" class="container">
<blockquote id="quote">Never do anything yourself that you can hire someone else to do, especially if they can do it better.
</blockquote>
<footer id="author">Bill Bernback</footer>
</div>
<div id="share-container" class="container">
Tweet it
</div>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
My JS code:
<pre><code>var quote;
var author
$(document).ready(function(){
$(".btn").click(function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(getQuote) {
quote = getQuote[0].content;
author = getQuote[0].title;
$("#quote").html(quote);
$("#author").text(author);
$('.twitter-share-button').attr('data-text',author); // not working
});});});
I'll preface this by saying that I'm fairly new to Javascript in general, but I'm getting there. I've got an app that's written with Node.js, Express, and uses Bootstrap for the front end.
I'm trying to use Selectize to gain some additional functionality with one of my forms, but I can't get it to work at all. The text input field is present, but it's lacking the functionality/styling that I'm looking for. I'm using Handlebars for templating, and I think my issues may have something to do with that.
I'm lost at this point, and any advice would be super useful.
Here's my simple testing page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/stylesheets/styles.css" type="text/css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto:300|Lora:700" rel="stylesheet" type="text/css">
<!-- Icon -->
<link href="/images/favicon.ico" rel="icon">
<!-- Selectize.js -->
<link href="/stylesheets/selectize.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Testbed2</h1>
<br>
<div class="demo">
<input type="text" value="test" class="demo-default selectized" id="input-tags" tabindex="-1" style="display: block;">
</div>
<script>
var data = [ "option 1", "option 2", "option 3" ];
var items = data.map(function(x) { return { item: x }; });
$('#input-tags').selectize({
delimiter: ',',
persist: false,
maxItems: 2,
options: items,
labelField: "item",
valueField: "item",
sortField: 'item',
searchField: 'item'
});
</script>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
To keep your code style and place your scripts at the end of your document, you can try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/stylesheets/styles.css" type="text/css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto:300|Lora:700" rel="stylesheet" type="text/css">
<!-- Icon -->
<link href="/images/favicon.ico" rel="icon">
<!-- Selectize.js -->
<link href="/stylesheets/selectize.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Testbed2</h1>
<br>
<div class="demo">
<input type="text" value="test" class="demo-default selectized" id="input-tags" tabindex="-1" style="display: block;">
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
var data = [ "option 1", "option 2", "option 3" ];
var items = data.map(function(x) { return { item: x }; });
$('#input-tags').selectize({
delimiter: ',',
persist: false,
maxItems: 2,
options: items,
labelField: "item",
valueField: "item",
sortField: 'item',
searchField: 'item'
});
</script>
</body>
</html>
This way will prevent a jquery error but I'm unfamiliar with selectize to know if this script is working as you intended.
I tried to develop an electronic newspaper app i generate the embed html code. it show but all attempts to make it zoom prove abortive.
pls below is the source code if any one can HELP
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/icons.min.css">
<title>Blank App Designer Packaged Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, usre-scalable=yes">
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<!-- for your event code, see README and file comments for details -->
<script src="js/init-app.js"></script>
<!-- for your init code, see README and file comments for details -->
<script src="xdk/init-dev.js"></script>
<!-- normalizes device and document ready events, see file for details -->
<script type="application/javascript" src="app_framework/2.1/appframework.js"></script>
<script type="application/javascript" src="app_framework/2.1/appframework.ui.js" data-ver="1"></script>
</head>
<body id="afui">
<header class="wrapping-col wrap-element uib_w_1 with-back" data-uib="app_framework/header" data-ver="2" id="af-header-0">
<a class="button backButton">Back</a>
<h1>ETRIBUNE</h1>
</header>
<div id="content" class="uwrap">
<div class="upage vertical-col panel" id="mainpage" data-header="af-header-0" data-footer="none">
<iframe id="bloxFrame" src="http://static.issuu.com/widgets/shelf/index.html?folderId=e9a9ca5f-d74f-49e8-8b3d-e57b7e383f76&theme=theme2&rows=2&thumbSize=medium&roundedCorners=false&showTitle=true&showAuthor=true&shadow=true&effect3d=true"
name="bloxFrame" width="300px" height="400px" frameborder="0" scrolling="auto">
</div> </div> </body>
</iframe>
</div>
</div>
</body>
</html>
Here is a fiddle showing how to zoom an HTML element. This code can easily be applied to your situation by simply targeting an element inside the iframe (probably the body of the document).
https://jsfiddle.net/xzn1s7ks/1/
here is the relevant function:
function zoom(element, level){
if (element.style){
if (element.style.zoom != undefined)
element.style.zoom = level;
if (element.style.MozTransform != undefined)
element.style.MozTransform = 'scale(' + level + ')';
if (element.style.WebkitTransform != undefined)
element.style.WebkitTransform = 'scale(' + level + ')';
}
}
The element should be the element you want to zoom and the level is a decimal value. 1.0 is the default size, 1.5 is 150%.