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; }
Related
I would like to be able to add (append) another set of div's to the section tag below when a user clicks on a button. For example adding the following div's:
<div class="from-me">
<p>this looks great. </p>
</div>
<section>
<div class="from-me">
<p>Hey there! What's up?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>Checking out iOS7 you know..</p>
</div>
</section>
What I am trying to create is something similar to a text conversation for an e-learning project. I've had success creating a new div with a javascript function that is run by clicking a button, but I couldn't get it to append inside the section tag. Is this possible or do I need to approach this differently?
Thanks.
-Shawn
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 have an html fragment that is being loaded by the backend into the main div of my page. It contains a modal that appears when a link is clicked on. The issue is, is that the modal is able to be covered up by other elements on the page. Setting the z-index is useless, because if an element in the header has a higher z-index than the main div, the modal will show up behind the header, regardless of its z-index. I'm currently solving the problem by using javascript (jQuery) to clone the modal, appending the clone to the body, and then deleting the original modal. This seems like a hacky workaround and could cause potential problems, is there a better way to do this? How do modals usually get loaded so that they don't encounter this issue?
Here's a jsfiddle of the problem: http://jsfiddle.net/kraxF/
Here's the HTML, as you can see, the modal is pretty low in the DOM tree, and may be covered up by elements in the header or footer or main, if they have a higher z-index than "loaded-by-backend".
<div id="container">
<div id="header">
Header
</div>
<div id="main">
Main
<div id="loaded-by-backend">
<div id="modal">
Modal
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
If you can change CSS, just remove position:relative from #main.
http://jsfiddle.net/kraxF/3/
I have a image document reader and in the header is an input[number] field. The idea is that the user can type which page (image) they'd like to see and the page will smoothly scroll down to the appropriate div.
Here's my code:
<div class="score-header">
<section class="nav">
<input type="number" id="page" />
</section>
</div>
The document's pages are displayed in their own divs, like so:
<div class="page-one">
<img src="page1.jpg" alt="" />
</div>
<div class="page-two">
<img src="page1.jpg" alt="" />
</div>
Is there a way that when the user inserts the number and clicks enter or a button, that the webpage will scroll down the the document's corresponding page.
N.B. The header sticks to the top of the webpage at all times via jQuery
something like this?
$(document).ready(function(){
$('#page').change(function() {
$("page-div").eq($("#page").val()-1);
//this selector takes the input value and subtracts 1 because the count starts in 0 so it will select the corect div ....
//i do not know how to scroll down.... i tryed this but did not work.... you need scroll to the possition of the selected div
$("#page-one").animate({scrollTop: $("#page-one").offset().top});
});
});
http://jsfiddle.net/ukjvS/13/
http://jsfiddle.net/ukjvS/13/show
(read the comments)
If possible answer my question :)
HTML & CSS blogger side menu?
I have a list of <li> items being generated from a CMS/DB. Each <li> has a <div> in it which contains a link to a lightbox (a hidden <div>). The link targets the id of the hidden <div> (#inline-content-print) so the javascript plugin triggers and pulls up the lightbox.
The problem I'm running into is that all of the <li>s on the page generate with the same hidden div id (I can change this to classes). So no matter which <li> href is clicked, it always pulls up the lightbox for the first <li> on the page (the first instance of the id). I need a way for the href to say "open #inline-content-print" from THIS div (the one the link being clicked lives in)".
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
Any advice would be greatly appreciated.
What server side language are you using? Is it producing these list items in a loop? Is there an index on that loop? If so, this would work for you.
[Server language version of a for loop with an index variable named "i"]
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print_[server language output of "i"]">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
[server language version of an end to the for loop]
Assuming you want to do this with jQuery/Javascript, you could use something like this:
$(document).ready(function()
{
$('li a.store-button').click(function(e)
{
var lightboxElement = $(e.currentTarget).find('div');
lightboxElement.show(); // or whatever function you need to display
return false;
});
});
Which is a little script that:
Waits for the page to load.
Finds your list elements (by li object type and the class on the links)
Intercepts click events.
Finds the div element nested in the link that was clicked.
Displays (or runs another function) on the target lightbox element.