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
Related
I set daisyUI but not figure out how to control modal by condition
I think similar with flowbite or bootstrap
https://flowbite.com/docs/components/modal/
but daisyUI not implement hidden class yet, and there have
modal-open method in libary
https://daisyui.com/components/modal/
<link href="https://cdn.jsdelivr.net/npm/daisyui#2.13.6/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- The button to open modal -->
<label for="my-modal-4" class="btn modal-button">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-4" class="modal-toggle">
<label for="my-modal-4" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<h3 class="text-lg font-bold">Congratulations random Interner user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
</label>
</label>
so how can we config the modal view present visible?
thanks a lot
Another way of doing this would be by manipulating the input checkbox element inserted before the modal div.
If you console log this element's value you'll notice that it's set to "true" when the model is open and "false" when it's closed.
If you want the modal to be open by default you can use:
document.getElementById('my-modal-4').checked = true;
when the page/component is rendered
I know that this is kinda old question but might help someone in the future,
<input
checked={true}
type="checkbox"
id="add-new-phone-number"
className="modal-toggle"
/>
you can bind the checked attributes of the input to your state if your using react
Just follow modal-id dynamic add/remove attributes '.modal-open' class by javascript
will be done
<label for="my-modal-4" class="btn modal-button modal-open">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-4" class="modal-toggle">
<label for="my-modal-4" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<h3 class="text-lg font-bold">Congratulations random Interner user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
</label>
</label>
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 />
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've read several of the other questions stackoverflow suggested and tried things that worked for others, but I can't seem to get this listener to work without putting it in the content being loaded via jquery ajax.
I have the following skeleton:
<form name="questionnaire">
<div id="container">
/* empty until content is loaded into it */
</div>
</form>
And content like this is loaded into the above
<ul>
<li>Name</li>
<li><input type="text" name="q1" />name</li>
<li><input type="radio" name="q1" />REF</li>
</ul>
<ul>
<li>Location</li>
<li>
<select name="q1">
<option value="USA">USA</option>
<option value="Canada">Canada</option>
</select>
</li>
</ul>
The following seems pretty simple, and the .live() documentation sounds like this is what I want, but no dice.
$("input,select").live("change", function() {
alert("changed!");
}); // including this with the loaded content produces an alert on change
I would rather this listener be in the main area and apply it to the loaded content.