I want to have two different links and when hovering over one it changes the entire PAGE background to a different background-image-url. Then when I hover over the second link it changes the background-image-url to another picture. Is this possible? I am using Angular, I was thinking at first I could do this in css but I now think something more will be required. Any guidance would be greatly appreciated.
It won't be possible with pure CSS because selectors are unable to ascend.
What you're trying to achieve can be easily done though. Just attach hover events to the links and in the event handlers, add a certain CSS class to the page. And then define the styles for that class of course.
To add the class, what you need to do is set a state value to a certain value and in the page element, add *ngClass="{bgLink1: hovered === 'link1'}" or something like that. You get the idea.
<!DOCTYPE html>
<html>
<body>
</body>
<style>
body {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
#link1 {
margin: 5vw;
}
#link2 {
margin: 5vw;
}
#link1:hover body {
background: url('');/*any url you want for the picture*/
}
#link2:hover body {
background: url('');/*another url you want for the other picture*/
}
</style>
</html>
I really hope I could help you, if not it wouldn't hurt to write the question another time but with code or something so I can understand what you want
Related
I have been having some trouble centering some items on my website.
The items in question are in the passphrase generator (images and text elements in the dark box). I have tried the usual margin:auto, all the different display properties, text-align, align-self, align-content and align-items. None worked.
I was also wondering if anyone knew how we could get the text element under our images isntead of to the right, this is the code used for the generator.
All help is appreciated
A p tag is a block element, so the default width is 100%. This is why you have one element per line
#passphraseBilder {
text-align: center;
display: block;
}
#passphraseBilder p {
display: inline-block;
}
Turn the p tag into inline or inline-block, and it will work ;-)
Have a look to the difference between block and inline: https://www.w3schools.com/html/html_blocks.asp
Try this:
#passphraseBilder {
display:inline-block;
width:100%;
}
Note: I have just added the properties which you should add or overwrite. Existing properties has to be there.
I've used a javascript to change the image on a menu list item (from css class)when its clicked.
Its supposed to change from "menu_grey" to "menu_red". It does happen but its momentarily switched back to the same class. This is what I have in HTML:
<li %WELCOME_ACTIVE%><a id = "menuClicked" class='menuHome' href='%AuthProgram%'>%lang("lang_customer_framework_home")%</a>
<script>
document.getElementById("menuClicked").onclick=function() {
var className = document.getElementById("menuClicked").className
document.getElementById("menuClicked").className = "menuClicked"
};
</script>
</li>
As this is an alteration of the design in a pre-developed website and the layout of the menu is defined in CSS, i dont want to make a new menu and design as i would then risk to destroy rest of the design. The CSS class looks like this:
#menu li a.menuHome
{
background: url('../graphics/SevenCustomer/ikoner/hjem_gra.jpg') no-repeat top center;
display: block;
padding-top: 44px;
}
And for menuClicked:
#menu li a.menuClicked
{
background: url('../graphics/SevenCustomer/ikoner/HJEM_rod.jpg') no-repeat top center;
display: block;
padding-top: 44px;
}
So the question is:
How can I make the image stay "red" after clicking home ?
Suggestions are appreciated :)
The page navigates away, you would need to set it on the serverside or on the page that loads. The next page has no clue that you added a class to it. It does not care since it is a brand new page.
Just stop the event from firing when someone clicks on the link. There are several ways to do this, here's a few suggestions:
how to stop page redirect
I'm trying to have two buttons side by side, one with an image, one with text.
I can't figure out why they don't line up correctly on the baseline.
Here's the code:
<head>
<style type="text/css">
button {
height: 20px;
}
</style>
</head>
<body>
<button id="image-button">Some text
<img src="http://www.famfamfam.com/lab/icons/mini/icons/application_firefox.gif">
</button>
<button id="text-button">Some text</button>
</body>
I'd love a solution to this, but I'd also love to understand the "why" of this behavior, since it is consistent on all browsers.
Also, I've tried "float: left" on the image, but that doesn't work on Chrome.
Add vertical-align: top
button {
height: 20px;
vertical-align: top
}
Check this JSFiddle
Your problem is two things, one the image is bumping up the line height of that text since it's displaying inline. And two, browsers don't support vertical-align consistently. Looking at the previous answers, some of them work in Chrome, but not in Firefox.
My best solution - that works in all the browsers I test in - is to redefine how the image is treated and make it a block element, then float it to the right of the text. That way the image does not affect the way the text is aligned. The downside to this is that you then need to define an absolute width for the button to make sure the image isn't wrapped to the line below the text. Here's the CSS for that:
button {
height: 20px;
width: 100px;
}
img {
display: block;
float: right;
}
Working fiddle
Another solution is to use a background-image on the button instead of an img tag, but then you'll need to define a padding on the right side of that button to make room for the image. But then you lose the default styling that the browser places on the button, so you're going to have to deal with that.
The text and the image are lining up on the bottom, but being pushed down by the size of the image. Try setting vertical-align: Text-top
More details: http://css-tricks.com/what-is-vertical-align/
You can fix this using line-height:
button {
height: 40px;
line-height: 40px;
}
There is a fiddle here: http://jsfiddle.net/txdMZ/
I am doing a code that do some js injection of code in page, with JQuery. But in my input that i get in some pages modify it, I am putting all important attributes and define them as !important, but it's impossible to put all the attributes in all the tags.
Someone know how to disable all other css inside a div?
Solution I think:
I found a solution but i don't want to use it. Its eliminate al css from the page, while i am injecting the code after using that code I eliminate my css and code and apply the original code from the webpage
Thanks
If you're using that many !importants you're doing it wrong.
The solution to this problem is to properly organize your css. Important stuff last, because it overrides what was previously styled. Also use your selectors wisely. Example:
<a class="link">Link</a>
.
a:link { color: red; }
.
.
.
.link { color: green !important; } // Nop
a.link { color: green; } // Yup
If you override everything it will work with normal CSS rules on every page. Not what you were hoping for, but it is a solution.
css:
#myInsertDiv {
color: blue;
padding: 0;
margin: 0;
background: white;
border: 0px;
/* etc you have to restyle EVERY possible value */
}
html:
<div id="myInsertDiv"></div>
The main issue is you have to style every attribute, and reset everything else to a default value.
Or you can insert all the style information into the style attribute on the div, but that is probably doing it wrong too.
If I got you right you can use jQuery for modifying CSS properties on any elements of the page (huh), using something like this $('.Myclass').css('color','#ff0000')
And more about selectors in jQuery - http://api.jquery.com/category/selectors/
I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/