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>
Related
I have a database with image paths. through PHP, I insert the pictures on my website. The problem is that the code that I have won't work. So, I decided to put some alerts to figure out what is the issue. After going through the alerts, I noticed that the images were resized and repositioned. After some reading, I found out that this is because the javascript is executed in the same time as the HTML and CSS and the alert halts the javascript, letting the HTML and CSS to be executed. How should I change my code to make the images work? This is the code in question:
var box = document.getElementsByClassName("produs");
var pic = document.getElementsByClassName("imagine_produs");
var i;
for (i = 0; i < pic.length; i++) {
alert(pic[i].width);
if ( pic[i].width > 200 ) {
pic[i].width="200";
alert(pic[i].width);
}
var marg = (box[i].clientWidth - pic[i].clientWidth ) / 2;
pic[i].style.marginLeft = marg + "px";
pic[i].style.marginRight = marg + "px";
}
Also, I have made a photo album that is in order to show how the code executes:
What other way is there to either halt the code or to rearrange it so that it works like in the last picture?
THanks!
You might use
console.log()
instead of alert() for debugging purposes. That way you can monitor what your code is doing without interrupting it with prompts.
Apart from that, the funtionality of your code might better be realised with CSS eventually (i.e. margin:auto; img max-width:90%; …).
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);
I have created a small piece of code that creates a DIV at a random 'fixed' location every 80ms. This div shows up for about 2seconds and then removes itself (including the code generated). However when leaving the part of the page where this is happening (using scrolling); I want the generator to stop.
And to avoid executing the code everytime the user uses his scroll (duplicate generators, because of scrolling) I thought it would be most useful to use a true/false statement.
if (focuson = true){window.setInterval(function(){$(generator);}, 80);}
$(window).scroll(function(){
if ($(window).scrollTop() > resolutieh){
var focuson = false;
window.clearInterval(generator); generator = 0;
}
else{
var focuson = true;
}
});
The code above actually works but results in a visual glitch; when the last generated DIV gets removed: every part of the screen at that moment, that is not 'filled' with div-content will be filled with big white chunks (basically the 'background-image' on repeat x/y). Also scrolling back to the location where the generator is active doesnt activate it again.
The following piece of code seems more logical to me (although it doesnt work):
if (focuson = true){window.setInterval(function(){$(generator);}, 80);}
if (focuson = false){window.clearInterval(function(){$(generator);}, 0);}
$(window).scroll(function(){
if ($(window).scrollTop() > resolutieh){
var focuson = false;;
}
else{
var focuson = true;
}
});
I basically want to avoid the visual glitch by either stopping the generator 'properly' or setting its timer so low that it takes less time to calculate. A cool bonus would be that if you would come back to the part of the page where the generator is spawning, it would turn on again.
Any suggestions?
Kind Regards.
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 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').