Hi I am using jquerymarquee and I want to have displayed the entire line of text at the beginning, and scroll onMouseHover, and when the line of text ends, the beginning of the text to appear after a while. Maybe there are other libraries that are able to do it ?
I got it to work as you wanted. It is the same library which you are using.
I didn't start the marquee onload, and waited for the user to put his mouse over the text. And as the user puts his mouse over the text, marquee started.
You can check the demo here.
http://jsfiddle.net/VJkxe/1/
in the example only..
$('.marquee-with-options').hover(function(e) {
});
dont use..property..pauseOnHover: true
you have to try some thing and if any problem occurs you have to ask here..
Related
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
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 write a simple vertical JavaScript carousel that'll rotate a couple of elements. It works quite well but I am having a hard time figuring out how to keep the amount of elements. As you can see in this JSFiddle, http://jsfiddle.net/xznfQ/2/, the first one is "queued" away and reappears after a round. Can anyone tell me what I am doing wrong?
I guess something is wrong with these two lines:
$(e).eq(1).slideUp('slow'); // Slide next element up over the previous
$(e).eq(0).appendTo(a).show('slow'); // Place the current element at the bottom
Kind regards,
Mathias.
You want to hide the first element, e(0) and only after that move it to the end! You want:
$(e).eq(0).slideUp('slow', function () {
$(e).eq(0).appendTo(a).show('slow');
});
Your code:
$(e).eq(1).slideUp('slow');
Slowly hides the element and returns immediately. Then:
$(e).eq(0).appendTo(a).show('slow');
Moves the first element to the end immediately and slowly shows it. This meant you had the second element disappearing and the first element appearing at the end. So the list had one hidden at all times.
I have modified a code that displays a marquee scrolling a simple HTML list. You can see it here:
I have 3 problems that I can't solve:
JS: I would like the marquee to show the text entering again through the right just after it disappears through the left, something like a continuous marquee, how could I do it ?
CSS: I am noticing (a) some artifacts in the marquee, I think this is due to the marquee text and the margins/paddings of divs not being properly set; and (b) the shadow of the lighter blue div cut over the marquee.. (I think it may be a z-indez problem?). (b) appears with any browser, (a) only with chrome, firefox looks ok. How could I fix it ?
Here's a screenshot:
I can successfully load data from my db and append it to the marquee. Now, I want to "refresh" the contents of the marquee every X seconds, would it be ok to remove the top element of the list when appending one in the bottom, or would it be better to fade-out, update everything, and fade-in again? Any other ways to do it ?
Here is a simple example to deal with scrolling them in from the opposite side. Also, if you adapt this method you can simply add or delete new items in the array as you need too. Watch this and about 2 or 3 times through it will add new items. One important thing to note is make sure the width of the div with id text is wider then the length of all visible items plus the length of the next in line.
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.