I need a little help. I creates a nav menu in html an css (with specific media query), and the javascript (jquery) I wrote code that looks like this:
var x = $('#nav-menu > ul').children().length;
alert(x);
$('#nav-menu > ul li').css(width, x);
But the last line in the code I want change in the specific media query.
Is that possible?
Thanks in advance.
Using .css creates an inline style and doesn't actually change the CSS file that contains the rules being applied. Instead, create a class and add a rule in the media query for the properties that you want to change, and use .addClass and removeClass in your JavaScript as needed.
Edit: just saw that bergi's comment is basically the same idea. Hope this helps understand why.
Related
Is there anyway I can access site CSS file and "ask" it to return the CSS style of the H1 element, or P or any specific element? (without primitive text scraping).
update: Server side solution also applicable
Pseudo code :)
CSSContent = (get CSS file content from external site)
$H1font-family = getStyle(csscontent, h1, get-font-family)
$H1font-size = getStylet(csscontent, h1, get-font-size)
It sounds like you want to override whatever is in the CSS. There are 2 ways of doing this (at least). One is by adding an additional class to the HTML tag; this solution is well outlined in another SO answer Overriding css style?
The alternative is to add inline style and add !important at the end, however the first solution is superior.
There is also the option of using e.g document.getElementsByTagName("H1") , which would identify all of a certain tag and then using that in a function to manipulate the style of that particular tag.
Hope this helps.
I'm working on a project that is using an API to extract raw information from a website. This raw information has all of it's inline styles still intact, so what I'd like to do is add a class to a span if it contains an inline style with the style being background-color: #345678. Is this possible with Javascript/jQuery?
My current method for removing the styling is:
$(".card").removeAttr("style");
and I tried using this code for adding a class, but it didn't seem to be effective:
$('span[style*="background-color"][style*="#345678"]').addClass('alignleft');
Does anyone have any ideas on how I could accomplish this? Thanks.
You were very close on your implementation:
$('span[style*="background-color"][style*="#345678"]').addClass('alignleft');
But you need to put them both together: Fiddle
$("span[style*='background-color: #345678']");
Ok here is my dilemma. I have a header.php file that contains the header information (navigation and logo) I use that so that I can include the file in each my pages where it is needed and to make for easier editing. The issue I have is that I obviously cannot use :active to color or alter links text so the user knows what page they are on.
How can I achieve what I want with the way I am doing it, or am I stuck doing this the long way. Is there javascript that can do this.
Understand I am new to HTML and CSS and am looking for simple ways to change header and footer without having to edit every page individually.
Markos
I don't know how your html looks like, but for example if you have jQuery included and you are using absolute patches in links you could use something like this:
$('a[href="'+document.location.origin+document.location.pathname+'"]').css('color', '#f00');
or if you don't have jQuery and have absolute links you can use something like this:
var a = document.getElementsByTagName('a');
for (i in a) {
if (a[i].href == document.location.origin+document.location.pathname){
// red color
a[i].style.color = '#900'
}
}
Add below CSS to your code. Then apply class to your <a> tags.
1.
/*choose current(active) a tag which has class named niceClass*/
.niceClass a.current {color:red;}
2.
Link Title
Link Title2
...
I'm using MooTools.
I have a ul element:
<ul id="alerts"></ul>
And I can access it with $("alerts"), but when I try to change it by doing:
$("alerts").innerHTML += "<li>word</li>";
In a for loop, it only does the first... It doesn't add any more li tags. Full code here: rightandrong.info/Upload.html. I've modified it so it doesn't actually upload.
Drag and drop multiple files, and it should tell you when each one is done in the ul. What's wrong?
EDIT: Checking the full code is recommended.
That's why you can't do it
Regarding your problem: on the js fiddle I did it's working, are you sure the loop contains something more than one element? (on your example it's working too)
I tried some plugins but they all come with their own styling which takes quite some time to get rid of. Is there any plugin with minimal styling (or a really simple way) to apply custom background to select element? I just need something very simple.
Thanks
I found this one. It even degrades automatically if JavaScript is disabled.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
With jQuery am using lines like this in my dom ready function :
$(".overlay").css("top","300px");
Goes like this in the header:
<script type="text/javascript">
jQuery(document).ready(function(){
$(".overlay").css("backgroundColor": "#0f0");
});
</script>
.overlay is the class of the div i wanna change and then comes the css property and its value.
Hope this helps.