I have a parent page with thumbnails that link to a Jquery AJAX modal, so that when someone closes the AJAX html, the user will return to the scrolled part of the parent page that they clicked on. Everything is working as far as navigation and related thumbs etc. The only problem I am running into is that when i try to share the AJAX html page, the parent is being read, and not the AJAX html page meta.
Is it possible to use some script to have the first set of meta elements skipped and the AJAX meta read? Does that make sense?
Here is the page I'm working on --> Example
HTML:
<a class="thumb {url_title}" rel="modal:open" href="/{segment_1}/{url_title}">Blah</a>
SHARE BUTTONS:
<!-- AddToAny BEGIN -->
<a class="a2a_dd" href="https://www.addtoany.com/share"><i class="far fa-share-alt"></i></a>
<script>
var a2a_config = a2a_config || {};
a2a_config.onclick = 1;
a2a_config.num_services = 6;
</script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
Jquery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"> . </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
Related
I'm using JQuery To load the navbar and body of my website and I want to change the body content onclick some button in the navbar Can I use JavaScript to do that ? how can I ?
Please I been looking for a solution but I didn't found anythings .
Thanks in advance
html
<header>
<script>
$(function () {
$("header").load("./dist/includes/navbar.html");
});
</script>
</header>
<!-- END of Section NavBar -->
<main>
<script>
$(function () {
$("main").load("./dist/includes/home.html");
});
</script>
</main>
<!-- Section Footer -->
<footer class="footer">
<script>
$(function () {
$("footer").load("./dist/includes/footer.html");
});
</script>
</footer>
I want to chage the home.html loaded file when i click a button with id="nav-link"
Here is a screenshot
Consider the following code.
$(function() {
// Load content
$("header").load("./dist/includes/navbar.html");
$("main").load("./dist/includes/home.html");
$("footer").load("./dist/includes/footer.html");
// Prpgram Events
$("header").on("click", "button", function(ev) {
console.log("Nav Button was clicked");
$("main p").append("<a href='#'>New Page</a>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Section NavBar -->
<header></header>
<!-- END of Section NavBar -->
<main></main>
<!-- Section Footer -->
<footer class="footer"></footer>
<!-- END of Section Footer -->
Using jQuery we load the content. As the content did not exist in the DOM on ready, we will use .on() to delegate event callbacks on items that have now been loaded.
So if the following HTML was added to the header, for example:
<button>Show Link</button>
When this is clicked, it will execute the anonymous callback and append the link into main.
See More: https://api.jquery.com/on/
It would be better to use Server-Side Scripting to construct the HTML. Many of them have an Include feature or function that can add the pages into the Output before sending it to the browser so that the Client can work with all the content upfront.
I am trying to call the specific link id #ext when page loads instead of clicking it manually to show the modal popup. However I am not able to achieve it. Can someone look into code and suggest a change?
<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
<img src="image.jpg" />
</div>
<!-- Link to open the modal -->
<p>Open Modal</p>
The above code works fine when I do click on the link on the page "Open Modal". I want it to be called when page is loaded to show popup auto.
JSfiddle
Just for reference I am using this to show a modal popup: https://jquerymodal.com/
From the documentation:
You can manually open a modal by calling the .modal() method on the element:
As such you just need to call the modal() method on $('#ex1') when the page loads:
jQuery(function($) {
$('#ex1').modal();
});
jQuery(function($) {
$('#ex1').modal();
});
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css">
<div id="ex1" class="modal">
<img src="image.png" />
</div>
<p>
Open Modal
</p>
Basically I'm trying to get a plugin to work which opens up a webpage as an overlay rather than taking you away from the current page you are on. I cannot get the demo to work properly. It is demonstrated here:
http://jquerytools.github.io/demos/overlay/external.html
with a working demo here:
http://jquerytools.github.io/demos/overlay/external.htm
I can get this working perfectly for other pages which I host (relative paths), but I would like the overlay to open, for example, www.google.com - when I try this the overlay is simply blank. I am at a loss!
<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
Do *not* reference CSS files and images from flowplayer.org when in
production Enjoy!
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" type="text/css"
href="/media/css/standalone.css"/>
<link rel="stylesheet" type="text/css"
href="/media/css/overlay-apple.css"/>
<style>
/* use a semi-transparent image for the overlay */
#overlay {
background-image:url(/media/img/overlay/transparent.png);
color:#efefef;
height:450px;
}
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height:441px;
overflow-y:auto;
}
</style>
</head>
<body><!-- external page is given in the href attribute (as it should be) -->
<a href="external-content.htm" rel="#overlay" style="text-decoration:none">
<!-- remember that you can use any element inside the trigger -->
<button type="button">Show external page in overlay</button>
</a>
<!-- another link. uses the same overlay -->
<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
<button type="button">Show another page</button>
</a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
</body>
</html>
I am trying to create an HTML order type page with 3 buttons using jQuery Mobile:
Pick Up
Drop Off
Ship It
I've created the buttons and placed them properly on the page. Now, I'd like to display a unique form based on which button is clicked by the user.
Taking a look at examples it appears my options are jQuery, AJAX or Javascript. I'm already using jQuery so I tried going that route with no luck. Having added in the load HTML and JS Alert... my page will completely ignore the loading of HTML, but still display the alert. I've verified that my divs are properly named and that each link has a proper id set. So I gave up on jQuery for a bit.
On to javascript... add my logic in the between tags and again... it ignores loading of HTML content. I've tried putting things in divs, renaming divs, moving my form code to a seperate .html and .txt, but still no luck. I found a working example here and tried forcing its code into my page. Again, it does not load anything on button click when included in my page. (I'm using Chrome Version 35.0.1916.153)
Currently, the code for my page is as follows:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Order Type</title>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('result'+idInfo).style.display = 'block';
}
</script>
<link rel="stylesheet" href="assets/css/pp_mis_oa.css" />
<!-- Standard jQquery Mobile themes can be created and replaced, to apply universal styling -->
<!-- Go to: http://jquerymobile.com/themeroller/index.php to build one, and download it to the themes directory. -->
<link rel="stylesheet" href="themes/jqm-test/theme.min.css" />
<!-- Do not edit or remove the following jQuery framework files. -->
<link rel="stylesheet" href="lib/jquery.mobile.structure-1.3.1.min.css" />
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery.mobile-1.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Start Main Landing Page -->
<div data-role="page" data-theme="b" class="has_footer">
<div data-role="content">
<p>
<div id="buttonDiv" data-role="navbar">
<ul>
<li>Pick Up</li>
<li>Drop Off</li>
<li>Ship It</li>
</ul>
</div><!-- /navbar -->
<div id="result" style="clear:both;"></div>
</div> <!-- End Content Div -->
<!-- start footer -->
<div data-role="footer" data-position="fixed" data-id="footer-nav" data-theme="d" class="footer-bar">
<div class="ui-grid-solo">
<div class="ui-block-a"><button type="v" data-theme="b">Continue</button></div>
</div>
</div><!-- end footer -->
</div>
<!-- End Main Landing Page -->
<div id="divLinks">
<div id="container1">Container #1<p>Whole bunch of text 1</div>
<div id="container2">Container #2<p>Whole bunch of text 2</div>
<div id="container3">Container #3<p>Whole bunch of text 3</div>
</div>
</body>
What is going on here that jQuery/Javascript refuse to load in my content to my divs? Can someone help point me in the right direction?
Thank you!
If you wanted to do this with jQuery, you could change your showDiv function to the following:
function showDiv(idInfo) {
//hide all divs
$('#divLinks div').each(function() { $(this).hide(); });
//show the one selected
$('#container'+idInfo).show();
}
To move content from your "container" divs to your "result" div:
function showDiv(idInfo) {
//populate "result" div with selected content
$('#result').html($('#container'+idInfo).html());
}
I think you're trying to show divs with ids "result"+IdInfo where your div ids are container1, container2 and container3, so you should replace:
document.getElementById('result'+idInfo).style.display = 'block';
for
document.getElementById('container'+idInfo).style.display = 'block';
Also keep in mind that loading all the forms in the html (even if they are hidden) is not a good practice, so someone could see what he doesn't have to (and also can submit it). Consider to use some dynamic language (such PHP) to load only the form needed as the user type.
So I've tried to find an answer but can't seem to get this one right.
I've changed my code to model (pretty much exactly) after the answer in this question:
Delay pop-up for 10 seconds, only pop up once
When I test locally, I can get it to work if I change the cookie value to a number(ex:1) instead of the string (ex: 'yes') but after putting the site online, the fancy box never shows up using either method. Tried clearing cookies and emptying cache.
Here's my code for the popup:
<!--This is for a one time popup-->
<!-- Add jQuery library -->
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS file -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<!--Add fancybox CSS file -->
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add jQuery cookie library -->
<script src="cookie/jquery.cookie.js"></script>
<script type="text/javascript">
function openFancybox(){
$('.fancybox').fancybox().trigger('click');
}
$(document).ready(function(){
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
}
else {
openFancybox();
}
$.cookie('visited', 'yes' , { expires: 2 });
$('.fancybox').fancybox();
});
</script>
<!--End of popup code-->
In my html body I have:
<a class="fancybox" href="#inline1" title="Next Generation City"></a>
and
<div id="inline1" style="width:400px;display:none;">
<h3>About website.com </h3>
<p>
Here's my text for popup
</p>
</div>
I'm new to using cookies and fancy box, so I'm a little lost. Thanks so much for any help with this issue.
EDIT: also, I have a fancy box displaying correctly on another page of the site, so I'm fairly certain the issue is with the cookie part