hopefully someone has done this before...
Im trying to load an external page using Colorbox and its Ajax function.
using a ajax link from the example at colorbox you use a link like so:
<p><a class='ajax' href="../content/ajax.html" title="Homer Defined">Outside HTML (Ajax)</a></p>
This will load that page ajax.html into your page with the colorbox overlay, What I would like to do is load a specific div in the ajax.html. so something like:
<p><a class='ajax' href="../content/ajax.html#ThisDivOnly" title="Homer Defined">Outside HTML (Ajax)</a></p>
so only loading the DIV: #ThisDivOnly
have tried the above but no love.
Help appreciated. First time post. :)
I'd check out this question: Colorbox Load Specific div from iFrame
Looks like it's answered pretty well in there.
Related
im trying out the HTMX lib and so far i like it alot. something that i cant quite get my head around is handling full page reloads.
Links
<a class="nav-link" href="#" hx-get="/api/?action=feed" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/feed">Feed</a>
<a class="nav-link" href="#" hx-get="/api/?action=profile" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/profile">Profile</a>
its quite nice in that it loads the content in my required div, and applies a /#/link into my url bar and browser history.
But when i reload the page on any of the urls /#/profile or /#/feed the page reloads to its default state not including the content thats designated on the /#/profile or /#/feed pages.
If i just use a url of /profile or /feed, i get a 404 error as expected.
Everything is amazing, am i doing something wrong?
For full page loads you would need to either:
Render the content server side
Use htmx with the load trigger to load the content on page load. You can find an example of that here https://htmx.org/attributes/hx-trigger/
In the second case you still need to be able to determine the type of page being loaded server side to render the appropriate div. Something like this:
<div hx-get="/api/?action=feed" hx-trigger="load" hx-target="#app" hx-swap="innerHTML"></div>
I am using jquery featherlight (https://github.com/noelboss/featherlight) after trying to get jquery lightbox (https://lokeshdhakar.com/projects/lightbox2/) to work. I am using DataTables to generate a list. One of the items in the table is a link to a php page that returns links. The problem is I am calling an external PHP page that generates a list of links. So my link code is like this:
<i class="fas fa-link fa-lg"></i>
The page "lenker.php" does a search and outputs html code. It looks fine in the chrome inspector. But the popup is empty. If I link to another page with the code hardcoded it shows fine. Why does it not show when it is generated on the fly? The html code looks just fine like this:
<div><a class="external" href="http://databank.artsdatabanken.no/FremmedArt2012/N63753" data-featherlight="ajax">fremmedartsvurdering 2012 for edelgran</a></div>
<div><a class="external" href="http://eol.org/pages/1033070" data-featherlight="ajax">edelgran hos Encyclopedia of Life</a></div>
<div><a class="external" href="http://linnaeus.nrm.se/flora/barr/pina/abies/abiealb.html" data-featherlight="ajax">edelgran i Virtuella floran, Sverige</a></div>
but the popup opens and then resizes to almost nothing since there is no content. Featherlight does not need any other initialization since it looks for data-featherlight="ajax".
Is the problem that datatable is dynamic content?
jQuery ajax expects one object so I solved this with enclosing my content in one DIV.
I am a javascript dummy. I downloaded colorbox and jquery. They work great. I followed tutorials and read the example code but I cant figure this out.
When I open a colorbox ,it opens to the correct url, I can then click links in the box and surf other sites. That is all great. I need to have the url show in a address block at the top of the window. When I use a java popup it will work fine. You can goto other urls and the address shows in the address bar at the top of the window.
So I assume that I can do it with colorbox. This would make my page look much better than a plain popup. Can this be done. here is my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script src="http://www.mysite.com/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" href="http://www.mysite.com/colorbox/colorbox.css" />
<script>
parent.jQuery.colorbox.close();
$(function ()
{
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
})
</script>
and my link to open the box
<a class='iframe' href="http://www.ebay.com">ebay </a></p>
If you chooes to help I beg you to show me where the new code go's. If you tell me to add a line of code I will not understand where to put it. I am trying hard to learn javascript but I am a very newbe. Thanks.
I don't think ColorBox is the right plugin for you to use, given its default design and your skill set. ColorBox is not designed to be "browser like" and let the user surf to other sites.
It is possible to change that design assumption, but it would require more advanced JS skills than you admit to.
Maybe you can achieve your aim by simply opening a new browser instance using a plain HTML anchor tag (<a>) and using the "target=" parameter.
Best,
KJM
I have a container layout of a webpage that works like this:
<html>
#header#
<div class="content_container"> #content inserted here# </div>
#footer#
</html>
If the content has a div that is not closed or closes a div without it being opened, the content_container's div and so the layout gets messed up.
How is this situation normally avoided or solved?
Hy,
From what i found on the net, you could parse the fragment as a HTML document using the DOM loadHTML function, then spit it back out again as HTML. That will fix any HTML well-formedness errors.
Or you could use the Tidy extension for php5
http://www.php.net/tidy
I have a modal window using jqmodal. I need a button within that modal to load a different page in the modal. I have this functioning in all browsers except safari.
JS
<script language="javascript">
function shipCalc() {
$('.jqmWindow').load("/ash/shop/shipping.php");
}
</script>
HTML
<form name="form9" id="form9" method="post">
Zip: <input type="text" size="5" name="zip">
<a href="#" id="submitbtn" onclick= "shipCalc();" >zip</a>
</form>
KEEP IN MIND! The class .jqmWindow is a modal window using the jqmodal jquery plugin. It is NOT just a div on a page. I am using the method .load() to change what has been loaded in the modal window after it has popped up. The html shown above is inside the page that is originally loaded in the modal. I am having trouble understanding why this works in all browsers besides safari. I posted earlier and got some responses that weren't quite addressing the real problem here, which is that I can not use the .load() method to load anything into my modal window in safari. (Ive stripped some non-important information regarding future modifications I will make to further make this suite the needs of the site, just to keep this nice and simple to understand...)
function shipCalc() needed to be on both the initial page AND the page that gets loaded into the modal for safari to load everything properly. All other browsers did not require that. All is working now, so I figured I would post my own answer in case anyone was ever searching for something similar!