Twitter feed in a regular div? - javascript

Twitter's embed code is a big clunky if you ask me. It appears you have to load the js and put the js embed code (javascript) in the page where you want it in order for it to show up. I would like to load the js right before the end of my </body> and also put the js script in there as well. I would then like to just place an empty div anywhere on my page and the twitter feed will display there. Like <div id='twitter_feed'></div> Is that possible adjusting the code that Twitter gives us?
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('example').start();
</script>
My question is not how to using different tools to render a feed. My question is how do I make the above code that twitter provides and write it in a way that it will render in a div that I specify.
After reading though this...http://www.dustindiaz.com/twitter-widget-doc I found that you can specify an id.

This sounds like what you want, using jQuery tweets plugin found on http://plugins.jquery.com/project/jQuery-Tweets
HTML
<div id="tweets">
</div>
jQuery
$('#tweets').tweets({
tweets:4,
username: "jquery"
});
or using your current widget http://jsfiddle.net/mazlix/dZ2aP/
<div class="content_up_here">
There's so much stuff here.
</div>
<script>twitterwidget();</script>
<div class="content_down_here">
Lorem and Ipsum sitting in a tree. D O L O R S I T.
</div>

var username = "username";
$.getJSON("http://twitter.com/statuses/user_timeline/"+username+".json?callback=?",
function(data) {
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
$("#tweet").html(replaceURLWithHTMLLinks(data[0].text));
});
The above script will parse links and usernames and make them actual links. All you need to do is have a div with the id of #tweet. Make sure you load jQuery too. This also get only one lastest tweet.

Related

Enable Second typeit only after first is complete

