I'm trying to build an multiple image slider and the problem is I cant show booth sliders at same time.
I extract the slider from CodePen
There is an example page with 2 sliders Example.
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
(....)
</ul>
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
(....)
</ul>
If someone could help me was perfect!
You have two problems:
1) You need each slider's radio elements to be unique (e.g. both cannot be radio-btn)
2) Each image (1-6) in each slider shares the same id, which is invalid as an id should only be used ONCE per page (e.g. in each of your sliders, your first image has id="img-1").
See my JSFiddle for corrects to your code. Notice how both sliders now work?! Woot woot!
All I did is add -1 to the first slider's elements, and -2 to all of the second slider's elements!
E.G. FIRST SLIDER
<input type="radio" name="radio-btn" id="img-2" checked />
BECAME
<input type="radio" name="radio-btn-1" id="img-1-2" checked />
E.G. SECOND SLIDER
<input type="radio" name="radio-btn" id="img-5" checked />
BECAME
<input type="radio" name="radio-btn-2" id="img-2-5" checked />
Related
i am developing a smart tv application. i am having a trouble to add navigation on the list items. List items contains
<div class="work">
<img alt="" src="./images/img_title_work.png" class="title" />
<ul>
<li>
<img alt="" src="./images/1_1.png" class="title" />
<label>What is killer contents?
<p>2012.06</p>
</label>
</li>
<li>
<img alt="" src="./images/1_2.png" class="title" />
<label>Handmade application
<p>2012.05</p>
</label>
</li>
</ul>
</div>
I want whenever user press right nav button from remote a focus class is added to the next item and removed from the first. similarly if user again press right the focus class should be added to third item. and similar case with left navigation. This project is in html css js. Thanks
I am trying to select individual selection and in hidden a input checkbox in an un-ordered list.
Issue: When I click on one it selects all instead of one
I need just like checkbox in list with hidden input checkbox
here is my code shared in jsFiddle
<ul class="checkbox_list">
<li>
ravi
<p>2343534656 - U44BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c1">
</li>
<li>
arvi
<p>2343534656 - U444BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c2">
</li>
<li>
jiva
<p>2343534656 - 444BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c3">
</li>
</ul>
You need to use clicked element context this to target correct element:
$('.checkbox_list li').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'));
});
Working Demo
So I have two radio buttons here, and I'm trying to link them up. Due to the fact that they are in two different forms, they don't seem to work as I expected. The forms are required in Bootstrap in order to display the correct style I desire. Here's a snippet of my code:
<ul class="list-group">
<li class="list-group-item list-heading">Notification Display Options</li>
<li class="list-group-item">
<form class="form-inline" role="form">
<div class="radio">
<label>
<input type="radio" id="noti_display_time" name="noti_display"> <span trans="shownotificationfor">Shows for</span>
<div class="form-group">
<input id="show_noti_time" type="number" class="form-control" max="60" min="1" data-requires="noti_display_time">
</div> <span trans="seconds">seconds</span>
</label>
</div>
</form>
</li>
<li class="list-group-item">
<form class="form-inline" role="form">
<div class="radio">
<label>
<input type="radio" name="noti_display">Close manually
</label>
</div>
</form>
</li>
</ul>
http://jsfiddle.net/DerekL/4YfB9/show (Do not view it inside the jsFiddle preview window since the style changes as the window size changes)
Is there a solution to this without messing up the style? Thanks.
JavaScript will be my last resort, if there is no workaround.
Just wrap one form around the <ul>. Using 2 forms just to manage style doesn't make much sense.
<form>
<ul/>
</form>
DEMO
So I have a list of notices in AngularJS which I create with ng-repeat. The notices have a visibility status which determines whether the notice is shown in the list. Every notice has controls which allow that notice to be hidden, a simple button that changes the notice.status.visibility to false.
I also have a checkbox input that is supposed to show hidden notices. However, I am unsure on how to implement this and how would it work.
Here's the HTML:
<ul>
<input type="checkbox" value="Show Hidden" />
<li ng-repeat="notice on notices | filter: filter.search">
<div ng-show="notice.status.visibility">
<!-- notice details -->
</div>
</li>
</ul>
Maybe with something like this:
<ul>
<input type="checkbox" value="Show Hidden" ng-model="showHidden" />
<li ng-repeat="notice on notices | filter: filter.search">
<div ng-show="showHidden || notice.status.visibility">
<!-- notice details -->
</div>
</li>
</ul>
I'm using JQuery UI to generate and load a tab when the user clicks a button using advice from this question that I asked earlier. It loads the data fine, but it is not applying the CSS styles that were present when the page was static.
function createTab2() {
// this will add a tab
$("#tabs").tabs("add","#tabs-2","1: Population Density");
$("#tabs-2").load('tabs/tab2.php');
$('#tabs').tabs('select', "#tabs-2");
}
My original static file contained the following:
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
</ul>
<div id="tabs-1" style="height:300px;"> <!-- Start Tab 1 -->
<form >
<div id="radio-b1">
<input type="radio" id="b1" name="type" value="1" /><label for="b1">Radio Button 1</label>
</div>
</form>
</div> <!-- End Tab 1 -->
<div id="tabs-2" style="height:250px;"> <!-- Start Tab 2 -->
<form >
<div id="radio-p1">
<input type="radio" id="radio4" name="pop_den_1" value="1" /><label for="radio4">Radio Button 2</label>
</div>
</form>
</div> <!-- End Tab 2 -->
I replaced Tab 2 with a button that called the javascript function createTab2() and saved the following code in tab2.php:
<div >
<form >
<div id="radio-p1">
<input type="radio" id="radio4" name="pop_den_1" value="1" /><label for="radio4">Radio Button 2</label>
</div>
</form>
</div> <!-- End Tab 2 -->
I don't fully understand if I need to be adding properties to #tab-2 when I create it (such as setting an id value, or other properties.
The javascript function that you wrote wont automatically add styling to your elements. It will only use the styling that are there in the included jqueryui.css. I see you only have one style line in the tabs-2 in your static markup if this is the only style you want to apply to it you should just write a single js line to add this style.
This is the line that you have in your tab-2 style
style="height:250px;"
to apply this style you can do it the following way
$("#tabs-2").css("height", "250px");
do this before loading the tab or before calling the select on tabs-2