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>
Related
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
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]
Basically, I want to be able to send a link in email that links to my website that when clicked, it opens the site and the modal I added to the link. In other words, how can I send a link that will open the modal automatically?
here is my modal I want to open:
<div id="modal-video11" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" align="center">State of the Table Grape Industry with Barry Bedwell</h4>
</div>
<div class="modal-body">
<div class="videoWrapper">
<p align="center"><iframe width="420" height="315" src="https://www.youtube.com/embed/PYq5hi5Y9rI" frameborder="0" allowfullscreen></iframe></p>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-pnp center-block" href="https://www.youtube.com/user/CaliforniaAgNet">View MORE Videos On Our Youtube Channel!</a>
</div>
</div>
</div>
</div>
why can't I link it like this? : http://www.americanvineyardmagazine.com/index.html#modal-video11
I also tried using this javascript at the end of my page but it made no difference. The modal doesn't open:
<script type="text/javascript">
$(document).ready(function() {
if(window.location.href.indexOf('#modal-video11') != -1) {
$('#modal-video11').modal('show');
}
});</script>
Try this out:
jQuery(function($){
$(document).ready(function() {
if(window.location.href.indexOf('#modal-video11') != -1) {
$('#modal-video11').modal('show');
}
});
});
The code you are posting is correct, but there is a javascript error in that page. You are trying to use jquery ($) in line 143 before loading jquery (line 2001).
If you put that code after loading jquery (at the end), it should work.
<script type="text/javascript">
$(document).ready(function() {
if(window.location.href.indexOf('#modal-video11') != -1) {
$('#modal-video11').modal('show');
}
});
</script>
I'm trying to get a bootstrap 3 modal to pop in a meteor app without any success at all. Everything seems to be in place, I've scoured here and else where and it simply won't work.
The HTML is
<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
<div class="modal fade in show" id="projectImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<p> Hi There</p>
<div class="modal-dialog">
<div class="modal-content">
<p> Hi There again</p>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Big Image</h4>
</div>
<div class="modal-body">
<img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
</div>
</div>
</div>
</div>
</template>
Which is triggered from a click event on an image thumbnail (which is working according to console.log
The code trying to show the dialog is
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
Session.set("selectedImageId", t.data._id);
console.log("Image ID: "+ Session.get("selectedImageId"));
//var stuff=$('#projectImageModal');
//console.log(stuff);
//stuff.modal('show');
// $('#projectImageModal').modal().modal("show");
$("#projectImageModal").modal("show");
//$('#projectImageModal').modal('show');
//$('.projectImageModal').modal('show');
}
};
Which is largely pulled directly from the cfs-file-handler example (which doesn't used bootstrap and calls the modal().modal("show") version to get the modal to pop).
You can see the variations I've tried. The console shows that the event is fired, the selector seems to be working but.. the modal NEVER pops.
Thanks. Peter.
I have tried the code below and it works as expected. If I add show to class="modal fade in" the modal immediately appears. If in your case it doesn't you are probably missing something else that is not shown in the sample code.
HTML
<head>
<title>modal</title>
</head>
<body>
{{> projectImageItem}}
{{> projectImageModal}}
</body>
<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
<div class="modal fade in" id="projectImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Big Image</h4>
</div>
<div class="modal-body">
<img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
</div>
</div>
</div>
</div>
</template>
<template name="projectImageItem">
<input type="button" class="open-modal" value="Show modal." />
</template>
JS
if (Meteor.isClient) {
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
$("#projectImageModal").modal("show");
}
};
}
We are developing a Tab Component in CQ5/AEM. The component contains 3 Tabs and each tab has one CQ5 text component to edit content.
But only the first tab's Text Component is editable as it is shown by default. The other text components which are in hidden tabs content area are not accessible to edit.
Sample code:
<div>
<div>
<div id="tabcnt1">
<div id="tab1" class="tablink">Tab 1</div>
</div>
<div id="tabcnt2">
<div id="tab2" class="tablink">Tab 2</div>
</div>
<div id="tabcnt3">
<div id="tab3" class="tablink">Tab 3</div>
</div>
</div>
<div class="plantabcontent">
<div id="plancontenttab1" class="plancontent">
<cq:include path="plandescription1" resourceType="libs/foundation/components/text" />
</div>
<div id="plancontenttab2" class="plancontent" style="display:none;">
<cq:include path="plandescription2" resourceType="libs/foundation/components/text" />
</div>
<div id="plancontenttab3" class="plancontent" style="display:none;">
<cq:include path="plandescription3" resourceType="libs/foundation/components/text" />
</div>
</div>
Script:
$(document).ready(function(){
$('.tablink').click(function(){
$(".tablink").removeClass('selecttab').addClass('plantxt');
var tabid = $(this).attr("id");
$("#"+tabid).addClass('selecttab').removeClass('plantxt');
$(".plancontent").hide();
$("#plancontent"+tabid).show();
});
});
The 'plandescription1' is visible by default and it is working fine. But the hidden text components are not working while enabling them by changing tabs.
Kindly show me some light. Thanks in advance.
It's important to load the tab components (text component) when loading the page. In case the components are disabled by default the components are not initialized by AEM. So disable the 'hidden' tabs on document.ready instead of using the style="display:none".
In the example I have added the $("div.plancontent:not(:first)").hide(); to disable all tabs except the first.
Example:
<div>
<div>
<div id="tab1" class="tablink">Tab 1</div>
<div id="plancontenttab1" class="plancontent">
<cq:include path="plandescription1" resourceType="/libs/foundation/components/text" />
</div>
</div>
<div>
<div id="tab2" class="tablink">Tab 2</div>
<div id="plancontenttab2" class="plancontent">
<cq:include path="plandescription2" resourceType="/libs/foundation/components/text" />
</div>
</div>
<div >
<div id="tab3" class="tablink">Tab 3</div>
<div id="plancontenttab3" class="plancontent">
<cq:include path="plandescription3" resourceType="/libs/foundation/components/text" />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//Disable all tabs except first
$("div.plancontent:not(:first)").hide();
//Set clickevent
$('.tablink').click(function(){
$(".tablink").removeClass('selecttab').addClass('plantxt');
var tabid = $(this).attr("id");
$("#"+tabid).addClass('selecttab').removeClass('plantxt');
$(".plancontent").hide();
$("#plancontent"+tabid).show();
});
});
</script>