I am trying to use jQuery to open an href inside a div, rather than simply linking to the new page. I have viewed a number of tutorials but the load() function does not seem to be working for me.
Please take a look at my code and let me know what piece of puzzle is missing.
Here is my HTML page:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Jquery</title>
</head>
<body>
<!-- nav links to open in div#content area -->
<a class="menu_top" href="pages/home.php">Home</a> | <a class="menu_top" href="pages/about.php">About</a> | <a class="menu_top" href="pages/contact.php">Contact</a>
<!-- div for links to open in -->
<div id="content-area"></div>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
And my jQuery Javascript:
$('.menu_top').click(function() {
var href=$(this).attr('href');
alert (href);
$('#content_area').load(href);
//return false;
});
I added alert to make sure the URL was being retrieved, and it is, then it would completely load then new page. So I added "return false" and it did nothing after the alert suggesting that the load() was not working.
Initially was running this through WAMP so I tried running the page directly from the folder and the browser tried to download the linked pages instead of opening them. I also tried uploading to a remote web site and got the same result as on WAMP.
Try:
$('.menu_top').click(function() {
var href=$(this).attr('href');
alert (href);
$('#content-area').load(href);
//return false;
});
Because your div is called #content-area, not #content_area.
Related
Well i am working on a website wordpress and i want to add javascript code to the article but it doesnt run !!
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script type="text/javascript">
document.write(5 + 6);
</script>
</body>
</html>
here the code , i tried custom field but it doesnt work also .
enter image description here
where i add the code exactly
If you're using gutenberg editor then you need to add custom html block to print out your script.
Check my backend screenshot: https://prnt.sc/rjqti4
Check my frontend screenshot: https://prnt.sc/rjqu3y
And if you're trying to do it on custom code then you should go for create a custom template or on single.php or on page.php file you simply use this code to load the desired items. Basically this is not the proper way to add script in WordPress though if you're using this script only on certain pages.
I would assume wordpress is stripping it out, you may need a plugin such as https://wordpress.org/plugins/simple-embed-code/#description to use script tags inside a post
You can add javascript code inside WordPress post > "Text" tab like:
<script type="text/javascript">// <![CDATA[
document.write(5 + 6);
console.log("Please check console: ", (5+6));
// ]]></script>
After adding this, save the WP post and then view the page in the browser.
<!doctype html>
<html lang="en">
<head>
<title>Greetings Page</title>
<link rel="stylesheet" href="./first.css" />
</head>
<body>
<h1>Greetings</h1>
<p id="greeting">Hello, World</p>
<script type="text/javascript">
setTimeout(function() {
document.getElementById('greeting').innerHTML = 'Hello JavaScript!';
}, 3000);
</script>
</body>
</html>
How do I link it to an external .js file I've made to put all of my JavaScript in?
My HTML code looks like this:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Sweet Dreams Bakery</title>
<link rel="stylesheet" href="home.css">
<script src="jquery-3.2.1.min.js"></script>
I've made the .js files for each page and they are in the same folder as the html files, however when I try to link them together with <script src="home.js"</script> underneath the library path, nothing works. I'm wanting to start with a simple image change on hover with my logo.
I've also tried the inline trick within my HTML for the logo with this code:
<img src="1" onmouseover="this.src='2'" onmouseout="this.src='1'">
I've tried linking to the "home.js" file I created and adding this into that file:
$(function(){
$("#swaplogo").on({
mouseenter: function(){
$(this).attr('src','Logo1.png');
},
mouseleave: function(){
$(this).attr('src','Logo.png');
}
});
});
I thought this was supposed to call out to the id that I gave the image and all of my images are together and working fine within the site. The id code for my logo is this:
<img id="swaplogo" alt="sweet dreams bakery logo" src="Logo.png" >
How would I go about linking an external JavaScript file (like my CSS files) to the html page in order to get the interactions to function correctly?
How to I link to my JavaScript to begin with? and then how do I make my image change on hover/mouseover?
Open JavaScript:- this code isn't editable as it is locked by the Host! So also I can't add any selector inside it!
But I can add another code outside of it. Like:- <ex ex="ex">Open JavaScript</ex>
So, I want to create a <script src="/javascript.js"></script> by fetching the URL from Open JavaScript.
They also didn't allow PHP there, otherwise I could do it myself. There is only one way to do it via JavaScript.
And I don't want to add the script inside <head> tags! It should be in the footer (<div class="body-footer"> Here </div>). There are not only one JavaScript link in the page, there are so many JavaScript links. So also I can't use $("a[href$='.js']");. Its became more tougher for me.
So how can I do this using JavaScript or jQuery?
Here is my implementation, where <script> tag is added before <a> with value of href.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var hrefValue = $("div#test a").attr("href");
$("div#test a").before("<script src='"+hrefValue+"'><\/script>");
console.log($("#test").html());
});
});
</script>
</style>
</head>
<body>
<div id="test">
Open JavaScript
</div>
</br></br>
<button>CLICK it, to add href value of anchor tag to newly created sibling element</button>
</body>
</html>
I have working javascript mobile app which I have been trying to restructure (correctly or incorrectly). The index.html file contained one page (using data-role="page") with various <div> elements that I hide and show depending what the user wants to do. I thought I could improve the structure by putting each of these <div> elements each in their own page (still in the index.html file) using data-role again. However, the subsequent pages lose their javascript functionality. I have created a very simple index.html file to demonstrate:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"/></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="mainPage">
<INPUT type="button" id="showPageTwo" value="Show Next Page" />
</div>
<div data-role="page" id="secondPage">
<INPUT type="button" id="showMainPage" value="Show Main Page" />
</div>
<script>
$(document).on("pageshow", "#mainPage", function(e) {
alert("Main page");
$("#showPageTwo").click(function()
{
$("#secondPage").show();
$("#mainPage").hide();
});
});
$(document).on("pageshow", "#secondPage", function(e) {
alert("Second page");
$("#showMainPage").click(function()
{
$("#mainPage").show();
$("#secondPage").hide();
});
});
</script>
</body>
</html>
Main page displays correctly, the alert is displayed $("#showPageTwo").click(function() works. But none of the javascript runs when secondPage loads.
Additionally when secondPage is shown it does not have the styling from jquery.mobile-1.3.2.min.css that mainPage has.
What am I doing wrong or misunderstanding? (This is when running the app in the Eclipse AVD)
Additionally, I would like to know:
Is the way I am trying to restructure my code using data-role="page" good or bad practice? Is there a recommended way to structure "pages" in a mobile app?
I also want to put my custom script(s) in their own .js file(s). Can I only load the script shown in the above code before the </body> tag? Is there any way to load it in the header along with all the other scripts?
I found this script, that i want to implement into my webside.
http://codepen.io/johnmotyljr/pen/qhvue
It does exactly what i want it to do, BUT! I don't know how to put into my webside?! Where to put the JS and how?
The content that i need to change is stored in an html-file, but how do i get that content into my div with this script?
Hope you can understand what i'm asking for and sorry for my limited/bad english!
View the source code of your link, find the <iframe> tab, and the demo html is inside.
You can load that content via AJAX. So, building on the CodePen-example you gave, you could do something like this:
$('#kittens').click(function() {
$('div').load('kittens.html');
});
Where kittens.html is the URL of the html file you want to load.
Update:
Now that you have posted a link to your website, I notice a few more things:
You haven't got jQuery included. Between you <head></head> tags you
should include <script type="text/javascript"
src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Probably, you want the Resultater | Billeder | Video | Afkom links to load different content, right? Then, you should use
something like this:
In between <script type="text/javascript"></script>:
$('.hesteundertop a[href="#resul"]').click(function(e) {
$('.hestetekst').load('... Resultater URL ...');
e.preventDefault();
});
try this type of method.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
var kittens = "Kittens";
var puppies = "puppies";
var aardvark = "aardvark";
$('#kittens').click(function(){
$('div').html(kittens);
//$('div').load('kittens.html');
});
})
</script>
<body>
<ul>
<li id="kittens"></li>
<li id="puppies"></li>
<li id="aardvark"></li>
</ul>
<div>Click on the picture for description.</div>
</body>
</html>