Say I have an example div called test-test which is some pixels wide and some pixels high, and I wish to add its background color using jQuery. Having thought this was very easy in Rails, I'm surprised to see it doesn't work.
My html:
...
<div class="test-test"></div>
...
My test.css.scss:
.test-test {
width: 300px;
height: 300px;
}
My test.js file:
$(".test-test").css("background-color","yellow");
Because a "hello world" test works I know my jquery and asset pipeline is working correctly, it's just changing css attributes that doesn't seem to work. Is there any workaround to this or is it specific to what you want to do in each case? This is just an example so this is not what I really want to accomplish, just so you know.
When setting background-color in javascript the property should be named.
"backgroundColor"
so
$(".test-test").css("backgroundColor","yellow");
It's also case sensitive.
Related
My requirement is like I need to display the tooltip only at left side, I don't want it to be get displayed at right side. What are the css changes I need to do to achieve this. Please help me on this issue.
Note : I don't want to use any kind of Plugin, to do changes only in html (title)tooltip.
Html
<input type='button' class='sam' id='btnSubmit' value ='submit' title='Click here to submit'/>
CSS
.sam{
width:200px;
margin-left:120px;
margin-top:25px;
}
.sam[title] {
position:fixed;
top:100px;
left:50px;
}
Here I have attached the link that i have tried
JsFiddle Link
This is not possible without a plugin or custom code. You will have to implement a custom tooltip using HTML/CSS and dynamically show it on hover.
By the way: Your CSS-Selector .sam[title] matches every element which has the class "sam" and any title, to select all element with the title "hello" you would have to use this selector: .sam[title=hello]
As Fabio said, it is not possible to change the position of a tooltip. However, I can recommend making your own simply implementing basic JQuery and CSS.
First, make your tooltip in CSS. For example:
#tooltipbox {
min-height: 300px;
max-height: 500px;
width: 500px;
background-color:yellow;
opacity: .6
color: red;
position: fixed;
top: 10px;
right: 100px;
}
After that, you'll need to put it in HTML using a DIV.
<div id="tooltipbox">yourcontent</div>
Next you'll need to make a small jquery script.
$(document).ready(function(){
function toolTipper(myToolTip, objectHover, fadeInTime,fadeOutTime){
$(myToolTip).hide();
$(objectHover).mouseenter(function(){$(myToolTip).show(fadeInTime)};
$(onjectHover).mouseleave(function(){$(myToolTip).hide(fadeOutTime)};
}
toolTipper('#tooltipbox','.objectyouhoverover', 1000, 500)
}
Let me break it down for you. You made a div that has your tool tip text positioned where you want, styled however you want. Then in a script, we hide it so that when they hover over your object, that particular tooltip is then shown. When you leave that object, it disappears as should a tooltip should.
The code is rather simple; however to understand what I did, you'll need to understand basic Javascript and Jquery. I made a function with the parameters you'll need to enter for every tool tip you made. Lets say you made a styled word that needs a definition and therefore requires a tooltip. You first attach a class or ID to it which doesn't need to be defined in your CSS document. You just need it there for the script to find it.
In this sentence, chicken is bold.
Chicken is the object with a unique class of ".chickentooloject".
Next you make a unique tool tip div.
<div id="tooltipbox" class="tooltipbox1"> A chicken is a bird. </div>.
Why did we do this? So we also have a unique tool tip to be found by the script. The rest is up to the script.
toolTipper('.tooltipbox1', '.chickentoolobject', 500, 1000);
The code is untested, but it is simple jquery, so I am positive it'll work. If you're confused, leave a comment and I will help you more.
I have a js library on my website which is creating popups for me.
Im trying to style the popups but nothing is working.
the html output is
<div class="lpopup zoom" style="opacity: 1; transform: translate(435px, 200px); bottom: -6px; left: -54px;">
All that I have been trying to is change the bottom and left position.
When I inspect with fire bug the css is
element.style {
bottom: -6px;
left: -54px;
opacity: 1;
transform: translate(435px, 200px);
}
I have tried manipulating the css by doing
.lpopup, .lpopup zoom, .lpopup.style, lpopup element.style {
bottom: 30px;
}
But none of them are working, I've tried as many variations as I can think of.
I have also tried with js
$(".lpopup zoom").css("bottom", "30px");
and other variations
nothing happening though
Im really struggling just trying to change the element style of a popup.
Thanks for any help
The content in the style attribute is more specific then any rule-set, so it will always come last in the cascade and be applied.
The clean solution is: Move the initial CSS out of the style attribute and into the stylesheet. Then write your rules while paying attention to specificity.
The hacky solution is: Use the !important flag
The really nasty solution is: Use JavaScript to change the style attribute (which is what you are trying, but you have the selector wrong).
.lpopup zoom will match: <anything class="lpopup"><zoom> This element </zoom></anything>
You want .lpopup.zoom which will match an element that is members of both classes.
You need .lolup.zoom { css here }.
Sorry, I didn't fully comprehend the question like Mr. Alien did. Yes, inline styles will always override external styles, so you either need to use !important (which I'd avoid), or remove the inline style if possible.
writing style in your own page wont works....
You just open your popup js library and change the style which are added throught the script...
It is very easy way to customize your popup design in js file....
.lpopup{//css here}
.zoom{//css here} should exist in your css file.
Hope someone can help me, I have an index.php setup and in the head I have a sideshow script set and this runs on all pages, and then in the portfolio.html (loads inside the index.php file when that page is called up) I have a gallery script.
My problem is when I click on a gallery image it opens up but behind this "header gallery" ...
image of what the problem is:
#pjumble is right about wanting to change the z-index. The problem you're having is probably related to the CSS Selectors priority.
When defining a CSS format you can write the selector statement in 3 basic ways and mix and match these as you please for advance selector definitions. Here are the 3 basic ways,
1.
Class's Looks something like this.
.class1
{
color:blue;
font-size: 24px;
background-color:red;
}
this is the Lowest priority
2.
ID's Looks something like this.
#id1
{
color:yellow;
font-size: 12px;
}
This is medium priority
3.
Tag's look something like this.
Div
{
color:green;
}
This one gets highest priority. This always seems counter intuitive to me. If I define and ID level format you think that would have priority over the one for that Tag name but it doesn't.
Here's and example of what I'm talking about.
So for an element like this
<Div id="id1" class="class1">
Text
</div>
The "Text" here is going to have a red background because "class1" is the only definition with a background-color.
But both "id1" and "class1" have definitions for font-size so the class definition is ignored and the id one is used making "Text" 12px.
Then all three definitions have "color" defined and the winner is "Div" making "Text" green.
so when you write your set up like this,
#lightbox a z-index of 100, .gallerylayer has a z-index of 1000
you have the right idea but your definition for ".gallerylayer" is a class and if the tag or id of that section of code has z-index defined, your class definition of z-index = 1000; will be ignored.
Just to make sure the definitions not ignored I'd give the tag that has class='gallerylayer' in it and add a id='somethingUnique' attribute and use that to define the z-index rule.
But the best way to check this is to use Firefox with the Firebug add-on and use the element selecting tool to see what styles are being apply and which are begin ignored on your page.
For more on selectors try looking here it should give you all the documentation you'll need.
hope this helps.
Is it possible to overwrite CSS file permanently using JavaScript / jQuery?
I want to overwrite just 1 or 2 lines though.
Let's say I have this CSS file:
div#box { width:100px; height:100px; }
then, if I apply this kind of JavaScript:
var sheet = document.createElement('style')
sheet.innerHTML = "div#box {width:200px;}";
document.body.appendChild(sheet);
the div only resized as long as the JavaScript is called (dynamically changed by JavaScript)
I want the CSS file would be overwritten like this
div#box {width:100px; height:100px; }
div#box {width:200px; } //CSS added
or more nicely,
div#box {width:200px; height:100px; } //CSS overwritten
What should I do?
Thx :D
To elaborate on what has been said (And mmmshuddup and calchen are correct):
Javascript alters files on the client side until the document is closed. The changes that scripts make are entirely temporary.
However, javascript could technically use ajax to access a perl/ruby/php/python/whatever script hanging out on the server which would take arguments (What the class would be, which element it would be added to) and apply the classes permanently to your documents, or otherwise edit your style documents.
Another solution would be creating and adding classes and then saving those classes as preferences for a user; you'd create a function which looked through an associative array of element id's and their classes that need to be added upon the page being loaded. I suppose you'd use either cookies or preferably a database for this, if you have users at all. I'm just throwing hypotheticals out there.
I'm pretty sure the server-side editing idea is your best option. It would probably be pretty safe to use regex to locate id's and replace them with the new style.
edit: Upon thinking about it, I realized your style finding and replacing function would have to be pretty sophisticated if you ever wanted to do replacements of styles that involved a lot of selectors. There is probably a more elegant solution, but it's not coming to me. I think this would be a serious headache eventually.
CSS cannot be permanently overwritten using only jQuery/JavaScript.
Try below
$(document).ready (function() {
$('div#box').css( {"border": "1px solid #7F9DB9", "width": "200px", "height": "22px"} );
});
Please do needful changes.
Use something like PHP. Otherwise you can modify the css with jQuery.
// for div#box {width:200px; height:100px; }
$('div#box').css({ width: '200px', height: '100px' });
JS can't do this alone, you need the use of a server side language such as PHP, i can make one for you in PHP if you'd like.
If you want to do it on a per page basis you can use a style tag with contenteditable attribute see: http://devgrow.com/html5-contenteditable-attribute/
I have my current code:
#content img[src="/img/test.gif"] {
background-image:url(dark-img.png) !important;
}
From my understanding !important; overrides existing values?
Why isn't this overriding the current HTML image in place there? The background shows up, behind the HTML image.
I want it in front of the HTML image, is this possible using CSS or JS?
Edit: For what its worth, im making a userscript that will modify the existing style of the site. So I do not have direct access to the HTML image.
You don't need javascript for image replacement! As long as you can identify the image by a CSS selector, you can use CSS to do the trick.
See the solution here
http://www.audenaerde.org/csstricks.html#imagereplacecss
Here is the code using only css:
<img src="tiger.jpg"
style="padding: 150px 200px 0px 0px;
background: url('butterfly.jpg');
background-size:auto;
width:0px;
height: 0px;">
sets the image size to 0x0,
adds a border of the desired size (150x200), and
uses your image as a background-image to fill.
If you upvote this answer, give #RobAu's answer an upvote, too.
The replacement of an image in CSS can be done in several ways.
Each of them has some drawbacks (like semantics, seo, browsercompatibility,...)
On this link 9 (nine!) different techniques are discussed in a very good way :
http://css-tricks.com/css-image-replacement/
If you are interested in css in general : the whole site is worth a look.
The background-image property, when applied to an image, refers to (drum roll ... ) the background-image of the image. It will always be behind the image.
If you want the image to appear in front of the image, you are going to have to use two images, or another container with a background-image that covers the first image.
BTW, it is bad practice to rely on !important for overriding. It can also be ineffective since 1) it can't override declarations in an element's style attribute, and 2) it only works if it can work based on the markup and the current CSS. In your case, all the huffing and puffing and !important declarations won't make an image do something it can't do.
I answered a similar question in another SO page..
https://robau.wordpress.com/2012/04/20/override-image-src-in-css/
<img src="linkToImage.jpg" class="egg">
.egg {
width: 100%;
height: 0;
padding: 0 0 200px 0;
background-image: url(linkToImage.jpg);
background-size: cover;
}
So effectively hiding the image and padding down the background. Oh what a hack but if you want an with alt text and a background that can scale without using Javascript?
Use your 'userscript' to change 'src' attribute value.
If there is an ID there, you can do this:
document.getElementById('TheImgId').src = 'yournewimagesrc';
If there is no ID:
var imgElements = document.getElementsByTagName('img');
Do iteration of imgElements. When its src value is match with your criteria, change the value with your own, do break.
Update:
Javascript:
<script language="javascript">
function ChangeImageSrc(oldSrc, newSrc) {
var imgElements = document.getElementsByTagName('img');
for (i = 0; i < imgElements.length; i++){
if (imgElements[i].src == oldSrc){
imgElements[i].src = newSrc;
break;
}
}
}
</script>
HTML:
<img src="http://i.stack.imgur.com/eu757.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<script language="javascript">
setTimeout("ChangeImageSrc('http://i.stack.imgur.com/eu757.png', 'http://i.stack.imgur.com/IPB9t.png')", 5000);
</script>
Preview:
The first image will be replaced after 5 secs. Try Live Demo.
you'll have to place the first image as a background-image too. Then you can override it. You could do in a "standard" css file for the site, and every user gets its own, where he can override what he wants.
i agree with all the answers here, just thought id point out that 'browsers' such as IE won't like the img[src="/img/test.gif"] as a means of selecting the image. it would need a class or id.
The images shown in tags are in the foreground of the element, not the background, so setting a background image in an won't override the image; it'll just appear behind the main image, as you're seeing.
What you want to do is replace the image. Here's your options:
Start with an element with a background image, not an tag. Then changing the background image in CSS will replace it.
Start with an tag, but use Javascript to change the src attribute. (this can't be done in CSS, but is simple enough in JS)
EDIT:
Seeing your edit in the question, I'd suggest option 2 - use Javascript to change the src attribute. It's quite simple; something like this would do the trick:
document.getElementById('myimgelement').src='/newgraphic.jpg';
You should be able to replace it by just doing something like:
.image {
content: url('https://picsum.photos/seed/picsum/400');
width: 200px;
height: 200px;
}
Unfortunately seems that it does not work in Firefox :(