Animated Shortcut Icons - javascript

I was just creating an shortcut icon (the icon displayed in the head part of a page before the page title) (EDIT: I mean favicon...) for a webside, when I was thinking about animated shortcut icons (acually I don't know if they are called like that...).
Even though my intuition told me that this is probably impossible, since I haven't seen it being done on any web pages so far, I wanna be sure :^)
I have actually thought about a things that might in theory help to find out if, or how it's possible:
Using a gif file
There might be a way to make it work using a gif, but probably not. That's too easy. It would be widely-used...
Changing the icon tag using js for every frame of the icon animation
This would actually be my best guess, but I can't get it to work...
Changing the icon image on the server 10 times per second
Forget about this one.
Find out how the loding icon animation is done
Well, it's probably browser side and hasn't todo anything with html/js, but who knows?!
So, that's everything I could think of concerning shortcut icon animations, hopefully you can make sense of it :)

Related

(JS) SPA-like website behavior with background videos

Forgive me if another thread like this exists - I couldn't find the answer to that specific problem.
I'll soon be developing the frontend for a vanilla JS AJAX loaded website, with SPA-like behavior similar to the home slider in this one:
- http://clapat.ro/themes/grenada-wordpress
The methodology I will probably utilize is loading the innerHTML of a container from the targeted sub-template, then pushing the state to the history - pretty standard approach to this, I believe.
Now, the slides containing image background are pretty obvious - all it should take is placing the same image in the target subpage hero section, then animating in on load. The problem might be with the video slides - how to make them continue playing seamlessly during and after the reload? Will such approach force them to start all over from the beginning, as soon as the target page is loaded and placed in the view?
I haven't tried it yet, I thought I'd ask in advance, in order not to get myself stuck up all the way into the incorrect approach :)
Thank You in advance,
Peter
Researching the reference templates for the 100th time, I think I came up with some kind of a solution myself:
if both the homepage and target page had structure like:
<body>
<main-container>
<slider-or-hero-container>
...
</slider...>
<content-container>
...
</content...>
</main-container>
</body>
Then, maybe I could replace the whole "main-container" on normal links, but replace only "content-container" clicking the links within the slider? The slider section would basically just stay, and the script would simply modify its appearance (disabling arrows and slide change, perform the transition animations etc)...
If you had any suggestions at this point, I'll really appreciate that :) Otherwise, I will post an update when I'm done coding it - if it works, it may be helpful for someone in the future :)

How do you get the navbar toggle to work before 768px?

I have been trying to figure this out all day. I am using a theme that a client wanted to use. I have replaced every mentioning of 767px and 768px with 1359px and 1360px (those are when I want the menu to collapse). I have added custom CSS. I can get the button to show up at 1359px, but it will not toggle the navigation.
Basically, the navbar toggle button does not work until I hit 767px. I do not want to know specific code I can use to fix this problem. All I want to know is where this is being set as 767px. How does the website know to change it at 767px when I have changed every mentioning of this number to 1359px. I have gone through every php file, js file, and css file on the server. I am foaming at the mouth. I think I am going to explode. I have checked EVERY solution here and elsewhere on the internet.
Is this something I need to change in javascript, in css, or in php, or in all of them?
I am using WordPress. I am looking for a general solution NOT CODE. As in, where is this being defined. What file do I need to edit in this godforsaken theme to get the menu to toggle at 1359.
Please help before my brains start oozing out of my ears.
Okay well I feel like an idiot..
To anyone else having a similar issue,
CLEAR YOUR BROWSER CACHE.
Upon inspecting in developer tools I realized the site was loading an older version of my bootstrap.min.css file rather than the file I updated with the new breakpoints.
Cleared the cache and everything worked as expected.

Web page never stops loading

