I want to get element which not contain certain text and click on its closest button - element

I want to get any element which not have "author-name user1" and click on button on that certain item block.
For example there are too many users and every user have a drawer menu I want to open drawer menu of anyone expect my own
cy.get(".author-name").not().contains("User1").closest("button.btn").click()
<div class="item1">
<div class="slideInRight animated">
<div class="status">
<div class="status-meta">
<div class="author-name"> User1 </div>
</div>
</div>
</div>
<partie-drawer-menu>
<buton class="btn"> This is Button</buton>
<div class="menu-drawer">
<div class="content">
Menue Drawer Contents
</div>
</div>
</partie-drawer-menu>
</div>
<div class="item2">
<div class="slideInRight animated">
<div class="status">
<div class="status-meta">
<div class="author-name"> User2 </div>
</div>
</div>
</div>
<partie-drawer-menu>
<buton class="btn"> This is Button</buton>
<div class="menu-drawer">
<div class="content">
Menue Drawer Contents
</div>
</div>
</partie-drawer-menu>
</div>
<div class="item3">
<div class="slideInRight animated">
<div class="status">
<div class="status-meta">
<div class="author-name"> User3 </div>
</div>
</div>
</div>
<partie-drawer-menu>
<buton class="btn"> This is Button</buton>
<div class="menu-drawer">
<div class="content">
Menue Drawer Contents
</div>
</div>
</partie-drawer-menu>
</div>
I want to get any element which not have "author-name user1" and click on button on that certain item block.
For example there are too many users and every user have a drawer menu I want to open drawer menu of anyone expect my own

