How do I animate title of site in browser tab? [duplicate] - javascript

This question already has answers here:
How do I make text inside the title tag animate using JavaScript?
(4 answers)
Closed 5 years ago.
How do I animate site title of site in browser tab like this?
Screen capture GIF:

You can add a scroll animation to the title of your browser tab using this Javascript code:
msg = "Title";
msg = " ...Just a scrolling title example" + msg;position = 0;
function scrolltitle() {
document.title = msg.substring(position, msg.length) + msg.substring(0, position); position++;
if (position > msg.length) position = 0
window.setTimeout("scrolltitle()",170);
}
scrolltitle();

use window.setTimeout() or window.setInterval() and change document.title

This is pure js...
function recursiveAnimateTitle(string) {
let firstLetter = string[0];
let title = document.querySelector('title');
title.innerHTML += firstLetter;
if (string.length > 1) {
setTimeout(function() {
recursiveAnimateTitle(string.substring(1));
}, 100);
}
}
function animateTitle(string) {
document.querySelector('title').innerHTML = "";
recursiveAnimateTitle(string);
}
animateTitle('Example Title');
<head>
<title>Some Default Title</title>
</head>
<body></body>
If you want to vary the time for each letter, use math.random with a range.
With a distribution if you want to get really weird with it.

Related

how to shuffle characters in heading title like it's deciphering?

I came across this news yesterday when I open it, the title of the post shuffle like it's deciphering, after few seconds original titles appear.
Here is the link: https://www.washingtonpost.com/graphics/2020/world/national-security/cia-crypto-encryption-machines-espionage/
Is it JavaScript?
Question is: If it's JavaScript how can fetch its code? How this function is working?
Here's a solution that uses randojs that will get you all the way there:
var finalString = "TOP SECRET";
function showScramble(){
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
document.getElementById("scrambled").innerHTML = randoSequence(characters).slice(0, Math.min(finalString.length - 1, characters.length - 1)).join("");
}
var runs = 1;
var scrambleInterval = setInterval(function(){
if(++runs == 7){
document.getElementById("scrambled").innerHTML = finalString;
clearInterval(scrambleInterval);
}
else{
showScramble();
}
}, 200);
showScramble();
<script src="https://randojs.com/1.0.0.js"></script>
<h1 id="scrambled"></h1>
I found another solution I was looking for! :)
Generate random string/characters in JavaScript:
Generate random string/characters in JavaScript

centering a feedback.js popup window [duplicate]

This question already has answers here:
Center a popup window on screen?
(19 answers)
Closed 5 years ago.
I found the following JavaScript code many years ago (between 8 and 10 years ago, I think) though I can't remember where or when. I use it to make popup windows with answers for a Jeopardy review game for my French students. I dabble a little bit but I don't know very much beyond the absolute basics about coding (I do know how to change the background color in this code and the window size, for example). I would like to have the popup window be centered in the middle of the page rather than opening in the upper left of the window.
I've seen code bits in response to other questions (Center a popup window on screen? for example) that look like they should make that happen but when I've tried adding them in different places to my existing code it always makes the feedback window no longer open. I don't know enough about coding to know what of that code I need or where to put it. I have tried pulling the VAR lines and adding them to the existing code but as I have said, it disables the popup window completely.
Can someone help me tell me if it is possible to modify this code to center the popup window in the middle of the page or if I should try to find a different code to make that happen?
Thank you for your help.
Shannon
Here is the code that I have:
function feedback(message) {
var browser = navigator.appName;
var browserVersion = navigator.appVersion;
if ((browser.indexOf ("Netscape") >= 0) || (browser.indexOf ("Explorer") >= 0)) {
// This function opens a new window with the message text.
// The window will disappear when it loses focus.
msgWindow=window.open('','msgWindow','toolbar=no,location=no,directories=no, status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no,width=210,height=180');
msgWindow.document.open();
msgWindow.focus();
msgWindow.document.write("<HEAD><TITLE>message</TITLE>");
msgWindow.document.write("</HEAD>");
msgWindow.document.write
("<BODY BGCOLOR='#FAE080' onblur='window.close()'>");
msgWindow.document.write
("<P><CENTER><FONT SIZE=+1><B>" + message + "</FONT></B></P></CENTER>");
msgWindow.document.write("</BODY>");
msgWindow.document.close();
} else { // Not Netscape or Internet Explorer
alert(message);
}
} // end of JavaScript Function feedback
It is not working here in code snippet but you can check this fiddle Check this
function myFunction() {
var pageURL="http://google.com";
var w = 500;
var h = 500;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
window.open("https://www.google.com",'','width=' + w +', height='+h +',top='+top+',left='+left);
}
<button onclick="myFunction()">Click Here</button>
Your modified Code Will be like this Check updated Fiddle
function feedback(message) {
var browser = navigator.appName;
var browserVersion = navigator.appVersion;
if ((browser.indexOf ("Netscape") >= 0) || (browser.indexOf ("Explorer") >= 0)) {
// This function opens a new window with the message text.
// The window will disappear when it loses focus.
var w = 210;
var h = 190;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var msgWindow=window.open("",'','width=' + w +', height='+h +',top='+top+',left='+left);
msgWindow.document.open();
msgWindow.focus();
msgWindow.document.write("<HEAD><TITLE>message</TITLE>");
msgWindow.document.write("</HEAD>");
msgWindow.document.write("<BODY BGCOLOR='#FAE080' onblur='window.close()'>");
msgWindow.document.write("<P><CENTER><FONT SIZE=+1><B>" + message + "</FONT></B></P></CENTER>");
msgWindow.document.write("</BODY>");
msgWindow.document.close();
} else { // Not Netscape or Internet Explorer
alert(message);
}
} // end of JavaScript Function feedback

