I am attempting to manipulate the hyperlink of a button and I'm getting nowhere with this and not sure where I am going wrong.
The Code:
<link rel="stylesheet" href="https://cdn.site.td/Calendar.css">
<script type="text/javascript" src="https://cdn.site.td/Calendar.js"></script>
<div id="the-calendar"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var options = {
fullNames : false
};
var myCalendar = new Calendar(document.getElementById('the-calendar'), options);
});
</script>
This generates an event calendar that is loaded on a separate website. It works perfectly when loading it on a separate domain except for one thing. There is a more info button for events and when you click that it attempts to go to:
/folder/folder/folder/event-name-1
So of course, when I generate it on a separate domain it attempts that same folder path except with the current domain. Therefore it goes nowhere since the folders are not the same on both domains.
I want to add an onClick event to the button to manipulate the path of the hyperlink.
The button is:
<button class="calendar-icon-info-action">More info</button>
Keep in mind this button is not generated until the initial script above loads and populates the page with the HTML for the calendar.
So once the calendar is loaded, I need each more info link for each event to be manipulated to add the original domain path. I would need a variable to store the original path because that will not change too.
So to recap more info leads generates:
/folder/folder/folder/event-name-1
I want this stored in a variable and then another var for the domain stored together so it becomes something like this:
var a = "domain.tld";
var b = "/folder/folder/folder/event-name-1";
var c = a + b;
document.getElementsByClassName("calendar-icon-info-action")[0].addEventListener("click", function(){
document.getElementsByClassName("calendar-icon-info-action")[0].href = var c;
});
The href attribute is applicable only for a tags (links). Since you have a <button>, what you could do is intercept and block the original event, and redirect the page to the desired URL.
Something like this:
document.getElementsByClassName("calendar-icon-info-action")[0].addEventListener("click", function(event){
// This will stop the original event:
event.preventDefault();
// This will open your desired URL:
window.location.href = c
});
If you have multiple buttons and want to update the event of all of them, you could loop the buttons:
document.querySelectorAll(".calendar-icon-info-action").forEach((elem) => elem.addEventListener("click", function(event){
event.preventDefault();
window.location.href = c;
}))
For future reference, if you had links instead of buttons, and wanted to change the href attribute, the proper way to do is:
document.getElementsByClassName("calendar-icon-info-action")[0].setAttribute('href', 'your-url-here')
Related
I am trying to have a set of links that open a new page that contains an iFrame and have the iframe src open to the specific anchor referenced by the id attribute of the original link. On this test page the querySelectorAll part is working just fine.. the appropriate target page that contains the iFrame is being loaded, and the src of the iFrame is being switched correctly (though man I hate that setInterval delay...).
So that part all works fine. What I am wanting to have happen is for that iFrame src to also load to the specific target as denoted by the id of the original trigger element. For the "numbers" type of link I have included a #target for an example. What I want though is for the javascript to be able to fill in that part so I don't have to code every single link separately.
I made an attempt based on another test for the "letters" type of link... but it doesn't work at all. I think I am on the right path, but would very much appreciate any pointers.
The HTML:
<div class="nLink" id="n6">6</div><br>
<div class="lLink" id="monad">monad</div><br>
<div class="nLink" id="n10">10</div><br>
<div class="lLink" id="singularity">singularity</div> <br>
The javascript:
const numbers = document.querySelectorAll('.nLink');
const letters = document.querySelectorAll('.lLink');
var nIndex;
var lIndex;
numbers.forEach(nLink => {
nLink.addEventListener('click',() => {openNumberIndex();sendMessageN();}, false);
function openNumberIndex(){
nIndex = window.open ('numberindex.html');
}
setInterval(sendMessageN,1234);
function sendMessageN(){
let msg={nFrame: 'numberlist.html#n10'};
nIndex.postMessage(msg,"*")
nIndex.focus();
}
});
letters.forEach(lLink => {
lLink.addEventListener('click',() => {openLetterIndex();sendMessageL();}, false);
function openLetterIndex(){
lIndex = window.open ('letterindex.html');
}
setInterval(sendMessageL,1234);
function sendMessageL(e){
if (e.target !== e.currentTarget) {
var clickedItem = e.target.id;
let msg={lFrame: 'glossary-index.html#'+clickedItem};
lIndex.postMessage(msg,"*")
lIndex.focus();
}
}
});
I guess I am unsure about syntax, or even if any of the above makes sense at all. The part in definite question is the sendMessageL. Thanks for any help!
I want to make a button which is a link to another page to the video js video player which I am using but nothing seems like working. After adding the button it got added to the control panel of the player but the button is not visible to the user. Also, I want to add a link to that button once it got pressed it should open a new page. I couldn't find good documentation of the same the code which I am trying is posted here.
var player = videojs('my-video');
var button = player.addChild('button');
var myButton = player.controlBar.addChild('button', {
text: "Press me",
// other options
});
How to extent this fuction such as onclick events like that. I guess there will be some methods which i can define inside player.controlBar.addChild('button' This itself
Text you pass in your option is available as a controlText and not a display text. ControlText creates a span in you button which is displayed when hovered. This control text is present in all the components in video js.
To add a text in videojs here is a simple way.
var player = videojs('my_video_1');
// When you pass text in options it just creates a control text,
// which is displayed as tooltip when hovered on
// this button viz the span in you div,
var myButton = player.controlBar.addChild("button");
// There are many functions available for button component
// like below mentioned in this docs
// https://docs.videojs.com/button.
// You can set attributes and clasess as well.
// Getting html DOM
var myButtonDom = myButton.el();
// Since now you have the html dom element
// you can add click events
// Now I am setting the text as you needed.
myButtonDom.innerHTML = "Hello";
myButtonDom.onclick = function(){
alert("Redirecting");
window.location.href = "https://www.google.com"
}
Instead of setting an inner html you can play around and add any html DOM attribute since at the end it is only a button.
Adding Codepen link for code demonstration
https://codepen.io/vaibhav281128/pen/NWawWjr
In case if you want to register your button as a custom component
https://codepen.io/vaibhav281128/pen/bGoYGPR
My solution in case you also want to control the position of your button:
addButtonToPlayer() {
let myButton = player.controlBar.addChild('button');
myButton.controlText('tooltip text');
player.controlBar
.el()
.insertBefore(
myButton.el(),
player.controlBar.getChild('fullscreenToggle').el()
);
let buttonDom = myButton.el();
buttonDom.innerHTML = '⬇'; // button text/emoji
buttonDom.onclick = function() {
alert('Hey');
};
}
I have a button on one html page, but when clicked I want it to activate a different button on a different html page. Is this possible?
This is only possible if the first page actually generates the second page (via window.open()). Otherwise, you won't have any way to access the document in the other window.
Here's an example:
var newWin = window.open("other page in my domain");
var otherButton = newWin.document.querySelector("selector to find button");
otherButton.click();
This solution will work though, but it requires passing a value from one page to another. It cannot link pages together. If you want that look into websockets.
Page 1
HTML
<button id="activate">Activate other page</button>
JavaScript
document.querySelector("#activate").addEventListener("click", function(){
location.href = "page2.html?button=activate"; //mind the querystring here.
});
Page 2
HTML
<button id="toactivate" disabled>disabled button</button>
JavaScript
var activateButton = location.search.slice(1); //querystring | get rid of the ?
activateButton.split(/&/);
activateButton.forEach(function(value){
var splitted = value.split("=");
if (splitted[0] == "button" && splitted[1] == "activate")
{
document.querySelector("#toactivate").removeAttribute("disabled");
}
});
I am trying to make a simple webapp.
I want to put data from the main page into an input box on another window/tab but the input box is always empty when I'm opening it.
Here's the code:
global.js
function showUserInfo(event) {
// Prevent Link from Firing
event.preventDefault();
var _id = $(this).attr('rel');
var arrayPosition = userListData.map(function(arrayItem) { return arrayItem._id; }).indexOf(_id);
// Get our User Object
var thisUserObject = userListData[arrayPosition];
window.open('http://localhost:3000/editrecord', 'window', 'width=500,height=400');
var fName = thisUserObject.cName
$("#inputecName").attr('value', fname);
Running this would open the 'editrecord' window and the data I am trying to get should be in the input box in 'editrecord' page.
editrecord.jade
#editBox
fieldset
input#inputecName(type='text', placeholder='Customer Name', width = '50%')
br
button#btnEditRec(type='submit') Update Record
Thank you in advance.
js at Question attempts to set the value of an element at a separate document
$("#inputecName").attr('value', fname);
from the current document, without referencing that the element is within a separate document at a separate window.
You can use sessionStorage to access Storage object between browsing contexts, or window objects, that have same origin; utilize .ready() to check sessionStorage when editrecord.html is opened in browser and the document is loaded.
At original html document global.js
<script>
sessionStorage.setItem("id", 123);
var w = window.open("editrecord.html", "w");
</script>
at editrecord.html
<head>
<script>
$(document).ready(function() {
if (sessionStorage.id) {
$("#inputecName").val(sessionStorage.getItem("id"))
}
})
</script>
</head>
<body>
<input type="text" id="inputecName" />
</body>
plnkr http://plnkr.co/edit/7TRQOPYPX4bMpxr6pjyX?p=preview
You can send data via URL like,
Next page
By JS or Server side script you can fetch the data from URL and use it,
You can do like this one
var childWindow = window.open('http://localhost:3000/editrecord', 'window', 'width=500,height=400');
$(childWindow.document).load(function() {
var fName = thisUserObject.cName
$("#inputecName").attr('value', fname);
})
You can access the inputecName from chilld window using plain javascript
childWindow.document.inputecName
I'm working on an extension that I need to find a way to catch the current focused link.
When we hit TAB Key, or mouse over a hyperlink, we can see in the status bar (right side of the address bar for firefox 4+) the URL of that link has been shown.
How do you capture this URL with Javascript in Add-on online builder? how do I store it into a variable and whenever the focused link is changed, the variable value will be updated accordingly? I searched internet for hours and so far found this function called Document.activeElement.href ?? But I'm not sure that's what I need and if it is, how do I use it?
Please help!
Thanks !!!
This should do the trick:
<html><body>
link 1
link 2
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
var handler = function() {
jQuery('#output').text( jQuery(this).attr('href') );
};
jQuery('a').focus(handler).mouseover(handler);
</script>
</body></html>
Let me know if you don't want to use jQuery, and I'll re-write my answer.
The variable window.XULBrowserWindow.overLink happens to contain the current hovered URL as shown in the status bar but it doesn't save the actual element being hovered.
http://jsfiddle.net/DmX5j/6/
var links = document.getElementsByTagName('a'),
linkDisplay = document.getElementById('currentLink'),
currentLink;
for(var i =0; i < links.length; i++){
links[i].onfocus = function(){updateLink(this.href)};
links[i].onmouseover = function(){updateLink(this.href)};
}
function updateLink(link){
currentLink = link;
linkDisplay.innerHTML = currentLink;
}
pure JS way. Not sure if this is what you are looking for or not, basically on focus or mouseover the current link is updated.
you will need to put event handlers on all links of the interest, this is quite easy using jQuery, when the event trigger you can capture the href attribute and process accordingly