I'm currently working on a student project and I encounter an issue with my code. We built an e-doc which mixes video, images, sounds and texts datas about people working during the night.
It's made of HTML, Javascript and a bit of PHP to access a DB.
Recently we discovered that the page keeps loading infinitely when you arrive on the website... It brokes some of our JS code and we don't know how to identify the ressource that might be corrupted or so...
What can make a page load "forever" ? And what kind of tools (ie firebugg or the built-in chrome stuff) should we use to identify the problem ?
You can find our dev- version right here : http://mgprddev2012.dream-valenciennes.com
EDIT : PHP Error is now OK, i forgot to upload the newest version of the code on the dev platform.
Many thanks
You're not crazy - this page does indeed take a very, very long time to load.
If you look at the Network tab in Chrome Developer tools, you can see that there are a lot of images, audio files and video files loading up all at the beginning, and most of them are not visible right away. And some of them are very big. This is probably one of those situations where it's best to defer loading of most of these assets until you need to display them, or at the very least until after you've loaded the assets you need right away.
I recommend checking you YSlow, which is an auditing tool that will give you some tips on how to make your web page load faster and appear to load faster. The site also has some good tips and thorough explanations for why different strategies are effective.
A few hints for this particular page:
A lot of your images are pictures of text. Consider rendering these as actual html text. You can still modify the size of each letter with CSS, and you'll have the added benefit that Chrome will be able to translate the text for non-French-speaking users. You should be able to use CSS borders to get those lines around the text, or try SVG.
Your background image is 2.2 MB. That's quite big. Try saving it at a lower compression setting.
You have a bunch of icons in individual png files. Consider putting them all in in one file and display them as CSS Sprites.
There are several png files that look like they could be jpg's, except for the transparency. If you're feeling ambitious, you can make a jpg with the color channels on the left side, and the alpha channel rendered as grayscale on the right, and use canvas to composite them.
You also have a few png files containing sprites for animation. You can convert them to videos and try the same canvas trick as above. If you're willing to use WebGL, I have some code you can use.
Stops loading fine for me. Firebug will usually tell you if something is loading in the background. Look at the console area to see if any thing is stalling upon page load. Are you saying in it's current state it hangs, because for me it finished just fine.
In the console you can also see javascript errors that may cause things to not work properly.
In JavaScript console:
Uncaught TypeError: Cannot call method 'pause' of undefined debout.js:979
It says that debout.pop02 is not declared. Where do you initialize it?

How to add a resizable, dragable overlay to a webpage?

I'd like to make a userscript that can put an resizable, dragable overlay over a browser game. Only I don't have a clue how to start.
It'd basically have to be a div with some styling and javascript applied to it, containing an <iframe>. I'd also like to pass a string displayed in the game screen (HTML5, not Flash) to the iFrame, but this can happen through the use of $_POST and $_GET parameters, as it probably wouldn't be possible otherwise due to some kind of "cross domain policy".
Can someone get me on my way, with an example of a basic Chrome userscript, that would allow me to inject some HTML code for the overlay div into the game?
Why not use something like an existing Javascript framework (gotta love em')? I know this has been done again and again and again before. I feel like doing this sort of Javascript yourself may not really be worth your time. Usually when I see things like this, I offer the help of a framework. Couldn't hurt to check one of them one, you may end up saving yourself a lot of time coding something that's been done before and tested through time.

Problem controlling SWF from javascript

Quite simply, I have a SWF embedded in an HTML web page and want to move to a specific frame when a trigger is clicked.
But nothing happens when I click the trigger, as though the js just doesnt communicate at all with the swf.
SWF is written in flash cs4 (a3)
The link to the website is http://simplywebdzine.com/test.html.
I have read the text books over and over and researched high and wide on the internet and as far as I see I have done everything correctly but I cannot get this to work.
The swf is very basic, just a green box moving accross a small stage.
The desired gotoframe would make it cross at a lower height (just a dry run for a more complicated swf)
Would really appreciate someones help if you could possibly find out from the source code what is going wrong.
Many thanks
Steve
It looks to me like you have two problems.
You do not have the correct id for your <object> according to your javascript. The object id is "mymovi.swf" while your javascript is targeting "mymovi" as the id.
Even if I change your id using firebug, the function still does not fire off in the flash and I get an error about the function not existing.
Have you added a callback method in flash? something like flash.external.ExternalInterface.addCallback("GotoFrame", gotoFrameHandler) ??

Categories