I have single HTML form, but structured as multiple tab using display:none option.
And each tab has few section which will display block / none based on previous tab section.
I want to add print button in confirmation thank page which appear after form submission, that should print whole form (only with fields filled with value) in a same structure like HTML page.
<form>
<div id="section1">
<input type="text" id="name1">
<input type="text" id="name2" style="display: block;">
</div>
<div id="section2" style="display: block;">
</div>
<input type="submit">
</form>
I tried to use window print function, but that works only for current visible section.
This code was wrote long back without having this requirement in mind. so can some one suggestion some solution for this?
You would use a print.css file. In the print.css file you would set all your tabs to display:block; . This way:
In your HTML or view file
<!--MAKE SURE THIS IS LAST CSS FILE REFERENCE IN YOUR HTML <head>-->
<link rel="stylesheet" media="print" href="print.css">
In your print.css file
#section1, #section2{display:block}
OR
You can do a #media query in your main CSS file that will handle the print as well.
#section1,#section2{display:none;}
/*MEDIA PRINT TO HANDLE PRINT TABS. MUST GO AT END OF CSS FILE.*/
#media print {
#section1,#section2{display:block;}
}
Check out the JSFiddle.
https://jsfiddle.net/8u3nhzoL/1/
Related
I have a website which consists of 5 different pages.
To maintain the design of all the pages, I copied and pasted the code from the main page to all the other HTML documents to make sure that the Navigation Box and the main divs stay in position.
I've now been asked to implement the design in such a way where when I press a button, the other HTML pages will load dynamically onto my main index page. This way, if I need to change the design of the pages, I only have to change the index page and not have to repeat those changes for every single HTML document I have.
I've tried using Javascript for this, but I can't think of anything that would suffice. I can't understand jQuery at all, if someone has a clear understanding of how to accomplish this task using jQuery or Javascript, could you please explain it to me step by step?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="CSS/Index.css">
</head>
<script src="websitescript.js"> </script>
<body>
<div class="mainwrapper">
<div class="navbox">
<input type="image" id='about' src='images/about.jpg'
onclick="myFunction()"> </a>
<a href="location.html"> <img src='images/location.jpg' class="location">
</a>
<input type="image" id='contact' src='images/contact.jpg'
onclick="myFunction()"> </a>
<a href="inquiries.html"> <img src='images/inquiries.jpg' class="inquiries">
</a>
<a href="employees.html"> <img src="images/employees.jpg" class="employees">
</a>
</div>
<img src="images/duo.jpg" class='logo'>
<div id="header">
</div>
</div>
What you wanna do, is load content using AJAX (XmlHttpRequest). That means, you have just one page with layout, and content/other pages are loaded without the need of reloading the page.
For that, you can use jQuerys .load() function. Tl;dr; what you gonna do, is to have content of the website as simple html files, without layout (header etc), and using ajax you are gonna load it into the page.
Content of your main page index.html could look like this (I removed those images in nav bar)
<div class="mainwrapper">
<div class="navbox" id="js-navigation">
About
Location
Contact
Inquiries
Employees
</div>
<div id="header"></div>
<div id="js-content">
<!-- content will be loaded here -->
</div>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#js-content').load('/about.html');
$('#js-navigation a').click(function(e) {
e.preventDefault();
$("#js-content").load(e.target.href);
})
});
</script>
So in the same folder, you will have those other content files, but without navigation, wrappings header etc. Just plain content like:
<h1>About page</h1>
<p>Lorem Ipsum</p>
Alright so my approach is a bit different as I use PHP but hopefully I am still able to help you with this. I am working on something similar where I have "index" page that includes a nav bar at the top and empty space below it. After I click on something the content of another php file loads into white space, and said another php file is wrapped into a div I can edit with css. To do this I've used this php command:
<div>
<?php
$page = "MainPanel.php"; // my index
if (isset($_GET["page"])) {
$page = $_GET["page"];
}
if ($page == "" or $page == "MainPanel.php") {
$page = "/Main/central.php"; //default page upon running the code.
}
$GLOBALS["page"] = $page;
ob_start();
include($page);
ob_end_flush();
?>
</div>
This should be it. I don't know php very well and one of my collegues suggested to use this but it's relatively small amount of code and it works well.
I'm implementing a simple jQuery script on a website that loads content from one section of a webpage into the 'display container' on the same webpage.
The content i'm loading is multiple div's which are all wrapped in an outer <div> which has been hidden from view.
I have the display container div and several links the use can click on. Each time they click a link, the appropriate matched content is loaded in to the display container.
My jQuery.
$(".Prod-Link-2").click(function(e){
e.preventDefault();
$("#ITARGET").empty();
$("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />');
$("#ITARGET").load($(this).attr('href'));
});
Menu HTML
<div class="MPD">
<div class="Option">
<a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a>
</div>
</div>
The Target div
<div class="Info-Target" id="ITARGET">
</div>
So my problem is this all works except one of the links.
My hidden div has 4 content divs and 2 tables inside which all have their own IDs. SPECIFICATIONS grabs the #specTable, APPLICATIONS grabs the #FEAT div etc etc.. ACCESSORIES will not load the #ACCESSORY div at all and I don't know why. The script initializes and the page loader gif is displayed, but then instead of displaying the content I'm trying to load.. it displays nothing.
The hidden area format
<div style="display: none;">
<div id ="COMPARE"> some content </div>
<table id="specTable"> some content </div>
<div id ="ACCESSORY"> some content </div>
etc ....
</div>
For test purposes
<div id="ACCESSORY">
<p> This is the accessory div </p>
</div>
No matter what I change the name to in the ID tag and the links href attr, it will not load (I even tried making a new div with a different name and moving the div up to top of the hidden content area thinking it was maybe a loading issue), but if I change the links href attr to one of the tables or a different div such as #FEAT or #specTable.. it loads that fine.
My gut feeling is that there is some qwirk with jQuery and .load() that i'm unaware of.
This problem may be CSS related. I've just taken a look at a couple of products, and wherever the content includes lists, the display appears blank because of extremely excessive white-space.
This CSS rule seems to be the culprit:
.Features li:before { content: url(#)!important; }
i'm working on a HTML5/bootstrap app that need for several reason to be a single page app.
i'm looking on a way to 'simulate' multipage on a single page
for example to hide "customer" "partner" "subscriver" section when profile section is shown
i'dont want that users can scroll down from one section to another
i really need to have a single page, so librairy like pagify doen't work and iframe doesn't work as well
any idea ?
thanks
Why not something like: http://getbootstrap.com/javascript/#collapse If you use Bootstrap you can hide and show div's on the fly.
Greets,
Michel
If I understand your problem correctly, you want to keep everything on one page, but only show one section at a time. You can do this with javascript by hiding all the divs using CSS, then setting each nav button click to show the corresponding div:
<input type="submit" id="custbtn" value="Customers" />
<input type="submit" id="partbtn" value="Partners" />
<input type="submit" id="subbtn" value="Subscribers" />
<div id="customer">
Customer stuff
</div>
<div id="partner">
Partner stuff
</div>
<div id="subscriber">
Subscriber stuff
</div>
$("#custbtn").click(function(){
$("#customer").show(1000);
$("#partner").hide(1000);
$("#subscriber").hide(1000);
});
$("#partbtn").click(function(){
$("#customer").hide(1000);
$("#partner").show(1000);
$("#subscriber").hide(1000);
});
$("#subbtn").click(function(){
$("#customer").hide(1000);
$("#partner").hide(1000);
$("#subscriber").show(1000);
});
Fiddle
I am creating a webpage. Here is the concern.
The page has nav links on left end as a sidebar and the main content area occupies at the center.
I would want to open each link and its corresponding data should be displayed in the main content area (rest of the data hidden).
Please help me achieve this.Below gives my webpage view
<body onload="myFuntion()">
<div id="header">
<h3>Michaels Mob App Automation Dashboard</h3>
</div>
<div id="nav">
iOS<br>
<a name="Android" href="#" target="_self">Android</a><br>
KickOff<br>
Run<br>
</div>
<div id="section">
<table>
<tr><td> TestCase: </td> <td><input type ="text" name ="TestCase"></td><br>
<td> Execution Status : </td> <td><input type ="text" name ="Status"></td></tr><br>
<p>
enganunnd?:P
You might need to add the rows dynamically here using jscript.
iOS text
</p>
</table>
</div>
<div id="footer">
Graph View/
List View
</div>
</body>
This is what one refers to as loading partial views or html fragments.
jQuery has them: http://api.jquery.com/load/
AngularJS has them: https://docs.angularjs.org/api/ng/directive/ngInclude
you can also do it with <iframe>
you can also use XHR
You can use jQuery Load function if that is an option. http://api.jquery.com/load/
$("#nav a").click(function(){
$( "#section" ).load( "pages/test.html" );
});
If it's ok to have each link show the same URL in the address bar, and unless you need to get all the data for each "page" off a server, it would be better simply to hardcode each page/section into the one HTML document and use the nav links as triggers to show/hide each section using CSS. This eliminates Ajax calls and would be much quicker to load each section. And you could still populate each section's data dynamically by appending DOM nodes when necessary.
I am implementing Google Maps in one of my pages. I know I need to add onload="initialize()" onunload="GUnload()" within the <body> tag but I am not sure how.
Currently within my page I have pasted the following:
<body onload="initialize()" onunload="GUnload()">
<p>To Add your Google Map you must first plot your address by searching</p>
<p>
<input id="address" type="textbox" value="" placeholder="Search For Your Address">
<input type="button" value="Plot Your Address" onclick="codeAddress()">
</p>
<div id="map_canvas" style="width: 770px; height: 270px; border: 5px solid #EDEDED">
</div>
</body>
Even though this actually works, it must be terrible mark-up as it is a body section within a body section for the main page.
I am using Wordpress but I'm not sure if the above markup is OK or whether I should be putting it in the main page body tag. The problem is that I am not sure how to do this if needed. As I only need it on one page and not my entire site, I don't want to add this to the site's body tag to initialize Google Maps on every page and slow the site down.
Thanks for any advice.
No you don't want to be adding another body tag into the specific page template that uses the map. Your opening <body> tag will be in header.php , you should get the page ID of the specific page which you want to load it on and do;
<body <?php if (is_page(374)) { echo 'onload="initialize()" onunload="GUnload()"'; } ?>>
in header.php
Which will add that code to (in my instance) page 374.
To find the page id, just hover over it in the Pages section in the backend and you can see the ID in the link url.
For multiple pages you would use;
<body <?php if (is_page(array(374,375))) { echo 'onload="initialize()" onunload="GUnload()"'; } ?>>
and you can also use the slug or title instead of ID, but of course they are easy for your client to change and stop that code working. Here's the codex link on is_page;
http://codex.wordpress.org/Function_Reference/is_page