Does anyone have experience with Disqus?
I am adding buttons to the existing website and when button is pressed, it should fire disqus comments.
In the beginning, this is run
function insertdisqus(){
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = 'https://myforum.disqus.com/embed.js';
$('head').append(dsq);
}
then,
var button = document.createElement("a");
button.setAttribute("id", "diqus");
button.innerHTML = "Discussion";
button.addEventListener('click', loaddisqus);
function loaddisqus(e){
parent_element = $(this).parent().parent();
next_element = parent_element.next();
subjectcode = next_element.attr('data-subjectcode');
var disqus_identifier = subjectcode;
var disqus_url = window.location.origin;
next_element.after('<div id="disqus_thread"></div>');
so, when the button is pressed, loaddisqus should execute, and it does. But it doesn't do anything further than creating the disqus_thread divs...
What could be wrong?
first thing, you try to mix plain javascript and jquery (not a good idea)
perhaps you can try something like this:
var btn = $('<button>').html('Duscussion').on('click', btnClickListener);
$('body').append(btn);
var btnClickListener = function(event){
var clickedElement = $(this); // get the clicked element
clickedElement.html('new Text'); // do what you want (i.e. change the content of the clicked button)
}
second is, you try to use a link (a-tag) as an button. the problem is, a link allways tries to relocate your page to the href target. a button should be a button, not a link. if you need a link because of style or something you have to expend your listener function to something like this:
var linkButton = $('<a>').attr('href', '#').html('click here').on('click', linkButtonListener);
$('body').append(linkButton);
var linkButtonListener = function(event){
event.stopPropagation(); // stops actions from all parent elements
event.preventDefault(); // stops the default actions of the link
var clickedButton = $(this); // get the clicked element
clickedButton.html('allready clicked'); // do what you want (i.e. change the content of the link)
}
i hope that helps you to understand how the listeners with jquery works very simple.
last thing, you try to enable a script tag and hope the script runs after click on your button. but this does not work in javascript. all scripts will be loaded once. you can't execute it by adding a script tag after the document is ready. if you want this, you have to execute it by hand (perhaps with eval function), but it's not the fine way. There are some frameworks that can include scripts by action and make them executeable i think. i know it does not work and never used it.
Related
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 some JS code that I am trying to debug, and the problem is that the window.onload function is being called way more often than I expect it to. Here is my JS code:
var trueCountApp = (function(){
window.onload = function(){openRulesOverlay()};
document.getElementById("open-rules-overlay-button").onclick = function(){openRulesOverlay()};
document.getElementById("select-rules-button").onclick = function(){saveRuleSelections()};
function openRulesOverlay(){
let blackjackRules;
if(sessionStorage.blackjackRules){
blackjackRules = JSON.parse(sessionStorage.blackjackRules);
for(let i=0; i<blackjackRules.length;i++){
document.getElementsByClassName("rule")[i].value = blackjackRules[i];
}
}
document.getElementById("rules_overlay").style.display = "block";
}
function saveRuleSelections(){
let blackjackRules = [];
let rules = document.getElementsByClassName("rule");
for(let i=0; i<rules.length;i++){
blackjackRules.push(rules[i].value);
}
let jsonBlackjackRules = JSON.stringify(blackjackRules);
sessionStorage.setItem("blackjackRules", jsonBlackjackRules);
document.getElementById("rules_overlay").style.display = "none";
}
})();
There are 2 buttons on my page: one opens an overlay, and the other closes an overlay. I also wanted to run some code a single time when the page is first loaded, and I just used the openRulesOverlay() function that I had already written as a placeholder for the code I want to run. What I expected to happen was for the page to load, openRulesOverlay() would run once, then the buttons would work as normal from there. However, it seems that the window.onload function is running anytime the overlay gets closed. Why is this happening?
Note: I did not include the html code because I didn't think it was relevant to this problem. Let me know if I need to include it.
Simple fix in my particular case: the default button type is "submit", so the page would load, the form would open, and then when I pressed a button to close the form, it was essentially reloading the page and opening the form again. Just needed to change button type to "button".
I have a script which checks for an image and then loads a page if it has been found.
I am trying to attach the function to a button so that it only checks when the button is pressed rather than on page load.
<input type="button" id="ImgLoad" value="Check connection">
At the moment, the page redirects on load and is not attached to the button press. I'm struggling to see where I've gone wrong with it.
<script>
networkdelay = window.setTimeout(function()
{window.onclick=encaseimage()}, 1000);
</script>
<script>
clickdelay = window.setTimeout(function(){window.onclick=autoc()},
1000);
</script>
<script>
function encaseimage(){
function ImgLoad(myobj){
var randomNum = Date.now() || new Date().getTime();
var oImg=new Image;
oImg.src="http://192.168.8.1/images/ping2.jpg"+"?rand="+randomNum;
oImg.onload=function(){window.location.href = "/status.html";}
}
networkchecker = window.setInterval(function()
{window.onclick=ImgLoad()},1000);
}
</script>
You are calling the function instead passing the function reference:
window.onclick=ImgLoad()
Should be:
window.onclick=ImgLoad
Otherwise the ImgLoad function runs immediately.
I should say that adding onclick to window is probably not the best design (depending on what you are doing). Usually, you would look up the button (by id perhaps) and attach a click handler only to that particular button.
On a side note, it looks like the other window.onclick events are also setting to the result of calling a function:
window.onclick=encaseimage()}, 1000);
window.setTimeout(function(){window.onclick=autoc()},
You may want to review those as well. :)
If you want to load image on button click you need to attach that to the button click event.
like
$("#ImgLoad").click(function(){
var randomNum = Date.now() || new Date().getTime();
var oImg=new Image;
oImg.src="http://192.168.8.1/images/ping2.jpg"+"?rand="+randomNum;
oImg.onload=function(){window.location.href = "/status.html";}
});
I would like to know how to make a link in html open the coupled URL 10 or more times.
I have no malicious intent, however. I only wish to prank a friend.
With HTML, you can open only one link with the a tag; have a look into JavaScript for this, and window.open() (quoting from MDN doc):
var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);
Example :
window.open('http://www.example.com'); //You maybe don't need to keep a
//reference of the newly opened window here
Call this as many time you need.
Beware though, it'll behave like a popup, and might be blocked automatically by the browser (as Chrome 33 does for instance).
In action
You can have a link like this :
<a href="http://www.goodjoke.com" id="prank_link">
And in JS (included in your html file, in the head or at the end of body):
<script>
//When the document is "loaded", execute the following code
document.onload = function(){
//Get the a element, identified by its ID
var prank_link = document.querySelector('#prank_link');
prank_link.onclick = function(e){
e.preventDefault(); //Prevent the page to be changed
var my_url = this.href; //Store the url in the link
for(i = 0; i < 10; i++){ //Call window.open() 10 times with your URL
window.open(my_url);
}
}
}
</script>
Here's a live demo
Just like the question says, I'm trying to clear a form from a modal window while the modal stays up. I've tried:
if (myDocument.title == "Modal Window") {
parent.document.getElementById("textbox")
}
(I need it to do more than 1 tb, but used that just to try to get there. No luck.
It is contained within an iFrame, so I tried:
if (myDocument.title == "Modal Window") {
var ifr = document.getElementById("iFrame")
var form = ifr.document.getElementById("form")
ClearForm(form)
}
The ClearForm(form) function I stole from another Stack Overflow answer:
function ClearForm(form) {
$(':input', form).each(function () {
var type = this.type;
var id = this.id;
if (type == 'text' && id != 'text2')
this.value = "";
});
}
That 'text2' is one specific tb that we need to remain populated.
Any idea what I'm missing? I've been plagued with this bug for weeks.
I expect your issue is that the form is within an iFrame - most browsers won't allow you to modify elements within an iFrame, from the parent page, if they aren't from the same origin (or if the server is set up to deny it, or if you're looking at the page locally... see here for more details)
To double-check, try moving the form markup into the same page as the modal is in and run your function ClearFormfrom there. I expect that you'll then find it works.
Your only way around this would be to include the ClearForm function within the iFrame'd page, and then trigger it from the parent.