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/
Related
I have been working on my website and I'm having trouble with setting the css of my background.
This is the code that i have right now. Im trying to use only jquery and not a css file.
$('<div id="klanbot_config">').css({
position: "absolute",
left: 792,
top: -7,
width: 199,
height: 545,
border: "3px gold solid",
color: "white",
"font-size": "10px",
}).appendTo("#centerbox2");
I tried doing background: url('http://i.imgur.com/Uc3QUrs.jpg'), but that did not work.
I tried doing background: url('http://i.imgur.com/Uc3QUrs.jpg'), but that did not work.
You'd need to put the url('...') part in double-quotes:
background: "url('http://i.imgur.com/Uc3QUrs.jpg')"
Otherwise you're trying to call a function called url() and set the background to its return value.
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/
I found a jsfiddle that did something similar to what I wanted to do. The modified version is located here: http://jsfiddle.net/7m7uK/479/ and it works on the jsfiddle. I copied the code to my site, changed the id's and now, it doesn't appear to be working. Below is the code located on my website. I am using jQuery 1.9.1 and jQuery UI 1.10.3 on my site. Any suggestions as to why this isn't working?
Javascript
<script type="text/javascript">
$( document ).ready(function() {
$('#footer_logo').hover(function(){
if ($('#powered_by').is(':hidden')) {
$('#powered_by').show('slide',{direction:'right'},1000);
} else {
$('#powered_by').hide('slide',{direction:'right'},1000);
}
});
});
</script>
HTML
<img src="img.png" width="63" height="25" id="footer_logo"/>
<div id="powered_by" width="100px"/>Powered By: </div>
CSS
#footer_logo {
color: #000;
cursor:pointer;
display:block;
position: absolute;
bottom: 0; right: 0;
z-index: 100;
}
#powered_by {
width: 200px;
height: 20px;
display: none;
position: absolute;
right: 0;
bottom: 0;
background: #ff0000;
z-index: 99;
}
I tried your code on jsfiddle and its working well. If the issue still persist check this SO post: JQuery UI show/slide not working correctly, maybe their solution can help.
You want to show #powered_by when you hover-in, then hide it when the you hover-out, right?
I looked into your code and it's not how you properly want it to behave. For example if you hover-in, the element slides, but when you hover-out then hover-in again without letting it finish hiding, the hovering execution will be reversed.
It will be more efficient if you do it this way:
$(document).ready(function() {
$('#footer_logo').hover(function(){
//hover-in
$('#powered_by').show('slide',{direction:'right'},1000);
},function(){
//hover-out
$('#powered_by').hide('slide',{direction:'right'},1000);
});
});
See this jsfiddle.
Or with pure jQuery: jsfiddle
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
This is the page I'm trying to do: Gallery
And what I'm trying to do is when you hover over the thumbnails, the div in front of the main image would fade in and show the title attribute for the image. Hover over the left and topmost image and the title should display on the watch.
I tried following the instructions here but for the second image the title didn't swap and it only showed the first one.
Also I'm a little bit confused where to add the fadein fadeout for the div...
Sorry for the noobish question, I'm still learning this.
Thank you.
I think the title is getting swapped out as it should, the problem is that the new value is always exactly the same as the old value, so it only looks like nothing is happening.
The problem is here:
var titleString = $("#thumb").attr("title");
$("#title").html(titleString);
When you're telling it to switch the text, you're always grabbing the new text from the exact same element: the <a> element that has an id of thumb. To fix it, change that first line to something like the following:
var titleString = $(this).find('a').attr("title");
This assumes that you'll be storing the titles you want to use on the appropriate <a> elements. I add that last part because as it turns out, none of the other anchors on that page have a title, so you'll have to go through and add them if this is the way you decide to go.
Change the following:
1.
#main_view{
background: #FFFFFF;
left: 45%;
margin-top: 128px;
padding: 0 0;
position: absolute;
}
title{
background-color: #C7C3A5;
color: #000000;
font-family: Museo,Arial,Helvetica,sans-serif;
font-size: 12px;
height: 150px;
left: 44%;
opacity: 0.8;
padding: 50px;
position: absolute;
top: 22%;
width: 100px;
z-index: 555;
}
Remove the inline style for the div with title as ID.
in the hover function of ($("ul.thumb li").hover) add the below line
after - $(this).css({'z-index' : '10'});
var titleString = $(chis).children("a").attr("title");
$("#title").html(titleString);
The following code will fix the title issue (as others pointed out) and accomplishes a fade technique. Also probably do not want to a use a percent from top value on the #title element.
$(document).ready(function(){
//Larger thumbnail preview
var $title = $('#title');
$("ul.thumb li, ul.thumb2 li").hover(
function() {
var $this = $(this);
$this.css({'z-index' : '10'});
$this.find('img').addClass("hover").stop()
.animate({
marginTop: '-50px',
marginLeft: '-50px',
top: '50%',
left: '50%',
width: '100px',
height: '100px',
padding: '0px'
}, 200);
$title.stop().animate({opacity:0.4}, 200, function(){
$title.html($this.children('a').attr('title')).animate({opacity:0.8}, 500);
});
},
function() {
$this = $(this);
$this.css({'z-index' : '0'});
$this.find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '75px',
height: '75px',
padding: '0px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a, ul.thumb2 li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
http://jfcoder.com/test/hoverfade.html