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!
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 want to make a blog on my own website without using a service like Wordpress, Joomla, etc that takes content from text files in a seperate directory and displays them on the webpage. This is what I have so far:
HTML
<html>
<head>
<title>doggo.info</title>
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://doggo.info/stylesheet.css">
<style type="text/css">
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://doggo.info/navbar.js"></script>
</head>
<body>
<header>
<img src="/images/navicon.png" onclick="openNav()" width="40" height="48" alt="Open Menu">
<em>doggo.info</em>
</header>
<div id="sidenav">
<a id="current">curlink</a>
otherlink
</div>
<div id="load" style="display:none;"></div>
<div class="content">
<div class="container text-center">
<div class="textbox">
<p id="posttitle"></p>
<p id="postdate"></p>
<p id="postcontent"></p>
</div>
</div>
</div>
<footer>
<p class="footer">doggo.info</p>
</footer>
</body>
<script>
$('#load').load("posts/post0.txt");
$('#posttitle').html($('#load').find('#title').html());
$('#postdate').html($('#load').find('#date').html());
$('#postcontent').html($('#load').find('#content').html());
</script>
</html>
0.TXT
<div id="title">Title of post</div>
<div id="date">1/1/1990</div>
<div id="content">
hi, i am blog.
<br>
<em>indeed</em>, it is true
<br>
what is <strong>life</strong>?
</div>
If there's a better way to formatting my txt files, I'm open to changing them.
I want to be able to have multiple files in the posts folder and have the site load them in decending order (99.txt, 98.txt, 97.txt ... 0.txt) into the page inside of textbox divs. I would also like it into pages with 10 or so posts a page.
I'm pretty much stumped, so any help would be appreciated. You can view what I've gotten so far here.
Use JSONs and AJAX to access the information that u want to display.
JavaScriptObjectNotation or JSON is a way you can format your files and access information that you want.
[
{
"Title": "Title of post",
"Date" : "1/1/1990",
"Content": "h, i am blog"
}
]
The file is saved as a ".json" and its contents are organised as objects.
This video is very helpful if you are new to JSON
JSON and AJAX YouTube
My overall intention is to over-ride the .click function of an element with a certain id, so that a button will replace only the contents of a specific element (not the whole page).
I am under the impression that I am running into trouble when embedding the script file, or in some of the coding in the script file.
I have come to this conclusion due to the fact that when my HTML and JS files are pasted into their respective windows on JSFiddle.net, that it works.
However, when I try to run the file from localhost, it is as though my .js file is not over-riding the .click function.
Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="./scripts/navScript.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<!-- COURSES page -->
<div data-role="page" id="noteVote">
<div data-role="header" align="middle" class="header">
<img src="./images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- This is the Navbar -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
</div>
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="coursesContent">
Main section
</div>
<!-- FOOTER -->
<div data-role="footer" class="footer">
SomeText
</div>
</div>
<!-- /COURSES -->
<!-- SEARCH -->
<div data-role="page" id="search">
<!-- This is the MAIN section -->
<div data-role="content" class="ui-content" id="searchContent">
<h1>Search Section</h1>
</div>
</div>
</body>
</html>
I believe I have linked the scripts in the correct order: JQuery, my_custom, JQuery Mobile.
So is it in my custom script that there is the error?
$("#searchButton").click( function() {
$('#coursesContent').html( $('#searchContent').html() )
});
If there is a better/easier way to do this, please let me know.
I have searched the internet for solutions, and I found that the order in which the scripts are loaded is important. I also tried inserting my script code inside a "$(document).bind("mobileinit", function(){ " function, which did not yield the results I'd hoped for.
I'm obviously quite new to JavaScript, and JQuery.
Thanks for your help, people.
You're right - order of the script is important (all lib's have to be loaded before you can refer to them).
You may use alternative javascript for this purpouse:
$(document).ready(function()
{
$(document).on("click","#searchButton",function(e)
{
e.preventDefault();
alert('And now what? Click will not take me anywhere...');
$('#coursesContent').html($('#searchContent').html());
});
});
Try to put this code at the bottom of the page (before </body>) and check browsers console for any other JS errors.
This is working example: http://jsfiddle.net/3Qaq7/1/
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.
I'm trying to get this vertical list to load the document titles I put inside the Load_content() during an Onclick event. The satisfactory outcome will be that everytime I click a new link... a new PDF loads into the iframe
<html>
<head>
<title> Literature of Andrew Willis
</title>
<link rel="stylesheet" href="mycss.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/cssverticalmenu.css" />
<script language="javascript" type="text/javascript">
function load_content (link) {
document.getElementById("iframe").setAttribute("src","link" );
}
</script>
</head>
<body>
<div id="logo">
<img src="mainlogo.jpg" height=100 width=400>
</div>
<div id="content">
<div id="leftcolumn">
<ul class="glossymenu">
<li>Short Essays</li>
<li><a href="#" onclick="load_content(hangmansdog.pdf)" >Poetry</a></li>
<li><a href="http://www.pourinpourout.com" >Blog</a></li>
</ul>
</div>
<div id="rightcolumn">
<div id="content">
<iframe id="iframe1" src="#"></iframe>
</div>
</div>
</div>
</body>
You have a few typos in your code. You gave your iframe an id of "iframe1" but referenced it in your JS using "iframe". You also shouldn't have quotes around link because you are using it as a variable, line 13 should look like this:
document.getElementById("iframe1").setAttribute("src",link );
You will however, probably want to put single quotes around the links themselves when you go to link them. i.e. onclick="load_content('Look at me now.pdf')"