Link in typed.js text - javascript

How do i put link in typed.js script? I need Contact me, to be linked to contact page.
<script src="js/typed.js"></script>
<script>
$(function(){
$(".element").typed({
strings: ["Welcome to my Website.", "Random text... Contact me"],
typeSpeed: 0
});
});
</script>
**HTML**
<div class="col-md-12 col-xs-12">
<h1 class="element"></h1>
</div>

Use the callback parameter.
Example:
$(function() {
$('#awesome').typed({
strings: ["Welcome to my Website.", "Random text... Contact me"],
typeSpeed: 0,
callback: function() {
$('#awesome').html('' + $('#awesome').html() + '')
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/js/typed.js"></script>
<div class="col-md-12 col-xs-12">
<h1 class="element" id="awesome"></h1>
</div>

Related

i am trying to initiate a popup/modal screen

I am developing a chat screen and i want to initiate a modal when an option on the screen is selected, i am unable t do it. kindly help me.
here is my html code where you can insert the option code.
<section id="demo">
<div class="vertical-align">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-xs-offset-0">
<div class="card no-border">
<div id="chat" class="conv-form-wrapper">
<form action="" method="GET" class="hidden">
<select data-conv-question="Here is my features! Enjoy.">
<option value="google" data-callback="googleMap">Google Map</option>
<option value="bing" data-callback="dawaai">Medicine Comparison`</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
The function called when data-call-back is:
function google(stateWrapper, ready) {
window.open("https://www.google.com/maps/place/Agha+Khan+Hospital+Pond+No.1/#24.8935763,67.0690012,17z/data=!3m1!4b1!4m5!3m4!1s0x3eb33edd90fa1943:0xd423034e388220fa!8m2!3d24.8935997!4d67.0713131");
ready();
}
function bing(stateWrapper, ready) {
window.open("https://dawaai.pk/");
ready();
}
The code for jquery is here:
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="dist/autosize.min.js"></script>
<script type="text/javascript" src="dist/jquery.convform.js"></script>
as i am unable to insert the complete file for jquery i am inserting the link form where you can have the complete code for chatbot.
https://github.com/eduardotkoller/convForm
You can try this:
View:
<div id="DemoModal" class="modal fade" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content" id="modal-content">
</div>
</div>
</div>
Jquery:
function OpenModel(Title, Body, modalsize) {
$("#DemoModal").find(".modal-content").html(Body).after(function (e) {
if (modalsize == null) {
modalsize = 'modal-lg'
}
$("#DemoModal").find(".modal-dialog").attr('class', 'modal-dialog ' + modalsize + '');
$("#DemoModal").find(" ").html(Title);
$("#DemoModal").modal("show");
})
}
And when you need to call pop up then simply pass:
OpenModel("", data, '')
in jquery.

Typed.js code in HTML does not work

I am trying to use typed text on my home page. I've added the html and js code and scripts but it does not work. It just displays 3 of the quotes when it should be displaying one quote at a time typed out. Below is my code, any help will be appreciated.
Index.cshtml
<div class="container">
<div class="agile_banner_info">
<div class="agile_banner_info1">
<h3>Welcome To <span>Business</span></h3>
<div id="typed-strings" class="agileits_w3layouts_strings"> #*The following text should have the typing effect*#
<p>Global leaders <i>in Business Process</i> and Enterprise Content Management</p>
<p>Business <i>efficiency</i> through BPM</p>
<p>Increasing <i>productivity.</i> Take informed decisions</p>
</div>
<span id="typed" style="white-space:pre;"></span>
</div>
<div class="banner_agile_para">
<p>Our aim is to help our customers succeed</p>
</div>
<div class="wrapper-inner-tab-backgrounds">
<div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button17">Read More</div></div>
</div>
</div>
</div>
<script src="~/Content/MyTemplate/js/typed.js" type="text/javascript"></script>
<script>
$(function () {
$("#typed").typed({
stringsElement: $('#typed-strings'),
typeSpeed: 30,
backDelay: 500,
loop: false,
contentType: 'html',
loopCount: false,
callback: function () { foo(); },
resetCallback: function () { newTyped(); }
});
$(".reset").click(function () {
$("#typed").typed('reset');
});
});
function newTyped() { /* A new typed object */ }
function foo() { console.log("Callback"); }
</script>
I added your text in the script and comment out the HTML content. Hope this will help you.
$(function(){
$("#typed").typed({
strings: ["Global leaders <i>in Business Process</i> and Enterprise Content Management", "Business <i>efficiency</i> through BPM","Increasing <i>productivity.</i> Take informed decisions"],
typeSpeed: 110, // typing speed
backDelay: 500, // pause before backspacing
loop: true,
});
});
<div class="container">
<div class="agile_banner_info">
<div class="agile_banner_info1">
<h3>Welcome To <span>Business</span></h3>
<!-- <div id="typed-strings" class="agileits_w3layouts_strings"> #*The following text should have the typing effect*#
<p>Global leaders <i>in Business Process</i> and Enterprise Content Management</p>
<p>Business <i>efficiency</i> through BPM</p>
<p>Increasing <i>productivity.</i> Take informed decisions</p>
</div>
-->
<span id="typed" style="white-space:pre;"></span>
</div>
<div class="banner_agile_para">
<p>Our aim is to help our customers succeed</p>
</div>
<div class="wrapper-inner-tab-backgrounds">
<div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button17">Read More</div></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>

How could i overwrite css typehead js

I would like to overwrite typehead js input form search. Because actually my input is not taking all the place from my column div.
As you can see :
I would like to have the full bar like this ( i can do this when i change the input name but the search don't work after the change):
Here the full code : (hope someone could help me :) )
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Recherche</div>
<div class="panel-body">
<form class="typeahead" role="search">
<div class="form-group">
<input type="search" name="q" class="typeahead form-control" placeholder="Search" autocomplete="off">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins and Typeahead) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Typeahead.js Bundle -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<!-- Typeahead Initialization -->
<script>
jQuery(document).ready(function($) {
// Set the Options for "Bloodhound" suggestion engine
var engine = new Bloodhound({
remote: {
url: 'find?q=%QUERY%',
wildcard: '%QUERY%'
},
datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
queryTokenizer: Bloodhound.tokenizers.whitespace
});
$(".typeahead").typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
source: engine.ttAdapter(),
// This will be appended to "tt-dataset-" to form the class name of the suggestion menu.
name: 'usersList',
// the key from the array we want to display (name,id,email,etc...)
templates: {
empty: [
'<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
],
header: [
'<div class="list-group search-results-dropdown">'
],
suggestion: function (data) {
return '' + data.name + ' - ' + data.email + ''
}
}
});
});
</script>
Try this,
<style>
.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }
</style>
Put this style tag in your the <head> tag.

materialbox Materializecss works only after typing initialization jQuery in console

I have used '.materialboxed' in my webpage, but the initialization in script doesn't work, I have to manually type $('.materialboxed').materialbox(); in console for it to work.
Html (ui-view in angular route)
<div class="row">
<div class="card-panel col l12" style="height: 750px;">
<img class="col l5 materialboxed" height="500px" id="poster"
ng-src="https://image.tmdb.org/t/p/original{{poster_path}}"/>
<div class="col l7">
<div class="row">
<a class="col l10" style="float:left;text-align: left;" ng-href="{{homepage}}">
<h3 class="title" ng-bind="original_title"></h3>
</a>
<a ng-href="http://www.imdb.com/title/{{imdb_link}}"
style="float:right;text-align: right; margin-top: 29px;"
class="imdb-link col l2" title="IMDb"><i class="icon-imdb"></i></a>
</div>
<div class="row"><p ng-bind="overview"></p>
<span class="right" ng-bind="release_date"></span>
<h5>Genres</h5>
<p ng-bind="genre"></p>
<h5>Production Companies</h5>
<p ng-bind="names">
</p>
<h5>Voting</h5>
<p ng-bind="vote_average"></p></div>
</div>
</div>
</div>
See the in 3rd line.
index.html
//rest code
<main ui-view></main>
</div>
<script src="js/angular_min.js"></script>
<script src="js/angular-touch.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="js/angucomplete-alt.js"></script>
<script src="appRoute.js"></script>
<script src="controller/MovieController.js"></script>
<script src="controller/LoginController.js"></script>
<script src="controller/RegisterController.js"></script>
<script src="controller/TvController.js"></script>
<script src="controller/LoggedInController.js"></script>
<script src="controller/TopMovieController.js"></script>
<script src="app-services/DetailsService.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.materialboxed').materialbox();
$('.button-collapse').sideNav({
menuWidth: 300,
edge: 'left',
closeOnClick: true
}
);
$('.modal-trigger').leanModal();
$("#movie").click(function () {
window.location.href = window.location.pathname + "#/movie";
});
$("#tv").click(function () {
window.location.href = window.location.pathname + "#/tv";
});
});
</script>
</body>
Even after initializing the materialboxed, it doesn't work. It works only after typing $('.materialboxed').materialbox(); in console manually.
Help me figure this out. Thanks
You shouldn't use $(document).ready in Angular. In fact you should try to use as little jQuery as possible, but if you need to, then you should create a directive that allows you to initialize the function after they render.
var app = angular.module('myApp');
app.directive('onLastRepeat', function() {
return function(scope, element, attrs) {
if (scope.$last)
setTimeout(function() {
scope.$emit('onRepeatLast', element, attrs);
}, 1);
};
});
app.controller('MoviesController', function($scope) {
$scope.$on('onRepeatLast', function(scope, element, attrs) {
$('.materialboxed').materialbox();
});
}
Now you can apply this to your HTML:
<ul>
<!-- this is just an example with the added directive -->
<li ng-repeat="movie in movies" on-last-repeat>
<img ng-src="{{imageObjectHere}}" class="materialboxed">
</li>
</ul>
Since you added this new directive in there, the $('.materialboxed').materialbox(); should fire after the repeat is done

jQuery Exif and async

I want to load image after I click link and next show Exif data.
I have code like this.
<div class="row">
<div class="col-md-4 link">
<a id="link" href="http://77.45.18.218/Szprotawa/Zdjecia/teren-aparat/DSC02040.JPG" class="img-link">DSC02040.JPG</a>
</div>
<div class="col-md-4 image"></div>
<div class="col-md-4 exif"></div>
JS
$("a").click(function(event) {
event.preventDefault();
console.log($(this).attr("href"));
var self = $(this);
var link = $(this).attr("href");
var img = $("<img />").attr('src', link).load(function() {
self.parent().parent().children('.image').append(img);
$(this).exifLoad(function() {
self.parent().parent().children('.exif').append($(this).exifAll());
});
});});
And it is not working.
Someone may look where I have error?
Thanks.
You can load image like this :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function openImage(url)
{
var img = $('<img id="dynamic" />');
img.attr('src',url);
img.appendTo('.image');
}
</script>
</head>
<body>
<div class="row">
this is page
<div class="col-md-4 link">
<a id="link" href="javascript:openImage('http://77.45.18.218/Szprotawa/Zdjecia/teren-aparat/DSC02040.JPG')" >DSC02040.JPG</a>
</div>
<div class="col-md-4 image"></div>
<div class="col-md-4 exif"></div>
</body>
</html>
And than after you can load other <div class="col-md-4 exif"> in same function.
Here is jsfiddle

Categories