I am attempting to make a div scroll left or right either with a mouseover effect or on-click. However, I am at a loss as to what is going wrong.
Here was my attempt to do this simply:
<head>
<style>
#innerscroll{
margin-right:0px;
}
</style>
</head>
<body>
<div id="innerscroll"></div>
<img src="right.jpg"
onmouseover="document.getElementById('innerscroll').style.marginRight = setInterval(('value' + 1), 100);" />
</body>
Now, trying this, I'm wondering why it doesn't work. What am I doing wrong?
I also tried a more complex approach that also failed. Here's the code for that:
$('.nav-next').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-right' : '100px'
});
});
$('.nav-previous').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-right' : '-100px'
});
});
My last question was closed because I guess I was not specific enough. Whatever details you need please ask for and I'll edit the question!
Edit: I have the option of using jQuery but I would rather not.
Edit2: I am using setInterval to time the mouseover effect. I am thinking that it will move via mouseover or it will move via a click event.
My solution is using jquery too, like this:
using 2 buttons, one for left move and other for right move
$('#innerscroll').animate({
'marginLeft' : "+=50px"
});
and
$('#innerscroll').animate({
'marginLeft' : "-=50px"
});
you can make a function and pass the value to it.
You should use .style.paddingRight instead of .style.padding-right. jsfiddle
Modified code:
<img src="right.jpg"
onmouseover="onmouseoveronImge();" />
Since you are using jQuery you can attach mouseover event as below
<script>
$('.nav-next').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '+=100px'
});
});
$('.nav-previous').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '-=100px'
});
});
function onmouseoveronImge(){
$('#innerscroll').animate({
'margin-left': '+=100px'
});
}
</script>
Note: I don't think you want to use value return by setInterval. You should explain it in your question why you are using it.
Padding can't be negative value. Animate margin instead.
So your code should look like this:
$('.nav-next').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '100px'
});
});
$('.nav-previous').click(function(e) {
e.preventDefault();
$('#innerscroll').animate({
'margin-left' : '-100px'
});
});
Working jsfiddle here: http://jsfiddle.net/vqzrY/
If you have markup like:
<div id="container">
<div id="content">
</div>
</div>
Setting the padding on either #container or #content will not make the inner div move. You want to set the margin on the inner div to make it scroll horizontally, and set overlay:hidden on the outer div.
First, are you using the jQuery UI library? Your second example looks like you might.
Try this, does it do something similary to what you are trying to accomplish?
<div id="innerscroll">
Some Content...
</div>
<div class="nav-next>
Next
</div>
<div class="nav-previous">
Previous
</div>
<script type="text/javascript">
$('.nav-next').click(function(e) {
$('#innerscroll').animate({
right: 100
});
});
$('.nav-previous').click(function(e) {
$('#innerscroll').animate({
left: 100
});
});
</script>
If not, your example looks like you are doing a couple things:
Setting the padding with CSS
Setting padding on mouseover
Is that what you want to do?
Related
I want to get an highlighting effect on some various div container while the rest of the site should be dampened down in opacity including the background-image.
Any idea?
Why does this code not work? tried .hover() instead of .mouseover() too but the function won't react on any input...
$(function () {
$('body').mouseover(function () {
$('body').prop({
"background-color": "red";
});
});
});
Another try would be to set a frame around the body tag in the html and then set props to that frame while the hovered frame is in normal state but I have no idea how to do this. Just beginning with js dev. :)
EDIT: did a fail...
$(function () {
$('body').mouseover(function () {
$('body').css({
"opacity": "0.3";
});
});
});
should be that way...
any way to apply the opacity to the background image too?!
fiddle Demo
Use .css()
Set one or more CSS properties for the set of matched elements.
$(function () {
$('body').mouseover(function () {
$(this).css({
"background-color": "red"
});
//or $(this).css("background-color","red");
});
});
this
.prop()
Set one or more properties for the set of matched elements.
.prop() will set the property for a particular element. In your case you have to use .css() to set the style. Please read .prop() and .css() to see the difference.
Try this,
$(function(){
$('body').mouseover(function(){
$(this).css({"background-color":"red"});
});
});
DEMO
Here's a FIDDLE
body {
background: gray;
min-height: 1000px; /* For demo purposes */
}
css
$(function() {
$('body').on('mouseover', function() {
$(this).css({ backgroundColor: 'red' });
});
});
animate
$(function() {
$('body').on('mouseover', function() {
$(this).animate({ backgroundColor: 'red' }, 600);
});
});
*Note: For some reason it doesn't work with jQuery 1.x(edge).
I think this is what you might want: a "dim" DIV element that adds a semi transparent black box on the entire page, that puts itself "below" the DIV you want to highlight, and then some javascript to turn it off and on, and rearrange the z indexes. The HTML would look something like this:
this is some text
<div id="div1" class="dimmable">hello</div>
<div id="div2" class="dimmable">goodbye</div>
<div id="dim"></div>
And then the JS:
$('div.dimmable').hover(function() {
$(this).css('z-index', 101);
$('#dim')
.css('z-index', 100)
.width($(window).innerWidth())
.height($(window).innerHeight())
.fadeIn();
}, function() {
var dimmable = $(this);
$('#dim').fadeOut({complete: function() {
dimmable.css('z-index', 99);
}});
});
You can see it working here.
A slight catch: the DIVs need to have position:relative, otherwise you can't change their z-indexes and you can't put them on top of the "dim" DIV. Also, anything with a higher z-index will not stay behind the "dim", of course, but you can just use higher numbers as a workaround.
I want the mouseover on the coverImg then show the coverInfo
the coverInfo show the title and the description of the image
then the coverInfo do show
but I want the coverInfo stay and clickable when mouserover on itself
but it disappear immediately.
So what's the point I have missed?
The HTML
<div class="workshop_img">
<div class="coverInfo"></div>
<a href="#">
<span class="coverImg" style="background-image:url('images/work/show1.jpg')" title="Chictopia "></span>
</a>
The CSS：
.coverInfo {
position:absolute;
width: 200px;
height:200px;
background:rgba(0,0,0,0.5);
top:30%;
left:30%;
display:none;
}
see the jQuery code
$(function() {
$(".coverImg").each(function() {
//make the background image move a little pixels
$(this).css({
'backgroundPosition' : "-40px 0"
}).mouseover(function() {
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
}, {
duration : 90
});
//shwo the info box
var content = $(this).attr("title");
$("<div class='coverInfo'></div>").text(content).prependTo($(this).parent()).fadeIn("fast");
}).mouseout(function() {
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
}, {
duration : 200,
});
$(this).parent().find(".coverInfo").stop().fadeOut("fast");
})
})
});
</div>
EDIT：
I have searched a lot and find something similar, I took them and the answer given below together to solve my problem, here is the code:
$(function() {
$(".coverImg").css({
'backgroundPosition' : "-40px 0"
}).mouseenter(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
},90);
info.show();
}).mouseleave(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
},200);
info.stop().hide();
});
});
It has just been clean, but do not work fine.
What's the problem?
The new box shows immediately because it is not initially marked as hidden. .fadeIn() only fades in something that is initially not showing.
You can make it initially not visible like this:
$("<div class='coverInfo'></div>").text(content).hide().prependTo($(this).parent()).fadeIn("fast");
You also can get rid of the .each() iterator you're using. You don't need it. You can just use:
$(".coverImg").css(...).mouseover(...).mouseout(...);
You don't need the .each() at all.
I'd also suggest you use .hover(fn1, fn2) instead of .mouseover(fn1) and .mouseout(fn2).
And, it looks like you are creating a new object and inserting it on every mouseover event such that multiple such objects will pile up in the page. You should either .remove() the object in the mouseout function or you should reuse a previously existing element if it exists in the element rather than creating more and more of them.
Sometimes when you are using the events for mouse hovering and you are also changing the page, the change to the page can cause the element to lose the mouse hover which then hides the change to the page and then it all starts over again. I can't tell for sure if that is happening in your case (I'd need a working example to play with to see), but it seems possible.
I have used scrolling script from this site. http://blog.waiyanlin.net/example/jquery/flyingtext.html. I need the animation scrolls from right to left. How can i do that?
Replace marginLeft with marginRight and edit the CSS so the text is right aligned.
You can see a working example here: http://jsfiddle.net/DkRRw/
find-replace your code, change Left with Right inside your document.ready() js
As BondyThegreat pointed out, you need to swap Left with right in the script. You also need to make a change to the style sheet.
<script>
$(document).ready(function(){
$('.container .flying-text').css({opacity:0});
$('.container .active-text').animate({opacity:1, marginRight: "350px"}, 4000);
var int = setInterval(changeText, 5000);
function changeText(){
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');
$activeText.animate({opacity:0}, 1000);
$activeText.animate({marginRight: "-100px"});
$nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginRight: "350px"}, 4000, function(){
$activeText.removeClass('active-text');
});
}
});
</script>
Update the style sheet to:
.flying-text{
margin-right:-100px;
text-align:right;
}
If you have seen this animation is done by animating the left-margin of text from 0 to some pixals.
What you want to do is to animate it from right hence you can set marginRight, in the script, insteed of marginLeft.
UPDATE:
In css you will also have to use
.flying-text
{
//Remove this: margin-left:-100px;
margin-right:0px;
}
Im using http://sorgalla.com/projects/jcarousel/ as a slider....
It shows one image at a time, and a total of four images... When displaying the first image, i dont want the prev arrow to be visible, and the same if im at number 4 image, i dont want the next arrow to be visible...
How do i do this?
I initialize the script like this:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
You can use CSS to hide the arrows. Adding the disabled classes is handled by the plugin itself.
.jcarousel-prev-disabled, .jcarousel-next-disabled
{
visibility:hidden;
}
Demo: http://jsfiddle.net/ubanC/88/
You can cheat by using two below options:
Using CSS,you should override to set some below classes:
<style>
jcarousel-prev-disabled,
jcarousel-next-disabled,
jcarousel-prev-disabled-horizontal,
jcarousel-next-disabled-horizontal{
background-position:0 0;
}
</style>
Using Javascript, this solution is same as the first. We should remove the classes: disable for next and previous buttons:
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemFirstOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled");
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled-horizontal");
}
},
itemLastOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-next").removeClass("jcarousel-next-disabled");
$(".jcarousel-next").removeClass("jcarousel-next-disabled-horizontal");
}
}
});
});
</script>
P/S: I just try to read it's document and use Firebug(~Edit on the fly) to detect. If you could, you can try. It's fun.
I have a <textarea> element in my form that has this code attached to it:
$('#links').focusin(function() {
$('#links').animate({
height: '100px'
}, 300, function() {
// done
});
});
This works perfectly, when the text area gets focus it increases in height nicely to 100px. Now, I want it to shrink back down to a suitable size based on the text inside it when it loses focus. I wrote this:
$('#links').focusout(function() {
$('#links').animate({
height: 'auto'
}, 300, function() {
// done
});
});
But it doesn't work, it just stays at the same height (100px). Is there any way to do this?
Thanks. :)
Edit: To save some confusion, the even handler for $('#links').focusout works fine, that's the first thing I tested. So I assume it's a problem with the animation or the CSS property.
Try $( '#links' ).blur( function(){ ... } ) instead
http://api.jquery.com/blur/
Edit, your actual code:
$('#links').blur(function() {
$('#links').animate({
height: 'auto'
}, 300, function() {
// done
});
});
Some other notes.. You can use $( '#links' ).focus() instead of focusin, and also, once you're in the function, you can use $( this ).animate(), as a shortcut. Just little tips and whatnot.
This isn't quite the same as what you're doing, but quite similar: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
auto_height_link = $( '#links' ).css('height');
$('#links').focusin(function() {
$(this).animate({
height: '100px'
}, 300, function() {
// done
});
}).focusout(function() {
$(this).animate({
height: auto_height_link
}, 300, function() {
// done
});
});
but anyways the animate doesnt read the css value auto for height
i stumbled upon this http://www.unwrongest.com/projects/elastic/ which is what you need i guess
You can't use auto to animate in jQuery. You should set it to auto, then get the actual height (in px) and finaly animate it.
Take a look here