I'm super new to Javascript and I need help solving this problem.
I have created a list and I would like the font weight of the selected element to be bold and the opacity of the non-selected element dropping to .5 on the click.
I understood that I need to use an eventlistener "click" but I´m pretty stucked, if someone can give me some hints will be greatly, greatly, appreciated.
<div class="media">
<ul>
<li class="language" id="italian">Italian</li>
<li class="language" id="english">English</li>
</ul>
</div>
I do not know exactly what you are trying but changing CSS via java script, one way
<li class="language" id="selectedElement">Italian</li>
<li class="language" id="nonSelectedElement">Italian</li>
function click() {
document.getElementById("selectedElement").style.fontWeight = "bold";
document.getElementById("nonSelectedElement").style.opacity = 0.5;
}
Related
<ul data-role="listview">
<li data-role="list-divider">A</li>
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li data-role="list-divider">B</li>
<li>Bob Cabot</li>
</ul>
how can i change the scetion color? thank you.
I'm not sure if you're asking a simple change of color. But if I'm right :
You should simply add a class.
Then go to the css and there just add a .classname{ background-color: #color;}
Is that you are asking for ?
Is possible to make a standard jquerymobile listview without the right arrow image that apears on the rigt of the li object?
Standard list view
Thanks
In versions of jQuery Mobile >= 1.0, use the data-icon attribute:
<li data-icon="false">Your Text</li>
data-icon="false" attribute removes the arrow.
Another way of doing this will be by adding data-icon="false" to the ul instead of li as indicated by Jacob above.
<ul data-role="listview" data-icon="false">
This way, all child objects within the listview will by default carry no icons.
If icon still persist just remove a tag or wrap it with a div.
e.g
<div>
<a> //your stuff here </a>
</div>
add data-icon-"false" on the li tag
I built a listview using jquery mobile. However, I would like to have a little more body text than what fits on a typical mobile screen.
<article id="military_list">
<ul data-role="listview" data-inset="true">
<li><a href="barracks">
<img src="../img/structure/barracks.png"/>
<h3>Barracks</h3>
<p>Fearless fighters weilding with shield and sword</p>
</a></li>
<li><a href="mage">
<img src="../img/structure/mage.png"/>
<h3>Mage Quarters</h3>
<p>Where magical folk live</p>
</a></li>
</ul></article>
It takes the <p></p> tag and abbreviates it automatically. Is there a way to instead simply jump down a line? There appears to be a lot of space left over in the block.
Heres an example:
As you can see in the yellow area, it cuts off the string and adds 'grant you...' rather than going to the next line.
Use this css:
.ui-li-desc {
white-space: normal !important;
}
Here's an example: http://jsfiddle.net/Gajotres/3ZVeN/
Here is the link to existing sortable http://jsfiddle.net/bcAH2/5
Just copying the code,
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default four">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
...
</ul>
Script
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$("#sortable .four").css("height","190px");
});
What I am trying to achieve is to fill spaces below cells 1 2 3 with cells like 5 6 7 8... Is it not possible by drag and drop?
There's a jQuery plugin called gridster that might do what you want (see the demo in the front page). A simpler but less flexible alternative, as explained in more detail in this answer, is to create several columns and make each one sortable, connecting them to allow dragging from one to another. Here's an example close to yours, but not with some caveats:
You can have tiles with greater height, but not with greater width, without messing the layout (gridster does not have this limitation);
You can't have "empty spaces" between two tiles in one column (gridster has less limitations on that);
If you remove all tiles from one column, it will disappear (unless you style it to have a fixed width, with or without contents; gridster does not have this limitation).
The problem here is not in drag and drop, but the flow of the floated elements.
All the elements after "four" will align to it, and since it's higher - it takes more space. So the space in the second row in front of "four" is actually not the part of the "grid".
Actually, there is no grid here, since you're working with floated elements.
Hope this helps you to understand why it can't be achieved with the current styling and scripting.
I found this elegant plugin, ShapeShift which does the job nicely
There is another forked version of gridster, thought worth sharing here, gridster.js Forked
I have a UIWebView with a list of images
<ul>
<li> <img src="foo"></li>
<li> <img src="foo"></li>
<li> <img src="foo"></li>
</ul>
Originally it seemed to work fine when I didn't style it, but now that I have wrapped the images in a div and added some css styling to make position:relative or absolute it won't render during scrolling.,
<ul>
<li>
<div class="stylish"><img src="foo"></div>
</li>
<li>
<div class="stylish"><img src="foo"></div>
</li>
<li>
<div class="stylish"><img src="foo"></div>
</li>
</ul>
nothing shows up until scrolling completely stops. And then it flashes into view immediately.
So it looks like if I have any html elements with a position absolute or relative, it won't render until the scrolling is completely finished stopping. Oddly enough removing the position attributes from the css allowed the elements to render on scroll. Using a javascript library like iScroll also fixed the problem, but iScroll is much jerkier than native momentum scrolling on iOS.
Is there anything I can do to have it render or show as it scrolls, maybe even have it start rendering on deceleration or something rather than having to wait for it to completely stop?
Based on experimentation, UIWebView will not render anything during scrolling that does not have a css position property of "static". Relative and absolute will both cause the elements to not render until the scroll is completely stopped.