I have embedded twitter time line in angular 7 using
Problems: I got too many twitters and I want only one or two etc
<script async src="https://platform.twitter.com/widgets.js"
charset="utf-8"></script>
<a class="twitter-timeline" data-dnt="true" data-link-
color="#E95F28"
[href]="twitter_link">
</a>
<script async src="https://platform.twitter.com/widgets.js"
charset="utf-8"></script>
<a class="twitter-timeline" data-dnt="true" data-link-
color="#E95F28"
href="https://twitter.com/ICICIBank?
ref_src=twsrc%5Etfw">
</a>
expected result should be: only one twitter time line not all blog
actual result is comming with all twitter time line
try this. just put data-tweet="3",. here 3 in count
<a class="twitter-timeline" data-dnt="true" data-link-color="#E95F28"
[href]="company?.companyIdentityNumber + '?ref_src=twsrc%5Etfw'"
data-tweet-limit="2">
Related
I am trying to build my first application on windows platform using phone gap. I am able to run my application but I'm not able to see any icon like back button, menu button icon in both emulator and device. How can we get the data-icons in page header.
CSS:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
HTML:
<div data-role="page" id ="pichartimg">
<div data-theme="a" data-role="header">
<h3>Pie Chart</h3>
Back
</div>
<div id='canvasDivpie' class = "sidebar"></div>
</div>
I'm not able to see the back button in page header. What is the issue and how to get icons.
I have been struggling with this too. My experience ist, that it's important to have the correct order in your Javascript inclusions.
I suggest you to first include your CSS. Then right after in the following order:
jQuery
Jquery Mobile
Cordova
any other Javascript
Done so the below example should display a button in your header with an icon on the right side:
<div id="header" data-role="header" data-position="fixed" data-theme="a">
<h1>Some Headline</h1>
</div>
Hope that helps!
I am trying to get a jQuery-ui div under the class ui.state.alert to fade into the page as it loads so that users notice it. I have added the fadeTo in a js file but when the page loads, the alert just appears, with no fade effect at all. I have even made sure the 'slow' attribute is added. Here is the html code.
<div class="ui-widget">
<div class='ui-state-error ui-corner-all' id="serviceAlert" style="opacity: .1">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right:
.3em;"></span><strong style="color: #1F1F1F">Alert!</strong> Sign Up Services are
currently under construction. Please check back later for further updates.</p>
</div>
</div>
And here is my jQuery file:
$(document).ready(function() {
$('#serviceAlert').fadeTo(1,'slow');
});
I have added the following scripts to my header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/JavaScript" src="jquery-ui-1.10.4.custom\js\jquery-ui-1.10.4.custom.js"></script>
<script type="text/JavaScript" src="js/script.js"></script>
The first Parameter of fadeTo is the duration, here you have to define a number in ms oder slow etc. Your animation is currently only running for 1 ms (thats a bit short (-: ).
.fadeTo( duration, opacity [, complete ] )
You've done it the other way around.
Example:
$('#serviceAlert').fadeTo(1000, 1); //fades in 1sec to opacity 1
Alright guys,
I'm pretty new to all this so sorry if i don't make sense, I wish to use SoundCloud in my jquery mobile pages. I've got the following iframe code below to use:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/100795671&color=ff6600&auto_play=false&show_artwork=false&sharing=false&download=false&show_playcount=false&liking=false&show_comments=false&auto_advance=false&show_user=false" id="player"></iframe>
</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<button id="play">Play</button>
</div>
<div class="ui-block-b">
<button id="pause">Pause</button>
</div>
</div><!-- /grid-b -->
<script type="text/javascript">
var iframe = document.querySelector('#player');
var sc = SC.Widget(iframe);
sc.bind(SC.Widget.Events.READY, function () {
var d = document.createTextNode('Ready');
document.querySelector('body').appendChild(d);
});
document.querySelector('button').addEventListener('click', function () {
sc.play();
});
document.getElementById('pause').addEventListener('click', function () {
sc.pause();
});
</script>
im also calling these js files in the header
<script src="https://w.soundcloud.com/player/api.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
The problem i get is it won't play for me on my mobile view, the wavform image also seems to double up and cover the play/pause icon.
Screenshot:
http://imageshack.us/photo/my-images/109/qxix.png/
I've tested it on desktop view and there seems to be no issues viewing it that way, here is the page i'm testing it all on at the minute
http://www.blackburnravers.com/test/media/blackburnravers/blackburnravers_androidcore_v3.0.html
Is there out I've done wrong?
Hope somebody can help me out.
Thanks alot,
Blackburn Ravers
Unfortunately, due to implementation of the Widget API playing sound via external controls isn't possible in iOS – this is because of the asynchronous nature of postMessage and the limitation of iOS, that playback has to be initiated by user.
I am at my wits end with jQuery Mobile events. I do not understand them, despite following the docs to the T. I am using the following code to initialize my pages. The problem is that some seem to fire multiple times and occasionally when I go back to a page nothing will appear, as though .live pageinit simply doesn't fire at all. I am quite confused. Is pageinit the way to go? is .live best practice? Do I need to clean up after myself and use something like pagehide to remove stuff from the DOM? Please help me understand. Thanks!
// page number 1
<header>
includes and stuff
<header>
<body>
<div data-role="page" data-theme="a" id="dashboardPage">
$('#dashboardPage').live('pageinit',function() {
});
// somewhere in here a page transition to anotherPage.html (not necessarily the id of the new page in the <div data-role-"page data-theme...> declaration
$.mobile.changePage("anotherPage.html",{transition : "slide"});
</div>
</body>
// page number 2
<header>
includes and stuff
<header>
<body>
<div data-role="page" data-theme="a" id="specialsPage">
$('#specialsPage').live('pageinit',function() {
});
</div>
</body>
You could try something like this:
<html>
<header>
<!-- BASIC INCLUDES -->
<link rel="stylesheet" href="./css/jquery.structure-1.1.0.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile.theme-1.1.0.min.css" />
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.1.0.min.js"></script>
<!-- END - BASIC INCLUDES -->
</header>
<body>
<!-- PAGE 1 -->
<div data-role="page" data-theme="a" id="dashboardPage">
<script>
// INITIALIGE PAGE 1 - dashboardPage
$("#dashboardPage").live('pageinit',function(event){
alert( '"initializing" page 1: dashboardPage');
});
</script>
HERE YOU ARE AT PAGE 1 (dashboardPage)!!!<br><br>
CLICK HERE TO GO TO PAGE 2 (specialsPage)
</div>
<!-- PAGE 2 -->
<div data-role="page" data-theme="a" id="specialsPage">
<script>
// INITIALIGE PAGE 2 - specialsPage
$("#specialsPage").live('pageinit',function(event){
alert( '"initializing" page 2: specialsPage');
});
</script>
HERE YOU ARE AT PAGE 2 (specialsPage)!!!<br><br>
CLICK HERE TO GO TO PAGE 1 (dashboardPage)
</div>
</body>
</html>
Hope it helps.
When using JQuery mobile you should consider you have a single page which content is updated dynamically. You do not navigate from one page to the other as you normally would.
Because of this, any code present in a page you navigate to with JQM simply be ignored (tyr changing the header of page number 2, and navigate to this page from page number 1 with changepage, you will not see any difference).
Because of that, all your js code should be directly available within the page in which your user will arrive.
If you add the following code in the scripts of page 1, you will proeperly detect the initialization of of page2 when it is loaded with changepage.
$("#specialsPage").live('pageinit',function(event){
alert( '"initializing" page 2: specialsPage');
});
An important thing to keep in mind is that you user might also directly access your page2, which means that all the code should also be available for page 2. Because of this I would strongly recommend including all your code in a js file referenced in the headers of all your page, and NOT directly in script tags within your pages.
When I ask it to display 10 tweets, I get one. When I say 11, I get 3. But when I say 20, I get 20. Am I doing something wrong?
This is my code:
<div id="twitter" class="widget">
<div class="twitter-header"></div>
<div class="twitter-content">
<ul id="twitter_update_list">
<li>Twitter feed loading</li>
</ul>
</div>
<div class="twitter-footer"></div>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/trekradio.json?callback=twitterCallback2&count=10"></script>
The problem is that you're not seeing retweets in the timeline. Sadly, with the method you're using, you can't use
include_rts=1
Change the line to
https://api.twitter.com/1/statuses/user_timeline.json
?screen_name=trekradio
&include_rts=1
&callback=twitterCallback2
That will retreive the JSON with all the retweets in the timeline.
Authentication is now required on user_timeline (see: https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline) and version 1 of the API has retired since June 11, 2013 (see: https://dev.twitter.com/blog/api-v1-is-retired).
So, if anyone gets stuck on #Terence answer, go look at the changes in the current API.