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.
Related
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" />
I'm trying to do a scroll to the top animation with my blog, http://goneintranslation.blogspot.ca with the home link and at the bottom. I think I have the proper coding here JSFiddle
I've read online you but the jQuery code before the < /head> tag in your HTML code
so this is what I did, I inserted the jQuery code within script tags and pasted this code before the < /head> tag in my HTML. After saving my code, the scroll to the top animation does not work. What am I doing wrong? I've read online you have to reference your script tags or something? If that's my mistake how do I reference my script tags or what is the reference to my script tags?
Many Thanks
<script>
$('.home-link').on('click', function(){
$("body").animate({ scrollTop: 0 }, 1000);
});
</script>
I saw your html code in jsfiddle:
<div class='mobile-link-button' id='blog-pager-home-link'> <div class="test">
TOP
</div>
<a class='home-link' expr:href='data:blog.homepageUrl' value="go to top">Go to top</a>
</div>
Please change the link to:
<a class='home-link' href='#'>Go to top</a>
Try wrapping it in the ready function and make sure jquery is included,
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.home-link').on('click', function(){
$("body").animate({ scrollTop: 0 }, 1000);
});
});
</script>
You don't need to include the code above in the <head></head> you can add it at the bottom of the page before the </body> tag, what you read about adding jquery to the head was about the link to the jquery library your going to use.
see below for a basic page setup
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<!-- and the rest of your resource links -->
</head>
<body>
<header>
<!-- your header html in here -->
</header>
<content>
<!--
where all your main content is
with the images and text that is
displayed on your page
-->
<!-- under all your main content at the bottom add your button/link to scroll back to the top -->
Scroll To Top
</content>
<footer>
<!-- your footer html in here -->
</footer>
<!-- now add your javascript/jquery functions -->
<script>
$('.home-link').on('click', function(){
$("body").animate({ scrollTop: 0 }, 1000);
});
</script>
</body>
</html>
There are lots of resources around to read up on and learn all this such as w3schools as well asand free online sites to learn code like codeacademy
hope this helps.
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.
How can I execute code when I change page with the .changePage() function?
For example I use this code:
$.mobile.changePage( "index.html#pageTwo" );
And when pageTwo is loaded I want to do this:
alert("Test");
In your <head> .. </head> put this:
// Jquery loaded here
<script>
$(document).on("pageshow","#pageTwo", function() {
alert("Test");
}
</script>
// jquery mobile loaded here
Notes:
The code above must be placed AFTER Jquery is loaded and BEFORE jquery mobile is loaded.
The code example above assumes that your index.html page contains a div with at least the attributes of data-role="page" and id="pageTwo":
<div data-role="page" id="pageTwo"> This is page two content </div>
Jquery mobile only parses/uses anything in the <head>..</head> section of the FIRST PAGE THAT IS LOADED! To ensure that all of the code required for all pages in your mobile site are loaded, regardless of which page the user lands on first, you should structure all your pages like this:
<html>
<head>
<script src="path/to/jquery.js"> // load jquery
<script src="path/to/common.js"> // all jquery mobile page event bindings are placed in here
<script src="path/to/jquery_mobile.js"> // load jquery mobile
</head>
<body>
<div data-role="page" id="pageOne"> This is page one content </div>
<div data-role="page" id="pageTwo"> This is page two content </div>
</body>
</html>
I have a dialog in jQuery and I want to show the dialog when the document loads. But I don't want to put code in <body onload="showdialog();">. I want to put javascript in the main div or the footer div that works like onload in the body event. Any way to do this?
<body onload="$('#dialog').slideDown('slow');">
<div id="dialog">Dialog</div>
<footer></footer>
</body>
I want this:
<body>
<div id="dialog">Dialog</div>
<script> show dialog code in load page </script>
<footer>
// or this place =>
<script> show dialog code in load page </script>
</footer>
</body>
You want to take a look at the ready function, like so:
$(document).ready(function() {
$('#dialog').slideDown('slow');
});