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>
Related
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.
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/
I have searched high and low but I cannot get this simple thing to work.
All I want to do is have a dialogue popup open when the homepage loads.
Can someone please point me in the right direction?
Check this out Dialog and this
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body style="font-size:62.5%;">
<!--<div id="dialog" title="Dialog Title">Test Dialog Box</div>-->
<div id="dialog" title="Google">
<IFRAME id="frame" style="border: 0px;" SRC="www.google.com" width="100%" height = "100%" >
</div>
</body>
Different solution
try this..if this ok..
Different solution
Try the Modal Dialog..Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link.
$(document).delegate('div[data-role=dialog]', 'pageinit', function() {})
It seems like jQuery mobile is appending a loading message at the start up page. I really don't know what's going on but consider the following simple snippet:
<!DOCTYPE html>
<html>
<head>
<title>sadFace</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<h1>;__;</h1>
</body>
</html>
I even have to scroll down to see the loading message. So I thought it might happen cause I'm not following the typical jQuery mobile page anatomy but:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>;_;</h1>
</div><!-- /header -->
<div data-role="content">
<p>Same shit, different page.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>need cookies :C</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
the same. I'm totally stunned by this behaviour. I also test jQuery1.0rc2 with the same result even though I started my project from last week and it looks fine. What the hell is going on <.<
Looking up in jQuery Mobile' js I think this initializePage: function() is responsible for the message. I could comment out
//cue page loading message
$.mobile.showPageLoadingMsg();
or set autoInitializePage: false but I rather prefer a solution which is not involving a modified jQuery file (unless it's a bug).
You have to add the CSS too, then it will be fine:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
In detail:
It always puts the following HTML at the bottom of your body:
<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>
This is the relevant CSS (so maybe you can play with it yourself if you want)
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; }
The function showPageLoadingMsg adds the CSS class '.ui loading' to the HTML tag and then it becomes visible
You can stop the autoInitializePage by using the below BEFORE you load the jquery-mobile library
jQuery(document).on("mobileinit", function() {
jQuery.mobile.autoInitializePage = false;
});
More info here: http://api.jquerymobile.com/global-config/
Add this to the top of your JS file
$.mobile.autoInitializePage = false;
I had this problem the word 'loading' was constant at the end (bottom) of the site and it sucks/bad.
I solved it like this: in google chrome, in inspect hover word 'loading', copy element. I created a style and as an attribute: display:none!important;
It's:
body > div.ui-loader.ui-corner-all.ui-body-a.ui-loader-default {
display: none !important;
}
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