I am trying to include typing effect on my website. For that I was trying to use TypeIt, a JS Library for it.
I am able to make it work but the problem is I want the second TypeIt instance to run only when the first is complete.
As in their Documentation there is a method called instance.isComplete
Here is how I was trying it.
HTML
<p id="example1"></p>
<p id="example2"></p>
The JavaScript is
var instance = new TypeIt('#example1', {
strings: ["FIRST TEXT"],
speed: 75,
autoStart: true
});
while(1)
{
if(instance.isComplete)
{
new TypeIt('#example2', {
strings: ["TEXT TO APPEAR AFTER FIRST IS COMPLETE"],
speed: 75,
autoStart: true
});
break;
}
}
I was trying to use a loop that will break once the instance is complete but the problem is I am stuck in an Infinite Loop and page won't load
You can place your second call in the afterComplete property when you declare the options for the first one; however, I feel like there's probably a better way to do this. You might want to go over the documentation again.
var instance = new TypeIt('#example1', {
strings: ["FIRST TEXT"],
speed: 75,
autoStart: true,
afterComplete: function(instance){
instance.destroy();
new TypeIt('#example2', {
strings: ["TEXT TO APPEAR AFTER FIRST IS COMPLETE"],
speed: 75,
autoStart: true
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.10.1/typeit.min.js"></script>
<p id="example1"></p>
<p id="example2"></p>
Edit:
Here is the effect I think you're going for:
var instance = new TypeIt('#example1', {
speed: 75,
autoStart: true
})
.type('FIRST TEXT')
.break()
.type('TEXT TO APPEAR AFTER FIRST IS COMPLETE');
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.10.1/typeit.min.js"></script>
<p id="example1"></p>
<p id="example2"></p>
The documentation site had a demo codepen

$target.blurOverlay is not a function

I want to cover the main page of my ASP.NET MVC website with a welcome text. A great sample of this scenario is already implemented here. Of course, I want to implement something like this sample by using a jQuery plugin called blur-overlay which could be downloaded from here.
I want when the user clicks anywhere out of the welcome text, then the cover fades out forever.
I'm using BundleConfig to render all my JavaScript files as bellow:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/blur-overlay.js",
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/lightbox-plus-jquery.min.js",
"~/Scripts/CustomNavbar.js"));
I'm also using BundleConfig to render my CSS files.
Here are the summarized of my _Layout.cshtml page:
<body>
<div class="enterance">
<p>
Welcome text goes here.
</p>
</div>
<div id="page">
#* Here are lots of HTML tags which I would like to be covered by the welcome text when someone comes into the site *#
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<script>
$(document).ready(function () {
// Browsers that don't (fully) support filters
var browserIsEdge = /Edge\/\d+/.test(navigator.userAgent);
var browserIsIE = /Trident\/\d+/.test(navigator.userAgent);
var opacity = (browserIsEdge || browserIsIE) ? '0.75' : '0.5';
// Grab the element you want to "wrap" with blur
var $target = $('#page');
// Grab the content you want to display in the overlay
var $overlay = $('.enterance').detach().show();
// Initialize the overlay
$target.blurOverlay({
// Overlay content
content: $overlay,
// Background color of the overlay (use rgba for opacity)
backgroundColor: 'rgba(255, 255, 255, ' + opacity + ')',
// Blur amount (default 12px)
blurAmount: '10px',
// Duration of CSS transitions
transitionDuration: '500ms',
// Type of CSS transitions
transitionType: 'cubic-bezier(.22, .57, .27, .92)',
// Elements to "mask" (adds an extra overlay to improve visual contrast)
masks: [{
selector: '.mask-me', // Required
color: 'rgba(255, 255, 255, 0.5)',
opacity: 1,
width: '400px',
height: '300px'
}],
// Override the z-index used for the overlay and masks
zIndex: 3333,
// Disable the blur filter (for incompatible/buggy browsers or whatever reason)
noFilter: browserIsEdge || browserIsIE
});
// Show the overlay
$target.blurOverlay('show').then(function () {
console.log('overlay is showing');
});
});
</script>
</body>
My problem is that when the JavaScript code reaches the $target.blurOverlay({ then the following error occurs:
$target.blurOverlay is not a function
How can I solve this problem.
I solved the problem by using jQuery.noConflict();. I think the problem was that I was using Bootstrap beside the jQuery, so I had to use jQuery.noConflict(); to remove the conflict.

Chartist dynamic input

I'm making a website where users can upload data that will be displayed as a graph
HTML:<div id="data"></div>
test1.php outputs:,-0.05,-0.07,-0.07,-0.07,0.14,0.14,0.09,0.07,0.07,0.07,0.07,0.65,0.63,0.63,0.63,0.63,0.63,0.58,0.56,0.56,0.56,0.56,0.84,0.79,0.77,0.77
js/jquery:
$(document).ready(function(){
$("#data").load("test1.php");
var data = $("#data").text().split(",").slice(1);
new Chartist.Line(".ct-chart", {
labels: [data],
series:[ data ]
}, {
fullWidth: true,
height: 650,
chartPadding: {
right: 0
}
});
});
The graph does not show up and I get the error
Uncaught Error: Exceeded maximum number of iterations while optimizing
scale step
But if I type $("#data").text().split(",").slice(1) into the console and paste the output into labels and series it works fine it also works if you make data a normal array and don't get the data from the page
I assume you use the $.load function runs an xhr request. The XHR requests are normally Asynchronous (google the definition of the acronym AJAX) - therefore the data you are trying to input is not present at the time you need it. It is only returned from the php page, after all of the http-request is done - which is most likely after the Charlist.new() function has fired.
Look at the documentation here: http://api.jquery.com/load/
If you instead tried something like this (NOT tested):
$(document).ready(function(){
$.ajax("test1.php", {
success:function(response) {
var data = response.split(",").slice(1);
new Chartist.Line(".ct-chart", {
labels: [data],
series:[ data ]
}, {
fullWidth: true,
height: 650,
chartPadding: {
right: 0
}
});
});
}
});
EDIT: Ok i updated some code. As i said, This is untested. But this should steer you in the right direction. Try it now. If it doesnt work 100% do some testing and debugging, and maybe you'll learn something..

Display tour for first time user

I am trying to make a guided tour for the first time user of my site. It works perfectly on localhost, but when I upload it onto my dev server it doesn't work properly i.e. the tooltips are not at the designated place. See the following two screenshots -
I think the issue is because the component is not loaded so far i think so the rendering of the tooltip happens in the middle of the page.
Repository I am using is here
Code - Controller
$scope.IntroOptions = {
steps:[
{
element: '#step1',
intro: "<b>First Step First: </b>Click here to define structure of your test scripts!!<br/>You can modify this later on any time",
position: 'left'
},
{
element: '#step2',
intro: "Click here to select a folder/test script spreadsheet from google drive.",
position: 'bottom'
}]
,
showStepNumbers: false,
exitOnOverlayClick: false,
exitOnEsc: false,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks!'
};
$scope.ShouldAutoStart = false;
$timeout(function(){
$scope.CallMe();
}, 0);
HTML code -
<div ng-controller="tourController" class="container-narrow">
<div ng-intro-options="IntroOptions" ng-intro-method="CallMe"
ng-intro-oncomplete="CompletedEvent" ng-intro-onexit="ExitEvent"
ng-intro-onchange="ChangeEvent" ng-intro-onbeforechange="BeforeChangeEvent"
ng-intro-onafterchange="AfterChangeEvent"
ng-intro-autostart="ShouldAutoStart">
</div>
</div>
**I tried using angular.element(document).ready() also but its not working.
Things are working now with timeout 1000 mili secs but i think there
must be a better way of doing this

Very new to Jquery. Trying to create a Photoset grid

I am new to Jquery, and I am trying to figure out to create a Photo set grid that when you click the pictures get bigger using a jquery plugin that I found online. My code looks like this.
<script>
$('.photoset-grid-lightbox').photosetGrid({
highresLinks: true,
rel: 'withhearts-gallery',
gutter: '2px',
onComplete: function() {
$('.photoset-grid-lightbox').attr('style', '');
$('.photoset-grid-lightbox a').colorbox({
photo: true,
scalePhotos: true,
maxHeight:'90%',
maxWidth:'90%'
});
}
});
</script>
</head>
<body>
<div class="photoset-grid-lightbox" data-layout="131" style="visibility: hidden;">
<img src="images/InspirationalQuote.jpg" />
<img src="images/jakachu-tiger.jpg" />
<img src="images/Japanese_Painting_by_trinifellah.jpg" />
</div>
The link to the plugin:
http://stylehatch.github.io/photoset-grid/
Any help would be gladly accepted. Thank you!
EDIT: Here is a link to the jsfiddle http://jsfiddle.net/DamianG/6UjsB/
Assuming this is the end result you're looking for, you need to make sure:
Your jQuery library is included in the of your document
Your photoset-grid JS is included in the of your document, after
jQuery
Then, include the following, wrapped in jQuery's document.ready check, as #pl4g4 suggested, included afterwards:
<script type="text/javascript">
$(function() {
$('.photoset-grid-lightbox').photosetGrid({
highresLinks: true,
rel: 'withhearts-gallery',
gutter: '2px',
onComplete: function () {
$('.photoset-grid-lightbox').attr('style', '');
$('.photoset-grid-lightbox a').colorbox({
photo: true,
scalePhotos: true,
maxHeight: '90%',
maxWidth: '90%'
});
}
});
});
</script>
I'm guessing the photoset-grid didn't load? This would be because the contents of your element get loaded first, then whatever's in the body. By wrapping your code with
$(document).ready( function() { /* your code here */ });
or the shorthand
$(function(){ /* your code here */ });
You ensure the browser reads your javascript, but defers running your $.photosetGrid() block of code until after the HTML of the page has been rendered. Otherwise, jQuery can't see the Document Object Model, so $('.photoset-grid-lightbox').length will return 0 - there's no such element on the page, as demonstrated here.
A bit more info on jQuery(document).ready();

Categories