I was not able to find this answer by myself and I apologize if my search was not deep enough.
After so much time I've been lurking in stackoverflow, I finally have the chance to drop my own question (actually it makes me sad as I'm fairly happy to show no one how dumb I am.)
I'm working on this website http://italianliving.fi (pick english language) and by far everything I needed is working as I think it's supposed to. My issues comes with catalogs page, after I open one colorbox to display some external content, my footer seems not working as supposed to. There's a [ + ] at the bottom right which is supposed to open/close the footer; it works well until I call any colorbox, after that call it goes messed up, it slides the footer up but as far as it opens it, it closes it as well. My code for that is:
$('#footer_toggle').click(function(){
if ($(this).text()== "[ + ]")
{
$(this).text("[ - ]");
$('#footer').animate({ 'height': '240px' }, 400);
} else {
$(this).text("[ + ]");
$('#footer').animate({ 'height': '20px' }, 400);
}
return false;
});
but I'm fairly sure the problem is with Colorbox itself. Any hint about how to proceed? Any other way to toggle the footer otherwise? Thank you very much in advance.
Your cards (i.e. http://italianliving.fi/pages/info_card.php?b=verysofa&lang=en) include the code.js file, but do not include the colorbox plugin. This issues an error.
I don't know if this is the source of the footer problem, but try fixing that first.
EDIT: Seems that you attach the click handler twice. When the colorbox subpage opens, it fires code.js again, which attaches the second click handler to #footer_toggle.
Related
This works fine
https://jsfiddle.net/blazeeboy/fNPvf/
I copied it precisely to my account & editor here, and it won't work. No action on pressing the "submit" button.
https://jsfiddle.net/user/digitareous/fiddles/
function change(){
var myNewTitle = document.getElementById('myTextField').value;
if( myNewTitle.length==0 ){
alert('Write Some real Text please.');
return;
}
var title = document.getElementById('title');
title.innerHTML = myNewTitle;
}
I looked at jsfiddle "getting started" and "beginning tutorial" pages looked for other such starting points, and clicked all around in jsfiddle, run, update, etc. I also built a fiddle from the tutorial and tried to run it, no joy. Tried IE11, Chrome and Firefox. I could not get any of them make the jsfiddle run.
Something is making my jsfiddle editor "inactive".
What might that be?
In the second jsfiddle click on the javascript settings button (top right corner of the javascript code field of the editor) and in the popup field "LOAD TYPE" select "no wrap - in head".
You should now get the desired behavior.
(I get stuck on this from time to time - it is very frustrating).
I'm essentially using the default web/viewer.html and its associated files that comes with it. I have it loaded in an iframe. How can I add an event listener to when the pdf is scrolled? Thanks for any help.
I dug around and tested some things more and figured it out, which is pretty simple but if you're in the same bind:
var viewerContainer = window.document.getELementById('somePdfIframe').contentDocument.getElementById('viewerContainer') will contain the element whose scrollTop will change.
So if
viewerContainer.scrollTop + $(viewerContainer).height() == viewerContainer.scrollHeight
then the user has reached the bottom of the pdf iFrame.
You can also viewerContainer.addEventListener('scroll', function() {...}) to listen for scrolls in the pdf iframe.
One little thing that was tricky for me is that you should make sure the pdf iframe was fully loaded before calling this code.
video-js has the default toggle-pause-play button, which works fine. for a specific use, i want to a button next to it that pauses, rewinds, show the poster image and the big play button. in other words, a stop button :-)
it should be a simple plugin, but i cant find the right examples .. it would probably start with
videojs.plugin('stopbutton', function(options) {
var StopButton = videojs.Button.extend({ ....
Can anyone point me to the simplest example of adding a button ?
Have a look here for a partial answer to your question.
If you decide to build your own "stop" button on top of the videojs interface then the sequence would be something like (API ref here):
myPlayer.pause();
myPlayer.currentTime(0);
myPlayer.posterImage.show(); // as per OP plans
myPlayer.bigPlayButton.show(); // as per OP plans
First, im not really experienced with javascript or jquery, usually the plugins or very very simple code by hand (as you are about to see).
Wat i want is done many times, but for some reason i cannot get it to work like i would.
I have several problems.
I use the .animation to slide 2 divs in and out (2 divs next to each other, and i want them to slide in and out of the screen (like the iphone homescreen for example).
Now the problem is the animation does not work as intended, instead of sliding away div1 WHILE sliding in div2 along side of div1, div1 disapears/shrinks (sliding up and left) instead of "sliding outside of the screen" and then div2 shows up afterwards. (so the slide effect is not working and the divs hide and show seperatly instead of sliding like a iphone screen).
Now the thing is i have recreated the setup and tried on there, and it works as intended as shown here: http://jsfiddle.net/dkeulen/2fHbz/
So that is how i want it to work, but it does not do so as show here: (NOTE: its work in progress) http://jsfiddle.net/dkeulen/gQ9aE/2/
(Black square on the right center is the button you need to click).
I could post all the html and css and jquery here but its quite the amount to post...
If anything els is needed i can provide it ofcourse.
As code this is the part i use for the sliding:
$('.btnr').click(function(){
$('#hosting').animate({'width' : '0px'}, 100).hide(600);
$('#inexchange').animate({'width' : '100%'}, 600).show(600);
$('.btnl').fadeIn(600);
$('.btnr').fadeOut(600);
});
$('.btnl').click(function(){
$('#hosting').animate({'width' : '100%'}, 600).show(400);
$('#inexchange').animate({'width' : '0px'}, 600).hide(600);
$('.btnl').fadeOut(600);
$('.btnr').fadeIn(600);
});
I hope anyone can help me out on what goes wrong and what i must do about it, thanks in advance!.
it's better to specify a jsfiddle for us to see it in action
I think your problem is that the hide() and show() doesn't stack in the same animation queue
so one way of solving this is using promise ex.
$('.btnr').click(function(){
promise1 = $('#hosting').animate({'width' : '0px'}, 100).promise();
$.when(promise1).then(
function(){
$('#hosting').hide();
$('#inexchange').animate({'width' : '100%'}, 600).show(600);
$('.btnl').fadeIn(600);
$('.btnr').fadeOut(600);
});
});
the same goes for the other button.
check this simple fiddle I made to demonstrate how it's working
http://jsfiddle.net/artmees/BCTxH/
video.js - hello, newbie here, and i'm hoping someone could tell me what code i would need to place in the video-js.css file so that the full screen button does not show ?
have tried some codes I found online, but the button still shows in all browsers.
fingers crossed!
In your css look for the block of CSS marked:
.vjs-fullscreen-control { ... }
or
.vjs-default-skin .vjs-fullscreen-control { ... }
Within that block add display:none;
instead of display:none; you can use visibility:hidden;
the advantage is that the width of your tool bar remain the same and is correctly displayed.