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
});});});
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 have a silly problem I think, but I've tried several answers found on the net and nothing works so far.
I'd just like to have an id=modal
Here's the code:
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Cabinet</title>
<link rel="shortcut icon" href="img/logo-min.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style-sheet.css">
<link rel="stylesheet" href="css/mystyles.scss">
</head>
<body>
<main>
<div class="container">
<section class="columns">
<div>
<button onclick="toggleClass()" class="button is-rounded is-info is-hidden-tablet section__btn__info">Plus d’infomartions...</button>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<p class="modal-card-title modal__title"></p>
</section>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
<script type="text/javascript" src="js/burger.js"></script>
</html>
script:
const modal = document.getElementById('modal');
console.log('modal', modal);
function toggleClass() {
modal.classList.toggle('is-active');
}
And modal return null,I can't get the id.
I don't see where you inject/insert your script.
You have to inject/insert your script at the bottom of your body, because when you call document.getElementById if the script is at the top, the html is not load so we can't find your id like :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- My super html -->
<script src="path/to" type="text/javascript"></script>
</body>
</html>
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 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.
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%.