Alright i have a button element as follows:
<button class='secondary row_1 col_1 not-sticky'>Button</button>
styling for secondary etc work, but it does not pick up the styling from 'not-sticky'. This is my basic styling:
.not-sticky { color:#FFFFFF; }
.sticky-state { color:#000066; }
When a button is clicked this code is run:
if ($(this).hasClass('sticky-state'))
$same = true;
//change old sticky classes to not sticky
$('.sticky-state').removeClass('sticky-state').addClass('not-sticky');
if (!$same)
$(this).removeClass('not-sticky').addClass('sticky-state');// chain our jQuery methods
Once this is run, the styling from sticky-state does work properly and the text color becomes #000066.
Also - through the use of chromes inspector i was able to verify that the classes are changing between not-sticky and sticky-state properly, just the styling from not-sticky is not showing at all
What could be making the not-sticky styling from not being applied at all?
Thanks
Here is the whole style sheet: http://staging.easyzag.com/style.css
It works in this fiddle: http://jsfiddle.net/c7XHX/
Don't know if $same was declared or not, but you always need to declare your JavaScript values.
Related
In this website "https://www.armoli.com" as you can see, the menu is transparent at first and integrated with the image on the back, but its color changes as you scroll down.how can I do this in html?(with css and js)
I think You will have to use Intersection Observer API.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Much better than listening to scroll event.
(it is an API that helps you listen to an element in the DOM (can be an array). and it triggers when that element appears on the screen. then you manipulate the DOM depending on what appears there.
Check this tutorial: https://www.youtube.com/watch?v=T8EYosX4NOo
You can probabbly do this using css and javascript, simply make two css classes with your different themes e.g.
.navbar_active {
color: red;
}
.navbar_other {
color: blue;
}
Then just use some javascript to add/remove the css classes, depending on the current scroll.
Edit: something like this sounds like what your looking for: Transitioning Affixed Navigation bar - CSS theres, even a fiddle you can try: http://jsfiddle.net/jv0qvvp2/1
basically the same approach as what i said, add/remove css classes depending on the current scroll position
I am modifying the bootstrap freelancer theme.In the Contact me section when trying to overwrite the "Name" label's color that appears when you try to type in the name input field it appears with #18BC9C but I want it to appear with #3fcbc7. It seems its styling is coming due to a class from a parent div that changes when I click on the input inside.I tried using dev tools "Break on..Attribute modifications" but maybe I'm doing it wrong. I took the classes I saw it had and tried to overwrite it that way as its worked for the other elements but its not working here. My CSS
custom.css
#page-top .floating-label-form-group-with-focus{
color:#3fcbc7!important;
}
#page-top .form-group col-xs-12 floating-label-form-group controls
floating-label-form-group-with-value floating-label-form-group-with-
focus {
color:#3fcbc7!important;
}
Added !important but nothing changed. Added the body id(page-top) for priority but didn't change. I don't want to edit the min css file since I heard that is considered bad practice
Try this by adding this style in your index.html itself
<style>
floating-label-form-group-with-focus label {
color: #3fcbc7;
}
</style>
Or you can add your css which you have provided above ^^
Check in your <head> that you're calling your custom css file AFTER the Bootstrap CSS file. Your custom styles should be called last as the browser reads these CSS rules in order. So if your Bootstrap CSS file comes AFTER your custom one, it's overwriting your custom style sheet.
Consider the following fiddle: http://jsfiddle.net/GMA76/
On the links active state I want to replace the content of the a tag, then it should continue to follow the link. However when I style it as shown in the fiddle and here:
a div:first-child{
display:block;
}
a div:last-child{
display:none;
}
a:active div:first-child{
display:none;
}
a:active div:last-child{
display:block;
}
The link doesn't work the first time you click it. It only replaces the content and then it seems the redirection fails.
How would I fix that?
Browsers don't take well to content changing on the :active event. Even if it did work, a CSS-only solution would likely mean that the user wouldn't even see the change in content before the new page had loaded (or started to load with a white screen). I tested a lot with the :after pseudo-selector and the content property, but this didn't work either.
And rightly so. Changes to content should only be done with a language like Javascript. This is a logic issue and is outside of the scope of a styling language. Therefore, I would suggest using Javascript.
I've created a quick fiddle here using Javascript with jQuery (doesn't need jQuery it but it's easier) to switch the text in the link and then go to the new page exactly 1 second afterwards. This way you only need to have the original link in the HTML rather than hiding separate links with CSS. There are more flexible and extensible ways to do this if it's not just for one or two links but for the sake of an example, take a look at the fiddle.
This is the jQuery:
$(".switch-link").click(function(){
$(this).text("Test Two");
var href = $(this).attr('href');
setTimeout(function(){
window.location = href
}, 1000);
return false;
});
1000 is the delay between the text changing and the browser starting to load the new page, you can change this to suit your needs.
I'm trying to create a rather unique effect. It's actually not that complicated, what I'm trying to do is build an experimental site, which I have already done. I just can't seem to figure out how to go about doing the final step.
So this is my site I'm tinkering with http://www.dig.ital.me/sandbox/about-me/
And what I'm trying to do is collapse the left-side bar that has the text in it : "Made in blah blah blah, etc." By clicking on the : " Click this to hide this " .
And I've tried going about doing an anchor link associated with a name link and calling the display:none when that link is clicked. However, it isn't working. So I thought I would try stackoverflow, on how I could about achieving this kind of effect where it collapses, and re-opens again.
#hide-option { color:#FFF; width:500px; height:500px; padding-left:170px;}
#hide-option:hover .fixedfooter {
display:none;
cursor:pointer; }
Here's a snippet of the hide-option div id. I've exhausted a lot of routes to try and achieve this effect but I cannot seem how to figure it out. I've tried the :onClick class, and nth-child classes, but nothing seems to work.
// Store the footer as a variable, so we don't have to keep calling jQuery's selector engine
// It's slower than a tortoise stuck in a traffic jam.
var target = $('.fixedfooter');
// Every time the hide-option link is clicked
$('#hide-option a').click(function() {
// If the left position of the target is 0
if(parseInt(target.css('left')) == 0) {
// Check the target is not animated and, if it is, animate off screen
!target.is(':animated') && target.animate({left: -751}, 250);
} else {
// Assume it's hidden, and put it back to the start
!target.is(':animated') && target.animate({left: 0}, 250);
}
// Stop the link being followed
return false;
});
JQuery, the JavaScript library, will solve it all for you.
$("el").bind("onclick",function(){$("el").toggle('slow');});
If you only want CSS3 (if you don't care about IE6-8), here's something you could try: http://jsbin.com/isunoz/6/edit
I've commented it as much as possible, I hope it helps :)
What I've done is to use a checkbox input to decide if the sidebar should be shown or not.
By putting the checkbox input element right before the sidebar element (div.fixedfooter) and changing your anchor (the arrow) into a label for that checkbox, I'm able to use the :checked pseudo class and the + selector to target the sibling element (in this case, the sidebar div.fixedfooter). If the checkbox is checked, the sidebar is moved out of the screen and if it's not checked, the sidebar is shown (left: 0).
For the animation I've used some css3 transition (transition: left .4s ease) :)
Is there a way to remove CSS styles from an submit button so that the default browser style is applied?
You can set the styles to the system values,
input.overridecss {
background-color: ButtonFace;
color:ButtonText;
}
jsFiddle
Here is a list of values you can override, there is probably a better list but I'm lazy.
[Edit] Here is the Specification which has been deprecated lol,
so here is the correct way I guess,
input[type=button] {
appearance:push-button; /* expected from UA defaults */
}
from Appearence
You can do something like this:
button {
padding:0;
margin:0;
border:0;
background-color:transparent;
}
Hows that?
Store styles that you're applying programatically in a CSS class. When you want to go back to default remove the class.
Well, if you dont mind to use jQuery, you can use following code to remove all styles and classes from submit buttons.
$('input[type="submit"]').removeClass();
$('input[type="submit"]').removeAttr("style");
This will remove all classes as well as inline styles, thus system default button style will be applied to your all submit buttons.
I found that because I had:
* { border: 0; padding: 0; }
etc etc.
in my code which affects submit buttons so I put this is instead:
*:not(input) { border: 0; padding: 0; } etc etc.
This seemed to fix it.
If you're DEVELOPING the site - just remove the rules from the CSS file.
If you so wanted to, you could use Javascript/JQuery to remove/reset them based on some sort of condition if thats what you're looking for, ie:
$("#myButton").css("background","");
And so on...
If you're USING the site, but didn't build it - then you can (depending on your browser - i'm looking at Firefox 4) disable all or partial CSS from rendering using the web developer toolbar options... but I don't know if you can apply that as the 'default' setting for every site you load.