So, here's what I've got so far: https://jsfiddle.net/625qofbe/1/
What I want is for the position of the "about" div, containing the Lorem Ipsum text and what should be an "X" symbol (I dunno how to link images into JSfiddle, sorry) to move, say, 30 pixels to the left when the user clicks on the "About" button in the top-left. Here's the Javascript I've been trying to do that with:
document.getElementById("button").addEventListener("click", AboutOnScreen);
function AboutOnScreen() {
document.getElementById("about").style.left = 30px;
}
I've been Googling and checking the Javascript against successful little experiments like this for ages, but nothing's worked and I can't see what I'm doing wrong here.
The end goal is to have the Lorem text hidden offscreen, slide in when the user clicks on About, then slide offscreen once they click the X icon. I was sure I knew in theory how do that, but I've hit a snag on step one.
EDIT: Thanks for the help guys, but weirdly the two solutions that both worked fine in JSfiddle didn't work even when I copy/pasted the code back into Sublime Text. I did, however, get the thing working by removing the "addEventListener" line and adding "onclick='AboutOnScreen()'" into the div tag for the About button. The "addEventListener" line sent up an error notification when I checked the page source (as suggested by Arindam) so I got rid of it entirely. The weird thing is I'm sure I tried that before with no success, so the solution to this head-scratcher turned out to be a confluence of all the answers below.
As #Rikard mentioned, do the following:
document.getElementById("button").addEventListener("click", AboutOnScreen);
function AboutOnScreen() {
document.getElementById("about").style.left = '30px';
}
Which should get the snippet working.
As for the sliding animation, you can use CSS3 (assuming browser support) to quickly add animation for your page.
A good resource for CSS3 animations would be http://www.w3schools.com/css/css3_animations.asp
Good luck and have fun!
When setting the inline style of an element's distance value in plain JS, it's a combo of Number and String or String. So the value can be: '430px' or 430+'px'.
document.getElementById("button").addEventListener("click", AboutOnScreen);
function AboutOnScreen() {
document.getElementById("about").style.left = 430 + 'px';
}
You said move to the left by 30px, which is interpreted (at least to me), as 30px from the element is positioned currently. So it was left: 400px so the value should be 430px if moving 30px to the left.
FIDDLE
Related
I'm trying to position an absolute positioned div using jQuery offset() function.
The idea is to position it at a fixed offset from another element of the DOM. This happens in a quite complex environment with multiple nested divs.
The strange thing that happens is that calling it twice gives two different results. To me it seems there is no reason for this, although I am quite new at jQuery so I could be oversighting something obvious.
I do think that
var pos = $(document.getElementById(someElementInTheDOM)).offset();
$(document.getElementById(MyDiv)).offset( pos );
should position MyDiv always in the same place, even if I call this code some 10 times. That's what correctly happens in this fiddle. Click on the magnifying glass several times, everything is ok.
But as soon as I start adding display:none and display:block properties the thing gets disrupted. I tried to bring it down to basic and I created a fiddle here. To see what I mean press on the magnifying glass, click on the magnifying glass again, click on the magnifying glass once more, close the div by the white "X", click on the magnifying glass once more.
Any clue what's going on?
You just have to change the order:
document.getElementById("iuocboun_filter_window").style.display="block";
$(document.getElementById("iuocboun_filter_window")).offset( pos );
instead of
$(document.getElementById("iuocboun_filter_window")).offset( pos );
document.getElementById("iuocboun_filter_window").style.display="block";
EDIT:
Explanation: The offset does not work on hidden elements, thats why you have to make it first visible and than set the offset. ;)
I have a JSFiddle to take a look at here
I have been able to create an auto expanding and reduction textarea so as the user types it will auto expand and reduce if the user removes text. The problem is that the text bounces around and a scrollbar appears. I am not sure why the text is bouncing around as I type and I cant figure out how to remove the scrollbar.
When I remove
while($(this).outerHeight() > this.scrollHeight - parseFloat($(this).css("borderTopWidth")) - parseFloat($(this).css("borderBottomWidth"))) {
$(this).height($(this).height()-1);
};
Then the bouncing text goes away.
Also am I killing a dead horse with my JS code? Is there an easier way to do this? I feel like I am.
Also the first time you type in it the textarea inserts </body> and </html> into the textarea. This does not happen in my server, but is happening on JSFiddle only.
Any help to stop the bouncing text and remove scrollbars?
SOVLED:
I was finally able to solve my issue by changing the .keyup to .keydown in the function and removed the - parseFloat($(this).css("borderTopWidth")) - parseFloat($(this).css("borderBottomWidth")) the bouncing text and scrollbar issues were fixed. Here is the code that is also on the JSFiddle example
.keydown(function(e) {
while($(this).outerHeight() < this.scrollHeight) {
$(this).height($(this).height()+1);
};
while($(this).outerHeight() > this.scrollHeight) {
$(this).height($(this).height()-1);
};
});
I am trying to animate a line on scroll but I am at a loss at the moment. The final result should be similar to how the lines animate on this site, http://www.teslamotors.com/goelectric#range (you have to scroll a little bit to get to the lines).
There is a static gray line, and then a red line that gets height when the user scrolls down. If the user scrolls up while part, or all of the red line is visible, height will be subtracted from the red line. BUT nothing should happen to the red line until the user has scrolled 200px down the page.
I have created a fiddle for this problem and I am pretty sure I know where my problem lies, but I do not have an answer for how to fix it. I think it is because my variables currentScrollPosition and lastScrollPosition in function countUp135 are always equal to each other.
Any help would be greatly appreciated. Here is my fiddle:
http://jsfiddle.net/tripstar22/2HDVA/5/
Thanks in advance!
Although there is many ways to do this in JS, I'll offer an alternative css method. Instead of animating a line on scroll you can just give the illusion that the line is animating. Check out this fiddle here. As you can see The fixed red element will follow the window on scroll and fill in the transparent area between the divs, making it seem like a red line is being drawn.
You can overlay an image with a transparent line running through it instead of grey divs to minimize the code even more, or you can add js to make the animation more fancy.
There are a lot of functions in your fiddle, where I do not understand why you should need them nor what they do. An updated version of your fiddle, seems to do what you want. There was no need for all thoses methods.
This seems to be enough:
var scrollTop = getScrollTop();
if (scrollTop > 200) {
addHeightPath1(scrollTop - 150);
} else {
addHeightPath1(0);
}
I'm also wondering about the function stoppedScrolling, where an asynchronous time function is beeing started, but you try to get an result from the stoppedSrolling() function, that is never passed as a return.
My document looks like this:
Basically the background is one full-screen, transparent div. There are couple problems...if I just create the background div and don't apply any z-index to it, it ends up being on top of everything, and I cannot click on the box. If I set the z-index of the background div to be below the box, I can't seem to click on the background. What I want to do, it to be able to click both on the box, and the background.
var x = document.getElementById("bg");
x.addEventListener("click",reset,false);
function reset() {
alert("reset was clicked");
}
CLARIFICATION: box is on the same node level as the bg. it is not inside the bg div.
Take a look at this jQuery plugin - even if it doesn't solve your particular question the code could provide insight into your dilemma.
jQuery clickoutside
You must post your code so every one can help you. My test work correctly on Firefox and Chrome. If I'm guessing right, the background in your code isn't expanded. Try to remove html, body { width:100%; height:100%; } in my example to see the problem.
On IE browser, you need to use a transparent gif image as background of the background div, otherwise the background div may be unable to receive mouse click event.
So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!
Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.
I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...
1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.