I am trying to have input in dropdown menu in founation, but once input is clicked, whole menu hides, how can I achieve such behaviour?
This is codepen of one of original examples, with just input added:
<input />
https://codepen.io/anon/pen/RqyroK
To achieve what you want you can change this line:
<ul class="dropdown menu" data-dropdown-menu>
To this:
<ul class="dropdown menu" data-dropdown-menu data-close-on-click-inside="false">
An explanation of all dropdown plugin options can be found here.
Related
in my page
foreach ($json->items as $sam) {
$link= $sam->id->videoId;
echo''.$link.'';
//its showing last 5 youtube video id ok.. i set every video id witha button for modal
echo'<button type="button" data-toggle="modal" data-target="#PlayModal" class="btn btn-outline btn-danger">Play</button>';
}
but when im trying to open a model by box in new winddow pop up there only show 1st video ID. modal not getting '.$link.' valu in popup window. modal code puting same page blew finish {}
echo'<div class="modal inmodal" id="PlayModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-body">
<p>'.$name.'</p>
<div class="modal-footer">
<button type="button" class="btn btn-outline btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>';
According to the code given, even the first video should not play.
it is not printing the value of LINK inside the button, so it will not work.
Unless you have a JAVASCRIPT code observing the click and playing the video on click.
You can create the HTML code first manually containing the 5 video ID, and each video should have a button (according to your description), when clicked it will open the modal.
once that is done, you will be able to use php for each to properly echo the html code.
alternatively, the videos are in HTML list, and javascript will handle the event click, reading the video ID and passing to the player in the modal.
in either case, you need to understand the HTML structure first.
Is it possible to open a Foundation 6.3 accordion menu from a regular href link on the same page? I'm using the most current Foundation v6.3.1 and have found some info on doing this but nothing that works in my case.
This post seems to have an ideal solution (Trigger opening of a Zurb Foundation Accordion via URL hash link) but it doesn't seem to jell with the latest release?
Yep, there are some alternative methods and the exact way it's applied is up to what you want to achieve, but basically the answer is: "use JavaScript".
This is my method:
Add a means of identifying the CONTENT of each tab you want to open. Below I have added a new data attribute (data-remote) to .accordion-content.
Create a link that has an id that corresponds to the new data-remote on the tab you want to open with that link. e.g. id="toggleAco1" & data-remote="toggleAco1"
Use the in-built Foundation function to toggle the tab on click (see JS/JQ below)
So all together it is something like this:
HTML
<div class="block">
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
Accordion 1
<div class="accordion-content" data-tab-content data-remote="toggleAco1">
<p>Panel 1. Lorem ipsum dolor</p>
Nowhere to Go
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 2
<div class="accordion-content" data-tab-content data-remote="toggleAco2">
<textarea></textarea>
<button class="button">I do nothing!</button>
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 3
<div class="accordion-content" data-tab-content data-remote="toggleAco3">
Pick a date!
<input type="date"></input>
</div>
</li>
</ul>
</div>
<div class="block">
Open accordion tab 1
Open accordion tab 2
Open accordion tab 3
</div>
JS/JQ
$('a').on('click', function() {
var dataTarget = $(this).attr('id');
$('.accordion').foundation('toggle', $('[data-remote="' + dataTarget + '"]'));
});
A simple JSFiddle example
The advanced options from the docs
N.B. What the links will do is linked to the data attributes you include and the same as if you clicked the accordion title for a tab. So if you allow multi-opening then the links will open each and leave it open, if you don't (as in the e.g.) then they will close once a new one is open etc.
<form [formGroup]="variation" (ngSubmit)="onSubmit()">
<ion-list radio-group formControlName="color" *ngFor="let option of options">
<ion-list-header>
{{option.name}}
</ion-list-header>
<ion-item *ngFor="let opt of option.options">
<ion-label>{{opt}}</ion-label>
<ion-radio value="{{opt}}"></ion-radio>
<!--<ion-input type="text" formControlName="color" name="color" value=""></ion-input>-->
</ion-item>
</ion-list>
<button class="custom-button" block (click)="goToCart()">Submit</button>
</form>
Above is my forms in modal
I failed to push to another page from Forms in Modal.
Below is my push to another page method
goToCart() {
this.nav.setRoot(CartPage);
}
Below picture is after I clicked submit button in the form, the modal only slided half
Image to display problems
This is the code:
https://github.com/vinnchan/FormInModal
This app include first page that allow to click and open modal. You click the open modal button.
After that you click submit button and go to cart page.
Now you at cart page, when you click the side menu, it won't open.
I viewed the browser console pane, showed no error(s).
Try to dismiss the modal when submitting:
<button class="custom-button" block (click)="goToCart();dismiss();">Submit</button>
I've created a quiz in ColdFusion with questions in one table and answers in another; it's multiple choice and each answer is presented as a member of a radio group. I'm looping through my recordset, rsAnswers, to output the radio group. I need to get the database ID of the selected radio button for an Insert operation and can't figure it out.
Here's how I'm outputting the question and answers:
<h3>Question #<cfoutput>#Session.theQuestion#</cfoutput></h3>
<h3><cfoutput>#rsQuestion.rrqQuestion#</cfoutput></h3>
<ol type="A" id="answerList">
<cfoutput query="rsAnswers">
<li>
<label>
<input type="radio" name="theAnswers" id=#rsAnswers.ID#" value="#rsAnswers.rraValue#" />
#rsAnswers.rraAnswer#</label>
</li>
</cfoutput>
</ol>
If I could retrieve the ID attribute of the selected radio button, I'd be fine, but I don't see a way to do that in CF. What am I missing?
TIA - Joe
When you post the form over, CF only gives you the value of the selected radio button from the form scope. If you need the ID, you should set it as the button value:
<input type="radio" name="theAnswers"
id=#rsAnswers.ID#" value="#rsAnswers.ID#">#rsAnswers.rraAnswer#</label>
I am a real beginner with Selenium and JUnit and trying to validate the functionality of a dropdown list by choosing one item. Selenium is recording it using the dynamic id, so when trying to rerun it, it cannot find the element.
I tried a few approaches in my JUnit code, but I can't seem to get it right.
It's a "View" dropdown list, where the first item is "Themes"
This is my html:
<div id="yui_3_16_0_1_1406046071286_1213" class="commontasks shaded">
<div id="pagetoolbar" class="hasnomsg hideReplyGroup">
<div id="match-messagelist-sizing">
<span id="btn-ml-cbox" class="btn btn-hdr cbox collapse-end-space" tabindex="0" aria-label="Select or deselect all messages [Ctrl+A]">
<span id="btn-select-dd" class="btn neoFocusable enabled" aria-label="Select or deselect categorized messages" aria-haspopup="true" role="button" data-action="select-dd">
<span id="btn-conv-view" class="btn btn-absolute btn-view-dd" data-action="menu" title="More view options" aria-haspopup="true" role="button">
<span id="yui_3_16_0_1_1406046071286_1215" class="icon-text">View</span>
<b id="yui_3_16_0_1_1406046071286_1212" class="icon icon-chevron-down"></b>
</span>
</div>
</div>
I tried using the following code to open the list:
driver.findElement(By.xpath("/html/body/div[7]/div[3]/div[4]/div[2]/div1/div[2]/div/div/span[3]/b")).click();
But when I'm running the test from Eclipse, it completes successfully, but I do not see the list opening. Is there a way to continue from here and choose an item from the list?
I tried using the Select option:
Select select = new Select(driver.findElement(By.xpath("/html/body/div[6]/div[3]/div[4]/div[2]/div1/div[2]/div/div/span[3]/span[text() = 'View']")));
But recieved the following error:
org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "span"
I would really appreciate your comments.
Thanks
Assuming that id (yiu-*) are dynamic, I am using CSS Selector. Try the below code:
driver.findElement(By.cssSelector("div#pagetoolbar b.icon-chevron-down")).click();
for your second question, you can use only SELECT element of HTML for the Select class. As the error clearly says you are trying to use it on a SPAN element.