Getting the title of the page and displaying it - JS - javascript

var lPT = document.title.split(' -')[0];
$('.pageBar .left').text(lPT);
With above code snippet, I am trying to display the title of webpage as in below example,
'Home - Sample Website' would come out as 'Home'
The html would be,
<div class="pageBar"><div class="left"></div></div>
I am trying this, but it is not displaying the title. I am relatively new to JS, and I would like to know, what am I doing wrong?

Try using this,
var lPT = document.title.split('-')[0].trim();
$('.pageBar .left').text(lPT);
Also, make use that you are not getting errors in the browser console and you have included the jquery file before this snippet.

Make sure that page title contains - else it will not show anything.
Check below example:
var lPT = document.title.split(' -')[0];
console.log(lPT);
$('.pageBar .left').text(lPT);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Sarjan - My page</title>
<div class="pageBar"><div class="left"></div></div>

Just like T.J.Crowder said:
you need to import jquery
you need to place your code after the you want to manipulate with that code (otherwise when your code runs the DOM element with the .pageBar does not exists yet )
Here is an example:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home - Sample Website</title>
</head>
<body>
<div class="pageBar">
<div class="left">
Sample text
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var lPT = document.title.split(' -')[0];
$('.pageBar .left').text(lPT);
</script>
</body>
</html>

Related

why script doesnt run?

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 Should use external javascript library in jquery?

What's wrong in my initialization, when I trying to use external javascript library in jquery
and I want to get a custom value from my pages and then manipulate that value by using external javascript plugin and then return back new value(or replace with old value),
below is my code:
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="external-library.js"></script>
<script>
var OldValue;
var NewValue;
OldValue = $(".raw-Data").html();
NewValue = new External-function(OldValue);
$(document).ready(function() {
$(".result").text(NewValue);
});
</script>
</head>
<body>
<div class="raw-Data">1318781876406</div>
<div class="result"></div>
</body>
</html>
When I add my <script> section in my document <head> section like above code all things works correctly and I haven't any problem,
But the problem arise when I want to add <script> section in end of document before closing <body> tag
because Drupal CMS initializing javascript library in bottom of document.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="raw-Data">1318781876406</div>
<div class="result"></div>
<script src="jquery.js"></script>
<script src="External-Library.js"></script>
<script>
var OldValue;
var NewValue;
$(document).ready(function() {
OldValue = $(".raw-Data").html();
NewValue = new ExternalFunction(OldValue);
$(".result").text(NewValue);
});
</script>
</body>
</html>
I want to know what's the correct and compacted method to do this.
Thanks for any help or suggestion.
JS variable names / function cannot contain - sign.
the common naming convention used by javascript is camelCase
so that New-Value should become newValue
and External-Function should change to externalFunction
see javascript variable naming convention on w3schools for more information :
https://www.w3schools.com/js/js_conventions.asp

window.open() doesn't work correctly inside a JS function

I tried to create an updates list for my web, so that when I click on the relevant update- a new additional small html window will open and I will see the full update content.
This is the code I wrote:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="updatesCtrl">
<span ng-repeat="x in updates">
● {{x.title}}
<br><br>
</span>
</p>
<script>updates();</script>
</body>
</html>
script.js:
function updates(){
angular.module('myApp', []).controller('updatesCtrl', function($scope) {
$scope.updates = [
{title:"update1",update:"update1 content"},
{title:"update2",update:"update2 content"}
];
});
}
function showUpdate(title, update){
var win=window.open('updateWindow.html','newwindow','width=600, height=350');
win.document.getElementById("title").innerHTML=title;
win.document.getElementById("update").innerHTML=update;
return false;
}
updateWindow.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1 id="title"></h1>
<p id="update"></p>
</body>
</html>
I have few problems here:
1.When I clicked on the update link, the update window replaced the main page (index.html) window, and also was a full size page.
2. No change was made in the <h1> and the <p> of the updateWindow- although I wrote a script that was suppose to enter an html content to those places.
I don't understand why I didn't get what I expected with this code. Especially, I don't understand the first problem: if I only try to replace the onclick content inside index.html with this: "window.open('updateWindow.html','newwindow','width=600, height=350'); return false;" - I get a new additional window with a smaller size as expected (I won't get the update content inside this window, but at least that solves my first problem).
What is the problem with my code?
Try to use window.open('updateWindow.html','_blank','width=600, height=350'); instead
it looks to me that the window is not loading before you try to update html:
you can see that the html page has not even loaded yet and the dev tools says there is a Uncaught TypeError: Cannot set property 'innerHTML' of null try getting the new page to update it onloadin the update page.

Polymer Element not registered in polymer from string/text

Can someone help me with stating what am I doing wrong in this example -- http://jsbin.com/bekoxo/2/edit?html,output#H:L23
The screenshot for the chrome inspector is at -
https://www.dropbox.com/s/t6uua7h714h2otg/Screenshot%202014-10-13%2001.32.54.png?dl=0
I can figure out that the element (appler-page) is not registered successfully, template shows document-fragment instead of desired shadow-root
the 2nd element, where polymer definition is part of the markup(same markup) is rendered successfully.
Can someone point out what am I missing in order to make the first part of example also work.
(which is creating an element via javascript and using it immediately)
EDIT --- problem code below
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>
<meta name="description" content="problem with dynamically building a polymer element" />
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var scr = '<polymer-element name="appler-page"><template>template content {{test}}</template><script>var proxymodel = {};proxymodel["test"] = "testfie" ;'+
'Polymer(proxymodel);<\/script><\/polymer-element><appler-page><\/appler-page>';
$(document).ready(function(){
document.getElementById("fie").onclick = function(){
var divel = document.createElement("div");
divel.innerHTML = scr;
document.querySelector(".polymerized").innerHTML = "";
document.querySelector(".polymerized").appendChild(divel);
}
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="button" id="fie" value="fie"/>
<div class="polymerized">before content</div>
EDIT -- A better jsbin for the problem
http://jsbin.com/bekoxo/2/edit?html,output#H:L23
Here is one way in which you can register your element imperatively (which, I believe is what your first element is trying to do). I've simplified your example a bit.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import"
href="http://www.polymer-project.org/components/polymer/polymer.html">
<script>
Polymer('appler-page', {test: 'testfile'});
var el = document.createElement('div');
el.innerHTML = '\
<polymer-element name="appler-page">\
<template>template content {{test}}</template>\
</polymer-element>';
document.body.appendChild(el);
</script>
<appler-page></appler-page>
</body>
</html>
See http://jsbin.com/qifupa/edit
Another instance of staying up with the latest Polymer version I found.
here's the working piece of code that may help anyone else if they are attempting the same thing.
I switched to Polymer-project.org addresses for the imports and it worked.
http://jsbin.com/bekoxo/14/edit?html,output#H:L23

Change content in DIV based on link click

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>

Categories

Resources