While playing around with Raphael.js Australia map, I tried assigning URLs for each element by changing their attribute in the end of the path:
country.cityone = R.path("coordinates").attr({href: "cityone.html"}).attr(attr);
country.citytwo = R.path("coordinates").attr({href: "citytwo.html"}).attr(attr);
...
The above works with Firefox, Chrome etc, but IE6-IE9 have trouble with that declaration.
So I thought of declaring another variable after var country and assigning the urls to that:
var url = {};
url.cityone = "cityone.html";
url.citytwo = "citytwo.html";
then calling it on mouse click/down:
st[0].onmousedown = function() {
current && country[current] && document.getElementById(“current”).appendChild(url);
};
However it won't work at all. Apparently I'm not making the call properly from the function, to relate each URL to its respective city. What am I missing?
I haven't tested this but I'm pretty sure you should just do away with the href and add a mouse event:
country.cityone = R.path("coordinates").attr(attr).click(function(){
window.location.href = "cityone.html";
});
I'm pretty sure that will work.
Just to close this question, after several trials, I ended up finding out that IE requires a double-click on click(function(){ for the href page to open up
I found out that in the above code:
country.cityone = R.path("coordinates").attr(attr).click(function(){
window.location.href = "cityone.html";
});
I had to change the .click(function(){ into .mousedown(function(){ for IE to work as it should.
Thank you #Zevan!
Cheers
Related
I am making an idle clicker game for fun, everything was going fine until I encountered a problem.
What I basically want to happen is when the image is clicked and the clickCounter element is over one, the new image element is created. No problem here, the main problem is saving the image. If the user refreshes the page, I want the created element to still be there. I have tried using outerHTML and following some other Stack Overflow forum questions but I could never get a proper solution to this certain problem. I have also tried localStorage and cookies but I believe I am using them wrong.
My code is below, my sololearn will be linked below, consisting of the full code to my project.
function oneHundThou() {
var countvar = document.getElementById("clickCounter")
if(document.getElementById("clickCounter").innerHTML > 1) {
alert("Achievement! 1 pat!")
var achievement1k = document.createElement("img");
// create a cookie so when the user refreshes the page, the achievement is shown again
document.cookie = "achievement1k=true";
achievement1k.src = "https://c.pxhere.com/images/f2/ec/a3fcfba7993c96fe881024fe21e7-1460589.jpg!d";
achievement1k.style.height = "1000px"
achievement1k.style.width = "1000px"
achievement1k.style.backgroundColor = "red"
document.body.appendChild(achievement1k);
oneHundThou = function(){}; // emptying my function after it is run once instead of using a standard switch statement
}
else {
return
}
}
oneHundThou();
I am aware that there is another post that is similar to this, however, my answer could not be answered on that post.
Full code is here: https://code.sololearn.com/Wwdw59oenFqB
Please help! Thank you. (:
Instead of storing the image, try storing the innerHTML, then create the image on document load:
function oneHundThou() {
countvar.innerHTML = localStorage.getItem('clickCount') ? localStorage.getItem('clickCount') : 0; //before if
//original code
localStorage.setItem('clickCount', countvar.innerHTML); //instead of doc.cookie
}
window.addEventListener('DOMContentLoaded', (event) => {
oneHundThou();
});
or, if you don't care that clickCounter may initialize to null, you can remove the ? : and just put
countvar.innerHTML = localStorage.getItem('clickCount');
Edit: shortened code with the countvar variable
I have a popup that loads some html for messages. When I open the popup and trying to get the html, i get undefined.
see this http://codepen.io/patrioticcow/pen/LZNraz
this doesn't seem to work:
$$(document).on('opened', '.popup-messages', function() {
var mMessages = $$('.messages')[0].f7Messages;
console.log(mMessages);
});
this doesn't work either
var myMessages = myApp.messages('.messages', {autoLayout: true});
console.log(mMessages);
Any ideas?
Because there is no attribute f7Messages inside $$(.messages)[0], Instead of that you can use innerHTML. ie :
var mMessages = $$('.messages')[0].innerHTML;
console.log(mMessages);
Hope this helps.
By the way,why you need html?Use messageBar concept of framework7.
okay So I'm trying to leverage the video.js project as it's seems pretty amazing!
anyways, im writing my first script that interacts with the api which can be found below. it's basically just supposed to output the current play time to the div current_time , the id of video tag is my_stream anyways here's all my javascript ... the problem im having is playLength=0 and current time never updates when video is playing and remains at 0 (ie. is never more then 0 ) im not sure what im doing wrong here ... the api rules i followed can also be found here video.js api docs
function current_time(){
_V_("my_stream").ready(function(){
var myPlayer = this;
// EXAMPLE:
var playLength = myPlayer.duration();
do
{
var position = myPlayer.currentTime();
var myTextArea = document.getElementById('time_count');
myTextArea.innerHTML = position;
}
while(position < playLength);
});
}
window.onload = current_time
anyhelp from any one who's implemented anything with the api or just see something dumb i've done would be greatly appreciated, thanks!
You're assigning the duration to playLength before playback begins. If that's zero when you assign it, it will remain zero. Check the note in the API doc "NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing."
It looks like you're only concerned about the duration to work out when the video is playing. It would be far better just to use the timeupdate event instead.
var myPlayer;
var myTextArea = document.getElementById('time_count');
videojs('my_stream').ready(function(){
myPlayer = this;
myPlayer.addEvent('timeupdate', onProgress);
});
function onProgress() {
myTextArea.innerHTML = myPlayer.currentTime();
}
This should execute after the DOM has loaded (with window.onload, or jQuery's $(document).ready()), or go in a script tag in the body after the video and #time_count elements.
I Have sort-of solved this problem bymyself by modifying the code I Had written so it now works like so
function current_time(){
_V_("my_stream").ready(function(){
var myPlayer = this;
var playLength = myPlayer.duration();
var position = myPlayer.currentTime();
var myTextArea = document.getElementById('time_count');
myTextArea.innerHTML = position + "/" + playLength;
t=setTimeout(function() {current_time()},2000);
});
}
... although it seems stupid to poll duration continuosly, I actually don't need this value going forward in development, however both populate properly now once the video is playing so it's kinda a solution. I'm not going to except my own answer right away to see if anyone can solve this a better way, or if you can explain why video.js changes the id tag and how to properly deal with it i'll give you an up vote and accept your answer if it all makes sense to me.
I am trying to start 3 applications from a browser by use of custom protocol names associated with these applications. This might look familiar to other threads started on stackoverflow, I believe that they do not help in resolving this issue so please dont close this thread just yet, it needs a different approach than those suggested in other threads.
example:
ts3server://a.b.c?property1=value1&property2=value2
...
...
to start these applications I would do
location.href = ts3server://a.b.c?property1=value1&property2=value2
location.href = ...
location.href = ...
which would work in FF but not in Chrome
I figured that it might by optimizing the number of writes when there will be effectively only the last change present.
So i did this:
function a ()
{
var apps = ['ts3server://...', 'anotherapp://...', '...'];
b(apps);
}
function b (apps)
{
if (apps.length == 0) return;
location.href = apps[0]; alert(apps[0]);
setTimeout(function (rest) {return function () {b(rest);};} (apps.slice(1)), 1);
}
But it didn't solve my problem (actually only the first location.href assignment is taken into account and even though the other calls happen long enough after the first one (thanks to changing the timeout delay to lets say 10000) the applications do not get started (the alerts are displayed).
If I try accessing each of the URIs separately the apps get started (first I call location.href = uri1 by clicking on one button, then I call location.href = uri2 by clicking again on another button).
Replacing:
location.href = ...
with:
var form = document.createElement('form');
form.action = ...
document.body.appendChild(form);
form.submit();
does not help either, nor does:
var frame = document.createElement('iframe');
frame.src = ...
document.body.appendChild(frame);
Is it possible to do what I am trying to do? How would it be done?
EDIT:
a reworded summary
i want to start MULTIPLE applications after one click on a link or a button like element. I want to achieve that with starting applications associated to custom protocols ... i would hold a list of links (in each link there is one protocol used) and i would try to do "location.src = link" for all items of the list. Which when used with 'for' does optimize to assigning only once (the last value) so i make the function something like recursive function with delay (which eliminates the optimization and really forces 3 distinct calls of location.src = list[head] when the list gets sliced before each call so that all the links are taken into account and they are assigned to the location.src. This all works just fine in Mozilla Firefox, but in google, after the first assignment the rest of the assignments lose effect (they are probably performed but dont trigger the associated application launch))
Are you having trouble looping through the elements? if so try the for..in statement here
Or are you having trouble navigating? if so try window.location.assign(new_location);
[edit]
You can also use window.location = "...";
[edit]
Ok so I did some work, and here is what I got. in the example I open a random ace of spades link. which is a custom protocol. click here and then click on the "click me". The comments show where the JSFiddle debugger found errors.
I am trying to use popupNode in a little javascript based firefox extension. So if a user right click on a link and then clicks on an additional menu item a new tab opens with the link (sorta like "open in new tab"):
`
var foo = {
onLoad: function() {
// initialization code
this.initialized = true;
},
onMenuItemCommand: function() {
var tBrowser = document.getElementById("content");
var target = document.popupNode;
tBrowser.selectedTab = tab;
var tab = tBrowser.addTab(target);
}
};
window.addEventListener("load", function(e) { foo.onLoad(e); }, false);
`
It works mostly, but I am wondering in that is the right use. The problem is I want replace some characters on the var target, but somehow that partdoes not work. something like target.replace() will cause problems. So I am guessing target is not a string.
Mostly I would like to know what popupNode actually does ...
thanks
Peter
I haven't really used "popupNode", but in general nodes aren't the same as strings. I suggest reading up on the Document Object Model (DOM) to learn more.
As far as replacing text, assuming popupNodes work like other nodes then something like this may work for you:
var target = document.popupNode;
target.innerHTML = target.innerHTML.replace("old_string", "new_string")