How do I display my latest tweet in a single line instead of a 'li'?
Right now I'm using this code:
<div id="twitter_update_list"></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=[twittername]&include_rts=true&count=1&callback=twitterCallback2"></script>
Which outputs:
<div id="twitter_update_list">
<li>latest tweet</li>
</div>
I want the output to be:
<div id="twitter_update_list">
Latest tweet
</div>
Ok, this is what I've did. I added an extra html line:
<span id="latest-weet"></span>
With a litle bit of jquery:
$('#latest-tweet').html($('#twitter_update_list li span').html());
Let's not forget the css:
#twitter_update_list {
display: none;
}
I admit it's not the best solution but it works.
Fiddle: http://jsfiddle.net/hb86K/
Related
I have a url that I want to use in an iframe. The first part of the URL stays the same, the second varies by page. So I want to concatenate them together and use the resulting variable in the src statement. So far I have
<!DOCTYPE html>
<html>
<body>
<script>
var str1="http://bitz.bz/mapplacencia";
var str2="#17/16.51876129/-88.36937785";
var str3=str1+str2;
document.write(str3);
</script>
<p <img style="display: block; margin-left: auto; margin-right: auto;" src="http://hostbelize.com/hotmobile/general/mobile-legend.png" alt="" width="80% alt=" /></p>
<p <iframe width='80%' height='500px' frameBorder='0' src=str3"></iframe></p>
</body>
</html>
The concatenation is working as I can see it from the document.write statement. And I know src=str3 is wrong but I've looked at various examples here and elsewhere on the web and cannot find the right format. I've tried getElementbyId(str3) as I thought that gave the value of the variable but that is not right either.
Can anyone give me the correct format to pass this variable to the src.
Thx - Marie
Use jQuery attr to set the image source to the url that you already got, but do this only after the page is loaded.See this topic also.Don't forget to set an ID to the frame
<script>
$( document ).ready( function(){
{
var str1="http://bitz.bz/mapplacencia";
var str2="#17/16.51876129/-88.36937785";
var src = str1+str2;
$('#frame-id').attr("src", src);
});
</script>
<iframe id="frame-id" width='80%' height='500px' frameBorder='0' src='' "></iframe>
First, you'll want an easy way to reference your iframe, so make sure to add an id to the iframe element.
Then, use jQuery to make sure the document is ready, and once it is, set the src on the iframe by selecting the id you set using jQuery.
Note, you didn't close your <p> in your initial example which could be causing issues.
Here's a full example of how this all should work.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var str1="http://bitz.bz/mapplacencia";
var str2="#17/16.51876129/-88.36937785";
var str3=str1+str2;
$('#iFrameName').attr('src', str3);
})
</script>
<p>
<img style="display: block; margin-left: auto; margin-right: auto;" src="http://hostbelize.com/hotmobile/general/mobile-legend.png" alt="" width="80% alt=" />
</p>
<p>
<iframe id="iFrameName" width='80%' height='500px' frameBorder='0'></iframe>
</p>
</body>
</html>
hi we are working on jquery mobile how to hide button with css not with code we are using display:none in style but its not working for jquerymobile
here is the code we are using
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Buttons</h1>
<button data-role="button" style="display:none;">hello</button>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
The easiest way is to wrap your button in a DIV and then just hide/show it.
<div style="display:none;">
<button data-role="button">hello</button>
</div>
<style>
#pageone .ui-header > .ui-btn{display:none;}
</style>
First, Try editing the property like "display: none !important".
If its not worked yet, then Check whether you had declared "display: block !important;" property for buttons.
(or)
write individual style in internal /external stylesheet like,
#pageone .ui-header > .ui-btn { display:none !important; }
If you want to move with code, change "display: none" to visibility: hidden
or
$( ".target" ).hide();
This is roughly equivalent to calling .css("display", "none"), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.
I'm familiar with styling forms with label for="my_id" and input type tags. I really like how it automatically styles the form components if the form width goes down to a narrower width, and I like that the input tags are left align.
I would like to do the same type of styling except now I'm wanting to display a record where the labels and their values are being styled similarly.
Here's some code that I hoped would work but it doesn't.
<div data-role="fieldcontain">
<label for="full_name"><strong>Name:</strong></label>
<span id="full_name">John Smith</span>
</div>
<div data-role="fieldcontain">
<label for="phone"><strong>Long Phone Label:</strong></label>
<span id="phone">(800) 555-1212/span>
</div>
Any ideas on the right way to do this without resorting to tables?
It seems that you want to align the text in the way the form is aligned.The below code will align the labels with their values.This is what i understand from your question.i hope the below code will help you.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile-1.0rc1.css" />
<script type="text/javascript" src="js/Common/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/Common/jquery.mobile-1.0rc1.js"></script>
<style>
#b {
left: 156px;
bottom: 50px;
}
</style>
</head>
<body>
<div data-role="page" id="header">
<div data-role="fieldcontain" id="a">
<label for="full_name"><strong>Name:</strong></label><br>
<label for="phone"><strong>Long Phone Label:</strong></label>
</div>
<div data-role="fieldcontain" id="b">
<span id="full_name">John Smith</span><br>
<span id="phone">(800) 555-1212</span>
</div>
</div>
</body>
</html>
Maybe this would work. You could use a JQM grid to do a side by side label:
Label: Input Element
Label: Input Element
Be careful though as labels for mobile are like that on purpose. It's so you can see the lable and the input when entering on a device like an Ihone:
<div class="ui-grid-a">
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div>
Hello I understand from reading advice on this site that scripts should go at the bottom of the _layout page. My problem is that I am not sure exactly where the 'bottom' is. Some people have said it is just before the tag but that does not work for me. I have tried putting the script in many places but nowhere seems to work. Could someone please tell me what I am doing wrong.
This is my About page
#{
ViewBag.Title = "About Us";
}
<h2>About</h2>
<p>
Put content here.
</p>
<script type="text/javascript">
$(function () {
alert("Hello World");
});
</script>
This is my _Layout page
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#* jQuery works if this line is here but not if it is at the bottom
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
*#
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
</div>
</div>
#* jQery does not work if the script is here! *#
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
</body>
</html>
Some Alternatives
It is absolutely possible to have your jquery at the end of your body tag. Ideally the only js you have in your head is modernizr, html5shiv or the like.
Option 1
Put a #RenderSection("scripts", required: false) after the jQuery <script... element as the last line inside your body element. Then in any of your views you would use
#section scripts
{
<script type="text/javascript">
$(function () {
// page specific js code here
});
</script>
}
Option 2
Between your jQuery script element and the closing of your body element have a script element pointing to the relevant js file for the action/view in question:
<script
src="#Url.Content("~/Scripts/" + ViewContext.RouteData.GetRequiredString("action") + ".js")"
type="text/javascript">
</script>
Jquery file has to be included before first reference to jquery is found on the document. So, to solve this problem, i put jquery file in head section and all other script that are not used in views but in other script files are included before closing body tag
I'am having a problem with jQueryUi Tabs. I want to have a navigation bar at the left side of my tabs view, but the layout is not working. I think it is a bug, and I will report it to jQuery, but first I want to see if you can confirm this to be a bug, or am I doing something wrong?
Preview my example at [ http://public.virtualmischa.de/bugs/jqueryui-tabslayout.html ].
First you see the non-working tabs example and below the working standard floating div example.
<!DOCTYPE html>
<html>
<head>
<title>JQuery Tablayout problems</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div style="float:left; width:200; color: red;height: 200px;">Where is my left bar?<br></div>
<div id="tabs"><ul><li>A tab page</li></ul>
<div id="a1">Do you see a red bar left of this tab view?</a></div>
</div>
<div style="float:clear"></div>
<div style="float:left; width:200; color: red;height: 200px;">Where is my left bar?<br></div>
<div id="no-tabs"><ul><li>A tab page</li></ul>
<div id="a2">Do you see a red bar left of this tab view?</a></div>
</div>
</body>
</html>
The solution here fixed my issue, which looks somewhat like yours. Look at
jquery ui tip floated divs inside for more information.
#yourTabsDiv {
float:left;
width: 100%;
}