I have some CSS that renders correctly normally when it's not being animated but doesn't render correctly when animated. Some clipping that should occur does not during the animation but snaps back as soon as it finishes.
The last frame is what it looks like after it animates.
It only happens when I select the elements by class (i.e. $('[class="chatbubble"] :first')).
If I attach an id to the div and select it via $('#id'), it animates perfectly.
Here is my animation code:
function animate() {
var dom = $('[class="chatbubble"] :first');
var chatmessage = dom.find('[class="chatmessage"]');
var speed = 1500;
soundManager.play('bloop');
var wd = dom.width();
var ht = dom.height();
var fs = chatmessage.css('fontSize');
dom.css('width',0);
dom.css('marginTop',parseInt(ht/9));
dom.animate({ width:wd, marginTop:0 },speed).css('overflow', 'visible');
chatmessage.css('font-size',0);
chatmessage.animate({ fontSize:fs },speed).css('overflow', 'visible');
}
I'm not very familiar with jQuery so I don't know what could be causing it.
Can anyone help?
Oh god, I can't believe this. I found the solution 5 minutes after I posted it.
The solution was to simply use the $('#chatbox').find('[class="chatbubble"]:first') as the selector instead of $('#chatbox').find('[class="chatbubble"] :first').
Related
Can anyone help me accomplish the following? Thanks in advance!
Using JavaScript (I don't want to use JQuery), on mouse down how do I keep moving an element to either left if clicked on the id navLinkLeft or keep moving right if clicked on the id navLinkRight, and stop when mouse up.
<nav>
Link Left
<div id="navLinks">Navigation Links to Be Moved</div>
Link Right
</nav>
I've added event listeners but I'm not sure how to keep moving the elements. The goal is to keep moving the id navLinks to left or right when mouse down and stop when mouse up.
<script>
var navLinkLeft = document.getElementById("navLinkLeft");
navLinkLeft.addEventListener("mousedown", moveLeft, false);
navLinkLeft.addEventListener("mouseup", stopMovingLeft, false);
var navLinkRight = document.getElementById("navLinkRight");
navLinkRight.addEventListener("mousedown", moveRight, false);
navLinkRight.addEventListener("mouseup", stopMovingRight, false);
function moveLeft(){
var navLinks = document.getElementById("navLinks");
var x = -50;
navLinks.style.left += x + "px";
}
function stopMovingLeft(){
}
function moveRight(){
var navLinks = document.getElementById("navLinks");
var x = +50;
navLinks.style.left += x + "px";
}
function stopMovingRight(){
}
</script>
Create a variable in JavaScript that is true when you are hovering over the button, and vice versa, and then base the movement of that variable. I think there might be an event for this to, but using a variable might give you a little bit more flexibility. Like others have said, you could cause an if statement to be based on this in a setInterval(). SetInterval is the same method that I use to update the frames in my canvas app.
Not sure what you are doing, but canvas is sweet for things like this, but might not be suitable for what you are doing. (Good for things where flash might be useful.)
Example code:
http://jsfiddle.net/otqr7ur5/26/ Its a bit messy, (alright, alot) because I havn't used javascript in awhile, but this demo works. I only implemented moving left (with the right button lol) but it has what you need, and I am sure you can edit it to use it.
Basic Thoughts:
function updatePos() { //Updates the position every 200 ms
if (holdingLeft === true) {
currentX = currentX+10;
navLinks.style.right = currentX + 'px';
console.log(navLinks.style.right);
}
holdingLeft = true; //In the event, triggers it to move
holdingLeft = false; //Stops it moving right.
setInterval(function () { //Messy way of making update pos run every 200ms. I dont know why I put it in a function.... you can clean.
updatePos();
}
}, 200);
For a mockup-webpage used for research on interaction on websites, I created a mockup message-stream using JavaScript. This message stream is loaded in an IFrame and should show images at pre-set intervals and scroll to the bottom of the page after placing a new image at the bottom of the page. Getting the images to appear is working quite well with the provided script. However, both Chrome and IE seem to have trouble scrolling the page to the bottom. I would like to scroll to the bottom of the page as soon as the image is attached, but have for now added a 5 ms delay because that seemed to work sometimes. My questions are:
Is it okay to use document.body.scrollHeight for this purpose?
Can I make the scroll occur directly, or do I need a small interval before scrolling?
How to make the code scroll to the bottom of the IFrame directly after adding an image?
The following functions are used and trypost() is started onLoad:
function scrollToBottom(){
window.scrollBy(0,document.body.scrollHeight);
}
function trypost(){
point = point + 1;
if(point < interval.length){
//create and append a new image
var newImg = document.createElement("IMG");
newImg.src = "images/"+images[point]+".png";
document.getElementById('holder').appendChild(newImg);
//create and append a return
var br = document.createElement("br");
document.getElementById('holder').appendChild(br);
//time scroll to bottom (after an arbitrary 5 seconds)
var stb = window.setTimeout(scrollToBottom, 5);
//time next post
var nextupdate = interval[point]*400;
var tp = window.setTimeout(trypost, nextupdate);
}
}
My script section contains at least the following variables:
var point = -1;
var interval = [10, 10, 15];
var images = ["r1", "a1", "r2"];
This questions is a continuation of the project described in How to proper use setTimeout with IE?
To answer one of your questions, document.body.scrollHeight is appropriate for this purpose, but not if you're actually calling for document. That'll give you the scroll height of the document the iFrame is in, not the iFrame's document. The iFrame's document can be called upon by [insert variable for iFrame here].contentDocument.
Here's how I did it (and by that, I mean I tested it out with my own stuff to make sure it worked):
let i = document.querySelector('iframe')
i.contentWindow.scrollTo(0, i.contentDocument.body.scrollHeight);
That being said, the other answer by Thomas Urban will also work most of the time. The difference is only if your page has a really long scroll height. Most pages won't be longer than 999999 (for all I know that's impossible and that's why they chose that number), but if you have a page longer than that, the method I showed here would scroll to the bottom and the 999999 would scroll to somewhere not yet at the bottom.
Also note, if you have more than one iFrame, you're gonna want to query it in a different way than I did, like by ID.
Scrolling to bottom is always like scrolling to some ridiculously large top offset, e.g. 999999.
iframe.contentWindow.scrollTo( 0, 999999 );
In addition see this post: Scrolling an iframe with javascript?
If scrolling occurs too early it's probably due to images not being loaded yet. Thus, you will have to scroll as soon as added image has been loaded rather than on having placed it. Add
newImg.onload = function() { triggerScrolling(); };
after creating newImg, but before assigning property src.
If several events are required to trigger scrolling you might need to use some "event collector".
function getEventCollector( start, trigger ) {
return function() {
if ( --start == 0 ) { trigger(); )
};
}
You can then use it like this:
var collector = getEventCollector( 2, function() { triggerScrolling(); } );
newImg.onload = collector;
window.setTimeout( collector, 100 );
This way triggerScrolling() is invoked after 100ms at least and after image has been loaded for collector has to be invoked twice for triggerScrolling() being invoked eventually.
im new to most web dev stuff so im kindly asking you for some support.
i have an image map in which i have assigned several areas triggering different contents in a separate div. i would now like to add a delay to the onmouseover trigger so that the content in the div is only updated if the user positions the curser on the area instead of accidentally hovering over it.
this is the js i use for toggling the div contents:
function showHideDivs(indx){
hideDivs();
oShowHideDivs[indx].style.display = 'block';
}
function hideDivs(){
for(i=0; i < oShowHideDivs.length; i++){
oShowHideDivs[i].style.display = 'none';
}
}
window.onload=function(){
oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
for(i=0; i < oMap.areas.length; i++){
oMap.areas[i].indx = i;
oMap.areas[i].onmouseover=function(){
showHideDivs(this.indx);
}
}
}
so how do i implement the delay and where? thx in advance!
jan
EDIT:
i used this approach now:
oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}
seemed the easiest to me. thx for the hint!
The easiest way is to include a timeout on mouseover, and clear it on mouseout.
oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}
For more complex scenarios, use a plugin like hoverintent.
You need to use setTimeout() to call your function showHideDivs() after a certain delay. And you stop this function from being called if the user moves its mouse before the end of your delay.
Look here for a concrete example : https://stackoverflow.com/a/6231142/1606729
I have two windows: One is a page meant to be in an iframe, and one is the page meant to house the iframe. The objective of my project is to make an iframe that scrolls, but, when it is moused over, it pauses. I currently have the following code for the page meant to be in an iframe:
http://dabbler.org/edit/asdf/scrolling/index.html
and the code for the page meant to house the iframe:
http://dabbler.org/edit/asdf/scrolling/index2.html
What is wrong with my code? (Yes, I know I don't have body, head, HTML and the others, that isn't the problem, for those are thrust in automatically when the page is interpreted)
The window.onmouseover and window.onmouseout are not defined correctly.
You have this:
window.onmouseout = pageScroll();
window.onmouseover = unpageScroll();
You want to do this:
window.onmouseout = pageScroll;
window.onmouseover = unpageScroll;
You were setting onmouseout, and onmouseover to the return values of calling pageScroll and unpageScroll, but you wanted to set onmouseout/onmouseover the functions pageScroll and unpageScroll.
And finally, you're calling the wrong function in your setTimeout.
You are calling pageScroll, but you want to be calling pageScroller, which does the actual scrolling.
EDIT
function pageScroll(){
num = 150;
clearTimeout(scrolldelay);
pageScroller();
}
function unpageScroll(){num = 15000000;}
function pageScroller() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroller()',num); // scrolls every 100 millisecond
}
var num = 50;
window.onmouseout = pageScroll;
window.onmouseover = unpageScroll;
BTW, you should handle calling clearTimeout in pageScroller at some point in the future when the page is scrolled vertically as much as possible. There's no point in continuing to call scrollBy if the window is already scrolled as much as possible.
Once again I find myself stuck by something that I just don't understand. Any help would be appreciated.
I'm working on a modal window, you click something and the background is masked and a modal window shows some content.
I have a div with "display:none" and "opacity:0", and when the user triggers the modal, this div will overlay everything and have certain transparency to it.
In my mind, what I need to do is:
Set the opacity
Perform a "for" loop that will check if the opacity is less than the desired value.
Inside this loop, perform a "setInterval" to gradually increment the value of the opacity until it reaches the desired value.
When the desired value has been reached, perform an "if" statement to "clearInterval".
My code so far is as follows:
var showMask = document.getElementById('mask');
function fireModal(){
showMask.style.opacity = 0;
showMask.style.display = 'block';
var getCurrentOpacity = showMask.style.opacity;
var increaseOpacity = 0.02;
var finalOpacity = 0.7;
var intervalIncrement = 20;
var timeLapse = 500;
function fadeIn(){
for(var i = getCurrentOpacity; i < finalOpacity; i++){
setInterval(function(){
showMask.style.opacity = i;
}, intervalIncrement)
}
if(getCurrentOpacity == finalOpacity){
clearInterval();
}
}
fadeIn();
}
As you all can guess, this is not working, all it does is set the opacity to "1" without gradually fade it in.
Thanks in advance for your help.
You should use jquery, mootools or extjs for something like this.
But basically you need to do this:
var id = setInterval(function() {
showMask.style.opacity += .05;
if (showMask.style.opacity >= 1)
{
clearInterval(id);
}
},200)
This will fade in over 2 seconds.
Rack my up as another who strongly advises using jQuery. In my work environment I often face similar challenges due to corporate bosses who are basically afraid of any and all advancement, so I understand your predicament. But, that being said, my suggestion is instead of spending time re-writing the wheel, spend time figuring out how to use the proper solution, which is, in this case jQuery or other javascript framework. If you can write your own function, you can use jQuery.
<script>
document.write("<scr" + "ipt src='http://givemejquery'></scr" + "ipt>");
</script>