Back button not working in jquery mobile - html

Hello friends i have created two page one is index.html and second is about.html . I just want to add back button on about.html using jQuery mobile . i have tried it but back button is not working in my code i dont know what is the problem
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="data-add-back-btn ">Back</div>
<div><h1>Page title</h1>
About us</div>
</div>
</body>
</html>
Please help me. Thanks in advance...

You may try creating your back button by using data-rel="back" as follows:
<a data-role="button" data-rel="back">Back</a>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<a data-role="button" data-rel="back">Back</a>
<div>
<h1>Page title</h1>
About us
</div>
</div>
</body>
</html>
Check the section "Back" button links of the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

Related

Foundation 6 columns grid classes not being applied

I am just trying to get a simple project started using foundation 6. My very simple html is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="row">
<div class="large-2 columns">
<h1>test</h1>
</div>
<div class="large-2 columns">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
However, when testing the website, the column classes are not getting applied and the grid is not working as it should be. Is there something I am missing?
Unless you're using < foundation 6, you need to be using the XY-grid because the old float grid was deprecated.
Check this out: https://foundation.zurb.com/sites/docs/xy-grid.html
Your html would look something like this using the XY-grid:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="grid-x">
<div class="cell large-2">
<h1>test</h1>
</div>
<div class="cell large-2">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Just wanted to add that you can still use the float grid in Foundation 6. If you visit the download page, you can select "Float Grid" under "Grid" in the left column and download that custom build. You do not have to use the XY Grid.
If you do that, your existing grid markup will work.

PHP DomXPath - Select html code except header, content and footer

I am using DomXPath for the first time and I don;t know how to select some html code.
For Example I've got:
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
<div class="header">
header content
</div>
<div class="content">
content
</div>
<div class="footer">
footer content
</div>
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<!-- JAVASCRIPTS -->
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script src="layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>
And I need to make 2 selections. First with the code before header div
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
And second with the code after footer div
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<!-- JAVASCRIPTS -->
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.backtotop.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script src="layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>
How can I do this? What should I use?
Thank you
Edit: I found out how to delete all divs, but I don't know how to separate the code before header and code after footer.
At the moment I've got this:
$html = file_get_contents('..');
$doc = new \DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTML($html);
$finder = new \DomXPath($doc);
foreach ($finder->evaluate('//div') as $node) {
$node->parentNode->removeChild($node);
}
which gives me the code in one variable. How can I split it?
So I'm not completely sure if you still need help on this problem but I have a regex that will match everything before your "header" <div>:
^<[\w\n\s="<>\/\-,.#!m]+(?=<div)
The pattern above would match this chunk of your HTML:
<!DOCTYPE html>
<html lang="">
<head>
<title>Dodmond</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
</head>
<body id="top">
As for the tail end of you HTML, it is a bit too tricky to get everything after your <div class="footer"> tag, but if you switch it from div to footer, you can accomplish this easily. Below is an example of using footer:
<footer class="footer">
footer content
</footer>
The following will match everything from </footer> all the way until the closing </html> tag:
(<\/footer>)[\w\n\s="<>\/\-,.#!m]+<\/html>
Please Note: above regex includes </footer>. Hope this helps!

My code is not showing columns horizontally

My code is not working, it is not showing horizontal columns. I tried everything, using sublime text 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col1</div>
<div class="col-xs-6">col2</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In your browser, right click on the page and View Page Source. Click on the link to css/bootstrap.min.css and see if it successfully loads the bootstrap styles. I'm wondering if this path needs correcting.
Your code works for me when I use the bootstrap CDN: http://jsfiddle.net/t2rbyj38/

Bootstrap 2.3.2 styles not being found/applied

I'm trying to create a basic Hello World page in Bootstrap, but the styles in the .css file are not being applied to the content on the page. In chrome dev tools, the .js and .css files are successfully loaded and can be looked through in-browser, but the styles are not applied to the element.
html:
<!DOCTYPE html>
<html>
<head>
<title>Alex Rules</title>
<link href="bootstrap/css/bootstrap.min.css" rel="styelsheet" media="screen" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="postContent" class="row">
<div class="span6 offset3">
Hello World!
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Is there a step that I'm missing?
In your link tag it says rel="styelsheet" and it should say rel="stylesheet".

Twitter Bootstrap css topbar html/css

I have this (using the Twitter bootstrap css sheet):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body style='padding-top:40px;'>
<div class='topbar'>
<div class='fill'>
<a class='brand' href='index.php'>BrandTest</a>
</div>
</div>
</body>
</html>
It's not showing the black bar at the top at the top.
Any ideas?
Some parts of the HTML is missing, it should look like this : http://jsfiddle.net/KajxK/
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<a class="brand" href="index.php">BrandTest</a>
</div>
</div>
</div>