I am working with semantic ui and got stuck with Notification menu implementation in menu bar.
I am able to setup the popup with a list but i am getting small list item squeezed vertically , i need them to be horizontally relaxed .
Below is the html i am working with .
<div class="ui fixed stackable menu">
<a class="item" href="index.php"> <img src="logo.png" class="image"></a>
<a class="item">My Project</a>
<div class="right menu">
<div class="item">
<i class="bell outline icon"></i>
<div class="ui teal circular mini label">4</div>
<div class="ui wide notification popup bottom transition ">
<div class="ui link celled selection list">
<div class='item'>
<div class='content'>
<a class='header'>Millan kumar</a>
<span class='time'>2 hrs ago</span>
<div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div>
<div class='extra'>Thanks you for your support</div>
</div>
</div>
</div>
</div>
</div>
<a class="item" href="profile.php">Profile</a>
<a class="item" href="logout.php">Logout</a>
</div>
</div>
Javascript:
$('.teal.label')
.popup({
on: 'click'
});
JS Fiddle :
https://jsfiddle.net/jfk4wkb1/2/
I have tried putting up the things on JS Fiddle , but In there popup is not coming up even , but on my local environment popup is ok but it is vertically squeezed.
Like this: Fiddle link
You did not add jquery in your fiddle external resource . Also i add some padding and width to looks good .
<div class="ui link celled selection list" style ="padding: 20px;width: 300px;">
HTML:
<div class="ui fixed stackable menu">
<a class="item" href="index.php"> <img src="logo.png" class="image"></a>
<a class="item">My Project</a>
<div class="right menu">
<div class="item">
<i class="bell outline icon"></i>
<div class="ui teal circular mini label">4</div>
<div class="ui wide notification popup bottom right transition ">
<div class="ui link celled selection list" style ="padding: 20px;width: 300px;">
<div class='item'>
<div class='content'>
<a class='header'>Millan kumar</a>
<span class='time'>2 hrs ago</span>
<div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div>
<div class='extra'>Thanks you for your support</div>
</div>
</div>
</div>
</div>
</div>
JS:
$('.teal.label')
.popup({
on: 'click'
});
Related
My page is basically split in two parts:
<div *ngIf="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div *ngIf="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
The point is that the accordion in initalState works fine, but the one in not initial state not - no reaction on a click on that element. In my case it is easy to make a work-around, but how should I do it without a work-around? How can I make the second accordion call:
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
Use [hidden] attribute, when you use *ngIf the element is not created in the dom so jQuery can not init the accordion on it.
<div [hidden]="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div [hidden]="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
I am trying to include Semantic-UI dropdowns inside a table with many columns, which has a horizontal scroll bar.
When clicking a dropdown, the options are hidden inside the div.
fiddle:
http://jsfiddle.net/rotemx/n0azk0jc/
code:
<div id="wrapper">
<div id="content">
<div style="width: 500px">
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
</div>
</div>
screenshot:
quesiton:
How can I make the dropdowns visible ?
With your current setup, you can't. Anything inside the element with overflow: none cannot be shown outside the element boundaries.
I have two cards and I am firing an onClick() event to create a dimmer on top of the card image if a user clicks on Like button (heart icon). I am trying to create the dimmer on the card image in which user clicked the heart icon.
I tried placing a condition :
if (e.target !== this)
return;
But it did not work. In real webpage, I will have a long list of cards with no identifier where I can specify the image to be dimmed. Is it possible in this scenario?
JSFiddle
So you're trying to limit your interaction to the currently selected image? Also, rather than reference a fiddle, post your working (or non-working) code here. Easier all around.
jQuery(document).ready(function($) {
$(document).on('click', '.loveit', function(e) {
e.preventDefault();
$(this).parents(".card").find('.imglove')
.dimmer('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>
Updated fiddle.
You should use the current clicked jQuery object $(this) instead to target the related .imglove in the same .card :
$(this).closest('.card').find('.imglove').dimmer('show');
NOTE : The .closest('.card') is used to get the related card with clicked icon loveit.
Hope this helps.
$(function() {
$(document).on('click', '.loveit', function(e) {
e.preventDefault();
$(this).closest('.card').find('.imglove').dimmer('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script>
<link href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>
<div class="ui card">
<div class="content">
<div class="right floated meta">14h</div>
<img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
</div>
<div class="image imglove">
<div class="ui dimmer">
<div class="content">
<div class="center">
<h2 class="ui inverted header">Title</h2>
<img class="ui avatar image" src="http://www.animatedimages.org/data/media/373/animated-heart-image-0455.gif">
</div>
</div>
</div>
<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<span class="right floated">
<i class="heart outline like icon loveit"></i>
17 likes
</span>
<i class="comment icon"></i>
3 comments
</div>
<div class="extra content">
<div class="ui large transparent left icon input">
<i class="heart outline icon"></i>
<input type="text" placeholder="Add Comment...">
</div>
</div>
</div>
Target it parent with class card then find class imglove and add dimmer to it
jQuery(document).ready(function($) {
$(document).on('click', '.loveit', function(e) {
$(this).parents('.card').find('.imglove').dimmer('show');
});
});
DEMO
I'm new with Sematic UI and jQuery, and I want to show a pop-up when I click on button "Browse1", not on "Browse2" or "Browse3.
But the pop-up also shows when I click anywhere on my menu. How can I restrict the pop-up, so it only displays when clicking on "Browse1"?
Why doesn't the following work?
$(".ui.menu").find("a:first").popup({on: 'click'});
Here's my code:
$(".ui.menu").popup({on: 'click'});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>
<div class="ui menu">
<a class="browse item">
Browse1 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse2 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse3 <i class="dropdown icon"></i>
</a>
</div>
<div class="ui fluid popup bottom left transition hidden">
<div class="ui four column relaxed equal height divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colored</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
You need to use the Semantic UI way of assigning a popup to the menu element (in your case the first item). Check this script below I wrote for you.
$('.ui.menu .item:first-child').popup({
popup : $('.ui.popup'),
on : 'click'
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>
<div class="ui menu">
<a class="browse item">
Browse1 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse2 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse3 <i class="dropdown icon"></i>
</a>
</div>
<div class="ui fluid popup bottom left transition hidden">
<div class="ui four column relaxed equal height divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colored</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
I'm new in Semantic-UI and web development and I can't make the popup menu work. Actually I'm trying to create the popup menu example in this page and the document doesn't tell me to run any javascript etc. I've created a jsfiddle here:
https://jsfiddle.net/jhg9df8t/
The code is:
<div class="ui menu">
<a class="browse item">
Browse
<i class="dropdown icon"></i>
</a>
</div>
<div class="ui fluid popup top left transition hidden">
<div class="ui four column relaxed equal height divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colored</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
You would need to initialize the popup as follows.
$('.example .menu .browse').popup({
inline : true,
hoverable: true,
position : 'bottom left',
delay: {
show: 300,
hide: 800
}
});
This is from Popup documentation (.example class element is not included in the code you copied from semantic ui. So if you dont have that element with example class in your code I would suggest updating initialization without it). Refer to it for more information.
http://semantic-ui.com/modules/popup.html#/examples
Also I think you might need to include JS & CSS associated with popup plugin.
If you read carefully here http://semantic-ui.com/collections/menu.html#popup-menu follow the link to popup and see if theres any additional JS and/or CSS for it.
I hope it helps.