I am trying to create a simple title spacer for my html code so that I don't have to type " " a lot and so the code looks more eat. However I have created this:
$(function() {
var subSpace = document.getElementById("subSpace");
var titleName = document.getElementById("subSpace").value;
subSpace.innerHTML = " " + titleName;
return false;
});
but it only runs against this code once:
<li><a href="#" id="subSpace" value="Start Menu" ></a></li>
<li><a href="#" id="subSpace" value="Tiles" ></a></li>
<li><a href="#" id="subSpace" value="Action Center" ></a></li>
<li><a href="#" id="subSpace" value="Settings" ></a></li>
<li></li>
<li></li>
<li></li>
So it runs Start Menu and properly spaces it the way I want but doesn't run tiles, action center, etc. Is there a way to fix this? Am I missing something? I could be way off as I am still learning.
Thank you in advance!
You should use a class instead of an ID as IDs are supposed to be unique. Other than that, you could be using CSS to add padding to the left:
.subspace {
padding-left:10px;
}
<li>Start Menu</li>
<li>Tiles</li>
<li>Action Center</li>
<li>Settings</li>
<li>Customizations</li>
<li>Windows Search</li>
<li>Microsoft Edge</li>
That's because you have multiple elements with an id of subSpace. You should use an id only once. If you have multiple elements with the same id, the first element will only be matched.
Also, on a side-note, you should really use CSS to style your page (i.e adding spacers/margins/paddings).
You have duplicates ids. Use class if you need to select multiple elements. You can select them using JQuery
<a href="#" id="subSpace" value="Start Menu" class="subSpace">
In your js:
$('.subSpace').html(' ');
I see another answer here which suggests a better way to do this only using CSS. You should consider that too.
Related
I have a list which is structured something like this:
<ul data-Id="2" class="listElement">
<li></li>
<li></li>
<li>
<ul data-Id="3" class="listElement" style="display: none">
<li></li>
<li>
<ul data-Id="4" class="listElement" style="display: none">
<li></li>
</ul>
</li>
</ul>
</li>
I need to be able target the ul element which is currently hidden, and do a slidetoggle() on it. This I have tried to do in jQuery, but it doesn't work so well:
var test = 3; //i need to declare it as a var, because i get this from another item
$('.listElement').find('[data-Id="' + test + '"]').slideToggle("fast");
Nothing really happens and I can't seem to find what I'm missing here
Your code is correct, but please make sure dom elements has been already placed(ready) when your javascript code is run.
Or your javascript should be run on ready event of document hired.
$(document).ready(function(){
var test = 3; //i need to declare it as a var, because i get this from another item
$('.listElement').find('[data-Id="' + test + '"]').slideToggle("slow");
});
I want to change this line:
<li id="activehome" ><a href="#" >Home</a></li>
to
<li id="activehome" class="active"><a href="#" >Home</a></li>
Adding that class attribute. How do I do this using Javascript or even Jquery will do. Thanks in advance. The line should be changed when the page loads.
jQuery, using addClass:
$('#activehome').addClass('active');
pure JS, using setAttribute:
document.getElementById('activehome').setAttribute('class', 'active');
or using className
document.getElementById('activehome').className = 'active';
$("#activehome").addClass('active');
$("#activehome > a").text('Home');
I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit
If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.
$('.listTab a').click(function(e){...});
One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output
I have to convert user entered unordered lists in a content management system into a bootstrap menu (navbar) using jquery.
80% there apart from one challenge that I can't figure out a nice solution for - ie one that uses selectors rather than string manipulation or regex. After all, we all know that we never parse html with regex :)
So, using the limited UI tools at the user's disposal, they generate a list, usually a two level nested list something like this
<ul>
<li>Blah1
<ul>
<li><a href='http://xxxx'>Blah1a</a></li>
<li><a href='http://yyyy'>Blah1b</a></li>
<li>Blah1c</li>
<li><a href='http://zzzz'>Blah1d</a></li>
</ul>
</li>
<li><a href='http://aaaa'>Blah2</a></li>
<li>Blah3
<ul>
<li><a href='http://xxxx'>Blah2a</a></li>
<li><a href='http://yyyy'>Blah2b</a></li>
</ul>
</li>
</ul>
And so on... The important thing is that some of their list items are links, some are just text.
I need to select each block of text contained in an <li> that is not already wrapped in an <a> and wrap it in an <a href="#"> so that the above would be transformed into:
<ul>
<li><a href='#'>Blah1</a>
<ul>
<li><a href='http://xxxx'>Blah1a</a></li>
<li><a href='http://yyyy'>Blah1b</a></li>
<li><a href='#'>Blah1c</a></li>
<li><a href='http://zzzz'>Blah1d</a></li>
</ul>
</li>
<li><a href='http://aaaa'>Blah2</a></li>
<li><a href='#'>Blah3</a>
<ul>
<li><a href='http://xxxx'>Blah2a</a></li>
<li><a href='http://yyyy'>Blah2b</a></li>
</ul>
</li>
</ul>
Shouldn't be that difficult I'm sure, but after an hour of playing I'm getting nowhere.
Try
$('li').contents().filter(function(){
return this.nodeType == 3 && $.trim($(this).text()).length > 0
}).wrap('<a href="#" />')
Demo: Fiddle
One line of code here:
$("li").not(":has(>a)").wrapInner('<a href="#" />');
jsFiddle
So, if you want to just get the text nodes than, yeah, use .contents(), which will get all nodes, including text nodes. Here are 2 methods you can use below for this:
$("li").not(":has(>a)").contents().filter(function(){
return this.nodeType == 3 && $.trim($(this).text()).length > 0
}).wrap('<a href="#" />');
jsFiddle
And here is another approach, just for the sake of something different:
$("li").not(":has(>a)").each(function(){
var $contents = $(this).contents();
if ($contents.length)
$contents.eq(0).wrap('<a href="#" />');
});
jsFiddle
I want to have a custom button to appear on the right side of my list view header named 'Click Me', which will perform an action via the 'on click' event. As far as I know JQuery does not have a standard way to achieve this but perhaps you know how to achieve this.
As an illustration to what I want to achieve, take a look at http://jquerymobile.com/test/docs/buttons/buttons-icons.html.
Imagine now that you are looking at list headers where the data icon is on the right side and instead of it being an icon it says 'Click Me'. Furthermore, the List Header cannot be clickable like its elements, instead the data icon must be the only clickable element in here.
Please let me know if you have any ideas, even if this is simply impossible to achieve due to JQuery, thanks!
This is what I was looking for:
<ul data-role="listview">
<li data-role="list-divider">
Fruits
<span class="ui-li-count">
<a href="#" data-role="none" data-theme="b">
Button
</a>
</span>
</li>
<li>Apples</li>
<li>Grapes</li>
<li>Others</li>
</ul>
Note that the list divider contains a SPAN which acts as a button... quite ingenious :)
Anyways, thanks for your help!
You are looking for a Split Button list
This is an example you can put two icon buttons inside:
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Opciones de platillo</li>
<li><a href="#" >Notas</a></li>
<li>
Tiempo
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>
Comensal
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>Modificadores</li>
<li>Terminadores</li>
<ul>
</div>