Could anyone give me a hint how to solve this?
Fiddle: http://jsfiddle.net/9Br6h/
Have a look at the part left under... with the flag. On the area the mouseover is visible.. but it disappears on the flag - that is the thing I want to remove. It should stay visible.
But please keep in mind that this is a very simple example. In real I've tons of areas and flags. ;o)
jQuery(document).ready(function($) {
// add div for showing dates
$('body').append('<div id="mo_termin"></div>');
// show div on mouseover
$('area').mouseover(function(event) {
var left = event.pageX + 30;
var top = event.pageY + 5;
display = '<div class="views-field-field-body">Keine Termine</div>';
$('#mo_termin').css({top: top,left: left}).html(display).show();
});
$('area').mouseout(function() {
$('#mo_termin').html('').hide();
});
});
you can use the css property pointer-events: none;as well.
#karte .flag {
pointer-events: none; /*Added line*/
position: absolute;
background: url('http://static.netzwelt.de/farcade/images/capturetheflag1.gif') no-repeat;
width: 50px;
height: 50px;
top: 200px;
left: 50px;
}
Here is the Demo http://jsfiddle.net/9Br6h/2/.
Assuming that the flag completely covers the 'hover' area underneath it, you can modify your code so that the line that sets the mouseover event reads as follows:
// show div on mouseover
$('area, .flag').mouseover(function(event) {
Here is an example: http://jsfiddle.net/9Br6h/1/
Related
I am making a map area + svg interactive map. The svg part appears when I hover over big region like EU. But everytime I hover over text or border it disappear. Does anybody know how to solve this?
CSS:
.eu {
position: absolute;
top: -80px;
left: -80px;
display: none;
width: 1200px;
height: 1200px;
z-index: 300;
}
.visible {
display: block;
pointer-events: all;
}
jQuery:
$('#eumap').mouseover(function () {
$('.eu').addClass('visible');
});
$('.eu').mouseout(function () {
$('.eu').removeClass('visible');
});
$('#apmap').mouseover(function () {
$('.ap').addClass('visible');
});
$('.ap').mouseout(function () {
$('.ap').removeClass('visible');
});
There is too much svg to copy, so here is a little DEMO
You can add to your CSS...
text {
pointer-events: none;
}
See https://jsfiddle.net/g04qhcw9/
The svg part appears when I hover over big region like EU. But everytime I hover over text or border it disappear.
That’s because you are using mouseover/mouseout – they fire again each time you move the mouse over child elements. (See Jquery mouseenter() vs mouseover() for details.)
Simply use mouseenter/mouseleave instead:
$('#eumap').mouseenter(function () {
$('.eu').addClass('visible');
});
$('.eu').mouseleave(function () {
$('.eu').removeClass('visible');
});
https://jsfiddle.net/g04qhcw9/1/
I have two navigation in my website. Both the navigation bars are fixed. Basically when I scroll up, I would like to use the animate() and show both the navigation bar in the page. How do I get the scroll up event and use that to animate the divs, like the Google search widget. I would really appreciate your help. Thank you.
html:
<div id="navbar_header">
some link
</div>
<div id="main_content">
<p>Some content...</p>
</div>
<div id="navbar_footer">
some link
</div>
css:
#navbar_header {
background: #22313F;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 40px;
}
#navbar_footer {
background: #22313F;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
}
Normally using the window for the scroll event should be sufficient, as it's big enough and the one element, that's being scrolled. If jQuery is loaded correctly, you could try something like this:
$(document).ready(function(){
var lastTopPosition = 0;
$(window).scroll(function(){
var topPosition = $(window).scrollTop();
if (topPosition > lastTopPosition ){
$("#navbar_header").stop(true).animate({'top':'-40px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'-40px'}, 200);
} else {
$("#navbar_header").stop(true).animate({'top':'0px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'0px'}, 200);
}
lastTopPosition = topPosition;
}
});
This piece of code gets the current position from the top everytime you scroll. If the distance gets bigger (scroll down) the two bars fadeout. If it's getting smaller (scroll up) it fades in. You can replace the FadeOut/In methods here with you animate() call too. A check, if the elements are displayed would be good here too, but I guess you can figure that one out ;-)
If I understood this right, something along the lines of:
$("#main_content").scroll(function(){
$('#navbar_header').show(300);
$('#navbar_footer').show(300);
});
Where show(300) will basically do a 300ms showing animation of your divs.
I want to make a half shown div in a page, like a footer. When I click it I want it to slide up. The div will contain information on it.
I achieved this somehow, but my problem is that the div does not get really hidden it just changes the position.
You can find the demo here: http://jsfiddle.net/8ZFMJ/394/
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": -430});
}
else
{
clicked=true;
$(".two").css({"bottom": "-200px"});
}
});
I had a similar problem a while ago, in fact I think it was my first stackoverflow question. Unfortunately it got poorly received.
Anyway, the problem is currently that you are just changing the position of the div - that's what .bottom does. I think what you want to do is change the height, see this JSFiddle in which I managed to switch the div between states (no animation yet).
It makes simple use of css's overflow-y: hidden; to hide the div's contents when it is small, and all the JS does is toggle between heights:
if(clicked)
{
$(".two").css("height", 10);
}
else
{
$(".two").css("height", 250);
}
clicked = !clicked;
clicked = !clicked just flips the boolean state of the variable.
Now, to add the animation, we can use jQuery's .animate and produce this beautiful Fiddle
Basically, all we had to do in between is use animate instead of css. Simple, really.
TL;DR
final JSFiddle
.two must be absolute positioned inside .container that must be relative positioned. Then you just change the bottom with a negative value and that will hide the footer.
CSS:
html, body { height: 100%; }
.container {
position: relative;
height: 100%;
overflow: hidden;
}
.two {
position: absolute;
background-color: yellow;
width: 100%;
height:250px;
bottom: -200px;
transition: bottom 1s;
}
jQuery:
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": "-200px"});
}
else
{
clicked=true;
$(".two").css({"bottom": 0});
}
});
http://jsfiddle.net/8ZFMJ/398/
I'm trying to build a scroller using jQuery.
The items within the scroller are display:inline-block and there can be multiple items visible in the x and y planes at any given time.
Can anyone help with my scroller?
Here is a jsfiddle with what I currently have. The animated sliding isnt working. I'm trying to make all of the contents slide together outside of the wrapper while the next page of items slide in.
http://jsfiddle.net/GR9ZR/
if (~~ (counter / totalVisible) == currentPage) {
item.show();
item.animate({
"left": -(item.position().left)
});
} else {
item.animate({
"left": -(item.position().left)
});
item.hide();
}
If you want to animate the position, in your CSS you must give the element you are trying to animate a property of position: relative;.
Consider a simple example, in which I want to animate a block to move right, when I click on the document page.
Codepen sketch: http://cdpn.io/vdCth
HTML
<div class='item'></div>
CSS
.item {
background: #ccc;
display: inline-block;
height: 50px;
position: relative;
width: 50px;
}
jQuery
$('html').on('click', function(){
$('.item').animate({
left: "+=50"
}, 200, function(){
});
});
Now remove the position: relative; from your CSS, and you will see the animation no longer occurs, as demonstrated in this fork: http://cdpn.io/LcakK
Hope that helps.
I just wrote a really simple jQuery plugin.. sort of, that I want some help with.
(function($){
$.fn.highlight = function(words){
return this.each(function(){
//Get text from within
var text = $(this).html();
//Replace with new text
$(this).html(text.replace(words,"<i class='highlight'></i><span class='word'>"+"$1"+"</span>"));
//Get the all the highlight classes within this
var highlights = $(this).find(".highlight");
//Go through all
return highlights.each(function(){
var $this = $(this);
//Get to the next word
var wordDiv = $this.nextAll(".word").eq(0);
//Set highlight span same height as word
$this.height(wordDiv.height()+2);
//Set highlight span same width +4 then positioning
var newWidth = wordDiv.width()+4;
wordDiv.replaceWith(function(){
return $(this).contents();
});
$this.width(newWidth+2).css({
left:(newWidth)+"px",
marginLeft: "-"+(newWidth)+"px"
});
$this.delay(Math.ceil(Math.random()*30)*200+2000).fadeOut("4000",function(){
$this.remove();
});
});
});
}
})(jQuery);
$(document).ready(function(){
$("div").highlight(/(simple|wrote|knowledge)/g);
});
and the CSS:
.highlight{
background: #FBB829;
display: inline-block;
position: relative;
z-index: -1;
top: 5px;
-moz-border-radius: 4px;
border-radius: 4px;
}
and is it better a better practice to put that CSS in the jQuery plugin?
Here's a jsFiddle:
http://jsfiddle.net/aVCtA/11/
and you see my text moves when the last .highlight span disappears. Why's that? Thought relative and z-index: -1 would fix that?
Should I instead use position absolute and calculate the positioning?
Made some changes to your code, check the test on jsfiddle
Changelog:
jQuery:
Removed the .css() from the following line,
$this.width(newWidth + 2);
CSS:
Changed the styling to,
.highlight{
background: #FBB829;
display: inline-block;
position: absolute;
z-index: -1;
top: 0px;
margin-left: -2px;
-moz-border-radius: 4px;
border-radius: 4px;
}
The simpelst solution would be to not remove the highlight element after fade out. You can achieve this by changing your fade to animating opacity:
$this.delay(Math.ceil(Math.random()*30)*200+2000).animate({opacity: 0},4000);
This is not the most beautiful solution, but for your purposes, I think it is OK.
Here is the another solution:
http://jsfiddle.net/aVCtA/20/
Removed CSS:
top:5px
JS changes:
Removed the line for height setting
Added a blank space to set height as of other chars.
remove extra width so it does not move on hide.