This site is overriding my CSS with its own and I cannot get around it! It has style.css with "text-align: center" in the body.
I have <div id="mydiv"> appended to the body and it's normally got "text-align: left". There are <ul>s and <li>s underneath #mydiv and they are inheriting the body's 'center' for some reason. I tried this and it's still not working.
$('#mydiv').children().css('text-align', 'auto');
How the heck do I reclaim my CSS!?
#Grillz, the HTML looks like this:
<div id="mydiv">
<ul class="container">
<li rel="folder" class="category">category1
<ul><li rel="file" class="subcategory">subcategory1</li></ul>
<ul><li rel="file" class="subcategory">subcategory2</li></ul>
</li>
<li rel="folder" class="category">category2
<ul><li rel="file" class="subcategory">subcategory3</li></ul>
<ul><li rel="file" class="subcategory">subcategory4</li></ul>
</li>
</ul>
If you want to do it via jQuery, your .children() is only selecting the <ul>, not the <li>... You need to do something like this:
$('#mydiv').children().children().each(function() {
$(this).css('text-align', 'left');
});
Firstly, its drilling down two levels, down to the <li>. Secondly its using the .each() function to apply the css styling to each child...
EDIT: after seeing your html above, below is probably more appropriate:
$('#mydiv').find("li").each(function() {
$(this).css('text-align', 'left');
});
This uses the .find() function to find every <li> element inside #myDiv.
Working jsFiddle (with color instead of text-align) here: http://jsfiddle.net/Damien_at_SF/Vabvu/
Hope that helps :)
All you need is a more specific css rule. Something like this will set text alignment to left for all the children of #mydiv.
body #mydiv * {
text-align: left;
}
Try without children() function
$(document).ready(function(){
$('body').css('text-align', 'left !important');
});
and I'm guessing you trued to insert <UL/> and <LI/> in your example. you need to define them as code for them to show up
Related
I've got the following html
<ul id="navigationMenuTop" class="nav navbar-nav" data-bind="foreach: getRoutes">
<li data-bind="css: ..." >
<a data-bind="attr { href: ...">
This generates a nice top bar menu where users get to go to parts of the program where they have the rights for.
Now I need to get the li where the href in a contains 'registration'
I've tried several things, the latest being
$('.navigationMenuTop li a[href*="registration"]');
but no success yet, any ideas?
I think you are mixing few things here.
This is not a knockout question, more of a jQuery + CSS questions.
navigationMenuTop is ID - so you shouldn't access it with a dot which means class.
Try # instead:
$('#navigationMenuTop li a[href*="registration"]');
You can use the parent function to get the parent of the matched anchor
$('#navigationMenuTop a[href*="registration"]').parent();
you can check this out here
$("#navigationMenuTop").on('click','li',function (){
alert($(this).text());
});
I've tried a number of things but I cannot get my code to work. I want to change the text of the span containing a number in this code:
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
My JavaScript/JQuery:
(function($) {
$(document).ready(function() {
$('li.top .sec').find('span').eq(0).text('cccc');
});
})(jQuery);
I've been able to write code that changes both spans, but not the one.
Your code body appears to work to largely work.
I just tried inserting this line into the doc as follows:
$('li.top .sec').find('span').eq(0).text('cccc');
See http://jsbin.com/leyasiwexu/edit?html,js,output
So, perhaps there is something else that is causing the issue?
console.log($('li.top .sec').find('span').eq(0).text());
$('li.top .sec').find('span').eq(0).text('cccc')
console.log('changed to: ' + $('li.top .sec').find('span').eq(0).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
(function($) {
$(document).ready(function() {
$('li.top .sec').find('.inner').prev().text('cccc');
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
the .prev() method searches for the predecessor of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.
The method optionally accepts a selector expression of the same type that can be passed to the $() function. If the selector is supplied, the preceding element will be filtered by testing whether it match the selector.
Excerpt taken from the JQuery prev documentation
You can try this:
$('li.top .sec').find('.inner').prev().text('cccc');
I haven't checked, HTML Specifications, but I don't think its appropriate to nest a div inside li. I know you can work your way around presentation irregularities with css, but this might not be permissible with jQuery. Just as I said, I haven't verified. If you have to nest items inside li, use inline elements. div is block
Using jquery 1.8.3
I am creating a function which creates an "li" element and sets some properties, including establishing an event listener.
$(this).closest('a').text(text); //$(this) is the li tag, and it does show that in the browser if you step through
The dom structure looks like this:
<div>
<a></a>
<div>
<ul>...</ul>
</div>
</div>
If you follow it in the debugger, both the .text() method and "text" variable are being populated with the correct info. There is something going on with the assignment part that I can't track. I am sure it is something stupid and obvious I am missing, but I could use some help getting over this hump.
If you need more info, please let me know.
The anchor tag is not the ancestor of the li .. Rather it is a sibling of the div in which it is encased..
You are looking for this I belive
$(this).closest('div').prev('a').text(text);
You have to use html() function from jQuery:
$(document).ready(function(){
$("#element li ").click(function(){
$("#linki").html($(this).html());
});
});
<a href="" id="linki" ></a>
<a></a>
<div>
<ul id="element">
<li>Hello</li>
</ul>
</div>
live example http://jsbin.com/opoqid/46/edit
I've wrote a simple accordion faqs list using jQuery, but looking for some feedback on ways to improve it better.
My mark-up looks something like this:
<ul class="faqs">
<li><h4>Question</h4>
<div class="answer">answer</div>
</li>
<li><h4>Question</h4>
<div class="answer">answer</div>
</li>
<li><h4>Question</h4>
<div class="answer">answer</div>
</li>
</ul>
My JS looks something like this:
var question = $('.faqs h4');
question.click(function() {
$(this).next('div').slideToggle('fast');
});
All .answer divs are set to display:none on page load, but if js is disabled, all .answer div would be shown by default.
Cheers
I'd suggest adding $(".answer").slideUp() so that only one accordion item can be open at a time:
var question = $('.faqs h4');
question.click(function() {
$(".answer").slideUp();
$(this).next('div').slideToggle('fast');
});
(Also, maybe add a little style, eg the :hover pseudo-class. Maybe add some other animations.)
Fiddle
I wonder, why to try yourself with something from scratch when there's so many good accordions out there ...
Did you try the Bootstrap Collapse?
http://twitter.github.com/bootstrap/javascript.html#collapse
Simple markup and you can use as part of the hole Bootstrap Framework, or simply use it independently from anything else (you need jQuery though)
I have the following dropdown menu how can i redirect each menu to corresponding page by clicking each of menu? is it possible by using one javascript function if yes how?
thanks in advance...
<div>
<ul>
<li id=home onclick="show(this.id)">Home</li>
<li id=collection onclick="show(this.id)>Collection</li>
<ul>
<li id=men onclick="show(this.id)>Men</li>
<li id=women onclick="show(this.id)>Women</li>
</ul>
<li id=contact onclick="show(this.id)>Contact</li>
</ul>
</div>
Yes you can.
Use window.open("URL") in your case URL is this.id
Also you can update window.location
read more here http://www.tizag.com/javascriptT/javascriptredirect.php
Like Niko said you need closing quotes
.. onclick="window.open(this.id)" ..
If you only need o JS function to redirect based on a parameter that, in your case, is the component ID, this will do the work:
<script type="text/javascript">
var show = function(id) {
window.location.href = id + '.jsp';
};
</script>
If you want to navigate DOM and get link's href attribute use:
document.getElementById(id).firstChild.href
Considering that the first element inside the component referred by ID is a link tag.
Try this?
$("div > ul li a").click(function() {
window.location.href += "/" + $(this).parent()[0].id;
});
I tried to use a selector that didn't modify your HTML, so that's why it looks so icky.
This makes no sense.
I understand that your particular functional requirement is to invoke the link when the enduser clicks somewhere in the space of the <li> outside the link. To achieve that just set the CSS display property of the <a> element to block. This way the link will span the entire space of its parent element.
<ul id="menu">
<li>Home</li>
<li>Collection</li>
<ul>
<li>Men</li>
<li>Women</li>
</ul>
<li>Contact</li>
</ul>
with this CSS
#menu li a {
display: block;
}
No need for ugly JavaScript hacks. Opening a new JSP page location in the current window is by the way to performed by window.location = 'some.jsp';. But this is not necessary if you use the right solution for the concrete problem. In the future questions, try to elaborate more about the functional requirement instead of concentrating only on the solution of which you thought that it's the right solution for the particular functional requirement.