jquery .css background image - javascript

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.

Related

When the cursor is moved over the face of a person, the name of the person is displayed

`I have a photo with several people on a website (made with php) and would like to obtain the following: when the cursor is moved over the face of a person, the name of the person is displayed at the bottom of the photo. After a lot of search, I found some code on another website that was close to what I wanted and after I changed a few things I got it to do (mostly) what I want but I really do not understand much of it and I am convinced there must be a simpler way to do it. The code is copied below.
<style>
.imageMapContainer{
position: relative;
}
.imageMapZone{
position: absolute;
}
.namezone{
Font-size: 1.4em;
min-height: 1.6em;
}</style>
<script>
var co=
co+='<div class="imageMapContainer">';
co+='<img width="700" src ="/img/equipe.jpg"/></div>';
co+= '<div class="namezone"></div>';
data = {
Clara: {
left: 284,
top: 38,
width: 121,
height: 191
},
Sylvie: {
left: 412,
top: 9,
width: 121,
height: 191
},
Steeve: {
left: 498,
top: 79,
width: 208,
height: 191
},
Jacques: {
left: 56,
top: 179,
width: 157,
height: 191
},
Julie: {
left: 213,
top: 178,
width: 106,
height: 178
},
Amélie: {
left: 300,
top: 319,
width: 139,
height: 211
},
Robert: {
left: 456,
top: 282,
width: 182,
height: 229
}
};
let names = Object.keys(data);
names.forEach((n) => {
let zone = $("<div>");
zone
.addClass("imageMapZone")
.css(data[n])
.hover(
function () {
$(".namezone").text(n);
},
function () {
$(".namezone").text("");
}
);
$(".imageMapContainer").append(zone);
});
</script>
why does this code not work`
Without any JavaScript
An image map is an html element that allows you to divide an image into multiple areas. Areas can be rectangles, circles, or complex polygon shapes. Each area has its own hover and touch events and may also be used as a link to another page.
Creating area coordinates manually is a cumbersome task and prone to mistakes. Fortunately, there are many free online tools that allow you to upload an image and create coordinates. For example, imagemap.org and image-map.net.
This example uses an image with multiple people and each person has been mapped to an area. We can then add some css to make each person's name appear when the mouse hovers over their face. The key parts are adding the pseudo-element :before and then setting the text to display using content: attr(title)
area:hover:before {
content: attr(title);
position: absolute;
top: 75%;
left: 0;
width: 100%;
display: block;
text-align: center;
font-size: 2rem;
background-color: rgba(0,0,0,0.3);
color: white;
}
Comment
Image maps should be used sparingly as they are time consuming to maintain. For example, a new image and map would need to be created each time there is a staff change.
Snippet
Open the snippet to view the complete code. The snippet places the text at the top so that it is visible without scrolling. However, the position can be set anywhere within the image by adjusting the css.
body {
font-family: sans-serif;
}
.staff {
position: relative;
display: inline-block;
}
area:hover:before {
content: attr(title);
position: absolute;
top: 5%;
left: 0;
width: 100%;
display: block;
text-align: center;
font-size: 2rem;
background-color: rgba(0,0,0,0.3);
color: white;
}
<div class="staff">
<img src="https://i.postimg.cc/MpkPRfrf/people.jpg" usemap="#image-map">
<map name="image-map">
<area title="Clara" coords="105,137,44" shape="circle">
<area title="Jacques" coords="85,3,154,87" shape="rect">
<area title="Robert" coords="301,110,38" shape="circle">
<area title="Julie"
coords="245,100,205,113,183,170,270,182,261,119" shape="poly">
<area title="Amélie"
coords="214,11,186,52,209,99,241,90,258,97,276,62,271,21" shape="poly">
</map>
</div>
It's hard to say definitively without knowing exactly what errors you're getting. However, if you posted the code exactly as it's written, here's what stands out:
var co=
This line is invalid. What does co equal?
Maybe initialize it to an empty string: var co = "";
Chraibi Mariam: {
This line is invalid. Object property names cannot have spaces without enclosing them in quotes.
Use this instead: "Chraibi Mariam": {

Get 'border-width' with jQuery when 'border-style' is 'none'

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/

Change multiple CSS attributes at once

I was wondering if it is possible to change multiple CSS attributes of an element with one line?
Right now if I have an element and try to change some CSS attributes, then I have to write one line of code for each css attribute. For example:
$("div#start").click(function(){
$("p#message").css("background-color", "red");
$("p#message").css("color", "white");
$("p#message").css("padding", "5px");
$("p#message").css("width", "120px");
$("p#message").css("text-align", "center");
});
div#start {
background-color: #D8D8D8;
border: 1px solid black;
width: 50px;
text-align: center;
}
div#start:hover {
cursor: pointer;
background-color: #A1A1A1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="message">Hi Folks</p>
<div id="start">Change CSS</div>
As you can see in my example above, I am writing one line for each CSS attribute. Is is possible to accomplish this with a single command? For example something like this:
$("p#message").css(
"background-color": "red",
"color": "white",
"padding": "5px",
"width": "120px",
"text-align": "center"
);
Pass the object to the css(). The code is missing { and }.
$("p#message").css({
"background-color": "red",
"color": "white",
"padding": "5px",
"width": "120px",
"text-align": "center"
});
As the styles are fixed, i'll suggest to make a CSS class and add the class.
$("p#message").addClass('myClass');
CSS:
.myClass {
background: red;
color: white;
padding: 5px;
width: 120px;
text-align: center
}
Use an object as the argument for setting multiple CSS properties.
$("p#message").css({
"background-color":"red",
"color":"white",
"padding":"5px",
"width":"120px",
"text-align":"center"
});
you can write in one line like that :
$("p#message").css("background-color","red").css("color","white").css("padding","5px").css("width","120px").css("text-align","center");
}

jQuery UI Dialog - content from iframe

I know a lot of variation of this question are available but none of them is working for what I have.
Currently I have div exposed on a page and I use following jQuery code create a dialog box control and style it:
hoverApplet = $("#s_" + actAppletPH + "_div");
hoverApplet.hide();
hoverApplet.dialog({ height: 'auto',
width: 'auto',
modal: true,
autoOpen:false,
title:'Hello World',
overlay: { opacity: 0.5, background: 'black'}
}).dialog("widget")
.find(".ui-dialog-titlebar").css({
"float": "right",
border: 0,
padding: 0
})
.find(".ui-dialog-title").css({
display: "none"
}).end()
.find(".ui-dialog-titlebar-close").css({
top: 0,
right: 0,
margin: 0,
"z-index": 999
});
Then I use following code to open this dialog on button click.
hoverApplet.dialog("open").dialog('option', 'position',[event.clientX,event.clientY]);
Now this below URL is suppose to give me same DIV at run time
http://localhost:8080/start.swe?SWECmd=GetApplet&SWEApplet=Activity+Form+Applet+-+SA&IsPortlet=1&SWESM=Edit&KeepAlive=1
I need to show the same dialog now that should get its content from iframe where source is above mentioned URL.
I don't know what change should I make to work properly.
Thanks

Display title attribute of an image inside a DIV

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

Categories

Resources