Javascript: changing img src onclick only works once [duplicate]

This question already has answers here:
IF Statement Always True
(3 answers)
Closed 6 years ago.
This is so simple I'm not sure why I'm having trouble with it. I'm trying to imitate a flip card between two images so when clicked, it would simply change to the other image. I'm having trouble with my if/else statement because every time the image is clicked, it never makes it to the else part. In the source code of the HTML page, the src of the image is being changed but passes the if statement every time.
(function() {
// attaches event handler to image
window.onload = function() {
var image1 = document.getElementById("image1");
image1.onclick = changeImage;
};
// changes image when clicked to flip from image to text and text to image
function changeImage() {
if (document.getElementById("image1").src = "img/top.png") {
document.getElementById("image1").src = "img/toptext.png";
//window.alert('hi');
}
else {
window.alert('it passed');
document.getElementById("image1").src="img/top.png";
}
}
})();
use == or === for comparison in if condition check.
using = will assign the value and always be true since the assigned string is not an empty string.
function changeImage() {
if (document.getElementById("image1").src == "img/top.png") {
document.getElementById("image1").src = "img/toptext.png";
//window.alert('hi');
}
else {
window.alert('it passed');
document.getElementById("image1").src="img/top.png";
}
}
You should use == for an if comparaison
if (document.getElementById("image1").src = "img/top.png") {
change into
if (document.getElementById("image1").src == "img/top.png") {

Simple JavaScript image rotator

I have a simple image rotator on a website consisting of 4 images that have to appear for a few seconds before showing the next one. It seems to work on its first cycle but then when it gets back to the first image it doesn't show that one but works again from the second image and so on always missing that image on every cycle.
The function is called using onLoad EH in the body. In the body there is an img with my first image inside it. I'm a noob so please be gentle if I've missed anything out.
Here's what I have...
<body onLoad="sunSlideShow()">
<img src="IMAGES/slider1.gif" alt="slide-show" id="mySlider" width="900">
<body>
var quotes = new Array ("slider2.gif", "slider3.gif" ,"slider4.gif", "slider1.gif");
var i = 0
function sunSlideShow()
{
document.getElementById("mySlider").src = ( "IMAGES/" + quotes[i] );
if (i<4)
{
i++;
}
else
i = 1;
setTimeout("sunSlideShow()", 3000);
}
sunSlideShow()
Change it to this:
else
i = 0;
setTimeout("sunSlideShow()", 3000);
Further to my other answer (which was wrong!)... Try this:
http://jsfiddle.net/pq6Gm/13/
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(sunSlideShow,3000);
});
var quotes = [
"http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2007/07/11/sun128.jpg",
"http://icons.iconarchive.com/icons/robinweatherall/seasonal/128/sun-icon.png",
"http://www.astronomytoday.com/images/sun3.gif",
"http://mariusbancila.ro/blog/wp-content/uploads/2011/08/sun.png"
];
var i = 0;
function sunSlideShow() {
document.getElementById("mySlider").src = quotes[i];
if (i < (quotes.length-1))
{
i++;
}
else
{
i = 0;
}
}
</script>
<body>
<img src="http://mariusbancila.ro/blog/wp-content/uploads/2011/08/sun.png" id="mySlider"/>
</body>
==================================================================
EDIT: This is wrong... please find my other answer on this page.
==================================================================
To start with, I wouldn't use ... you're better off starting the script with jquery once the page is loaded.
Add this to your head section:
<script type="text/javascript">
$(function () {
sunSlideShow();
}
</script>
That will fire the sunSlideShow function once the page is loaded.
Then, you're starting your slideshow with var i = 0... but when you've got to the fourth image, you're setting it to 1?
I would be tempted to use a while loop to achieve what you want.
Something like this:
<script type="text/javascript">
$(function () {
sunSlideShow();
}
var quotes = new Array ("slider2.gif", "slider3.gif" ,"slider4.gif", "slider1.gif");
var i = 0;
function sunSlideShow(){
while (i<4)
{
document.getElementById("mySlider").src = ( "IMAGES/" + quotes[i] );
if (i<4)
{
i++;
}
else
{
i = 0;
}
sleep(3000);
}
}
function sleep(miliseconds){
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()){}
}
</script>
This script hasn't been tested... but it should start the sunSlideShow function once the page has loaded and then change the image every 3 seconds.
I too searched the web trying to find a general solution to the problem of rotating an image about its center. I came up with my own solution which works perfectly. The basic concept is simple: rotate the entire context by the desired angle (here called 'tilt'); calculate the image's coordinates in the NEW coordinate system; draw the image; lastly, rotate the context back to its original position. Here's the code:
var xp = rocketX * Math.cos(tilt) - rocketY * Math.sin(tilt);
var yp = rocketX * Math.sin(tilt) + rocketY * Math.cos(tilt);
var a = rocketX - xp;
var c = Math.sqrt(a*a + (rocketY-yp)*(rocketY-yp));
var beta = Math.acos(a/c);
var ap = c * Math.cos(tilt + beta);
var bp = c * Math.sin(tilt + beta);
var newX = rocketX + ap;
var newY = rocketY - bp;
context.rotate(tilt);
context.drawImage(littleRocketImage, newX-9, newY-40);
context.rotate(-tilt);
In the penultimate line, the constants '9' and '40' are half the size of the image; this insures that the rotated image is placed such that its center coincides with the center of the original image.
One warning: I use this only for first quadrant rotations; you'll have to put in the standard tests for the other quadrants that change the signs of the components.
Update: 2021
You can use the light-weight library Ad-rotator.js to setup simple Ad-rotation like this -
<script src="https://cdn.jsdelivr.net/npm/ad-rotator"></script>
<script>
const instance = rotator(
document.getElementById('myelement'), // a DOM element
[ // array of ads
{ url: 'https://site1.com', img: 'https://example/picture1.jpg' },
{ url: 'https://site2.com', img: 'https://example/picture1/picture2.jpg'},
// ...
]
);
</script>
<body onLoad="instance.start()">
<div id="myelement"></div>
<body>
Reference Tutorial

want to count characters on load window

I have a function counting characters correctly.. on key up and key down eventes
but i am echoing the value from the database so when the page will load there will already be some text on load window. I am not able to count the character as soon as page loads. Can any one help me out ?
Here is my javascript that deals with character count limit is 50
function textCounter(textField, showCountField) {
var maxAmount = 50;
if (textField.value.length > maxAmount) {
textField.value = textField.value.substring(0, maxAmount);
} else {
showCountField.value = maxAmount - textField.value.length;
}
}
Thanks for your help
Use
window.load = function() {
textCounter(document.getElementById( textfieldId), document.getElementById( showCountFieldID) );
}
use
<body onload "textCounter(par1,par2)"> // replace with pweameters

Categories