Im using contact form 7 on wordpress, i don't want to use a plugin rather use plain css/js to bring the results if possible.
Something like this :
All browser define select difrent from each other.
You can use UL and LI to make custom select like list.
Here is a example, this can help you to make all select look similiar on all browser and on mobile too.
And select would be something like:
<ul>
<li class="init">[SELECT]</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
<li data-value="value 3">Option 3</li>
</ul>
If you give you dropdown an id, then you can select the id using jQuery and use its children method. You can even specify which child.
Something like this:
$("dropdownId").children().css({"color": "yellow", "border": "1px solid red"});
Related
I have a mobile nav, that looks like this
<ul id="mobile-menu" class="menu>
<li class="normal-link">link-1</li>
<li class="dropdown-link">link-2
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="dropdown-link">link-3
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="normal-link">link-1</li>
</ul>
I cant change the html/wordpress generated code, but I can add css and javascript. So is there a way for me to get next to the dropdown-link's a image that will let the submenu free. if the image is pushed the image will change. if pushed again it will go back to the normal image and the dropdown dissappears again?
I am mostly looking for answer for the problem with of javascript on the dropdown link's but just so you know what i want to do with it.
This question is so very, very vague. But I guess you're looking for the nth-child() selector.
See the docs here for more information. Target your 'mobile-menu' ul, and use nth-child to select the li elements within.
My big question would be, why can't you change the HTML? If it's Wordpress, you can modify the template to change the HTML.
You question is not really clear but if you want to retrieve an element without using id, first you may use their classes
var myClass = document.getElementsByClassName("classname"); //returns a nodeList like array
myClass[0] //first element with "classname"
You may also use tag names
var divs = document.getElementsByTagName("div");
divs[2] //third "divs"
You may also use querySelectorAll, this works pretty much like CSS selector and also returns a nodeList
var qs = document.querySelectorAll(".class");
I hope this helps
You could add a class and use the Jquery class selector: $(".class-name") to target a specific <li>
I have a set of elements
<div id="lista">
<ul>
<li class="seto">Element 1</li>
<li class="seto">Element 1</li>
<li class="seto">Element 1</li>
</ul>
</div>
Then i'm using jquery, it's better do this?:
$("#lista li").each(function(){ //something };
or this?:
$(".seto").each(function(){ //something });
Thanks.
You can read about selector optimizatoin here:
https://learn.jquery.com/performance/optimize-selectors/.
The $("#lista").children('li') will be the fastes.
But in your case performance is not so important, so you can use whatever you prefer.
Performance will not be an issue I think.
Your jquery should reflect your intent of the code.
Depending of your want to apply styling, I would choose the class version.
If you want to do some post-processing on specific business objects, I would use the ID version.
Having said that, I think you should use the class version, and make sure that the business objects have the correct classes to attach the styling to. Including jQuery functions.
It depends upon your case
Case 1:
For exxample ur case is like this means
<div id="lista">
<li class="seto">Element 1</li>
<li class="seto">Element 1</li>
<li class="seto">Element 1</li>
<ol class="seto">diff Element 1<ol>
</div>
If you want to go through list of all "seto" contain class elements
Then u go for second method. Or else you can use first method
I'm trying to select the content I click and this content has to be the first one to be selected. Like the select option.
This is the img.
I'm not quite sure how to make this, this is my demo: http://jsbin.com/jazej/1#0
Basically the part of the code is this.
<li class="dropdown">
Select Card <b class="caret"></b>
<ul class="dropdown-menu" id="indexCards">
<li class="active">Card 1</li>
<li class="">Card 2</li>
<li class="">Card 3</li>
<li class="">Card 4</li>
</ul>
</li>
But I can't get no event fire or something when I do $('#indexCards'). Any idea about this?
Try this : Read text of the clicked anchor inside indexCards and put it in selectCard
$(function(){
$('#indexCards li a').click(function(){
$('.active').removeClass('active');
$(this).closest('li').addClass('active');
var text = $(this).text();
$('#selectCard').html(text+'<b class="caret"></b>');
});
});
I have menu (list of categories), level-0 li has class ".cat_cat_h", level-1 .cat_par_c"
HTML:
<ul class="text-links">
<li class="cat_cat_h level-0">Item 1</li>
<li class="cat_cat_h level-0">Item 2</li>
<li class="cat_cat_h level-0 active">Item 3</li>
<li class="cat_par_c level-1" style="display: none;">Item 4</li>
<li class="cat_par_c level-1" style="display: none;">Item 5</li>
<li class="cat_par_c level-1" style="display: none;">Item 6</li>
<li class="cat_cat_h level-0">Item 7</li>
<li class="cat_cat_h level-0">Item 8</li>
<li class="cat_cat_h level-0">Item 9</li>
<li class="cat_cat_h level-0">Item 2</li>
<li class="cat_par_c level-1" style="display: none;">Item 7</li>
<li class="cat_par_c level-1" style="display: none;">Item 8</li>
<li class="cat_par_c level-1" style="display: none;">Item 9</li>
</ul>
I would like to show() only level-1 elements that go right after .level-0.active (item 4, item 5, item 6).
UPDATE
Final solution:
$(document).ready(function(){
$( ".level-0.active" ).nextUntil( ".level-0" ).show();
});
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
Source
That means the closest() function works in one direction. if you want to go to the parent <ul> and the back to another <li> you have to call the parent() function first, like this:
$(document).ready(function(){
$(".cat_cat_h").parent('ul').find(".cat_par_c").show();
});
edit after your edit:
If you want the previous and the next element of you selected element try this:
$(document).ready(function(){
$( ".level-0.active" ).prev().show();
$( ".level-0.active" ).next().show();
});
To be responsive to Paulchenkiller, I will amplify my answer.
Fluency in any language, spoken (English, Spanish, Italian, French, German, etc) or written (html, css, javascript, c++, pascal, basic, etc) requires the ability to express a certain concept, idea or task in a variety of different ways.
I will attempt to do so with this particular issue in as many ways that this particular noob can think of.
jQuery selectors - this has been nicely expounded on above, and the only comment I might make is the trivial downside in the use of jQuery in terms of its load time (microseconds to milliseconds), and perhaps slightly longer to run than native js (microseconds).
CSS classes - One way to handle this is the use of additional css classes - adding a class, say "li456" that is an "empty" class in the sense that it contains no CSS styling, and is only used to identify a particular line or lines of code. Here is a FIDDLE as an example. It's a bit inefficient in the sense that it can be difficult to follow the code with so many classes attached to a line of html, and needing to look up an additional class in the section or even an attached style sheet.
$(".li456").show();
CSS ids - Even more burdensome, since you can only use an id once on a page, and in this particular case, therefore need three ids. The same applies to ids as to classes, only worse, you have to look up three times the number of ids as classes - since one class can be associated with multiple html lines on a given page. Here is a FIDDLE that shows an example of the use of ids .
$("#li4, #li5, #li6").show();
A variant of CSS is the concept of pseudo classes which are beautifully explained by the experts at CSS-Tricks where they have a nice review of these flexible and powerful methods (http://css-tricks.com/pseudo-class-selectors/). The :lt(x) selects the first x elements of type. Here is the FIDDLE. The :lt() pseudo class is particular to jquery and not a part of the CSS standard.
$(".text-links .cat_par_c:lt(3)").show();
Pure javascript is also a possibility, but in this particular case you would have to add an id to the three elements in question. Here is the FIDDLE.
document.getElementById('li4').style.display='block';
document.getElementById('li5').style.display='block';
document.getElementById('li6').style.display='block';
Pure javascript can be used to select on the class name, and return an array that can be parsed by [n]. This FIDDLE shows an example of a brute-force method. This FIDDLE uses a for loop to go through three elements.
document.getElementsByClassName('cat_par_c')[n].style.display='block';
Then we move to "display" which can be handled with jQuery .show, .css('display', 'block') and javascript .style.display='block'. This FIDDLE demonstrates these methods.
$('.cat_par_c:eq(0)').show();
$('.cat_par_c:eq(1)').css('display', 'block');
document.getElementsByClassName('cat_par_c')[2].style.display='block';
And I'll bet there are many more ways...
I have a an unordered list like this:
<ul id="mylist">
<li id="1">Heading</li>
<li id="2">Second</li>
</ul>
What I want to do is, when I add another list item:
<li id="3">First</li>
It needs to be prepended to the list item which is just below the first list item in "mylist". ie, just below 'Heading' in this case. So the final list looks like this:
<ul id="mylist">
<li id="1">Heading</li>
<li id="3">First</li>
<li id="2">Second</li>
</ul>
Thanks in advance.
NB: What I learned from trying to implement this is, when we append or prepend some content to an element selected with jQuery, it'll get prepended or appended to the content inside the selected element.
You can use after method and :first selector:
$('#mylist li:first').after('<li id="3">First</li>')
http://api.jquery.com/after/
You can use .after, or .insertAfter, for being more precise about placement in the DOM tree.