I have been searching for a solution including many here on Stackoverflow but am still not able to get it working hence the question.
The aim is to place collapsible content boxes in a simple html page. After looking at several demos I feel the following looks best and quite easy to install (script is already hosted, only have to deal with html): http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_collapsible_sets
I have pasted the following into head:
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Omitted meta name and link rel because if they're included, the page's formatting is messed up (some header text becomes bold, buttons are misaligned).
The following was placed at the desired location on the page:
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
...
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
However, the hiding function is not working when I view the page in Firefox; everything is shown. Can someone advise please?
Thank you Andy. I've managed to get it somewhat working but found that it messes up my fonts and stuff. Removing this line from head
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
fixes it, but renders the collapsible set broken. I don't believe they're expecting people to put their code into a site that doesn't use CSS, and obviously I'm not going to dump mine and use theirs, so how can I make this linked CSS play nice with my existing one?
Also, I am trying to embed a a Jotform code into the set. However, even though I've pasted the code inside (tried embed, iframe, source) nothing shows up in the expanded panel. Help?
I have been learning Jquery Mobile also.
Your header needs the following, just basics so you can get it working :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>my test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
Now within your body try the following pasted within the body of pageone:-
<div data-role="main" class="ui-content">
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
</div>
I would strongly recommend spending a little time on the Jquery Mobile site http://jquerymobile.com/
The collapsible set widget is directly linked here http://api.jquerymobile.com/collapsibleset/
Related
Would it be possible for me to make edits on a particular item that is on all page on my website and have it be edited on all pages.
For example, if I had a sidebar on all pages of my website, and I wanted to change the announcements box within that sidebar to a new announcement, could I do so without having to make the changes on all pages? How would I be able to if so?
What you're looking for is an iframe, you'll find tons of tutorials about that, but here's a quick example:
In your page e.g. index.html:
<html>
<head>
</head>
<body>
<div id="sidebar">
<iframe width="100" height="500" src="sidebar.html"></iframe>
</div>
<div>
Your main page content
</div>
</body>
</html>
In your sidebar.html:
<html>
<head>
</head>
<body>
<div>
Sidebar content goes here...
</div>
</body>
</html>
Now anything you update on the sidebar.html will be updated on index.html.
Add this iframe to every page that you want to contain this sidebar.
Hope this helps...
I'm probably thinking about this 'oldschool' but what am I missing?
I am writing an HTML5 app and using JQuery mobile. In the top left I have a menu button that slides out the menu panel. Great. Now I want multiple pages in the app... Ideally, I'd like to use a multipage HTML file, but I can't make the menu common, and if I update the menu, I have to edit it in every 'page' - not good.
I then found a couple links about $.mobile.loadPage(), for example this one and this one, but I can't get anything to work. The manual page doesn't help me either, although it looks like there is an iframe in their example - which I don't really want either.
In the example below, I get the alert so the load should have taken place, but the content has not updated and there are no updates in the java console.
My main page is below, but the 2nd page I'm trying to load has been various combinations of a full page with html tags, to just the raw content to get replaced, then I found some place that said it has to be wrapped in a page div, so this is where I stopped:
<div data-role="page">
<div data-role="header">
<h1>MyApp</h1>
</div>
<div data-role="content">
<center>
<p>This is page 2. Click me</p>
</center>
</div>
</div>
Here is my demo code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
function handlePageLoaded() {
$('#loadPage2').on("click",function(){
$.mobile.loadPage("pages/page2.php", {pageContainer: $('#main_content')});
// Tried these as well:
//$.mobile.loadPage("pages/page2.php");
//$('#main_content').load("pages/page2.php");
alert ("#loadPage2.onClick()");
return false;
});
};
$(document).ready(handlePageLoaded);
</script>
<title>MyApp</title>
</head>
<body>
<div data-role="page" id="application">
<div data-role="panel" id="menu" data-display="overlay">
<center>
Close<br />
<a id="loadPage2" href="pages/page2.php" data-role="button" data-inline="true">Page 2</a><br />
</center>
</div><!-- /panel -->
<div data-role="header">
<h1>MyApp</h1>
Me
</div>
<div id="main_content" data-role="content">
<center>
<p>This is the landing page.</p>
</center>
</div>
<div data-role="footer"><span class="ui-title" /></div>
</div>
</body>
</html>
I have also looked at using a standard HTML5 multipage jquery mobile app and extracting out the menu components writing the outlines of the menu in each page then incuding the common menu components in PHP, and this is pretty much as close as I got, but I'd rather not trasition the whole page if I can help it, but that's no biggy, the main problem with this approach is that I need PHP to do the include, and I'd rather have a native HTML5 app that can be served on any web server.
So my question again, is what am I missing? or how can I change my thinking to adapt to this new-fangled stuff?
you can use $.get to get common header
$.get('header.html', {}, function(response){
$('div#nav').append(response);
});
it will load common header in this div
<div id="nav" class="navcontain">
</div
When creating an html document my code works either way, but how do others like to organize their html hierarchy? for example I like to put my site's banner and the navigation bar in <head>.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type='text/javascript' src='script.js'></script>
<title> User's Profile'</title>
<div id="header">
<img src="http://svc004.bookeasy.com/images/MARGS/flourish-website-banner3.jpg" />
</div>
<div id="toolbar">
<span>Username</span>
<p>Profile</p>
<p>Medals</p>
<p>Account Settings</p>
<p>logout</p>
</div>
</head>
<body>
<div id="left_nav">
<p>Home</p>
<p>Scout</p>
<p>Attack</p>
<p>Fourms</p>
<p>Contact</p>
</div>
</body>
</html>
You shouldn't put anything in your head that you want to display as en element, because it's not the correct element for it.
It may work but you never know when it may not (or have subtle bugs). It will also confuse anyone who has to maintain this markup after you.
The spec says that the <head> element has to contain:
One or more elements of metadata content, of which exactly one is a title element.
Further down:
Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.
You can only put these tags in there:
<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>
The way you're doing it isn't good. Put the header in a <header> element in the <body>.
I was wondering if anyone had any suggestions as how to structure a website. I have a logo at the top, I wanted a navigation bar below that, and finally below that I wanted to have the page's contents. I messed around with it for hours, but I can't seem to get the navigation bar to go below the logo and above the main content. Does anyone have any ideas? Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="slideshow.js"></script>
<style>
#Slideshow1 img { width:1200px; height:500px }
</style>
<title> Law Firm </title> <!-- Seriously, don't forget to change that.-->
<div class="heading">
<div id="head">
<div id="logo">
<img src="logo.png" alt="Logo" width="1700" height="175">
</div>
<div id="navigation">
Home
About us
Areas of Practice
Reviews
I'm running out of ideas
Boring....
</div>
</div>
</div>
<!-- Include content types, links to external resources, keywords for the search engine, epirations and stuff, and whatever else needs to go here like titles and website icons. -->
</head>
<body> <!-- Obviously, the body starts here. -->
<div class="main">
<div id="content"> <!-- Let's kick it off with some stuff, of course. -->
<!-- Now let's get some java up in here!! -->
<script>
var imgArray = new Array();
imgArray[0] = "images/pic1.png";
imgArray[1] = "images/pic2.png";
slideshowFade('Slideshow1','',imgArray,20,5000);
</script>
</div>
</div>
</body>
</html>
It might help if you made a JSFiddle of what was going on, but I think I can answer this.
1) You're putting stuff in the head tag. I think you misunderstand what it means. It's not the "heading" of the page, it is ment for information that won't show up on the page itself (like what the page is called, what type of page it is). EVERYTHING (Meaning every div) goes in the body tag! The body doesn't mean the body of the website, it means what shows up on the page!
2) I can only guess because you haven't attached the style sheet, but I'm guessing you don't have clear: both on navigation, heading, and logo styles.
3) To the same elements I mentioned in #2, you may also want to add display: block just in case that isn't already set.
4) If 2 and 3 don't work, try defining heights for all of the elements as well (Sometimes this works for me, depending on what is causing the problem)
1 doesn't fix your problems, but it's right. 2 should fix your problem, but you really need to put main.css into your question because I can't know for sure. Also, look into using a ul tag for menue. It's worth doing.
Here is a JSFiddle example: http://jsfiddle.net/5JqUt/
You cannot have structural elements (like your <div>s) in a <head> element. All structural elements belong in the <body>.
You are writing your HTMLK code in the head trag so it's not visible. You should
write everything in between <body></body> tags of your page. Just bring your <div class="heading"> out of the head tags and put it inside body tag.
Here is an answer about HTML, if you look at the fiddle examle then you can understand it a bit. Remember that, every visible elements in a web page is the contents of the body tag, which means that, whatever you see in a web page, belongs to <body>your page content goes here</body>.
Here's a little messy code (functional, though) that I make for you:
<body bgcolor="#f5f5f5">
<link href='http://fonts.googleapis.com/css?family=Lato:100|Lato:300' rel='stylesheet' type='text/css'>
<div style="position:absolute;top:0px;left:0px;width:100%;">
<center>
<div style="color:#c3c3c3;font-size:75px;font-family:Lato;padding-top:25px;font-weight:100;">designing rocks</div>
<div style="text-align:left;width:465px;font-size:20px;font-family:Lato;font-weight:300;padding-top:10px;"><span style="color:#00bbbb;">home</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span>
</center>
<div style="position:absolute;top:165px;left:0px;width:100%;">
<center>
<div style="text-align:left;width:600px;background-color:white;font-family:Lato;font-weight:300;padding:25px;color:gray;">I LOVE content!</div>
</div>
</div>
You can always do embellishments, like a hover effect for the navigation links...
Tell me if it's functional. :)
You could always scrape a little of the ideas for your project.
Oh, and the other answers are correct, the reason why your layout doesn't work could be due to the fact that the page content is in the head. The head is for the title of the page, (title), and scripts you want to load before any other go in the head. The body is the part of the page that's visible to the user.
I saw both div and section been used in data-role="page". For example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>This content will be ignored.</p>
<!-- Begin Page 4 -->
<section id="page4" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>External Page!</p>
<p>Go to First Page.</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- End Page 4-->
<h3>This content will be ignored as well.</h3>
</body>
</html>
and
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Intro to jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Facebook Friends</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
What's the difference and what is section used for?Will it prevents load contents in it when it is not shown?
SECTION is simply an HTML5 tag. Since HTML5 is relatively new, many developers improperly use it, or you'll see only portions of a project updated to use the new tags while the rest continue to use DIV tags. The code that you have provided that uses SECTION does appear to use it in the proper place and context, just to give you an idea.
Check out this brief article on the SECTION tag and when to use it, don't get the idea that SECTION is just a fancy name for DIV: http://www.impressivewebs.com/html5-section/
Also, it never hurts to check out the specs: http://w3c.github.io/html/sections.html#the-section-element
The short answer to your question, though, is that there is no practical difference - a SECTION tag will behave exactly the same as a DIV tag in terms of how CSS affects it and how you work with it from javascript. The real difference is in how the tags are interpreted when a document outline is created, for example, by a feed reader.
The data-* attributes are a new HTML5 addition (article) that allow you to associate arbitrary data with an HTML element. The data within the attributes can be harnessed by javascript to implement features like tooltips or geolocation data. Formerly, such data had involved hidden child elements or JSON data, or a new AJAX request to fetch such data from the server. Now, javascript can simply read these data attributes to get associated data about a given element. I am not certain how exactly your particular script makes use of the data-role attribute, but it doesn't matter if the attribute is on a DIV, a SECTION, an IMG, or a SPAN insofar as the specification goes.