Dropdown item onClick does not show the overlay correctly - javascript

I want to add a short cut image to every dropdown item, therefore, I have written the following code:
<a class="dropdown-item" id="dropdown_new_line">
<span style="float: left">New Line</span>
<span style="float: right;">
<img class="icon"
src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
</span>
</a>
This looks like the following:
And I want that it looks like the following:
So my question is, what do I have to do so that the highlight color goes over the whole element?

Test this
<a class="dropdown-item clearfix" id="dropdown_new_line">
<span class="float-left">New Line</span>
<span class="float-right">
<img class="icon"
src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
</span>
</a>

You need to clear the floating using this class :
.clearfix{
clear:both;
}
And adding this class over the parent element:
<a class="clearfix dropdown-item" id="dropdown_new_line">
<span style="float: left">New Line</span>
<span style="float: right;">
<img class="icon"
src="{% static "laneDetectionApp/icons/icons8-+-100.png"%}" alt="image of + key">
</span>
</a>

Related

angular way to change image src?

<div class="float-right">
<span class="language dashboard" data-toggle="dropdown">
<img class="current" src="us-flag.png" />
</span>
<div class="dropdown dashboard">
<a href="javascript:" (click)="setch('en');" class="dropdown-item">
<img src="us-flag.png" alt="" />english </a
>
<a href="javascript:" (click)="setch('it');" class="dropdown-item">
<img src="it-flag.png" alt="" />italian </a
>
</div>
</div>
this the jquery way:
$('.dropdown-item').on({
'click': function(){
//do other thing
$('.current').attr('src','it-flag.png');
}
});
am using angular 6
looking to write it in angular way without using jquery, however not familiar with it..
looking to load the logic at
ngOnInit() {
//assign from default database language setting
var dbflag = "it";
//assign $('.current').attr('src','it-flag.png');
}
setch(){
//change flag class="current"
}
any idea guys, for writing it in angular ts way?
you can do it like this on Html :
<div class="float-right">
<span class="language dashboard" data-toggle="dropdown">
<img class="current" src={{flag}} />
</span>
<div class="dropdown dashboard">
<a href="javascript:" (click)="setch('en');" class="dropdown-item">
<img src="us-flag.png" alt="" />english </a
>
<a href="javascript:" (click)="setch('it');" class="dropdown-item">
<img src="it-flag.png" alt="" />italian </a
>
</div>
</div>
on ts file declare a new variable and assign img name on it:
flag :string;
setch(fl){
if (fl == 'it') {
this.flag = 'it-flag.png"'
} else {
this.flag = 'us-flag.png'
}
}
you can do using angular binding.Change src to [src]
<div class="float-right">
<div class="dropdown dashboard">
<a href="javascript:" (click)="setch('it');" class="dropdown-item">
<img [src]="displayedImage" alt="">italian </a
>
</div>
</div>
in component.ts , you need to declare a variable called displayedImage.
this.displayedImage='it-flag.png';

Looping a tag "<a>" with routerLink throw error?

I am new to Angular. Here is my code. The code below throws an error. If I replace the tag <a> with a button it works. You can view error in my sc https://i.stack.imgur.com/qDaw4.png
<div class="item userItem" *ngFor="let friend of friends">
<a class="btn-ask icon-caret-right" routerLink="/{{friend.username}}">
Ask
<fa-icon [icon]="faAngleRight"></fa-icon>
</a>
<a class="icon-star" routerLink="/{{friend.username}}">
<fa-icon [icon]="faStar"></fa-icon>
</a>
<img class="userAvatar userMood userMood-26"src="https://d15eldcwi10xcl.cloudfront.net/ee7/e9161/a3e2/43c8/b27b/c52a5703c5f9/thumb/1005453.jpg" alt="">
<a class="userItem_content" routerLink="/{{friend.username}}">
<span class="userName">{{friend.name}}</span>
<span class="userName" dir="ltr">#{{friend.username}}</span>
</a>
</div>

Changing menu background color when selected particular menu in sidebar

How to change the menu background color when selected sidebar menus in pages? As I created this sidebar menu in different html file (named as sidebar.html) and included that html file in my main page. Here is my code:
Sidebar.html
<div id="menuwrapper" >
<ul>
<li>
<a href="#"><img src="image/dashboard-icon.png" id="logimg" alt="Smiley face" height="" width="">
<strong style="margin-left: 7px;"> Dashboard</strong>
<span class="glyphicon glyphicon-menu-right" style="padding-left: 113px; font-weight: bold;"></span>
</a>
</li>
<li>
<a href="#"><img src="image/em_current_openings_icon.png" id="logimg" alt="Smiley face" height="" width="">
<strong style="margin-left: 7px;font-family: sans-serif;">Curent Openings</strong>
<span class="glyphicon glyphicon-menu-right" style="padding-left: 88px; font-weight: bold;"></span>
</a>
</li>
<li>
<a href="renumeration.html"> <img src="image/em_remuneration_icon.png" id="logimg" alt="Smiley face" height="" width="">
<strong style="margin-left: 7px;font-family: sans-serif;">Remuneration</strong>
<span class="glyphicon glyphicon-menu-right" style="padding-left: 103px; font-weight: bold;"></span>
</a>
</li>
</ul>
</div>
renumeration.html
<html>
<head>
</head>
<body>
<div ng-include src="'sidebar.html'"></div>
</body>
</html>
I think what you meant is simple :hover css pseudo-selector?
Try adding this to page:
<style>
li:hover{
background-color: #ccc;
}
</style>
Or there is also a :active selector
As you have added jQuery tag into the question, below code should work.
$('li').click(function(){
$(this).css('background-color', 'red');
});
But from the code it looks like you are trying to use Angular (I can be wrong here). If yes, don't use jquery solution. Try to solve this requirement using ng-style/ng-class OR write a custom directive for the menu items.

