JS automatic transfer codes needs discussion - javascript

I got a piece of code that can help me redirect to a page automatically after a period of time. However, it doesn't work.
Could anybody take a look at it,and, if possible, modify it? Thanks!!
<body>
.......
<script>
var dizhi = "";
function get() {
var _el = document.querySelectorAll('#lianjie');
var len = _el.length();
if (len > 0) {
dizhi = _el[0].href;
}
}
onload = function() {
get();
setTimeout(function() {
location.href = dizhi;
}, 1000);
}
</script>
</body>

length is a property and not a method, so:
var len = _el.length();
should actually be:
var len = _el.length;

Related

How to make a piece of Javascript work only when the user is on a different tab?

I have the following javascript to make the webpage title change again and again after every five seconds.
<script>
var titleArray = ["TITLE-1","TITLE-2","TITLE-3","TITLE-4"];
var N = titleArray.length;
var i = 0;
setInterval(func,5000);
function func(){
if (i == 4) {
i = 0;
}
document.title = titleArray[i];
i++;
}
</script>
I want it to work only when the user has opened a different tab in order to "attract" him/her back to my site.While he/she is on my site I want this javascript to stop working so the title of the webpage is what I simply write in the title tags.
here is a summary of what I want.
<script>
if (the user is not on this tab but has opened and is using a different tab)
{the javascript I have mentioned above};
elce {nothing so the title tags work};
</script>
P.S: Is this a good idea? Got any other suggestions? I just really like thinking out of the box.
Please try with below script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var isActive;
window.onfocus = function () {
isActive = true;
};
window.onblur = function () {
isActive = false;
};
// test
var titleArray = ["TITLE-1","TITLE-2","TITLE-3","TITLE-4"];
var N = titleArray.length;
var i = 0;
function changeTitle(){
if (i == 4) {
i = 0;
}
document.title = titleArray[i];
i++;
}
setInterval(function () {
if(window.isActive !== true){
changeTitle();
}
}, 1000);
</script>

How can I remove the first doctype tooltip of the ace-editor in my html-editor?

We ask the user here to define html, so add a div or a section or something like that. So, I want the validation-tooltips when editing my HTML. But don't wanna have the doc-type warning.
Try this
var session = editor.getSession();
session.on("changeAnnotation", function() {
var annotations = session.getAnnotations()||[], i = len = annotations.length;
while (i--) {
if(/doctype first\. Expected/.test(annotations[i].text)) {
annotations.splice(i, 1);
}
}
if(len>annotations.length) {
session.setAnnotations(annotations);
}
});
With "Unexpected End of File. Expected DOCTYPE." warning filtered.
var session = editor.getSession();
session.on("changeAnnotation", function () {
var annotations = session.getAnnotations() || [], i = len = annotations.length;
while (i--) {
if (/doctype first\. Expected/.test(annotations[i].text)) {
annotations.splice(i, 1);
}
else if (/Unexpected End of file\. Expected/.test(annotations[i].text)) {
annotations.splice(i, 1);
}
}
if (len > annotations.length) {
session.setAnnotations(annotations);
}
});
If instead you operate on the annotations directly and call the editor onChangeAnnotation method directly to update the annotations on the page you can prevent firing another changeAnnotation event and calling this event handler twice as Chris's answer does.
var editor = Application.ace.edit(element),
session = editor.getSession();
session.on('changeAnnotation', function () {
session.$annotations = session.$annotations.filter(function(annotation){
return !(/doctype first\. Expected/.test(annotation.text) || /Unexpected End of file\. Expected/.test(annotation.text))
});
editor.$onChangeAnnotation();
});

(Javascript) Script won't count just once, perhaps not recognizing variable?

I'm sure this is a super easy fix and I just can't see it..
I have a play button and I only want it to write to database (inc playcount) only when it's clicked the first time.
Any idea why this doesn't work? This result counts every click, and if I do if countonce = 0 and declare at beginning as 0 it won't count any clicks. Am I misunderstanding javascript?
<div id="left-05-play_">
<script type="text/javascript">
var currsong = 1;
var playcountadd = document.getElementById('left-05-play_');
playcountadd.onclick = function() {
if (countonce != 1) {
$.post( "php/songadd.php", { addsong: "1", } );
var countonce = 1;
} }
</script>
</div>
Thank-you for taking the time to read this question.
This should do the trick.
var currsong = 1;
var songadded = false;
var playcountadd = document.getElementById('left-05-play_');
playcountadd.onclick = function() {
if (!songadded) {
$.post( "php/songadd.php", { addsong: "1", } );
songadded = true;
}
}
Changed countonce to songadded
Moved songadded out of onclick function
Changed songadded to boolean logic
Check whether songadded=false before proceeding with AJAX post

Javascript Text effect

