so I am trying to use the TFL widget on my jQuery Mobile site, however it is tiny.
I tried setting the height and the width through CSS but it doesn't work, I want it to cover the full page. I've also tried using both versions on the TFL website, the fixed width one and the variable width one but none of them have worked properly.
Any help on this would be really appreciated.
Thank you very much.
Sorry the formatting sort of messed up.
Here is my code:
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<div class="tflwidget">
<script language="JavaScript" src="http://www.tfl.gov.uk/tfl/syndication/widgets/serviceboard/embeddable/serviceboard-iframe-stretchy.js"></script></div>
</div>
<div data-role="footer" style="position:absolute; bottom: 0; left:0; right:0">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
Well you won't do much to an iframe with css.
You want to explicitly set the height and width attributes of the iframe, 100% might be the right value if the parent element is big enough.
Related
I have build a website with an iframe to display multiple subpages.
My goal is to change the value of an ID on the parent window, from the child page that is loaded in the Iframe. All the pages are in the same domain. I am currently using the following code, and it works fine in Internet explorer, but doesn't do anything in Chrome? I hope someone will have the awnser to fix it so it will work in all browsers.
Thank you in advance!
Here's the html of the parent window:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Webpage</title>
<base target="iframe">
<!-- External Javascript -->
<script src="javascript/index.js"></script>
<!-- External CSS -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- Banner -->
<div class="Banner">
<div id="Site-name">
Text to be changed
</div>
<img class="Logo" src="Afbeeldingen/Logo.png" alt="logo">
</div>
<!-- Body -->
<div class="iframe">
<iframe name="iframe" src="iframe.html"></iframe>
</div>
<!-- Footer -->
<div class="Footer">
<div class="copyright">
Made by Jan Pieter van den Oever 2019 All rights reserved ®
</div>
</div>
</body>
</html>
And here is the java script of the index file:
function changeText(text) {
document.getElementById('Site-name').innerHTML = text;
}
Here is the iframe html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>iframe</title>
<!-- CSS -->
<link rel="stylesheet" href="css/iframe.css">
</head>
<body>
<div class="Button-container">
<div class="Button-center">
<div class="Button" onclick="location.href='nextpage.html';parent.changeText('The new text to be displayed in the parent')">
<div class="Button-text">
<br><br><br>
Start
</div>
</div>
</div>
</div>
</body>
</html>
With jQuery:
function changeText(newText) {
$('#Site-name').text(newText)
}
Just include jQuery in your project and replace the changeText function with the above one. If the above code doesn't work, try the below one:
function changeText(newText) {
$(document).find('#Site-name').text(newText);
}
It's so confusing, so you are under the same domain, sub-domain too I guess?
Domain is not the only indicator of same origin, you could try to iframe yourdomain.com/proxy.google.com as an example. So for all your browser cares that is still a different origin, or else don't iframe it. Calling it .html is meaningless, you can have it .exe and the browser will still attempt to render the dom.
This issue arises when you're trying to merge 2 incompatible frameworks quick and dirty, like for example you need an interface where the main is using ExtJS and the child is Angular... And the only proper/legal/right answer is.
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
You might get lucky and find a hack of some sort but believe me it will only be temporary. PostMessage was written exactly for this purpose, so 2 globals can safely communicate and react to events.
I am trying to animate a picture when the mouse cursor hovers over it. I am using jQuery to accomplish this. I cannot figure out why it does not work for the current state of my code. Apologies in advance, I just started my endeavour into web development.
Thanks!
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/animate.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Daryl N.</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="nav-text"><span id="home">Home</span><span id="archive">Archive</span></div>
</div>
<div id="first" class="background">
<div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div>
</div>
<div id="second" class="background">
<p class="align-vert">This is my personal website</p>
</div>
</div>
</body>
</html>
jQuery
$(document).mousemove(function() {
if($('#me-pic').is(':hover')
{
alert("Hello");
}
});
UPDATE
The source of my problem came from setting the z-index of my image div to -1. Changing this solved my problem, as well as changing the script.
Well, I'm not sure if your method should work or not, but there's a better way to handle this, designed for the original purpose:
$(document).ready(function() {
$('#me-pic').hover(function() {
alert("Hello");
});
});
With jQuery you can attach the hover event directly onto the selector, try this:
$(document).ready(function() {
$('#me-pic').hover(function(){
alert("Hello");
})
});
The solution is to use hover jquery method.
$('#me-pic').hover(function(){
alert("Hello");
})
View reference here.
Further more,I recommend you remove $(document).mousemove() event.In this situation, it is inefficient method.
I want to used popup to show signup form. For that purpose I have used jQuery mobile's popup.
So when I added jQuery mobile CSS and JavaScript they have affected the whole page. All the text, menus, links and everything is changed by it.
How I can restrict the jQuery Mobile styles and JavaScript to work on that popup only?
I have completed the whole design so I can't change the styles one by one again.
Here is my code
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
and here is my HTML
Delete page...
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Signup</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to Signup</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
</div>
Change the Pattern. Please bring the mobile CSS file before your custom CSS file. Will change it completly.
Cheers!
I'm new to foundation and I'm trying to make some nice tabs with various content. To do so, I'm using their documentation. However, it doesn't work like it's supposed to do.
Averything works fine, except that that sections don't cover each other. Each section is placed after the other, even when the other is hidden. Here is an example :
As you can see, this is pretty ugly. Here is my code :
<meta name="viewport" content="width=device-width" />
<title>Test Page</title>
<link rel="stylesheet" href="/autoPA/static/css/normalize.css" />
<link rel="stylesheet" href="/autoPA/static/css/foundation.css" />
<link rel="stylesheet" href="/autoPA/static/css/dynamease.css" />
<script src="/autoPA/static/js/vendor/custom.modernizr.js"></script>
</head>
<body>
<div class="section-container auto" data-section>
<section>
<p class="title" data-section-title>
Section 1
</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>
Section 2
</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
<!-- Check for Zepto support, load jQuery if necessary -->
<script>
document
.write('<script src='
+ ('__proto__' in {} ? '/autoPA/static/js/vendor/zepto'
: '/autoPA/static/js/vendor/jquery')
+ '.js><\/script>')
</script>
<script src="/autoPA/static/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Do you guys see anything wrong in it ? (Each file included is found, firebug doesn't detect any errors).
Try adding:
<script src="/autoPA/static/js/lib/foundation/foundation.section.js"></script>
...to the bottom of your page.
BTW, I can't get mine to work either :-/
UPDATE: foundation.min.js already contains foundation.section.js My bad!
I have a problem with Jquery load in dialog box.
I spent all night trying to figure out why the dialog box shifts to the right side of the screen when I loaded another file. Apparently loading different pages can affect it randomly. It can be center but at the very bottom, but I don't know why it is happening. All I know is the loading another page into a dialog box displaces the dialog box from the center.
This is the code i have:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="ProfilePage/jqueries.js"></script>
<script type="text/javascript">
$(
function()
{
$("#box").load("jquery1.html").dialog({modal:true,height:400,width:400});
}
)
</script>
</head>
<body>
<div id="parent" style="background-color:red;height:800px;width:800px;">
<div id="circle" style="position:relative;left:0px;height:800px;width:400px;background-color:green;float:left;">
</div>
<div id="box">
I want milk
</div>
<div id="sds" style="position:relative;float:left;left:5px;height:800px;width:399px;background-color:yellow;">
</div>
</div>
</body>
</html>
If I remove the load and just put a normal text in the div it works fine.
Can someone suggest an idea? Thanks!
just try to add it to the new line
$("#box").load("jquery1.html")
$("#box").dialog({modal:true,height:400,width:400});