I am trying to update a button text on click by sliding the new text from the top. It "pushes" the text and appear.
I've managed to do that, but when the background is darker, we can see the text appearing outside the button. How to solve that ? And i can't lower the top value since otherwise the text is still visible when it is removed from the DOM. Here is my code:
var i = 1;
$('a').on('click', function (event) {
var $el = $(this);
$('span').animate({
'top': '+=20px'
}, 250, function () {
$el.html('');
i++;
$el.prepend('<span class="b" >' + i + '</span>');
$('.b').animate({
'top': '+=20px'
}, 250);
});
});
CSS :
span {
position: relative;
}
.b {
top: -20px;
}
JSFiddle here
Is there a way to cut the text when it is bigger than the container ?
Like so:
Use overflow: hidden on the a tag.
http://jsfiddle.net/QG4cx/12/
a {
overflow: hidden;
}
Related
The idea is that when users mouse over each name in the list, the div with id preview will have background image. The first a does not have a problem, but when I added the href, JavaScript keep firing the hover event. What is the problem here?
HTML
<ul>
<li><a>John</a></li>
<li>Sam</li>
<li>Tom</li>
</ul>
<div id="preview"></div>
JavaScript
jQuery(function() {
var names = $('a');
var bg = document.getElementById('preview');
names.hover(
changeBackground, handlerOut
);
function changeBackground(e) {
console.log('hover');
var image = 'http://londonalley.com/wp-content/uploads/2014/08/creativesUS3bb-1920x1080.jpg';
if (bg.style.cssText.length == 0) {
bg.style.cssText = builtStyle(image);
bg.style.display = "block";
}
}
function builtStyle(image) {
return "width: 100%;height: 100%;opacity: .6;position: absolute;top:0px;left: 0px;z-index: 101;opacity:.9: 1;display: block;visibility: visible;background-image: url(" +
image + ");"
}
//handle mouse leaves
function handlerOut() {
console.log('out');
if (bg.style.cssText) {
bg.style.cssText = "";
}
}
});
JSfiddle: https://jsfiddle.net/rattanak22/q96a6dz4/
Solution: Simply change your z-index css in the builtStyle function from 101 to -1
z-index: -1;
Note: You have specified opacity twice in your CSS.
The problem is you are setting background image as absolutely positioned without z-index. So when you hover over "a" tag, changeBackground function assigns an background image which is absolutely positioned with no z-index. That will bring image on top above all, like one more layer above "a" tag. As this new layer comes up, mouse cannot reach "a" tag which triggers hoverOut, and the cycle continues for every mouse moment.
function builtStyle(image) {
return "width: 100%;height: 100%;opacity: .6;position: absolute;top:0px;left: 0px;z-index: -1;opacity:.9: 1;display: block;visibility: visible;background-image: url(" +
image + ");"
}
https://jsfiddle.net/pradosh987/9p0pjtd4/
I have assigned -1 z-index to background image and that works.
After looking at your site, simply, change your css rules to:
#content-wrapper {
position: relative;
z-index: 102;
overflow: hidden;
}
#preview{
pointer-events: none;
}
I have the back to top button that appears when you reach a point on the page, which is working fine, however, when it appears the text is on two lines until the box has finished the animation to appear. So, is there anyway to prevent this? What I mean by the animation is: btt.show('slow');
Code:
$(document).ready(function () {
var btt = $('.back-to-top');
btt.on('click' , function(e) {
$('html, body').animate({
scrollTop: 0
}, 500);
btt.hide('slow');
e.preventDefault();
});
$(window).on('scroll', function () {
var self = $(this),
height = self.height(),
top = self.scrollTop();
if (top > 500) {
btt.show('slow');
} else {
btt.hide('slow');
}
});
});
Example: http://codepen.io/Riggster/pen/WvNvQm
The problem is caused by animating the width of a box, I think it might be better to animate the position of it instead, but - even better - lets use CSS animations!
$(window).on('scroll', function () {
if ($(window).scrollTop() >= 500) {
$(".button").addClass('show');
} else {
$(".button").removeClass('show');
}
});
#wrapper {
width: 100%;
height: 2000px;
}
.button {
position: fixed;
bottom: 50px;
right: -100px;
/* You might still need prefixes here. Use as preferred. */
transition: right 500ms;
}
.button.show {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper">
<div class="button">Here's my button!</div>
</div>
I've defined your button as hidden by default, by giving it a position of right: -100px. When we hit the correct scroll position, we add the class show and that triggers the animation performed by CSS and not javascript, as we have the transition property for the property right defined - that way the browser does the heavy lifting.
Toggling show/hide alters your elements width. You either have to put it in a container with display: inline
Or more ideally you might want to change show/hide to jQuery fadeIn() / fadeOut() which is more appropriate for "Back to Top" indicators.
Here is your codepen example modified with inline container:
http://codepen.io/anon/pen/MwWweY
When the mouse is over an element A of a certain class , another floating div B, which contains a link, should appear. B should disappear as soon as the mouse has left A and B.
How can I do this with jQuery?
jsFiddle
var container = $('#container');
var area = $('.area'); // this is A
var position = area.offset();
var floating = $("<div />", {
css : { "position" : "absolute",
"top" : position.top - 30,
"left" : position.left + 20,
"border" : "1px solid #000",
"padding" : "5px",
"display" : "none",
"z-index" : "100",
"background-color" : "#F00"
}
})
.text('Hello World'); // this is B
container.css('position', 'relative');
container.append(floating);
function show() {
floating.show();
}
function hide() {
floating.hide();
}
area.on('mouseenter', show);
area.on('mouseleave', hide);
floating.on('mouseenter', function(event) {
console.log("floating: mouseenter");
area.off('mouseenter', show);
area.off('mouseleave', hide);
});
floating.on('mouseleave', function(event) {
console.log("floating: mouseleave");
area.on('mouseenter', show);
area.on('mouseleave', hide);
});
My problem is that evertime the mouse enters B, B disappears already. I need to do this with jQuery, not only CSS.
I'm not sure why you have to put the floating div in the jQuery. This is probably how I would achieve something similar to what you want.
http://jsfiddle.net/A2gFb/6/
Just put the hidden float in the HTML,
<div class="area">luptatum zzril
<div class="fixed">Hello World!</div>
</div>
with proper CSS set.
.area {
position: relative;
color: #0F0;
font-weight: bold;
/* you may want to set the width/height here as well*/
}
.fixed {
position: absolute;
top: 20px;
left: 20px;
border: 1px solid black;
padding: 5px;
z-index: 100; /* Thanks Diego for pointing out the typo here */
background-color: red;
display: none;
}
And the jQuery would be as simple as this:
$(".area").mouseenter( function() {
$(".fixed").show();
});
$(".area").mouseleave( function() {
$(".fixed").hide();
});
The major problem you are having is that the mouseleave event for your green text is firing before the mouseenter for your floating div. To fix this I made a variable to track the mouse being in the float and used a setTimeout in the hide() function to check for this variable after 100 ms. You could probably go lower if you were worried about the delay. Here's the fiddle.
At the top of the javascript:
var inFloat = false;
The hide() function becomes:
function hide() {
setTimeout(function(){
if (!inFloat)
floating.hide();
},100);
}
And your floating mouse events become:
floating.on('mouseenter', function(event) {
inFloat = true;
});
floating.on('mouseleave', function(event) {
inFloat = false;
floating.hide();
});
You still have the issue that the floating div has a fixed position that isn't related to the mouse position, so it may be awkward to hover over the link and then move to floating div at times.
just add:
floating.on('mouseenter', show);
floating.on('mouseleave', hide);
it works on jsFiddle.
By the way, I suggest you to not use "show" and "hide" as function name since they already exist in jQuery. showTooltip and hideTooltip can be good names.
I have an image map that I want to show a new div when I hove over the hotspots. It starts with a default listing of text but once I mouseover the hotspots, I want that to change out to the corresponding div's. I'm using the following code and am getting no joy:
$(".office-default").mouseover(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).removeClass("hidden");
});
$(".office-default").mouseout(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).addClass("hidden");
});
Here's the entire code:
http://jsfiddle.net/leadbellydesign/jR6pa/1/
I've done tons of searches and have come up with nothing helpful. I don't want to change images, I just want to show div's.
You still need to fix the space below the divs, but this should work
DEMO
$("area").hover(function () {
$office = $(this).attr("href");
$(".office-default > div").addClass("hidden");
$($office).removeClass("hidden");
}, function(){
$(".office-default > div").addClass("hidden");
$("#office-1").removeClass("hidden");
});
UPDATE
To fix the spacing issue, update your .office-default CSS:
DEMO
.office-default {
background:#444;
padding:5px 15px 0;
width: 80%;
height:150px;
}
I am trying to add a scroll event which will change the background of a div which also acts as the window background (it has 100% width and height). This is as far as I get. I am not so good at jquery. I have seen tutorials with click event listeners. but applying the same concept , like, returning scroll event as false, gets me nowhere. also I saw a tutorial on SO where the person suggest use of array. but I get pretty confused using arrays (mostly due to syntax).
I know about plugins like waypoints.js and skrollr.js which can be used but I need to change around 50-60 (for the illusion of a video being played when scrolled) ... but it wont be feasible.
here is the code im using:-
*
{
border: 2px solid black;
}
#frame
{
background: url('1.jpg') no-repeat;
height: 1000px;
width: 100%;
}
</style>
<script>
$(function(){
for ( i=0; i = $.scrolltop; i++)
{
$("#frame").attr('src', ''+i+'.jpg');
}
});
</script>
<body>
<div id="frame"></div>
</body>
Inside your for loop, you are setting the src attribute of #frame but it is a div not an img.
So, instead of this:
$("#frame").attr('src', ''+i+'.jpg');
Try this:
$("#frame").css('background-image', 'url(' + i + '.jpg)');
To bind a scroll event to a target element with jQuery:
$('#target').scroll(function() {
//do stuff here
});
To bind a scroll event to the window with jQuery:
$(window).scroll(function () {
//do stuff here
});
Here is the documentation for jQuery .scroll().
UPDATE:
If I understand right, here is a working demo on jsFiddle of what you want to achieve.
CSS:
html, body {
min-height: 1200px; /* for testing the scroll bar */
}
div#frame {
display: block;
position: fixed; /* Set this to fixed to lock that element on the position */
width: 300px;
height: 300px;
z-index: -1; /* Keep the bg frame at the bottom of other elements. */
}
Javascript:
$(document).ready(function() {
switchImage();
});
$(window).scroll(function () {
switchImage();
});
//using images from dummyimages.com for demonstration (300px by 300px)
var images = ["http://dummyimage.com/300x300/000000/fff",
"http://dummyimage.com/300x300/ffcc00/000",
"http://dummyimage.com/300x300/ff0000/000",
"http://dummyimage.com/300x300/ff00cc/000",
"http://dummyimage.com/300x300/ccff00/000"
];
//Gets a valid index from the image array using the scroll-y value as a factor.
function switchImage()
{
var sTop = $(window).scrollTop();
var index = sTop > 0 ? $(document).height() / sTop : 0;
index = Math.round(index) % images.length;
//console.log(index);
$("#frame").css('background-image', 'url(' + images[index] + ')');
}
HTML:
<div id="frame"></div>
Further Suggestions:
I suggest you change the background-image of the body, instead of the div. But, if you have to use a div for this; then you better add a resize event-istener to the window and set/update the height of that div with every resize. The reason is; height:100% does not work as expected in any browser.
I've done this before myself and if I were you I wouldn't use the image as a background, instead use a normal "img" tag prepend it to the top of your page use some css to ensure it stays in the back under all of the other elements. This way you could manipulate the size of the image to fit screen width better. I ran into a lot of issues trying to get the background to size correctly.
Html markup:
<body>
<img src="1.jpg" id="img" />
</body>
Script code:
$(function(){
var topPage = 0, count = 0;
$(window).scroll( function() {
topPage = $(document).scrollTop();
if(topPage > 200) {
// function goes here
$('img').attr('src', ++count +'.jpg');
}
});
});
I'm not totally sure if this is what you're trying to do but basically, when the window is scrolled, you assign the value of the distance to the top of the page, then you can run an if statement to see if you are a certain point. After that just simply change run the function you would like to run.
If you want to supply a range you want the image to change from do something like this, so what will happen is this will allow you to run a function only between the specificied range between 200 and 400 which is the distance from the top of the page.
$(function(){
var topPage = 0, count = 0;
$(window).scroll( function() {
topPage = $(document).scrollTop();
if(topPage > 200 && topPage < 400) {
// function goes here
$('#img').attr('src', ++count +'.jpg');
}
});
});