I am trying to create a JS plugin, which will take in a string as input, and the string will slowly lose characters, one from each end at a time, and eventually vanish (string length = 0).
This is the code I have written so far :
var start=0;
var finish=0;
$.fn.scramble = function(){
$(this).each(function(){
$element = $(this);
$inputString = $element.text().trim();
finish = $inputString.length;
vanish($inputString.substring(start++, finish--));
})
}
vanish = function($inputString){
console.log($inputString);
$stringLength = $inputString.length;
console.log($stringLength);
if($stringLength <= 0)
return 0;
setTimeout(function(){
vanish($inputString.substring(start++, finish--));
}, 1000);
}
I am giving it a sample input, "Samples". The expected output is "ample", "mpl", "p". But instead it returns "ample", "ple".
Surely, I am doing something wrong here, but I am unable to figure it out. Kindly help :)
Here's a fiddle set up : http://jsfiddle.net/v6KKM/
Consider changing finish = $inputString.length; to finish = $inputString.length - 1;
$.fn.scramble = function(){
$(this).each(function(){
$element = $(this);
$inputString = $element.text().trim();
finish = $inputString.length;
vanish($inputString.slice(1, -1));
})
}
vanish = function($inputString){
console.log($inputString);
$stringLength = $inputString.length;
// console.log($stringLength);
if($stringLength <= 0)
return 0;
setTimeout(function(){
vanish($inputString.slice(1, -1));
}, 1000);
}
Maybe this what you want.
You can compare 'substring' and 'slice'. I hope this does help.
You can obtain the same result in easier way using arrays and recursive function
Fiddle
all code you need is
<script type="text/javascript">
$(document).ready(function(){
$.fn.scramble = function(){
var str=$(this).text()
function recursor(str){
newS=''
if(str.length>=3){
var arr=str.split('')
arr.pop()
arr.shift()
for(a=0;a<arr.length;a++){newS+=arr[a]}
$('#text').append(' '+newS)
setTimeout(function() { recursor(newS) },1000)
}
}
recursor(str)
}
$('#sc').click(function(){
$('#text').scramble()
})
})
</script>
or (brobably better) you ca use substring Fiddle2 and you'll obtain a more compact code
<script type="text/javascript">
$(document).ready(function(){
$.fn.scramble = function(){
var str=$(this).text()
function recursor(str){
if(str.length>=3){
var result = str.substring(1, str.length-1);
$('#text').append(' '+result)
setTimeout(function() { recursor(result) },1000)
}
}
recursor(str)
}
$('#sc').click(function(){
$('#text').scramble()
})
})
</script>
this solution does not suit your needs, i apologize for making you lose time.

div with an id wont accept any event handlers JavaScript. No Jquery

Im trying to pause a timed slideshow when you're hovering over a div
<div id="play_slide" onMouseOver="clearTimeout(playTime)"></div>
If i put onMouseOver="clearTimeout(playTime)" inside an li on the page, it'll pause, so I know my code is correct, it just wont work on the div! Also if i get rid of the id, it will alert when i put an alert function into an event handler
This is the js.
var playTime;
function playSlide()
{
var slideshow = document.getElementById("play_slide").style;
var images = new Array("an", "complete", "red", "thirteen");
indexPlay++;
if(indexPlay > images.length - 1)
{
indexPlay = 0;
}
slideshow.backgroundImage = "url('assets/images/play/"+images[indexPlay]+".png')";
playTime = setTimeout("playSlide()", 2500);
}
you can see this here: www.nicktaylordesigns.com/work.html
I would do it like this:
( and no inline script... just <div id="play_slide">Something</div> )
var playTime;
var indexPlay = 0;
var slideElement;
window.onload = function () {
slideElement = document.getElementById("play_slide");
slideElement.addEventListener('mouseenter', function () {
console.log('stop');
clearTimeout(playTime);
});
slideElement.addEventListener('mouseleave', function () {
console.log('continue');
playTime = setTimeout(playSlide, 2500);
});
playSlide();
}
function playSlide() {
var slideshow = slideElement.style;
var images = new Array("an", "complete", "red", "thirteen");
indexPlay++;
if (indexPlay > images.length - 1) {
indexPlay = 0;
}
slideshow.backgroundImage = "url('assets/images/play/" + images[indexPlay] + ".png')";
playTime = setTimeout(playSlide, 2500);
}
Fiddle
This issue is related to the script loading. Your script gets loaded after the DOM is processed so function doesn't get attached to the event.
If you are using jQuery then you can use below code.
$(function () {
$("#play_slide").mouseover(function(){
var playTime = 33;
clearTimeout(playTime);
});
});
If you don't want to use JQuery then you can do the same thing in JavaScript as below.
window.onload = function(){
document.getElementById("play_slide").onmouseover = function(){
var playTime = 33;
clearTimeout(playTime);
};
}
I got it! the div tag was somehow broken, I coded a div around it and gave it the event handlers and a class. That worked, then i simply changed the class to an id and got rid of the original div. Idk what was going on but it works now. Thanks for your suggestions!
Can you try this,
<div id="play_slide" onmouseover="StopSlide();">Stop</div>
<script>
var playTime;
var indexPlay;
function playSlide()
{
var slideshow = document.getElementById("play_slide").style;
var images = new Array("an", "complete", "red", "thirteen");
indexPlay++;
if(indexPlay > images.length - 1)
{
indexPlay = 0;
}
slideshow.backgroundImage = "url('assets/images/play/"+images[indexPlay]+".png')";
playTime = setTimeout("playSlide()", 2500);
}
function StopSlide(){
window.clearTimeout(playTime);
}
playSlide();
</script>

Categories

Resources