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.
Related
I have been working on my dynamic web form of Periodic Table of Elements. I made the HTML, CSS .... so structure and styling of my PTE.
Then I wanted to make my PTE dynamic using JS.
So, my main goal is:
When you click on element, PTE will disappear and it will load content into one HTML page, which is the same for every element. But the content has to change depending what element you click on.
I hope you will understand my problem.
Here is for example Hydrogen table cell (without CSS):
<td class="nonmetal">
<a id="first_element">
<strong class="symbol">H</strong>
<span class="atomic_number">1</span>
<em class="name">Hydrogen</em>
<span class="atomic_weight">1.008</span>
</a>
</td>
And here is simple piece of HTML code into which I want to transfer information about element (history of e., physical properties....)
<body>
<h1>About element</h1>
<p>Content</p>
<h2>History</h2>
<p>Content</p>
</body>
Maybe Ill need some text document with info from which Ill transfer info about element. Thats why I need help.
Thanks for all responses.
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 have a web page, I need part of the content separated to an individual page, but not use iframe. Just like to know if it is possible use div instead of iframe and works as it in the same page(With js base code or php code is cool).
I'd need the whole content of <div class="row-fluid">..</div> to be an individual html, but not use iframe, I will need a div instead of iframe, and make it works like just as in one page.
With PHP you can include a page inside your code inside a specific division.
for example inside index.php:
<div>
<?php include('page2.php'); ?>
</div>
and inside page2.php you have:
<span>Hello World</span>
The result would be:
<div>
<span>Hello World</span>
</div>
If what you want to achieve needs to be in the front-end as the user navigates through your site; that is after a click is made to an element and you don't want to change to another page, then AJAX is your option. this example is with Jquery:
$('.clickme').click(function(){
$.ajax({
url:'page2.php'
success:function(msg){
$('#insert_div').html(msg)
}
});
});
HTML:
<span class="clickme">Get Page 2</span>
<div id="insert_div">
<!-- Page 2 will be inserted here -->
</div>
Another solution is Jquery load() as many have posted:
$('.clickme').click(function(){
$('#insert_div').load("page2.php");
});
You can use the jQuery load() method to load the content when the corresponding link is clicked. you can also use this without event clicked with animation.
Am creating a web application having 4 tabs... Each tab contains a sidemenu (jQuery) and the remaining part is divided into 2, topdiv and bottom div (table with 2 colums.. col1=sidemenu, col2=topdiv+bottomdiv) ... I use
$("#topdiv").load("contents/abc.html #xyz")
To load contents of div xyz to topdiv, which(xyz) is in another page abc.html when I click a particular link in the sidemenu... But sometimes when #xyz will again have 4 or 5 tabs ,those tabs are not available as tabs in #topdiv... instead they appear as just list.. am using $("#___").tabs() for creating tabs...can anyone help me? I cannot add images here since am not having enough reputations in stack overflow. if some one provides ur email address I can attach images of my current status of page and those of which I need to design... here is part of ma code.
============================================================================
home.jsp
======================================================================
<div id="mainmenu" class="tabs">
<ul>
<li >tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab1">
</div>
<div id="tab2">
<div id="topdiv">
</div>
<div id="bottomdiv">
</div>
</div>
<div id="tab3">
</div>
</div>
===========================================================================
abc.html
============================================================================
<div id="xyz">
<div id="innertabs" class="tabs">
<ul>
<li >inner tab1</li>
<li>inner tab2</li>
<li>inner tab3</li>
</ul>
<div id="innertab1">inner tab 1 contents</div>
<div id="innertab2">inner tab 2 contents</div>
<div id="innertab3">inner tab 3 contents</div>
</div>
</div>
===========================================================================================
main.js//javascript---jquery-ajax connected
===========================================================================================
$(".tabs").tabs();
$("#topdiv").load("contents/abc.html #xyz");
enter code here
========================================================================================
pls note that div '#mainmenu' is appearing in tab format... but "#innertabs" also having class "tabs" is not appearing in tab format.. instead they appear in #topdiv as lists and contents below it
===========================================================================================
I assume you using jquery ui tabs.
If so after loading other page content, apply again tabs function on main div
$( "#tabs" ).tabs();
Actually you should apply .tabs() after ajax content is loaded. Not before that. I am not sure if applying .tabs() twice may damage it.
Update:
Here is fiddle for you Example . then your code will be
$("#mainmenu").tabs();
$("#topdiv").load("contents/abc.html #xyz");
$("#innertabs").tabs();
atlast after a lot of researchs and experiments, i hav found a solution to this... actually i hav to use unique div ids for tabs instead of class = "tabs"... then the tab statement will change to $("#innertabs").tabs(); but to make sure that $().tabs() is invoked only after loading the contents, put that statement in a callback function of $().load()... so my actual problem was $("#innertabs").tabs() is invoked even before it is loaded into #topdiv from the page abc.html..hence they can be displayed only as lists as there is no div with id=innertabs at the time of $().tabs() is invoked. . now it is avoided and the working code is
$("topdiv").load("contents/abc.html #xyz",function(){$("#innertabs").tabs();});
so only after loading the div into topdiv, corresponding tabs are generated and thus it will be displayed as tabs itself
so i think its good to use a callback function all the time when u need this stuff to be done without any errors...
also if anyone came to know about the disadvantages of this method pls do post here.. it wll be helpfull for me as a fresher
looking forward to a career in software development...