Hover Icons in Justified Gallery

I am creating images grid and I am using the following library Justified Gallery. The hover effect is working fine for the img-alt attribute. but I want to display some icons with links on the hover.
Just like the following picture
Take a look the the following Fiddle
https://jsfiddle.net/zvj2o7fy/1/embedded/result/
<div id="justifiedGallery">
<a href="#" title="What's your destination?">
<img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Just in a dream Place">
<img alt="Just in a dream Place" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Il Capo at Palermo">
<img alt="Il Capo at Palermo" src="http://lorempixel.com/300/226/?1" />
</a>
<a href="#" title="Erice">
<img alt="Erice" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/127/300/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/440/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/227/340/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
</div>
Please help me to create this.
as per documentation(http://miromannino.github.io/Justified-Gallery/captions/)
remove title attribute and add a div with class caption
just like
<a href="#">
<img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
<div class="caption">
<div class="icon-cart">
<img src="https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png"/>
</div>
</div>
</a>
in this div you can add any thing.
If you need links on caption, need a small structure change like
<div id="justifiedGallery">
<div>
<a href="http://lorempixel.com/340/227/?1">
<img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
</a>
<div class="caption">
<a href="#">
<i class="fa fa-shopping-cart"></i>
</a>
<a href="#">
<i class="fa fa-cloud-download"></i>
</a>
</div>
</div>
<div>
<a href="http://lorempixel.com/340/227/?1">
<img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
</a>
<div class="caption">
<a href="#">
<i class="fa fa-shopping-cart"></i>
</a>
<a href="#">
<i class="fa fa-cloud-download"></i>
</a>
</div>
</div>
</div>
Justified Gallery recommends using the Colorbox jQuery library inside of a callback to achieve what you are trying to do. Colorbox controls a caption lightbox div that gets shown on hover.
If you look at the Colorbox 'multiple galleries with one call' demo, you'll see you can add custom icons for each image by adding a hidden div called caption inside of the gallery container:
<div class="container">
<a href="image.jpg" class="jg-entry cboxElement">
<img alt="Alt Message" src="image.jpg">
<div class="caption">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</a>
</div>
To invoke the captions and make them appear via JS, you'll make your call to Colobox inside of justified gallery's callback via the .jg-complete class. Inside of the callback, the colorbox library is invoked with the necessary parameters (like opacity and transition shown in the code sample below) to get your icons fading into view exactly you would like.
JS:
$('.container').justifiedGallery({
rowHeight : 50
}).on('jg.complete', function () {
$(this).find('a').colorbox({
maxWidth : '80%',
maxHeight : '80%',
opacity : 0.8,
transition : 'elastic',
current : ''
});
});
You can dynamically replace the caption with whatever you like. Here's a quick solution.
$("img").mouseenter(function(){
$(this).siblings(".caption").html("<div><a href='#'><img src='source'></a>");
});
Use jquery hover selector to set the display of icons
The default display of icons should be none in css
This should help
https://codeshare.io/IGavT

Fancybox looping through multiple albums

I found this question unanswered in Google Groups and I'm facing the same bug in Fancybox.
I have more image galleries on one page. When I go to the next image
with the next prev buttons, and so on, I'll get to the images from the
other gallery.
With lightbox it's possible to do something like:
<a href="url" rel="fancybox[gallery1]" >link</a>
and I'll get all the images from
gallery1 in an image gallery. My albums are dynamic so I can't do it
in my javascript file.
Is this possible?
How would we control this navigation?
<div class="Album" />
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery0">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery1">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
This is the code I have where every album holds a number of images. When i hit the last image of the first album and navigate next I get to the first pic of the second album. But I want to cycle back to the first image of the same abum
The code you pasted contains a lot of errors...
You have multiple div's with the same id, and the attributes aren't contained within the quotes, in both <div class="AlbumImg"> there are a unmatched closing tag </a>. I'm not so sure that any of this matters for your example but you should definitely look in to it. And as Ruben said fancybox should work with the rel attribute as well, just like lightbox.
Your code should look something like this:
<div class="albums">
<div class="gallery1">
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
<div class="gallery2">
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
</div>
And if you want your galleries to cycle you have to pass a parameter to fancybox. See the documentation. Should look like this:
$(document).ready(function() {
$('a').fancybox({
'cyclic':true
});
});
<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg">
this should work? don't forget the '-'
if it doenst work, can you provide the jquery code?

Categories