I'm looking for a way to do a play / pause action on click of an element.
Basically when you click and the track is not playing it plays and when it's playing and you click it stops.
So far I was looking for a solution like this but it seems to make a conflict between the play / pause action.
$('#feli').click(function() {
feli.currentTime = 0;
if (feli.play()) {
feli.pause();
} else {
feli.play();;
}
})
Any tips on how to do this simple action ?
Thanks !!
check this code plz
$('#feli').click(function() {
if (feli.play()) {
feli.pause();
feli.currentTime = 0;
} else {
feli.play();;
}
});
Found my solution I put it here :
$('#feli').click(function() {
if (feli.paused) {
feli.currentTime = 0;
feli.play();
} else {
feli.pause();
}
})
Related
I am modifying some JSP files, and every time I upload a new version, if people don't update the cache, the styles are not rendered as they should be; it is looking not good and without styles applied.
To solve this problem, I have followed an example from Stack Overflow that adds a numeric value to the CSS file, preventing it from being cached in the browser. The specific link I've seen is this one:
https://wpreset.com/force-reload-cached-css/
But I've found that whenever I press F5 or navigate to other JSP's that apply the same stylesheet, the files that are part of that CSS file are always seen just before rendering. I added a GIF with a dummy example to exhibit what I mean:
Animated GIF demonstrating the problem
How could I avoid this?
Would something like the following help?
/* CSS */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
|
// Js
$(window).load(function() { // Wait for window load
// Animate loader off screen
$("#loader").animate({
top: -200
}, 1500);
});
Like it is used here.
I have already been able to solve it.
In the end I have chosen to nest inside a window.onload, the document.ready like this:
window.onload = function () {
document.getElementsByTagName("html")[0].style.visibility = "visible";
var h, a, f;
a = document.getElementsByTagName('link');
for (h = 0; h < a.length; h++) {
f = a[h];
if (f.rel.toLowerCase().match(/stylesheet/) && f.href && f.href.indexOf("custom-common.css") != -1) {
var g = f.href.replace(/(&|\?)rnd=\d+/, '');
f.href = g + (g.match(/\?/) ? '&' : '?');
f.href += 'rnd=' + (new Date().valueOf());
}
}
$(document).ready(function () {
$('.main-link').click(function () {
And change the visibility of the html document. I have omitted the rest of the code, but you can get an idea. Many thanks to Robert Bradley and Adam for shedding light and helping me.
IM trying to scroll around a image in groovy but not work
IM using this code and appears a image static
How I could scroll with this code
panel(layout: new BorderLayout()) {
scrollPane(size:[100,100],
verticalScrollBarPolicy:JScrollPane.VERTICAL_SCROLLBAR_ALWAYS) {
panel(size:[200,100]) {
label(icon: imageIcon(new URL("file:pokemon.png")))
}
}
}
Please help me.
Finally I solve with this
scrollPane(id:'scroll',preferredSize: [200,200], constraints: context.CENTER) {
panel(layout: new FlowLayout()) {
label(icon: imageIcon(new URL('file:///path/pokemon.png')))
}
}
so i created a platform game and it has 2 levels. Level 1 is going smoothly and perfectly but when i go to level 2 (which is in frame4), the player/character slides down suddenly. The character i used at level 1 is still the character i use in level 2. I checked the instance name and it's right, I renamed the function name too. It does not have any compiler errors/output errors too that's why im having a hard time figuring out why my player does that. Here's my code:
function charMove1()
{
player_mc.y+=gravity;
if(leftkeyPressed)
{
player_mc.x-=xSpeed;
player_mc.gotoAndStop(2);
player_mc.gotoAndStop(1);
}
if(leftkeyPressed && leftwallBumping)
{
player_mc.x+=xSpeed;
}
if(rightkeyPressed)
{
player_mc.x+=xSpeed;
player_mc.gotoAndStop(1);
player_mc.gotoAndStop(1);
}
if(rightkeyPressed && rightwallBumping)
{
player_mc.x-=xSpeed;
}
if(downwallBumping)
{
player_mc.y-=gravity;
}
if(upwallBumping)
{
player_mc.y+=gravity;
}
//set condition for moving the background, player stays at same position with this code
if(rightkeyPressed && player_mc.x>stage.stageWidth/2+50)
{
background1_mc.x-=backgroundSpeed;
player_mc.x-=xSpeed;
}
if(leftkeyPressed && player_mc.x<stage.stageWidth/2-50)
{
background1_mc.x+=backgroundSpeed;
player_mc.x+=xSpeed;
}
}
Hi and hope someone can help.
I have a live site and also a development site where I test out new code before deployment but basically they have the same content e.g.
Live = www.myserver.com/live/index.html
Development = www.myserver.com/development/index.html
Is there a way of setting the (say) CSS background property dependent upon the url that has been used to arrive at the site.
My current CSS =
body {
background: #eff;
/* change this to background: #ccc; if on development site */
margin:25px;
}
Why?
Well, I frequently find myself uploading or testing new code on the wrong site.
Not a big issue I know but useful if I could have a visual clue as to which site I'm testing.
My thanks for your interest.
Now Solved Thanks for input from #Adam Buchanan Smith, #Dekel and Mr Green.
I sort of used #Dekel's logic but changed it to jQuery along the following lines:
<script>
$(document).ready(function(){
// Set background dependent upon url i.e. www.myserver.com/cab or www.myserver.com/cab2
// cab2 is the development site, cab the live site
// Also change text in div id="live" from 'Live Site' to 'Development Site' if arrives at by cab2
if (document.location.pathname.indexOf('cab2') > -1){
$('body').css({"background":"#BFFFDF"});
document.getElementById('live').innerHTML = "Development Site";
} else {
$('body').css({"background":"#efffff"});
document.getElementById('live').innerHTML = "Live Site";
}
}
</script>
My thanks to all for your interest!
Not something you can do in pure html/css, but you can use both javascript and server side language for that.
In javascript you can check if the document.location.hostname or document.location.pathname to check the domain/url you are currently using.
In javascript for example you can use:
if (document.location.pathname.indexOf('development') > -1) {
body = document.getElementsByTagName('body')[0]
body.setAttribute('class', body.getAttribute('class') + ' development')
}
Using PHP you can use $_SERVER['REMOTE_HOST'] and $_SERVER['REQUEST_URI'].
if (strpos($_SERVER['REQUEST_URI'], 'development')) {
echo "<body class=\"development\">";
} else {
echo "<body>";
}
And in the css file you can use:
body {
background: #eff;
}
body.development {
background: #ccc;
}
Theoretically something like this could work for you in just plain javascript using document.referrer;
<body onload="checkURL()">
</body>
<script>
function checkURL(){
var testPage = "www.testpage.com";
var livePage = "www.livepage.com";
var lastPage = document.referrer;
if (lastPage == livePage){
//do something here
}
else if {lastPage == testPage}
//do something else
}
else{
//umm what did you do?
}
</script>
I know that onload event waits for page resources to load before firing - images, stylesheets, etc.
But does this include IFrames inside the page? In other words, is it guaranteed that all the child Frames' onloads will always fire before the parent's does?
Also, please let me know if behavior varies between browsers.
No, it doesn't. If you want to do something like that, you'll need to add an onload handler for the iframe. You can do this nicely with jQuery:
<iframe src="http://digg.com"></iframe>
<script>
var count = $('iframe').length;
$(function() {
// alert('loaded'); // will show you when the regular body loads
$('iframe').load(function() {
count--;
if (count == 0)
alert('all frames loaded');
});
});
</script>
This would alert when all the frames are loaded.
See the example:
http://jsbin.com/azilo
Or plain javascript should work..
function checkIframes() {
if(!i) { i = 0; }
if(document.getElementsByTagName('iframe')[i]) {
document.getElementsByTagName('iframe')[i].onload = function () { i++; checkIframes(); }
}
else { yourFunctionInHere(); }
}
haven't really tested this, but should work... than refer to it with document.onload = function() { checkIframes(); }
I don't really like libraries like jQuery, because so far I found I can achieve more with less code, with regular javascript.
As I see on my pages, each iframe got independent onload, and top-frame onload doesn't wait for iframes to fire.
I got gif/png banners on my site that sometimes loads very slowly, so I put them into iframe and that made whole site and onload event to work faster.