I'm creating a userscript which adds new functions to a website.
The website has many users, but doesn't have a feature to search for users.I want to create such a function. To do that, I have created a button in the already existing search page for other search purposes. When I click the button, I need the script to search for the input on Google and fetch the URLs and show the results in a piece of HTML code on a non-existing page.
Can I fake an URL with a userscript, so that it uses it to show HTML?
If not, can I replace certain HTML within the page?
The code isn't really that interesting. It just adds a button with a link and selects it when on the non-existing page.
CODE:
if (document.URL == "http://www.bierdopje.com/search" || document.URL == "http://www.bierdopje.com/search/" || window.location.href.indexOf("search/shows") > -1 || window.location.href.indexOf("search/episodes") > -1 || window.location.href.indexOf("search/forum") > -1) {
var users = document.createElement('li');
users.setAttribute('class', 'strong');
var UsersNode = document.createTextNode("Gebruikers");
var UsersLink = document.createElement('a');
UsersLink.setAttribute('href', 'http://www.bierdopje.com/search/users/');
document.getElementById("submenu").childNodes[1].appendChild(users).appendChild(UsersLink).appendChild(UsersNode);
if (window.location.href.indexOf("search/users/") > -1) {
UsersLink.setAttribute('href', './');
UsersLink.setAttribute('class', 'selected');
}
}
Sorry for answering my own question, but like Brock Adams already said: it may have been too localized.
The solution to fake an url is to replace the 404 not found content.
If there's like a container with a header and a paragraph, find the container by making it a variable, and then replace it with another variable:
// find the container
var example = document.getElementById('container').childNodes[0];
// set new container
var newcontainer = document.createElement('div');
newcontainer.setAttribute('id', 'ncontainer');
// replace the existing container with the new one
example.parentNode.replaceChild(replacement, example);
// write content to the new container
document.getElementById('ncontainer').innerHTML ='<p>This is not a 404 anymore</p>';
There are probably a lot more and shorter ways to accomplish this, but they can be found by Google (javascript replace).
To replace the complete page, use
document.write()
To finish the page, you can set the title with the following:
document.title = "WEBSITE TITLE";
Related
I am new to this site, and I know almost nothing about programming, so this question may have a simple answer.
I want to have links in my site that are able to grab a part of the current URL address to complete the href and send me to the desired webpage.
For example, let’s say that the webpage in my site I am viewing is:
https://www.example.com/notes/note-1
And then I have links in the same page like these ones:
https://www.example.com/editor1
https://www.example.com/editor2
Is there a way (java or jquery) that I can grab the last part of the path name (/note-1) to dynamically add it to my html links so the new addresses become?:
https://www.example.com/editor1/note-1
https://www.example.com/editor2/note-1
Now, I don’t need a code that appends “note-1” to the href, but that appends the ending of the current path—whatever it maybe (“/note-2, /note-3, etc.) to the href.
Thanks for your help.
You could implement it like so:
const idx = location.href.lastIndexOf('/');
const lastPart = idx !== -1 ? location.href.slice(idx + 1): "";
document.querySelectorAll('a').forEach(a=>a.href+=lastPart);
I'm building a web app to make my business more automated with HTML/CSS/jQuery in the front end and python in the backend .
I wrote an easy script with jQuery that call a route with ajax and recieve the data as json and after that parse it and return a list of iframes depending on it's length : If we have 20 items in that list and we want 5 items per page, create 4 pages and put 5 iframes in each link .
Here's the code responsible for this feature :
$('.pageContent').empty()
for (var i = 0; i < vidPageList.length; i++){
var videoUrl = vidPageList[i].videoLink
var postUrl = vidPageList[i].postLink
console.log(postUrl)
$('<iframe src ="'+videoUrl+'" class = "videoEntry" width = "360" height = "250"></iframe>').appendTo( ".pageContent" )
$('<a class = "postLink" href = "'+postUrl+'"> Video link </a>').appendTo(".videoEntry")
}
The problem:
iframes are added perfectly but the links are not added at all, I don't know why, the console is not showing me any error, I tried to debug the values of postUrl and they are all correct, why is it doing this ? It looks like the last line responsible for adding the link is not working, I also tried to add everything with one appendTo() call but it only added iframes, what I'm missing here ?
The first time your selectors ran, there was no .videoEntry class because it is in the iframe. It may be useful to first make all your html content before appending.
I need to create a link for a set of documents. They are created dynamically, thus the names are also different, f.ex. Test, Test2, so one.
I need to show the link like "Document TestN", where links changed according to the current document. I can now create the links by a href="id" onklick=bla+bla+bla", but the name does not change. Instead of 'Dashboard' I need to get 'Dashboard of "ConcreteSite"', where I can get names by pageHeader:
document.getElementById("pageHeading").appendChild(pageHeading);
<script language="javascript" type="text/javascript">
var siteNameAsParam = window.location.search;
var scrt_var = siteNameAsParam.split("siteName=")[1];
</script>
<p>You are here: Dashboard </p>
Based on your code I think this is what you're after but more detail on what you're trying to do would be great.
<p>You are here: Dashboard </p>
<p>You are here: Dashboard </p>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
var links = document.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
var siteNameAsParam = window.location.search;
var scrt_var = siteNameAsParam.split("siteName=")[1];
links[i].href = links[i].href + '?siteName=' + scrt_var;
links[i].innerText += ' fred';
}
}, false);
</script>
This does the following:
On page load gets all links on the page
loops through the links and grabs the query strings from the url
splits the query string on siteName
sets each link url to add the query string
updates the links text to append the query string (or undefined if it doesn't exist (see note below)
Note: your code implies you already have a query string in the url of siteName=SITENAMEHERE. Also, depending what you're trying to achieve, there are probably much better approaches. This I hope answers your current question but I think you should review how other achieve what you're after.
Update:
Here is a jsfiddle with a different working sample of what I think you might want. Hopefully it helps. there are comments in the fiddle. I think you want to try doing more when the link is created (set the event listener there, update the text as desired, etc.) instead of on the click event.
I'm using CKEditor and I want to indent just the first line of the paragraph. What I've done before is click "Source" and edit the <p> style to include text-indent:12.7mm;, but when I click "Source" again to go back to the normal editor, my changes are gone and I have no idea why.
My preference would be to create a custom toolbar button, but I'm not sure how to do so or where to edit so that clicking a custom button would edit the <p> with the style attribute I want it to have.
Depending on which version of CKE you use, your changes most likely disappear because ether the style attribute or the text-indent style is not allowed in the content. This is due to the Allowed Content Filter feature of CKEditor, read more here: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
Like Ervald said in the comments, you can also use CSS to do this without adding the code manually - however, your targeting options are limited. Either you have to target all paragraphs or add an id or class property to your paragraph(s) and target that. Or if you use a selector like :first-child you are restricted to always having the first element indented only (which might be what you want, I don't know :D).
To use CSS like that, you have to add the relevant code to contents.css, which is the CSS file used in the Editor contents and also you have to include it wherever you output the Editor contents.
In my opinion the best solution would indeed be making a plugin that places an icon on the toolbar and that button, when clicked, would add or remove a class like "indentMePlease" to the currently active paragraph. Developing said plugin is quite simple and well documented, see the excellent example at http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 - if you need more info or have questions about that, ask in the comments :)
If you do do that, you again need to add the "indentMePlease" style implementation in contents.css and the output page.
I've got a way to indent the first line without using style, because I'm using iReport to generate automatic reports. Jasper does not understand styles. So I assign by jQuery an onkeydown method to the main iframe of CKEditor 4.6 and I check the TAB and Shift key to do and undo the first line indentation.
// TAB
$(document).ready(function(){
startTab();
});
function startTab() {
setTimeout(function(){
var $iframe_document;
var $iframe;
$iframe_document = $('.cke_wysiwyg_frame').contents();
$iframe = $iframe_document.find('body');
$iframe.keydown(function(e){
event_onkeydown(e);
});
},300);
}
function event_onkeydown(event){
if(event.keyCode===9) { // key tab
event.preventDefault();
setTimeout(function(){
var editor = CKEDITOR.instances['editor1'], //get your CKEDITOR instance here
range = editor.getSelection().getRanges()[0],
startNode = range.startContainer,
element = startNode.$,
parent;
if(element.parentNode.tagName != 'BODY') // If you take an inner element of the paragraph, get the parentNode (P)
parent = element.parentNode;
else // If it takes BODY as parentNode, it updates the inner element
parent = element;
if(event.shiftKey) { // reverse tab
var res = parent.innerHTML.toString().split(' ');
var aux = [];
var count_space = 0;
for(var i=0;i<res.length;i++) {
// console.log(res[i]);
if(res[i] == "")
count_space++;
if(count_space > 8 || res[i] != "") {
if(!count_space > 8)
count_space = 9;
aux.push(res[i]);
}
}
parent.innerHTML = aux.join(' ');
}
else { // tab
var spaces = " ";
parent.innerHTML = spaces + parent.innerHTML;
}
},200);
}
}
I'm trying to write some code in javascript that uses a user's cookies to display a box containing some information. The page opens with some boxes containing news articles from Google News RSS feeds. I'm using a 3rd party app for the RSS; the feed is included in the HTML code as such:
<script language="JavaScript" src="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fnews.google.com%2Fnews%3Fq%3Dbarack%2Bobama%26output%3Drss&num=4&date=y&targ=y&utf=y&css=feed" charset="UTF-8" type="text/javascript"></script>
The user can move the boxes around, and I want to store the box locations using cookies so that if a user revisits the page, the boxes will be in the same location. However, when I try to load the page from the information in the cookies, the boxes are blank. This is an example of what my code looks like (RSS feed for news using keyword "Barack Obama"):
// Render boxes into HTML
function renderItem(container) {
var wrapper = document.getElementById(container);
var div_box = document.createElement('div');
var feed_url = 'http://www.feedroll.com/rssviewer/feed2js.php src=http%3A%2F%2Fnews.google.com%2Fnews%3Fq%3Dbarack%2Bobama%26output%3Drss&num=4&date=y&targ=y&utf=y&css=feed';
var div_box_feed = document.createElement('div');
var feed_script = document.createElement('script');
feed_script.setAttribute('language', 'JavaScript');
feed_script.setAttribute('src', feed_url);
feed_script.setAttribute('charset', 'UTF-8');
feed_script.setAttribute('type', 'text/javascript');
div_box_feed.appendChild(feed_script);
div_box.appendChild(div_box_feed);
wrapper.appendChild(div_box);
}
When the page loads, the box appears but the news articles from the RSS feed are not there and the box is empty. When I look at the source code, however, it is identical to the code of the initial boxes (which did display the news articles).
Does anybody know what's wrong?
Thanks!
You never declared column_div here:
wrapper.appendChild(column_div);
Did you mean:
wrapper.appendChild(div_box);
?
I believe that by default script elements created in this manner have their async attribute set to true, so the rest of your code will execute before your JS has been retrieved.
Where does the column_div variable come from?
You're missing a question mark to separate the post variables from the URL, so the URL is resolving to
var feed_url = 'http://www.feedroll.com/rssviewer/feed2js.php%20src=http%3A%2F%2Fnews.google.com%2Fnews%3Fq%3Dbarack%2Bobama%26output%3Drss&num=4&date=y&targ=y&utf=y&css=feed';
It should be
var feed_url = 'http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fnews.google.com%2Fnews%3Fq%3Dbarack%2Bobama%26output%3Drss&num=4&date=y&targ=y&utf=y&css=feed'