I am able to found certain element and able to click on it but not able to stop for each loop. return false is not working
any solution please
cy.get("div.author-name").each(($el, index, $list) => {
var $name = $el.text();
if ($name !== " User1") {
cy.log(index);
cy.get($el).closest("partie-feed-item").find("button.btn> img").click();
return false
}
I am able to found certain element and able to click on it but not able to stop for each loop. return false is not working
any solution pleaseSee Image Please

Related

Accordion open next on button click

Hi been searching for few days now but couldnt find anything. I have an accordion that has three accordion group, I have added a button to open the next accordion but cant seem to get it working. Can some one please help. here is what I have so far
<accordion [closeOthers]="true" style="margin-top:5px;">
<accordion-group *ngFor="let registration of registrationArray; let i = index" #groupval style="margin-top:5px;" [isOpen]="registration.isAccordionOpen">
<div accordion-heading style="width:100%;">
Registrant No. {{i + 1}}
<i class="pull-right float-xs-right glyphicon"
[ngClass]="{'glyphicon-chevron-down': groupval?.isOpen, 'glyphicon-chevron-up': !groupval?.isOpen}"></i>
</div>
<form [formGroup]="myGroup" (ngSubmit)="gotoAddons(myDetails)">
<div formArrayName="myDetails">
<div class="panel-body" [formGroupName]="i">
<div style="padding-top:20px;clear:both;">
<div style="width:100%;background-color:#578ebe;border: 1px solid #7ca7cc;">
Your Address
</div>
<div style="padding-top:30px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
<span class="required">*</span><label>Address Line 1</label>
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input autofocus class="form-control" type="text" id="address" name="address" formControlName="address" required>
<div *ngIf="myGroup.controls.myDetails.controls[i].controls.address.errors && (myGroup.controls.myDetails.controls[i].controls.address.dirty || myGroup.controls.myDetails.controls[i].controls.address.touched || submitted)" class="alert alert-danger">
<div [hidden]="!myGroup.controls.myDetails.controls[i].controls.address.errors.required">
Address Line 1 is required!
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%;" *ngIf="i < registrationArray.length - 1">
<div style="float:right;">
<button (click)="groupval.isOpen = !groupval.isOpen" class="btn green">Open next tab</button>
</div>
</div>
<div style="width:100%;" *ngIf="i == registrationArray.length - 1" >
<div style="float:right;">
<button type="submit" class="btn green">Continue</button>
</div>
</div>
</div>
</div>
</form>
</accordion-group>
</accordion>
Removed some code for clarification. Can some one please let me know how I can open the next accordion group on the button click. Thanks in advance
Here is a working example
plunkr
stackblitz link
stackblitz
In your case I see that you're actually just closing the opened panel and that's all. Along with this you need to open a next panel which can be done by setting its isOpen property to true.
A small plunkr with test implementation - https://stackblitz.com/edit/ngx-bootstrap-ifmpph?file=app/app.component.html

How to create popup menu with horizontal sub-menu in SEMANTIC

I wanna create horizontal sub menu when I click dropdown menu with SEMANTIC CSS. I just want like picture below. Thank you in advance!
Actually this is not a dropdown menu , you're looking for Popup , you can create your horizontal sub menu by creating first your menu button , then linking it to your Popup Content , like the following :
[Demo]
HTML
<div class="ui text menu">
<div class="item">
<img src="https://semantic-ui.com/images/new-school.jpg">
</div>
<!-- Your menu button -->
<a class="browse item">
Browse Courses
<i class="dropdown icon"></i>
</a>
<!-- /Your menu button -->
</div>
<!-- Your Popup Content -->
<div class="ui flowing basic admission popup">
<div class="ui three column relaxed divided grid">
<div class="column">
<h4 class="ui header">Business</h4>
<div class="ui link list">
<a class="item">Design & Urban Ecologies</a>
<a class="item">Fashion Design</a>
<a class="item">Fine Art</a>
<a class="item">Strategic Design</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Liberal Arts</h4>
<div class="ui link list">
<a class="item">Anthropology</a>
<a class="item">Economics</a>
<a class="item">Media Studies</a>
<a class="item">Philosophy</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Social Sciences</h4>
<div class="ui link list">
<a class="item">Food Studies</a>
<a class="item">Journalism</a>
<a class="item">Non Profit Management</a>
</div>
</div>
</div>
</div>
<!-- /Your Popup Content -->
JS(jQuery)
$('a.browse.item')
.popup({
popup : $('.ui.flowing.basic.admission.popup'),//Popup Content selector
on : 'click', //Event trigger
position : 'bottom left',
lastResort:true,
})
;
In popup settings you can choose your event trigger like on:'click' , it can be either like: focus,hover... , for more settings see Popup Settings.
[DOCS]

displaying same div on click side by side and limit it to screen width with latest click first

i am new in web development. i have data(username) appearing on website. Now, i want to make popups, chat boxes just like facebook. each username has different div id. I already have a div for chat box(msg_box). I need this div to show up side by side on each click at bottom of page . also latest clicked username appear first. thanks.
<script>
$(document).ready(function(){
$(".nameid").click(function() {
var text = $(this).text();
document.getElementById("bb").innerHTML=text;
});
});
</script>
/head>
<body>
<div class="container">
<div class="header">
</div>
<div class="leftblock">
</div>
<div class="chat_box" id="cb">
<div class="chat_head_left"></div>
<div class="chat_head_right"></div>
<div class="chat_head">Members</div>
<div class="chat_body">
<?php
for($i=1;$usernamee=mysqli_fetch_assoc($records); $i++)
{
echo "<div class='nameid' id='$i' <b>".$usernamee['username']."
</br>"."</b></div>";
}
?>
</div>
</div>
<div class="msg_box" style="right:290px">
<div id="bb" class="msg_head">
<div class="close">x</div>
</div>
<div class="msg_wrap">
<div class="msg_body"></div>
<div class="msg_footer" ><textarea class="msg_input"
rows="4">sample</textarea></div>
</div>
</div>

form renderedred into modal didn't work well

I'm developing an application with symfony3. I'm using material design to customize my twig templates.
So in one of my templates, I have a hidden modal in which I'm rendering a form having a text and a select fields.
My problem is that select field didn't show the options that could be showed and that only in the modal.(if the form is rendered outside the modal it works well the problem exists when the form is rendered into the modal)
This is the link who let me open the modal :
<div class="uk-width-medium-1-3">
<div class="parsley-row"
style="padding-top: 22px;"
>
<div class="uk-input-group">
<a data-uk-modal="{target:'#modal-ajouterRue'}"><i class="material-icons md-24"></i>
</a>
</div>
</div>
</div>
This is the modal:
<div class="uk-modal" id="modal-ajouterRue">
<div class="uk-modal-dialog">
<button type="button" class="uk-modal-close uk-close"></button>
<div class="uk-modal-header"><h2>Ajouter une Rue</h2></div>
{{ render(controller("GeoTunisieBundle:Rue:new")) }}
<div class="uk-modal-footer uk-text-left">
<button type="button" class="md-btn md-btn-primary" onclick="newRue()">Save</button>
</div>
</div>
</div>
What do I have to do?

Logo component - In design mode unable to see the edit toolbar for this component

<%#include file="/libs/foundation/global.jsp"
%>
<div class="container_16">
<div class="grid_8">
<cq:include path="logo" resourceType="/apps/traningCQ5/components/logo" />
</div>
<div class="grid_8">
<div class="search_area">
<div> userinfo </div>
<div> toptoolbar </div>
<div> search </div>
<div
class="clear"></div> </div>
</div>
</div>
The above code includes logo component. This is added in header.jsp however, if I add this component anywhere else it works but not in header.
Could any please help me in this ?