I'm a true newbie when it comes to RaphaelJS so forgive me for some basic questions.
I'm trying to implement a interactive map to my website and heard RaphaelJS was the best option to accomplish this. However it's not currently working in my favor. I found a map on github and right now I'm tinkering with it so A, I have a better understanding of what needs to be done. B, I can write out working code before I dive in.
What I'm trying to accomplish. When a user hover's over a state, a div is shown (in this case the div called box in CSS). I know how to accomplish this in JQUERY.
$("CA").hover(function(){ $(".box").show();
However this is not working in the JS writeup. More then likely because I'm pulling a Raphael object??
Here is the jsfiddle to the map and code.
http://jsfiddle.net/b3vLx8uh/1/
html
<div id="rsr"></div>
<div class="box"></div>
css
#rsr {
width: 615px;
height: 500px;
}
.box {
height: 200px;
width: 200px;
border: 1px solid red;
display: none;
}
(check JSfiddle for JS code)
I'm stuck, trying to figure this out. Any help would be much appreciated!
Thanks.
You don't have to use Raphaël for this, you can just use vanilla JS (or jQuery if you load that library too).
el.mouseover(function () {
document.getElementById('myHoverContents').style.display = 'block'; //show the div
this.toFront();
this.attr({
cursor: 'pointer',
fill: 'black',
stroke: '#fff',
'stroke-width': '2',
});
this.animate({
scale: '1.2'
}, 200);
});
el.mouseout(function () {
document.getElementById('myHoverContents').style.display = 'none'; //hide the div
this.animate({
scale: '1.05'
}, 200);
this.attr({
fill: '#003366'
});
});
http://jsfiddle.net/b3vLx8uh/3/
Related
I need help solving this simple problem. I am trying to get the border width of an element but jQuery is always retrieving '0px', is there a way to get the 'border-width'?
$('div').css({
'border-width': '6px',
'border-style': 'solid'
});
$('div').css({
'color': 'rgb(207, 38, 38)'
});
$('div').css({
'border-style': 'none'
});
console.log($('div').css('borderWidth')); //Here is the problem I need the value to be '6px'
div {
width: 100px;
height: 40px;
background-color: yellow;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>element</div>
Working DEMO
EDIT:
I am using google chrome, can it be a browser bug?
Thanks in advance.
EDIT 2:
I need the jQuery solution and not VanillaJS
You can do it without jQuery.
var element = document.getElementsByTagName('div')[0];
console.log(element.style.borderWidth);
Working example:
https://jsfiddle.net/umkwym05/
Easy question for a lot of you but I'm still learning. I'm trying to get better at toggling between active and inactive states of simple objects.
I have a square div:
<div id = "square"></div>
With the following css to, onclick, make the div extend
#square
{
height: 50px;
width: 60px;
border: 1px solid red;
transition: height 2s ease;
}
#square:active
{
height: 100px;
}
And the following javascript to set up the click event:
var square = document.getElementById("square").addEventListener("click", function()
{
this.classList.toggle("active");
}, false);
But nothing seems to happen when I click. I'm including JS in this because I'm also new to learning JS as well, and I'm trying to get used to simple logic principles.
Here is the fiddle: https://jsfiddle.net/theodore_steiner/fsk6y50k/4/
Any help would be wonderful
The way that you used the class selector is wrong,
#square.active{
height: 100px;
}
It should precede with a dot not a colon
DEMO
I'm trying to add an effect on a div, where once you hover over the block the block will move up. I'm using Jquery transitions as I'm aware that anything under ie10 doesnt really support css transitions. At the moment I can get it to move but there is no effect on the movement (just using css). I'm not sure how I would start to add the jquery transition.
At the moment I got it so that once you hover over the block it adds a class.
$(document).ready(function () {
$(".container").hover(function () {
$(this).toggleClass("animated-effect");
});
});
Heres my jsfiddle, I can't manage to get the code to work something up with my js:
http://jsfiddle.net/4bgj4959/
You are looking for the animate method. Note that hover method takes two parameters, the second parameter is for onmouseout (when you are done hovering).
$(document).ready(function() {
$(".container").hover(function() {
$(this).animate({
top: '20px'
})
}, function() {
$(this).animate({
top: '0px'
})
});
});
.container {
width: 500px;
height: 100px;
border: 1px solid #00c;
position: relative;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>
you code is working you didn't include jquery see updated fiddle
demo
Help! :)
So,
I have been trying to add a slide-in cookiebox with jquery,
it works perfectly on jsfiddle,
but i can't make it work on local,
it acts as if the library wasn't loaded and it just shows the box right away and the buttons dont do anything.
Fiddle: http://jsfiddle.net/u2zz4/1/
How i load the scripts in the header(already checked that both paths are working correctly)
<script type="text/javascript" src="js/jquery.min2-0.js"></script>
<script type="text/javascript" src="js/cookiebox.js"></script>
The used Jquery lib is from https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js
(added the 2-0 behind it to remember its version, tested without 2-0 and it acted the same so i assume that aint the issue)
Cookiebox.js
var slideWidth = 250;
var slides = $('#aboutBox').css('width', slideWidth);
slides.css({
width: slideWidth,
height: slides.attr('scrollHeight')
});
var wrapper = slides.wrap('<div>').parent().css({
width: 1,
height: slides.height(),
overflow: 'hidden',
display: 'none'
});
$('#show').click(function() {
if(wrapper.is(':visible'))
return;
wrapper.show().animate({
width: '+=' + slideWidth
}, 'slow');
});
$('#hide').click(function() {
wrapper.animate({
width: 1
}, 'slow', function() {
wrapper.hide();
});
});
HTML (added right under the body tag)
<div id="cookiebox">
Cookies
<div id="aboutbox">
<p>We have placed cookies on your computer to make sure this website functions properly.</p>
<p>You can change your cookie settings at any time in your browser settings.</p>
<p>We'll assume you're OK to continue.</p>
<h2>OK</h2>
</div>
</div>
CSS
#cookiebox {
margin-top:25px;
float:left;
}
#aboutBox {
padding: 0px 15px;
max-width:200px;
float:left;
background: rgba( 200, 200, 200, 0.8);
border:1px solid rgb(0,0,0);
}
#aboutBox h1{
margin-bottom: 15px;
}
#aboutBox p {
margin: 15px 0;
}
#aboutBox h2 {
padding: 10px 0;
}
FYI, i have no idea who made the original jquery code, but it wasn't me.
I have already looked around for over one and a half hour for a fix with no luck.
PS, if anyone knows how to make the bottom border show aswell i'd be very happy :)
Could the use of ajax for another item be the issue?
Hope someone can see the issue and help me out :)
You just need to put your code inside a doc.ready function, like this:
$(document).ready(function(){
// your code here
});
That is basically what the onLoad option in your jsFiddle is doing for you.
You could also do this:
$(window).load(function(){
// your code here
});
but .ready will be faster and work fine
You trying to register to events before DOM is ready
You should wrap your code in $(documnet).ready
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.